/* ==========================================================================
   TRUEKEEY — Luxury Interior Design & Consultancy
   Google Ads landing page · single stylesheet
   --------------------------------------------------------------------------
   1. Tokens          6. Scenes
   2. Reset           7. Components
   3. Typography      8. Process
   4. Buttons         9. Form
   5. Chrome         10. Responsive & reduced motion
   ========================================================================== */

/* 1 · TOKENS ============================================================== */
:root{
  --ink:        #0B0C0E;   /* deep charcoal / near black */
  --ink-2:      #121417;
  --ink-3:      #1A1D21;
  --ivory:      #EDEAE4;   /* warm ivory */
  --ivory-dim:  rgba(237,234,228,.62);
  --ivory-faint:rgba(237,234,228,.34);
  --champagne:  #C9A447;   /* the studio's actual logo gold, sampled from the mark */
  --champagne-d:#9A7B36;   /* darker variant for hover/subtler accents */
  --taupe:      #8C8378;
  --stone:      #C9C2B6;
  --beige:      #DDD5C7;
  --hair:       rgba(237,234,228,.14);
  --hair-strong:rgba(237,234,228,.28);

  --serif: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --sans:  "Jost", "Helvetica Neue", Arial, system-ui, sans-serif;

  --pad: clamp(20px, 5vw, 96px);
  --ease: cubic-bezier(.16,.72,.24,1);
  --slow: 1.15s;
  --nav-h: 76px;
}

/* 2 · RESET =============================================================== */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--ink); color:var(--ivory);
  font-family:var(--sans); font-weight:300; font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
button{ font:inherit; color:inherit; }
::selection{ background:var(--champagne); color:var(--ink); }

/* 3 · TYPOGRAPHY ========================================================== */
.display{
  font-family:var(--serif); font-weight:300; letter-spacing:-.012em;
  line-height:1.04; margin:0 0 .5em;
  font-size:clamp(2.15rem, 5.1vw, 4.5rem);
}
.display--lg{ font-size:clamp(2.4rem, 6.2vw, 5.6rem); }
.display--xl{ font-size:clamp(2.6rem, 7.2vw, 6.6rem); }
.display em{ font-style:italic; color:var(--beige); }

.eyebrow{
  font-size:.66rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--champagne); margin:0 0 1.6em; font-weight:400;
}
.lede{
  font-size:clamp(1rem,1.45vw,1.22rem); color:var(--ivory-dim);
  letter-spacing:.01em; margin:0 0 2.4em; max-width:34ch;
}
.body{ color:var(--ivory-dim); max-width:46ch; margin:0 0 1.2em; letter-spacing:.005em; }
.body--dim{ color:var(--ivory-faint); }
.wordmark{
  font-family:var(--sans); font-weight:400; letter-spacing:.42em;
  font-size:.82rem; color:var(--ivory);
}
.wordmark--sm{ font-size:.72rem; }
.wordmark__rule{ display:block; height:1px; background:var(--champagne); width:0; transition:width .8s var(--ease); margin-top:6px; }
.nav__logo:hover .wordmark__rule{ width:100%; }
.nav__logo{ display:inline-flex; flex-direction:column; align-items:flex-start; }
.nav__logo-img{
  display:block; width:auto;
  filter:drop-shadow(0 1px 4px rgba(0,0,0,.55)) drop-shadow(0 0 10px rgba(0,0,0,.3));
}
.foot__logo-img{ display:block; width:auto; }

.wrap{ width:min(1320px, 100%); margin:0 auto; padding-inline:var(--pad); }

/* 4 · BUTTONS ============================================================= */
.btn{
  --bh:56px;
  display:inline-flex; align-items:center; gap:.7em; height:var(--bh);
  padding:0 1.9em; font-size:.74rem; letter-spacing:.2em; text-transform:uppercase;
  font-weight:400; border:1px solid transparent; position:relative; overflow:hidden;
  transition:color .5s var(--ease), background-color .5s var(--ease), border-color .5s var(--ease);
  white-space:nowrap;
}
.btn span{ transition:transform .5s var(--ease); }
.btn:hover span{ transform:translateX(5px); }
.btn--solid{ background:var(--champagne); color:#15161A; }
.btn--solid:hover{ background:var(--ivory); }
.btn--line{ border-color:var(--hair-strong); color:var(--ivory); }
.btn--line:hover{ border-color:var(--champagne); color:var(--champagne); }
.btn--ghost{ color:var(--ivory-dim); padding-inline:0; }
.btn--ghost:hover{ color:var(--champagne); }
.btn--ghost::after{ content:""; position:absolute; left:0; right:0; bottom:16px; height:1px; background:var(--hair-strong); transition:background-color .5s var(--ease); }
.btn--ghost:hover::after{ background:var(--champagne); }
.btn--full{ width:100%; justify-content:center; --bh:62px; }

/* 5 · CHROME (nav, progress, scene counter) =============================== */
.progress{ position:fixed; inset:0 0 auto 0; height:2px; z-index:60; background:transparent; }
.progress span{ display:block; height:100%; width:0; background:var(--champagne); opacity:.85; }

.nav{
  position:fixed; inset:0 0 auto 0; z-index:50; height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between;
  padding-inline:var(--pad);
  transition:background-color .6s var(--ease), backdrop-filter .6s var(--ease), height .6s var(--ease);
}
.nav.is-stuck{ background:rgba(11,12,14,.78); backdrop-filter:blur(14px) saturate(120%); height:64px; border-bottom:1px solid var(--hair); }
.nav__links{ display:flex; gap:2.6rem; }
.nav__links a{
  font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ivory-dim);
  position:relative; padding-block:6px; transition:color .4s var(--ease);
}
.nav__links a::after{ content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--champagne); transition:width .5s var(--ease); }
.nav__links a:hover{ color:var(--ivory); }
.nav__links a:hover::after{ width:100%; }
.nav__cta{ --bh:44px; }

.scenemark{
  transition:opacity .6s var(--ease);
  position:fixed; left:var(--pad); bottom:34px; z-index:40;
  display:flex; align-items:center; gap:.9rem;
  font-size:.62rem; letter-spacing:.28em; text-transform:uppercase; color:rgba(237,234,228,.55);
  pointer-events:none; text-shadow:0 1px 12px rgba(11,12,14,.85);
}
.scenemark #sceneNum{ color:var(--champagne); }
.scenemark__sep{ width:34px; height:1px; background:var(--hair-strong); }

.scrollcue{
  position:absolute; right:var(--pad); bottom:34px; z-index:5;
  display:flex; align-items:center; gap:1rem;
  font-size:.62rem; letter-spacing:.26em; text-transform:uppercase; color:var(--ivory-faint);
}
.scrollcue i{ display:block; width:1px; height:54px; background:linear-gradient(var(--champagne), transparent); animation:cue 2.8s var(--ease) infinite; transform-origin:top; }
@keyframes cue{ 0%{transform:scaleY(.2);opacity:.2} 40%{transform:scaleY(1);opacity:1} 100%{transform:scaleY(.2);opacity:.2} }

/* 6 · SCENES ============================================================== */
.scene{ position:relative; isolation:isolate; }
.scene__media{ position:absolute; inset:0; overflow:hidden; z-index:-1; }
.scene__img, .scene__video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 42%;
}
.scene__video{ opacity:0; transition:opacity 1.6s var(--ease); }
.scene__video.is-playing{ opacity:1; }
.scene__img{ transform:scale(1.04); filter:brightness(1.07) contrast(1.03) saturate(1.02); }

.scene__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(11,12,14,.94) 0%, rgba(11,12,14,.55) 34%, rgba(11,12,14,.18) 66%, rgba(11,12,14,.42) 100%);
}
.scene__scrim--hero{
  background:
    radial-gradient(110% 85% at 16% 74%, rgba(11,12,14,.80) 0%, rgba(11,12,14,.22) 56%, rgba(11,12,14,.06) 100%),
    linear-gradient(to top, rgba(11,12,14,.88) 0%, rgba(11,12,14,.26) 46%, rgba(11,12,14,.34) 100%);
}
.scene--hero .scene__img, .scene--hero .scene__video{ object-position:68% 44%; }
.scene__scrim--soft{ background:linear-gradient(to right, rgba(11,12,14,.55), rgba(11,12,14,.05) 60%, rgba(11,12,14,.35)); }
.scene__scrim--deep{ background:linear-gradient(to top, rgba(11,12,14,.985), rgba(11,12,14,.94) 42%, rgba(11,12,14,.88)); }

/* --- hero --- */
.scene--hero{ min-height:100svh; display:flex; align-items:flex-end; padding:calc(var(--nav-h) + 40px) var(--pad) clamp(96px,14vh,180px); }
.hero__inner{ max-width:min(58rem, 100%); text-shadow:0 2px 34px rgba(11,12,14,.55); }
.hero__actions{ display:flex; flex-wrap:wrap; align-items:center; gap:1.6rem 2.2rem; margin-bottom:2.6rem; }
.hero__meta{ font-size:.66rem; letter-spacing:.28em; text-transform:uppercase; color:var(--ivory-faint); margin:0; }

/* --- full-bleed scene --- */
.scene--full{ min-height:100svh; display:flex; align-items:flex-end; padding:clamp(80px,12vh,160px) var(--pad); }
.scene__caption{ max-width:44rem; }
.scene__caption--center{ margin-inline:auto; text-align:center; }
.scene__caption--center .body, .scene__caption--center .lede{ margin-inline:auto; }
.scene__caption--right{ margin-left:auto; text-align:right; }
.scene--final{ align-items:center; text-align:center; }
.scene--final .btn{ margin-top:1.4rem; }

/* --- split scene --- */
.scene--split{
  display:grid; grid-template-columns:1.05fr 1fr; align-items:stretch;
  min-height:100svh; background:var(--ink);
}
.scene--split .scene__media--half{ position:relative; inset:auto; z-index:0; min-height:60svh; }
.scene--reverse{ grid-template-columns:1fr 1.05fr; }
.scene--reverse .scene__media--half{ order:2; }
.scene__panel{
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(56px,9vw,132px) var(--pad);
  border-left:1px solid var(--hair); position:relative;
}
.scene__panel::before{
  content:""; position:absolute; left:var(--pad); top:clamp(40px,7vw,96px);
  width:46px; height:1px; background:var(--champagne); opacity:.7;
}
.scene--reverse .scene__panel{ border-left:0; border-right:1px solid var(--hair); }

/* --- materials --- */
.scene--materials{ min-height:100svh; display:flex; align-items:center; padding:clamp(96px,14vh,180px) var(--pad); }
.materials__inner{ width:min(1320px,100%); margin-inline:auto; }
.matgrid{ display:grid; grid-template-columns:repeat(5,1fr); gap:1px; margin-top:clamp(40px,6vw,72px); background:var(--hair); border:1px solid var(--hair); }
.matgrid li{ background:rgba(11,12,14,.72); padding:clamp(20px,2.4vw,34px); transition:background-color .6s var(--ease), transform .6s var(--ease); }
.matgrid li:hover{ background:rgba(201,164,71,.10); transform:translateY(-4px); }
.matgrid h3{
  font-family:var(--serif); font-weight:300; font-size:1.5rem; margin:0 0 .6rem; color:var(--beige);
}
.matgrid p{ margin:0; font-size:.82rem; color:var(--ivory-faint); line-height:1.55; }

/* 7 · COMPONENTS ========================================================== */
.spec{ margin:0 0 2.6rem; border-top:1px solid var(--hair); }
.spec li{
  display:flex; align-items:baseline; gap:1.4rem; padding:1.05rem .2rem;
  border-bottom:1px solid var(--hair); font-size:1.02rem; color:var(--ivory-dim);
  transition:color .45s var(--ease), padding-left .45s var(--ease);
}
.spec li:hover{ color:var(--ivory); padding-left:.7rem; }
.spec li span{ font-size:.62rem; letter-spacing:.22em; color:var(--champagne); }

.chips{ display:flex; flex-wrap:wrap; gap:.55rem; margin-top:1.8rem; }
.chips li{
  font-size:.62rem; letter-spacing:.22em; text-transform:uppercase;
  border:1px solid var(--hair); padding:.62em 1.15em; color:var(--ivory-dim);
}
.chips--quiet li{ border-color:var(--hair); color:var(--ivory-faint); }

/* 8 · PROCESS ============================================================= */
.section{ position:relative; padding-block:clamp(96px,14vh,190px); }
.section--process{ background:linear-gradient(var(--ink-2), var(--ink)); border-top:1px solid var(--hair); padding-block:clamp(96px,13vh,170px) clamp(80px,10vh,130px); }
.timeline{ margin-top:clamp(48px,7vw,86px); border-top:1px solid var(--hair); }
.timeline li{
  display:grid; grid-template-columns:6.5rem minmax(11rem,18rem) 1fr; gap:clamp(1rem,4vw,3.4rem);
  align-items:start; padding:clamp(26px,3.4vw,44px) 0; border-bottom:1px solid var(--hair);
  transition:background-color .6s var(--ease);
}
.timeline li:hover{ background:rgba(237,234,228,.02); }
.timeline__num{ font-family:var(--serif); font-size:1.9rem; color:var(--champagne); line-height:1; }
.timeline h3{ font-family:var(--serif); font-weight:300; font-size:clamp(1.6rem,2.6vw,2.3rem); margin:0; letter-spacing:-.01em; }
.timeline p{ margin:0; color:var(--ivory-faint); max-width:52ch; }

/* 9 · FORM ================================================================ */
.section--form{ position:relative; padding-block:clamp(96px,14vh,170px) clamp(72px,9vh,110px); overflow:hidden; }
.form__bg{ position:absolute; inset:0; z-index:-1; }
.form__bg .scene__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(.92) saturate(.96); }
.wrap--form{ width:min(1120px,100%); display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(40px,6vw,90px); align-items:start; }
.form__head{ position:sticky; top:calc(var(--nav-h) + 32px); }

.form{
  display:grid; grid-template-columns:1fr 1fr; gap:1.5rem 1.6rem;
  background:rgba(11,12,14,.55); backdrop-filter:blur(6px);
  border:1px solid var(--hair); padding:clamp(24px,3vw,40px);
}
.field{ display:flex; flex-direction:column; }
.field--wide{ grid-column:1 / -1; }
.field label{
  font-size:.62rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ivory-faint); margin-bottom:.75rem;
}
.field label i{ color:var(--champagne); font-style:normal; }
.field input, .field select, .field textarea{
  appearance:none; -webkit-appearance:none;
  background:rgba(237,234,228,.035); border:1px solid var(--hair); border-radius:0;
  color:var(--ivory); font:300 1rem/1.5 var(--sans); padding:.95rem 1rem;
  transition:border-color .45s var(--ease), background-color .45s var(--ease);
  width:100%;
}
.field textarea{ resize:vertical; min-height:120px; }
.field select{
  background-image:linear-gradient(45deg,transparent 50%,var(--champagne) 50%),linear-gradient(135deg,var(--champagne) 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(1.35rem), calc(100% - 15px) calc(1.35rem);
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat;
  padding-right:2.6rem;
}
.field select option{ background:var(--ink-3); color:var(--ivory); }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--champagne); background:rgba(237,234,228,.06);
}
.field input::placeholder, .field textarea::placeholder{ color:rgba(237,234,228,.28); }
.field.is-invalid input, .field.is-invalid select{ border-color:#B4644F; }
.err{ color:#C98673; font-size:.72rem; margin-top:.5rem; min-height:1em; letter-spacing:.02em; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.form__submit{ margin-top:.6rem; }
.form__note{ font-size:.74rem; color:var(--ivory-faint); margin:1rem 0 0; max-width:52ch; }
.form__status{ font-size:.8rem; color:var(--champagne); margin:.9rem 0 0; min-height:1.2em; }

.thanks{ grid-column:1 / -1; text-align:center; padding:clamp(40px,8vw,90px) 0; }
.thanks__mark{ display:block; width:44px; height:44px; margin:0 auto 2rem; border:1px solid var(--champagne); position:relative; }
.thanks__mark::after{ content:""; position:absolute; left:13px; top:21px; width:16px; height:8px; border-left:1px solid var(--champagne); border-bottom:1px solid var(--champagne); transform:rotate(-45deg); }
.thanks .body{ margin-inline:auto; }
.thanks .btn{ margin-top:1.4rem; }

/* footer */
.foot{ border-top:1px solid var(--hair); padding-block:clamp(48px,7vw,76px) 40px; background:var(--ink); }
.foot__inner{ display:flex; flex-wrap:wrap; gap:2rem; justify-content:space-between; align-items:flex-end; }
.foot__line{ color:var(--ivory-faint); font-size:.8rem; margin:.9rem 0 0; }
.foot__contact{ display:flex; flex-direction:column; gap:.5rem; text-align:right; font-size:.86rem; color:var(--ivory-dim); }
.foot__contact a:hover{ color:var(--champagne); }
.disclosure{ margin-top:clamp(32px,5vw,56px); font-size:.7rem; color:rgba(237,234,228,.26); }
.disclosure span{ display:block; max-width:74ch; }

/* mobile sticky bar */
.mobar{ display:none; }

/* reveal animation */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity var(--slow) var(--ease), transform var(--slow) var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }
.reveal:nth-child(2){ transition-delay:.08s; }
.reveal:nth-child(3){ transition-delay:.16s; }
.reveal:nth-child(4){ transition-delay:.24s; }
.reveal:nth-child(5){ transition-delay:.32s; }

/* 10 · RESPONSIVE ========================================================= */
@media (max-width:1080px){
  .matgrid{ grid-template-columns:repeat(2,1fr); }
  .wrap--form{ grid-template-columns:1fr; }
  .form__head{ position:static; }
  .timeline li{ grid-template-columns:4.5rem 1fr; }
  .timeline p{ grid-column:2; }
}

@media (max-width:860px){
  :root{ --nav-h:64px; }
  .nav__links{ display:none; }
  .nav__cta{ --bh:40px; padding:0 1.2em; font-size:.66rem; }
  .scene--split, .scene--reverse{ grid-template-columns:1fr; min-height:auto; }
  .scene--split .scene__media--half{ min-height:64svh; order:1; }
  .scene--reverse .scene__media--half{ order:1; }
  .scene__panel{ order:2; border:0; border-top:1px solid var(--hair); padding:clamp(48px,10vw,72px) var(--pad); }
  .scene--reverse .scene__panel{ border-right:0; border-top:1px solid var(--hair); }
  .scene__caption--right{ text-align:left; margin-left:0; }
  .scene__img, .scene__video{ object-position:center 46%; }
  .form{ grid-template-columns:1fr; }
  .foot__contact{ text-align:left; }
  .scenemark{ bottom:104px; font-size:.58rem; }
  .scrollcue{ display:none; }
  body{ padding-bottom:72px; }           /* room for the sticky bar */

  .mobar{
    display:grid; grid-template-columns:1fr 1fr; gap:1px;
    position:fixed; inset:auto 0 0 0; z-index:55;
    background:var(--hair); border-top:1px solid var(--hair);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .mobar__btn{
    display:flex; align-items:center; justify-content:center; height:60px;
    font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
    background:rgba(11,12,14,.94); backdrop-filter:blur(12px); color:var(--ivory);
  }
  .mobar__btn--solid{ background:var(--champagne); color:#15161A; }
}

@media (max-width:430px){
  .display--xl{ font-size:clamp(2.35rem,10.5vw,3rem); }
  .hero__actions{ gap:1.1rem; }
  .hero__actions .btn--solid{ width:100%; justify-content:center; }
  .matgrid{ grid-template-columns:1fr; }
  .scene--hero{ padding-bottom:clamp(120px,20vh,160px); }
}

/* very wide screens — keep text from stretching */
@media (min-width:1800px){
  .scene--hero, .scene--full, .scene--materials{ padding-inline:clamp(96px,8vw,180px); }
}

/* motion preferences */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .scene__video{ display:none; }
  .scene__img{ transform:none; }
  .scrollcue i{ animation:none; }
  *{ transition-duration:.01ms !important; }
}

/* the scene counter belongs to the walkthrough — it retires at the form */
.scenemark.is-hidden{ opacity:0; }

/* ==========================================================================
   11 · FORM STATES, LEGAL PAGES, FOOTER LINKS
   ========================================================================== */

/* submit button while the request is in flight */
.btn.is-busy{ opacity:.72; cursor:progress; }
.btn.is-busy .btn__arrow{ animation:tk-pulse 1.1s var(--ease) infinite; }
@keyframes tk-pulse{ 0%,100%{opacity:.25} 50%{opacity:1} }
.btn__label{ display:inline-block; }

/* status line under the submit button */
.form__status{ font-size:.82rem; color:var(--champagne); margin:.9rem 0 0; min-height:1.2em; }
.form__status--error{ color:#C98673; }

/* server-side / client-side invalid state */
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea{ border-color:#B4644F; }
.field input[aria-invalid="true"], .field select[aria-invalid="true"]{ border-color:#B4644F; }

/* confirmation panel */
.thanks h2:focus{ outline:none; }
.thanks .form__note{ max-width:44ch; }

/* Turnstile widget sits on the dark ground */
.cf-turnstile{ margin-block:.4rem 0; min-height:65px; }

/* footer legal links */
.foot__legal{ display:flex; gap:1.4rem; align-items:center; }
.foot__legal a{
  font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ivory-faint);
  transition:color .4s var(--ease);
}
.foot__legal a:hover{ color:var(--champagne); }

/* legal + utility pages */
.legal{ padding-top:calc(var(--nav-h) + clamp(48px,8vh,110px)); }
.legal .display{ margin-bottom:1.2em; }
.legal__h{
  font-family:var(--sans); font-weight:400; font-size:.68rem; letter-spacing:.26em;
  text-transform:uppercase; color:var(--champagne); margin:2.8em 0 1em;
}
.legal .body{ max-width:68ch; }
.legal code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.86em;
  background:rgba(237,234,228,.06); padding:.12em .4em; color:var(--beige);
}
.legal a{ color:var(--champagne); }
.legal a:hover{ text-decoration:underline; }

@media (max-width:860px){
  .foot__legal{ order:3; flex-basis:100%; }
}

/* ==========================================================================
   12 · NO-JAVASCRIPT FALLBACK
   The scroll reveals are progressive enhancement. If JavaScript is blocked,
   fails to load, or errors, every word must still be readable — and the form
   must still be usable, because it posts to /enquiry.php on its own.
   ========================================================================== */
.no-js .reveal{ opacity:1; transform:none; }
.no-js .scene__video{ display:none; }
.no-js .scrollcue{ display:none; }
.no-js .scene__img{ transform:none; }
/* without JS the media manifest never runs, so paint a calm ground instead of
   an empty frame */
.no-js .scene__media{ background:linear-gradient(160deg,#15171B,#0B0C0E); }
.no-js .form__note--nojs{ display:block; }

/* 13 · CONSULTATION FORM — LEGIBILITY PASS =================================
   The panel previously floated as a translucent sheet over a dark photograph,
   which left labels, field outlines and placeholders below readable contrast.
   The form is now a solid, clearly bounded card: the page stays cinematic,
   but the part people have to actually fill in behaves like an interface.
   ========================================================================= */

/* Settle the photograph right down behind the card. */
.section--form .form__bg .scene__img{ filter:brightness(.34) saturate(.8) contrast(.96); }

/* ---- left column ---- */
.form__head .body{ color:rgba(237,234,228,.80); }
.form__head .chips--quiet li{
  border-color:rgba(237,234,228,.26); color:rgba(237,234,228,.72);
}

/* ---- the card ---- */
.form{
  position:relative;
  background:#1A1C20;                       /* opaque, lifted a shade brighter than pure black */
  border:1px solid rgba(201,164,71,.35);    /* brass-tinted edge so the card itself reads as a card */
  box-shadow:0 34px 90px -30px rgba(0,0,0,.85);
  backdrop-filter:none;
  padding:clamp(26px,3.1vw,44px);
  gap:1.45rem 1.5rem;
}
.form::before{                              /* a single brass hairline for warmth */
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg,var(--champagne),rgba(201,164,71,.25));
}

/* ---- labels ---- */
.field label{
  font-size:.63rem; letter-spacing:.2em;
  color:rgba(237,234,228,.9);
  margin-bottom:.55rem; font-weight:400;
}

/* ---- inputs ---- */
.field input, .field select, .field textarea{
  background:#15171B;
  border:1px solid rgba(237,234,228,.38);   /* visible edge on every field */
  color:var(--ivory);
  font:300 1rem/1.5 var(--sans);
  padding:.9rem 1rem;
  min-height:52px;
  transition:border-color .3s var(--ease), background-color .3s var(--ease), box-shadow .3s var(--ease);
}
.field textarea{ min-height:132px; padding-block:.9rem; }
.field input:hover, .field select:hover, .field textarea:hover{
  border-color:rgba(237,234,228,.58);
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none;
  border-color:var(--champagne);
  background:#191c21;
  box-shadow:0 0 0 3px rgba(201,164,71,.3);   /* clear focus ring, keyboard-friendly */
}
.field input::placeholder, .field textarea::placeholder{ color:rgba(237,234,228,.5); }
.field select{ color:var(--ivory); cursor:pointer; }
.field select option{ background:#15171B; color:var(--ivory); }

/* ---- validation ---- */
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea,
.field input[aria-invalid="true"], .field select[aria-invalid="true"]{
  border-color:#E08A6C; background:rgba(224,138,108,.1);
}
.err{ color:#F0A88C; font-size:.75rem; margin-top:.45rem; letter-spacing:.01em; }
.field label i{ color:var(--champagne); margin-left:.15em; }

/* ---- submit + notes ---- */
.form__submit{ margin-top:.9rem; }
.form__submit .btn--full{ --bh:64px; font-size:.76rem; letter-spacing:.22em; }
.form__note{ color:rgba(237,234,228,.55); font-size:.76rem; line-height:1.65; }
.form__status{ font-size:.86rem; }

@media (max-width:860px){
  .form{ padding:clamp(22px,5vw,30px); }
  .section--form .form__bg .scene__img{ filter:brightness(.28) saturate(.8); }
}

/* ---- fixes found in the visual pass ---- */

/* The solid `background` above resets the select caret, so redraw it here. */
.field select{
  background-image:linear-gradient(45deg,transparent 50%,var(--champagne) 50%),
                   linear-gradient(135deg,var(--champagne) 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(50% + 1px), calc(100% - 15px) calc(50% + 1px);
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
  padding-right:2.8rem;
}
.field select:focus{ background-color:#191c21; }

/* Anchor links must clear the fixed header, or the first row hides behind it. */
[id]{ scroll-margin-top:calc(var(--nav-h) + 24px); }

/* Keep a little of the photograph alive behind the card. */
.section--form .form__bg .scene__img{ filter:brightness(.46) saturate(.85) contrast(.96); }
@media (max-width:860px){
  .section--form .form__bg .scene__img{ filter:brightness(.34) saturate(.85); }
  /* the sticky call bar must never cover the last field or the submit button */
  .section--form{ padding-bottom:calc(72px + env(safe-area-inset-bottom,0px) + 28px); }
}

/* 14 · BRIGHTNESS PASS =====================================================
   The page read as one long dark corridor: every scrim was heavy, the
   photography was dimmed, and body text sat at 62% / 34% opacity. Three
   changes fix it — let the photography breathe, lift the text, and give the
   scroll a light/dark rhythm so the dark scenes read as deliberate contrast
   rather than as the only note.
   ========================================================================= */

/* ---- 14.1 · brighter, warmer photography ---- */
.scene__img{
  filter:brightness(1.22) contrast(1.05) saturate(1.12);
}
.scene__video{ filter:brightness(1.14) saturate(1.08); }

/* ---- 14.2 · lighter scrims: enough for legibility, no more ---- */
.scene__scrim{
  background:
    linear-gradient(to top, rgba(11,12,14,.82) 0%, rgba(11,12,14,.30) 38%, rgba(11,12,14,0) 68%, rgba(11,12,14,.16) 100%);
}
.scene__scrim--hero{
  background:
    radial-gradient(120% 90% at 14% 78%, rgba(11,12,14,.72) 0%, rgba(11,12,14,.16) 58%, rgba(11,12,14,0) 100%),
    linear-gradient(to top, rgba(11,12,14,.74) 0%, rgba(11,12,14,.10) 44%, rgba(11,12,14,.20) 100%);
}
.scene__scrim--soft{
  background:linear-gradient(to right, rgba(11,12,14,.34), rgba(11,12,14,0) 55%, rgba(11,12,14,.12));
}
.scene__scrim--deep{
  background:linear-gradient(to top, rgba(11,12,14,.93), rgba(11,12,14,.72) 45%, rgba(11,12,14,.60));
}

/* ---- 14.3 · text on dark scenes, lifted ---- */
:root{
  --ivory-dim:  rgba(237,234,228,.80);
  --ivory-faint:rgba(237,234,228,.60);
  --hair:       rgba(237,234,228,.18);
  --hair-strong:rgba(237,234,228,.38);
}
.hero__inner{ text-shadow:0 2px 30px rgba(11,12,14,.72); }
.scene__caption{ text-shadow:0 2px 26px rgba(11,12,14,.62); }
.scene--materials .materials__inner{ text-shadow:0 2px 24px rgba(11,12,14,.6); }

/* ---- 14.4 · LIGHT PANELS on the split scenes (02, 04, 06) ---------------
   The text half becomes warm ivory with charcoal type. This is what breaks
   the darkness, and it reads as an editorial spread rather than a dark UI. */
:root{ --paper:#F4F1EB; }
.scene--split{ background:var(--paper); }
.scene__panel{
  background:var(--paper); color:#15171B;
  border-left:1px solid rgba(21,23,27,.10);
}
.scene--reverse .scene__panel{ border-left:0; border-right:1px solid rgba(21,23,27,.10); }
.scene__panel .eyebrow{ color:#8A7238; }
.scene__panel .display{ color:#15171B; }
.scene__panel .display em{ color:#6E5C2E; }
.scene__panel .body{ color:rgba(21,23,27,.78); }
.scene__panel .body--dim{ color:rgba(21,23,27,.58); }
.scene__panel::before{ background:#A98C4E; opacity:1; }
.scene__panel .spec{ border-top-color:rgba(21,23,27,.14); }
.scene__panel .spec li{ color:rgba(21,23,27,.80); border-bottom-color:rgba(21,23,27,.12); }
.scene__panel .spec li:hover{ color:#15171B; }
.scene__panel .spec li span{ color:#8A7238; }
.scene__panel .btn--line{ border-color:rgba(21,23,27,.30); color:#15171B; }
.scene__panel .btn--line:hover{ border-color:#8A7238; color:#8A7238; background:rgba(169,140,78,.06); }

/* ---- 14.5 · LIGHT PROCESS SECTION -------------------------------------- */
.section--process{
  background:linear-gradient(#FAF8F4,#F1EDE5);
  border-top:1px solid rgba(21,23,27,.08);
  color:#15171B;
}
.section--process .eyebrow{ color:#8A7238; }
.section--process .display{ color:#15171B; }
.section--process .timeline{ border-top-color:rgba(21,23,27,.14); }
.section--process .timeline li{ border-bottom-color:rgba(21,23,27,.12); }
.section--process .timeline li:hover{ background:rgba(21,23,27,.028); }
.section--process .timeline__num{ color:#A98C4E; }
.section--process .timeline h3{ color:#15171B; }
.section--process .timeline p{ color:rgba(21,23,27,.66); }

/* ---- 14.6 · MATERIAL TILES turned light on the dark photograph ---------- */
.matgrid{ background:rgba(244,241,235,.22); border-color:rgba(244,241,235,.30); }
.matgrid li{ background:rgba(244,241,235,.94); color:#15171B; }
.matgrid li:hover{ background:#FFFDF9; transform:translateY(-5px); }
.matgrid h3{ color:#15171B; }
.matgrid p{ color:rgba(21,23,27,.64); }

/* ---- 14.7 · chrome and footer, a touch lighter -------------------------- */
.nav.is-stuck{ background:rgba(14,16,19,.72); }
.foot{ background:#101216; border-top-color:rgba(237,234,228,.14); }
.disclosure{ color:rgba(237,234,228,.42); }
.scenemark{ color:rgba(237,234,228,.72); }

/* The form card stays dark on purpose: it is the one place where a calm,
   high-contrast surface beats a bright one. Only its frame warms up. */
.form{ border-color:rgba(237,234,228,.16); }

@media (max-width:860px){
  /* the stacked light panel needs a light divider, not an ivory hairline */
  .scene__panel, .scene--reverse .scene__panel{ border-top:1px solid rgba(21,23,27,.10); }
  .matgrid{ background:rgba(244,241,235,.26); }
}

/* The scroll counter now passes over light sections too, so it carries its
   own backing instead of relying on a dark photograph behind it. */
.scenemark{
  color:rgba(237,234,228,.88); text-shadow:none;
  background:rgba(14,16,19,.62); backdrop-filter:blur(8px);
  padding:.52rem .95rem; border:1px solid rgba(237,234,228,.10);
}

/* ---- 14.8 · stop magnifying the photographs -----------------------------
   .scene__img carried transform:scale(1.04) purely as a compositional
   nudge; on a wide monitor that magnification is exactly what made the
   images read as soft. The parallax script animates translateY, so the
   scale is not needed for the effect. */
.scene__img{ transform:none; }
.scene__img.parallax{ will-change:transform; }
/* Crisper downscaling when a 4K source is fitted into a smaller box. */
.scene__img, .scene__video{ image-rendering:auto; backface-visibility:hidden; }

/* The studio's postal address in the footer. */
.foot__addr{
  font-style:normal; margin:.7rem 0 0; max-width:46ch;
  font-size:.82rem; line-height:1.6; color:var(--ivory-faint);
}
.foot__addr a{ color:inherit; text-decoration:underline; text-underline-offset:3px; }
.foot__addr a:hover{ color:var(--champagne); }

/* 11 · FLOATING WHATSAPP + QUICK-CONTACT ================================= */
.float-actions{
  position:fixed; right:22px; bottom:26px; z-index:70;
  display:flex; flex-direction:column; align-items:flex-end; gap:14px;
}
.float-btn{
  width:58px; height:58px; border-radius:50%; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; position:relative;
  box-shadow:0 14px 34px -10px rgba(0,0,0,.6);
  transition:transform .28s var(--ease), box-shadow .28s var(--ease);
}
.float-btn:hover{ transform:translateY(-3px); box-shadow:0 18px 40px -10px rgba(0,0,0,.65); }
.float-btn svg{ width:27px; height:27px; }
.float-btn--whatsapp{ background:#25D366; color:#fff; }
.float-btn--chat{ background:var(--champagne); color:#15161A; }
.float-btn--chat .float-btn__icon-close{ display:none; position:absolute; }
.float-btn--chat.is-open .float-btn__icon-chat{ display:none; }
.float-btn--chat.is-open .float-btn__icon-close{ display:block; }

.float-panel{
  position:absolute; right:0; bottom:calc(100% + 14px);
  width:250px; background:#181a1f; border:1px solid rgba(201,164,71,.3);
  border-radius:14px; box-shadow:0 30px 70px -18px rgba(0,0,0,.65);
  padding:8px; display:flex; flex-direction:column;
  animation:tk-float-in .22s var(--ease);
}
.float-panel[hidden]{ display:none; }
.float-panel__head{
  font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(237,234,228,.5); padding:9px 10px 7px;
}
.float-panel__item{
  display:flex; align-items:center; gap:11px; padding:11px 10px; border-radius:9px;
  color:var(--ivory); font-size:.9rem; text-decoration:none;
  transition:background-color .2s var(--ease);
}
.float-panel__item:hover{ background:rgba(237,234,228,.08); }
.float-panel__item svg{ width:19px; height:19px; flex:0 0 auto; color:var(--champagne); }

@keyframes tk-float-in{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

@media (max-width:860px){
  .float-actions{ right:16px; bottom:88px; }   /* clears the sticky mobile bar */
}
@media (prefers-reduced-motion:reduce){
  .float-panel{ animation:none; }
}

/* Fallback toast for in-app browsers that block tel:/mailto: navigation */
.float-toast{
  position:fixed; left:50%; bottom:24px; z-index:80;
  transform:translate(-50%,12px); opacity:0; pointer-events:none;
  background:#181a1f; color:var(--ivory); border:1px solid rgba(228,182,85,.35);
  padding:.7rem 1.1rem; border-radius:10px; font-size:.85rem;
  box-shadow:0 20px 50px -16px rgba(0,0,0,.6);
  transition:opacity .25s var(--ease), transform .25s var(--ease);
  max-width:min(86vw,360px); text-align:center;
}
.float-toast.is-shown{ opacity:1; transform:translate(-50%,0); }
@media (max-width:860px){ .float-toast{ bottom:96px; } }