/* ============================================================
   SEIIKI RETREAT — REBRAND DRAFT
   Shared stylesheet. Design language carried over from the live
   site (Playfair Display + Inter, monsoon / jungle / terracotta).
   DRAFT ONLY — not deployed.
   ============================================================ */

:root{
  --monsoon-black:#1A1A1A; --volcanic-stone:#2D2D2D; --rice-paper:#F5F3EF; --mist-white:#FAFAFA;
  --jungle-canopy:#3D4A3A; --ocean-depth:#4A5568; --terracotta:#B8956B; --monsoon-grey:#8B8680;
  --rule: rgba(26,26,26,.12);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--rice-paper); color:var(--monsoon-black); font-family:'Inter',sans-serif;
  position:relative; overflow-x:hidden;
}
/* fine film-grain texture over everything */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:9000; opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
h1,h2,h3,h4{font-family:'Playfair Display',Georgia,serif; font-weight:400; line-height:1.15;}
a{color:inherit; text-decoration:none;}
img{display:block; max-width:100%;}

.eyebrow{ font-family:'Inter',sans-serif; font-weight:600; font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--jungle-canopy); display:block; margin-bottom:14px; }
.eyebrow.light{ color:var(--terracotta); }

/* scroll reveal */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){ .reveal{opacity:1; transform:none;} html{scroll-behavior:auto;} }

.progress-bar{ position:fixed; top:0; left:0; height:2px; background:var(--jungle-canopy); z-index:10001; width:0%; }

/* draft badge (remove before going live) */
.draft-badge{
  position:fixed; bottom:18px; right:18px; z-index:10002;
  background:var(--monsoon-black); color:var(--mist-white); font-family:'Inter',sans-serif;
  font-size:10px; letter-spacing:.18em; text-transform:uppercase; padding:8px 14px; border-radius:2px;
  opacity:.85; box-shadow:0 8px 24px rgba(0,0,0,.25);
}

/* ===== NAV ===== */
.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:9500; height:84px;
  display:flex; align-items:center; background:rgba(245,243,239,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--rule);
}
.nav-inner{ width:100%; max-width:1280px; margin:0 auto; padding:0 40px; display:flex; align-items:center; justify-content:space-between; }
.logo{ display:flex; align-items:center; flex-shrink:0; font-family:'Playfair Display',serif; font-size:22px; letter-spacing:.04em; }
/* logo image: fixed height, auto width, never shrinks/warps at small widths */
.logo-img{ display:block; height:72px; width:auto; object-fit:contain; }
@media (max-width:900px){ .logo-img{ height:57px; } }
.nav-links{ display:flex; gap:36px; font-size:13px; letter-spacing:.08em; text-transform:uppercase; }
.nav-links a{ opacity:.75; transition:opacity .3s ease, color .3s ease; }
.nav-links a:hover, .nav-links a.active{ opacity:1; color:var(--jungle-canopy); }
.nav-cta{ background:var(--monsoon-black); color:var(--mist-white); padding:13px 26px; border-radius:2px; font-size:12px; letter-spacing:.08em; text-transform:uppercase; transition:background .3s ease; }
.nav-cta:hover{ background:var(--jungle-canopy); }
@media (max-width:900px){ .nav-links{display:none;} }

/* ===== BUTTONS ===== */
.btn-primary{ display:inline-block; background:var(--monsoon-black); color:var(--mist-white); border:none; padding:18px 42px; border-radius:2px; font-family:'Inter',sans-serif; font-weight:500; font-size:13px; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; transition:all .4s ease; }
.btn-primary:hover{ background:var(--jungle-canopy); transform:translateY(-2px); box-shadow:0 12px 32px rgba(26,26,26,.2); }
.btn-secondary{ display:inline-block; background:transparent; color:var(--monsoon-black); border:1px solid var(--monsoon-black); padding:18px 42px; border-radius:2px; font-family:'Inter',sans-serif; font-weight:500; font-size:13px; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; transition:all .4s ease; }
.btn-secondary:hover{ background:var(--monsoon-black); color:var(--mist-white); }
.btn-secondary.light{ border-color:var(--mist-white); color:var(--mist-white); }
.btn-secondary.light:hover{ background:var(--mist-white); color:var(--monsoon-black); }

/* ===== HERO ===== */
.hero{ position:relative; min-height:100vh; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.hero-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(.95) contrast(1.02) brightness(1.18); }
.hero-overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(26,26,26,.10) 0%, rgba(26,26,26,.26) 55%, rgba(26,26,26,.5) 100%); }
.hero-content{ position:relative; z-index:2; text-align:center; color:var(--mist-white); max-width:760px; padding:32px; transform:translateY(13vh); }
.hero-content h1{ font-size:clamp(40px,7vw,76px); font-weight:300; letter-spacing:-.02em; margin-bottom:22px; }
.hero-content .sub{ font-size:18px; line-height:1.6; opacity:.88; margin-bottom:36px; max-width:520px; margin-left:auto; margin-right:auto; }
.hero-actions{ display:flex; gap:18px; justify-content:center; flex-wrap:wrap; }
.scroll-cue{ position:absolute; bottom:32px; left:50%; transform:translateX(-50%); color:var(--mist-white); opacity:.7; font-size:18px; animation:bounce 2.2s infinite; z-index:2; }
@keyframes bounce{ 0%,100%{transform:translate(-50%,0);} 50%{transform:translate(-50%,8px);} }

/* section shell */
section{ max-width:1280px; margin:0 auto; padding:140px 40px; }
@media (max-width:820px){ section{ padding:90px 24px; } }
.section-full{ max-width:none; padding-left:0; padding-right:0; }

/* ===== IMAGE PLACEHOLDERS ===== */
.ph{ position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden;
  background:linear-gradient(150deg,#E9E4D9 0%, #F1ECE3 45%, #E4DDD0 100%); border:1px solid var(--rule); border-radius:4px; }
.ph::after{ content:""; position:absolute; inset:0; opacity:.12; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n2)'/%3E%3C/svg%3E"); }
.ph-inner{ position:relative; z-index:2; text-align:center; padding:24px; max-width:340px; }
.ph-icon{ display:inline-block; width:42px; height:42px; margin-bottom:14px; opacity:.55;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233D4A3A' stroke-width='1.3'%3E%3Crect x='3' y='5' width='18' height='14' rx='1.5'/%3E%3Cpath d='M3 16l5-5 4 4 3-3 6 6'/%3E%3Ccircle cx='8' cy='9' r='1.4'/%3E%3C/svg%3E") center/contain no-repeat; }
.ph-tag{ font-family:'Inter',sans-serif; font-size:10px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--jungle-canopy); display:block; margin-bottom:8px; }
.ph-cap{ font-family:'Inter',sans-serif; font-size:13px; line-height:1.5; color:var(--monsoon-grey); }
.ph-onlight{ background:linear-gradient(150deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.25); }
.ph-onlight .ph-tag{ color:var(--mist-white); }
.ph-onlight .ph-cap{ color:rgba(250,250,250,.85); }
.ph-onlight .ph-icon{ background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FAFAFA' stroke-width='1.3'%3E%3Crect x='3' y='5' width='18' height='14' rx='1.5'/%3E%3Cpath d='M3 16l5-5 4 4 3-3 6 6'/%3E%3Ccircle cx='8' cy='9' r='1.4'/%3E%3C/svg%3E") center/contain no-repeat; }

/* ===== PART 1 — ANCHOR QUOTE & WELCOME ===== */
.anchor-welcome{ text-align:center; max-width:900px; }
.anchor-welcome .welcome{ font-size:clamp(32px,4.5vw,52px); font-weight:400; margin-bottom:34px; }
.anchor-welcome .anchor-quote{ font-family:'Playfair Display',serif; font-style:italic; font-weight:400;
  font-size:clamp(24px,3.4vw,38px); line-height:1.4; color:var(--jungle-canopy); margin:0 auto 30px; max-width:760px; }
.anchor-welcome .mission{ font-size:18px; line-height:1.8; opacity:.8; max-width:640px; margin:0 auto; }
.anchor-rule{ width:60px; height:2px; background:var(--terracotta); margin:0 auto 40px; }
/* welcome heading sits on the page (cream); quote + mission sit inside a firm-edged image band below */
.welcome-head{ text-align:center; max-width:900px; margin:0 auto; padding:120px 32px 56px; }
.welcome-head .welcome{ font-size:clamp(32px,4.5vw,52px); font-weight:400; }
.welcome-band{ position:relative; width:100%; min-height:92vh; overflow:hidden; display:flex; align-items:flex-start; justify-content:center; }
.welcome-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center bottom; }
.welcome-text{ position:relative; z-index:3; text-align:center; padding:8vh 32px 0; color:var(--mist-white); text-shadow:0 2px 22px rgba(0,0,0,.55); }
/* overlay text on the photo is white for legibility */
.welcome-text .anchor-quote{ color:var(--mist-white); }
.welcome-text .mission{ color:var(--mist-white); opacity:.95; }

/* ===== PART 2 — CORE PHILOSOPHY (two column) ===== */
.philosophy{ display:grid; grid-template-columns:.95fr 1.05fr; gap:80px; align-items:stretch; }
.philosophy .ph{ height:560px; }
.philosophy-text h2{ font-size:clamp(30px,3.6vw,42px); margin-bottom:26px; }
.philosophy-text p{ font-size:17px; line-height:1.8; opacity:.82; margin-bottom:24px; max-width:540px; }
.philosophy-text p.lead-out{ font-weight:500; opacity:1; color:var(--jungle-canopy); }
@media (max-width:900px){ .philosophy{ grid-template-columns:1fr; gap:40px; } .philosophy .ph{ height:360px; } }
.philosophy-img{ width:100%; height:100%; min-height:620px; object-fit:cover; object-position:center bottom; border-radius:4px; border:1px solid var(--rule); }
@media (max-width:900px){ .philosophy-img{ height:auto; min-height:0; aspect-ratio:4/5; } }

/* ===== WE DESIGN & DELIVER (offerings) — cards left, image right ===== */
.deliver{ display:grid; grid-template-columns:1.3fr .7fr; gap:60px; align-items:stretch; }
.deliver-head{ max-width:720px; margin-bottom:36px; }
.deliver-head h2{ font-size:clamp(30px,3.6vw,44px); }
.deliver-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.deliver-media{ height:100%; }
.deliver-media img{ width:100%; height:100%; min-height:100%; object-fit:cover; object-position:center; border-radius:4px; border:1px solid var(--rule); }
.deliver-card{ position:relative; background:var(--mist-white); border:1px solid var(--rule); border-radius:4px;
  padding:40px 26px; text-align:center; overflow:hidden; transition:transform .5s cubic-bezier(.4,0,.2,1), box-shadow .5s ease; }
.deliver-card::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--terracotta); transform:scaleX(0); transform-origin:left; transition:transform .5s ease; }
.deliver-card:hover{ transform:translateY(-6px); box-shadow:0 20px 40px rgba(26,26,26,.08); }
.deliver-card:hover::before{ transform:scaleX(1); }
.deliver-num{ font-family:'Playfair Display',serif; font-size:22px; font-weight:300; color:var(--terracotta); display:block; margin-bottom:16px; }
.deliver-card h3{ font-family:'Inter',sans-serif; font-weight:600; font-size:14px; letter-spacing:.08em; text-transform:uppercase; line-height:1.5; color:var(--jungle-canopy); }
@media (max-width:900px){ .deliver{ grid-template-columns:1fr; gap:40px; } .deliver-media img{ min-height:auto; height:420px; } }
@media (max-width:560px){ .deliver-grid{ grid-template-columns:1fr; } }

/* ===== WHY HOST WITH SEIIKI (reworked — 4 pillars) ===== */
.whywork-head{ max-width:760px; margin-bottom:60px; }
.whywork-head h2{ font-size:clamp(32px,4.2vw,52px); }
.whywork-grid{ display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.whywork-card{ background:var(--mist-white); border:1px solid var(--rule); border-radius:4px; padding:40px; transition:transform .5s cubic-bezier(.4,0,.2,1), box-shadow .5s ease; }
.whywork-card:hover{ transform:translateY(-6px); box-shadow:0 20px 40px rgba(26,26,26,.08); }
.whywork-card h3{ font-size:23px; margin-bottom:14px; }
.whywork-card p{ font-size:16px; line-height:1.75; opacity:.8; }
@media (max-width:820px){ .whywork-grid{ grid-template-columns:1fr; } }

/* ===== PART 3 — LANDSCAPE AS A LIVING ELEMENT (full bleed) ===== */
.living{ position:relative; min-height:80vh; display:flex; align-items:center; justify-content:center; padding:120px 40px; overflow:hidden; }
.living .ph{ position:absolute; inset:0; border:none; border-radius:0;
  background:linear-gradient(150deg,#2c3730,#3D4A3A 55%,#2a3540); }
.living .ph .ph-inner{ opacity:.7; }
.living-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.living-overlay{ position:absolute; inset:0; background:rgba(26,26,26,.22); }
/* card at 20% opacity so the SK 11 photo reads through it */
.living-card{ position:relative; z-index:3; background:rgba(26,26,26,.2); backdrop-filter:blur(2px);
  border:1px solid rgba(250,250,250,.22); border-radius:6px; padding:56px clamp(28px,4vw,64px); max-width:720px; color:var(--mist-white); text-align:center; text-shadow:0 2px 18px rgba(0,0,0,.55); }
.living-card h2{ font-size:clamp(28px,3.6vw,44px); margin-bottom:26px; }
.living-card p{ font-size:16px; line-height:1.8; opacity:.9; margin-bottom:20px; }
.living-card p:last-child{ margin-bottom:0; }

/* ===== PART 4 — WHY HOST / 3 STRATEGIC TRUTHS ===== */
.truths-head{ max-width:720px; margin-bottom:64px; }
.truths-head h2{ font-size:clamp(30px,3.6vw,42px); }
.truths{ display:grid; gap:0; border-top:1px solid var(--rule); }
.truth{ display:grid; grid-template-columns:140px 1fr; gap:40px; align-items:start; padding:44px 0; border-bottom:1px solid var(--rule); transition:background .4s ease; }
.truth:hover{ background:rgba(184,149,107,.06); }
.truth-num{ font-family:'Playfair Display',serif; font-size:clamp(40px,5vw,64px); font-weight:300; color:var(--terracotta); line-height:1; }
.truth-body h3{ font-size:23px; margin-bottom:14px; }
.truth-body p{ font-size:16px; line-height:1.75; opacity:.8; max-width:760px; }
@media (max-width:820px){ .truth{ grid-template-columns:1fr; gap:12px; padding:34px 0; } }

/* ===== PART 5 — WHO SEIIKI IS BUILT FOR ===== */
.visionary{ display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.visionary-lead h2{ font-size:clamp(30px,3.6vw,42px); margin-bottom:24px; }
.visionary-lead p{ font-size:17px; line-height:1.8; opacity:.82; max-width:520px; }
.visionary-panel h4{ font-family:'Inter',sans-serif; font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--jungle-canopy); margin-bottom:22px; }
.container-list{ list-style:none; margin-bottom:40px; }
.container-list li{ font-size:16px; line-height:1.6; padding:16px 0 16px 30px; position:relative; border-bottom:1px solid var(--rule); opacity:.9; }
.container-list li:first-child{ border-top:1px solid var(--rule); }
.container-list li::before{ content:""; position:absolute; left:0; top:23px; width:9px; height:9px; border-radius:50%; background:var(--terracotta); }
.capacity{ background:var(--mist-white); border:1px solid var(--rule); border-radius:4px; padding:28px 32px; }
.capacity p{ font-size:15px; line-height:1.7; opacity:.85; }
.capacity strong{ color:var(--jungle-canopy); }
@media (max-width:900px){ .visionary{ grid-template-columns:1fr; gap:44px; } }
.visionary-lead h4{ font-family:'Inter',sans-serif; font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--jungle-canopy); margin:36px 0 20px; }
.visionary-media{ height:100%; }
.visionary-media img{ width:100%; height:100%; min-height:560px; object-fit:cover; border-radius:4px; border:1px solid var(--rule); }
@media (max-width:900px){ .visionary-media img{ min-height:420px; } }

/* ===== PART 6 — HOW IT WORKS ===== */
.howitworks{ background:var(--volcanic-stone); color:var(--mist-white); max-width:none; padding:140px 40px; }
.hiw-inner{ max-width:1280px; margin:0 auto; }
.hiw-intro{ font-family:'Playfair Display',serif; font-weight:300; font-style:italic; font-size:clamp(24px,3.2vw,36px); line-height:1.4; max-width:900px; margin-bottom:80px; }
.hiw-intro .frequency{ color:var(--terracotta); font-style:normal; }
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:36px; }
.step{ border-top:2px solid var(--terracotta); padding-top:28px; }
.step-num{ font-family:'Inter',sans-serif; font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--terracotta); display:block; margin-bottom:16px; }
.step h3{ font-size:22px; line-height:1.25; margin-bottom:16px; color:var(--mist-white); }
.step p{ font-size:15px; line-height:1.75; opacity:.78; }
@media (max-width:900px){ .steps{ grid-template-columns:1fr; gap:44px; } }

/* ===== PART 7 — CTA BAND (flower-feature background) ===== */
.cta-band{ position:relative; text-align:center; overflow:hidden; }
.cta-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.cta-overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(26,26,26,.5), rgba(26,26,26,.66)); }
.cta-inner{ position:relative; z-index:2; max-width:820px; margin:0 auto; padding:0 24px; color:var(--mist-white); }
.cta-band h2{ font-size:clamp(32px,4.6vw,56px); font-weight:300; margin-bottom:24px; }
.cta-band p{ font-size:18px; line-height:1.75; opacity:.9; max-width:620px; margin:0 auto 44px; }

/* ===== CONTACT (ported from live site) ===== */
.contact{ background:var(--volcanic-stone); color:var(--mist-white); max-width:none; padding:140px 40px; }
.contact .eyebrow{ color:var(--terracotta); }
.contact h2{ font-size:42px; margin-bottom:16px; }
.contact .lede{ font-size:16px; opacity:.7; margin-bottom:64px; max-width:480px; }
.contact-grid{ max-width:1280px; margin:0 auto; display:grid; grid-template-columns:1.3fr .7fr; gap:80px; }
.field{ position:relative; margin-bottom:30px; }
.field input, .field textarea{ width:100%; background:transparent; border:none; border-bottom:1px solid rgba(250,250,250,.35); padding:14px 0 8px; font-family:'Inter',sans-serif; font-size:16px; color:var(--mist-white); outline:none; resize:none; transition:border-color .3s ease; }
.field input:focus, .field textarea:focus{ border-color:var(--terracotta); }
.field label{ position:absolute; left:0; top:14px; font-size:14px; color:rgba(250,250,250,.55); pointer-events:none; transition:all .3s ease; }
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label{ transform:translateY(-20px) scale(.85); color:var(--terracotta); }
.thank-you{ display:none; font-family:'Playfair Display',serif; font-size:24px; line-height:1.5; padding:40px 0; }
.contact-side{ display:flex; flex-direction:column; gap:32px; }
.socials{ display:flex; flex-direction:column; gap:14px; font-size:14px; letter-spacing:.05em; text-transform:uppercase; }
.socials a{ opacity:.7; transition:opacity .3s ease; }
.socials a:hover{ opacity:1; color:var(--terracotta); }
@media (max-width:820px){ .contact-grid{ grid-template-columns:1fr; gap:48px; } }

/* ===== FOOTER ===== */
footer{ text-align:center; padding:72px 24px; background:var(--monsoon-black); color:var(--mist-white); }
footer .wordmark{ font-family:'Playfair Display',serif; font-weight:300; font-size:24px; margin-bottom:10px; letter-spacing:.04em; }
footer .foot-line{ font-size:13px; opacity:.55; margin-bottom:22px; }
footer .socials{ display:flex; gap:24px; justify-content:center; font-size:12px; letter-spacing:.08em; text-transform:uppercase; }
footer .socials a{ opacity:.7; transition:opacity .3s ease, color .3s ease; }
footer .socials a:hover{ opacity:1; color:var(--terracotta); }

/* ===== STUB PAGES ===== */
.stub{ min-height:100vh; display:flex; align-items:center; justify-content:center; text-align:center; padding:160px 32px 120px; position:relative; overflow:hidden; }
.stub .ph{ position:absolute; inset:0; border:none; border-radius:0; background:linear-gradient(150deg,#2c3730,#3D4A3A 55%,#2a3540); }
.stub-overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(26,26,26,.55), rgba(26,26,26,.7)); }
.stub-content{ position:relative; z-index:3; color:var(--mist-white); max-width:640px; }
.stub-content h1{ font-size:clamp(40px,6vw,72px); font-weight:300; margin-bottom:20px; }
.stub-content p{ font-size:17px; line-height:1.7; opacity:.85; margin-bottom:36px; }