/* ============================================================================
   L7M Renovations , styles
   Extracted from the design handoff (single-file prototype) and split into
   tokens + components for production. The visual language is unchanged:
   warm paper bg, slate accent, Cormorant Garamond / Mulish / JetBrains Mono,
   sharp corners (radius 0), calm editorial luxury.

   Section map:
     0. Tokens (:root)            6. Projects / carousels
     1. Base / resets             7. Process
     2. Utilities                 8. Materials
     3. Nav + mobile drawer       9. Quote
     4. Hero + hero form         10. Contact + forms
     5. Section heading          11. Footer / floating contact
                                 12. Reveal / ticker / motion + a11y
   ========================================================================== */

/* ---------- 0. TOKENS ---------- */
:root {
  --bg:       #F1EDE6;   /* warm off-white */
  --bg-2:     #E8E2D7;   /* paper tone  */
  --ink:      #1A1915;   /* deep ink    */
  --ink-2:    #3A3730;   /* secondary   */
  --ink-3:    #7A736A;   /* tertiary    */
  --rule:     #C9C0B2;   /* hairline    */
  --accent:   #2C3A42;   /* slate       */
  --accent-2: #B89773;   /* travertine  */
  --serif:    'Cormorant Garamond', 'Times New Roman', serif;
  --sans:     'Mulish', system-ui, sans-serif;
  --mono:     'JetBrains Mono', ui-monospace, monospace;

  /* z-index scale (documented, per Taste §6.F) */
  --z-nav:   40;
  --z-float: 50;
  --z-drawer:55;
}
/* Dark mode was explored in the prototype but is not part of launch.
   Tokens kept for future use; no [data-theme="dark"] is set anywhere. */
[data-theme="dark"] {
  --bg:       #15130F;
  --bg-2:     #1E1B16;
  --ink:      #EFEADF;
  --ink-2:    #C6BEAE;
  --ink-3:    #857D6E;
  --rule:     #2E2A22;
  --accent:   #C98A62;
  --accent-2: #8A6A4A;
}

/* ---------- 1. BASE ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:400;line-height:1.55;-webkit-font-smoothing:antialiased}
html{scroll-behavior:smooth}
body{overflow-x:hidden}
::selection{background:var(--accent);color:var(--bg)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* Visible keyboard focus everywhere (a11y upgrade , mouse users never see it) */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* On the dark contact band the slate ring is low-contrast; use paper there. */
.contact :focus-visible,.hero-form :focus-visible{outline-color:var(--bg)}

/* Skip link (a11y) */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--ink);color:var(--bg);font-family:var(--mono);font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;padding:12px 18px;
}
.skip-link:focus{left:8px;top:8px}

/* ---------- 2. UTILITIES ---------- */
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.serif{font-family:var(--serif);font-weight:400;letter-spacing:-.01em;line-height:1.02}
.rule{height:1px;background:var(--rule);width:100%}
.container{max-width:1440px;margin:0 auto;padding:0 56px}
@media (max-width:720px){.container{padding:0 24px}}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- 3. NAV ---------- */
nav.top{
  position:fixed;top:0;left:0;right:0;z-index:var(--z-nav);
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  background:color-mix(in oklab, var(--bg) 72%, transparent);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease, background .3s ease;
}
nav.top.scrolled{border-bottom-color:var(--rule)}
nav.top .inner{display:flex;align-items:center;justify-content:space-between;height:72px;gap:24px}
.logo{display:flex;align-items:baseline;gap:10px}
.logo .mark{font-family:var(--serif);font-size:26px;letter-spacing:.02em}
.logo .tag{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3)}
nav.top ul{list-style:none;display:flex;gap:36px;flex-shrink:1;min-width:0}
nav.top ul a{font-size:13px;color:var(--ink-2);position:relative}
nav.top ul a:hover{color:var(--ink)}
nav.top ul a::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:1px;background:var(--ink);transition:right .4s cubic-bezier(.2,.7,.2,1)}
nav.top ul a:hover::after{right:0}
nav.top .cta{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  padding:12px 20px;border:1px solid var(--ink);color:var(--ink);
  white-space:nowrap;flex-shrink:0;
  transition:background .3s,color .3s
}
nav.top .cta:hover{background:var(--ink);color:var(--bg)}

/* Hamburger (hidden on desktop, shown ≤1040px) */
.nav-toggle{
  display:none;width:44px;height:44px;flex-shrink:0;
  border:1px solid var(--ink);background:transparent;cursor:pointer;
  place-items:center;color:var(--ink);
  transition:background .3s,color .3s;
}
.nav-toggle:hover{background:var(--ink);color:var(--bg)}
.nav-toggle svg{width:20px;height:20px}
.nav-toggle .icon-close{display:none}

@media (max-width:1040px){
  nav.top ul,nav.top > .inner > .cta{display:none}
  .nav-toggle{display:grid}
}

/* Mobile drawer */
.drawer-backdrop{
  position:fixed;inset:0;z-index:var(--z-drawer);
  background:color-mix(in oklab, var(--ink) 45%, transparent);
  opacity:0;pointer-events:none;transition:opacity .35s ease;
}
.drawer-backdrop.open{opacity:1;pointer-events:auto}
.drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:calc(var(--z-drawer) + 1);
  width:min(86vw,360px);background:var(--bg);
  border-left:1px solid var(--rule);
  transform:translateX(100%);transition:transform .4s cubic-bezier(.2,.7,.2,1);
  display:flex;flex-direction:column;padding:24px;
}
.drawer.open{transform:none}
.drawer .drawer-head{display:flex;align-items:center;justify-content:space-between;height:48px;margin-bottom:24px}
.drawer .drawer-head .mark{font-family:var(--serif);font-size:24px}
.drawer-close{width:44px;height:44px;border:1px solid var(--rule);background:transparent;cursor:pointer;display:grid;place-items:center;color:var(--ink);transition:background .3s,color .3s}
.drawer-close:hover{background:var(--ink);color:var(--bg)}
.drawer-close svg{width:18px;height:18px}
.drawer nav{display:flex;flex-direction:column}
.drawer nav a{
  font-family:var(--serif);font-size:28px;color:var(--ink);
  padding:18px 0;border-bottom:1px solid var(--rule);
  transition:padding-left .3s ease,color .3s ease;
}
.drawer nav a:hover{padding-left:10px;color:var(--accent)}
.drawer .cta{
  margin-top:auto;
  font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  padding:16px 20px;border:1px solid var(--ink);color:var(--ink);text-align:center;
  transition:background .3s,color .3s;
}
.drawer .cta:hover{background:var(--ink);color:var(--bg)}

/* ---------- 4. HERO ---------- */
.hero{
  position:relative;
  min-height:100dvh;                 /* dvh avoids mobile address-bar jump */
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:200px 0 72px;
  overflow:hidden;
  isolation:isolate;
}
.hero-bg{position:absolute;inset:0;z-index:-2;background:var(--ink-2)}
.hero-bg img{width:100%;height:100%;object-fit:cover;filter:saturate(.9) contrast(1.02)}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg, rgba(12,11,9,.82) 0%, rgba(12,11,9,.62) 38%, rgba(12,11,9,.30) 64%, rgba(12,11,9,.55) 100%),
    linear-gradient(180deg, rgba(12,11,9,.45) 0%, transparent 28%, transparent 60%, rgba(12,11,9,.7) 100%);
}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:72px;align-items:end;width:100%}
.hero-eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:40px;color:rgba(255,255,255,.78)}
.hero-eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--accent-2)}
.hero h1{
  font-family:var(--serif);
  font-size:clamp(52px, 7.4vw, 116px);
  line-height:.95;
  letter-spacing:-.02em;
  font-weight:400;
  color:#FBF8F2;
}
.hero h1 em{font-style:italic;color:rgba(255,255,255,.6);font-weight:400}
.hero .sub{max-width:460px;color:rgba(255,255,255,.74);font-size:17px;line-height:1.6;margin-top:32px}
.hero .meta{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding-top:32px;border-top:1px solid rgba(255,255,255,.18);margin-top:40px}
.hero .meta .k{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:8px}
.hero .meta .v{font-family:var(--serif);font-size:26px;color:#FBF8F2}

.hero-form{
  background:color-mix(in oklab, var(--ink) 78%, transparent);
  backdrop-filter:blur(16px) saturate(1.1);
  -webkit-backdrop-filter:blur(16px) saturate(1.1);
  border:1px solid rgba(255,255,255,.16);
  padding:36px 34px 38px;
  color:var(--bg);
}
.hero-form .form-eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:10px}
.hero-form h3{font-family:var(--serif);font-weight:400;font-size:30px;line-height:1.04;letter-spacing:-.01em;margin-bottom:26px;color:#FBF8F2}
.hero-form h3 em{font-style:italic;color:rgba(255,255,255,.6)}
/* When the hero stacks (single column) it must flow from the TOP, not stay
   bottom-anchored, or the form is pushed below the fold and overlaps the
   stats. Drop the full-height + flex-end and let content read in sequence:
   eyebrow -> headline -> sub -> stats -> enquiry form. */
@media (max-width:980px){
  .hero{
    min-height:0;
    justify-content:flex-start;
    padding:128px 0 80px;
  }
  .hero-grid{grid-template-columns:1fr;gap:40px;align-items:start}
  /* Order the stats above the form so the form sits last, fully visible. */
  .hero .meta{margin-top:36px}
  .hero-form{margin-top:8px}
}
@media (max-width:560px){
  .hero{padding:108px 0 64px}
  .hero-form{padding:28px 22px 30px}
  .hero-form h3{font-size:26px}
  .hero .meta{grid-template-columns:1fr 1fr;gap:20px}
}

/* ---------- 5. IMAGE FRAMES ---------- */
.ph{
  background:
    repeating-linear-gradient(135deg,
      color-mix(in oklab, var(--bg-2) 92%, var(--ink) 2%) 0 2px,
      var(--bg-2) 2px 10px);
  border:1px solid var(--rule);
  position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  color:var(--ink-3);
}
.ph img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.85) contrast(1.02);
}
.ph picture{position:absolute;inset:0}
.ph[data-label]:not([data-nolabel])::after{
  content:attr(data-label);
  position:absolute;left:14px;bottom:14px;z-index:2;
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  background:color-mix(in oklab, var(--bg) 85%, transparent);color:var(--ink);
  padding:6px 10px;border:1px solid var(--rule);backdrop-filter:blur(6px);
}
.ph.no-label::after{display:none}
.ph.tall{aspect-ratio:3/4}
.ph.wide{aspect-ratio:4/3}
.ph.cine{aspect-ratio:16/9}
.ph.sq{aspect-ratio:1/1}

/* ---------- 5b. SECTION HEADING ---------- */
section{padding:140px 0;position:relative}
.sec-head{display:flex;flex-direction:column;gap:32px;margin-bottom:80px;padding-top:22px;border-top:1px solid var(--ink)}
.sec-head .num{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2)}
.sec-head h2{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(40px, 5.6vw, 80px);
  line-height:1;letter-spacing:-.01em;max-width:18ch
}
.sec-head h2 em{font-style:italic;color:var(--ink-2)}

/* ---------- CAPABILITIES ---------- */
.caps{border-top:none}
.cap-row{
  display:grid;grid-template-columns:1.2fr 2fr 180px;gap:40px;
  padding:36px 0;border-bottom:1px solid var(--rule);
  align-items:center;cursor:pointer;
  transition:padding .4s ease, background .4s ease;
  position:relative;
}
.cap-row:hover{padding-left:16px;padding-right:16px;background:color-mix(in oklab, var(--bg-2) 50%, transparent)}
.cap-row .n{display:none}
.cap-row .t{font-family:var(--serif);font-size:34px;line-height:1.02}
.cap-row .d{color:var(--ink-2);font-size:14px;line-height:1.6}
.cap-row .arrow{justify-self:end;font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);display:flex;align-items:center;gap:10px;opacity:0;transform:translateX(-8px);transition:opacity .35s ease, transform .4s cubic-bezier(.2,.7,.2,1)}
.cap-row:hover .arrow, .cap-row:focus-visible .arrow{opacity:1;transform:none}
.cap-row .arrow svg{transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.cap-row:hover .arrow svg{transform:translateX(8px)}
@media (max-width:900px){
  .cap-row{grid-template-columns:1fr;gap:10px;padding:24px 0}
  .cap-row .arrow{justify-self:start;opacity:1;transform:none}
}

/* ---------- 6. PROJECTS / CAROUSELS ---------- */
.projects{display:flex;flex-direction:column;gap:120px}
.project{display:grid;grid-template-columns:360px 1fr;gap:56px;align-items:start}
@media (max-width:900px){.project{grid-template-columns:1fr;gap:32px}}

.project .info{position:sticky;top:112px;display:flex;flex-direction:column;gap:18px}
.project .info .idx{font-family:var(--mono);font-size:11px;letter-spacing:.22em;color:var(--ink-3);padding-bottom:14px;border-bottom:1px solid var(--ink)}
.project .info h3{font-family:var(--serif);font-weight:400;font-size:44px;line-height:1;letter-spacing:-.01em}
.project .info .place{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}
.project .info .desc{color:var(--ink-2);font-size:14px;line-height:1.7;margin-top:8px}
.project .info .facts{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:8px;padding-top:20px;border-top:1px solid var(--rule)}
.project .info .facts .k{font-family:var(--mono);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3);margin-bottom:4px}
.project .info .facts .v{font-family:var(--serif);font-size:18px}
@media (max-width:900px){.project .info{position:static}}

/* min-width:0 lets this grid child shrink to its 1fr share; without it the
   flex track refuses to shrink below content size and overflows the page. */
.carousel{position:relative;min-width:0}
.carousel .track{
  display:flex;gap:16px;overflow-x:auto;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding-bottom:20px;
  scrollbar-width:none;-ms-overflow-style:none;
}
.carousel .track::-webkit-scrollbar{display:none}
.carousel .slide{
  flex:0 0 78%;
  scroll-snap-align:start;
  position:relative;
}
.carousel .slide .ph{aspect-ratio:4/3}
.carousel .slide .cap{
  margin-top:12px;display:flex;justify-content:space-between;gap:16px;
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);
}
@media (max-width:900px){.carousel .slide{flex:0 0 90%}}

.carousel .controls{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-top:18px;padding-top:18px;border-top:1px solid var(--rule);
}
.carousel .dots{display:flex;gap:8px;flex-wrap:wrap}
.carousel .dots .dot{
  width:24px;height:1px;background:var(--rule);border:none;cursor:pointer;padding:0;
  transition:background .3s, height .3s;
}
.carousel .dots .dot.on{background:var(--ink);height:2px}
.carousel .nav{display:flex;gap:10px}
.carousel .nav button{
  width:40px;height:40px;border:1px solid var(--rule);background:transparent;cursor:pointer;
  display:grid;place-items:center;color:var(--ink);
  transition:background .3s, color .3s, border-color .3s;
}
.carousel .nav button:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.carousel .counter{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--ink-3)}

/* ---------- 7. PROCESS ---------- */
/* Clean full-width band (replaces the prototype's margin:0 -9999px hack) */
.process{background:var(--bg-2)}
.process-inner{max-width:1440px;margin:0 auto;padding:140px 56px}
@media (max-width:720px){.process-inner{padding:100px 24px}}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;margin-top:40px}
.step .k{font-family:var(--mono);font-size:10px;letter-spacing:.22em;color:var(--ink-3);margin-bottom:20px;padding-bottom:14px;border-bottom:1px solid var(--ink)}
.step h3{font-family:var(--serif);font-size:28px;line-height:1.05;margin-bottom:14px}
.step p{color:var(--ink-2);font-size:14px;line-height:1.65}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr;gap:32px}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}

/* ---------- 8. MATERIALS ---------- */
.mat-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:20px}
.swatch{aspect-ratio:1/1;position:relative;border:1px solid var(--rule);display:flex;align-items:flex-end;padding:14px;color:#fff;overflow:hidden}
.swatch .lbl{font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;mix-blend-mode:difference;color:#fff;z-index:2}
.swatch::before{content:"";position:absolute;inset:0;opacity:.25;background:
  repeating-linear-gradient(45deg,transparent 0 8px, rgba(255,255,255,.08) 8px 9px)}
@media (max-width:900px){.mat-grid{grid-template-columns:repeat(3,1fr)}}

/* ---------- 9. QUOTE ---------- */
.quote{padding:160px 0;text-align:left}
.quote blockquote{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(32px, 4.6vw, 60px);
  line-height:1.08;letter-spacing:-.01em;
  max-width:22ch;
}
.quote blockquote em{font-style:italic;color:var(--ink-2)}
.quote .cite{margin-top:48px;display:flex;gap:24px;align-items:center}
.quote .cite .ph{width:64px;height:64px;border-radius:50%}
.quote .cite .ph::after{display:none}
.quote .cite .name{font-family:var(--serif);font-size:20px}
.quote .cite .role{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--ink-3);text-transform:uppercase}

/* ---------- 10. CONTACT + FORMS ---------- */
/* Clean full-width band (replaces the prototype's margin:0 -9999px hack) */
.contact{background:var(--ink);color:var(--bg)}
.contact-inner{max-width:1440px;margin:0 auto;padding:160px 56px}
@media (max-width:720px){.contact-inner{padding:100px 24px}}
.contact h2{font-family:var(--serif);font-weight:400;font-size:clamp(44px,6vw,96px);line-height:1;letter-spacing:-.01em;margin-bottom:80px;max-width:14ch}
.contact h2 em{font-style:italic;color:color-mix(in oklab, var(--bg) 60%, transparent)}
.contact-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:80px;align-items:stretch}
/* Contact form fills the column height set by the taller channels block, so the
   "A few words" field absorbs the slack and the submit button squares off against
   the bottom-right corner, completing the rectangle. (Scoped here so the hero
   form, which shares form{} base styles, is left untouched.) */
.contact-grid form{display:flex;flex-direction:column;height:100%;position:relative}
.contact-grid form label.grow{flex:1 1 auto}
.contact-grid form label.grow textarea{height:100%;resize:none}
.contact-grid form button{align-self:end}
/* The aria-live status (empty until submit) is taken out of flow so it can't
   reserve the bottom-right corner — the button squares off there instead. It
   reappears just beneath the button when a message is set. */
.contact-grid form .form-status{position:absolute;right:0;bottom:-22px;margin:0}
.channels{display:grid;gap:1px;background:color-mix(in oklab, var(--bg) 18%, transparent);border:1px solid color-mix(in oklab, var(--bg) 18%, transparent)}
.channel{background:var(--ink);padding:28px 24px;display:grid;grid-template-columns:40px 1fr auto;gap:20px;align-items:center;transition:background .3s}
.channel:hover{background:color-mix(in oklab, var(--bg) 6%, var(--ink))}
.channel > div{min-width:0}            /* let the value text shrink + wrap, not overflow */
.channel .k{font-family:var(--mono);font-size:10px;letter-spacing:.22em;color:color-mix(in oklab, var(--bg) 55%, transparent)}
.channel .v{font-family:var(--serif);font-size:22px;overflow-wrap:anywhere}
.channel .go{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:color-mix(in oklab, var(--bg) 70%, transparent);white-space:nowrap}
/* Very narrow phones: drop the icon + trailing action, give the value full width. */
@media (max-width:420px){
  .channel{grid-template-columns:1fr;gap:6px;padding:22px 18px}
  .channel > svg,.channel .go{display:none}
  .channel .v{font-size:20px}
}

form{display:grid;gap:18px}
form .row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
form label{display:grid;gap:8px}
form .lbl{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:color-mix(in oklab, var(--bg) 55%, transparent)}
form input, form select, form textarea{
  background:transparent;border:none;border-bottom:1px solid color-mix(in oklab, var(--bg) 28%, transparent);
  color:var(--bg);font-family:var(--sans);font-size:15px;padding:10px 0;
  outline:none;transition:border-color .3s;
}
form input::placeholder,form textarea::placeholder{color:color-mix(in oklab, var(--bg) 40%, transparent)}
form input:focus, form select:focus, form textarea:focus{border-bottom-color:var(--bg)}
form textarea{resize:vertical;min-height:80px}
form select option{background:var(--ink);color:var(--bg)}
form button{
  justify-self:start;margin-top:16px;
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  padding:16px 28px;background:var(--bg);color:var(--ink);border:none;cursor:pointer;
  transition:background .3s, color .3s;
}
form button:hover{background:var(--accent);color:var(--bg)}
form button[disabled]{cursor:default;opacity:.85}
/* Inline submit status (aria-live) */
.form-status{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:color-mix(in oklab, var(--bg) 70%, transparent);min-height:1em}
.form-status[data-state="error"]{color:#E8B4A0}
.form-status[data-state="sent"]{color:#A8C3A0}
@media (max-width:900px){
  .contact-grid{grid-template-columns:1fr;gap:56px}
  form .row{grid-template-columns:1fr}
  /* Stacked: no taller sibling to square against, so restore natural flow. */
  .contact-grid form{height:auto}
  .contact-grid form label.grow{flex:0 0 auto}
  .contact-grid form label.grow textarea{height:auto;resize:vertical}
  .contact-grid form button{align-self:start}
  .contact-grid form .form-status{position:static;text-align:left}
}

/* ---------- 11. FOOTER ---------- */
footer{padding:48px 0 56px;color:var(--ink-3)}
footer .inner{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
footer .mono{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase}
footer a.mono{transition:color .3s}
footer a.mono:hover{color:var(--ink)}
footer .foot-links{display:flex;gap:20px;flex-wrap:wrap}

/* FLOATING CONTACT */
/* The container is only a positioning anchor: it must NOT capture pointer
   events itself, or its box would sit over whatever scrolls beneath it
   (e.g. the carousel chevrons) and swallow the taps. Only the FAB and the
   opened option pills opt back in to pointer events. */
.float{
  position:fixed;right:24px;bottom:24px;z-index:var(--z-float);
  pointer-events:none;
}
/* Anchored to the FAB and lifted out of normal flow so the closed menu does
   NOT inflate the hit-box. In flow, the widest pill ("Call · +377 …") stretched
   .float to ~235×250px, and that fixed rectangle covered the controls below it.
   Absolutely positioned, .float shrink-wraps to the 60px FAB; the pills still
   fade/slide up from the FAB exactly as before. */
.float .opts{
  position:absolute;right:0;bottom:70px;
  display:flex;flex-direction:column;gap:8px;align-items:flex-end;
  transform-origin:bottom right;
  transition:opacity .35s, transform .35s cubic-bezier(.2,.7,.2,1);
  opacity:0;transform:translateY(8px) scale(.98);pointer-events:none;
}
.float.open .opts{opacity:1;transform:none;pointer-events:auto}
.float .opt{
  background:var(--bg);border:1px solid var(--rule);
  padding:10px 16px;display:flex;align-items:center;gap:12px;
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);
  box-shadow:0 14px 30px -18px rgba(0,0,0,.3);
  transition:background .3s,color .3s,border-color .3s;
}
.float .opt:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.float .fab{
  pointer-events:auto;                 /* re-enable; parent is pointer-events:none */
  width:60px;height:60px;border-radius:50%;background:var(--ink);color:var(--bg);
  display:grid;place-items:center;cursor:pointer;border:none;
  box-shadow:0 18px 40px -18px rgba(0,0,0,.55);
  transition:transform .35s cubic-bezier(.2,.7,.2,1), background .3s;
}
.float .fab:hover{background:var(--accent)}
.float.open .fab{transform:rotate(45deg)}
.float .fab svg{width:22px;height:22px}

/* ---------- 11b. LEGAL / TEXT PAGES ---------- */
.legal-main{max-width:760px;margin:0 auto;padding:160px 56px 120px}
@media (max-width:720px){.legal-main{padding:130px 24px 90px}}
.legal-main .num{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2);margin-bottom:24px}
.legal-main h1{font-family:var(--serif);font-weight:400;font-size:clamp(38px,5vw,64px);line-height:1.02;letter-spacing:-.01em;margin-bottom:48px}
.legal-main h2{font-family:var(--serif);font-weight:400;font-size:28px;line-height:1.1;margin:48px 0 16px;padding-top:22px;border-top:1px solid var(--rule)}
.legal-main p,.legal-main li{color:var(--ink-2);font-size:16px;line-height:1.7;margin-bottom:14px}
.legal-main ul{padding-left:20px;margin-bottom:14px}
.legal-main a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.legal-main .todo{background:color-mix(in oklab,var(--accent-2) 22%,var(--bg));border:1px solid var(--accent-2);color:var(--ink);padding:2px 7px;font-family:var(--mono);font-size:12px;letter-spacing:.04em}
.legal-main .updated{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-top:56px;padding-top:22px;border-top:1px solid var(--rule)}
.legal-back{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);margin-bottom:40px}
.legal-back:hover{color:var(--accent)}

/* 404 */
.notfound{min-height:100dvh;display:grid;place-items:center;text-align:center;padding:120px 24px}
.notfound .num{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3);margin-bottom:20px}
.notfound h1{font-family:var(--serif);font-weight:400;font-size:clamp(48px,8vw,96px);line-height:1;margin-bottom:24px}
.notfound p{color:var(--ink-2);max-width:42ch;margin:0 auto 36px}
.notfound .cta{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;padding:14px 24px;border:1px solid var(--ink);color:var(--ink);transition:background .3s,color .3s}
.notfound .cta:hover{background:var(--ink);color:var(--bg)}

/* ---------- 12. REVEAL / TICKER / MOTION + A11Y ---------- */
/* Reveal is only hidden when JS is present (html.js). Without JS , or under
   reduced motion , content is fully visible. (a11y / SEO / no-JS safety) */
.js .rv{opacity:0;transform:translateY(18px);transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1)}
.js .rv.in{opacity:1;transform:none}

.ticker{overflow:hidden;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:18px 0;margin:8px 0}
.ticker .track{display:flex;width:max-content;white-space:nowrap;animation:mar 40s linear infinite;font-family:var(--serif);font-size:26px;color:var(--ink-2)}
.ticker:hover .track{animation-play-state:paused}
.ticker-set{display:flex;gap:56px;margin:0;padding:0 56px 0 0;list-style:none}
.ticker-set li{display:inline-flex;align-items:center}
.ticker-set li::after{content:"\00B7";color:var(--ink-3);margin-left:56px}
@keyframes mar{to{transform:translateX(-50%)}}

/* Reduced motion: collapse all motion to instant/static (Taste §6.B mandatory) */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  .js .rv{opacity:1;transform:none}
  .ticker .track{animation:none;transform:none}
}