/* Katara Remodeling — "Brass Inlay"
   Object: a marble slab with brass inlay. Gold appears as fine inlaid lines that draw
   themselves; every two-part heading settles its second beat in brass italic.
   Tone: warm / composed / crafted. Motion: slow decelerations, small distances, one
   direction (rise), one curve. */
:root{
  --navy:#0f2443;
  --navy-2:#132d52;
  --navy-deep:#0a1a31;
  --gold:#c9a45c;
  --gold-lt:#e2c68c;
  --brass:#a67c35;               /* graphics on light grounds (3:1+) */
  --brass-ink:#8b6a2e;           /* small text on light grounds (AA) */
  --ink:#0f2443;
  --ink-2:#2c3d5c;
  --text:#4a5363;
  --muted:#5f6878;
  --line:#e7e2d8;
  --paper:#ffffff;
  --cream:#f8f6f2;
  --serif:'Spectral', Georgia, 'Times New Roman', serif;
  --sans:'Nunito Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* layout: content grows to 1560px, gutters scale with the screen */
  --content:1560px;
  --gut:clamp(20px, 4.5vw, 88px);
  --bar-h:92px;
  --lift:clamp(28px,3.6vw,64px);   /* how far the trust plate overlaps the hero */

  /* type scale (fluid) */
  --fs-body:clamp(16px, calc(.55vw + 9px), 18px);
  --fs-lead:clamp(16px, calc(.7vw + 7px), 20px);
  --fs-h1:clamp(40px, 4.5vw, 86px);
  --fs-h2:clamp(30px, 3vw, 56px);
  --fs-h3:clamp(21px, 1.5vw, 28px);
  --fs-eyebrow:clamp(12px, .78vw, 14px);

  /* motion tokens */
  --ease:cubic-bezier(.16,1,.3,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --draw:cubic-bezier(.65,0,.35,1);   /* the drawing pen only: a steady hand, accelerate then settle */
  --t-fb:.2s;
  --t-gesture:.5s;
  --t-enter:.95s;
  --t-drawn:1.5s;

  --shadow:0 10px 30px -12px rgba(15,36,67,.22), 0 2px 6px rgba(15,36,67,.06);
  --shadow-lift:0 28px 50px -22px rgba(15,36,67,.38), 0 4px 10px rgba(15,36,67,.06);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--bar-h) + 8px);-webkit-text-size-adjust:100%}
body{margin:0;font:400 var(--fs-body)/1.65 var(--sans);color:var(--text);background:var(--paper);overflow-x:clip}
img,svg{display:block;max-width:100%}
[hidden]{display:none!important}
a{color:inherit}
p{margin:0 0 1em}
h1,h2,h3{margin:0;font-family:var(--serif);font-weight:500;color:var(--ink);line-height:1.1;letter-spacing:-.005em}
em{font-style:italic}
::selection{background:var(--gold-lt);color:var(--navy)}
.wrap{max-width:calc(var(--content) + var(--gut) * 2);margin-inline:auto;padding-inline:var(--gut)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--navy);color:#fff;padding:10px 14px;z-index:100}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ---------- brand intro (first visit per session; CSS-timed, so it can never strand the page) ----------
   The roof shoots out in gold at once, then the house, then the K; KATARA rises letter by letter,
   "Remodeling" and a gold hairline follow; at 1.0s the panel lifts like a curtain with a gold
   edge, and the hero's own entrance starts underneath it (--intro). Gone by ~1.75s. */
.intro{display:none}
@media (prefers-reduced-motion:no-preference){
  .has-intro{--intro:1.05s}
  .has-intro .intro{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;
    background:radial-gradient(120% 120% at 50% 42%, #173462 0%, var(--navy) 52%, var(--navy-deep) 100%);
    animation:introLift .75s cubic-bezier(.7,0,.18,1) 1s forwards}
  .has-intro .intro::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.6;
    background:repeating-linear-gradient(-45deg, rgba(255,255,255,.02) 0 1px, transparent 1px 11px)}
  .has-intro .intro::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;    /* the gold edge you see as it lifts */
    background:linear-gradient(90deg, rgba(226,198,140,0), var(--gold-lt) 30%, var(--gold-lt) 70%, rgba(226,198,140,0));
    box-shadow:0 0 18px 2px rgba(226,198,140,.45)}
  .has-intro .intro.is-skipped{animation:introSkip .4s var(--ease) forwards}
  .intro__in{position:relative;display:flex;flex-direction:column;align-items:center;animation:introIn .4s var(--ease) both}
  .intro__mark{width:clamp(76px,8.5vw,112px);height:auto;overflow:visible;fill:none;stroke:var(--gold);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
    filter:drop-shadow(0 0 10px rgba(226,198,140,.25))}
  .intro__mark path{stroke-dasharray:1;stroke-dashoffset:1;animation:introDraw .75s var(--ease) forwards}   /* fast attack: lines shoot out at once */
  .intro__mark .d1{stroke-width:3.2;animation-delay:.02s}
  .intro__mark .d2{stroke-width:1.6;animation-delay:.12s}
  .intro__mark .d3{stroke:var(--gold-lt);stroke-width:2.4;animation-duration:.6s;animation-delay:.26s}
  .intro__name{display:flex;margin:clamp(14px,1.6vw,22px) 0 0;padding:.06em 0 .1em .16em;overflow:hidden;
    font:500 clamp(30px,3.8vw,50px)/1 'Cinzel', var(--serif);letter-spacing:.16em;color:var(--gold-lt)}
  .intro__name span{display:inline-block;transform:translateY(115%);animation:introRise .7s var(--ease) forwards}
  .intro__name span:nth-child(1){animation-delay:.18s}
  .intro__name span:nth-child(2){animation-delay:.22s}
  .intro__name span:nth-child(3){animation-delay:.26s}
  .intro__name span:nth-child(4){animation-delay:.3s}
  .intro__name span:nth-child(5){animation-delay:.34s}
  .intro__name span:nth-child(6){animation-delay:.38s}
  .intro__sub{margin:clamp(10px,1vw,14px) 0 0;padding-left:.62em;font:600 clamp(11px,.95vw,13.5px)/1 var(--sans);letter-spacing:.62em;
    text-transform:uppercase;color:rgba(255,255,255,.82);opacity:0;animation:introFade .5s var(--ease) .42s forwards}
  .intro__rule{display:block;width:clamp(120px,13vw,200px);height:1px;margin-top:clamp(16px,1.6vw,22px);background:var(--gold);
    transform:scaleX(0);animation:introGrow .6s var(--ease) .45s forwards}
  @keyframes introIn{from{opacity:.4;transform:scale(.97)}}
  @keyframes introDraw{to{stroke-dashoffset:0}}
  @keyframes introRise{to{transform:none}}
  @keyframes introFade{to{opacity:1}}
  @keyframes introGrow{to{transform:none}}
  @keyframes introLift{to{transform:translateY(-101%);visibility:hidden}}
  @keyframes introSkip{to{opacity:0;visibility:hidden}}
}

/* ---------- buttons (lacquer sweep) ---------- */
.btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font:600 clamp(14.5px, .9vw, 16.5px)/1 var(--sans);text-decoration:none;border-radius:3px;padding:1.05em 1.6em;
  border:1px solid transparent;cursor:pointer;
  transition:color var(--t-fb) var(--ease), border-color var(--t-fb) var(--ease), box-shadow var(--t-gesture) var(--ease), transform var(--t-gesture) var(--ease)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;transform:translateX(-101%);transition:transform .6s var(--ease)}
.btn .arr{display:inline-block;transition:transform var(--t-gesture) var(--ease)}
.btn--gold{background:linear-gradient(180deg,#dcbd7c 0%,#c39a52 100%);color:var(--navy);box-shadow:0 6px 18px -8px rgba(160,120,50,.7)}
.btn--gold::before{background:linear-gradient(180deg,#efd9a6 0%,#d4b069 100%)}
.btn--sm{padding:.85em 1.25em;font-size:clamp(13.5px,.85vw,15px)}
.btn--lg{padding:1.2em 1.9em;font-size:clamp(15px,1vw,17.5px)}
.btn--block{width:100%}
.btn--line{border-color:var(--gold);color:#fff;background:transparent}
.btn--line::before{background:var(--gold)}
.btn--line-dark{border-color:var(--navy);color:var(--navy);background:#fff}
.btn--line-dark::before{background:var(--cream)}
@media (hover:hover){
  .btn:hover::before{transform:none}
  .btn:hover .arr{transform:translateX(4px)}
  .btn--gold:hover{box-shadow:0 14px 28px -12px rgba(160,120,50,.85);transform:translateY(-2px)}
  .btn--line:hover{color:var(--navy)}
}
.btn:focus-visible::before{transform:none}
.btn--line:focus-visible{color:var(--navy)}

/* ---------- eyebrows / headings ---------- */
.eyebrow{font:600 var(--fs-eyebrow)/1.4 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--brass-ink);margin:0 0 clamp(14px,1.1vw,20px)}
.eyebrow--gold{color:var(--gold)}
.eyebrow--rule{display:flex;align-items:center;justify-content:center;gap:16px}
.eyebrow--rule::before,.eyebrow--rule::after{content:"";width:clamp(36px,3vw,56px);height:1px;background:currentColor;opacity:.8}
.eyebrow--rule::before{transform-origin:right}
.eyebrow--rule::after{transform-origin:left}
.eyebrow--lead{display:flex;align-items:center;gap:14px}
.eyebrow--lead::before{content:"";width:clamp(28px,2.4vw,44px);height:1px;background:currentColor;opacity:.85;transform-origin:left;flex:none}
.h2{font-size:var(--fs-h2);text-align:center}
.h2--left{text-align:left}
.h2--light{color:#fff}
.h2 em,.hero__title em{font-weight:400;color:var(--brass)}
.h2--light em{color:var(--gold-lt)}
.ln{display:inline-block;overflow:hidden;vertical-align:top;padding:.06em .1em .14em 0;margin:-.06em -.1em -.14em 0}
.ln > *{display:inline-block}
.shead{text-align:center;max-width:1040px;margin:0 auto clamp(36px,3.6vw,64px)}
.shead__lead{margin:clamp(16px,1.3vw,24px) auto 0;max-width:74ch;font-size:var(--fs-lead);color:var(--muted)}
.sec{padding-block:clamp(64px,7.5vw,136px)}

/* ---------- header ---------- */
.bar{position:sticky;top:0;z-index:50;background:#fff;box-shadow:0 1px 0 var(--line)}
.bar::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:0 12px 30px -18px rgba(15,36,67,.45);opacity:0;transition:opacity var(--t-gesture) var(--ease)}
.bar.is-scrolled::after{opacity:1}
.bar__in{height:var(--bar-h);display:flex;align-items:center;gap:clamp(20px,2vw,40px)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--brass);flex:none}
.brand__mark{width:54px;height:54px;color:var(--brass)}
.brand__word{display:flex;flex-direction:column;line-height:1}
.brand__name{font:500 33px/1 'Cinzel', var(--serif);letter-spacing:.06em;color:var(--brass);text-transform:uppercase}
.brand__sub{font:600 12.5px/1 var(--sans);letter-spacing:.42em;color:var(--navy);text-transform:uppercase;margin-top:7px;display:flex;align-items:center;gap:8px}
.brand__sub::before{content:"";width:5px;height:5px;background:var(--brass);transform:rotate(45deg)}
.nav{margin-left:auto}
.nav ul{display:flex;gap:clamp(14px,1.8vw,36px);list-style:none;margin:0;padding:0}
.nav a{font:600 clamp(13.5px,.88vw,15.5px)/1 var(--sans);color:var(--navy);text-decoration:none;padding:10px 0;position:relative;white-space:nowrap}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform var(--t-gesture) var(--ease)}
.nav a:hover::after,.nav a:focus-visible::after,.nav a.is-active::after{transform:scaleX(1)}
.bar__cta{display:flex;flex-direction:column;align-items:flex-end;gap:9px;flex:none}
.bar__phone{display:flex;align-items:center;gap:8px;font:700 clamp(15px,.95vw,17px)/1 var(--sans);color:var(--navy);text-decoration:none}
.bar__phone svg{width:17px;height:17px;fill:none;stroke:var(--navy);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.burger{display:none;margin-left:auto;width:46px;height:46px;border:1px solid var(--line);background:#fff;border-radius:3px;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.burger span{width:20px;height:2px;background:var(--navy);transition:transform .35s var(--ease), opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mnav{position:absolute;left:0;right:0;top:100%;background:#fff;border-top:1px solid var(--line);
  box-shadow:0 20px 30px -20px rgba(15,36,67,.45);max-height:calc(100dvh - var(--bar-h));overflow:auto;padding:8px var(--gut) 24px}
.mnav:not([hidden]){animation:drop .45s var(--ease) both}
@keyframes drop{from{opacity:0;transform:translateY(-8px)}}
.mnav ul{list-style:none;margin:0;padding:0}
.mnav li a{display:block;padding:15px 0;border-bottom:1px solid var(--line);font:600 17px/1.2 var(--sans);color:var(--navy);text-decoration:none}
.mnav__cta{display:grid;gap:10px;margin-top:20px}
body.menu-open{overflow:hidden}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--navy);color:#fff;overflow:hidden;isolation:isolate}
.hero__media{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero__img{width:100%;height:100%;object-fit:cover;object-position:62% 45%}
.hero__shade{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg, rgba(15,36,67,1) 0%, rgba(15,36,67,.97) 26%, rgba(15,36,67,.86) 40%, rgba(15,36,67,.45) 57%, rgba(15,36,67,0) 72%)}
.hero__in{display:flex;flex-direction:column;justify-content:center;
  padding-block:clamp(64px,6.5vw,120px) calc(clamp(64px,6.5vw,120px) + var(--lift));min-height:min(calc(100svh - var(--bar-h)), clamp(560px, 46vw, 900px))}
.hero__in > *{max-width:min(860px, 62%)}
.hero__title{color:#fff;font-size:var(--fs-h1);line-height:1.04;letter-spacing:-.012em;max-width:none}
.hero__title .ln{display:block;white-space:nowrap}
.hero__title em{color:var(--gold-lt)}
.hero__sub{font:400 clamp(19px,1.65vw,30px)/1.3 var(--sans);margin:clamp(18px,1.6vw,28px) 0 clamp(14px,1.2vw,22px);color:#fff}
.hero__lead{font-size:var(--fs-lead);line-height:1.65;color:rgba(255,255,255,.88);max-width:min(640px, 62%)}
.hero__actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:clamp(26px,2.4vw,40px);max-width:none}
.callbox{display:flex;align-items:center;gap:14px;border:1px solid rgba(201,164,92,.85);border-radius:3px;padding:.62em 1.6em .62em 1.2em;color:#fff;text-decoration:none;
  background:rgba(10,26,49,.68);   /* a solid secondary button: reads the same over any part of the photo */
  transition:background-color var(--t-gesture) var(--ease), border-color var(--t-fb) var(--ease)}
.callbox svg{width:24px;height:24px;fill:none;stroke:var(--gold-lt);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--t-gesture) var(--spring)}
.callbox span{display:flex;flex-direction:column;line-height:1.15}
.callbox small{font-size:13px;color:rgba(255,255,255,.9)}
.callbox b{font-weight:600;font-size:clamp(20px,1.45vw,25px);letter-spacing:.01em}
@media (hover:hover){
  .callbox:hover{background:rgba(19,45,82,.85);border-color:var(--gold-lt)}
  .callbox:hover svg{transform:rotate(-12deg) scale(1.08)}
}

/* ---------- trust bar ---------- */
.trust{position:relative;z-index:3;margin-top:calc(var(--lift) * -1)}
.trust__in{list-style:none;margin:0;position:relative;display:grid;grid-template-columns:repeat(4,auto);justify-content:space-between;
  padding:clamp(26px,2.6vw,44px) clamp(22px,2.8vw,52px);background:#fff;border-radius:4px;
  box-shadow:0 34px 60px -34px rgba(15,36,67,.42), 0 2px 10px rgba(15,36,67,.07)}
.trust__in::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;border-radius:4px 4px 0 0;transform-origin:left;
  background:linear-gradient(90deg,#c39a52,#e2c68c,#c39a52)}
.trust__item{display:flex;gap:clamp(14px,1.2vw,20px);align-items:flex-start;padding:4px clamp(14px,2.2vw,44px)}
.trust__item + .trust__item{border-left:1px solid #ddd5c6}
.trust__item:first-child{padding-left:0}
.ico{width:44px;height:44px;flex:none;fill:none;stroke:var(--gold);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.trust .ico{stroke:var(--brass);width:clamp(40px,2.9vw,52px);height:clamp(40px,2.9vw,52px)}
.trust__t{white-space:nowrap;font:600 clamp(12.5px,.82vw,14.5px)/1.45 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin:2px 0 6px}
.trust__item p:last-child{font-size:clamp(14px,.92vw,16px);line-height:1.45;color:var(--muted);margin:0;text-wrap:balance}

/* ---------- services ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2vw,36px)}
.card{position:relative;background:#fff;box-shadow:var(--shadow);border-radius:4px;display:flex;flex-direction:column;transition:transform .6s var(--ease)}
.card::after{content:"";position:absolute;inset:0;border-radius:4px;box-shadow:var(--shadow-lift);opacity:0;transition:opacity .6s var(--ease);pointer-events:none}
.card__img{aspect-ratio:16/10;overflow:hidden;border-radius:4px 4px 0 0}
.card__img img{width:100%;height:100%;object-fit:cover}
.card__body{position:relative;padding:clamp(24px,2vw,36px) clamp(66px,5vw,88px) clamp(28px,2.2vw,40px) clamp(24px,2vw,36px);flex:1}
.card__body::after{content:"";position:absolute;left:clamp(24px,2vw,36px);right:clamp(24px,2vw,36px);bottom:0;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)}
.card__t{font-size:var(--fs-h3);font-weight:500;margin-bottom:12px;line-height:1.18}
.card__body p{margin:0;font-size:clamp(15px,.98vw,17px);color:var(--muted)}
.card__go{position:absolute;right:clamp(22px,1.9vw,34px);top:clamp(24px,2vw,36px);width:clamp(38px,2.6vw,46px);height:clamp(38px,2.6vw,46px);border-radius:50%;
  background:linear-gradient(180deg,#dcbd7c,#c39a52);color:var(--navy);display:grid;place-items:center;text-decoration:none;font-size:18px;font-weight:700;
  transition:background-color var(--t-fb) var(--ease), color var(--t-fb) var(--ease), transform var(--t-gesture) var(--ease)}
.card__go::after{content:"";position:absolute;inset:-6px}
.card__img img,.feature__img,.founder__frame img{transform-origin:50% 60%}
@media (hover:hover){
  .card:hover{transform:translateY(-6px)}
  .card:hover::after{opacity:1}
  .card:hover .card__img img,.js .card:hover .card__img img{transform:scale(1.045);transition:transform 1.4s var(--ease)}
  .card:hover .card__body::after{transform:scaleX(1)}
  .card:hover .card__go{background:var(--navy);color:var(--gold-lt);transform:translateX(4px)}
}
.card:focus-within .card__body::after{transform:scaleX(1)}

/* ---------- Design → Build: each service photo starts as a gold architect's drawing ----------
   The drawing sits ABOVE the photo: a gold pen draws it left→right, the photo then rises in
   underneath (the build fills the design), and the lines dissolve. Hover brings the design back. */
.card__img{position:relative;isolation:isolate}
.card__img.draft{background-color:var(--cream);
  background-image:linear-gradient(rgba(166,124,53,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(166,124,53,.08) 1px, transparent 1px);
  background-size:22px 22px}
.card__draw{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;mix-blend-mode:multiply}   /* gold lines on white: white drops out */
.card__pen{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;transform:translateX(-100%)}
.card__pen::after{content:"";position:absolute;top:0;bottom:0;right:0;width:2px;background:var(--gold-lt);
  box-shadow:0 0 14px 3px rgba(226,198,140,.75), 0 0 2px 1px rgba(201,164,92,.9)}
@media (hover:hover){
  .card:hover .card__draw,.js .card:hover .draft .card__draw{opacity:.6;transition:opacity .6s var(--ease), transform 1.4s var(--ease)}
  .js .card:hover .draft .card__photo{transition:transform 1.4s var(--ease), clip-path 1.1s var(--ease)}
}

/* ---------- the gold thread: one inlay line drawn down the page as you scroll (built by JS, desktop) ---------- */
main{position:relative}
.thread{position:absolute;top:0;left:0;width:0;height:0;z-index:4;pointer-events:none}
.thread__track,.thread__line{position:absolute;left:-.75px;width:1.5px}
.thread__track{background:rgba(201,164,92,.24)}
.thread__line{background:var(--gold);transform-origin:50% 0;transform:scaleY(0);will-change:transform}
.thread__pen{position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:50%;background:var(--gold-lt);
  box-shadow:0 0 0 3px rgba(201,164,92,.22), 0 0 16px 4px rgba(226,198,140,.6);opacity:0;transition:opacity .4s var(--ease);will-change:transform}
.thread__node{position:absolute;left:-5.5px;width:11px;height:11px;margin-top:-5.5px;border:1.5px solid rgba(201,164,92,.65);
  transform:rotate(45deg) scale(.72);transition:transform .55s var(--ease), background-color .3s var(--ease), border-color .3s var(--ease), box-shadow .6s var(--ease)}
.thread__node.on{transform:rotate(45deg) scale(1);background:var(--gold);border-color:var(--gold);box-shadow:0 0 14px 3px rgba(226,198,140,.5)}
.thread__arm{position:absolute;height:1.5px;margin-top:-.75px;background:var(--gold);transform-origin:0 50%;transform:scaleX(0);transition:transform .8s var(--ease) .1s}
.thread__arm.on{transform:scaleX(1)}

/* ---------- featured project ---------- */
.projects{position:relative;overflow:hidden;background:radial-gradient(120% 140% at 50% 0%, #15305a 0%, var(--navy) 55%, var(--navy-deep) 100%);
  padding-block:clamp(56px,6vw,112px);color:#fff;isolation:isolate}
.projects::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(-45deg, rgba(255,255,255,.018) 0 1px, transparent 1px 11px)}
.projects__head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px 40px;flex-wrap:wrap;margin-bottom:clamp(28px,3vw,52px)}
.projects__head .h2{margin:0}
/* ---------- Featured Projects carousel ----------
   Slides stack and cross-fade (opacity) with a slow push-in (transform): compositor-only.
   JS owns the clock (6s per photo); each gold progress line fills in step and pauses with it. */
.feature{position:relative}
.feature__frame{display:block;position:relative;aspect-ratio:21/10;overflow:hidden;border-radius:3px;background:var(--navy-deep);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.7)}
.feature__frame::before{content:"";position:absolute;left:0;right:0;bottom:0;height:36%;z-index:3;pointer-events:none;   /* scrim under the controls */
  background:linear-gradient(180deg, rgba(10,26,49,0), rgba(10,26,49,.66))}
.feature__frame::after{content:"";position:absolute;inset:clamp(12px,1.2vw,22px);z-index:3;border:1px solid rgba(226,198,140,.55);pointer-events:none;
  transform:scale(1.02);opacity:0;transition:opacity .8s var(--ease), transform .8s var(--ease)}
.feature__par{position:absolute;left:0;right:0;top:-8%;height:116%;display:block;will-change:transform}
.slide{position:absolute;inset:0;margin:0;opacity:0;z-index:0}
.slide img{width:100%;height:100%;object-fit:cover;object-position:50% 56%}
.slide.is-next{opacity:.01}                                  /* keeps the next photo painted so it never decodes mid-fade */
.slide.is-prev{opacity:1;z-index:1}
.slide.is-active{opacity:1;z-index:2;transition:opacity 1.2s var(--ease)}
.feature__open{position:absolute;inset:0;z-index:4;border:0;padding:0;margin:0;background:transparent;cursor:zoom-in}
.carousel__ui{position:absolute;left:clamp(18px,2vw,40px);right:clamp(18px,2vw,40px);bottom:clamp(14px,1.7vw,32px);z-index:5;
  display:flex;align-items:center;justify-content:space-between;gap:16px;pointer-events:none}
.carousel__ui > *{pointer-events:auto}
.carousel__steps{display:flex;gap:8px}
.carousel__step{width:clamp(34px,3.4vw,64px);height:28px;padding:0;border:0;background:none;cursor:pointer;display:flex;align-items:center}
.carousel__step span{position:relative;display:block;width:100%;height:2px;border-radius:2px;background:rgba(255,255,255,.38);overflow:hidden;
  transition:height var(--t-fb) var(--ease)}
.carousel__step span::after{content:"";position:absolute;inset:0;background:var(--gold-lt);transform:scaleX(0);transform-origin:left}
.carousel__step.is-done span::after,.carousel__step.is-active span::after{transform:none}
.carousel__step:hover span,.carousel__step:focus-visible span{height:4px}
.carousel__step:focus-visible{outline:2px solid var(--gold-lt);outline-offset:2px}
.carousel__btns{display:flex;gap:10px}
.carousel__btn{width:clamp(40px,3vw,48px);height:clamp(40px,3vw,48px);border-radius:50%;border:1px solid rgba(226,198,140,.65);
  background:rgba(10,26,49,.55);color:#fff;display:grid;place-items:center;cursor:pointer;font-size:18px;padding:0;
  transition:background-color var(--t-fb) var(--ease), color var(--t-fb) var(--ease), border-color var(--t-fb) var(--ease)}
.carousel__btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.carousel__btn .i-play{fill:currentColor;stroke:none}
.carousel__toggle .i-play,.feature.is-stopped .carousel__toggle .i-pause{display:none}
.feature.is-stopped .carousel__toggle .i-play{display:block}
.feature.no-autoplay .carousel__toggle{display:none}
.carousel__btn:hover,.carousel__btn:focus-visible{background:var(--gold);border-color:var(--gold);color:var(--navy)}
@media (hover:hover){
  .feature__frame:hover::after{opacity:1;transform:none}
}
.feature__open:focus-visible{outline:none}
.feature__frame:has(.feature__open:focus-visible)::after{opacity:1;transform:none}

/* ---------- founder ---------- */
.founder__in{display:grid;grid-template-columns:.95fr 1.25fr .8fr;gap:clamp(28px,3.4vw,72px);align-items:start}
.founder__photo{position:relative;padding:0 0 clamp(26px,2.4vw,40px) clamp(20px,1.9vw,32px)}
.founder__inlay{position:absolute;left:0;bottom:0;width:62%;height:78%;background:linear-gradient(180deg,#d8b56f,#c39a52);transform-origin:50% 100%}
.founder__frame{position:relative;aspect-ratio:4/4.4;overflow:hidden;box-shadow:var(--shadow);background:#e9e4da}
.founder__frame img{width:100%;height:100%;object-fit:cover;object-position:52% 30%}
.founder__copy .h2{margin-bottom:clamp(20px,1.8vw,30px);font-size:clamp(30px,2.55vw,48px)}
.founder__copy .h2 .ln{display:block;white-space:nowrap}
.founder__copy p{font-size:var(--fs-body);max-width:62ch}
.sign{display:flex;align-items:flex-end;gap:22px;margin-top:8px}
.sign__script{font:400 clamp(58px,4.4vw,78px)/0.9 'Mrs Saint Delafield', cursive;color:var(--brass);transform:rotate(-6deg);padding:0 6px 0 6px}
.sign__who{margin:0 0 6px;line-height:1.35;display:flex;flex-direction:column}
.sign__who b{font-weight:700;color:var(--navy);text-transform:uppercase;letter-spacing:.08em;font-size:15px}
.sign__who span{font-size:14px;color:var(--muted)}
.founder__card{list-style:none;margin:0;padding:clamp(26px,2.6vw,48px) clamp(22px,2.2vw,40px);background:var(--navy);color:#fff;display:grid;gap:clamp(22px,2vw,34px);border-radius:2px;box-shadow:var(--shadow);position:relative}
.founder__card::before{content:"";position:absolute;inset:10px;border:1px solid rgba(201,164,92,.28);pointer-events:none}
.founder__card li{display:flex;align-items:center;gap:18px;font-size:clamp(15px,.95vw,17px);line-height:1.4}
.founder__card .ico{width:46px;height:46px;stroke-width:1.7}
.badge30{flex:none;width:46px;height:46px;border:1.7px solid var(--gold);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--gold);line-height:1}
.badge30 b{font:500 20px/1 var(--serif);font-variant-numeric:tabular-nums}
.badge30 small{font-size:8.5px;letter-spacing:.08em;margin-top:1px}

/* ---------- reviews ---------- */
.reviews{background:var(--cream);border-top:1px solid var(--line)}
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2vw,36px)}
.quote{position:relative;margin:0;background:#fff;border:1px solid var(--line);box-shadow:0 8px 24px -16px rgba(15,36,67,.25);border-radius:4px;
  padding:clamp(28px,2.4vw,44px);display:flex;flex-direction:column;overflow:hidden;transition:transform .6s var(--ease), box-shadow .6s var(--ease)}
.quote::before{content:"\201C";position:absolute;right:clamp(20px,1.8vw,34px);top:clamp(14px,1.2vw,22px);font:400 clamp(96px,6.6vw,128px)/.8 Georgia, 'Times New Roman', serif;color:var(--gold);opacity:.26;pointer-events:none}
.quote::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)}
.stars{display:flex;gap:4px;margin-bottom:18px}
.stars svg{width:19px;height:19px;fill:var(--brass)}
.quote blockquote{margin:0 0 22px;flex:1}
.quote blockquote p{margin:0;font-size:clamp(16px,1.05vw,18.5px);line-height:1.65;color:var(--text)}
.quote figcaption{display:flex;flex-direction:column;line-height:1.35;padding-left:26px;position:relative}
.quote figcaption::before{content:"";position:absolute;left:0;top:.7em;width:16px;height:1.5px;background:var(--brass)}
.quote figcaption b{color:var(--ink-2);font-weight:600}
.quote figcaption span{font-size:14px;color:var(--muted)}
@media (hover:hover){
  .quote:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
  .quote:hover::after{transform:scaleX(1)}
}

/* ---------- CTA + form ---------- */
.cta{position:relative;overflow:hidden;background:var(--navy);color:#fff;isolation:isolate}
.cta__img{position:absolute;right:0;top:0;width:58%;height:100%;object-fit:cover;object-position:30% 50%;z-index:-2}
.cta__shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg, var(--navy) 0%, var(--navy) 42%, rgba(15,36,67,.88) 55%, rgba(15,36,67,.45) 75%, rgba(15,36,67,.25) 100%)}
.cta__in{display:grid;grid-template-columns:1.2fr minmax(0,540px);gap:clamp(32px,5vw,120px);align-items:center;padding-block:clamp(56px,6vw,112px)}
.cta__title{font-size:clamp(32px,3.2vw,58px);margin-bottom:clamp(16px,1.4vw,24px)}
.cta__lead{font-size:var(--fs-lead);color:rgba(255,255,255,.88);max-width:60ch}
/* contact facts: three identical items (ringed line icon + small label + value).
   A row when the column has room; a tidy list when it does not (container query), never a ragged wrap. */
.cta__copy{container-type:inline-size}
.cta__facts{list-style:none;margin:clamp(26px,2.4vw,40px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,auto);justify-content:start}
.cta__facts li{padding:2px clamp(16px,1.6vw,26px);border-left:1px solid rgba(255,255,255,.2)}
.cta__facts li:first-child{padding-left:0;border-left:0}
.cta__fact{display:flex;align-items:center;gap:13px;color:#fff;text-decoration:none}
.cta__ic{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid rgba(201,164,92,.6);display:grid;place-items:center;color:var(--gold);
  transition:background-color var(--t-fb) var(--ease), color var(--t-fb) var(--ease), border-color var(--t-fb) var(--ease)}
.cta__ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.cta__tx{display:flex;flex-direction:column;gap:2px;line-height:1.25}
.cta__k{font-size:clamp(13px,.85vw,14.5px);color:rgba(255,255,255,.75)}
.cta__v{font:600 clamp(16px,1.1vw,19px)/1.25 var(--sans);color:#fff;white-space:nowrap;font-variant-numeric:tabular-nums;transition:color var(--t-fb) var(--ease)}
a.cta__fact:hover .cta__v,a.cta__fact:focus-visible .cta__v{color:var(--gold-lt)}
a.cta__fact:hover .cta__ic,a.cta__fact:focus-visible .cta__ic{background:var(--gold);border-color:var(--gold);color:var(--navy)}
@container (max-width: 680px){
  .cta__facts{grid-template-columns:1fr}
  .cta__facts li{padding:14px 0;border-left:0;border-top:1px solid rgba(255,255,255,.14)}
  .cta__facts li:first-child{padding-top:0;border-top:0}
}

.qform{position:relative;background:#fff;color:var(--text);border-radius:4px;padding:clamp(24px,2.6vw,44px);box-shadow:0 30px 60px -24px rgba(0,0,0,.55)}
.qform::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,#c39a52,#e2c68c,#c39a52);border-radius:4px 4px 0 0;transform-origin:left}
.qform__t{font-size:clamp(25px,2vw,34px);margin-bottom:20px}
.qform__row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fld{display:block;margin-bottom:12px}
.fld input,.fld select,.fld textarea{width:100%;font:400 clamp(15px,.95vw,16.5px)/1.3 var(--sans);color:var(--ink);background:#fff;border:1px solid #cfd4dc;border-radius:3px;padding:.9em 1em;
  transition:border-color var(--t-fb) var(--ease), box-shadow var(--t-gesture) var(--ease)}
.fld textarea{resize:vertical;min-height:96px}
.fld ::placeholder{color:#69717f;opacity:1}
.fld select{appearance:none;-webkit-appearance:none;color:#69717f;cursor:pointer;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230f2443' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 14px center}
.fld select.has-val{color:var(--ink)}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 4px rgba(201,164,92,.22)}
.fld [aria-invalid="true"]{border-color:#b3261e}
.qform .btn--block{margin-top:6px;padding-block:1.15em}
.qform__note{font-size:12.5px;color:var(--muted);text-align:center;margin:12px 0 0}
.qform__msg{font-size:14px;margin:8px 0 0;text-align:center;color:#b3261e}
.qform__msg:empty{display:none}

/* ---------- footer ---------- */
.foot{background:var(--navy-deep);color:rgba(255,255,255,.75);font-size:14px}
.foot__in{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:22px}
@media (min-width:761px){.foot__in{justify-content:flex-end;gap:10px 40px}}   /* text right: the call pill owns the bottom-left */
.foot a{text-decoration:none}
.foot a:hover{color:var(--gold-lt)}

/* ---------- floating call button (bottom-left, always on screen) ----------
   phones: round gold button with the phone icon; wider screens: a pill with the number */
.callfab{position:fixed;z-index:60;left:calc(16px + env(safe-area-inset-left, 0px));bottom:calc(16px + env(safe-area-inset-bottom, 0px));
  display:flex;align-items:center;justify-content:center;width:58px;height:58px;border-radius:999px;text-decoration:none;color:var(--navy);
  background:linear-gradient(180deg,#dcbd7c 0%,#c39a52 100%);border:2px solid var(--navy);box-shadow:0 14px 30px -12px rgba(10,26,49,.6);
  transition:transform var(--t-gesture) var(--ease), box-shadow var(--t-gesture) var(--ease), opacity .3s var(--ease), visibility .3s}
.callfab__ico{width:24px;height:24px;fill:none;stroke:var(--navy);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.callfab__num{display:none}
@media (min-width:761px){
  .callfab{width:auto;height:auto;left:24px;bottom:24px;padding:15px 26px}
  .callfab__ico{display:none}
  .callfab__num{display:block;font:700 clamp(16px,1.05vw,18px)/1 var(--sans);letter-spacing:.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
}
@media (hover:hover){
  .callfab:hover{transform:translateY(-3px);box-shadow:0 20px 36px -14px rgba(10,26,49,.7)}
}
body.menu-open .callfab{opacity:0;visibility:hidden;pointer-events:none}
@media (max-width:760px){
  body:has(.qform :focus) .callfab{opacity:0;visibility:hidden;pointer-events:none}   /* keyboard up: don't cover the field */
}

/* ---------- gallery lightbox ---------- */
.lightbox{width:fit-content;max-width:min(1500px, 94vw);max-height:94vh;padding:0;border:0;background:transparent;color:#fff;overflow:visible}
.lightbox::backdrop{background:rgba(6,14,28,.93)}
.lightbox[open]{animation:lbIn .55s var(--ease) both}
.lightbox[open]::backdrop{animation:fade .45s var(--ease) both}
@keyframes lbIn{from{opacity:0;transform:translateY(18px) scale(.985)}}
@keyframes fade{from{opacity:0}}
.lightbox__stage{display:grid;place-items:center}
.lightbox__img{grid-area:1/1;max-width:100%;max-height:calc(94vh - 76px);object-fit:contain;border-radius:2px;box-shadow:0 30px 80px -30px rgba(0,0,0,.8);animation:fade .6s var(--ease) both}
.lightbox__bar{display:flex;align-items:center;justify-content:space-between;gap:16px;height:76px}
.lightbox__count{font:500 15px/1 var(--sans);letter-spacing:.14em;color:rgba(255,255,255,.8);font-variant-numeric:tabular-nums}
.lightbox__count b{color:var(--gold-lt);font-weight:600}
.lightbox__nav{display:flex;gap:10px}
.lightbox__btn{width:50px;height:50px;border-radius:50%;border:1px solid rgba(226,198,140,.6);background:transparent;color:#fff;font-size:20px;cursor:pointer;display:grid;place-items:center;
  transition:background-color var(--t-fb) var(--ease), color var(--t-fb) var(--ease), border-color var(--t-fb) var(--ease)}
.lightbox__btn:hover,.lightbox__btn:focus-visible{background:var(--gold);border-color:var(--gold);color:var(--navy)}
.lightbox__close{font-size:26px}
body.lb-open{overflow:hidden}

/* =========================================================
   MOTION — only when JS is running and motion is welcome
   ========================================================= */
@media (prefers-reduced-motion:no-preference){

  /* --- load sequence (hero): CSS animations, self-triggering --- */
  /* every delay is an offset from --intro: 0 normally, the curtain-lift time when the brand intro plays */
  .js .hero__img{animation:settle 1.9s var(--ease) var(--intro, 0s) both}
  .js .hero__eyebrow{animation:fadeUp .8s var(--ease) calc(var(--intro, 0s) + .1s) both}
  .js .hero__eyebrow::before{animation:draw 1.1s var(--ease) calc(var(--intro, 0s) + .15s) both}
  .js .hero__title .ln > *{animation:rise 1s var(--ease) both}
  .js .hero__title .ln:nth-child(1) > *{animation-delay:calc(var(--intro, 0s) + .22s)}
  .js .hero__title .ln:nth-child(2) > *{animation-delay:calc(var(--intro, 0s) + .34s)}
  .js .hero__sub{animation:fadeUp .9s var(--ease) calc(var(--intro, 0s) + .58s) both}
  .js .hero__lead{animation:fadeUp .9s var(--ease) calc(var(--intro, 0s) + .7s) both}
  .js .hero__actions{animation:fadeUp .9s var(--ease) calc(var(--intro, 0s) + .84s) both}
  @keyframes settle{from{transform:scale(1.08)}}
  @keyframes rise{from{transform:translateY(108%)}}
  @keyframes fadeUp{from{opacity:0;transform:translateY(18px)}}
  @keyframes draw{from{transform:scaleX(0)}}
  .js .trust__in::before{animation:draw 1.3s var(--ease) calc(var(--intro, 0s) + .9s) both}
  .js .callfab{animation:fabIn .8s var(--ease) calc(var(--intro, 0s) + 1.1s) backwards}   /* backwards: releases transform so hover still works */
  @keyframes fabIn{from{opacity:0;transform:translateY(24px)}}

  /* --- scroll reveals: fire at the fold, ~.55s fade --- */
  .js .rv{opacity:0;transform:translateY(18px);transition:opacity .55s var(--ease), transform .7s var(--ease)}
  .js .rv.in{opacity:1;transform:none}
  .js .rv.in.card{transition:opacity .55s var(--ease), transform .6s var(--ease)}
  .js .rv.in.quote{transition:opacity .55s var(--ease), transform .6s var(--ease), box-shadow .6s var(--ease)}
  .js .cards .rv:nth-child(2),.js .quotes .rv:nth-child(2),.js .trust__item:nth-child(2),.js .founder__copy{transition-delay:.08s}
  .js .cards .rv:nth-child(3),.js .quotes .rv:nth-child(3),.js .trust__item:nth-child(3),.js .founder__card{transition-delay:.16s}
  .js .trust__item:nth-child(4){transition-delay:.2s}
  .js .rv.in:hover{transition-delay:0s}

  /* headings: second beat rises just after the first */
  .js .rv .h2 .ln > *{transform:translateY(108%);transition:transform var(--t-enter) var(--ease)}
  .js .rv.in .h2 .ln > *{transform:none}
  .js .rv.in .h2 .ln:nth-child(2) > *{transition-delay:.1s}

  /* brass inlay lines draw themselves */
  .js .rv .eyebrow--rule::before,.js .rv .eyebrow--rule::after,.js .rv .eyebrow--lead::before{transform:scaleX(0);transition:transform 1.1s var(--ease) .1s}
  .js .rv.in .eyebrow--rule::before,.js .rv.in .eyebrow--rule::after,.js .rv.in .eyebrow--lead::before{transform:none}
  .js .qform.rv::before{transform:scaleX(0);transition:transform 1.2s var(--ease) .25s}
  .js .qform.rv.in::before{transform:none}

  /* line icons draw in brass */
  .js .draw path,.js .draw circle{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset var(--t-drawn) var(--ease) .15s}
  .js .in .draw path,.js .in .draw circle{stroke-dashoffset:0}

  /* photographs unveil upward, settling from a slight zoom */
  .js .unveil{clip-path:inset(100% 0 0 0);transition:clip-path 1s var(--ease)}
  .js .unveil img{transform:scale(1.12);transition:transform 1.6s var(--ease)}
  .js .in .unveil,.js .unveil.in{clip-path:inset(0 0 0 0)}
  .js .in .unveil img,.js .unveil.in img{transform:none}
  .js .card .unveil{transition-delay:.05s}

  /* founder: brass slab rises behind the portrait, then the signature writes itself */
  .js .founder__inlay{transform:scaleY(0);transition:transform 1.1s var(--ease) .1s}
  .js .in .founder__inlay{transform:none}
  .js .founder__frame.unveil{transition-delay:.2s}
  .js .sign__script{clip-path:inset(-30% 100% -30% -10%);transition:clip-path 1.6s var(--ease) .55s}
  .js .in .sign__script{clip-path:inset(-30% -10% -30% -10%)}
  .js .founder__card li{opacity:0;transform:translateY(12px);transition:opacity .5s var(--ease), transform .6s var(--ease)}
  .js .founder__card.in li{opacity:1;transform:none}
  .js .founder__card.in li:nth-child(2){transition-delay:.08s}
  .js .founder__card.in li:nth-child(3){transition-delay:.16s}
  .js .founder__card.in li:nth-child(4){transition-delay:.24s}

  /* Design → Build sequence, kept SHORT (every photo fully in by ~1.4s): the pen sweeps in .75s,
     the photo starts rising while the pen is still finishing, the lines dissolve just after.
     JS adds .go once both images are decoded (they are prefetched after page load), .skip if
     they are not ready within .35s (photo straight in, no drawing), .done when finished. */
  .js .draft .card__draw{opacity:1;clip-path:inset(0 100% 0 0)}
  .js .draft .card__photo{clip-path:inset(100% 0 0 0);transform:scale(1.08)}
  .js .draft.go .card__draw{clip-path:inset(0 0 0 0);opacity:0;
    transition:clip-path .75s var(--draw) var(--d,0s), opacity .5s var(--ease) calc(1.2s + var(--d,0s))}
  .js .draft.go .card__pen{animation:pen .75s var(--draw) var(--d,0s) both}
  .js .draft.go .card__photo{clip-path:inset(0 0 0 0);transform:none;
    transition:clip-path .7s var(--ease) calc(.5s + var(--d,0s)), transform 1.1s var(--ease) calc(.5s + var(--d,0s))}
  .js .draft.skip .card__draw,.js .draft.skip .card__pen{opacity:0;animation:none;transition:none}
  .js .draft.skip .card__photo{clip-path:inset(0 0 0 0);transform:none;transition:clip-path .7s var(--ease), transform 1.1s var(--ease)}
  .js .draft.done .card__draw{transition:opacity .6s var(--ease)}
  @keyframes pen{0%{opacity:0;transform:translateX(-100%)}10%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translateX(0)}}
  .cards .card:nth-child(2) .draft{--d:.1s}
  .cards .card:nth-child(3) .draft{--d:.2s}

  /* carousel: slow push-in on the showing photo, progress line fills over the slide's time */
  .js .slide.is-active,.js .slide.is-prev{animation:kb calc(var(--slide-ms, 6000ms) + 1400ms) linear both}
  .js .carousel__step.is-active span::after{transform:scaleX(0);animation:fill var(--slide-ms, 6000ms) linear forwards}
  .feature.is-paused .slide.is-active,.feature.is-paused .carousel__step.is-active span::after{animation-play-state:paused}
  .js .feature .slide:not(.is-active) img{transform:none;transition:none}   /* reveal zoom on the showing photo only: 1 layer, not 5 */
  @keyframes kb{from{transform:scale(1.07)}to{transform:scale(1)}}
  @keyframes fill{to{transform:none}}

  /* stars: the one spring on the page, small items only */
  .js .stars svg{opacity:0;transform:scale(.5);transition:opacity .3s var(--ease), transform .5s var(--spring)}
  .js .in .stars svg{opacity:1;transform:none}
  .js .in .stars svg:nth-child(2){transition-delay:.06s}
  .js .in .stars svg:nth-child(3){transition-delay:.12s}
  .js .in .stars svg:nth-child(4){transition-delay:.18s}
  .js .in .stars svg:nth-child(5){transition-delay:.24s}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-delay:0s!important}
}

/* ---------- responsive ---------- */
@media (max-width:1340px){
  .bar__in{gap:20px}
  .nav ul{gap:14px}
  .nav a{font-size:13.5px}
  .brand__mark{width:46px;height:46px}
  .brand__name{font-size:28px}
  .brand__sub{font-size:11px;letter-spacing:.36em}
}
@media (max-width:1240px){
  .trust__in{grid-template-columns:repeat(2,1fr);row-gap:28px}
  .trust__item:nth-child(3){border-left:0;padding-left:0}
}
@media (max-width:1100px){
  .card__body{padding-right:clamp(24px,2vw,36px)}
  .card__go{position:relative;right:auto;top:auto;margin-top:18px}
}
@media (max-width:1180px){
  .nav,.bar__cta{display:none}
  .burger{display:flex}
  .founder__in{grid-template-columns:1fr 1.3fr}
  .founder__card{grid-column:1 / -1;grid-template-columns:repeat(4,1fr);gap:20px}
  .founder__card li{flex-direction:column;align-items:flex-start;gap:12px}
}
@media (max-width:980px){
  :root{--bar-h:78px}
  .brand__mark{width:46px;height:46px}
  .brand__name{font-size:28px}
  .brand__sub{font-size:11px;letter-spacing:.36em}
  .hero__in > *,.hero__lead{max-width:640px}
  .hero__shade{background:linear-gradient(90deg, rgba(15,36,67,.97) 0%, rgba(15,36,67,.92) 50%, rgba(15,36,67,.7) 80%, rgba(15,36,67,.55) 100%)}
  .cards,.quotes{grid-template-columns:repeat(2,1fr)}
  .cards .card:last-child,.quotes .quote:last-child{grid-column:1 / -1}
  .feature__frame{aspect-ratio:16/10}
  .cta__img{width:100%}
  .cta__shade{background:linear-gradient(180deg, rgba(15,36,67,.96) 0%, rgba(15,36,67,.9) 60%, rgba(15,36,67,.8) 100%)}
  .cta__in{grid-template-columns:1fr}
}
@media (max-width:760px){
  /* phones: the kitchen photo is shown clearly as a band, the copy sits on solid navy below it */
  .hero__media{position:relative;inset:auto;z-index:0;aspect-ratio:4/3}
  .hero__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(15,36,67,0) 45%, rgba(15,36,67,.78) 82%, var(--navy) 100%)}
  .hero__img{object-position:64% 50%}
  .hero__shade{display:none}
  .hero .eyebrow--gold{color:var(--gold-lt)}
  .hero__in{min-height:0;position:relative;margin-top:-44px;padding-top:0}
  .card__body{padding-right:clamp(66px,5vw,88px)}
  .card__go{position:absolute;right:clamp(22px,1.9vw,34px);top:clamp(24px,2vw,36px);margin-top:0}
  .foot__in{flex-direction:column;align-items:center;text-align:center;gap:6px}
  .cards,.quotes{grid-template-columns:1fr}
  .founder__in{grid-template-columns:1fr}
  .founder__photo{max-width:460px}
  .founder__card{grid-template-columns:1fr 1fr}
  .feature__frame{aspect-ratio:4/3}
  .projects__head{align-items:flex-start}
}
@media (max-width:600px){
  .hero__title .ln,.founder__copy .h2 .ln{white-space:normal}
}
@media (max-width:560px){
  .brand__mark{width:40px;height:40px}
  .brand__name{font-size:24px}
  .brand__sub{font-size:10px;letter-spacing:.3em;margin-top:5px}
  .hero__actions .btn,.callbox{width:100%;justify-content:center}
  .trust__in{grid-template-columns:1fr}
  .trust__item,.trust__item:first-child{border-left:0!important;padding-left:0}
  .trust__t{white-space:normal}
  .founder__card{grid-template-columns:1fr}
  .founder__card li{flex-direction:row;align-items:center}
  .qform__row{grid-template-columns:1fr;gap:0}
  .carousel__ui{gap:10px}
  .carousel__steps{gap:5px}
  .carousel__step{width:20px}
  .carousel__btns{gap:8px}
  .carousel__btn{width:38px;height:38px}
  .carousel__btn[data-gallery-open]{display:none}   /* tapping the photo opens the gallery on phones */
}