/* ============================================================
   MAXIMA WALLS & CEILINGS
   Layout, type scale and motion are ported from
   isidorelandscapes.com (Framer / Framer Motion).
   Palette is Maxima's own: navy #151341, steel #64656D, white.

   Isidore's original value is noted beside each token so the
   two systems can be compared line for line.
   ============================================================ */
:root{
  /* --- surfaces --- */
  --paper:      #F4F4F6;              /* ISIDORE: #F8F3ED cream        */
  --paper-2:    #E7E7EC;              /* ISIDORE: #EFE9E0              */
  --ink:        #151341;              /* ISIDORE: #29211C  (brand navy)*/
  --ink-2:      #0D0C29;              /* ISIDORE: #201915  footer      */
  --band:       #151341;              /* ISIDORE: #2D3622  dark green  */
  --bone:       #EDEDF2;              /* ISIDORE: #FFEBC3              */
  --steel:      #64656D;              /* Maxima secondary brand grey   */
  --sand:       #DCDCE3;              /* ISIDORE: #D7D1C3  sand band   */
  --btn:        #64656D;              /* ISIDORE: #46372B              */

  /* --- lines and muted text --- */
  --hair:       rgba(21,19,65,.16);   /* ISIDORE: #D9D7D0              */
  --hair-bone:  rgba(237,237,242,.20);
  --muted:      rgba(21,19,65,.55);
  --muted-bone: rgba(237,237,242,.55);

  /* --- layout: Isidore's 1440 / 64 / 46 / 82 grid --- */
  --maxw: 1440px;
  --gut:  clamp(24px, 4.4vw, 64px);
  --gap-col: clamp(16px, 3.2vw, 46px);
  --gap-row: clamp(40px, 5.7vw, 82px);
  --sec:  clamp(72px, 9.6vw, 138px);

  /* --- easing --- */
  --ease:  cubic-bezier(.22,1,.36,1);
  --ease2: cubic-bezier(.22,.61,.36,1);

  /* Isidore's 18px arrow glyph, used as a mask so it takes currentColor */
  --arw: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'><path transform='translate(2.45 3.52)' d='M 13.096 5.773 L 8.033 10.836 C 7.867 10.992 7.607 10.988 7.446 10.826 C 7.285 10.665 7.281 10.405 7.437 10.239 L 11.779 5.897 L 0.422 5.897 C 0.189 5.897 0 5.708 0 5.475 C 0 5.242 0.189 5.053 0.422 5.053 L 11.78 5.053 L 7.437 0.711 C 7.281 0.545 7.285 0.285 7.446 0.124 C 7.607 -0.037 7.867 -0.042 8.033 0.114 L 13.096 5.177 C 13.26 5.342 13.26 5.608 13.096 5.773 Z'/></svg>");

  --head-h: clamp(66px, 5.9vw, 85px);
}

*{box-sizing:border-box}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-feature-settings:"cv09","cv03","cv04","cv11";
  font-size:16px;
  font-weight:500;
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  overflow-x:clip;   /* 'hidden' would make body a scroll container and kill position:sticky */
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:2px}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}
.bleed{width:100%}

/* ============================================================
   TYPE SCALE — Isidore's presets, 1:1
   120 / 96 / 32 / 20 / 18u / 16 / 14 / 12u
   ============================================================ */
.display{
  font-weight:500;
  font-size:clamp(44px,8.4vw,120px);
  line-height:.9;
  letter-spacing:-.04em;
  margin:0;
}
.h2{
  font-weight:500;
  font-size:clamp(34px,6.4vw,96px);
  line-height:1.1;
  letter-spacing:-.04em;
  margin:0;
}
.h3{
  font-weight:500;
  font-size:clamp(23px,2.3vw,32px);
  line-height:1.3;
  letter-spacing:-.04em;
  margin:0;
}
.lede{font-size:clamp(17px,1.42vw,20px);line-height:1.5;margin:0}
.body{font-size:16px;line-height:1.8;margin:0}
.body + .body{margin-top:1.4em}
.label{font-size:clamp(15px,1.28vw,18px);font-weight:600;line-height:1.2;text-transform:uppercase;margin:0}
.eyebrow{font-size:12px;font-weight:400;letter-spacing:.06em;text-transform:uppercase;line-height:1.2;margin:0;color:var(--muted)}
.cap{font-size:14px;font-weight:500;line-height:1.2;margin:0}
.on-dark .eyebrow,.dark .eyebrow{color:var(--muted-bone)}
.dark{background:var(--band);color:var(--bone)}
.tint{color:var(--muted)}
.dark .tint{color:var(--muted-bone)}

/* ============================================================
   MOTION PRIMITIVES
   ============================================================ */

/* --- 1. word rise: words masked, staggered translateY --------
   Isidore uses this on headings and ledes.                     */
.wr{--wr-d:0ms}
.wr-w{display:inline-flex;overflow:hidden;vertical-align:bottom;padding-bottom:.26em;margin-bottom:-.26em}
.wr-i{
  display:inline-block;
  transform:translateY(145%);
  transition:transform .95s var(--ease);
  transition-delay:calc(var(--i) * 34ms + var(--wr-d));
}
.wr.is-in .wr-i{transform:none}

/* --- 2. char scroll-lit: ghost behind, live char keyed to
   scroll progress. Isidore ghosts at opacity .1. -------------- */
.cr{display:flex;flex-wrap:wrap;gap:0 .3em}
.cr-w{display:inline-flex}
.cr-c{position:relative;display:inline-block}
.cr-g{position:absolute;inset:0;opacity:.14}
.cr-l{opacity:calc((var(--p,0) * (var(--n) + 12) - var(--i)) / 12)}

/* --- 3. fade + rise on enter (cards, rows, media) ------------ */
.rise{opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease2),transform .9s var(--ease);transition-delay:var(--d,0ms)}
.rise.is-in{opacity:1;transform:none}

/* --- 4. image parallax inside a clipped frame ---------------- */
.frame{position:relative;overflow:clip;border-radius:12px;background:var(--paper-2)}
.frame > img{width:100%;height:100%;object-fit:cover;display:block}
.par > img{transform:scale(calc(1.16 - .16 * var(--p,0)));will-change:transform}

/* ============================================================
   PAGE-LOAD SPLASH

   Rebuilt from the Lottie the Webflow site loads
   (Untitled design (8).mp4.lottie.json). That file is a
   movie-to-lottie flipbook: 40 base64 JPEG frames at 1920x1080,
   13fps, 1.18MB, zero vector content. Playing it would need
   lottie-web plus a megabyte in front of first paint, at 13fps,
   with white baked into every frame. So the frames were measured
   and the motion rebuilt as two transforms on a traced mark
   (IoU 0.99 against 1x/Artboard 1.png):

     frame  time     what moves
     0-6    0-.538   blank
     6-13   .538-1.0 walls  scaleX 1.20 -> 1, opacity 0 -> 1
     13-21  1.0-1.62 lid    translateY -39u -> 0, opacity 0 -> 1
     21-39  1.62-3.0 hold

   The 1.39s tail hold and 0.34s of the lead-in are video slate,
   not design, so both are trimmed: .2 / .54 / .62 / .35 / .55.

   Every visible step is CSS. The script only removes the node
   afterwards, so a JS failure, a no-JS visitor, or a script that
   never arrives all still get the overlay cleared on time — and
   because nothing waits on JS, it paints with the first frame
   instead of flashing in after the deferred bundle runs.

   Home page only, and there only on the first view of a session
   or an explicit reload — #splash-gate in the <head> decides that
   before first paint and sets .no-splash when it should sit out.
   Coming back to home from another page is a real document load
   but not a first view, so it stays quiet.
   ============================================================ */
html.no-splash .load{display:none}
.load{
  display:grid;place-items:center;
  position:fixed;inset:0;z-index:200;
  background:var(--paper);
  animation:load-out .55s var(--ease2) 1.71s both;
}
/* the walls splay past the tight viewBox and the lid starts above it */
.load svg{overflow:visible;height:clamp(150px,58vmin,460px);width:auto}
.load-w,.load-l{transform-box:view-box;transform-origin:50% 50%}
.load-w{animation:load-walls .54s var(--ease)  .2s both}
.load-l{animation:load-lid   .62s var(--ease2) .74s both}
@keyframes load-walls{from{opacity:0;transform:scaleX(1.2)}       to{opacity:1;transform:none}}
@keyframes load-lid  {from{opacity:0;transform:translateY(-39px)} to{opacity:1;transform:none}}
@keyframes load-out  {from{opacity:1}                             to{opacity:0;visibility:hidden}}

/* ============================================================
   HEADER
   ============================================================ */
.site-head{
  position:fixed;top:0;left:0;right:0;z-index:80;
  transition:background .45s var(--ease2),color .45s var(--ease2);
  background:color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter:saturate(150%) blur(14px);
  color:var(--ink);
}
.site-head.on-dark{background:transparent;backdrop-filter:none;color:var(--bone)}
.head-in{
  display:flex;align-items:center;gap:24px;height:var(--head-h);
  border-bottom:1px solid var(--hair);
  transition:border-color .45s var(--ease2);
}
.site-head.on-dark .head-in{border-bottom-color:rgba(237,237,242,.2)}
.mark{display:block;flex:none;line-height:0}
/* the lockup carries the WALLS AND CEILINGS line, which is the bottom 17% of
   the art, so it needs more height than a bare wordmark would. 46px is the
   ceiling that still leaves air inside a --head-h of 66-85px. */
.mark img{height:clamp(36px,3.4vw,46px);width:auto}
.site-head .mark .rev{display:none}
.site-head.on-dark .mark .std{display:none}
.site-head.on-dark .mark .rev{display:block}
/* the footer has room the header doesn't, so the tagline gets read here */
.mark--rev img{height:64px}

.nav{margin-left:auto;display:flex;align-items:center;gap:32px}
.nav a{position:relative;font-size:14px;font-weight:500;line-height:1.2;padding:6px 0}
/* the bone dot under each link — Isidore's nav tell */
.nav a .dot{
  position:absolute;left:50%;bottom:-9px;width:5px;height:5px;border-radius:99px;
  background:currentColor;opacity:0;transform:translateX(-50%) scale(.3);
  transition:opacity .3s var(--ease2),transform .45s var(--ease);
}
.nav a:hover .dot,.nav a[aria-current="page"] .dot{opacity:1;transform:translateX(-50%) scale(1)}
.nav > .btn{display:none}

/* ============================================================
   BUTTON — pill with the ring bullet that fills on hover
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:clamp(15px,1.6vw,22px) clamp(20px,1.8vw,24px);
  border-radius:99px;background:var(--ink);color:var(--bone);
  font-size:14px;font-weight:500;line-height:1.2;white-space:nowrap;
  transition:background .4s var(--ease2),transform .5s var(--ease);
}
.btn .ring{
  flex:none;width:8px;height:8px;border-radius:99px;
  border:1px solid currentColor;display:grid;place-items:center;
}
.btn .ring::after{
  content:"";width:6px;height:6px;border-radius:99px;background:currentColor;
  opacity:0;transform:scale(.35);
  transition:opacity .35s var(--ease2),transform .5s var(--ease);
}
.btn:hover .ring::after{opacity:1;transform:scale(1)}
.btn:hover{background:var(--btn)}
.btn--ghost{background:var(--btn);color:var(--bone)}
.btn--ghost:hover{background:#7b7c85}
.btn--line{background:transparent;color:currentColor;border:1px solid currentColor}
.btn--line:hover{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.on-dark .btn--line:hover,.dark .btn--line:hover{background:var(--bone);color:var(--ink);border-color:var(--bone)}

.burger{display:none;margin-left:auto;padding:10px;border-radius:8px}
.burger i{display:block;width:20px;height:1.5px;background:currentColor;margin:4.5px 0;transition:transform .3s var(--ease2),opacity .2s}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ============================================================
   PAGE SHELL
   ============================================================ */
.page{display:none}
.page.is-active{display:block}

/* inner-page header block — Isidore /projects: 148 top, 64 gap */
.page-head{padding-top:calc(var(--head-h) + clamp(48px,6.6vw,84px))}
.crumb{display:flex;gap:12px;align-items:center;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding-bottom:clamp(28px,3.4vw,48px)}
.crumb a:hover{color:var(--ink)}
.page-head .display{max-width:16ch}
.head-row{display:flex;flex-wrap:wrap;gap:clamp(28px,4.4vw,64px);align-items:flex-end;justify-content:space-between;margin-top:clamp(28px,4.4vw,64px)}
.head-row .lede{max-width:34ch;flex:1 1 380px}

/* ============================================================
   HERO — 100vh, full bleed, display in bone over the image
   ============================================================ */
.hero{position:relative;height:100svh;min-height:560px;display:flex;overflow:clip}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(calc(1.08 - .08 * var(--in,0) + .06 * var(--p,0))) translateY(calc(var(--p,0) * 60px));
  transition:transform 2s var(--ease);
  will-change:transform;
}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(13,12,41,.46) 0%,rgba(13,12,41,.16) 60%,rgba(13,12,41,.04) 100%),
    linear-gradient(180deg,rgba(13,12,41,.74) 0%,rgba(13,12,41,.48) 32%,rgba(13,12,41,.52) 60%,rgba(13,12,41,.88) 100%);
}
.hero-in{
  position:relative;z-index:1;width:100%;max-width:var(--maxw);margin:0 auto;
  padding:calc(var(--head-h) + clamp(40px,5vw,64px)) var(--gut) clamp(36px,4.4vw,64px);
  display:flex;flex-direction:column;justify-content:flex-end;gap:clamp(28px,3.4vw,48px);
  color:var(--bone);
}
.hero-in .display{max-width:14ch;color:var(--bone)}
.hero-foot{display:flex;flex-wrap:wrap;gap:clamp(22px,3.2vw,48px);align-items:flex-end;justify-content:space-between}
.hero-foot .lede{max-width:46ch;flex:1 1 420px}
.hero-scroll{display:flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;opacity:.72}
.hero-scroll i{display:block;width:1px;height:34px;background:currentColor;transform-origin:top;animation:tick 2.4s var(--ease2) infinite}
@keyframes tick{0%{transform:scaleY(0)}45%{transform:scaleY(1)}100%{transform:scaleY(0);transform-origin:bottom}}

/* --- hero variant: Isidore /project-services -----------------
   display pinned top-left, a 520px lede + button pinned
   bottom-right. Isidore: place-content:flex-end space-between */
.hero--split .hero-in{justify-content:space-between;align-items:flex-end}
.hero--split .hero-in .display{align-self:stretch;max-width:11ch}
.hero-side{
  display:flex;flex-direction:column;align-items:flex-start;
  gap:clamp(22px,2.4vw,32px);max-width:520px;
}

/* ============================================================
   DARK STATEMENT BAND + STICKY SCROLL-EXPANDING IMAGE
   Isidore: 2250px track, sticky 100vh, 50vw -> 100vw, r12 -> r0
   ============================================================ */
.statement{padding:clamp(56px,7.4vw,110px) 0 0}
.statement-in{display:flex;flex-direction:column;gap:clamp(28px,3.4vw,48px);align-items:center;text-align:center}
.statement .cr{justify-content:center;max-width:24ch;font-size:clamp(23px,2.3vw,32px);line-height:1.3;letter-spacing:-.04em;font-weight:500}

.expand{position:relative;height:250vh;margin-top:clamp(48px,6vw,90px)}
.expand-sticky{position:sticky;top:0;height:100svh;display:grid;place-items:center;overflow:clip}
.expand-frame{
  width:calc(50vw + 50vw * var(--p,0));
  aspect-ratio:16/9;
  border-radius:calc(12px - 12px * var(--p,0));
  overflow:clip;position:relative;background:var(--ink-2);
}
.expand-frame img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(calc(1.12 - .12 * var(--p,0)));
  will-change:transform;
}
.expand-cap{
  position:absolute;left:0;right:0;bottom:clamp(18px,2.4vw,34px);z-index:2;
  display:flex;justify-content:space-between;gap:16px;
  padding-inline:clamp(18px,2.4vw,34px);
  font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--bone);
  opacity:var(--p,0);
}

/* ============================================================
   SPLIT HEADLINE — 96px title left, lede indented right
   Isidore: Content padded 340px from the left edge
   ============================================================ */
.split{display:flex;flex-direction:column;gap:clamp(40px,5.7vw,82px)}
.split-title{max-width:800px}
.split-lede{padding-left:clamp(0px,23.6vw,340px);max-width:calc(340px + 632px)}
/* .split--media fills the empty indent column with a portrait plate instead of
   padding, so a short heading doesn't leave an L-shaped void beside the copy */
.split--media .split-lede{
  padding-left:0;
  display:grid;grid-template-columns:294px minmax(0,632px);
  gap:clamp(20px,3.2vw,46px);align-items:start;
}
.split--media .split-media{aspect-ratio:3/4}
.split--media .split-copy{display:flex;flex-direction:column;gap:1.4em}
.split--media .split-copy .body{margin:0;max-width:none}
.split-lede .lede{max-width:44ch}
.split-lede .btn{margin-top:clamp(22px,2.4vw,32px)}

/* section headline: eyebrow over a scroll-lit statement */
.sec-head{display:flex;flex-direction:column;gap:clamp(24px,3.4vw,48px)}
.sec-head .cr{font-size:clamp(30px,4.8vw,66px);line-height:1.1;letter-spacing:-.04em;font-weight:500;max-width:20ch}
.sec-head .h2{max-width:18ch}

/* ============================================================
   NUMBERED ROWS — services / safety
   Isidore: hairline top + bottom, 01 + label caption row
   ============================================================ */
.rows{border-top:1px solid var(--hair)}
.dark .rows{border-top-color:var(--hair-bone)}
.row{
  display:block;border-bottom:1px solid var(--hair);
  padding:clamp(26px,3vw,42px) 0;
  transition:padding-left .6s var(--ease);
}
.dark .row{border-bottom-color:var(--hair-bone)}
a.row:hover{padding-left:clamp(6px,1vw,18px)}
.row-cap{display:flex;gap:clamp(16px,2.4vw,34px);align-items:baseline;color:var(--muted)}
.dark .row-cap{color:var(--muted-bone)}
.row-cap .label{font-size:clamp(14px,1.28vw,18px)}
.row-body{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr) minmax(0,.72fr);
  gap:clamp(18px,3vw,46px);align-items:start;
  margin-top:clamp(18px,2.2vw,30px);
}
.row-body .h3{max-width:12ch}
.row-body p{margin:0;font-size:16px;line-height:1.8;color:rgba(21,19,65,.74)}
.dark .row-body p{color:rgba(237,237,242,.74)}
.row-thumb{aspect-ratio:4/3;border-radius:12px;overflow:clip;background:var(--paper-2);position:relative}
.row-thumb img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 1s var(--ease)}
.row:hover .row-thumb img{transform:scale(1)}
.rows--plain .row-body{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr)}
/* Isidore caps the indented lede at 406, not the site-wide 44ch */
.split--tight .split-lede .lede{max-width:406px}

/* ============================================================
   SERVICE CARDS — Isidore /project-services
   2 x 633, gap 46. White card r12 p12 min-h 344; text column
   p24 space-between | image column r6 with the image at 1.15.
   ============================================================ */
.svc-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  grid-auto-rows:minmax(0,1fr);gap:var(--gap-col);
  margin-top:clamp(40px,5.7vw,82px);
}
.svc-card{
  display:flex;align-items:center;
  min-height:344px;padding:12px;border-radius:12px;
  background:#fff;overflow:clip;
}
.svc-card-text{
  flex:1 1 0;min-width:0;align-self:stretch;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;
  padding:clamp(18px,1.9vw,24px);
}
.svc-card-head{display:flex;flex-direction:column;gap:12px;width:100%;padding-bottom:24px}
.svc-card-head p{
  margin:0;font-size:16px;line-height:1.8;color:rgba(21,19,65,.8);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
}
.svc-card-img{
  flex:1 1 0;min-width:0;align-self:stretch;min-height:320px;
  position:relative;border-radius:6px;overflow:hidden;background:var(--paper-2);
}
/* absolute so a portrait source contributes no intrinsic height */
.svc-card-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.15)}

/* Isidore's tell: an 18px clipped box holding two arrows, gap 10.
   At rest the track sits at -28 so the second arrow shows; on hover
   it returns to 0 — the first slides in from the left, the second
   slides out to the right. */
.arrowlink{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;line-height:1.2}
.arrowlink i{flex:none;display:block;width:18px;height:18px;overflow:hidden}
.arrowlink i em{
  display:flex;gap:10px;
  transform:translateX(-28px);
  transition:transform .55s var(--ease);
}
.arrowlink i em::before,.arrowlink i em::after{
  content:"";flex:none;width:18px;height:18px;background:currentColor;
  -webkit-mask:var(--arw) no-repeat center/contain;mask:var(--arw) no-repeat center/contain;
}
.arrowlink:hover i em,.arrowlink:focus-visible i em{transform:none}

/* ============================================================
   SPLIT CTA BAND — Isidore: 340 lede | 1px rule | char-lit line
   ============================================================ */
.cta-split{
  display:grid;grid-template-columns:340px 1px minmax(0,1fr);
  gap:clamp(32px,7.8vw,112px);align-items:center;
  padding:var(--sec) 0;
}
.cta-split-l{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(24px,2.4vw,34px)}
.cta-rule{align-self:stretch;width:1px;background:var(--bone);opacity:.55}
.cta-split .cr{
  margin:0;
  font-size:clamp(30px,4vw,60px);line-height:1.1;letter-spacing:-.0067em;font-weight:500;
}

/* ============================================================
   PROJECT GRID — Isidore: 633 | 633, col 46, row 82,
   tiles alternate 9:10 portrait and 10:7 landscape
   ============================================================ */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(30px,4.4vw,64px)}
.chip{
  padding:14px 18px;border-radius:99px;border:1px solid var(--ink);
  background:transparent;color:var(--ink);
  font-size:14px;font-weight:500;line-height:1.2;
  transition:background .35s var(--ease2),color .35s var(--ease2);
}
.chip:hover{background:rgba(21,19,65,.07)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--bone)}

.grid{
  display:grid;grid-template-columns:1fr 1fr;
  column-gap:var(--gap-col);row-gap:var(--gap-row);
  align-items:start;
  margin-top:clamp(40px,5.7vw,82px);
}
.card{display:block}
.card .frame{aspect-ratio:9/10}
.card:nth-child(even) .frame{aspect-ratio:10/7}
.card-meta{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  margin-top:24px;
}
.card-meta .nm,.card-meta .yr{
  font-size:clamp(14px,1.28vw,18px);font-weight:600;line-height:1.2;text-transform:uppercase;
}
.card-meta .nm{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-meta .yr{flex:none;color:var(--muted)}
.card-note{margin:10px 0 0;font-size:14px;line-height:1.5;color:var(--muted);max-width:46ch}
.card .frame > img{transition:transform .55s var(--ease)}
.more{display:flex;justify-content:center;margin-top:clamp(44px,5.7vw,82px)}
.more .chip{padding:16px 26px}
.empty{grid-column:1/-1;padding:64px 0;color:var(--muted)}

/* ============================================================
   IMAGE / TEXT PAIR — their alternating rhythm
   ============================================================ */
.pair{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
  gap:clamp(28px,5vw,90px);align-items:center;
}
.pair--rev > *:first-child{order:2}
.pair-text{display:flex;flex-direction:column;gap:clamp(18px,2.2vw,30px)}
.pair-text .body{max-width:46ch}
.pair .frame{aspect-ratio:4/3}
.banner .frame{aspect-ratio:2.9/1;margin-top:clamp(30px,4.4vw,64px)}

/* ============================================================
   ABOUT — RING HERO
   Isidore's tilted photo carousel, measured off their page:
   12 panels, 180px square, radius 389px, perspective 1200px,
   rotateX -42deg, entrance scale 1.7 -> 1 over 2.5s.
   We keep the geometry and add a slow continuous turn.
   ============================================================ */
.ringhero{
  position:relative;min-height:100svh;
  display:grid;place-items:center;overflow:clip;
  padding-top:var(--head-h);
}
.ringhero-crumb{position:absolute;top:calc(var(--head-h) + clamp(20px,2.6vw,38px));left:0;right:0;z-index:3}
.ringhero-crumb .crumb{padding-bottom:0}
.ringhero-stage{
  position:absolute;inset:0;display:grid;place-items:center;z-index:0;
  -webkit-mask-image:linear-gradient(rgba(0,0,0,.15) 10%,#000 50%,rgba(0,0,0,.15) 90%);
          mask-image:linear-gradient(rgba(0,0,0,.15) 10%,#000 50%,rgba(0,0,0,.15) 90%);
}
/* NB: .ring is already the button bullet — this ring is .ring3d */
.ring3d{
  --pw:clamp(96px,13.4vw,180px);
  --r:clamp(208px,29vw,389px);
  position:relative;width:1px;height:1px;perspective:1200px;
}
.ring3d-tilt{
  position:absolute;inset:0;transform-style:preserve-3d;
  transform:rotateX(-42deg) scale(1.7);
  transition:transform 2.5s cubic-bezier(.16,1,.3,1);
}
.ringhero.is-in .ring3d-tilt{transform:rotateX(-42deg) scale(1)}
.ring3d-turn{position:absolute;inset:0;transform-style:preserve-3d;animation:ring3d-turn 70s linear infinite}
@keyframes ring3d-turn{from{transform:rotateY(15deg)}to{transform:rotateY(375deg)}}
.ring3d-p{
  position:absolute;top:0;left:0;width:var(--pw);height:var(--pw);
  margin:calc(var(--pw) / -2) 0 0 calc(var(--pw) / -2);
  border-radius:16px;overflow:clip;background:var(--paper-2);
  transform:rotateY(var(--a)) translateZ(var(--r));
}
.ring3d-p img{width:100%;height:100%;object-fit:cover;display:block}
.ringhero-copy{
  position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;
  gap:clamp(20px,2.4vw,32px);text-align:center;max-width:660px;padding-inline:var(--gut);
}
/* the ring's centre is hollow, but photos still crowd its edges */
.ringhero-copy::before{
  content:"";position:absolute;inset:-16% -20%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--paper) 90%,transparent),transparent 76%);
}
.ringhero-copy .display{max-width:none}
.ringhero-copy .lede{max-width:38ch;color:var(--muted)}

/* Isidore's eyebrow tell: a 6px dot ahead of the label */
.eyebrow--dot{display:inline-flex;align-items:center;gap:10px}
.eyebrow--dot::before{content:"";flex:none;width:6px;height:6px;border-radius:99px;background:currentColor}

/* ============================================================
   ABOUT — PINNED STAGE
   Isidore pins a 100vh frame and crossfades three panels over
   a 3x100vh track, with an 01/02/03 counter that slides.
   Panel k is lit by (p*3 - k + 1); the UA clamps opacity to
   0..1, so the crossfade needs no JS.
   ============================================================ */
.stage{position:relative;height:320vh;margin-top:clamp(48px,6vw,90px)}
.stage-sticky{position:sticky;top:0;height:100svh;overflow:clip;background:var(--ink-2)}
.stage-p{position:absolute;inset:0;isolation:isolate;pointer-events:none;opacity:calc((var(--p,0) * 3 - var(--k)) * 2.6 + 1)}
.stage-p > img{width:100%;height:100%;object-fit:cover;display:block}
.stage-p::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(13,12,41,.20) 0%,rgba(13,12,41,.08) 40%,rgba(13,12,41,.80) 100%);
}
.stage-copy{
  position:absolute;left:0;right:0;bottom:0;z-index:2;color:var(--bone);
  padding:0 var(--gut) clamp(48px,6.4vw,92px);
  opacity:calc(
    clamp(0,calc((var(--p,0) * 3 - var(--k) + .16) * 6.25),1)
    * (1 - var(--fo,1) * clamp(0,calc((var(--p,0) * 3 - var(--k) - .62) * 5.56),1))
  );
}
.stage-copy-in{max-width:var(--maxw);margin:0 auto;display:flex;flex-direction:column;gap:1.1em}
.stage-copy p{margin:0;font-size:clamp(17px,1.42vw,20px);line-height:1.55;max-width:48ch}
.stage-num{
  position:absolute;right:var(--gut);bottom:clamp(48px,6.4vw,92px);z-index:3;
  height:1.15em;overflow:hidden;color:var(--bone);
  font-size:clamp(28px,3.2vw,44px);font-weight:500;letter-spacing:-.03em;
}
.stage-num-t{
  --s:calc(
    clamp(0,calc((var(--p,0) * 3 - .71) * 5),1) +
    clamp(0,calc((var(--p,0) * 3 - 1.71) * 5),1)
  );
  transform:translateY(calc(var(--s) * -1.15em));
}
.stage-num-t b{display:block;height:1.15em;line-height:1.15;font-weight:inherit}
.stage-bar{position:absolute;left:var(--gut);right:var(--gut);bottom:clamp(20px,2.2vw,28px);z-index:3;height:1px;background:var(--hair-bone)}
.stage-bar i{display:block;height:100%;background:var(--bone);transform:scaleX(var(--p,0));transform-origin:left}

/* ============================================================
   ABOUT — STORY: text column beside a sticky image
   Isidore: flex row, 100px gap, image sticky at top 80px
   ============================================================ */
.story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6.9vw,100px);align-items:start}
.story-copy{display:flex;flex-direction:column;gap:clamp(18px,2.2vw,30px)}
.story-copy .body{max-width:52ch}
/* the column gap already spaces these; drop the base .body + .body rule */
.story-copy .body + .body{margin-top:0}
.story-media{align-self:stretch}
.story-media .frame{position:sticky;top:calc(var(--head-h) + clamp(16px,1.8vw,24px));height:min(62vh,560px)}

/* ============================================================
   ABOUT — BAND SECTIONS with accordion
   Isidore runs two: olive #797762 and sand #D7D1C3, each with
   a hairline rule, a 5-item accordion and an image beside it.
   ============================================================ */
.band{background:var(--steel);color:var(--bone)}
.band .eyebrow,.band .tint{color:var(--muted-bone)}
.band-sand{background:var(--sand);color:var(--ink)}
.band-sand .eyebrow,.band-sand .tint{color:var(--muted)}
.band-in{padding-block:clamp(64px,8.4vw,120px)}
.band-in > .eyebrow{margin-bottom:clamp(18px,2vw,26px)}
.band-head{display:flex;flex-wrap:wrap;gap:clamp(24px,3.4vw,48px);align-items:flex-end;justify-content:space-between}
.band-head .cr{margin:0;font-size:clamp(26px,3.4vw,46px);line-height:1.18;letter-spacing:-.035em;font-weight:500;max-width:26ch;flex:1 1 520px}
.band-rule{height:1px;background:currentColor;opacity:.2;margin-block:clamp(34px,4.4vw,62px)}
.band-cols{display:grid;grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr);gap:clamp(28px,4.4vw,64px);align-items:start}
.band-div{background:currentColor;opacity:.2;align-self:stretch;min-height:100%}
.band-cols .frame{aspect-ratio:1/1;background:color-mix(in srgb,currentColor 12%,transparent)}

.acc{margin-top:clamp(18px,2.2vw,26px)}
.acc-i{border-top:1px solid;border-top-color:color-mix(in srgb,currentColor 22%,transparent)}
.acc-i:last-child{border-bottom:1px solid;border-bottom-color:color-mix(in srgb,currentColor 22%,transparent)}
.acc-q{
  display:flex;width:100%;align-items:center;justify-content:space-between;gap:20px;
  padding:clamp(16px,1.6vw,22px) 0;background:none;border:0;cursor:pointer;text-align:left;
  color:inherit;font-family:inherit;font-size:clamp(16px,1.5vw,20px);font-weight:500;
  letter-spacing:-.02em;line-height:1.25;
}
.acc-ico{position:relative;flex:none;width:12px;height:12px}
.acc-ico::before,.acc-ico::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:currentColor;transition:transform .45s var(--ease)}
.acc-ico::after{transform:rotate(90deg)}
.acc-i.is-open .acc-ico::after{transform:rotate(0deg)}
.acc-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease)}
.acc-i.is-open .acc-a{grid-template-rows:1fr}
.acc-a > div{overflow:hidden}
.acc-a p{margin:0;padding-bottom:clamp(18px,2vw,26px);font-size:15px;line-height:1.75;max-width:54ch;opacity:.82}

@media (max-width:900px){
  .story{grid-template-columns:1fr}
  .story-media .frame{position:static;height:auto;aspect-ratio:4/3}
  .band-cols{grid-template-columns:1fr}
  .band-div{display:none}
  .stage{height:280vh}
  .stage-num{font-size:clamp(24px,7vw,34px)}
}
@media (max-width:900px){
  .ringhero-copy::before{
    inset:-22% -26%;
    background:radial-gradient(closest-side,var(--paper) 58%,color-mix(in srgb,var(--paper) 70%,transparent) 80%,transparent 100%);
  }
}
@media (max-width:640px){
  .ringhero{min-height:88svh}
  .ring3d{--pw:clamp(64px,18vw,94px);--r:clamp(150px,44vw,212px)}
  .ringhero-copy{max-width:none}
  .ringhero-copy .lede{max-width:26ch;font-size:15px}
}
@media (prefers-reduced-motion:reduce){
  .ring3d-turn{animation:none;transform:rotateY(15deg)}
  .ringhero .ring3d-tilt{transform:rotateX(-42deg) scale(1)}
  .stage{height:auto;margin-top:clamp(48px,6vw,90px)}
  .stage-sticky{position:static;height:auto;display:grid;gap:2px}
  .stage-p{position:relative;inset:auto;opacity:1;height:70svh}
  .stage-copy{opacity:1}
  .stage-num,.stage-bar{display:none}
  .acc-a{transition:none}
}


/* ============================================================
   STATS + MARQUEE ROW
   Isidore: SINCE 1994 | START TODAY | 500+ PROJECTS
   ============================================================ */
.marquee{
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding-bottom:clamp(28px,3.4vw,48px);
}
.marquee span{font-size:clamp(13px,1.28vw,18px);font-weight:600;text-transform:uppercase;line-height:1.2}
.marquee span:nth-child(2){opacity:.5}

.stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--hair);margin-top:clamp(56px,7.4vw,110px)}
.dark .stats{border-top-color:var(--hair-bone)}
.stat{padding:clamp(22px,2.6vw,34px) clamp(18px,2vw,28px) 0 0;border-right:1px solid var(--hair)}
.stat + .stat{padding-left:clamp(18px,2vw,28px)}
.dark .stat{border-right-color:var(--hair-bone)}
.stat:last-child{border-right:0}
.stat b{display:block;font-weight:500;font-size:clamp(30px,3.8vw,54px);letter-spacing:-.04em;line-height:1}
.stat span{display:block;margin-top:12px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.dark .stat span{color:var(--muted-bone)}

/* ============================================================
   CLIENTS
   ============================================================ */
.clients{
  display:grid;grid-template-columns:repeat(8,1fr);
  gap:1px;background:var(--hair);border:1px solid var(--hair);
  margin-top:clamp(40px,5.7vw,82px);border-radius:12px;overflow:clip;
}
.client{background:#fff;display:grid;place-items:center;aspect-ratio:16/10;padding:18px 14px}
.client img{max-height:34px;max-width:84%;width:auto;object-fit:contain;filter:saturate(.15) opacity(.7);transition:filter .5s var(--ease2)}
.client:hover img{filter:none}
/* padding tiles keep the last row full so the hairline background never
   shows through as a grey block; see the pad in the render below */
.client--pad{pointer-events:none}

/* ============================================================
   CTA BAND — sticky title, Isidore "Start Today"
   ============================================================ */
.cta{padding-block:clamp(56px,7.4vw,110px) clamp(56px,6vw,82px)}
.cta-title{position:sticky;top:24vh;padding:clamp(24px,3vw,40px) 0 clamp(48px,6vw,80px)}
.cta-title .cr{font-size:clamp(38px,7.6vw,110px);line-height:1;letter-spacing:-.04em;font-weight:500;max-width:13ch;gap:0 .26em}
.cta-bottom{
  display:flex;flex-wrap:wrap;gap:clamp(28px,4.4vw,60px);align-items:flex-end;justify-content:space-between;
  padding-top:clamp(40px,5.7vw,82px);border-top:1px solid var(--hair-bone);
}
.cta-bottom p{margin:0;max-width:40ch;font-size:16px;line-height:1.8;color:rgba(237,237,242,.78)}

/* ============================================================
   FOOTER — Isidore anatomy: statement + pill, socials,
   two link columns, copyright + back-to-top
   ============================================================ */
.foot{background:var(--ink-2);color:var(--bone)}
.foot-in{padding-block:clamp(56px,6vw,82px) clamp(44px,4.4vw,64px);display:flex;flex-direction:column;gap:clamp(56px,8vw,110px)}
.foot-top{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(28px,4vw,60px);align-items:start}
.foot-cta{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(26px,3vw,42px)}
.foot-cta .h2{font-size:clamp(30px,4.4vw,60px);line-height:1.1;max-width:14ch}
.foot-bottom{display:flex;flex-direction:column;gap:clamp(40px,5.7vw,82px)}
.foot-row{display:flex;flex-wrap:wrap;gap:clamp(28px,4vw,60px);justify-content:space-between}
.socials{display:flex;gap:12px}
.socials a{
  width:55px;height:55px;border-radius:12px;background:rgba(237,237,242,.08);
  display:grid;place-items:center;transition:background .35s var(--ease2),transform .5s var(--ease);
}
.socials a:hover{background:rgba(237,237,242,.18);transform:translateY(-3px)}
.socials svg{width:17px;height:17px;fill:var(--bone)}
.foot-nav{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3.2vw,46px);flex:1 1 520px;max-width:746px}
.foot-nav h4{margin:0 0 32px;font-size:12px;font-weight:400;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-bone)}
.foot-nav ul{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.foot-nav a{font-size:14px;line-height:1.2;opacity:.88;transition:opacity .25s}
.foot-nav a:hover{opacity:1}
.foot-nav p{margin:0 0 18px;font-size:14px;line-height:1.6;opacity:.88}
.foot-bar{
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  padding-top:clamp(28px,3.2vw,44px);border-top:1px solid var(--hair-bone);
  font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-bone);
}
.foot-bar button{display:inline-flex;gap:8px;align-items:center;color:var(--bone);font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.foot-bar button span{transition:transform .45s var(--ease)}
.foot-bar button:hover span{transform:translateY(-3px)}

/* ============================================================
   CONTACT
   ============================================================ */
.contact-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,5.7vw,82px);margin-top:clamp(40px,5.7vw,82px)}
.form{display:grid;gap:22px;max-width:520px}
.field label{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.field input,.field textarea{
  width:100%;padding:14px 0;border:0;border-bottom:1px solid var(--hair);
  background:transparent;font:inherit;font-size:16px;color:var(--ink);border-radius:0;
  transition:border-color .35s var(--ease2);
}
.field textarea{min-height:110px;resize:vertical}
.field input:focus,.field textarea:focus{outline:none;border-bottom-color:var(--ink)}
.form-msg{font-size:14px;color:var(--muted);min-height:20px;margin:0}
.contact-meta dl{margin:0}
.contact-meta dt{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:30px}
.contact-meta dt:first-child{margin-top:0}
.contact-meta dd{margin:10px 0 0;font-size:16px;line-height:1.6}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1000px){
  .clients{grid-template-columns:repeat(4,1fr)}
  .split-lede{padding-left:0}
  .split--media .split-lede{grid-template-columns:1fr}
  .split--media .split-media{aspect-ratio:16/9;max-width:520px}
  .row-body{grid-template-columns:1fr;gap:20px}
  .row-thumb{max-width:420px;order:3}
  .rows--plain .row-body{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr;gap:clamp(40px,6vw,60px)}
  .svc-grid{grid-template-columns:1fr}
  .cta-split{grid-template-columns:1fr;gap:clamp(30px,5vw,48px)}
  .cta-rule{display:none}
  .split--tight .split-lede .lede{max-width:44ch}
}
@media (max-width:900px){
  .nav{
    position:fixed;inset:var(--head-h) 0 auto;background:var(--paper);color:var(--ink);
    flex-direction:column;align-items:center;gap:0;
    padding:12px var(--gut) 30px;border-bottom:1px solid var(--hair);
    display:none;
  }
  .nav.is-open{display:flex}
  .nav a{padding:15px 0;font-size:18px;width:100%;text-align:center}
  .nav > .btn{display:flex;justify-content:center;margin-top:18px;padding:18px 24px}
  .burger{display:block}
  .head-in .btn.desktop-cta{display:none}
  .pair,.contact-cols{grid-template-columns:1fr}
  .pair--rev > *:first-child{order:0}
  .expand{height:190vh}
  .expand-frame{width:calc(76vw + 24vw * var(--p,0))}
  .cta-title{position:static}
}
@media (max-width:640px){
  .grid{grid-template-columns:1fr}
  .card .frame,.card:nth-child(even) .frame{aspect-ratio:5/4}
  .stats{grid-template-columns:1fr 1fr}
  .stat:nth-child(2){border-right:0}
  .stat:nth-child(odd){padding-left:0}
  .stat:nth-child(3),.stat:nth-child(4){border-top:1px solid var(--hair);margin-top:26px}
  .foot-nav{grid-template-columns:1fr;gap:34px}
  .clients{grid-template-columns:repeat(2,1fr)}
  .marquee{flex-direction:column;align-items:center;gap:8px}
  .hero-scroll{display:none}

  /* below 640 the CTA band and footer centre rather than sitting ragged left */
  .cta-title .cr{justify-content:center;max-width:none;text-align:center}
  .cta-bottom{justify-content:center;align-items:center;text-align:center}
  .cta-bottom p{max-width:none}
  .foot-top{justify-items:center;text-align:center}
  .foot-cta{align-items:center}
  .foot-cta .h2{max-width:none}
  .foot-row{justify-content:center}
  .socials{justify-content:center}
  .foot-nav{justify-items:center;text-align:center}
  .foot-nav ul{justify-items:center}
  .foot-bar{justify-content:center;text-align:center}
  /* Isidore flips the card to a column below 810: text, then image */
  .svc-card{flex-direction:column;align-items:stretch;min-height:0}
  .svc-card-text{order:1;flex:none;padding:24px 12px}
  /* same 281:320 crop as the desktop card, sized off its own width */
  .svc-card-img{order:2;flex:none;min-height:0;aspect-ratio:281/320}
  .hero--split .hero-in .display{max-width:none}
}

/* ============================================================
   REDUCED MOTION — everything resolves to its end state
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .wr-i{transform:none}
  .cr-l{opacity:1}
  .cr-g{display:none}
  .rise{opacity:1;transform:none}
  .par > img,.expand-frame img,.hero-bg img{transform:none}
  .load{display:none}
  .expand{height:auto;margin-top:clamp(48px,6vw,90px)}
  .expand-sticky{position:static;height:auto;display:block}
  .expand-frame{width:100%;border-radius:0}
  .expand-cap{opacity:1}
}