/* ==========================================================================
   PRO PUZZEL MARKETING
   Built by Global Solutions Group
   --------------------------------------------------------------------------
   PALETTE — every colour on the site resolves from the tokens below.
   To match the logo exactly, change these six values and nothing else.
   ========================================================================== */

:root{
  /* --- brand ------------------------------------------------------------ */
  --ink:        #1E1C1B;   /* primary — charcoal, from the logo's puzzle piece */
  --ink-deep:   #0F0E0D;   /* darkest shade, footers & overlays */
  --brass:      #E22E00;   /* the logo orange — safe as text on light */
  --brass-lt:   #FF7A45;   /* lifted orange — for text on dark panels */
  --bone:       #F2F0ED;   /* page base, warmed to sit with the orange */
  --paper:      #FFFFFF;

  /* --- the four pieces (one per service) -------------------------------- */
  --piece-1:    #FF5A1F;   /* Face 2 Face         — brightest */
  --piece-2:    #E22E00;   /* Business 2 Business — core orange */
  --piece-3:    #B81400;   /* Event Based         — deep red */
  --piece-4:    #6E1F0F;   /* Instore Sales       — burnt */

  /* --- neutrals --------------------------------------------------------- */
  --graphite:   #26221F;
  --muted:      #6B6561;
  --line:       rgba(30,28,27,.14);
  --line-soft:  rgba(30,28,27,.08);

  /* --- type ------------------------------------------------------------- */
  --display: "Cormorant Garamond", "Times New Roman", serif;
  --body:    "Archivo", "Helvetica Neue", Arial, sans-serif;

  /* --- rhythm ----------------------------------------------------------- */
  --shell:   min(1240px, 100% - 3rem);
  --shell-w: min(1440px, 100% - 3rem);
  --sec-y:   clamp(4.5rem, 9vw, 8.5rem);
  --ease:    cubic-bezier(.22,.61,.36,1);
  --nav-h:   82px;
}

/* ==========================================================================
   RESET
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bone);
  color:var(--graphite);
  font-family:var(--body);
  font-size:clamp(.95rem,.9rem + .2vw,1.02rem);
  line-height:1.75;
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;}
ul{margin:0;padding:0;list-style:none;}

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

.shell{width:var(--shell);margin-inline:auto;}
.shell-wide{width:var(--shell-w);margin-inline:auto;}

.skip{
  position:absolute;left:-999px;top:0;z-index:999;
  background:var(--ink);color:#fff;padding:.85rem 1.4rem;
}
.skip:focus{left:1rem;top:1rem;}

/* ==========================================================================
   TYPE
   ========================================================================== */

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:600;
  line-height:1.06;
  letter-spacing:-.015em;
  margin:0;
  color:var(--ink);
}
h1{font-size:clamp(2.9rem,1.9rem + 4.4vw,5.2rem);}
h2{font-size:clamp(2.1rem,1.5rem + 2.6vw,3.5rem);}
h3{font-size:clamp(1.35rem,1.15rem + .8vw,1.85rem);}
p{margin:0 0 1.15rem;}
p:last-child{margin-bottom:0;}

.eyebrow{
  font-family:var(--body);
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--brass);
  display:inline-flex;
  align-items:center;
  gap:.75rem;
  margin-bottom:1.35rem;
}
.eyebrow::before{
  content:"";
  width:34px;height:1px;
  background:currentColor;
  opacity:.55;
}
.eyebrow.on-dark{color:var(--brass-lt);}
.eyebrow.centred{justify-content:center;}

.lede{
  font-size:clamp(1.05rem,1rem + .35vw,1.22rem);
  line-height:1.72;
  color:var(--muted);
  max-width:62ch;
}
/* headings carry no bottom margin, so give the lede its own breathing room */
h1 + .lede, h2 + .lede, h3 + .lede{margin-top:1.25rem;}
.muted{color:var(--muted);}

/* italic serif pull — used sparingly */
.accent-word{font-style:italic;color:var(--brass);}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.btn{
  --bg:var(--ink);
  --fg:#fff;
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:.7rem;
  padding:1.02rem 2.05rem;
  background:var(--bg);
  color:var(--fg);
  font-size:.73rem;
  font-weight:600;
  letter-spacing:.17em;
  text-transform:uppercase;
  overflow:hidden;
  isolation:isolate;
  transition:color .4s var(--ease), transform .4s var(--ease);
}
.btn::after{
  content:"";
  position:absolute;inset:0;z-index:-1;
  background:var(--brass);
  transform:translateY(101%);
  transition:transform .45s var(--ease);
}
.btn:hover{color:#fff;transform:translateY(-2px);}
.btn:hover::after{transform:translateY(0);}
.btn i{font-size:.8rem;}

.btn-ghost{--bg:transparent;--fg:var(--ink);border:1px solid var(--line);}
.btn-ghost:hover{color:#fff;}
.btn-ghost::after{background:var(--ink);}

.btn-light{--bg:var(--brass);--fg:#fff;}
.btn-light::after{background:#fff;}
.btn-light:hover{color:var(--ink);}

/* text link with sliding rule */
.tlink{
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:.73rem;font-weight:600;letter-spacing:.17em;text-transform:uppercase;
  color:var(--ink);padding-bottom:.35rem;position:relative;
}
.tlink::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--brass);transform:scaleX(.34);transform-origin:left;
  transition:transform .45s var(--ease);
}
.tlink:hover::after{transform:scaleX(1);}
.tlink.on-dark{color:#fff;}

/* ==========================================================================
   PUZZLE MOTIF — the signature device
   A tab is drawn with a pseudo-element half-circle so it can sit on any edge.
   ========================================================================== */

.tab-mark{
  position:relative;
  width:34px;height:8px;
  border-bottom:1px solid var(--brass);
  flex:none;
}
.tab-mark::after{
  content:"";
  position:absolute;left:50%;bottom:0;
  width:15px;height:7.5px;
  margin-left:-7.5px;
  border:1px solid var(--brass);
  border-bottom:0;
  border-radius:15px 15px 0 0;
}

/* ==========================================================================
   HEADER
   ========================================================================== */

.site-head{
  position:fixed;inset:0 0 auto 0;z-index:200;
  height:var(--nav-h);
  display:flex;align-items:center;
  transition:background .45s var(--ease), box-shadow .45s var(--ease), height .45s var(--ease);
}
.site-head .shell-wide{
  display:flex;align-items:center;justify-content:space-between;gap:2rem;
}
.site-head.is-stuck{
  height:70px;
  background:rgba(242,240,237,.93);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--line-soft), 0 18px 40px -34px rgba(0,0,0,.5);
}

/* reading progress — a hairline of accent across the foot of the header */
.scroll-bar{
  position:absolute;left:0;right:0;bottom:0;height:2px;
  background:transparent;overflow:hidden;pointer-events:none;
}
.scroll-bar i{
  display:block;height:100%;width:100%;
  background:linear-gradient(90deg,var(--brass),var(--brass-lt));
  transform:scaleX(0);transform-origin:left;
}
.site-head:not(.is-stuck) .scroll-bar i{opacity:.55;}

.brand{display:flex;align-items:center;gap:.85rem;line-height:1;}
/* the logo lockup: dark mark on light surfaces, light mark on dark ones */
.brand-mark{
  flex:none;display:block;line-height:0;
}
.brand-mark img{
  height:42px;width:auto;
  transition:height .45s var(--ease);
}
.site-head.is-stuck .brand-mark img{height:36px;}
.site-foot .brand-mark img{height:46px;}

/* dark mark by default; light mark wherever the surface behind it is dark.
   Both selectors carry two classes so neither can outrank the other by accident. */
.brand-mark .logo-dark{display:block;}
.brand-mark .logo-light{display:none;}
.site-head:not(.is-stuck) .brand-mark .logo-dark{display:none;}
.site-head:not(.is-stuck) .brand-mark .logo-light{display:block;}
.site-foot .brand-mark .logo-dark,
.drawer .brand-mark .logo-dark{display:none;}
.site-foot .brand-mark .logo-light,
.drawer .brand-mark .logo-light{display:block;}
.brand-text{display:flex;flex-direction:column;gap:.18rem;}
.brand-name{
  font-family:var(--display);
  font-size:1.28rem;font-weight:700;letter-spacing:-.01em;
  color:var(--ink);
}
.brand-sub{
  font-size:.55rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase;
  color:var(--muted);
}

/* nav on transparent (hero) state */
.site-head:not(.is-stuck) .brand-name{color:#fff;}
.site-head:not(.is-stuck) .brand-sub{color:rgba(255,255,255,.6);}
.site-head:not(.is-stuck) .nav-list a{color:rgba(255,255,255,.86);}
.site-head:not(.is-stuck) .burger span{background:#fff;}
.site-head.solid-nav:not(.is-stuck) .brand-name{color:var(--ink);}
.site-head.solid-nav:not(.is-stuck) .brand-sub{color:var(--muted);}
.site-head.solid-nav:not(.is-stuck) .nav-list a{color:var(--ink);}
.site-head.solid-nav:not(.is-stuck) .burger span{background:var(--ink);}

.nav{display:flex;align-items:center;gap:2.4rem;}
.nav-list{display:flex;align-items:center;gap:2.1rem;}
.nav-list a{
  position:relative;
  font-size:.72rem;font-weight:500;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink);
  padding:.45rem 0;
  transition:color .3s var(--ease);
}
.nav-list a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--brass);transform:scaleX(0);transform-origin:right;
  transition:transform .4s var(--ease);
}
.nav-list a:hover::after,
.nav-list a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left;}
.nav-list a[aria-current="page"]{color:var(--brass);}
.site-head:not(.is-stuck) .nav-list a[aria-current="page"]{color:var(--brass-lt);}

.nav-cta{
  padding:.82rem 1.5rem;
  font-size:.68rem;
}
.site-head:not(.is-stuck) .nav-cta{--bg:var(--brass);--fg:#fff;}
.site-head:not(.is-stuck) .nav-cta::after{background:#fff;}
.site-head:not(.is-stuck) .nav-cta:hover{color:var(--ink);}

.burger{
  display:none;
  width:38px;height:38px;
  flex-direction:column;justify-content:center;gap:6px;align-items:flex-end;
}
.burger span{
  display:block;height:1.5px;width:24px;background:var(--ink);
  transition:transform .4s var(--ease), opacity .3s var(--ease), width .4s var(--ease);
}
.burger span:nth-child(2){width:16px;}
.burger.is-open span:nth-child(1){transform:translateY(7.5px) rotate(45deg);}
.burger.is-open span:nth-child(2){opacity:0;}
.burger.is-open span:nth-child(3){width:24px;transform:translateY(-7.5px) rotate(-45deg);}

/* mobile drawer */
.drawer{
  position:fixed;inset:0;z-index:190;
  background:var(--ink-deep);
  display:flex;flex-direction:column;justify-content:center;
  padding:6rem 2rem 3rem;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .6s var(--ease);
  visibility:hidden;
}
.drawer.is-open{clip-path:inset(0 0 0 0);visibility:visible;}
.drawer ul{display:flex;flex-direction:column;gap:.2rem;}
.drawer a{
  display:block;
  font-family:var(--display);
  font-size:clamp(2rem,9vw,2.9rem);
  font-weight:600;
  color:#fff;
  padding:.35rem 0;
  border-bottom:1px solid rgba(255,255,255,.09);
  opacity:0;transform:translateY(22px);
}
.drawer.is-open a{
  animation:drawerIn .55s var(--ease) forwards;
}
.drawer.is-open li:nth-child(1) a{animation-delay:.12s;}
.drawer.is-open li:nth-child(2) a{animation-delay:.18s;}
.drawer.is-open li:nth-child(3) a{animation-delay:.24s;}
.drawer.is-open li:nth-child(4) a{animation-delay:.30s;}
.drawer.is-open li:nth-child(5) a{animation-delay:.36s;}
.drawer.is-open li:nth-child(6) a{animation-delay:.42s;}
@keyframes drawerIn{to{opacity:1;transform:none;}}
.drawer-foot{
  margin-top:2.6rem;color:rgba(255,255,255,.5);
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  display:flex;flex-direction:column;gap:.5rem;
}
.drawer-foot a{font:inherit;font-family:var(--body);border:0;padding:0;opacity:1;transform:none;animation:none;color:var(--brass-lt);}

/* ==========================================================================
   HERO — the photograph fills the whole section; a charcoal panel with a
   puzzle-tab edge sits over the left of it and carries the type
   ========================================================================== */

.hero{
  position:relative;
  display:grid;align-items:center;
  min-height:min(88vh,850px);
  padding-top:var(--nav-h);
  background:var(--ink-deep);
  color:#fff;
  overflow:hidden;
  isolation:isolate;
}

/* --- background carousel --- */
.hero-slides{position:absolute;inset:0;z-index:0;}
.hero-slide{
  position:absolute;inset:0;
  opacity:0;
  transition:opacity 1.25s var(--ease);
}
.hero-slide.is-active{opacity:1;}
.hero-slide img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.06);
}
.hero-slide.is-active img{animation:kenburns 9s linear forwards;}
@keyframes kenburns{
  from{transform:scale(1.04) translate3d(0,0,0);}
  to{transform:scale(1.16) translate3d(-1.6%,-1.4%,0);}
}

/* --- legibility veil over the whole frame --- */
/* One even wash of charcoal across the whole section — the same tone the type
   sits on, applied edge to edge, with a touch more at the top and bottom so the
   header and the slide controls stay readable over any photograph. */
.hero-veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,
      rgba(15,14,13,.90) 0%,
      rgba(15,14,13,.84) 24%,
      rgba(15,14,13,.84) 74%,
      rgba(15,14,13,.90) 100%);
}

/* --- type: a short load sequence so the page arrives rather than appearing --- */
.hero-inner{position:relative;z-index:3;width:var(--shell);margin-inline:auto;}
.hero-copy > *{opacity:0;transform:translateY(26px);}
.hero.is-ready .hero-copy > *{animation:heroIn .95s var(--ease) forwards;}
.hero.is-ready .hero-copy > *:nth-child(1){animation-delay:.10s;}
.hero.is-ready .hero-copy > *:nth-child(2){animation-delay:.22s;}
.hero.is-ready .hero-copy > *:nth-child(3){animation-delay:.36s;}
.hero.is-ready .hero-copy > *:nth-child(4){animation-delay:.48s;}
.hero.is-ready .hero-copy > *:nth-child(5){animation-delay:.60s;}
@keyframes heroIn{to{opacity:1;transform:none;}}

.hero-veil{opacity:0;transition:opacity 1.1s var(--ease);}
.hero.is-ready .hero-veil{opacity:1;}

.hero-count,.hero-dots{opacity:0;transition:opacity .7s var(--ease) .8s;}
.hero.is-ready .hero-count,.hero.is-ready .hero-dots{opacity:1;}
.hero-copy{
  max-width:min(45rem,92%);
  padding-block:clamp(2.6rem,4.5vw,3.8rem);
}
.hero-copy h1{
  color:#fff;
  font-size:clamp(2.2rem,1.5rem + 2.8vw,3.5rem);
  line-height:1.08;
}
.hero-copy h1 em{font-style:italic;color:var(--brass-lt);}
.hero-copy .lede{color:rgba(255,255,255,.78);margin-top:1.15rem;max-width:52ch;font-size:1.02rem;}

.hero-actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.9rem;}
.hero-actions .btn:not(.btn-ghost){--bg:var(--brass);--fg:#fff;}
.hero-actions .btn:not(.btn-ghost)::after{background:#fff;}
.hero-actions .btn:not(.btn-ghost):hover{color:var(--ink);}
.hero-actions .btn-ghost{--fg:#fff;border-color:rgba(255,255,255,.32);}
.hero-actions .btn-ghost::after{background:#fff;}
.hero-actions .btn-ghost:hover{color:var(--ink);}

.hero-meta{
  display:flex;gap:2.6rem;flex-wrap:wrap;
  margin-top:clamp(1.7rem,3.2vw,2.4rem);
  padding-top:1.5rem;
  border-top:1px solid rgba(255,255,255,.16);
}
.hero-meta div{display:flex;flex-direction:column;gap:.15rem;}
.hero-meta b{
  font-family:var(--display);font-size:1.85rem;font-weight:600;color:var(--brass-lt);line-height:1;
}
/* direct child only — otherwise this also catches the count-up span inside <b> */
.hero-meta div > span{
  font-size:.63rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.6);
}

/* --- carousel controls --- */
.hero-dots{
  position:absolute;z-index:4;
  right:max(1.4rem,calc((100vw - 1240px)/2));
  bottom:clamp(1.6rem,3.5vw,3rem);
  display:flex;align-items:center;gap:.85rem;
}
.hero-dots button{
  width:34px;height:2px;background:rgba(255,255,255,.45);position:relative;overflow:hidden;
  box-shadow:0 1px 6px rgba(0,0,0,.45);
  transition:background .3s var(--ease);
}
.hero-dots button::after{
  content:"";position:absolute;inset:0;background:var(--brass);
  transform:scaleX(0);transform-origin:left;
}
.hero-dots button[aria-selected="true"]::after{animation:dotFill 6s linear forwards;}
@keyframes dotFill{to{transform:scaleX(1);}}
.hero-dots button:hover{background:rgba(255,255,255,.65);}

.hero-count{
  position:absolute;z-index:4;
  right:max(1.4rem,calc((100vw - 1240px)/2));
  bottom:calc(clamp(1.6rem,3.5vw,3rem) + 1.6rem);
  font-family:var(--display);font-size:1.05rem;color:rgba(255,255,255,.82);
  letter-spacing:.06em;
  text-shadow:0 1px 10px rgba(0,0,0,.6);
}
.hero-count b{color:var(--brass-lt);font-weight:600;}


/* ==========================================================================
   CHANNEL TICKER — a slow marquee of the four channels under the hero
   ========================================================================== */

.ticker{
  background:var(--ink);
  border-block:1px solid rgba(255,255,255,.08);
  overflow:hidden;
  padding:1.15rem 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.ticker-track{
  display:flex;align-items:center;gap:2.6rem;
  width:max-content;
  animation:tickerScroll 38s linear infinite;
}
.ticker:hover .ticker-track{animation-play-state:paused;}
.ticker-track span{
  font-family:var(--display);
  font-size:clamp(1.15rem,1rem + .6vw,1.6rem);
  font-style:italic;font-weight:500;
  color:rgba(255,255,255,.62);
  white-space:nowrap;
}
.ticker-track i{
  width:6px;height:6px;border-radius:50%;
  background:var(--brass);flex:none;
}
/* the track holds the four channels twice, so shifting half its width loops seamlessly */
@keyframes tickerScroll{
  from{transform:translate3d(0,0,0);}
  to{transform:translate3d(-50%,0,0);}
}

/* ==========================================================================
   PAGE BANNER (inner pages)
   ========================================================================== */

.banner{
  position:relative;
  background:var(--ink);
  color:#fff;
  padding:calc(var(--nav-h) + clamp(4rem,8vw,7rem)) 0 clamp(3.5rem,7vw,6rem);
  overflow:hidden;
}
.banner::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(120% 130% at 88% 0%, rgba(226,46,0,.22) 0%, transparent 58%),
    linear-gradient(180deg, var(--ink-deep) 0%, var(--ink) 100%);
}
.banner .shell{position:relative;z-index:2;}
.banner h1{color:#fff;max-width:16ch;}
.banner .lede{color:rgba(255,255,255,.7);margin-top:1.4rem;}
.crumbs{
  display:flex;gap:.7rem;align-items:center;
  font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.5);margin-top:2rem;
}
.crumbs a:hover{color:var(--brass-lt);}
.crumbs span{color:var(--brass);}

/* faint puzzle lattice on dark panels */
.lattice::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.032) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.032) 1px, transparent 1px);
  background-size:96px 96px;
  mask-image:radial-gradient(120% 100% at 80% 10%, #000 0%, transparent 72%);
  -webkit-mask-image:radial-gradient(120% 100% at 80% 10%, #000 0%, transparent 72%);
}

/* ==========================================================================
   SECTIONS
   ========================================================================== */

.section{padding:var(--sec-y) 0;position:relative;}
.section-dark{background:var(--ink);color:rgba(255,255,255,.75);}
.section-dark h2,.section-dark h3{color:#fff;}
.section-dark .lede{color:rgba(255,255,255,.66);}
.section-paper{background:var(--paper);}

.sec-head{max-width:64ch;margin-bottom:clamp(2.6rem,5vw,4rem);}
.sec-head.centred{margin-inline:auto;text-align:center;}
.sec-head.only{margin-bottom:0;}
.sec-head.centred .lede{margin-inline:auto;}
.sec-head-split{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.6rem,4vw,4rem);align-items:end;
  margin-bottom:clamp(2.6rem,5vw,4rem);
}

/* ==========================================================================
   THE FOUR PIECES — services grid, assembles on scroll
   ========================================================================== */

.pieces{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.piece{
  --accent:var(--brass);
  position:relative;
  background:var(--paper);
  padding:clamp(2rem,3vw,2.8rem) clamp(1.4rem,2.2vw,2rem) clamp(2.2rem,3.4vw,3rem);
  display:flex;flex-direction:column;
  overflow:hidden;
  transition:background .5s var(--ease), transform .5s var(--ease);
}
.piece::before{
  content:"";position:absolute;left:0;top:0;height:3px;width:100%;
  background:var(--accent);
  transform:scaleX(0);transform-origin:left;
  transition:transform .55s var(--ease);
}
.piece:hover::before{transform:scaleX(1);}
.piece:hover{background:#fefcfb;}

/* the numeral again, oversized and faint, so the card has depth at a glance */
.piece::after{
  content:attr(data-no);
  position:absolute;right:-.5rem;bottom:-2.2rem;z-index:0;
  font-family:var(--display);font-weight:700;
  font-size:8.5rem;line-height:1;letter-spacing:-.04em;
  color:var(--accent);opacity:.08;
  pointer-events:none;
  transition:opacity .5s var(--ease), transform .6s var(--ease);
}
.piece:hover::after{opacity:.16;transform:translateY(-8px);}
.piece > *{position:relative;z-index:1;}
.piece:hover .piece-icon{
  background:var(--accent);border-color:var(--accent);color:#fff;
}

.piece-no{
  font-family:var(--display);
  font-size:.95rem;font-weight:600;letter-spacing:.14em;
  color:var(--accent);
  display:flex;align-items:center;gap:.7rem;
  margin-bottom:1.5rem;
}
.piece-no .tab-mark{border-bottom-color:var(--accent);}
.piece-no .tab-mark::after{border-color:var(--accent);border-bottom:0;}

.piece-icon{
  width:46px;height:46px;display:grid;place-items:center;
  color:var(--accent);font-size:1.3rem;margin-bottom:1.25rem;
  border:1px solid var(--line);
  transition:border-color .4s var(--ease), background .4s var(--ease);
}
.piece:hover .piece-icon{border-color:var(--accent);}

.piece h3{font-size:1.32rem;margin-bottom:.75rem;}
.piece p{font-size:.9rem;color:var(--muted);line-height:1.72;}
.piece .tlink{margin-top:auto;padding-top:1.6rem;}
.piece .tlink::after{background:var(--accent);}

/* assemble-on-scroll: each piece slides in from its own corner */
.piece[data-assemble]{
  opacity:0;
  transform:translate3d(var(--dx,0),var(--dy,34px),0) rotate(var(--rot,0deg));
  transition:opacity .8s var(--ease), transform .95s var(--ease);
}
.piece[data-assemble].is-in{opacity:1;transform:none;}

/* ==========================================================================
   FEATURE SPLIT
   ========================================================================== */

.split{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,5rem);
  align-items:center;
}
.split.reverse .split-media{order:2;}
.split-media{position:relative;}
.split-media img{width:100%;aspect-ratio:4/3;object-fit:cover;}
.split-media .frame-tab{
  position:absolute;right:-14px;top:38%;
  width:28px;height:56px;border-radius:0 28px 28px 0;
  background:var(--brass);
}
.split-badge{
  position:absolute;left:-1px;bottom:-1px;
  background:var(--ink);color:#fff;
  padding:1.3rem 1.7rem;
  display:flex;flex-direction:column;gap:.1rem;
}
.split-badge b{font-family:var(--display);font-size:2.1rem;color:var(--brass-lt);line-height:1;}
.split-badge span{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.6);}

.checks{display:flex;flex-direction:column;gap:.9rem;margin:1.8rem 0 0;}
.checks li{display:flex;gap:.9rem;align-items:flex-start;font-size:.94rem;}
.checks i{color:var(--brass);font-size:.78rem;margin-top:.42rem;flex:none;}

/* ==========================================================================
   STATS BAND
   ========================================================================== */

.stats{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;background:rgba(255,255,255,.12);
}
.stats div{
  background:var(--ink);
  padding:clamp(1.8rem,3vw,2.6rem) 1.4rem;
  text-align:center;
}
.stats b{
  display:block;font-family:var(--display);font-weight:600;
  font-size:clamp(2.4rem,1.6rem + 2.4vw,3.6rem);color:var(--brass-lt);line-height:1;
}
.stats span{
  display:block;margin-top:.7rem;
  font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.58);
}

/* ==========================================================================
   TEAM
   ========================================================================== */

/* CEO — asymmetric feature */
.ceo{
  display:grid;
  grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  gap:clamp(2rem,5vw,4.5rem);
  align-items:center;
}
.ceo-photo{position:relative;z-index:0;}
.ceo-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;}
.ceo-photo::before{
  content:"";position:absolute;
  right:-16px;bottom:-16px;
  width:min(62%,230px);height:min(48%,250px);
  border-right:1px solid var(--brass);
  border-bottom:1px solid var(--brass);
  z-index:1;pointer-events:none;
}
.ceo-role{
  position:absolute;left:0;bottom:0;
  background:var(--ink);color:#fff;padding:1rem 1.4rem;
  font-size:.63rem;letter-spacing:.22em;text-transform:uppercase;
}
.ceo-role b{color:var(--brass-lt);font-weight:600;}
.ceo blockquote{
  margin:1.8rem 0 0;padding-left:1.6rem;
  border-left:2px solid var(--brass);
  font-family:var(--display);
  font-size:clamp(1.25rem,1.05rem + .8vw,1.7rem);
  font-style:italic;line-height:1.45;color:var(--ink);
}
.sig{
  margin-top:1.6rem;font-family:var(--display);font-size:1.5rem;color:var(--ink);
}
.sig span{display:block;font-family:var(--body);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-top:.3rem;}

/* team grid */
.team{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:clamp(1rem,2vw,1.6rem);
}
.member{
  position:relative;background:var(--paper);overflow:hidden;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.member:hover{transform:translateY(-6px);box-shadow:0 26px 50px -34px rgba(0,0,0,.34);}
.member-photo{position:relative;overflow:hidden;background:var(--accent,var(--brass));}
.member-photo img,
.member-photo::after{
  clip-path:polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%);
}
.member-photo img{width:100%;aspect-ratio:3/4;object-fit:cover;transition:transform .8s var(--ease);}
.member:hover .member-photo img{transform:scale(1.06);}
.member-photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(12,11,10,.72) 100%);
}
.member-social{
  position:absolute;z-index:2;right:.9rem;bottom:.9rem;
  display:flex;gap:.45rem;
  opacity:0;transform:translateY(10px);
  transition:opacity .45s var(--ease), transform .45s var(--ease);
}
.member:hover .member-social{opacity:1;transform:none;}
.member-social a{
  width:32px;height:32px;display:grid;place-items:center;
  background:rgba(255,255,255,.14);backdrop-filter:blur(6px);
  color:#fff;font-size:.75rem;
  transition:background .3s var(--ease), color .3s var(--ease);
}
.member-social a:hover{background:var(--brass);color:#fff;}
.member-body{padding:1.3rem 1.4rem 1.6rem;border-top:2px solid var(--accent,var(--brass));}
.member-body h3{font-size:1.18rem;}
.member-body .role{
  display:flex;align-items:center;gap:.55rem;margin-top:.45rem;
  font-size:.62rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--brass);
}
.member-body .role::before{
  content:"";width:5px;height:5px;border-radius:50%;
  background:var(--accent,var(--brass));flex:none;
}
.member-body p{margin-top:.75rem;font-size:.86rem;color:var(--muted);line-height:1.7;}

/* ==========================================================================
   VALUES / ACCORDION
   ========================================================================== */

.values{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);}
.value{background:var(--paper);padding:clamp(1.8rem,3vw,2.4rem);}
.value i{color:var(--brass);font-size:1.2rem;}
.value h3{font-size:1.2rem;margin:1rem 0 .6rem;}
.value p{font-size:.88rem;color:var(--muted);margin:0;}

.accordion{border-top:1px solid var(--line);}
.acc-item{border-bottom:1px solid var(--line);}
.acc-head{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:1.5rem 0;text-align:left;
  font-family:var(--display);font-size:clamp(1.1rem,1rem + .5vw,1.4rem);font-weight:600;color:var(--ink);
}
.acc-head i{color:var(--brass);font-size:.85rem;transition:transform .4s var(--ease);}
.acc-item.is-open .acc-head i{transform:rotate(45deg);}
.acc-body{max-height:0;overflow:hidden;transition:max-height .55s var(--ease);}
.acc-body p{padding:0 0 1.6rem;color:var(--muted);font-size:.93rem;max-width:70ch;}

/* ==========================================================================
   SERVICE DETAIL ROWS — no imagery; the numeral carries the column
   ========================================================================== */

.srow{
  display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(2rem,5vw,4.5rem);
  align-items:start;
  padding:clamp(2.6rem,5vw,4.2rem) 0;
  border-bottom:1px solid var(--line);
}
.srow:last-child{border-bottom:0;}

.srow-head{position:relative;padding-left:clamp(1.4rem,2.4vw,2.2rem);}
.srow-head::before{
  content:"";position:absolute;left:0;top:.5rem;bottom:.5rem;
  width:2px;background:var(--accent,var(--brass));
}
.srow-no{
  display:block;
  font-family:var(--display);font-weight:600;
  font-size:clamp(3.4rem,2.2rem + 4vw,5.6rem);
  line-height:.9;letter-spacing:-.03em;
  color:var(--accent,var(--brass));
}
.srow .eyebrow{color:var(--accent,var(--brass));margin:1.1rem 0 .9rem;}
.srow h2{font-size:clamp(1.7rem,1.35rem + 1.5vw,2.5rem);}

.srow-body .lede{max-width:58ch;}
.srow-body .checks{margin-top:1.7rem;}
.srow-body .checks i{color:var(--accent,var(--brass));}

/* ==========================================================================
   GALLERY — staggered masonry; each plate notched at the corner with the
   accent showing through, caption set below the image rather than over it
   ========================================================================== */

.gal-filter{
  display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2.6rem;
}
.gal-filter button{
  padding:.7rem 1.3rem;border:1px solid var(--line);
  font-size:.66rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  transition:all .35s var(--ease);
}
.gal-filter button:hover{border-color:var(--ink);color:var(--ink);}
.gal-filter button.is-active{background:var(--ink);border-color:var(--ink);color:#fff;}

.gallery{
  columns:3;
  column-gap:clamp(1rem,1.8vw,1.6rem);
}
.gal-item{
  break-inside:avoid;
  margin:0 0 clamp(1.6rem,2.6vw,2.4rem);
  display:block;
  cursor:pointer;
}
.gal-item.is-hidden{display:none;}

/* each plate takes one of the four accents, cycling down the wall */
.gal-item:nth-child(4n+1){--accent:var(--piece-1);}
.gal-item:nth-child(4n+2){--accent:var(--piece-2);}
.gal-item:nth-child(4n+3){--accent:var(--piece-3);}
.gal-item:nth-child(4n+4){--accent:var(--piece-4);}

.gal-frame{
  position:relative;display:block;overflow:hidden;
  background:var(--accent,var(--brass));
}
.gal-frame img{
  width:100%;display:block;object-fit:cover;
  clip-path:polygon(0 0, calc(100% - 34px) 0, 100% 34px, 100% 100%, 0 100%);
  transition:transform .9s var(--ease), filter .5s var(--ease);
}
/* Heights cycle on a four-step pattern against three columns. The two counts are
   coprime, so no two columns repeat the same sequence and the rows stay staggered. */
.gal-item:nth-child(4n+1) .gal-frame img{aspect-ratio:4/5;}
.gal-item:nth-child(4n+2) .gal-frame img{aspect-ratio:1/1;}
.gal-item:nth-child(4n+3) .gal-frame img{aspect-ratio:4/3;}
.gal-item:nth-child(4n+4) .gal-frame img{aspect-ratio:3/4;}

.gal-item:hover .gal-frame img{transform:scale(1.05);filter:brightness(.82);}
.gal-item:focus-visible .gal-frame img{filter:brightness(.82);}

/* the open affordance, tucked under the notch */
.gal-frame::after{
  content:"\f00e";
  font-family:"Font Awesome 6 Free";font-weight:900;
  position:absolute;top:.85rem;right:.85rem;z-index:2;
  font-size:.9rem;color:#fff;
  opacity:0;transform:translateY(-6px);
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.gal-item:hover .gal-frame::after{opacity:1;transform:none;}

.gal-cap{
  display:flex;flex-direction:column;gap:.35rem;
  padding:1rem .1rem 0;
}
.gal-cap b{
  font-family:var(--display);font-size:1.12rem;font-weight:600;
  color:var(--ink);line-height:1.2;
  transition:color .35s var(--ease);
}
.gal-item:hover .gal-cap b{color:var(--accent,var(--brass));}
.gal-cap span{
  display:flex;align-items:center;gap:.5rem;
  font-size:.6rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);
}
.gal-cap span::before{
  content:"";width:5px;height:5px;border-radius:50%;
  background:var(--accent,var(--brass));flex:none;
}

/* lightbox */
.lightbox{
  position:fixed;inset:0;z-index:400;
  background:rgba(12,11,10,.97);
  display:grid;place-items:center;
  padding:clamp(1rem,4vw,3rem);
  opacity:0;visibility:hidden;
  transition:opacity .4s var(--ease), visibility .4s var(--ease);
}
.lightbox.is-open{opacity:1;visibility:visible;}
.lightbox img{max-width:100%;max-height:78vh;object-fit:contain;}
.lb-cap{color:rgba(255,255,255,.72);text-align:center;margin-top:1.1rem;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;}
.lb-btn{
  position:absolute;top:50%;transform:translateY(-50%);
  width:52px;height:52px;display:grid;place-items:center;
  color:#fff;border:1px solid rgba(255,255,255,.25);font-size:1rem;
  transition:background .3s var(--ease), color .3s var(--ease);
}
.lb-btn:hover{background:var(--brass);color:#fff;border-color:var(--brass);}
.lb-prev{left:clamp(.6rem,3vw,2.5rem);}
.lb-next{right:clamp(.6rem,3vw,2.5rem);}
.lb-close{top:clamp(1rem,3vw,2rem);right:clamp(1rem,3vw,2rem);transform:none;}

/* ==========================================================================
   CONTACT
   ========================================================================== */

.contact-grid{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(2rem,4vw,3.5rem);align-items:start;
}
.cinfo{background:var(--ink);color:#fff;padding:clamp(2rem,3.6vw,3rem);position:relative;overflow:hidden;}
.cinfo h3{color:#fff;font-size:1.6rem;}
.cinfo-list{display:flex;flex-direction:column;gap:1.6rem;margin-top:2rem;position:relative;z-index:2;}
.cinfo-list li{display:flex;gap:1.1rem;align-items:flex-start;}
.cinfo-list i{
  width:40px;height:40px;flex:none;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.2);color:var(--brass-lt);font-size:.85rem;
}
.cinfo-list b{
  display:block;font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.5);font-weight:600;margin-bottom:.3rem;
}
.cinfo-list a,.cinfo-list p{color:#fff;font-size:.95rem;margin:0;}
.cinfo-list a:hover{color:var(--brass-lt);}
.cinfo .socials{display:flex;gap:.55rem;margin-top:2.4rem;position:relative;z-index:2;}
.cinfo .socials a{
  width:40px;height:40px;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.2);color:#fff;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.cinfo .socials a:hover{background:var(--brass);border-color:var(--brass);color:#fff;}

.form-card{background:var(--paper);padding:clamp(1.8rem,3.4vw,3rem);border:1px solid var(--line);}
.fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.15rem;}
.field{display:flex;flex-direction:column;gap:.5rem;}
.field.full{grid-column:1/-1;}
.field label{
  font-size:.6rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
}
.field input,.field select,.field textarea{
  font-family:var(--body);font-size:.94rem;color:var(--ink);
  padding:.95rem 1rem;background:var(--bone);
  border:1px solid transparent;border-bottom:1px solid var(--line);
  transition:border-color .3s var(--ease), background .3s var(--ease);
  width:100%;
}
.field textarea{resize:vertical;min-height:140px;}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;background:#fff;border-color:var(--brass);
}
.field input[readonly]{color:var(--muted);cursor:not-allowed;}
.form-note{font-size:.75rem;color:var(--muted);margin-top:1.1rem;}
.form-status{
  margin-top:1.1rem;padding:.9rem 1.1rem;font-size:.85rem;display:none;
  border-left:3px solid var(--brass);background:var(--bone);
}
.form-status.is-shown{display:block;}
.form-status.ok{border-left-color:#3d7a5f;}
.form-status.err{border-left-color:#a8433a;}

.map-frame{border:1px solid var(--line);line-height:0;background:var(--bone);}
.map-frame iframe{width:100%;height:clamp(300px,42vw,440px);border:0;filter:grayscale(1) contrast(1.05);transition:filter .6s var(--ease);}
.map-frame:hover iframe{filter:grayscale(0);}

/* ==========================================================================
   FOUNDER STRIP — portrait beside the quote
   ========================================================================== */

.founder{position:relative;overflow:hidden;}
.founder .shell{position:relative;z-index:2;}

.founder-grid{
  display:grid;
  grid-template-columns:minmax(0,.42fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4.5rem);
  align-items:center;
}

.founder-photo{
  position:relative;margin:0;
  max-width:340px;
  background:var(--brass);
}
.founder-photo img{
  width:100%;aspect-ratio:4/5;object-fit:cover;display:block;
  /* same notched corner as the team cards and gallery plates */
  clip-path:polygon(0 0, calc(100% - 34px) 0, 100% 34px, 100% 100%, 0 100%);
}
.founder-photo::after{
  content:"";position:absolute;
  right:-14px;bottom:-14px;
  width:58%;height:44%;
  border-right:1px solid var(--brass);
  border-bottom:1px solid var(--brass);
  pointer-events:none;
}
.founder-body{position:relative;}
.founder-body .quote-mark{
  position:absolute;z-index:0;
  top:clamp(-4.5rem,-6vw,-2.5rem);left:-.6rem;
  font-family:var(--display);font-weight:700;
  font-size:clamp(8rem,14vw,12rem);line-height:.78;
  color:var(--brass);opacity:.13;
  pointer-events:none;user-select:none;
}
.founder-body > *:not(.quote-mark){position:relative;z-index:1;}

.founder blockquote{
  margin:1rem 0 0;
  font-family:var(--display);font-style:italic;
  font-size:clamp(1.45rem,1.1rem + 1.7vw,2.5rem);
  line-height:1.36;color:#fff;
  max-width:26ch;
}
.founder .sig{
  margin-top:1.9rem;color:var(--brass-lt);
  display:inline-flex;flex-direction:column;gap:.5rem;
}
.founder .sig span{color:rgba(255,255,255,.5);margin-top:0;}
.founder .sig::after{
  content:"";width:46px;height:1px;background:var(--brass);opacity:.6;
}

/* ==========================================================================
   CTA BAND
   ========================================================================== */

.cta-band{
  position:relative;overflow:hidden;
  background:var(--ink-deep);color:#fff;
  padding:clamp(3.5rem,7vw,6rem) 0;
  text-align:center;
}
.cta-band img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.2;
}
.cta-band .shell{position:relative;z-index:2;}
.cta-band h2{color:#fff;max-width:20ch;margin-inline:auto;}
.cta-band .lede{color:rgba(255,255,255,.68);margin:1.3rem auto 2.2rem;text-align:center;}
.cta-actions{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center;}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.site-foot{background:var(--ink);color:rgba(255,255,255,.62);padding:clamp(3rem,6vw,4.5rem) 0 0;}
.foot-grid{
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;
  gap:clamp(1.8rem,4vw,3rem);
  padding-bottom:clamp(2.4rem,4vw,3.4rem);
}
.site-foot h4{
  color:#fff;font-family:var(--body);
  font-size:.63rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  margin:0 0 1.35rem;
}
.site-foot .brand-name{color:#fff;}
.site-foot .brand-sub{color:rgba(255,255,255,.45);}
.foot-about p{font-size:.88rem;margin-top:1.3rem;max-width:34ch;line-height:1.75;}
.foot-links li{margin-bottom:.7rem;}
.foot-links a{font-size:.88rem;transition:color .3s var(--ease),padding-left .3s var(--ease);}
.foot-links a:hover{color:var(--brass-lt);padding-left:.4rem;}
.foot-contact li{display:flex;gap:.85rem;margin-bottom:1rem;font-size:.88rem;align-items:flex-start;}
.foot-contact i{color:var(--brass-lt);font-size:.8rem;margin-top:.4rem;flex:none;}
.foot-contact a:hover{color:var(--brass-lt);}
.foot-socials{display:flex;gap:.5rem;margin-top:1.4rem;}
.foot-socials a{
  width:36px;height:36px;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.18);color:#fff;font-size:.75rem;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.foot-socials a:hover{background:var(--brass);border-color:var(--brass);color:#fff;}

.foot-base{
  border-top:1px solid rgba(255,255,255,.11);
  padding:1.5rem 0;
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;
  font-size:.75rem;color:rgba(255,255,255,.48);
}
.foot-base a{color:var(--brass-lt);}
.foot-base a:hover{color:var(--brass-lt);}

.to-top{
  position:fixed;right:1.4rem;bottom:1.4rem;z-index:150;
  width:46px;height:46px;display:grid;place-items:center;
  background:var(--ink);color:var(--brass-lt);
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:all .4s var(--ease);
}
.to-top.is-shown{opacity:1;visibility:visible;transform:none;}
.to-top:hover{background:var(--brass);color:#fff;}

/* ==========================================================================
   SCROLL REVEAL
   ========================================================================== */

[data-reveal]{
  opacity:0;
  transform:translate3d(0,30px,0);
  transition:opacity .85s var(--ease), transform .95s var(--ease);
  transition-delay:var(--d,0ms);
  will-change:opacity,transform;
}
[data-reveal="left"]{transform:translate3d(-40px,0,0);}
[data-reveal="right"]{transform:translate3d(40px,0,0);}
[data-reveal="scale"]{transform:scale(.94);}
[data-reveal].is-in{opacity:1;transform:none;}

/* Mask reveal wipes the media itself, never the observed container.
   Clipping the container to zero height makes IntersectionObserver report no
   intersection, so it would never fire and the image would stay hidden forever. */
[data-reveal="mask"]{opacity:1;transform:none;}
[data-reveal="mask"] > img,
[data-reveal="mask"] > iframe{
  clip-path:inset(0 0 100% 0);
  transition:clip-path 1.05s var(--ease);
  transition-delay:var(--d,0ms);
}
[data-reveal="mask"].is-in > img,
[data-reveal="mask"].is-in > iframe{clip-path:inset(0 0 0 0);}

/* count-up numbers hold layout while animating */
[data-count]{font-variant-numeric:tabular-nums;}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width:1080px){
  .pieces{grid-template-columns:repeat(2,minmax(0,1fr));}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));}
  .foot-grid{grid-template-columns:1fr 1fr;}
}

@media (max-width:960px){
  :root{--shell:min(1240px,100% - 2.4rem);--shell-w:min(1440px,100% - 2.4rem);}
  .nav-list,.nav .nav-cta{display:none;}
  .burger{display:flex;}

  .hero{min-height:min(88vh,720px);}
  .hero-copy{max-width:100%;}
  .hero-dots{right:1.2rem;}
  .hero-count{right:1.2rem;}

  .split,.ceo,.contact-grid,.sec-head-split{grid-template-columns:1fr;}
  .founder-grid{grid-template-columns:1fr;gap:2rem;}
  .founder-photo{max-width:250px;}
  .founder-body .quote-mark{top:-1rem;left:-.3rem;font-size:5.5rem;opacity:.16;}
  .split.reverse .split-media{order:0;}
  .ceo-photo{max-width:420px;}
  .ceo-photo::before{right:-10px;bottom:-10px;}

  .gallery{columns:2;}
  .srow{grid-template-columns:1fr;}
  .srow-head{padding-left:1.1rem;}
}

@media (max-width:640px){
  :root{--nav-h:70px;}
  .pieces{grid-template-columns:1fr;}
  .stats{grid-template-columns:1fr 1fr;}
  .foot-grid{grid-template-columns:1fr;}
  .fgrid{grid-template-columns:1fr;}
  .hero-meta{gap:1.6rem;}
  .hero-meta b{font-size:1.7rem;}
  .gallery{columns:1;}
  .foot-base{justify-content:center;text-align:center;}
  .lb-btn{width:42px;height:42px;}
}

/* ==========================================================================
   MOTION PREFERENCES
   ========================================================================== */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  [data-reveal],[data-assemble]{opacity:1 !important;transform:none !important;}
  [data-reveal="mask"] > img,[data-reveal="mask"] > iframe{clip-path:none !important;}
  .hero-slide.is-active img{animation:none;transform:scale(1.02);}
  .hero-copy > *,.hero-veil,.hero-count,.hero-dots{opacity:1 !important;transform:none !important;}
  .ticker-track{animation:none;}
}

/* ==========================================================================
   PRINT
   ========================================================================== */

@media print{
  .site-head,.drawer,.to-top,.hero-dots,.cta-band{display:none !important;}
  body{background:#fff;color:#000;}
  [data-reveal]{opacity:1 !important;transform:none !important;}
  [data-reveal="mask"] > img,[data-reveal="mask"] > iframe{clip-path:none !important;}
}