@layer base, layout, components, motion, media;

/* ══════════════════════════════════════════════════════════════
   1. TOKENS + BASE
   ══════════════════════════════════════════════════════════════ */
@layer base {

  :root{
    /* — surface — */
    --paper:      #FBF9F5;
    --paper-2:    #F4F0E8;
    --kraft:      #EFE9DD;
    --white:      #FFFFFF;

    /* — ink — */
    --ink:        #16130F;
    --ink-2:      #241F19;
    --stone:      #6E675D;
    --stone-2:    #9B9388;

    /* — accent — */
    --ember:      #D9622F;
    --ember-lt:   #F08A4B;
    --ember-dk:   #A8441C;
    --ember-wash: #FBEDE4;
    --moss:       #3E5245;

    /* — lines — */
    --line:       rgba(22,19,15,0.08);
    --line-2:     rgba(22,19,15,0.14);
    --line-dark:  rgba(255,255,255,0.10);

    /* — type — */
    --sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
    --fs-display: clamp(1.75rem, 4.6vw, 4.3rem);
    --fs-h2:      clamp(2rem, 1.3rem + 2.6vw, 3.4rem);
    --fs-h3:      clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem);
    --fs-lead:    clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
    --fs-body:    0.9375rem;
    --fs-sm:      0.875rem;
    --fs-xs:      0.75rem;
    --tracking-tight: -0.035em;

    /* — space — */
    --gutter: clamp(30px, 4.2vw, 48px);
    --section: clamp(76px, 8.5vw, 132px);
    --maxw: 1280px;

    /* — shape — */
    --r-xs: 8px; --r-sm: 14px; --r-md: 22px; --r-lg: 30px; --r-xl: 40px; --r-full: 999px;

    /* — depth — */
    --sh-xs: 0 1px 2px rgba(22,19,15,.05), 0 2px 6px rgba(22,19,15,.04);
    --sh-sm: 0 2px 4px rgba(22,19,15,.04), 0 8px 20px rgba(22,19,15,.06);
    --sh-md: 0 4px 8px rgba(22,19,15,.05), 0 16px 40px rgba(22,19,15,.09);
    --sh-lg: 0 8px 16px rgba(22,19,15,.06), 0 32px 72px rgba(22,19,15,.14);
    --sh-ember: 0 6px 22px rgba(217,98,47,.34), 0 2px 6px rgba(217,98,47,.20);

    /* — motion — */
    --ease:    cubic-bezier(.22,1,.36,1);      /* expo-out, the "luxury" curve */
    --ease-io: cubic-bezier(.76,0,.24,1);
    --ease-sp: cubic-bezier(.34,1.4,.44,1);    /* soft overshoot */
    --t-fast: .22s; --t: .42s; --t-slow: .9s;
  }

  *,*::before,*::after{ box-sizing:border-box; }
  *{ margin:0; }

  html{
    -webkit-text-size-adjust:100%;
    scroll-behavior:smooth;
  }
  /* Lenis drives scroll itself — native smooth would fight it */
  html.lenis, html.lenis body{ height:auto; scroll-behavior:auto; }
  .lenis.lenis-smooth{ scroll-behavior:auto !important; }
  .lenis.lenis-stopped{ overflow:hidden; }

  body{
    font-family:var(--sans);
    font-size:var(--fs-body);
    line-height:1.6;
    color:var(--ink);
    background:var(--paper);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    overflow-x:clip;
    text-rendering:optimizeLegibility;
  }

  img,svg,video{ display:block; max-width:100%; }
  img{ width:100%; height:100%; object-fit:cover; }
  a{ color:inherit; text-decoration:none; }
  button,input,textarea,select{ font:inherit; color:inherit; }
  button{ background:none; border:0; cursor:pointer; }

  h1,h2,h3,h4{ font-weight:800; letter-spacing:var(--tracking-tight); line-height:1.05; }
  /* The accent is carried by colour alone, not a second typeface */
  em{ font-style:normal; font-weight:inherit; color:var(--ember); }

  ::selection{ background:var(--ember); color:#fff; }

  :focus-visible{
    outline:2px solid var(--ember);
    outline-offset:3px;
    border-radius:var(--r-xs);
  }

  .sr-only{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
  }

  .skip-link{
    position:fixed; top:10px; left:50%; translate:-50% -200%;
    z-index:2000; background:var(--ink); color:#fff;
    padding:12px 22px; border-radius:var(--r-full); font-weight:700; font-size:var(--fs-sm);
    transition:translate var(--t) var(--ease);
  }
  .skip-link:focus{ translate:-50% 0; }
}

/* ══════════════════════════════════════════════════════════════
   2. LAYOUT + TEXTURE
   ══════════════════════════════════════════════════════════════ */
@layer layout {

  :where(section, div)[id]{ scroll-margin-top:104px; }

  .wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
  .wrap--tight{ max-width:1080px; }
  .section{ padding-block:var(--section); position:relative; }

  /* Surface variants -------------------------------------------------- */
  .s-white{ background:var(--white); }
  .s-paper{ background:var(--paper); }
  .s-kraft{ background:var(--paper-2); }
  .s-ink{ background:var(--ink); color:#fff; }
  .s-ink .eyebrow{ color:var(--ember-lt); }
  .s-ink .eyebrow::before{ background:var(--ember-lt); }

  /* Blueprint grid texture. Masked at the edges so panels dissolve
     into each other instead of hard-cutting.                            */
  .tex-grid{ overflow:clip; }
  .tex-grid::before{
    content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
    background-image:
      linear-gradient(rgba(22,19,15,.055) 1px, transparent 1px),
      linear-gradient(90deg, rgba(22,19,15,.055) 1px, transparent 1px);
    background-size:56px 56px;
    -webkit-mask-image:linear-gradient(180deg,transparent,#000 12%,#000 86%,transparent);
            mask-image:linear-gradient(180deg,transparent,#000 12%,#000 86%,transparent);
  }
  .tex-grid > .wrap{ position:relative; z-index:1; }

  /* Warm light bloom — breaks up the flatness behind content */
  .glow{ position:absolute; border-radius:50%; pointer-events:none; z-index:0; filter:blur(70px); }
  .glow--ember{ background:radial-gradient(circle, rgba(217,98,47,.20), transparent 70%); }
  .glow--moss{  background:radial-gradient(circle, rgba(62,82,69,.14), transparent 70%); }

  /* Film grain — fixed, screen-wide, animated in tiny steps */
  .grain{
    position:fixed; inset:-150%; z-index:9000; pointer-events:none;
    opacity:.30; mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.86' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
    animation:grain-shift 6s steps(5) infinite;
  }
  @keyframes grain-shift{
    0%{ transform:translate3d(0,0,0) }      20%{ transform:translate3d(-3%,2%,0) }
    40%{ transform:translate3d(2%,-3%,0) }  60%{ transform:translate3d(-2%,-2%,0) }
    80%{ transform:translate3d(3%,1%,0) }   100%{ transform:translate3d(0,0,0) }
  }

  /* Image frame: holds a warm placeholder so a slow/failed image
     still reads as a deliberate surface, never a white hole.            */
  .frame{
    position:relative; overflow:hidden; border-radius:var(--r-lg);
    background:linear-gradient(135deg, var(--kraft), var(--paper-2));
    isolation:isolate;
  }
  .frame img, .frame .ph{ transition:transform 1.1s var(--ease); }
  .frame img[data-parallax], .frame .ph[data-parallax]{ position:absolute; inset:-11% 0; height:122%; }
  .frame::after{
    content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
    background:linear-gradient(180deg, transparent 55%, rgba(22,19,15,.16));
    opacity:.7;
  }

  /* ── Image placeholders ──
     Stand in for photography that has not been shot yet. Each one names
     the shot it is holding space for, so swapping in real images later
     is a matter of matching labels.                                    */
  .ph{
    position:absolute; inset:0; z-index:0;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
    padding:18px; text-align:center;
    background-color:var(--kraft);
    background-image:repeating-linear-gradient(45deg,
      rgba(22,19,15,.045) 0 1px, transparent 1px 12px);
    color:var(--stone-2);
    transition:transform 1.1s var(--ease);
  }
  .ph::before{
    content:''; width:28px; height:28px; flex-shrink:0; opacity:.65;
    background:currentColor;
    -webkit-mask:var(--ph-icon) center/contain no-repeat;
            mask:var(--ph-icon) center/contain no-repeat;
  }
  .ph{
    --ph-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2.5'/%3E%3Ccircle cx='8.8' cy='9' r='1.7'/%3E%3Cpath d='M21 15.5l-5-5L5.5 21'/%3E%3C/svg%3E");
  }
  .ph::after{
    content:attr(data-ph);
    font-size:.62rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
    line-height:1.5; max-width:22ch;
  }
  .ph--dark{ background-color:var(--ink-2); color:rgba(255,255,255,.34);
    background-image:repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0 1px, transparent 1px 12px); }
  .ph--before{ background-color:#E0D6C4; }
  .ph--after{ background-color:#EFE7DA; }
  .ph--flat{ position:relative; aspect-ratio:4/3; }

  /* Parallax layers get their own compositing layer */
  [data-parallax]{ will-change:transform; }
}

/* ══════════════════════════════════════════════════════════════
   3. COMPONENTS
   ══════════════════════════════════════════════════════════════ */
@layer components {

  /* ── Buttons ──────────────────────────────────────────────── */
  .btn{
    --btn-bg:var(--ember); --btn-fg:#fff;
    position:relative; display:inline-flex; align-items:center; gap:.6em;
    padding:13px 26px; border-radius:var(--r-full);
    font-size:var(--fs-sm); font-weight:700; letter-spacing:-0.01em;
    background:var(--btn-bg); color:var(--btn-fg);
    box-shadow:var(--sh-ember);
    overflow:hidden; isolation:isolate; white-space:nowrap;
    transition:transform var(--t) var(--ease), box-shadow var(--t) var(--ease), background var(--t-fast) linear;
  }
  /* Light sweeps across on hover */
  .btn::before{
    content:''; position:absolute; inset:0; z-index:-1;
    background:linear-gradient(100deg, transparent 20%, rgba(255,255,255,.28) 50%, transparent 80%);
    translate:-120% 0; transition:translate .75s var(--ease);
  }
  .btn:hover::before{ translate:120% 0; }
  .btn:hover{ background:var(--ember-dk); box-shadow:0 10px 30px rgba(217,98,47,.42); }
  .btn:active{ transform:translateY(1px) scale(.985); }
  .btn__arrow{ transition:transform var(--t) var(--ease); flex-shrink:0; }
  .btn:hover .btn__arrow{ transform:translateX(4px); }
  .btn--lg{ padding:17px 36px; font-size:1rem; }
  .btn--ghost{
    --btn-bg:transparent; --btn-fg:var(--ink);
    border:1.5px solid var(--line-2); box-shadow:none; background:var(--white);
  }
  .btn--ghost:hover{ background:var(--white); border-color:var(--ink); box-shadow:var(--sh-sm); }
  .btn--glass{
    --btn-bg:rgba(255,255,255,.10); --btn-fg:#fff;
    border:1.5px solid rgba(255,255,255,.30);
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); box-shadow:none;
  }
  .btn--glass:hover{ background:rgba(255,255,255,.20); border-color:rgba(255,255,255,.6); box-shadow:none; }

  /* ── Header ───────────────────────────────────────────────── */
  .header{
    position:fixed; inset:0 0 auto; z-index:1000;
    padding:16px var(--gutter); pointer-events:none;
    transition:padding var(--t) var(--ease);
  }
  .header.is-stuck{ padding-top:10px; }

  .nav{
    max-width:1200px; margin-inline:auto; pointer-events:auto;
    display:flex; align-items:center; justify-content:space-between; gap:18px;
    padding:9px 10px 9px 22px; border-radius:var(--r-full);
    background:rgba(251,249,245,.72);
    border:1px solid rgba(22,19,15,.07);
    backdrop-filter:blur(18px) saturate(1.7);
    -webkit-backdrop-filter:blur(18px) saturate(1.7);
    box-shadow:0 1px 2px rgba(22,19,15,.03);
    transition:box-shadow var(--t) var(--ease), background var(--t) var(--ease), border-color var(--t) var(--ease);
  }
  .header.is-stuck .nav{
    background:rgba(251,249,245,.88);
    border-color:rgba(22,19,15,.11);
    box-shadow:0 6px 28px rgba(22,19,15,.11), 0 1px 3px rgba(22,19,15,.06);
  }
  /* Reading-progress hairline riding the bottom of the pill */
  .nav__progress{
    position:absolute; left:22px; right:22px; bottom:0; height:1.5px;
    border-radius:2px; overflow:hidden; opacity:0; transition:opacity var(--t);
  }
  .header.is-stuck .nav__progress{ opacity:1; }
  .nav__progress i{
    display:block; height:100%; width:100%; transform-origin:0 50%;
    transform:scaleX(var(--progress,0));
    background:linear-gradient(90deg, var(--ember), var(--ember-lt));
  }

  .logo{ font-size:1.0625rem; font-weight:800; letter-spacing:-0.03em; white-space:nowrap; }
  .logo span{ color:var(--ember); }

  .nav__links{ display:flex; align-items:center; gap:2px; }
  .nav__links a{
    position:relative; padding:9px 15px; border-radius:var(--r-full);
    font-size:var(--fs-sm); font-weight:600; color:var(--stone);
    transition:color var(--t-fast) var(--ease);
  }
  .nav__links a::before{
    content:''; position:absolute; inset:0; border-radius:inherit;
    background:rgba(22,19,15,.055); scale:.85; opacity:0;
    transition:scale var(--t) var(--ease), opacity var(--t) var(--ease);
  }
  .nav__links a:hover{ color:var(--ink); }
  .nav__links a:hover::before{ scale:1; opacity:1; }
  .nav__links a.is-active{ color:var(--ink); }
  .nav__links a.is-active::after{
    content:''; position:absolute; left:50%; bottom:3px; translate:-50% 0;
    width:4px; height:4px; border-radius:50%; background:var(--ember);
  }

  .nav__right{ display:flex; align-items:center; gap:12px; }
  .nav__phone{
    display:inline-flex; align-items:center; gap:7px;
    font-size:var(--fs-sm); font-weight:700; color:var(--ink);
    transition:color var(--t-fast);
  }
  .nav__phone svg{ width:15px; height:15px; color:var(--ember); }
  .nav__phone:hover{ color:var(--ember); }

  /* Hamburger → X */
  .burger{
    display:none; position:relative; width:42px; height:42px; border-radius:50%;
    background:var(--ink); flex-shrink:0;
  }
  .burger i{
    position:absolute; left:13px; right:13px; top:calc(50% - .9px);
    height:1.8px; background:var(--paper); border-radius:2px;
    transition:transform .38s var(--ease), opacity .18s linear;
  }
  .burger i:nth-child(1){ transform:translateY(-5.5px); }
  .burger i:nth-child(3){ transform:translateY(5.5px); }
  .nav-open .burger i:nth-child(1){ transform:rotate(45deg); }
  .nav-open .burger i:nth-child(2){ opacity:0; transform:scaleX(.2); }
  .nav-open .burger i:nth-child(3){ transform:rotate(-45deg); }

  /* Mobile drawer */
  .drawer{
    position:fixed; inset:0; z-index:999; pointer-events:none;
    background:var(--paper);
    clip-path:circle(0% at calc(100% - 42px) 42px);
    transition:clip-path .7s var(--ease);
    display:flex; flex-direction:column; justify-content:flex-start;
    padding:96px var(--gutter) 40px; overflow-y:auto;
  }
  /* auto margins centre the block when there is room and simply
     collapse when there is not, instead of clipping the top the way
     justify-content:center does on short screens */
  .drawer > nav{ margin-top:auto; }
  .drawer__foot{ margin-bottom:auto; }
  .nav-open .drawer{ pointer-events:auto; clip-path:circle(150% at calc(100% - 42px) 42px); }
  .drawer a.drawer__link{
    display:flex; align-items:baseline; gap:13px;
    font-size:clamp(1.4rem,6vw,1.85rem); font-weight:800; letter-spacing:var(--tracking-tight);
    padding:13px 0; border-bottom:1px solid var(--line);
    opacity:0; transform:translateY(24px);
    transition:opacity .5s var(--ease), transform .6s var(--ease), color var(--t-fast);
  }
  .nav-open .drawer a.drawer__link{ opacity:1; transform:none; transition-delay:calc(.12s + var(--i,0)*.055s); }
  .drawer__link:active{ color:var(--ember); }
  .drawer__link i{ font-size:.7rem; font-weight:800; letter-spacing:.06em; color:var(--ember); font-style:normal; }
  .drawer__foot{
    margin-top:36px; display:flex; flex-direction:column; gap:12px;
    opacity:0; transform:translateY(20px);
    transition:opacity .5s var(--ease) .4s, transform .5s var(--ease) .4s;
  }
  .nav-open .drawer__foot{ opacity:1; transform:none; }
  .drawer__foot .btn{ justify-content:center; }

  /* ── Hero ─────────────────────────────────────────────────── */
  .hero{
    position:relative; min-height:100svh; display:grid; align-items:end;
    overflow:clip; isolation:isolate;
    padding-block:140px clamp(48px,7vw,84px);
  }
  .hero__media{ position:absolute; inset:-8% 0 -12%; z-index:-2; }
  .hero__media img, .hero__media .ph{
    height:100%; width:100%; object-fit:cover;
    transform:scale(1.14); transform-origin:60% 40%;
    animation:kenburns 24s var(--ease-io) infinite alternate;
  }
  @keyframes kenburns{ to{ transform:scale(1.02) translate3d(1.5%,-1%,0); } }
  .hero__scrim{
    position:absolute; inset:0; z-index:-1;
    background:
      radial-gradient(120% 80% at 20% 105%, rgba(217,98,47,.24), transparent 58%),
      linear-gradient(180deg, rgba(14,11,8,.62) 0%, rgba(14,11,8,.18) 34%, rgba(14,11,8,.55) 72%, rgba(14,11,8,.88) 100%);
  }
  .hero__inner{ position:relative; z-index:1; }
  .hero__chip{
    display:inline-flex; align-items:center; gap:9px;
    padding:8px 18px 8px 9px; margin-bottom:26px;
    border-radius:var(--r-full); color:#fff;
    font-size:var(--fs-xs); font-weight:600; letter-spacing:.01em;
    background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.22);
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  }
  .pulse{
    position:relative; width:8px; height:8px; border-radius:50%;
    background:var(--ember-lt); flex-shrink:0;
  }
  .pulse::after{
    content:''; position:absolute; inset:0; border-radius:50%;
    background:var(--ember-lt); animation:pulse 2.4s var(--ease-io) infinite;
  }
  @keyframes pulse{ 0%{ transform:scale(1); opacity:.7 } 70%,100%{ transform:scale(3.4); opacity:0 } }

  .hero__title{
    font-size:var(--fs-display); line-height:1.0; color:#fff;
    max-width:24ch; margin-bottom:24px;
    text-wrap:balance;
  }
  .hero__title em{ color:#FFC49B; }
  .hero__lead{
    font-size:var(--fs-lead); color:rgba(255,255,255,.80); line-height:1.65;
    max-width:46ch; margin-bottom:34px;
  }
  .hero__actions{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
  .hero__foot{
    margin-top:clamp(44px,6vw,76px); padding-top:26px;
    border-top:1px solid rgba(255,255,255,.16);
    display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  }
  .hero__metrics{ display:flex; gap:clamp(24px,4vw,52px); }
  .hero__metric b{ display:block; font-size:1.6rem; font-weight:800; color:#fff; letter-spacing:-.03em; line-height:1; }
  .hero__metric span{ font-size:var(--fs-xs); color:rgba(255,255,255,.58); }
  .scroll-cue{
    display:inline-flex; align-items:center; gap:10px;
    font-size:var(--fs-xs); font-weight:600; letter-spacing:.14em; text-transform:uppercase;
    color:rgba(255,255,255,.62);
  }
  .scroll-cue i{
    display:block; width:1px; height:34px; background:rgba(255,255,255,.28); position:relative; overflow:hidden;
  }
  .scroll-cue i::after{
    content:''; position:absolute; inset:0; background:#fff;
    animation:cue 2.2s var(--ease-io) infinite;
  }
  @keyframes cue{ 0%{ transform:translateY(-100%) } 55%,100%{ transform:translateY(100%) } }

  /* ── Eyebrow / section heads ──────────────────────────────── */
  .eyebrow{
    display:inline-flex; align-items:center; gap:10px; margin-bottom:16px;
    font-size:.7rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
    color:var(--ember);
  }
  .eyebrow::before{
    content:''; width:26px; height:1.5px; background:var(--ember); flex-shrink:0;
    transform-origin:0 50%; transform:scaleX(0); transition:transform .8s var(--ease) .1s;
  }
  .is-in .eyebrow::before, .eyebrow.is-in::before{ transform:scaleX(1); }
  .title{ font-size:var(--fs-h2); text-wrap:balance; }
  .title em{ color:var(--ember); }
  .s-ink .title em{ color:var(--ember-lt); }
  .lead{ font-size:var(--fs-lead); color:var(--stone); line-height:1.72; max-width:52ch; }
  .s-ink .lead{ color:rgba(255,255,255,.62); }
  .head{
    display:grid; grid-template-columns:1fr; gap:16px;
    justify-items:center; text-align:center;
    margin-bottom:clamp(40px,5vw,64px);
  }
  .head .lead{ margin-inline:auto; text-align:center; }
  .head .eyebrow{ justify-content:center; }
  .head--center{ grid-template-columns:1fr; }

  /* ── Trust strip ──────────────────────────────────────────── */
  .trust{ background:var(--white); border-bottom:1px solid var(--line); position:relative; z-index:2; }
  .trust__inner{
    display:flex; align-items:stretch; justify-content:center;
    max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter);
  }
  .trust__item{
    display:flex; align-items:center; gap:10px; padding:22px 26px;
    font-size:var(--fs-sm); font-weight:600; color:var(--stone); white-space:nowrap;
    border-right:1px solid var(--line);
  }
  .trust__item:last-child{ border-right:0; }
  .trust__item svg{ width:17px; height:17px; color:var(--ember); flex-shrink:0; }

  /* ── About ────────────────────────────────────────────────── */
  .about__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,90px); align-items:center; }
  .about__media{ position:relative; padding:0 44px 56px 0; }
  .about__media .frame--main{ aspect-ratio:4/5; box-shadow:var(--sh-lg); }
  .about__media .frame--sub{
    position:absolute; right:0; bottom:0; width:54%; aspect-ratio:4/3;
    border-radius:var(--r-md); border:6px solid var(--white); box-shadow:var(--sh-md);
  }
  .about__badge{
    position:absolute; top:26px; left:-18px; z-index:3;
    display:flex; align-items:center; gap:10px;
    background:var(--white); border:1px solid var(--line);
    padding:10px 16px 10px 12px; border-radius:var(--r-full); box-shadow:var(--sh-md);
    font-size:var(--fs-xs); font-weight:700;
  }
  .about__badge b{ color:var(--ember); }
  .about__text p{ color:var(--stone); line-height:1.78; margin-bottom:18px; max-width:50ch; }
  .about__text p:first-of-type{ font-size:var(--fs-lead); color:var(--ink-2); }
  .stats{ display:flex; gap:0; margin-top:38px; padding-top:32px; border-top:1px solid var(--line); }
  .stat{ padding-right:clamp(20px,3vw,38px); margin-right:clamp(20px,3vw,38px); border-right:1px solid var(--line); }
  .stat:last-child{ border:0; padding:0; margin:0; }
  .stat b{
    display:block; font-size:clamp(1.9rem,3vw,2.4rem); font-weight:800;
    letter-spacing:-.04em; line-height:1; color:var(--ember);
    font-variant-numeric:tabular-nums;
  }
  .stat span{ display:block; font-size:var(--fs-xs); color:var(--stone); margin-top:7px; max-width:14ch; }
  .about__cta{ margin-top:34px; display:flex; gap:12px; flex-wrap:wrap; }

  /* ── Services ─────────────────────────────────────────────── */
  .svc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
  .svc{
    position:relative; display:flex; flex-direction:column;
    width:100%; padding:0; text-align:left; font:inherit; color:inherit; cursor:pointer;
    background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg);
    overflow:hidden; box-shadow:var(--sh-xs);
    transition:transform var(--t-slow) var(--ease), box-shadow var(--t-slow) var(--ease), border-color var(--t);
  }
  .svc:hover{ transform:translateY(-7px); box-shadow:var(--sh-md); border-color:transparent; }
  .svc__img{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--kraft); }
  .svc__img img, .svc__img .ph{ transition:transform 1.1s var(--ease), filter .6s var(--ease); }
  .svc:hover .svc__img img, .svc:hover .svc__img .ph{ transform:scale(1.07); }
  .svc__num{
    position:absolute; top:14px; left:14px; z-index:2;
    width:34px; height:34px; display:grid; place-items:center; border-radius:50%;
    background:rgba(22,19,15,.55); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    color:#fff; font-size:.68rem; font-weight:800; letter-spacing:.04em;
    transition:background var(--t) var(--ease), transform var(--t) var(--ease-sp);
  }
  .svc:hover .svc__num{ background:var(--ember); transform:scale(1.08); }
  .svc__body{ padding:22px 24px 26px; flex:1; display:flex; flex-direction:column; }
  .svc__body h3{ font-size:var(--fs-h3); margin-bottom:8px; letter-spacing:-.02em; }
  .svc__body p{ font-size:var(--fs-sm); color:var(--stone); line-height:1.68; }
  .svc__more{
    margin-top:16px; display:inline-flex; align-items:center; gap:7px;
    font-size:var(--fs-xs); font-weight:700; color:var(--ember);
    opacity:0; transform:translateY(6px);
    transition:opacity var(--t) var(--ease), transform var(--t) var(--ease);
  }
  .svc:hover .svc__more{ opacity:1; transform:none; }
  .svc__more svg{ width:13px; height:13px; transition:transform var(--t) var(--ease); }
  .svc:hover .svc__more svg{ transform:translateX(3px); }

  /* ── Marquee band ─────────────────────────────────────────── */
  .marquee{
    position:relative; overflow:hidden; padding-block:26px;
    background:var(--ink); color:var(--paper);
    border-block:1px solid rgba(255,255,255,.07);
  }
  .marquee__track{
    display:flex; width:max-content; gap:0;
    animation:marquee 42s linear infinite;
  }
  .marquee:hover .marquee__track{ animation-play-state:paused; }
  @keyframes marquee{ to{ transform:translate3d(-50%,0,0); } }
  .marquee__item{
    display:inline-flex; align-items:center; gap:26px; padding-inline:26px;
    font-size:clamp(1rem,2vw,1.35rem); font-weight:700; letter-spacing:-.02em; white-space:nowrap;
  }
  .marquee__item::after{
    content:''; width:7px; height:7px; border-radius:50%; background:var(--ember); flex-shrink:0;
  }
  .marquee__item:nth-child(even){ font-weight:500; color:#B7ADA0; }
}

@layer components {

  /* ── Work / gallery ───────────────────────────────────────── */
  .work__head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-bottom:34px; }
  .work__head .title{ text-align:left; }
  .tabs{
    position:relative; display:flex; gap:4px; padding:5px;
    background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r-full);
  }
  .tabs__pill{
    position:absolute; top:5px; bottom:5px; left:0; z-index:0;
    border-radius:var(--r-full); background:var(--white);
    box-shadow:var(--sh-xs);
    transform:translateX(var(--x,0)); width:var(--w,0);
    transition:transform .55s var(--ease), width .55s var(--ease);
  }
  .tab{
    position:relative; z-index:1; padding:10px 20px; border-radius:var(--r-full);
    font-size:var(--fs-sm); font-weight:600; color:var(--stone);
    transition:color var(--t) var(--ease);
  }
  .tab[aria-selected="true"]{ color:var(--ink); }
  .tab:hover{ color:var(--ink); }

  .gallery{
    display:grid; grid-template-columns:repeat(3,1fr); gap:2px;
    background:var(--line); border:1px solid var(--line);
    border-radius:var(--r-lg); overflow:hidden;
  }
  .shot{
    position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--kraft);
    cursor:pointer; transition:opacity .5s var(--ease), transform .5s var(--ease);
  }
  .shot img, .shot .ph{ transition:transform 1.2s var(--ease), filter .6s var(--ease); }
  .shot::after{
    content:''; position:absolute; inset:0;
    background:linear-gradient(180deg, transparent 45%, rgba(14,11,8,.78));
    opacity:0; transition:opacity var(--t) var(--ease);
  }
  .shot:hover img, .shot:hover .ph{ transform:scale(1.06); }
  .shot:hover::after{ opacity:1; }
  .shot__label{
    position:absolute; left:0; right:0; bottom:0; z-index:2;
    padding:20px 20px 18px; color:#fff;
    transform:translateY(14px); opacity:0;
    transition:transform .5s var(--ease), opacity .4s var(--ease);
  }
  .shot:hover .shot__label{ transform:none; opacity:1; }
  .shot__label b{ display:block; font-size:var(--fs-sm); font-weight:700; }
  .shot__label span{ font-size:var(--fs-xs); color:rgba(255,255,255,.66); }
  .shot.is-hidden{ display:none; }
  /* Enter animation when a filter is applied */
  .shot.is-entering{ animation:shot-in .6s var(--ease) both; animation-delay:calc(var(--i,0)*.06s); }
  @keyframes shot-in{ from{ opacity:0; transform:scale(.96) translateY(14px); } }

  /* ── Before / after slider ────────────────────────────────── */
  .ba{
    position:relative; margin-top:24px; border-radius:var(--r-lg); overflow:hidden;
    aspect-ratio:16/9; background:var(--kraft); box-shadow:var(--sh-md);
    --pos:50%; touch-action:pan-y;
  }
  .ba__layer{ position:absolute; inset:0; }
  .ba__layer--before{ clip-path:inset(0 calc(100% - var(--pos)) 0 0); }
  .ba__tag{
    position:absolute; bottom:16px; z-index:3; padding:6px 14px; border-radius:var(--r-full);
    font-size:var(--fs-xs); font-weight:700; letter-spacing:.08em; text-transform:uppercase;
    background:rgba(14,11,8,.62); color:#fff;
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  }
  .ba__tag--b{ left:16px; }
  .ba__tag--a{ right:16px; background:var(--ember); }
  .ba__line{
    position:absolute; top:0; bottom:0; left:var(--pos); z-index:4;
    width:2px; background:#fff; transform:translateX(-1px);
    box-shadow:0 0 14px rgba(0,0,0,.35); pointer-events:none;
  }
  .ba__knob{
    position:absolute; top:50%; left:50%; translate:-50% -50%;
    width:46px; height:46px; border-radius:50%; background:#fff;
    display:grid; place-items:center; box-shadow:0 6px 20px rgba(0,0,0,.28);
    transition:transform var(--t) var(--ease-sp);
  }
  .ba:hover .ba__knob{ transform:scale(1.08); }
  .ba__knob svg{ width:20px; height:20px; color:var(--ink); }
  .ba__range{
    position:absolute; inset:0; z-index:5; width:100%; height:100%;
    margin:0; opacity:0; cursor:ew-resize; -webkit-appearance:none; appearance:none; background:none;
  }
  .ba__range::-webkit-slider-thumb{ -webkit-appearance:none; width:56px; height:100%; }
  .ba__range:focus-visible ~ .ba__line .ba__knob{ outline:2px solid var(--ember); outline-offset:3px; }

  /* ── Process ──────────────────────────────────────────────── */
  .process__body{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,78px); align-items:start; }
  .process__media{ position:sticky; top:120px; }
  .process__frame{ position:relative; aspect-ratio:3/4; border-radius:var(--r-lg); overflow:hidden; background:var(--kraft); box-shadow:var(--sh-lg); }
  .process__frame img, .process__frame .ph{
    position:absolute; inset:0; opacity:0; transform:scale(1.08);
    transition:opacity .9s var(--ease), transform 1.4s var(--ease);
  }
  .process__frame img.is-active, .process__frame .ph.is-active{ opacity:1; transform:scale(1); }
  .process__counter{
    position:absolute; left:18px; bottom:18px; z-index:2;
    display:flex; align-items:baseline; gap:4px;
    padding:9px 16px; border-radius:var(--r-full);
    background:rgba(14,11,8,.55); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    color:#fff; font-weight:800; font-size:var(--fs-sm); letter-spacing:.02em;
  }
  .process__counter small{ color:rgba(255,255,255,.5); font-weight:600; }
  .process__steps{ position:relative; }
  .process__steps::before,
  .process__steps::after{
    content:''; position:absolute; left:21px; top:var(--rail-top,22px);
    width:2px; border-radius:2px; pointer-events:none;
  }
  .process__steps::before{ height:var(--rail,0px); background:var(--line-2); }
  .process__steps::after{
    height:calc(var(--rail-progress,0) * var(--rail,0px));
    background:linear-gradient(180deg, var(--ember), var(--ember-lt));
  }

  .step{
    position:relative; z-index:1;
    display:flex; gap:22px; padding:28px 0; border-bottom:1px solid var(--line);
    opacity:.38; transition:opacity .6s var(--ease);
  }
  .step:first-child{ padding-top:0; }
  .step:last-child{ border-bottom:0; }
  .step.is-lit{ opacity:1; }
  .step__num{
    position:relative; flex-shrink:0; width:44px; height:44px; border-radius:50%;
    display:grid; place-items:center; margin-top:2px;
    background:#F1E2D5; border:1.5px solid rgba(217,98,47,.20);
    color:var(--ember); font-size:.76rem; font-weight:800;
    transition:background .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
  }
  .step.is-lit .step__num{
    background:var(--ember); color:#fff; border-color:var(--ember); box-shadow:var(--sh-ember);
  }
  .step__num::after{
    content:''; position:absolute; inset:-1.5px; border-radius:50%;
    border:1.5px solid var(--ember); opacity:0; transform:scale(1);
  }
  .step.is-lit .step__num::after{ animation:ring 2.6s var(--ease-io) infinite; }
  @keyframes ring{ 0%{ opacity:.6; transform:scale(1) } 70%,100%{ opacity:0; transform:scale(1.6) } }
  .step h3{ font-size:var(--fs-h3); margin-bottom:8px; }
  .step p{ font-size:var(--fs-sm); color:var(--stone); line-height:1.72; max-width:46ch; }

  /* ── Why us ───────────────────────────────────────────────── */
  .why{
    display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
    background:var(--line-2); border:1px solid var(--line-2);
    border-radius:var(--r-lg); overflow:hidden;
  }
  .why__card{
    position:relative; background:var(--white); padding:34px 28px 38px;
    transition:background .5s var(--ease);
    overflow:hidden;
  }
  .why__card::before{
    content:''; position:absolute; inset:auto 0 0 0; height:3px;
    background:linear-gradient(90deg,var(--ember),var(--ember-lt));
    transform:scaleX(0); transform-origin:0 50%;
    transition:transform .6s var(--ease);
  }
  .why__card:hover{ background:#FFFDFB; }
  .why__card:hover::before{ transform:scaleX(1); }
  .why__icon{
    width:48px; height:48px; border-radius:var(--r-sm); display:grid; place-items:center;
    background:var(--ember-wash); margin-bottom:26px;
    transition:transform .5s var(--ease-sp), background .4s var(--ease);
  }
  .why__card:hover .why__icon{ transform:translateY(-3px) rotate(-5deg); background:var(--ember); }
  .why__icon svg{ width:22px; height:22px; color:var(--ember); transition:color .4s; }
  .why__card:hover .why__icon svg{ color:#fff; }
  .why__card h3{ font-size:var(--fs-h3); margin-bottom:10px; }
  .why__card p{ font-size:var(--fs-sm); color:var(--stone); line-height:1.7; }

  /* ── Testimonials ─────────────────────────────────────────── */
  .quotes{ display:flex; align-items:stretch; gap:20px; }
  .quote{
    flex:0 0 auto; display:flex; flex-direction:column;
    position:relative; background:var(--white); border:1px solid var(--line);
    border-radius:var(--r-lg); padding:32px 28px 26px; box-shadow:var(--sh-xs);
    transition:transform var(--t-slow) var(--ease), box-shadow var(--t-slow) var(--ease);
  }
  .quote:hover{ transform:translateY(-5px); box-shadow:var(--sh-md); }
  .quote__mark{
    position:absolute; top:10px; right:22px;
    font-size:3.6rem; font-weight:800; line-height:1; color:var(--ember);
    opacity:.16; pointer-events:none; user-select:none;
  }
  .stars{ display:flex; gap:3px; margin-bottom:16px; }
  .stars svg{ width:15px; height:15px; color:var(--ember); }
  .quote blockquote{ font-size:var(--fs-lead); line-height:1.62; color:var(--ink-2); margin-bottom:24px; flex:1; }
  .quote__by{ display:flex; align-items:center; gap:12px; border-top:1px solid var(--line); padding-top:18px; }
  .avatar{
    width:38px; height:38px; border-radius:50%; flex-shrink:0; display:grid; place-items:center;
    background:var(--ember-wash); color:var(--ember); font-weight:800; font-size:var(--fs-xs);
  }
  .quote__by b{ display:block; font-size:var(--fs-sm); }
  .quote__by b + span{ font-size:var(--fs-xs); color:var(--stone); }

  /* ── FAQ ──────────────────────────────────────────────────── */
  .faq__grid{ display:grid; grid-template-columns:.78fr 1.22fr; gap:clamp(36px,5vw,84px); align-items:start; }
  .faq__aside{ position:sticky; top:120px; }
  .faq__card{
    margin-top:30px; padding:26px 28px; border-radius:var(--r-lg);
    background:linear-gradient(140deg, var(--ember), var(--ember-dk));
    box-shadow:var(--sh-ember); color:#fff; position:relative; overflow:hidden;
  }
  .faq__card::after{
    content:''; position:absolute; right:-40px; top:-40px; width:150px; height:150px;
    border-radius:50%; background:rgba(255,255,255,.10);
  }
  .faq__card small{ display:block; font-size:var(--fs-xs); font-weight:600; color:rgba(255,255,255,.78); margin-bottom:6px; }
  .faq__card a{ font-size:1.4rem; font-weight:800; letter-spacing:-.03em; display:inline-flex; align-items:center; gap:8px; }
  .faq__card a svg{ width:18px; height:18px; transition:transform var(--t) var(--ease); }
  .faq__card a:hover svg{ transform:translateX(4px); }

  .faq__item{ border-bottom:1px solid var(--line); }
  .faq__q{
    width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px;
    padding:24px 0; text-align:left; font-size:var(--fs-lead); font-weight:700; letter-spacing:-.015em;
    color:var(--ink); transition:color var(--t-fast) var(--ease);
  }
  .faq__q:hover{ color:var(--ember); }
  .faq__toggle{
    position:relative; flex-shrink:0; width:34px; height:34px; border-radius:50%;
    background:var(--paper-2); border:1px solid var(--line-2);
    transition:background var(--t) var(--ease), transform .5s var(--ease), border-color var(--t);
  }
  .faq__toggle i{
    position:absolute; top:50%; left:50%; translate:-50% -50%;
    background:var(--ember); border-radius:2px; transition:transform var(--t) var(--ease), background var(--t);
  }
  .faq__toggle i:nth-child(1){ width:12px; height:1.8px; }
  .faq__toggle i:nth-child(2){ width:1.8px; height:12px; }
  .faq__item.is-open .faq__toggle{ background:var(--ember); border-color:var(--ember); transform:rotate(180deg); }
  .faq__item.is-open .faq__toggle i{ background:#fff; }
  .faq__item.is-open .faq__toggle i:nth-child(2){ transform:scaleY(0); }
  .faq__a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s var(--ease); }
  .faq__item.is-open .faq__a{ grid-template-rows:1fr; }
  .faq__a > div{ overflow:hidden; }
  .faq__a p{ font-size:var(--fs-body); color:var(--stone); line-height:1.78; padding-bottom:24px; max-width:60ch; }

  .areas{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:18px; }
  .areas span{
    font-size:var(--fs-xs); font-weight:600; color:var(--ember-dk);
    background:var(--ember-wash); padding:6px 14px; border-radius:var(--r-full);
    transition:transform var(--t) var(--ease-sp), background var(--t);
  }
  .areas span:hover{ transform:translateY(-2px); background:#F7E0D3; }
  .map{
    position:relative; border-radius:var(--r-md); overflow:hidden; margin-bottom:24px;
    border:1px solid var(--line-2); background:#EDE4D2;
  }
  .map svg{ display:block; width:100%; height:auto; }
  .map__ringline{ animation:breathe 6s var(--ease-io) infinite; transform-origin:center; transform-box:fill-box; }
  @keyframes breathe{ 50%{ transform:scale(1.03); } }

  /* ── Contact ──────────────────────────────────────────────── */
  .contact__grid{ display:grid; grid-template-columns:.88fr 1.12fr; gap:clamp(36px,5vw,72px); align-items:start; }
  .contact__list{ margin-top:34px; display:flex; flex-direction:column; gap:12px; }
  .cline{
    display:flex; align-items:center; gap:14px; padding:12px 16px;
    background:var(--white); border:1px solid var(--line); border-radius:var(--r-md);
    box-shadow:var(--sh-xs);
    transition:transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t);
  }
  a.cline:hover{ transform:translateX(4px); box-shadow:var(--sh-sm); border-color:rgba(217,98,47,.35); }
  .cline__ic{
    width:40px; height:40px; border-radius:var(--r-xs); flex-shrink:0; display:grid; place-items:center;
    background:var(--ember-wash);
  }
  .cline__ic svg{ width:17px; height:17px; color:var(--ember); }
  .cline b{ display:block; font-size:var(--fs-sm); font-weight:700; }
  .cline span{ font-size:var(--fs-xs); color:var(--stone); }

  .form{
    position:relative; background:var(--white); border:1px solid var(--line);
    border-radius:var(--r-xl); padding:clamp(26px,3.4vw,42px); box-shadow:var(--sh-lg);
    overflow:hidden;
  }
  .form h3{ font-size:1.45rem; margin-bottom:6px; }
  .form__sub{ font-size:var(--fs-sm); color:var(--stone); margin-bottom:26px; }
  .row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .field{ position:relative; margin-bottom:12px; }
  .field input, .field textarea{
    width:100%; padding:24px 16px 10px; border-radius:var(--r-sm);
    border:1.5px solid var(--line-2); background:var(--paper);
    font-size:var(--fs-body); color:var(--ink);
    transition:border-color var(--t) var(--ease), background var(--t) var(--ease), box-shadow var(--t) var(--ease);
  }
  .field textarea{ min-height:112px; resize:vertical; }
  .field label{
    position:absolute; left:16px; top:16px; pointer-events:none;
    font-size:var(--fs-body); color:var(--stone-2);
    transform-origin:0 0;
    transition:transform var(--t) var(--ease), color var(--t) var(--ease);
  }
  .field input:focus, .field textarea:focus{
    outline:none; border-color:var(--ember); background:var(--white);
    box-shadow:0 0 0 4px rgba(217,98,47,.10);
  }
  .field input:focus + label, .field textarea:focus + label,
  .field input:not(:placeholder-shown) + label, .field textarea:not(:placeholder-shown) + label{
    transform:translateY(-9px) scale(.72); color:var(--stone);
  }
  .field textarea + label{ top:14px; }
  .drop{
    display:flex; align-items:center; justify-content:center; gap:9px;
    padding:18px; margin-bottom:16px; border-radius:var(--r-sm);
    border:1.5px dashed var(--line-2); color:var(--stone); font-size:var(--fs-sm);
    cursor:pointer; text-align:center;
    transition:border-color var(--t) var(--ease), color var(--t) var(--ease), background var(--t) var(--ease);
  }
  .drop:hover, .drop.is-over{ border-color:var(--ember); color:var(--ember); background:var(--ember-wash); }
  .drop svg{ width:17px; height:17px; flex-shrink:0; }
  .submit{
    width:100%; justify-content:center; padding:16px;
    font-size:1rem;
  }
  .form__note{ font-size:var(--fs-xs); color:var(--stone-2); text-align:center; margin-top:12px; }
  .form__done{
    position:absolute; inset:0; z-index:5; display:grid; place-items:center; text-align:center;
    background:var(--white); padding:40px;
    opacity:0; visibility:hidden; transform:translateY(12px);
    transition:opacity var(--t) var(--ease), transform .5s var(--ease), visibility var(--t);
  }
  .form.is-sent .form__done{ opacity:1; visibility:visible; transform:none; }
  .form__done i{
    width:62px; height:62px; border-radius:50%; background:var(--ember-wash);
    display:grid; place-items:center; margin:0 auto 20px;
  }
  .form__done svg{ width:26px; height:26px; color:var(--ember); }
  .form__done h4{ font-size:1.3rem; margin-bottom:8px; }
  .form__done p{ font-size:var(--fs-sm); color:var(--stone); max-width:34ch; margin-inline:auto; }

  /* ── Footer ───────────────────────────────────────────────── */
  .footer{ background:var(--ink); color:#fff; padding-block:clamp(56px,7vw,84px) 28px; position:relative; overflow:clip; }
  .footer__top{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:40px; padding-bottom:44px; border-bottom:1px solid var(--line-dark); }
  .footer__brand p{ font-size:var(--fs-sm); color:rgba(255,255,255,.42); max-width:28ch; line-height:1.7; margin-top:12px; }
  .footer__logo{ font-size:1.25rem; font-weight:800; letter-spacing:-.03em; }
  .footer__logo span{ color:var(--ember); }
  .social{ display:flex; gap:9px; margin-top:22px; }
  .social a{
    width:38px; height:38px; border-radius:var(--r-xs); display:grid; place-items:center;
    background:rgba(255,255,255,.05); border:1px solid var(--line-dark);
    transition:background var(--t) var(--ease), transform var(--t) var(--ease-sp), border-color var(--t);
  }
  .social a:hover{ background:var(--ember); border-color:var(--ember); transform:translateY(-3px); }
  .social svg{ width:16px; height:16px; color:rgba(255,255,255,.62); transition:color var(--t); }
  .social a:hover svg{ color:#fff; }
  .fcol h4{ font-size:.68rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.34); margin-bottom:16px; }
  .fcol a, .fcol__btn{
    display:block; font-size:var(--fs-sm); color:rgba(255,255,255,.56); padding-block:5px; width:fit-content;
    text-align:left; font-weight:400;
    transition:color var(--t-fast) var(--ease), transform var(--t) var(--ease);
  }
  .fcol a:hover, .fcol__btn:hover{ color:#fff; transform:translateX(3px); }
  .fcol__note{ display:block; font-size:var(--fs-sm); color:rgba(255,255,255,.30); padding-block:5px; }
  .footer__base{
    display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px 26px;
    font-size:var(--fs-xs); color:rgba(255,255,255,.32); padding-top:26px;
  }
  .footer__made a{
    color:rgba(255,255,255,.62); font-weight:600;
    border-bottom:1px solid rgba(255,255,255,.18); padding-bottom:1px;
    transition:color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
  }
  .footer__made a:hover{ color:var(--ember-lt); border-color:var(--ember-lt); }

  /* ── Chat bubble (desktop + tablet) ───────────────────────── */
  .chat{ position:fixed; right:26px; bottom:26px; z-index:1200; transition:opacity .3s var(--ease); }
  .chat__fab{
    position:relative; width:60px; height:60px; border-radius:50%;
    background:var(--ember); display:grid; place-items:center;
    box-shadow:0 10px 30px rgba(217,98,47,.42);
    transition:transform var(--t) var(--ease-sp), background var(--t);
  }
  .chat__fab:hover{ transform:scale(1.06) translateY(-2px); }
  .chat__fab svg{ width:24px; height:24px; color:#fff; transition:transform var(--t) var(--ease), opacity var(--t-fast); position:absolute; }
  .chat__fab .ic-close{ opacity:0; transform:rotate(-90deg) scale(.6); }
  .chat.is-open .chat__fab .ic-chat{ opacity:0; transform:rotate(90deg) scale(.6); }
  .chat.is-open .chat__fab .ic-close{ opacity:1; transform:none; }
  .chat__fab::after{
    content:''; position:absolute; inset:0; border-radius:50%; border:2px solid var(--ember);
    animation:ring 3s var(--ease-io) infinite;
  }
  .chat.is-open .chat__fab::after{ animation:none; opacity:0; }
  .chat__dot{
    position:absolute; top:-2px; right:-2px; width:16px; height:16px; border-radius:50%;
    background:var(--moss); border:2.5px solid var(--paper); z-index:2;
    transition:transform var(--t) var(--ease-sp);
  }
  .chat.is-open .chat__dot{ transform:scale(0); }
  .chat__nudge{
    position:absolute; right:74px; bottom:14px; white-space:nowrap;
    background:var(--white); border:1px solid var(--line); box-shadow:var(--sh-md);
    padding:10px 16px; border-radius:var(--r-full); font-size:var(--fs-sm); font-weight:600;
    opacity:0; transform:translateX(10px) scale(.94); transform-origin:100% 50%;
    transition:opacity var(--t) var(--ease), transform .5s var(--ease-sp);
    pointer-events:none;
  }
  .chat__nudge.is-shown{ opacity:1; transform:none; }
  .chat.is-open .chat__nudge{ opacity:0; transform:translateX(10px) scale(.94); }

  .chat__panel{
    position:absolute; right:0; bottom:76px; width:330px;
    background:var(--white); border:1px solid var(--line); border-radius:var(--r-md);
    box-shadow:var(--sh-lg); overflow:hidden; transform-origin:100% 100%;
    opacity:0; visibility:hidden; transform:translateY(14px) scale(.94);
    transition:opacity var(--t) var(--ease), transform .5s var(--ease-sp), visibility var(--t);
  }
  .chat.is-open .chat__panel{ opacity:1; visibility:visible; transform:none; }
  .chat__head{
    display:flex; align-items:center; gap:12px; padding:16px 18px;
    background:linear-gradient(140deg,var(--ink),var(--ink-2)); color:#fff;
  }
  .chat__ava{
    width:38px; height:38px; border-radius:50%; background:var(--ember); flex-shrink:0;
    display:grid; place-items:center; font-weight:800; font-size:var(--fs-xs); color:#fff;
  }
  .chat__head div b{ display:block; font-size:var(--fs-sm); }
  .chat__head div span{ display:flex; align-items:center; gap:6px; font-size:var(--fs-xs); color:rgba(255,255,255,.5); }
  .chat__head div span::before{ content:''; width:6px; height:6px; border-radius:50%; background:#5FBF7E; }
  .chat__body{ padding:18px; background:var(--paper); }
  .bubble{
    background:var(--white); border:1px solid var(--line); border-radius:16px 16px 16px 4px;
    padding:13px 16px; font-size:var(--fs-sm); line-height:1.6; color:var(--ink-2);
    box-shadow:var(--sh-xs); max-width:92%;
    opacity:0; transform:translateY(8px);
    transition:opacity .4s var(--ease), transform .5s var(--ease);
  }
  .chat.is-open .bubble{ opacity:1; transform:none; transition-delay:.18s; }
  .chat__form{ margin-top:14px; display:flex; flex-direction:column; gap:8px; }
  .chat__form .field, .chat__form .chat__send{ margin:0; opacity:0; transform:translateY(8px);
    transition:opacity .4s var(--ease), transform .5s var(--ease); }
  .chat.is-open .chat__form .field,
  .chat.is-open .chat__form .chat__send{ opacity:1; transform:none; transition-delay:calc(.24s + var(--i,0)*.05s); }
  .chat__form input, .chat__form textarea{ padding:19px 14px 7px; font-size:var(--fs-sm); background:var(--white); }
  .chat__form textarea{ min-height:74px; }
  .chat__form label{ top:13px; left:14px; font-size:var(--fs-sm); }
  .chat__send{ width:100%; justify-content:center; padding:12px; font-size:var(--fs-sm); margin-top:2px; }
  .chat__done{ text-align:center; padding:12px 4px 4px; }
  .chat__done b{ display:block; font-size:var(--fs-sm); margin-bottom:4px; }
  .chat__done span{ font-size:var(--fs-xs); color:var(--stone); }
  .chat__foot{ padding:12px 18px; border-top:1px solid var(--line); font-size:var(--fs-xs); color:var(--stone-2); text-align:center; background:var(--white); }

  /* ── Mobile action bar (replaces chat on phones) ──────────── */
  .mobar{
    position:fixed; left:16px; right:16px; z-index:1200;
    bottom:calc(12px + env(safe-area-inset-bottom));
    display:none; gap:8px; padding:8px;
    background:rgba(251,249,245,.68);
    border:1px solid rgba(22,19,15,.08);
    border-radius:var(--r-full);
    backdrop-filter:blur(18px) saturate(1.7);
    -webkit-backdrop-filter:blur(18px) saturate(1.7);
    box-shadow:0 8px 30px rgba(22,19,15,.16);
    transform:translateY(160%);
    transition:transform .6s var(--ease), opacity .3s var(--ease);
  }
  .mobar.is-shown{ transform:none; }
  /* never sit on top of the drawer or a modal */
  .nav-open .mobar, .is-locked .mobar{ transform:translateY(160%); opacity:0; pointer-events:none; }
  .nav-open .chat, .is-locked .chat{ opacity:0; pointer-events:none; }
  .mobar a, .mobar button{
    flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
    padding:15px 12px; border-radius:var(--r-full); font-size:var(--fs-sm); font-weight:700;
    box-shadow:var(--sh-md);
  }
  .mobar svg{ width:16px; height:16px; }
  .mobar a, .mobar button{ box-shadow:none; }
  .mobar__call{ background:rgba(255,255,255,.75); color:var(--ink); border:1px solid rgba(22,19,15,.10); }
  .mobar__quote{ background:var(--ember); color:#fff; box-shadow:0 4px 14px rgba(217,98,47,.34); }
}

/* ══════════════════════════════════════════════════════════════
   4. MOTION — reveal system
   ══════════════════════════════════════════════════════════════ */
@layer motion {

  /* Generic reveal. Children of [data-stagger] inherit an index
     so a whole group cascades from one observer.                       */
  .js [data-reveal]{
    opacity:0;
    transform:translate3d(0, var(--ry, 26px), 0) scale(var(--rs, 1));
    transition:
      opacity .85s var(--ease) var(--rd, 0ms),
      transform 1.05s var(--ease) var(--rd, 0ms),
      -webkit-mask-size 1.15s var(--ease) var(--rd, 0ms),
              mask-size 1.15s var(--ease) var(--rd, 0ms);
    will-change:transform, opacity;
  }
  .js [data-reveal].is-in{ opacity:1; transform:none; will-change:auto; }
  .js [data-reveal="zoom"]{ --ry:0px; --rs:.94; }
  .js [data-reveal="left"]{ --ry:0px; transform:translate3d(-32px,0,0); }
  .js [data-reveal="right"]{ --ry:0px; transform:translate3d(32px,0,0); }
  .js [data-reveal="wipe"]{
    --ry:34px;
    -webkit-mask-image:linear-gradient(#000,#000); mask-image:linear-gradient(#000,#000);
    -webkit-mask-repeat:no-repeat;  mask-repeat:no-repeat;
    -webkit-mask-position:0 0;      mask-position:0 0;
    -webkit-mask-size:100% 0%;      mask-size:100% 0%;
  }
  .js [data-reveal="wipe"].is-in{ -webkit-mask-size:100% 100%; mask-size:100% 100%; }

  /* Line-by-line masked text reveal for headings */
  .lines{ display:block; }
  .line{ display:block; overflow:hidden; padding-bottom:.06em; margin-bottom:-.06em; }
  .js .line > span{
    display:block; transform:translate3d(0,110%,0) rotate(2deg);
    transition:transform 1.05s var(--ease);
    transition-delay:calc(var(--rd,0ms) + var(--i,0) * 90ms);
  }
  .js .is-in .line > span, .js .line.is-in > span{ transform:none; }

  /* Stagger helper */
  .js [data-stagger] > *{ --rd:calc(var(--i,0) * 85ms); }

  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{
      animation-duration:.001ms !important; animation-iteration-count:1 !important;
      transition-duration:.001ms !important; scroll-behavior:auto !important;
    }
    .js [data-reveal]{ opacity:1 !important; transform:none !important; }
    .js [data-reveal="wipe"]{ -webkit-mask-image:none !important; mask-image:none !important; }
    .js .line > span{ transform:none !important; }
    .grain{ display:none; }
    .hero__media img{ animation:none; transform:scale(1.02); }
  }
}

/* ══════════════════════════════════════════════════════════════
   5. RESPONSIVE
   ══════════════════════════════════════════════════════════════ */
@layer media {

  /* Tablet ------------------------------------------------------------ */
  @media (max-width:1080px){
    .about__grid, .contact__grid, .faq__grid, .process__body{ grid-template-columns:1fr; }

    /* Once these stack, their headings read better centred */
    .about__text > .eyebrow, .faq__aside > .eyebrow, .contact__grid > div > .eyebrow,
    .about__text > .title,   .faq__aside > .title,   .contact__grid > div > .title{
      justify-content:center; text-align:center; width:100%;
    }
    /* a centred heading reads wrong over ranged-left body copy */
    .about__text{ text-align:center; }
    .about__text p{ margin-inline:auto; }
    .about__cta{ justify-content:center; }
    /* at least 40px between the major blocks of a stacked section */
    .about__text > .title{ margin-bottom:clamp(26px,5vw,40px); }
    .stats{ margin-top:40px; padding-top:40px; }
    .about__cta{ margin-top:40px; }
    .about__text > .title, .faq__aside > .title, .contact__grid > div > .title{ display:block; }
    .faq__aside > .lead, .contact__grid > div > .lead{ margin-inline:auto; text-align:center; }
    .work__head{ justify-content:center; text-align:center; }
    .work__head > div{ width:100%; }
    .work__head .eyebrow{ justify-content:center; }
    .about__media{ padding:0 40px 48px 0; max-width:560px; }
    .head{ grid-template-columns:1fr; gap:20px; }
    .head .lead{ max-width:60ch; }
    .process__media{ position:static; order:-1; }
    .process__frame{ aspect-ratio:16/10; }
    .faq__aside{ position:static; }
    .svc-grid, .gallery{ grid-template-columns:repeat(2,1fr); }
    .why{ grid-template-columns:repeat(2,1fr); }
    .footer__top{ grid-template-columns:1fr 1fr; gap:34px; }
    .nav__links{ display:none; }
    .nav__right .nav__phone{ display:none; }
    .burger{ display:grid; }
  }

  /* Phone ------------------------------------------------------------- */
  @media (max-width:760px){
    :root{
      --fs-body:0.9375rem;
      --fs-display:clamp(1.6rem, 7vw, 2.2rem);
      /* headings run ~15% larger so they fill the column */
      --fs-h2:clamp(2.3rem, 9.4vw, 2.9rem);
      --fs-h3:clamp(1.25rem, 4.6vw, 1.5rem);
      --fs-lead:clamp(1.02rem, 4vw, 1.15rem);
    }

    /* ── Hero: full height, everything centred ── */
    .hero{
      min-height:100svh; align-items:center; text-align:center;
      padding-block:104px 72px;
    }
    /* A portrait crop of a landscape frame lands on the middle of the
       bench, so pull it right and up onto the two carpenters. */
    .hero__media img{
      animation:none;
      transform:scale(1.06);
      transform-origin:center;
      object-position:70% 34%;
    }
    /* Dark ramps up from the bottom so the copy always sits on a ground,
       leaving the top band of the photo readable. */
    .hero__scrim{
      background:
        radial-gradient(130% 55% at 50% 108%, rgba(217,98,47,.20), transparent 62%),
        linear-gradient(180deg,
          rgba(14,11,8,.46) 0%,
          rgba(14,11,8,.26) 12%,
          rgba(14,11,8,.56) 24%,
          rgba(14,11,8,.82) 48%,
          rgba(14,11,8,.95) 100%);
    }
    .hero__inner{ display:flex; flex-direction:column; align-items:center; }
    .hero__title{ max-width:100%; }
    .hero__lead{ margin-inline:auto; max-width:34ch; }
    .hero__actions{ width:100%; justify-content:center; }
    .hero__foot{ width:100%; margin-top:38px; padding-top:22px; justify-content:center; }
    .hero__metrics{ width:100%; justify-content:space-between; gap:12px; }
    .hero__metric{ flex:1; }
    .hero__metric b{ font-size:1.4rem; }
    .hero__metric span{ font-size:.68rem; }
    .scroll-cue{ display:none; }

    /* Full width CTAs so nothing floats mid row */
    .btn--lg{ width:100%; justify-content:center; }
    .about__cta{ width:100%; }
    .about__cta .btn{ flex:1 1 100%; justify-content:center; }

    .trust__inner{ justify-content:flex-start; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
    .trust__inner::-webkit-scrollbar{ display:none; }
    .trust__item{ flex-shrink:0; padding:18px 20px; }

    .about__media{ padding:0 32px 40px 0; }
    .about__badge{ left:0; }
    .about__cta{ justify-content:center; }

    /* Three stats stay on one row instead of orphaning the third */
    .stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; align-items:start; }
    .stat{ padding:0 8px; margin:0; border-right:1px solid var(--line); text-align:center; }
    .stat:last-child{ border-right:0; }
    .stat span{ margin-inline:auto; }
    .stat b{ font-size:1.55rem; }
    .stat span{ max-width:none; font-size:.68rem; line-height:1.45; }

    .svc-grid{ grid-template-columns:1fr; }
    .gallery{ grid-template-columns:1fr; gap:1px; }
    .why{ grid-template-columns:1fr; }
    .row{ grid-template-columns:1fr; }
    .ba{ aspect-ratio:4/3; }
    .work__head{ align-items:stretch; }
    .tabs{ overflow-x:auto; scrollbar-width:none; }
    .tabs::-webkit-scrollbar{ display:none; }

    /* ── Footer: centred, with a bigger wordmark ── */
    .footer__top{ grid-template-columns:1fr; gap:32px; text-align:center; justify-items:center; }
    .footer__logo{ font-size:1.85rem; }
    .footer__brand p{ margin-inline:auto; }
    .social{ justify-content:center; }
    .fcol{ display:flex; flex-direction:column; align-items:center; }
    .fcol a, .fcol__btn{ text-align:center; }
    .fcol a:hover, .fcol__btn:hover{ transform:none; }
    .footer__base{ flex-direction:column; align-items:center; text-align:center; gap:9px; }

    /* Swap the desktop chat widget for a thumb-reachable action bar */
    .chat{ display:none; }
    .mobar{ display:flex; }
    /* Give the fixed bar room so it never covers the last line */
    .footer{ padding-bottom:112px; }
  }

  @media (max-width:600px){
    /* The pill can't hold logo + CTA + burger at phone widths. */
    .nav{ padding:8px 8px 8px 16px; }
    .nav__right > .btn{ display:none; }
    .nav__progress{ left:16px; right:16px; }
  }

  @media (max-width:420px){
    .gallery{ grid-template-columns:1fr; }
    .hero__metric b{ font-size:1.35rem; }
    .logo{ font-size:.94rem; }
  }

  /* Chat panel must never exceed a small tablet viewport */
  @media (max-width:900px) and (min-width:761px){
    .chat{ right:18px; bottom:18px; }
    .chat__panel{ width:min(330px, calc(100vw - 44px)); }
  }

  /* Touch devices: no hover-only reveals left stranded */
  @media (hover:none){
    .svc__more, .shot__label{ opacity:1; transform:none; }
    .shot::after{ opacity:1; }
  }
}

/* ══════════════════════════════════════════════════════════════
   6. QUOTE MODAL / CAROUSEL / LIGHTBOX
   ══════════════════════════════════════════════════════════════ */
@layer components {

  /* ── Overlay shell shared by the modal and the lightbox ───── */
  .overlay{
    position:fixed; inset:0; z-index:2000;
    display:grid; place-items:center; padding:20px;
    opacity:0; visibility:hidden;
    transition:opacity .35s var(--ease), visibility .35s;
  }
  .overlay.is-open{ opacity:1; visibility:visible; }
  .overlay__scrim{
    position:absolute; inset:0; background:rgba(14,11,8,.62);
    backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  }

  /* ── Quote wizard ─────────────────────────────────────────── */
  .qmodal__card{
    position:relative; z-index:1; width:min(580px, 100%);
    max-height:min(88svh, 780px); display:flex; flex-direction:column;
    background:var(--white); border-radius:var(--r-lg);
    box-shadow:var(--sh-lg); overflow:hidden;
    transform:translateY(18px) scale(.97);
    transition:transform .5s var(--ease-sp);
  }
  .overlay.is-open .qmodal__card{ transform:none; }

  .qmodal__head{ padding:26px 28px 20px; border-bottom:1px solid var(--line); flex-shrink:0; }
  .qmodal__meta{
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    padding-right:44px;   /* clear the close button */
    font-size:var(--fs-xs); font-weight:700; letter-spacing:.1em; text-transform:uppercase;
    color:var(--stone-2); margin-bottom:14px;
  }
  .qmodal__meta b{ color:var(--ember); }
  .qmodal__bar{ height:3px; border-radius:2px; background:var(--paper-2); overflow:hidden; margin-bottom:20px; }
  .qmodal__bar i{
    display:block; height:100%; border-radius:2px; width:33.33%;
    background:linear-gradient(90deg,var(--ember),var(--ember-lt));
    transition:width .5s var(--ease);
  }
  .qmodal__head h3{ font-size:1.4rem; margin-bottom:6px; letter-spacing:-.03em; }
  .qmodal__head p{ font-size:var(--fs-sm); color:var(--stone); }
  .qmodal__x{
    position:absolute; top:16px; right:16px; z-index:2;
    width:36px; height:36px; border-radius:50%; display:grid; place-items:center;
    background:var(--paper-2); color:var(--stone);
    transition:background var(--t) var(--ease), color var(--t), transform var(--t) var(--ease-sp);
  }
  .qmodal__x:hover{ background:var(--ink); color:#fff; transform:rotate(90deg); }
  .qmodal__x svg{ width:15px; height:15px; }

  #quoteWizard{ display:flex; flex-direction:column; flex:1; min-height:0; }
  .qmodal__body{ padding:24px 28px; overflow-y:auto; flex:1; }
  .qstep{ display:none; }
  .qstep.is-active{ display:block; animation:qstep-in .45s var(--ease) both; }
  @keyframes qstep-in{ from{ opacity:0; transform:translateX(14px); } }

  /* Selectable option pills (checkbox + radio share the look) */
  .opts{ display:flex; flex-wrap:wrap; gap:9px; }
  .opt{ position:relative; cursor:pointer; }
  .opt input{ position:absolute; opacity:0; width:0; height:0; }
  .opt span{
    display:inline-flex; align-items:center; gap:8px;
    padding:11px 18px; border-radius:var(--r-full);
    border:1.5px solid var(--line-2); background:var(--white);
    font-size:var(--fs-sm); font-weight:600; color:var(--ink-2);
    transition:border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease),
               color var(--t-fast) var(--ease), transform var(--t) var(--ease-sp);
  }
  .opt span::before{
    content:''; width:15px; height:15px; border-radius:50%; flex-shrink:0;
    border:1.5px solid var(--line-2);
    background:no-repeat center/9px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
    background-size:0; transition:background-size var(--t) var(--ease-sp), border-color var(--t-fast), background-color var(--t-fast);
  }
  .opt:hover span{ border-color:var(--ember); color:var(--ember); }
  .opt input:checked + span{ border-color:var(--ember); background:var(--ember-wash); color:var(--ember-dk); }
  .opt input:checked + span::before{ background-color:var(--ember); border-color:var(--ember); background-size:9px; }
  .opt input:focus-visible + span{ outline:2px solid var(--ember); outline-offset:3px; }

  .qlabel{
    display:block; font-size:var(--fs-xs); font-weight:700; letter-spacing:.08em;
    text-transform:uppercase; color:var(--stone); margin:24px 0 11px;
  }
  .qlabel:first-child{ margin-top:0; }
  .qhint{ font-size:var(--fs-xs); color:var(--stone-2); margin-top:12px; }

  .qmodal__foot{
    display:flex; align-items:center; gap:10px; padding:18px 28px;
    border-top:1px solid var(--line); background:var(--paper); flex-shrink:0;
  }
  .qmodal__foot .btn{ flex:1; justify-content:center; }
  .qmodal__foot .btn--ghost{ flex:0 0 auto; }
  .qmodal__foot .btn[hidden]{ display:none; }

  .qmodal__done{
    position:absolute; inset:0; z-index:3; display:grid; place-items:center;
    text-align:center; padding:40px 32px; background:var(--white);
    opacity:0; visibility:hidden; transform:translateY(14px);
    transition:opacity var(--t) var(--ease), transform .5s var(--ease), visibility var(--t);
  }
  .qmodal__card.is-sent .qmodal__done{ opacity:1; visibility:visible; transform:none; }
  .qmodal__done i{
    width:66px; height:66px; border-radius:50%; background:var(--ember-wash);
    display:grid; place-items:center; margin:0 auto 22px;
  }
  .qmodal__done svg{ width:28px; height:28px; color:var(--ember); }
  .qmodal__done h4{ font-size:1.35rem; margin-bottom:10px; }
  .qmodal__done p{ font-size:var(--fs-sm); color:var(--stone); max-width:36ch; margin:0 auto 22px; }

  /* ── Review carousel ──────────────────────────────────────── */
  .carousel{ position:relative; }
  .carousel__viewport{ overflow:hidden; padding:6px 2px 8px; }
  .carousel__track{
    --cgap:20px; --per:3;
    display:flex; gap:var(--cgap); align-items:stretch;
    transition:transform .68s var(--ease);
    will-change:transform;
  }
  .carousel__track.is-dragging{ transition:none; cursor:grabbing; }
  .carousel .quote{
    flex:0 0 calc((100% - (var(--per) - 1) * var(--cgap)) / var(--per));
  }

  .carousel__arrow{
    position:absolute; top:50%; z-index:3; translate:0 -50%;
    width:48px; height:48px; border-radius:50%;
    display:grid; place-items:center;
    background:var(--white); border:1px solid var(--line-2);
    box-shadow:var(--sh-md); color:var(--ink);
    transition:transform var(--t) var(--ease-sp), background var(--t) var(--ease),
               color var(--t) var(--ease), opacity var(--t) var(--ease), border-color var(--t);
  }
  .carousel__arrow:hover{ background:var(--ember); border-color:var(--ember); color:#fff; transform:scale(1.07); }
  .carousel__arrow:disabled{ opacity:.3; pointer-events:none; box-shadow:var(--sh-xs); }
  .carousel__arrow svg{ width:19px; height:19px; }
  .carousel__arrow--prev{ left:-24px; }
  .carousel__arrow--next{ right:-24px; }

  .carousel__dots{ display:flex; justify-content:center; gap:7px; margin-top:26px; }
  .carousel__dots button{
    width:8px; height:8px; border-radius:50%; background:var(--line-2);
    transition:background var(--t) var(--ease), width var(--t) var(--ease);
  }
  .carousel__dots button[aria-current="true"]{ background:var(--ember); width:24px; border-radius:4px; }

  /* ── Lightbox ─────────────────────────────────────────────── */
  .lightbox .overlay__scrim{ background:rgba(10,8,6,.88); }
  .lightbox__stage{
    position:relative; z-index:1; max-width:min(1100px,92vw); max-height:86svh;
    display:flex; flex-direction:column; gap:14px;
    transform:scale(.96); transition:transform .5s var(--ease-sp);
  }
  .lightbox.is-open .lightbox__stage{ transform:none; }
  .lightbox__frame{
    border-radius:var(--r-md); overflow:hidden; background:var(--ink-2);
    box-shadow:0 30px 80px rgba(0,0,0,.5);
  }
  .lightbox__frame img{
    width:auto; max-width:min(1100px,92vw); max-height:72svh; height:auto; object-fit:contain;
  }
  .lightbox__frame .ph{
    position:relative; inset:auto;
    width:min(900px,92vw); aspect-ratio:4/3; max-height:72svh;
  }
  .lightbox__frame .ph::before{ width:40px; height:40px; }
  .lightbox__frame .ph::after{ font-size:.72rem; }
  .lightbox__cap{ display:flex; align-items:center; justify-content:space-between; gap:20px; color:#fff; }
  .lightbox__cap b{ font-size:var(--fs-lead); font-weight:700; }
  .lightbox__cap span{ font-size:var(--fs-sm); color:rgba(255,255,255,.55); }
  .lightbox__count{ font-size:var(--fs-sm); color:rgba(255,255,255,.55); font-variant-numeric:tabular-nums; }
  .lightbox__btn{
    position:absolute; z-index:4; width:50px; height:50px; border-radius:50%;
    display:grid; place-items:center; color:#fff;
    background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.22);
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    transition:background var(--t) var(--ease), transform var(--t) var(--ease-sp);
  }
  .lightbox__btn:hover{ background:var(--ember); border-color:var(--ember); transform:scale(1.07); }
  .lightbox__btn svg{ width:20px; height:20px; }
  .lightbox__btn--prev{ left:16px; top:50%; translate:0 -50%; }
  .lightbox__btn--next{ right:16px; top:50%; translate:0 -50%; }
  .lightbox__btn--close{ top:16px; right:16px; }

  .shot{ cursor:zoom-in; }

  /* ── Simple contact page ──────────────────────────────────── */
  .page-head{ padding:150px 0 clamp(40px,5vw,64px); position:relative; }
  .page-head .title{ margin-bottom:16px; }
  .backlink{
    display:flex; width:fit-content; align-items:center; gap:8px; margin-bottom:22px;
    font-size:var(--fs-sm); font-weight:600; color:var(--stone);
    transition:color var(--t-fast) var(--ease), gap var(--t) var(--ease);
  }
  .backlink:hover{ color:var(--ember); gap:12px; }
  .backlink svg{ width:14px; height:14px; }
}

@layer media {
  @media (max-width:1080px){
    .carousel__track{ --per:2; }
    .carousel__arrow--prev{ left:-14px; }
    .carousel__arrow--next{ right:-14px; }
  }
  @media (max-width:760px){
    .carousel__track{ --per:1; }
    /* Arrows sit below the card where a thumb can reach them */
    .carousel__arrow{ position:static; translate:none; width:44px; height:44px; }
    .carousel__nav{ display:flex; align-items:center; justify-content:center; gap:14px; margin-top:24px; }
    .carousel__dots{ margin-top:0; }
    .qmodal__card{ max-height:92svh; }
    .qmodal__head{ padding:22px 20px 18px; }
    .qmodal__body{ padding:20px; }
    .qmodal__foot{ padding:16px 20px; }
    .lightbox__btn--prev{ left:8px; }
    .lightbox__btn--next{ right:8px; }
    .lightbox__btn{ width:44px; height:44px; }
    .page-head{ padding-top:118px; }
  }
  @media (min-width:761px){
    .carousel__nav{ display:contents; }
  }
}