/* ============================================================================
   ICON Commercial Experts — iconcrex.com
   Palette + type derived from their logo lockup (chrome ICON / electric-blue
   CREX swoosh on a navy glass tower). See _design-contract.md.
   ========================================================================== */

/* ── Type (self-hosted, latin subset, variable — one file per family) ─────*/
@font-face{
  font-family:'Archivo';
  src:url('/assets/fonts/archivo-latin-var.woff2') format('woff2-variations'),
      url('/assets/fonts/archivo-latin-var.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter';
  src:url('/assets/fonts/inter-latin-var.woff2') format('woff2-variations'),
      url('/assets/fonts/inter-latin-var.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ── Tokens ──────────────────────────────────────────────────────────────*/
:root{
  --ink:#071330;          /* page ground */
  --panel:#0B1A3A;        /* raised navy panel */
  --panel-2:#0F2450;
  --blue:#1E6FFF;
  --blue-2:#4DA3FF;
  --blue-3:#7CC0FF;
  /* Same accent, deepened for type on paper/white. #1E6FFF only reaches 4.1:1
     on --paper and #4DA3FF only 2.6:1 on white; this clears AA (5.9:1 / 6.4:1). */
  --blue-ink:#1257D1;
  --chrome:#E6EDF7;       /* display text on dark */
  --mist:#9FB0CC;         /* body on dark */
  --white:#fff;
  --paper:#F4F7FC;        /* light sections */
  --paper-2:#E7EDF7;
  --navy-text:#0A1A3C;    /* body on paper */
  --navy-dim:#4A5C7E;
  --line:rgba(255,255,255,.10);
  --line-dark:rgba(10,26,60,.14);
  --r:14px;
  --pad:clamp(20px,5vw,64px);
  --sec:clamp(68px,10vw,138px);
  --maxw:1280px;
  --ease:cubic-bezier(.16,1,.3,1);
  /* Picture-to-picture dissolves — every image entrance and every chapter swap
     rides this one curve so nothing on the site ever hard-cuts. */
  --ease-img:cubic-bezier(.2,.7,.2,1);
  /* The measured header height. site.js overwrites --hdr-h with the real
     offsetHeight on load and on resize; 84px is the tallest it gets before
     the fonts land, so the fallback errs on the side of clearing the nav. */
  --nav-h:var(--hdr-h,84px);
}

/* ── Reset / base ────────────────────────────────────────────────────────*/
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--ink);color:var(--mist);
  font:400 17px/1.65 Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg,video,picture{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3,h4{
  font-family:Archivo,"Arial Narrow",system-ui,sans-serif;
  font-weight:800;letter-spacing:-.03em;line-height:1.02;
  color:var(--chrome);margin:0 0 .5em;text-wrap:balance;
}
h1{font-size:clamp(2.7rem,6.4vw,6rem)}
h2{font-size:clamp(2rem,4.4vw,3.9rem)}
h3{font-size:clamp(1.25rem,2vw,1.7rem);font-weight:700}
/* For headings that must be an h2 for document structure but should read at h3
   scale (legal pages, where every section sits directly under the h1). */
.h3{font-size:clamp(1.25rem,2vw,1.7rem);font-weight:700}
p{margin:0 0 1.1em}
/* A trailing paragraph margin inside a container stacks on top of that
   container's own padding — under the "See all 12 offerings" button it added a
   third bar of empty paper on top of the section's 138px floor, so the section
   read as if it had run out rather than ended. */
p:last-child{margin-bottom:0}
.fig{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
/* --blue behind white text is only 4.4:1; --blue-ink clears AA at 6.4:1. */
.skip{position:absolute;left:-9999px;top:0;background:var(--blue-ink);color:#fff;padding:12px 18px;z-index:999}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--blue-2);outline-offset:3px;border-radius:3px}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.sec{padding-block:var(--sec)}
/* A full section's worth of padding directly under the sticky header reads as
   a void rather than as breathing room. */
main>.sec:first-child{padding-top:clamp(36px,6vw,80px)}
.marquee+.sec,.pagehero+.sec{padding-top:clamp(48px,7vw,104px)}
.paper{background:var(--paper);color:var(--navy-text)}
.paper h1,.paper h2,.paper h3{color:var(--navy-text)}
.paper .eyebrow{color:var(--blue-ink)}
.lede{font-size:clamp(1.05rem,1.5vw,1.35rem);line-height:1.6;max-width:60ch}
.paper .lede{color:#33456A}

/* ── Section furniture ───────────────────────────────────────────────────*/
.eyebrow{
  font-family:Archivo,sans-serif;font-weight:700;font-size:.78rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--blue-2);
  /* Baseline-ish, not centred: the kicker sits down at the numeral's foot the
     way a magazine folio does, instead of floating at its middle. */
  display:flex;align-items:flex-end;gap:.9em;margin:0 0 1.15em;
}
/* The outlined section numeral. `-webkit-text-stroke:…currentColor` resolved
   against this element's OWN colour — which is transparent — so the stroke was
   painted transparent and the numeral rendered as a 61px invisible indent on
   every section, sitewide. The stroke colour has to be stated outright. */
/* The contract calls these "magazine section numerals … at 120px, bleeding off
   the left margin". They shipped at a 70px cap, vertically centred and tucked
   fully inside the column, which made them read as decoration rather than as
   the signature device they were specified to be. Sized up to a real display
   figure and given a hanging indent so the numeral breaks the left edge of the
   text column while the kicker and the h2 below it stay aligned to it. */
.eyebrow__n{
  font-size:clamp(3.6rem,7.2vw,7.5rem);line-height:.74;letter-spacing:-.055em;
  color:transparent;-webkit-text-stroke:2px var(--blue-2);
  opacity:.5;margin-block:-.04em;
}
.paper .eyebrow__n{-webkit-text-stroke-color:var(--blue-ink);opacity:.42}
/* The hang only exists where there is gutter to hang into. Below this the
   numeral stays inside the column — body has overflow-x:hidden, so a bleed on a
   phone would be silently amputated rather than elegant. */
@media (min-width:1120px){
  .eyebrow{margin-left:-.5ch}
  .eyebrow__n{margin-left:-.07em}
}
/* Centred sections (the closing CTA panel) must not inherit the hanging indent
   or the numeral drags the whole row off-centre. */
.ctaband__panel .eyebrow{margin-left:0;justify-content:center}
.swoosh{width:100%;height:24px;opacity:.9}
.swoosh svg{width:100%;height:24px}
.hair{height:1px;background:var(--line);border:0;margin:0}
.paper .hair{background:var(--line-dark)}

/* ── Buttons ─────────────────────────────────────────────────────────────*/
.btn{
  --bg:transparent;--fg:var(--chrome);--bd:var(--line);
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  padding:16px 28px;border:1px solid var(--bd);background:var(--bg);color:var(--fg);
  font-family:Archivo,sans-serif;font-weight:700;font-size:.95rem;letter-spacing:-.01em;
  border-radius:999px;text-decoration:none;cursor:pointer;position:relative;
  transition:transform .5s var(--ease),background .25s,border-color .25s,box-shadow .35s;
  will-change:transform;
}
.btn--primary{--bg:linear-gradient(100deg,var(--blue),var(--blue-2));--fg:#fff;--bd:transparent;
  box-shadow:0 8px 30px -10px rgba(30,111,255,.75)}
.btn--primary:hover{box-shadow:0 14px 44px -10px rgba(30,111,255,.95)}
.btn--ghost:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.3)}
/* A 14%-alpha navy hairline on #F4F7FC is a 1.4:1 edge — the "See all 12
   offerings" pill was effectively a floating label with no visible button on
   it. Give it a real border and a white ground so it reads as an affordance. */
.paper .btn--ghost{--fg:var(--navy-text);--bd:rgba(10,26,60,.28);--bg:var(--white)}
/* border-color, not just --bd: the dark-ground `.btn--ghost:hover` above sets
   border-color to white .3 as a longhand, which would win over `var(--bd)` and
   leave the hovered pill borderless on paper. */
.paper .btn--ghost:hover{background:var(--white);border-color:var(--blue-ink);
  box-shadow:0 6px 20px -8px rgba(10,26,60,.28)}
.btn--sm{padding:11px 20px;font-size:.86rem}
.btn[disabled],.btn[aria-busy=true]{opacity:.55;pointer-events:none}

/* ── Header ──────────────────────────────────────────────────────────────*/
/* z-index 80 puts the header ABOVE the drawer (70), which is the second half of
   why the drawer used to jam: the burger sat underneath the overlay, so the tap
   meant to close it landed on the drawer instead and nothing happened. The
   burger is now always reachable and is the X. (The first half was the drawer
   being nested inside this backdrop-filtered element — see layout.mjs.) */
.hdr{position:sticky;top:0;z-index:80;transition:background .35s,border-color .35s,backdrop-filter .35s;
  border-bottom:1px solid transparent}
/* Scroll lock lives here, not in an inline style JS has to remember to undo. */
.nav-open,.nav-open body{overflow:hidden}
/* The header carries the drawer's own ground while it is open, so the logo and
   the phone button stay legible against it rather than floating on the blur. */
.nav-open .hdr{background:rgba(7,19,48,.98);border-bottom-color:var(--line)}
.hdr.is-stuck{background:rgba(7,19,48,.86);backdrop-filter:blur(18px) saturate(140%);border-bottom-color:var(--line)}
.hdr__in{max-width:1440px;margin-inline:auto;padding:14px var(--pad);
  display:flex;align-items:center;gap:24px}
.hdr.is-stuck .hdr__in{padding-block:9px}
.hdr__nav{display:flex;gap:26px;margin-left:auto;font-size:.92rem;font-weight:500}
.hdr__nav a{text-decoration:none;color:var(--mist);position:relative;padding:6px 0;transition:color .2s}
.hdr__nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:linear-gradient(90deg,var(--blue),var(--blue-3));transition:right .35s var(--ease)}
.hdr__nav a:hover,.hdr__nav a[aria-current]{color:var(--white)}
.hdr__nav a:hover::after,.hdr__nav a[aria-current]::after{right:0}
.hdr__act{display:flex;align-items:center;gap:14px}
.hdr__tel{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--chrome);
  font-family:Archivo,sans-serif;font-weight:700;font-size:.92rem;white-space:nowrap}
.hdr__tel svg{width:17px;height:17px;color:var(--blue-2);flex:none}
.hdr__tel:hover{color:var(--blue-2)}
/* align-content:center is load-bearing, not cosmetic. The burger is a grid, and
   implicit auto rows STRETCH to fill the 44px box, so each 2px bar was centred
   inside its own ~21px row and the two bars sat 16.5px apart — measured, not
   guessed. The ±3.5px cross below is calculated off the 7px the markup actually
   asks for (2px bar + 5px gap), so with stretched rows the bars rotated in place
   without ever meeting and the "close" affordance rendered as a ">" instead of
   an X. Packing the rows to their content size makes that 7px real. */
.burger{display:none;width:44px;height:44px;border:1px solid var(--line);background:none;border-radius:10px;
  padding:0;place-items:center;align-content:center;cursor:pointer}
.burger span{display:block;width:18px;height:2px;background:var(--chrome);transition:transform .3s var(--ease),opacity .2s}
.burger span+span{margin-top:5px}
.burger[aria-expanded=true] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.burger[aria-expanded=true] span+span{transform:translateY(-3.5px) rotate(-45deg)}

/* Logo */
.logo{display:inline-flex;align-items:center;gap:12px;text-decoration:none;flex:none}
.logo__mark{display:block;width:34px}
.mark{width:100%;height:auto}
.logo__type{display:flex;flex-direction:column;line-height:1}
.logo__icon{
  font-family:Archivo,sans-serif;font-weight:800;font-size:1.32rem;letter-spacing:.16em;
  background:linear-gradient(180deg,#fff 0%,#dbe5f4 42%,#8fa2bd 56%,#f2f6fc 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.logo__rule{display:block;height:1px;background:linear-gradient(90deg,#fff,rgba(255,255,255,.15));margin:2px 0 1px}
.logo__crex{position:relative;font-family:Archivo,sans-serif;font-weight:700;font-size:.7rem;
  letter-spacing:.42em;background:linear-gradient(90deg,var(--blue),var(--blue-3));
  -webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:5px}
.logo__swoosh{position:absolute;left:0;right:-6%;bottom:-1px;width:106%;height:7px}
.logo--mono .logo__icon{background:none;color:var(--chrome)}
.logo--mono .logo__crex{background:none;color:var(--blue-2)}

/* Drawer */
/* ONE class on <html> is the entire open/closed state machine. Closed is the
   resting state declared right here, so the drawer is correct before a single
   line of JS runs and after every close path — no `hidden` attribute to get out
   of sync, no transitionend callback that can be missed mid-transition, and no
   inline opacity/pointer-events for JS to leave behind. That combination is
   exactly what left the drawer stranded half-visible over the hero. */
.drawer{position:fixed;inset:0;background:rgba(7,19,48,.98);backdrop-filter:blur(10px);
  z-index:70;padding:96px var(--pad) var(--pad);display:flex;flex-direction:column;gap:28px;
  overflow-y:auto;
  visibility:hidden;opacity:0;pointer-events:none;
  transition:opacity .26s var(--ease),visibility 0s linear .26s}
.nav-open .drawer{visibility:visible;opacity:1;pointer-events:auto;
  transition:opacity .26s var(--ease),visibility 0s}
/* An explicit X in the drawer's top-right corner — the header burger morphs into an X too,
   but on a phone the header can be scrolled/covered, so the drawer carries its own close
   (Aiden 2026-09-02: "add an x on the drop down page on the mobile view"). */
.drawer__close{position:absolute;top:calc(14px + env(safe-area-inset-top));right:16px;width:48px;height:48px;
  border:1px solid rgba(230,237,247,.35);border-radius:12px;background:rgba(7,19,48,.6);color:var(--chrome);
  font-size:30px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2}
.drawer__close:active{background:rgba(124,192,255,.18)}
.drawer__nav{display:flex;flex-direction:column;gap:2px;margin-top:64px}
.drawer__nav a{font-family:Archivo,sans-serif;font-weight:700;font-size:clamp(1.6rem,7vw,2.4rem);
  color:var(--chrome);text-decoration:none;padding:14px 0;border-bottom:1px solid var(--line)}
.drawer__nav a[aria-current]{color:var(--blue-2)}
.drawer__foot{display:grid;gap:12px;margin-top:auto}

/* ── HERO — scroll-scrubbed drone film ───────────────────────────────────*/
/* 7.79s of film over 520vh of scroll ≈ 67vh per film second — smooth without
   burying the CTAs, which are visible in chapter 01 before any scrolling. */
/* The header is sticky and in flow, so at rest the 100vh stage starts BELOW it
   and its last 76px — the trust line with the 5.0★ attribution — sits under the
   fold. Pull the hero up behind the header and pad the copy back down: the
   stage then measures exactly one viewport both at rest and once pinned. */
.hero{position:relative;background:#03081a;height:520vh;margin-top:calc(-1 * var(--hdr-h,76px))}
/* vh (not svh) on desktop: svh can resolve taller than the visual viewport and
   push the CTAs below the fold. svh is reserved for mobile, where iOS toolbars
   are the real problem — see the mobile block below. */
.hero__stage{position:sticky;top:0;height:100vh;overflow:hidden}
.hero__film{position:absolute;inset:0;overflow:hidden;background:#03081a}
/* The poster <picture> and the <video> occupy the SAME box — as ordinary block
   children they would stack vertically and push the film out of frame. The
   video is last in the DOM, so it paints over the still once it has frames and
   is simply transparent before that. */
.hero__film .hero__poster,.hero__film video,.hero__film img{
  position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
/* A <video> with no decoded frames yet paints OPAQUE BLACK, not transparent —
   so at scroll 0 it covered the poster and the hero sat as a solid navy box for
   the first seconds of every visit. It starts invisible and site.js fades it in
   only once it actually has frames (loadeddata on desktop, playing on the
   mobile loop). The poster is therefore always what paints first. */
.hero__film video{opacity:0;transition:opacity .45s var(--ease)}
.hero__film video.is-live{opacity:1}
/* The grade is what lets white display type sit on a moving daylight aerial.
   The old radial was anchored at 18%/88% — bottom-left — and faded out by 62%,
   so it covered the buttons but NOT the top two lines of the h1, which land at
   roughly 42% height and were reading over bright rooftops and treetops with
   only a soft text-shadow holding them up. The copy column occupies the left
   ~58% at every scroll position, so that column gets its own scrim and the right
   half of the frame stays clean film. */
.hero__grade{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(100deg,rgba(7,19,48,.88) 0%,rgba(7,19,48,.72) 26%,rgba(7,19,48,.34) 48%,rgba(7,19,48,0) 72%),
    linear-gradient(180deg,rgba(7,19,48,.72) 0%,rgba(7,19,48,.12) 26%,rgba(7,19,48,.20) 52%,rgba(7,19,48,.88) 88%),
    radial-gradient(120% 80% at 18% 88%,rgba(7,19,48,.85),transparent 62%)}
/* The copy sits against the bottom of the stage, but never above the guard:
   padding-top is the nav plus 24px, so the h1 can only ever start BELOW the
   fixed header. Everything between is elastic (.hero__top) and gives way. */
.hero__in{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
  max-width:1440px;margin-inline:auto;
  padding:calc(var(--nav-h) + 24px) var(--pad) clamp(28px,6vh,64px)}
.hero__top{flex:1 1 auto;min-height:0}
/* A GRID stack, not absolute positioning. The four chapters share one cell and
   are all in flow, so the block measures the TALLEST of them and can never
   overflow upward past .hero__in's top padding — which is what used to let the
   h1 climb under the nav. min-height is now only a floor. */
.hero__chapters{position:relative;flex:0 1 auto;min-height:clamp(300px,42vh,440px);
  display:grid;grid-template-columns:minmax(0,1fr);align-items:end}
/* Chapters cross-dissolve in that shared cell over 600ms, with a 1.03→1.00
   settle, so a swap reads as a dissolve rather than the old 300ms snap. */
.hero__ch{grid-area:1/1;align-self:end;opacity:0;visibility:hidden;
  transform:translateY(14px) scale(1.03);transform-origin:0 100%;
  transition:opacity .6s var(--ease-img),transform .9s var(--ease-img),visibility 0s linear .6s;
  /* 62ch measured 665px here and left the 689px proof line wrapping onto two
     rows; 68ch clears it with margin. 58vw is the hard cap — the copy never
     crosses the middle of the frame, so the film always reads behind it. */
  pointer-events:none;max-width:min(68ch,58vw)}
.hero__ch.is-on{opacity:1;visibility:visible;transform:none;pointer-events:auto;
  transition:opacity .6s var(--ease-img),transform .9s var(--ease-img),visibility 0s}
.hero__ch h1,.hero__ch h2{margin:0 0 .38em;text-shadow:0 4px 40px rgba(0,0,0,.55);
  font-size:clamp(2.6rem,5.6vw,5.4rem);line-height:.95;max-width:15ch}
/* The h1 is the longest line on the site; 13ch keeps it to three tight lines
   and the clamp above keeps it inside the viewport at every width. */
.hero__ch h1{max-width:13ch}
.hero__ch p{color:var(--chrome);max-width:44ch;font-size:clamp(1rem,1.35vw,1.22rem);margin:0}
.hero__act{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
/* `.hero__ch p` (0,1,1) outranked the old `.hero__proof` (0,1,0), so the trust
   line rendered at the paragraph's 19px and wrapped onto two rows. Matching the
   specificity puts it back on one line at its intended size. */
.hero__ch p.hero__proof{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:16px 0 0;
  font-size:.82rem;color:var(--mist);letter-spacing:.01em;max-width:none}
.hero__proof b{color:var(--chrome);font-weight:600}
.hero__proof .dot{width:4px;height:4px;border-radius:50%;background:var(--blue-2);flex:none}
/* ── "On screen — our listing" plate ─────────────────────────────────────
   The one element that stops the hero being interchangeable. It names the
   footage as a specific ICON listing and puts a price and a corner in the first
   screenful. Glass is legitimate here per the contract: it sits over moving
   film, never over flat colour. Right-anchored so it lands in the clean half of
   the frame the grade deliberately leaves alone, and inset past the scroll rail
   so the two never collide. */
.hero__now{
  position:absolute;right:calc(var(--pad) + 52px);bottom:clamp(28px,6vh,64px);
  z-index:2;width:min(340px,32vw);display:flex;flex-direction:column;gap:9px;
  padding:16px 18px;border-radius:var(--r);text-decoration:none;
  border:1px solid rgba(255,255,255,.16);background:rgba(7,19,48,.42);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:border-color .3s var(--ease),transform .5s var(--ease),background .3s var(--ease);
}
.hero__now:hover{border-color:rgba(124,192,255,.5);background:rgba(7,19,48,.58);transform:translateY(-3px)}
.hero__now__k{display:flex;align-items:center;gap:8px;font-family:Archivo,sans-serif;
  font-weight:700;font-size:.63rem;letter-spacing:.2em;text-transform:uppercase;color:var(--blue-3)}
.hero__now__a{font-family:Archivo,sans-serif;font-weight:700;font-size:.97rem;
  line-height:1.25;letter-spacing:-.01em;color:var(--chrome)}
/* The three figures are the same tabular-nums treatment as a card's number
   strip, at plate scale — one visual language for "a number from our book". */
.hero__now__f{display:flex;gap:16px;flex-wrap:wrap;padding-top:9px;
  border-top:1px solid rgba(255,255,255,.14)}
.hero__now__f span{display:flex;flex-direction:column;gap:1px}
.hero__now__f b{font-family:Archivo,sans-serif;font-weight:800;font-size:1.02rem;
  letter-spacing:-.02em;color:var(--white);line-height:1.1}
.hero__now__f i{font-style:normal;font-size:.6rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mist)}
.hero__now__go{font-size:.78rem;font-weight:600;color:var(--blue-3)}
/* `.live` is only ever styled inside `.ticker__date`, so the hero dot declares
   its own. It shares the ticker's mint and its `pulse` keyframe deliberately —
   one "this is live" signal, used in two places — but honours reduced motion,
   which the ticker's copy does not. */
.hero__now__k .live{width:7px;height:7px;border-radius:50%;background:#8CF2C0;flex:none;
  box-shadow:0 0 0 0 rgba(140,242,192,.6)}
@media (prefers-reduced-motion:no-preference){
  .hero__now__k .live{animation:pulse 2.4s infinite}
}

.hero__scroll{position:absolute;right:var(--pad);bottom:clamp(28px,6vh,64px);
  writing-mode:vertical-rl;font-family:Archivo,sans-serif;font-weight:700;font-size:.7rem;
  letter-spacing:.3em;text-transform:uppercase;color:var(--mist);display:flex;align-items:center;gap:12px}
.hero__scroll::after{content:"";width:1px;height:64px;background:linear-gradient(180deg,var(--blue-2),transparent)}
.hero__bar{position:absolute;left:0;bottom:0;height:2px;width:100%;background:rgba(255,255,255,.10)}
.hero__bar i{display:block;height:100%;width:calc(var(--p,0)*100%);
  background:linear-gradient(90deg,var(--blue),var(--blue-3))}
@media (max-width:860px){
  /* PHONE HERO = Dominick's Market / Hometown pattern (Aiden 2026-09-02): the aerial is a
     clean photo band on top, and ALL the copy sits BELOW it on solid navy. Nothing is
     laid over the picture, so the photo reads and the type is never fighting daylight. */
  .hero{height:auto;min-height:0;margin-top:0;background:#03081a}
  .hero__stage{position:relative;height:auto;min-height:0;display:block;top:auto}
  .hero__film{position:relative;inset:auto;width:100%;aspect-ratio:4/3;max-height:58svh;overflow:hidden}
  .hero__film::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(180deg,rgba(3,8,26,0) 62%,rgba(3,8,26,.55) 84%,#03081a 100%)}
  .hero__grade{display:none}
  .hero__in{position:relative;inset:auto;width:100%;display:block;
    padding:22px var(--pad) calc(84px + env(safe-area-inset-bottom));background:#03081a}
  .hero__top{display:none}
  .hero__scroll{display:none}
  .hero__chapters{min-height:0;display:block}
  .hero__ch{position:relative;opacity:1;visibility:visible;transform:none;max-width:100%}
  .hero__ch+.hero__ch{display:none}
  .hero__ch h1,.hero__ch h2{font-size:clamp(2rem,8.6vw,2.7rem);max-width:100%;line-height:1;text-shadow:none}
  .hero__ch p{font-size:1rem;line-height:1.55;max-width:38ch}
  .hero__act{display:grid;grid-template-columns:1fr;gap:10px;margin-top:20px} /* stacked: long labels overflowed a 2-col grid (Aiden 2026-09-02) */
  .hero__act .btn{width:100%;padding:15px 12px;font-size:.9rem;white-space:nowrap}
  .hero__act .btn--ghost{background:none;border-color:rgba(230,237,247,.28)}
}
@media (max-width:400px){
  .hero__now__f span:last-child{display:none}
}
/* Copy is full-width here, not a left column, so the scrim has to be
   bottom-weighted rather than left-weighted or the right edge of every line
   falls off the scrim onto bare daylight.
   The old version opened at .66 alpha across the TOP of the frame and never
   dropped below .14 — on a phone that buried the aerial entirely and the hero
   read as a flat navy panel with type on it. The picture now runs clean through
   the top 40% and the navy only arrives under the copy. 900px, not 860: this is
   about the phone grade, and it should not leave a 40px band of tablet widths
   on the desktop treatment. */
@media (max-width:900px){
  .hero__grade{display:none;background:linear-gradient(180deg,
    rgba(7,19,48,0) 0%,
    rgba(7,19,48,0) 40%,
    rgba(7,19,48,.34) 55%,
    rgba(7,19,48,.68) 68%,
    rgba(7,19,48,.85) 80%,
    rgba(7,19,48,.93) 100%)}
}
/* 320px (SE-class): the copy is the same height but the screen is not, so the
   trust line lands under the sticky CTA bar. Buy the room back off the top. */
@media (max-width:400px){
  .hero__in{padding-top:calc(var(--nav-h) + 16px)}
  .hero__ch p.hero__proof{font-size:.78rem;gap:4px 10px}
}

/* ── Proof strip — glass panels over drifting grid ───────────────────────*/
.proof{position:relative;overflow:hidden;background:var(--panel)}
.proof__bg{position:absolute;inset:-12% 0;background-size:cover;background-position:center;
  opacity:.30;transform:translateY(calc(var(--p,0)*-9%));will-change:transform}
.proof__in{position:relative}
.proof__grid{display:grid;gap:16px;grid-template-columns:repeat(3,1fr);margin-top:44px}
/* These cards are anchors, so the default underline would otherwise paint
   under every line inside them — kill it here, not on the children, because
   text-decoration is inherited by painting, not by computed style. */
.glass{display:block;text-decoration:none;color:inherit;
  background:rgba(255,255,255,.055);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(22px,3vw,34px);backdrop-filter:blur(14px);
  transform:translateY(28px);opacity:0;transition:opacity .6s var(--ease),transform .7s var(--ease),
    border-color .25s var(--ease),background .25s var(--ease)}
.js .glass[data-in],.no-js .glass{opacity:1;transform:none}
a.glass:hover,a.glass:focus-visible{background:rgba(255,255,255,.09);border-color:var(--blue-2)}
.glass__n{font-family:Archivo,sans-serif;font-weight:800;color:var(--white);
  font-size:clamp(2.2rem,4vw,3.4rem);letter-spacing:-.04em;line-height:1;margin:0 0 .2em}
.glass__l{font-size:.95rem;color:var(--mist);margin:0}
.glass__t{font-family:Archivo,sans-serif;font-weight:700;font-size:.74rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--blue-2);margin:0 0 1em}
@media (max-width:820px){.proof__grid{grid-template-columns:1fr}}

/* ── Marquee ─────────────────────────────────────────────────────────────*/
.marquee{overflow:hidden;border-block:1px solid var(--line);padding:16px 0;background:rgba(255,255,255,.02)}
.paper .marquee{border-color:var(--line-dark);background:rgba(10,26,60,.03)}
.marquee__track{display:flex;gap:26px;width:max-content;animation:mq 46s linear infinite;
  font-family:Archivo,sans-serif;font-weight:700;font-size:.9rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--chrome);white-space:nowrap}
.paper .marquee__track{color:var(--navy-text)}
.marquee__track i{color:var(--blue-2);font-style:normal}
@keyframes mq{to{transform:translateX(-33.333%)}}

/* ── Cards / offerings grid ──────────────────────────────────────────────*/
.grid{display:grid;gap:20px;grid-template-columns:repeat(3,1fr)}
@media (max-width:1040px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:660px){.grid{grid-template-columns:1fr}}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  transition:transform .55s var(--ease),border-color .3s,box-shadow .45s;transform-style:preserve-3d}
.paper .card{background:var(--white);border-color:var(--line-dark);box-shadow:0 1px 2px rgba(10,26,60,.05)}
.card:hover{border-color:rgba(77,163,255,.5);box-shadow:0 26px 60px -28px rgba(0,0,0,.75)}
/* Column layout so the "Request the OM" line sits on the same baseline in every
   card — the type strips wrap to different heights, so a plain block leaves the
   bottom of the row ragged. */
.card__link{display:flex;flex-direction:column;text-decoration:none;color:inherit;height:100%}
.card__body{flex:1;display:flex;flex-direction:column}
.card__cta{margin-top:auto}
.card__media{position:relative;overflow:hidden;aspect-ratio:3/2;background:var(--panel-2)}
.card__media .pic,.card__media .plate{height:100%}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.card:hover .card__media img{transform:scale(1.05)}
.card__body{padding:22px}
.card__meta{font-family:Archivo,sans-serif;font-weight:700;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--blue-2);margin:0 0 .7em}
.paper .card__meta{color:var(--blue-ink)}
.card__title{font-size:1.22rem;margin:0 0 16px;line-height:1.18}
.paper .card__title{color:var(--navy-text)}
.card__sum{font-size:.94rem;line-height:1.55;margin:14px 0 18px;color:var(--mist)}
.paper .card__sum{color:var(--navy-dim)}
.card__cta{display:inline-flex;align-items:center;gap:10px;font-family:Archivo,sans-serif;
  font-weight:700;font-size:.9rem;color:var(--blue-2)}
.paper .card__cta{color:var(--blue-ink)}
.card__cta svg{width:22px;height:11px;transition:transform .4s var(--ease)}
.card:hover .card__cta svg{transform:translateX(6px)}
.chip--status{position:absolute;top:12px;left:12px;z-index:2}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border-radius:999px;
  font-family:Archivo,sans-serif;font-weight:700;font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;background:rgba(7,19,48,.82);color:var(--chrome);
  border:1px solid var(--line);backdrop-filter:blur(8px)}
.chip--available{color:#8CF2C0;border-color:rgba(140,242,192,.4)}
.chip--under-contract{color:#FFD37A;border-color:rgba(255,211,122,.4)}
.chip--sold{color:var(--mist)}

/* number strip
   The whole point of this strip (design contract, "Type") is that figures align
   down a column like an offering memorandum. Independent cells broke that: a
   two-line label such as "PRO FORMA NOI" pushed its own value down a row while
   "PRICE" and "CAP RATE" stayed put, so the three numbers in a card — and the
   numbers across the three cards in a row — landed on three different baselines.
   Subgrid puts every label on one shared row and every value on the next, so the
   figures line up no matter how long the label is. Row-gap must be 0: the 2px gap
   is what paints the hairlines, and a row gap would draw a line THROUGH each
   cell between its label and its value. */
.figrow{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:auto auto;
  column-gap:2px;row-gap:0;margin:0;
  border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--line)}
.paper .figrow{border-color:var(--line-dark);background:var(--line-dark)}
.figrow__cell{grid-row:span 2;display:grid;grid-template-rows:subgrid;align-content:start;
  background:var(--panel);padding:12px 10px;text-align:left}
@supports not (grid-template-rows:subgrid){
  /* Older engines: reserve two lines for every label so the values still agree. */
  .figrow__cell{display:block}
  .figrow dt{min-height:2.5em}
}
.paper .figrow__cell{background:var(--white)}
.figrow dt{font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:var(--mist);
  margin:0 0 3px;line-height:1.25;text-wrap:balance}
.figrow dd{margin:0;font-family:Archivo,sans-serif;font-weight:800;font-size:1.06rem;
  letter-spacing:-.02em;color:var(--white);align-self:end;white-space:nowrap}
.paper .figrow dd{color:var(--navy-text)}
.paper .figrow dt{color:var(--navy-dim)}
/* Equal thirds only work while every value fits a third. Once the card narrows,
   they stop: "$40/SF NNN" needs more than a third of a 289px card, and because
   the strip clips its overflow to paint the rounded corners, the third figure
   was simply sliced off — "30,000 VPD" rendered as "30,000 V". Measured at
   320px, 8 of the 12 offerings lost a number that way.
   Below the desktop grid the tracks size to their content instead and share out
   what is left over, so a long value takes the room a short one does not need.
   Desktop keeps 1fr, where there is space to spare and equal thirds also line
   the hairlines up across the three cards in a row. */
@media (max-width:1024px){
  .figrow{grid-template-columns:repeat(3,auto)}
  .figrow__cell{padding:12px 8px}
}
/* The 2-column band is the tightest the strip ever gets relative to its card —
   a ~340px card still carrying three full-length figures — so it needs the type
   to come down a notch as well as the tracks to go auto. */
@media (max-width:900px){
  .figrow__cell{padding:12px 7px}
  .figrow dd{font-size:.99rem}
}
/* SE-class. Three figures like "$40/SF NNN · 7,700 SF · 30,000 VPD" cannot be
   kept on one line each inside a 234px strip at any type size that is still
   worth reading, so this is the width where nowrap is given up: the value wraps
   at its space instead. Subgrid still holds every label on one row and every
   value on the next, so the strip stays a strip — it just runs to two lines in
   the cells that need it. Wrapping a number is survivable; deleting the right
   third of it, which is what the clip did, is not. */
@media (max-width:400px){
  .figrow__cell{padding:11px 6px}
  .figrow dd{font-size:.94rem;white-space:normal}
  .figrow dt{font-size:.63rem;letter-spacing:.06em}
}

/* Sealed / pending plates — the honest alternative to a stock photo */
.plate{position:relative;display:grid;place-items:center;aspect-ratio:3/2;overflow:hidden;
  background:linear-gradient(160deg,#0C1D42,#071330 70%)}
.plate__grid{position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:34px 34px;mask-image:radial-gradient(70% 60% at 50% 45%,#000,transparent)}
.plate__body{position:relative;text-align:center;padding:20px}
.plate__mark{width:46px;margin:0 auto 14px;opacity:.85}
.plate__kicker{font-family:Archivo,sans-serif;font-weight:700;font-size:.7rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--blue-2);margin:0 0 .6em}
.plate__line{font-family:Archivo,sans-serif;font-weight:700;font-size:1.02rem;line-height:1.35;
  color:var(--chrome);margin:0;letter-spacing:-.01em}
.plate--sealed .plate__kicker{color:#FFD37A}

/* The honesty label stays on every representative image — but as a caption, not
   as a solid slab across the bottom third of the picture. It reads over a scrim
   that fades into the image instead of cutting it off with a hairline. */
.repbadge{position:absolute;left:0;right:0;bottom:0;margin:0;
  padding:26px clamp(12px,2vw,16px) 10px;font-size:.62rem;
  line-height:1.35;letter-spacing:.04em;color:rgba(255,255,255,.72);
  background:linear-gradient(to top,rgba(7,19,48,.88) 32%,rgba(7,19,48,0));
  text-wrap:balance}
.repbadge--real{color:rgba(124,192,255,.92)}
.listing-media{position:relative;height:100%}
.listing-media .pic{height:100%}
.pic{display:block;overflow:hidden}
.pic img{width:100%;height:100%;object-fit:cover}
/* No image on the site hard-cuts in. Each one dissolves over 800ms and settles
   from 1.03 to 1.00 on the shared curve — the same motion as a chapter swap, so
   listing heroes, offering cards and page heroes all read as one language.
   The resting state is fully opaque: only the .js class opts into the hidden
   start, so an image can never be left invisible if the script never runs.
   site.js adds .is-in on decode, with a timeout backstop. */
.js .pic img{opacity:0;transform:scale(1.03);will-change:opacity,transform;
  transition:opacity .8s var(--ease-img),transform .9s var(--ease-img)}
.js .pic img.is-in{opacity:1;transform:none;will-change:auto}

/* Service section figure: the deal numbers on glass, over the photograph. */
.svcfig{position:relative;border-radius:var(--r) var(--r) 0 0;overflow:hidden;
  border:1px solid var(--line);border-bottom:0}
.svcfig .pic{aspect-ratio:16/9}
.svcfig__num{position:absolute;left:0;right:0;bottom:0;padding:18px clamp(16px,3vw,26px) 20px;
  background:linear-gradient(to top,rgba(7,19,48,.92) 30%,rgba(7,19,48,0));
  backdrop-filter:blur(2px)}
.svcfig__fig{font-family:Archivo,sans-serif;font-weight:800;letter-spacing:-.02em;line-height:1.1;
  font-size:clamp(1.15rem,2.1vw,1.6rem);color:var(--white);margin:0}
.svcfig__t{margin:.5em 0 0;font-size:.85rem;color:var(--mist)}
/* Sits below its figure rather than over it, so it needs a flat ground back —
   the scrim gradient only makes sense when it is overlaying a picture. */
.repbadge--static{position:static;border-radius:0 0 var(--r) var(--r);
  border:1px solid var(--line);border-top:0;padding:9px clamp(12px,2vw,16px);
  background:rgba(7,19,48,.55)}
.paper .repbadge--static{background:var(--paper-2);color:var(--navy-dim)}
.paper .repbadge--static.repbadge--real{color:var(--blue-ink)}
.paper .svcfig,.paper .repbadge--static{border-color:var(--line-dark)}

/* Filters */
.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.filters__lbl{font-family:Archivo,sans-serif;font-weight:700;font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--navy-dim);margin-right:4px}
.fchip{padding:9px 17px;border-radius:999px;border:1px solid var(--line-dark);background:transparent;
  font-family:Archivo,sans-serif;font-weight:700;font-size:.84rem;color:var(--navy-text);cursor:pointer;
  transition:background .2s,border-color .2s,color .2s,transform .3s var(--ease)}
.fchip:hover{border-color:var(--blue);transform:translateY(-2px)}
.fchip[aria-pressed=true]{background:linear-gradient(100deg,var(--blue),var(--blue-2));color:#fff;border-color:transparent}
.fchip[disabled]{opacity:.35;cursor:not-allowed;transform:none}
/* 9px of padding put these at 42px tall — two pixels under the thumb minimum,
   on the one control a phone visitor uses most on /listings/. Height only; the
   pill shape, colours and spacing are untouched. */
@media (pointer:coarse){.fchip{padding-block:12px}}
.fcount{font-size:.9rem;color:var(--navy-dim);margin:18px 0 0}
.empty{grid-column:1/-1;border:1px dashed var(--line-dark);border-radius:var(--r);padding:48px 28px;text-align:center}
.empty h3{color:var(--navy-text)}

/* ── Services rail (pinned horizontal on desktop) ────────────────────────*/
/* Height is recomputed in JS from the real track width; this is the no-JS floor. */
.rail{position:relative;height:380vh}
.rail__stage{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden}
.rail__track{display:flex;gap:24px;padding-inline:var(--pad);will-change:transform}
.rail__panel{flex:0 0 min(560px,82vw);background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);padding:clamp(26px,3.2vw,44px);display:flex;flex-direction:column;
  min-height:min(560px,68vh)}
.rail__n{font-family:Archivo,sans-serif;font-weight:800;font-size:5rem;line-height:.8;
  -webkit-text-stroke:1.5px var(--blue-2);color:transparent;margin:0 0 .28em}
.rail__panel h3{font-size:clamp(1.4rem,2.2vw,2rem)}
.rail__who{color:var(--blue-2);font-size:.9rem;font-weight:600;margin:0 0 1em}
/* Same "who it's for" line on the services page, legible on paper and on navy. */
.svc__who{color:var(--blue-2);font-size:.95rem;font-weight:600;margin:.6em 0 1em}
.paper .svc__who{color:var(--blue-ink)}
.rail__ex{margin-top:auto;border-top:1px solid var(--line);padding-top:18px}
.rail__ex .k{font-family:Archivo,sans-serif;font-weight:700;font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mist);margin:0 0 .6em}
.rail__ex a{color:var(--chrome);text-decoration:none;font-family:Archivo,sans-serif;font-weight:700;
  font-size:1.02rem;display:block;margin-bottom:.5em}
.rail__ex a:hover{color:var(--blue-2)}
/* Label above value, like a line of an offering memorandum — never label and
   value as loose siblings, which reads as a word salad when it wraps. */
.rail__nums{display:flex;gap:8px 22px;flex-wrap:wrap;margin:0}
.rail__num{display:flex;flex-direction:column;gap:3px}
.rail__num i{font-style:normal;font-family:Archivo,sans-serif;font-weight:700;font-size:.6rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--mist);white-space:nowrap}
.rail__num b{font-family:Archivo,sans-serif;font-weight:800;font-size:1.05rem;
  color:var(--white);letter-spacing:-.02em;white-space:nowrap}
/* Rail progress — counter, bar and hint.
   This used to be `top:calc(50% - 46vh); right:var(--pad)`, i.e. 4vh down inside
   a 100vh sticky stage. The header is sticky at z-80 and ~66px tall, so the
   counter rendered UNDERNEATH it (elementFromPoint at its centre returned the
   header CTA) and slid off-screen past the halfway mark. The JS had been
   updating 01→05 into a box nobody could see. It now lives in the empty band
   BELOW the panels — which that band was otherwise wasting — and takes the
   progress bar with it, so the sideways motion has a visible cause. */
.rail__idx{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(24px,5vh,60px);
  z-index:2;display:flex;align-items:center;gap:clamp(14px,2vw,28px);pointer-events:none}
.rail__count{margin:0;flex:0 0 auto;font-family:Archivo,sans-serif;font-weight:800;
  font-size:.8rem;letter-spacing:.2em;color:var(--mist);font-variant-numeric:tabular-nums}
.rail__count b{color:var(--blue-2)}
.rail__bar{flex:1 1 auto;height:2px;background:rgba(255,255,255,.12);border-radius:2px;overflow:hidden}
.rail__bar i{display:block;height:100%;width:calc(var(--p,0)*100%);
  background:linear-gradient(90deg,var(--blue),var(--blue-3))}
.rail__hint{margin:0;flex:0 0 auto;font-family:Archivo,sans-serif;font-weight:700;font-size:.62rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--mist);opacity:.75}
@media (max-width:900px){
  .rail{height:auto!important}
  .rail__stage{position:static;height:auto;display:block;padding-block:8px}
  .rail__track{flex-direction:column;transform:none!important;gap:16px}
  .rail__panel{flex:1 1 auto;min-height:0;width:100%}
  /* Stacked vertically here — there is no sideways motion left to report. */
  .rail__idx{display:none}
}

/* ── Reveal choreography (base state is fully readable) ──────────────────*/
.js [data-reveal]{opacity:0;transform:translateY(22px);
  transition:opacity .5s var(--ease),transform .62s var(--ease)}
.js [data-reveal][data-in]{opacity:1;transform:none}
.no-js [data-reveal]{opacity:1;transform:none}

/* ── Editorial split ─────────────────────────────────────────────────────*/
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,72px);align-items:center}
.split--rev{direction:rtl}.split--rev>*{direction:ltr}
@media (max-width:900px){.split{grid-template-columns:1fr}}
.pagehero{position:relative;overflow:hidden;background:var(--panel);isolation:isolate}
.pagehero__bg{position:absolute;inset:0;z-index:-1}
/* The photograph carries at full strength. Knocking it back to .42 AND then
   grading it under a near-opaque navy wash took the team lineup and the
   Woodward Ave shot down to near-black — they read as "blurry, unclear
   pictures". The scrim is now left-weighted instead: ~72% navy behind the copy
   column, ~25% across the right two-thirds where there is no text. */
.pagehero__bg img{width:100%;height:100%;object-fit:cover;opacity:1}
/* The /about/ hero is four people, so where the crop lands is not cosmetic —
   a centred cover-crop of the wide cut sliced the tops of their heads off at
   1440px. Bias the window up until the whole line-up sits inside the fold. The
   narrow source (<=900px) is already the standing frame at nearly the box's own
   aspect, so it stays centred and nothing is cropped away. */
.pagehero__bg--team img{object-position:50% 18%}
@media (max-width:900px){.pagehero__bg--team img{object-position:50% 50%}}
.pagehero__bg::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(7,19,48,.90) 0%,rgba(7,19,48,.72) 26%,
      rgba(7,19,48,.42) 52%,rgba(7,19,48,.25) 72%,rgba(7,19,48,.30) 100%),
    linear-gradient(180deg,rgba(7,19,48,.42),rgba(7,19,48,0) 32%,rgba(7,19,48,.34))}
/* Below the split the copy runs the full width, so the horizontal grade would
   leave the headline sitting on a bright photo. Even it out. */
@media (max-width:900px){
  .pagehero__bg::after{background:
    linear-gradient(90deg,rgba(7,19,48,.88),rgba(7,19,48,.70) 60%,rgba(7,19,48,.62)),
    linear-gradient(180deg,rgba(7,19,48,.40),rgba(7,19,48,.10) 40%,rgba(7,19,48,.40))}
}
.pagehero__in{padding-block:clamp(84px,13vw,168px);position:relative;max-width:var(--maxw);
  margin-inline:auto;padding-inline:var(--pad)}
/* Over imagery that deep padding is cinematic; over flat navy (Offerings, Deal
   Flow — no hero photo) the same gap just reads as a void before the marquee. */
.pagehero--flat .pagehero__in{padding-bottom:clamp(48px,6vw,80px)}
/* Now that the photograph carries at full strength, the headline can cross a
   bright patch of it (the sky on About, the plaza roof on Offerings). Same
   shadow the hero h1 uses, so type stays legible without darkening the image
   back down. */
.pagehero h1{max-width:17ch;text-shadow:0 4px 40px rgba(0,0,0,.55)}
.pagehero .lede{color:var(--chrome);text-shadow:0 2px 24px rgba(0,0,0,.55)}
.pagehero .crumbs{text-shadow:0 2px 18px rgba(0,0,0,.6)}
.crumbs{font-size:.82rem;color:var(--mist);margin:0 0 20px}
/* Underlined, not colour-only: against the mist body text the blue alone gives
   1.19:1, well under the 3:1 WCAG needs for a link inside a block of text. */
.crumbs a{color:var(--blue-2);text-decoration:underline;text-underline-offset:2px}
.crumbs a:hover{color:var(--blue-3)}

/* Inline text link inside body copy — deepens on paper so it clears AA there
   too (the flat --blue only manages 4.1:1 on #F4F7FC). */
.tlink{color:var(--blue-2);font-weight:600;text-decoration:none}
.tlink:hover{text-decoration:underline}
.paper .tlink{color:var(--blue-ink)}

/* Headings that exist for structure/screen readers only. */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ── Team ────────────────────────────────────────────────────────────────*/
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media (max-width:980px){.team{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.team{grid-template-columns:1fr}}
/* The card keeps its navy ground even inside a .paper section, so it has to
   opt out of the paper text colours — otherwise the name and bio render navy
   on navy and disappear entirely (as they did on /about/). */
.member{position:relative;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:var(--panel);color:var(--mist);display:flex;flex-direction:column}
.paper .member h3,.member__q{color:var(--chrome)}
.paper .member__bio{color:var(--mist)}
.member__pic{aspect-ratio:4/5;overflow:hidden;clip-path:inset(0 0 100% 0);
  transition:clip-path .9s var(--ease)}
.js .member[data-in] .member__pic,.no-js .member__pic{clip-path:inset(0 0 0 0)}
/* The grade is baked into the files now (one pass: grey-world balance, highlight
   rolloff, shared S-curve, navy shadow tint — these are frame-grabs from four
   different reels and needed to be matched to each other). Re-applying a filter
   here would double it, and only on the pages that use .member — which is why
   Joseph read colder on a listing page's agent card than on /about/. */
.member__pic img{width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--ease)}
.member:hover .member__pic img{transform:scale(1.04)}
/* Four people with four different amounts to say — Joseph has a direct line and
   an email, Dylan and Jerry route to the form, Fanar has a number only. Letting
   the contact block sit wherever the copy ends put four call-to-actions on four
   different lines across one row; pinning it to the floor lands them all on one. */
.member__body{padding:20px;flex:1;display:flex;flex-direction:column}
.member__c{margin-top:auto;padding-top:14px}
.member__body h3{margin:0 0 .25em;font-size:1.15rem}
.member__role{color:var(--blue-2);font-size:.86rem;font-weight:600;margin:0 0 .2em}
.member__lines{color:var(--mist);font-size:.82rem;margin:0 0 1em}
.member__q{font-style:italic;color:var(--chrome);font-size:.9rem;margin:0 0 1em}
.member__bio{font-size:.9rem;line-height:1.55;margin:0 0 1em}
.member__c{display:flex;flex-direction:column;gap:5px;font-size:.9rem}
.member__c a{color:var(--blue-2);text-decoration:none;font-weight:600}
.member__c a:hover{text-decoration:underline}
@media (pointer:coarse){
  /* These are two standalone actions stacked full-width — a tel: directly above
     a mailto: — not links inside a sentence. At 24px tall and 5px apart a thumb
     picks between "start a phone call" and "open a mail client" by luck. Give
     each its own comfortable row; the copy is unchanged. */
  .member__c a{display:block;padding:10px 0;line-height:1.25}
  .member__c{gap:0}
  .member__c a+a{border-top:1px solid rgba(255,255,255,.08)}
}

/* ── Forms ───────────────────────────────────────────────────────────────*/
.formwrap{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(24px,3.4vw,44px)}
.paper .formwrap{background:var(--white);border-color:var(--line-dark)}
.cform__title{margin:0 0 .35em}
.cform__blurb{color:var(--mist);margin:0 0 26px;max-width:52ch}
.paper .cform__blurb{color:var(--navy-dim)}
.cform__grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:640px){.cform__grid{grid-template-columns:1fr}}
.f{margin:0;display:flex;flex-direction:column;gap:7px}
.f--wide{grid-column:1/-1}
.f label,.f legend{font-family:Archivo,sans-serif;font-weight:700;font-size:.76rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--mist);padding:0}
.paper .f label,.paper .f legend{color:var(--navy-dim)}
.f input,.f select,.f textarea{
  width:100%;padding:13px 15px;border-radius:10px;border:1px solid var(--line);
  background:rgba(255,255,255,.04);color:var(--chrome);font:inherit;font-size:.98rem;
  transition:border-color .2s,background .2s}
.paper .f input,.paper .f select,.paper .f textarea{background:var(--paper);border-color:var(--line-dark);color:var(--navy-text)}
.f input::placeholder,.f textarea::placeholder{color:rgba(159,176,204,.6)}
.paper .f input::placeholder,.paper .f textarea::placeholder{color:#8797B4}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--blue-2);background:rgba(255,255,255,.07);outline:none}
.paper .f input:focus,.paper .f select:focus,.paper .f textarea:focus{background:#fff}
.f input[aria-invalid=true],.f select[aria-invalid=true]{border-color:#FF7A7A}
.f--chips{border:0;padding:0;margin:0}
.chipbox__row{display:flex;flex-wrap:wrap;gap:9px;margin-top:9px}
.chipbox{position:relative;cursor:pointer}
.chipbox input{position:absolute;opacity:0;width:1px;height:1px}
.chipbox span{display:inline-block;padding:9px 16px;border-radius:999px;border:1px solid var(--line);
  font-family:Archivo,sans-serif;font-weight:700;font-size:.82rem;color:var(--mist);
  transition:background .2s,color .2s,border-color .2s}
.paper .chipbox span{border-color:var(--line-dark);color:var(--navy-text)}
.chipbox input:checked+span{background:linear-gradient(100deg,var(--blue),var(--blue-2));color:#fff;border-color:transparent}
.chipbox input:focus-visible+span{outline:3px solid var(--blue-2);outline-offset:2px}
.cform__foot{display:flex;flex-wrap:wrap;align-items:center;gap:16px 22px;margin-top:26px}
.cform__note{margin:0;font-size:.88rem;color:var(--mist)}
.paper .cform__note{color:var(--navy-dim)}
.cform__note a{color:var(--blue-2);font-weight:600;text-decoration:none}
.paper .cform__note a{color:var(--blue-ink)}
.cform__err{margin:18px 0 0;padding:14px 16px;border-radius:10px;background:rgba(255,122,122,.12);
  border:1px solid rgba(255,122,122,.45);color:#FFC9C9;font-size:.92rem}
.paper .cform__err{color:#A3231F}
.cform__ok{text-align:center;padding:26px 8px}
.cform__okmark{width:56px;height:56px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(100deg,var(--blue),var(--blue-2));color:#fff;font-size:1.6rem}
.cform__ok a{color:var(--blue-2);font-weight:600}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ── Listing detail ──────────────────────────────────────────────────────*/
/* The numbers column is always taller than a 3:2 aerial, so `start` left a
   ~230px well of empty navy under the photograph on every listing. Stretching
   the media lets the aerial run the full height of the row instead. */
.lhero{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,56px);align-items:stretch}
@media (max-width:940px){.lhero{grid-template-columns:1fr;align-items:start}}
.lhero__media{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);position:relative}
.lhero__media .plate{aspect-ratio:16/9}
/* Two-column only. The grid's children are bare wrapper divs, so `stretch`
   reaches the wrapper but not the media inside it — the height has to be handed
   down explicitly for the aerial to run the full height of the numbers column.
   `width` is pinned alongside it because a plate sized from `aspect-ratio` and
   a 100% height computes its width from that ratio and blows out of the
   column. Stacked layout keeps the natural ratio and is left alone. */
@media (min-width:941px){
  .lhero>*{min-height:100%}
  .lhero__media{height:100%}
  .lhero__media .plate{aspect-ratio:auto;width:100%;height:100%;min-height:340px}
}
.bignums{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin:26px 0}
.bignums div{background:var(--panel);padding:20px 18px}
.bignums dt{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mist);margin:0 0 6px}
.bignums dd{margin:0;font-family:Archivo,sans-serif;font-weight:800;letter-spacing:-.03em;
  font-size:clamp(1.4rem,2.6vw,2.1rem);color:var(--white)}
@media (max-width:560px){.bignums{grid-template-columns:1fr}}
.hilite{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.hilite li{display:flex;gap:12px;align-items:flex-start;font-size:1rem}
.hilite li::before{content:"";flex:none;width:7px;height:7px;margin-top:.55em;border-radius:2px;
  background:linear-gradient(135deg,var(--blue),var(--blue-3))}
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:26px}
@media (max-width:640px){.gallery{grid-template-columns:1fr}}
.gallery figure{margin:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.gallery figcaption{padding:10px 14px;font-size:.8rem;color:var(--mist);background:var(--panel)}
.mapwrap{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--panel-2)}
.mapwrap iframe{display:block;width:100%;height:340px;border:0;filter:grayscale(.35) invert(.92) hue-rotate(180deg) contrast(.9)}
.ndanote{display:flex;gap:14px;align-items:flex-start;padding:18px 20px;border-radius:var(--r);
  border:1px solid rgba(255,211,122,.35);background:rgba(255,211,122,.07);color:#FFE2A8;font-size:.94rem}
.agentcard{display:flex;gap:18px;align-items:center;padding:20px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--panel)}
.agentcard img{width:84px;height:104px;object-fit:cover;border-radius:10px;flex:none}
.agentcard h3{margin:0 0 .2em;font-size:1.1rem}
.agentcard p{margin:0 0 .5em;font-size:.86rem;color:var(--mist)}
.agentcard a{color:var(--blue-2);text-decoration:none;font-weight:600;font-size:.95rem}
.paper .agentcard a{color:var(--blue-ink)}

/* ── Reels ───────────────────────────────────────────────────────────────*/
.reels{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media (max-width:1000px){.reels{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.reels{grid-template-columns:1fr}}
.reel{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--panel)}
.reel__frame{position:relative;aspect-ratio:9/14;background:#050d22}
.reel__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* Offering stand-in for entries whose Instagram permalink no longer resolves. */
.reel__still{position:absolute;inset:0;height:100%;aspect-ratio:auto}
.reel__still .pic,.reel__still img{width:100%;height:100%;display:block;object-fit:cover}
.reel__body{padding:18px 20px}
.reel__body h2{font-size:1.05rem;margin:0 0 .4em}
.reel__body p{font-size:.9rem;margin:0 0 .8em;color:var(--mist)}
.reel__body a{color:var(--blue-2);font-weight:600;text-decoration:none;font-size:.9rem}

/* ── Ticker ("This week at ICON") ────────────────────────────────────────*/
.ticker{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);
  padding:clamp(24px,3.4vw,40px)}
.ticker__date{font-family:Archivo,sans-serif;font-weight:700;font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--blue-2);display:flex;align-items:center;gap:10px;margin:0 0 1.2em}
.ticker__date .live{width:8px;height:8px;border-radius:50%;background:#8CF2C0;
  box-shadow:0 0 0 0 rgba(140,242,192,.6);animation:pulse 2.4s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 12px rgba(140,242,192,0)}100%{box-shadow:0 0 0 0 rgba(140,242,192,0)}}
.ticker ul{list-style:none;padding:0;margin:0 0 24px;display:grid;gap:14px}
.ticker li{display:flex;gap:14px;align-items:baseline;font-family:Archivo,sans-serif;font-weight:700;
  font-size:clamp(1.1rem,2vw,1.6rem);color:var(--chrome);letter-spacing:-.02em}
.ticker li b{color:var(--blue-2);font-size:.8em}

/* ── Process steps ───────────────────────────────────────────────────────*/
.steps{display:grid;gap:2px;background:var(--line-dark);border:1px solid var(--line-dark);
  border-radius:var(--r);overflow:hidden}
.step{background:var(--paper);padding:clamp(22px,3vw,34px);display:grid;
  grid-template-columns:auto 1fr;gap:8px 26px;align-items:baseline}
.step__n{font-family:Archivo,sans-serif;font-weight:800;font-size:2.4rem;line-height:1;
  -webkit-text-stroke:1.5px var(--blue);color:transparent}
.step h3{margin:0 0 .3em}
.step p{margin:0;color:#33456A}
@media (max-width:640px){.step{grid-template-columns:1fr;gap:10px}}

/* ── CTA band ────────────────────────────────────────────────────────────*/
.ctaband{position:relative;overflow:hidden;background:linear-gradient(140deg,#0B1A3A,#071330 60%)}
/* The skyline was showing through at .22 and the mist-grey paragraph was laid
   straight over its bright quarter — unreadable. The photo now runs brighter
   and the copy gets its own glass panel to sit on, so both win. */
.ctaband__bg{position:absolute;inset:0;opacity:.42;background-size:cover;background-position:center}
.ctaband__bg::after{content:"";position:absolute;inset:0;
  background:radial-gradient(72% 78% at 50% 50%,rgba(7,19,48,.70),rgba(7,19,48,.18) 78%)}
.ctaband__in{position:relative;text-align:center;max-width:880px;margin-inline:auto}
/* The panel itself — navy at 55% behind a 12px blur, hairline white border. */
.ctaband__panel{background:rgba(7,19,48,.55);backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r);padding:clamp(26px,4vw,48px) clamp(20px,4vw,52px)}
.ctaband h2{margin-bottom:.4em;text-shadow:0 4px 40px rgba(0,0,0,.55)}
.ctaband .btnrow{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:30px}

/* ── Footer ──────────────────────────────────────────────────────────────*/
.ftr{background:#050D24;border-top:1px solid var(--line);color:var(--mist)}
.ftr__in{max-width:var(--maxw);margin-inline:auto;padding:clamp(48px,7vw,90px) var(--pad) 40px;
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px}
@media (max-width:940px){.ftr__in{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ftr__in{grid-template-columns:1fr}}
.fcol__h{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-2);margin:0 0 1.2em}
.fcol ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.fcol a{color:var(--mist);text-decoration:none;font-size:.94rem;transition:color .2s}
.fcol a:hover{color:var(--white)}
.ftr__tag{font-family:Archivo,sans-serif;font-weight:700;color:var(--chrome);font-size:1.05rem;
  margin:20px 0 18px;letter-spacing:-.01em}
.ftr address{font-style:normal;font-size:.94rem;line-height:1.8;margin-bottom:18px}
.ftr address a{color:var(--mist);text-decoration:none}
.ftr address a:hover{color:var(--white)}
.ftr__dim{color:#6E80A0;font-size:.86rem}
.ftr__ig{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--chrome);
  font-weight:600;font-size:.92rem}
.ftr__ig svg{width:20px;height:20px;color:var(--blue-2)}
.ftr__ig:hover{color:var(--blue-2)}
/* Sister-site button (Aiden 2026-10-19): every page links to iconcommercialexperts.com.
   Solid electric blue so it reads as a real button on the dark footer. */
.sister{display:inline-flex;align-items:center;gap:10px;margin-top:22px;padding:16px 26px;border-radius:999px;background:linear-gradient(135deg,var(--blue) 0%,var(--blue-2) 100%);color:#fff;font-weight:700;font-size:1.05rem;text-decoration:none;box-shadow:0 10px 30px -10px rgba(30,111,255,.7);transition:transform .2s,box-shadow .2s}
.sister svg{width:18px;height:18px;color:#fff;flex:none}
.sister:hover{transform:translateY(-2px);box-shadow:0 14px 34px -10px rgba(30,111,255,.85)}
.ftr__sisterrow{max-width:var(--maxw);margin-inline:auto;padding:4px var(--pad) 40px;display:flex;justify-content:center}
.ftr__sisterrow .sister{margin-top:0;font-size:clamp(.95rem,1.1vw + .6rem,1.2rem);padding:18px 32px;text-align:center;justify-content:center;max-width:100%}
.ftr__sisterrow .sister strong{font-weight:800}
@media (max-width:560px){.ftr__sisterrow .sister{padding:15px 20px;width:100%}}
/* Top-of-page strip: "Looking for iconcommercialexperts.com -> Click here". */
.sisterbar{position:relative;z-index:85;background:linear-gradient(90deg,var(--blue-ink) 0%,var(--blue) 55%,#2F86FF 100%);color:#fff}
.sisterbar__in{max-width:var(--maxw);margin-inline:auto;padding:10px var(--pad);display:flex;align-items:center;justify-content:center;gap:12px 18px;flex-wrap:wrap;text-align:center}
.sisterbar__txt{margin:0;font-size:1.02rem;font-weight:500;letter-spacing:.01em;display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center}
.sisterbar__txt span:first-child{text-transform:uppercase;letter-spacing:.08em;font-size:.84rem;font-weight:700;opacity:.9}
.sisterbar__txt strong{font-weight:800}
.sisterbar__arrow{font-size:1.25rem;line-height:1}
.sisterbar__btn{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:11px 24px;border-radius:999px;background:#fff;color:var(--ink);font-weight:800;font-size:1rem;text-transform:uppercase;letter-spacing:.04em;text-decoration:none;box-shadow:0 6px 18px -6px rgba(3,8,26,.5);transition:transform .2s,box-shadow .2s}
.sisterbar__btn svg{width:18px;height:18px;flex:none;color:var(--blue)}
.sisterbar__btn:hover{transform:translateY(-1px);box-shadow:0 10px 22px -8px rgba(3,8,26,.6)}
.sisterbar__btn:focus-visible{outline:3px solid #fff;outline-offset:3px}
@media (max-width:560px){.sisterbar__in{padding:9px 14px;gap:8px 12px}.sisterbar__txt{font-size:.92rem;gap:6px}.sisterbar__txt span:first-child{font-size:.74rem}.sisterbar__btn{min-height:44px;padding:10px 20px;font-size:.92rem}}
@media (max-width:380px){.sisterbar__txt{font-size:.84rem;gap:5px}.sisterbar__txt span:first-child{font-size:.66rem;letter-spacing:.06em}.sisterbar__arrow{display:none}}
@media print{.sisterbar{display:none}}
.drawer__sister{justify-self:center;padding:6px 0;color:var(--mist);font-size:.9rem;text-decoration:underline;text-underline-offset:3px}
.ftr__legal{max-width:var(--maxw);margin-inline:auto;padding:26px var(--pad) 110px;
  border-top:1px solid var(--line);font-size:.84rem;color:#6E80A0}
.ftr__legal p{margin:0 0 .7em}
.ftr__legal a{color:#8FA3C4}
@media (min-width:901px){.ftr__legal{padding-bottom:26px}}

/* ── Sticky mobile CTA bar ───────────────────────────────────────────────*/
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:55;display:none;
  grid-template-columns:1fr 1.2fr 1fr;gap:1px;background:var(--line);
  border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
.mbar__b{display:flex;align-items:center;justify-content:center;gap:7px;padding:15px 8px;
  background:rgba(7,19,48,.97);backdrop-filter:blur(14px);text-decoration:none;color:var(--chrome);
  font-family:Archivo,sans-serif;font-weight:700;font-size:.88rem}
.mbar__b svg{width:16px;height:16px}
.mbar__b--pri{background:linear-gradient(100deg,var(--blue),var(--blue-2));color:#fff}
@media (max-width:900px){.mbar{display:grid}}

/* ── Responsive header ───────────────────────────────────────────────────*/
@media (max-width:1150px){.hdr__nav{gap:18px;font-size:.86rem}}
@media (max-width:1040px){
  .hdr__nav,.hdr__cta{display:none}
  .burger{display:grid}
  .hdr__act{margin-left:auto}
}
@media (max-width:420px){.hdr__tel span{display:none}
  .hdr__tel{width:44px;height:44px;justify-content:center;border:1px solid var(--line);border-radius:10px}}

/* ── Reduced motion ──────────────────────────────────────────────────────*/
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .marquee__track{animation:none;transform:none}
  .hero{height:auto!important}
  .hero__stage{position:relative;height:auto;min-height:100svh}
  .hero__ch{position:relative;opacity:1;transform:none}
  .hero__ch+.hero__ch{display:none}
  .hero__chapters{min-height:0}
  .hero__scroll{display:none}
  .rail{height:auto!important}
  .rail__stage{position:static;height:auto;display:block}
  .rail__track{flex-direction:column;transform:none!important}
  .rail__panel{flex:1 1 auto;min-height:0;width:100%}
  .js [data-reveal]{opacity:1;transform:none}
  .js .pic img{opacity:1;transform:none}
  .member__pic{clip-path:none}
  .glass{opacity:1;transform:none}
  .proof__bg{transform:none}
}