/* ============================================================
   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}

/* ============================================================
   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}
.mark img{height:clamp(26px,2.4vw,34px);width:auto}
.site-head .mark .rev{display:none}
.site-head.on-dark .mark .std{display:none}
.site-head.on-dark .mark .rev{display:block}
.mark--rev img{height:46px}

.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;height:1.2em;overflow:hidden}
.nm-i{display:flex;flex-direction:column;transition:transform .6s var(--ease)}
.nm-i em{font-style:normal;display:block;height:1.2em;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card:hover .nm-i{transform:translateY(-1.2em)}
.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}
  .card:hover .nm-i{transform: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}
}