/* ==========================================================================
   AV Acoustics Pvt. Ltd.
   Type follows the reference site (foundformed.framer.website), measured
   in a browser: DM Sans Light for nearly everything, at normal tracking and
   in sentence case; Newsreader italic for section labels and list numerals;
   Inter Light for captions and descriptions. (This departs from the brand
   guidelines' Archivo / IBM Plex at the client's request.)
   Colour, logo use and setting rules still follow the brand guidelines
   (Assets/av-acoustics-brandguidelines.pdf, v1.0):
   - Setting: left-aligned, ragged right, no justification, no all-caps body
     copy, no letter-spacing on lowercase text, ≤75 characters a line.
   - Palette: Paper, Stage Black, Console Grey, Steel, Signal Red (roughly
     60 · 25 · 9 · 6). Red is the accent — rules, numerals, one CTA.
     Body text is Stage Black or Console Grey; Steel only for rules, fills,
     large type, or on black.
   Motion lives in js/site.js (Lenis + ScrollTrigger).
   ========================================================================== */

:root{
  --paper:#F7F7F6;   /* Paper        */
  --black:#141414;   /* Stage Black  */
  --grey:#3E3E3E;    /* Console Grey */
  --steel:#8A8D8F;   /* Steel        */
  --red:#D41F2A;     /* Signal Red   */
  --on-dark:rgba(255,255,255,.8);    /* secondary copy on black */
  --rule:rgba(138,141,143,.4);       /* rules are Steel */
  --rule-dk:rgba(138,141,143,.34);

  /* the reference site's three faces */
  --sans:"DM Sans",Arial,sans-serif;
  --serif:"Newsreader",Georgia,serif;      /* italic only: labels, numerals */
  --caption:"Inter",Arial,sans-serif;      /* captions and descriptions */

  /* One fluid unit, behind every type size and the logo.
     It is 1% of the window's width — so the page keeps growing on a 27"
     display instead of stopping at laptop size — but never more than a
     16:9 share of the window's height, so a short, wide browser window
     does not end up with a header and headlines too tall to fit.
     Each size is written clamp(phone size, N × --fu, size at 2560px). */
  --fu:min(1vw,1.78vh);

  --pad:clamp(18px,3.6vw,92px);
  /* header geometry, shared so the open menu can start just below it */
  --head-pad:clamp(16px,calc(2.2*var(--fu)),46px);
  --logo-h:clamp(54px,calc(4.6*var(--fu)),118px);
  --head-h:calc(var(--logo-h) + 2 * var(--head-pad));
  --ease:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--paper);color:var(--black);
  font-family:var(--sans);font-weight:300;font-size:clamp(16px,calc(.95*var(--fu)),24px);line-height:1.45;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body.is-loading{overflow:hidden;}
body.menu-open{overflow:hidden;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h2,h3{margin:0;font-family:var(--sans);font-weight:300;}
p{margin:0;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
ol{margin:0;padding:0;list-style:none;}
:focus-visible{outline:2px solid var(--red);outline-offset:4px;}

/* small meta line: the reference's 13px DM Sans, no caps or tracking */
.mn{font-family:var(--sans);font-weight:400;font-size:clamp(13px,calc(.8*var(--fu)),20px);letter-spacing:0;color:var(--grey);}
.sec-tag{display:block;margin-bottom:clamp(24px,4vw,102px);
  font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(19px,calc(1.7*var(--fu)),44px);line-height:1.2;}
.sec-tag em,.num{font-style:italic;color:var(--red);} /* numerals take the red */

/* ================================ loader ================================ */
.loader{
  position:fixed;inset:0;z-index:300;background:var(--black);color:#fff;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:var(--pad);gap:18px;
}
.loader-row{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;}
/* the supplied reverse lockup, at no less than the 140px screen minimum */
.loader-logo{height:clamp(54px,4.6vw,118px);width:auto;}
.loader-num{font-family:var(--sans);font-weight:300;font-size:clamp(40px,calc(8*var(--fu)),205px);letter-spacing:0;line-height:1;}
.loader-line{height:2px;background:rgba(138,141,143,.3);}
.loader-line i{display:block;height:100%;width:0;background:var(--red);}

/* ================================ cursor ================================ */
.cursor{
  position:fixed;top:0;left:0;z-index:250;pointer-events:none;display:none;
  width:8px;height:8px;border-radius:50%;background:var(--red);
  transition:width .35s var(--ease),height .35s var(--ease);
}
.cursor.on{display:block;}
.cursor.grow{width:88px;height:88px;}
.cursor span{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--sans);font-weight:500;font-size:12px;letter-spacing:0;
  color:#fff;opacity:0;transition:opacity .25s;
}
.cursor.grow span{opacity:1;}

/* ================================ header ================================ */
.head{
  position:fixed;top:0;left:0;right:0;z-index:200;
  display:flex;justify-content:space-between;align-items:center;
  padding:var(--head-pad) var(--pad);
  transition:background-color .35s ease;
}
/* over light ground: a solid Paper strip, so scrolling type never enters the
   logo's clear space (see paintHead in js/site.js) */
.head.is-solid{background:var(--paper);}
.menu-open .head{background:var(--black);}
/* The logo is a coloured image, so the header cannot simply invert against
   what is behind it (that turned the text white and the red cyan). Instead
   js/site.js checks the ground at the top edge and sets .on-dark on the logo
   and Menu; the logo cross-fades to the reverse version.
   Height keeps the lockup at or above the 140px screen minimum. */
.head-mark{position:relative;display:block;height:var(--logo-h);}
.logo{display:block;height:100%;width:auto;transition:opacity .35s ease;}
.logo--light{position:absolute;left:0;top:0;opacity:0;}
.head-mark.on-dark .logo--ink,.menu-open .logo--ink{opacity:0;}
.head-mark.on-dark .logo--light,.menu-open .logo--light{opacity:1;}
.head-menu{
  display:flex;align-items:center;gap:12px;color:var(--black);transition:color .35s ease;
  /* sized to stand beside the logo, with a generous hit area */
  padding:10px 0 10px 14px;margin-right:-2px;
  font-family:var(--sans);font-weight:400;font-size:clamp(16px,calc(1.3*var(--fu)),33px);letter-spacing:0;text-transform:uppercase;
}
.head-menu.on-dark,.menu-open .head-menu{color:#fff;}
.head-plus{display:inline-block;font-size:1.45em;font-weight:400;line-height:1;transition:transform .5s var(--ease);}
.menu-open .head-plus{transform:rotate(135deg);}

/* =============================== overlay ================================ */
.overlay{
  position:fixed;inset:0;z-index:190;background:var(--black);color:#fff;
  display:flex;flex-direction:column;justify-content:space-between;gap:clamp(20px,4vh,48px);
  /* starts just under the real header height, whatever the screen */
  padding:calc(var(--head-h) + clamp(10px,3vh,40px)) var(--pad) var(--pad);
  /* on a screen too small for everything, the panel scrolls rather than
     clipping (data-lenis-prevent lets it while the page is locked) */
  overflow-y:auto;overscroll-behavior:contain;
  clip-path:inset(0 0 100% 0);visibility:hidden;
  transition:clip-path 1s var(--ease),visibility 1s;
}
.menu-open .overlay{clip-path:inset(0 0 0 0);visibility:visible;}
/* The list fills the screen: its rules run the full content width (the
   same left and right edges as the contacts below), and the five rows share
   the height between the header and the contacts, so the lines are spaced
   evenly top to bottom instead of stopping partway across. */
.ov-nav{flex:1;display:flex;flex-direction:column;min-height:0;border-top:1px solid var(--rule-dk);}
.ov-nav a{
  flex:1 1 auto;
  /* grid so the numeral and the word share a baseline while the pair sits
     in the vertical middle of its row */
  display:grid;grid-template-columns:auto 1fr;column-gap:clamp(16px,2vw,51px);
  align-items:baseline;align-content:center;
  padding:clamp(6px,1.2vh,14px) 0;border-bottom:1px solid var(--rule-dk);
  opacity:0;transform:translateX(-60px);
  /* transitions rather than keyframes, so closing fades the links out
     instead of dropping them before the panel has wiped away */
  transition:opacity .35s ease,transform .5s var(--ease);
}
.menu-open .ov-nav a{opacity:1;transform:none;transition:opacity .9s var(--ease),transform .9s var(--ease);}
.menu-open .ov-nav a:nth-child(1){transition-delay:.2s;}
.menu-open .ov-nav a:nth-child(2){transition-delay:.27s;}
.menu-open .ov-nav a:nth-child(3){transition-delay:.34s;}
.menu-open .ov-nav a:nth-child(4){transition-delay:.41s;}
.menu-open .ov-nav a:nth-child(5){transition-delay:.48s;}
.ov-nav i{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(14px,calc(1.2*var(--fu)),31px);color:var(--red);min-width:2ch;}
.ov-nav span{
  /* DM Sans Light, as the reference's menu. Sized by the screen's
     height as well as its width, so the five rows and the contacts always
     fit: ~41px on a 1440×900 laptop, ~48px on large screens, ~33px on a
     phone, and shorter windows scale down instead of colliding. */
  font-family:var(--sans);font-weight:300;letter-spacing:0;
  font-size:clamp(22px,min(4.6vh,8.4vw),72px);line-height:1.2;
  transition:transform .5s var(--ease),color .3s;display:inline-block;
}
.ov-nav a:hover span{transform:translateX(12px);color:var(--red);}
.ov-foot{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,3vw,77px);}
.ov-foot .mn{color:var(--steel);}
.ov-foot .mn{font-size:clamp(16px,calc(1.02*var(--fu)),26px);}
.ov-foot p{margin-top:8px;font-size:clamp(15px,calc(1*var(--fu)),26px);color:var(--on-dark);line-height:1.55;}
@media(max-width:760px){.ov-foot{grid-template-columns:1fr;gap:14px;}.ov-foot p{font-size:13.5px;}}
/* short, wide screens (a phone on its side): links in two columns */
@media(max-height:520px) and (min-width:600px){
  .ov-nav{display:grid;grid-template-columns:1fr 1fr;align-content:center;column-gap:clamp(24px,4vw,102px);border-top:0;}
  .ov-nav a{flex:none;}
  .ov-nav a:nth-child(-n+2){border-top:1px solid var(--rule-dk);}
}

/* ================================= hero ================================= */
/* Curtain: the hero sticks and the sheet (everything after it) slides up
   over it. The sheet needs its own ground and a higher layer to cover it. */
.hero{
  position:sticky;top:0;z-index:1;height:100svh;overflow:hidden;background:var(--black);color:#fff;
}
.hero.is-covered{visibility:hidden;} /* fully under the sheet: stop painting it */
.sheet{position:relative;z-index:2;background:var(--paper);}
.hero-media{position:absolute;inset:0;will-change:transform;}
.hero-media img{width:100%;height:100%;object-fit:cover;transform-origin:center;}
/* a neutral shade top and bottom so white type holds — no colour cast, which
   the guidelines rule out for photographs */
.hero-veil{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(20,20,20,.5) 0%,rgba(20,20,20,.12) 32%,
                    rgba(20,20,20,.14) 58%,rgba(20,20,20,.58) 100%);
}
.hero-type{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;justify-content:center;
  padding:0 var(--pad);pointer-events:none;
}
/* the reference's LIVING / FUNCTION: DM Sans Light capitals, no tracking */
.ht-line{
  display:block;font-family:var(--sans);font-weight:300;
  font-size:clamp(56px,calc(11.4*var(--fu)),292px);letter-spacing:0;line-height:1;text-transform:uppercase;
}
.ht-line--b{margin-left:clamp(24px,9vw,230px);}
.ht-sub{
  display:block;margin-top:clamp(20px,3.4vh,44px);margin-left:clamp(24px,9vw,230px);
  font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(18px,calc(1.6*var(--fu)),41px);letter-spacing:0;
  color:rgba(255,255,255,.9);
}
@media(max-width:700px){.ht-line{font-size:13.5vw;}}

.hero-corner{position:absolute;z-index:3;}
/* Hung off the real header height rather than a fixed figure, so it stays
   clear of the logo's clear space on a large display, where the logo itself
   is much taller than it is on a laptop. */
.hero-corner--tl{top:calc(var(--head-h) + clamp(8px,1.6vh,30px));left:var(--pad);}
.hero-corner--bl{bottom:clamp(22px,4vh,44px);left:var(--pad);max-width:44ch;}
.hero-corner--bl p{font-size:clamp(16px,calc(1*var(--fu)),26px);line-height:1.45;color:#fff;text-shadow:0 1px 22px rgba(20,20,20,.55);}
.hero-corner--br{bottom:clamp(22px,4vh,44px);right:var(--pad);}
.hero-corner .mn{color:#fff;text-shadow:0 1px 18px rgba(20,20,20,.5);}
.hero-corner--tl .mn{font-size:clamp(15px,calc(1.2*var(--fu)),31px);}
.hero-scroll{display:flex;align-items:center;gap:10px;}
.hero-scroll i{
  display:block;width:34px;height:1px;background:rgba(255,255,255,.6);position:relative;overflow:hidden;
}
.hero-scroll i::after{content:"";position:absolute;inset:0;background:#fff;animation:sweep 2.4s var(--ease) infinite;}
@keyframes sweep{0%{transform:translateX(-100%);}60%,100%{transform:translateX(100%);}}
@media(max-width:640px){
  .hero-corner--bl{max-width:30ch;}
  .hero-corner--br{display:none;}
}

/* ================================ ticker ================================ */
.ticker{overflow:hidden;white-space:nowrap;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:clamp(14px,1.6vw,41px) 0;}
.ticker-row{display:inline-flex;align-items:center;gap:clamp(18px,2.4vw,61px);will-change:transform;}
.ticker-row span{font-family:var(--sans);font-weight:300;font-size:clamp(17px,calc(1.3*var(--fu)),33px);letter-spacing:0;color:var(--black);}
.ticker-row em{color:var(--red);font-style:normal;}

/* =============================== statement ============================== */
.statement{padding:clamp(80px,15vh,190px) var(--pad) clamp(60px,10vh,130px);}
/* statements: the reference's "Where Spaces Breathe…" — DM Sans Light */
.lead-text{
  font-family:var(--sans);font-weight:300;
  font-size:clamp(30px,calc(4*var(--fu)),102px);line-height:1.2;letter-spacing:0;
  max-width:22ch;color:var(--black);text-wrap:pretty;
}
.statement-foot{
  display:flex;justify-content:space-between;align-items:flex-end;gap:clamp(24px,5vw,128px);
  margin-top:clamp(46px,8vh,110px);flex-wrap:wrap;
}
.body-text{font-size:clamp(16.5px,calc(1.05*var(--fu)),27px);line-height:1.5;color:var(--grey);max-width:60ch;text-wrap:pretty;}
.ln{position:relative;font-weight:400;font-size:clamp(16px,calc(1*var(--fu)),26px);padding-bottom:4px;white-space:nowrap;}
.ln::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;background:var(--red);
  transform-origin:right;transition:transform .5s var(--ease);}
.ln:hover::after{transform:scaleX(0);}

/* =============================== figures ================================ */
/* figures: DM Sans Light, numerals in the red accent */
.figures{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:2px solid var(--black);
}
.fig{padding:clamp(24px,3vw,77px) var(--pad);border-right:1px solid var(--rule);}
.fig:last-child{border-right:0;}
.fig b{display:block;font-family:var(--sans);font-weight:300;color:var(--red);
  font-size:clamp(36px,calc(4.4*var(--fu)),113px);letter-spacing:0;line-height:1.1;margin-bottom:12px;}
@media(max-width:820px){.figures{grid-template-columns:repeat(2,1fr);}
  .fig:nth-child(2){border-right:0;}.fig:nth-child(-n+2){border-bottom:1px solid var(--rule);}}
/* one column below 480px: "All-India" cannot fit a half-width column */
@media(max-width:480px){
  .figures{grid-template-columns:1fr;}
  .fig{border-right:0;border-bottom:1px solid var(--rule);}
  .fig:last-child{border-bottom:0;}
  .fig b{font-size:clamp(30px,calc(9*var(--fu)),230px);}
}

/* ========================== the pile, exploding ========================= *
   A sticky stage. The stage locks to the top of the screen and the
   photographs spread out of an enlarged pile in the middle as you keep
   scrolling: the section is one screen for the stage plus the 70svh over
   which the spread plays (js/site.js reads that figure back off these two
   heights). Nothing is held still — a held frame reads as a stuck page.
   ----------------------------------------------------------------------- */
.scatter{position:relative;height:170svh;}  /* 100svh of stage + 70svh of spread */
.scatter-stage{position:sticky;top:0;height:100svh;overflow:hidden;}
.sc{position:absolute;margin:0;overflow:hidden;will-change:transform;}
.sc img{width:100%;height:100%;object-fit:cover;display:block;}

/* One size for every frame and an even zig-zag across the stage, as the
   reference sets its pile (all six of its photographs are 20.6% wide, 3:2).
   Mixed sizes and shapes were what left uneven holes between them. The
   width is capped by height too, so a short, wide screen still fits. */
.sc{width:min(20.6vw,34svh);aspect-ratio:3/2;}
.sc--1{left:0%;    top:22%;}
.sc--2{left:14%;   top:62%;}
.sc--3{left:30%;   top:2%;}
.sc--4{left:44%;   top:74%;}
.sc--5{left:60%;   top:10%;}
.sc--6{left:79.4%; top:44%;}
.sc--7{left:66%;   top:72%;}

.sc-cap{
  position:absolute;z-index:3;margin:0;
  /* Newsreader italic, the site's accent face, a little larger */
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(19px,calc(1.7*var(--fu)),44px);line-height:1.4;
  color:var(--black);white-space:nowrap; /* lines break where the <br> says */
}
.sc-cap--a{left:38%;top:40%;}
.sc-cap--b{left:46%;top:53%;}

@media(max-width:900px){
  .scatter{height:auto;padding:clamp(60px,10vh,110px) var(--pad);}
  /* minmax(0,…): a plain 1fr track grows to the photo's natural width, which
     widened the whole page on phones and zoomed it out */
  .scatter-stage{position:static;height:auto;overflow:visible;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
  .sc{position:static;width:auto !important;aspect-ratio:4/3 !important;}
  .sc--3,.sc--5,.sc--7{aspect-ratio:3/4 !important;}
  .sc-cap{position:static;grid-column:1/-1;order:-1;white-space:normal;}
  .sc-cap--b{margin-bottom:24px;}
}

/* ============================ stacked work ============================== *
   Every panel is sticky at the top, so each one slides up over the last.
   ----------------------------------------------------------------------- */
.work{position:relative;background:var(--black);color:#fff;}
.work-intro{padding:clamp(110px,17vh,200px) var(--pad) clamp(60px,10vh,120px);}
.work-intro .mn{color:var(--steel);}
.panel{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--black);color:#fff;}
.panel-media{position:absolute;left:0;right:0;top:-10%;height:120%;will-change:transform;}
.panel-media img{width:100%;height:100%;object-fit:cover;}
/* A portrait photograph in a landscape panel loses most of the room to the
   crop, so this variant shows the whole frame and fills the rest with a
   blurred, darkened copy of it rather than dead black. Its parallax is
   skipped in js/site.js so nothing is pushed out of view. */
.panel-media--fit{top:0;height:100%;}
.panel-media--fit img{position:relative;z-index:1;object-fit:contain;}
.panel-media--fit::before{
  content:"";position:absolute;inset:0;
  background:var(--img) center/cover;filter:blur(34px) brightness(.72);transform:scale(1.12);
}
/* a flat neutral 40% shade so white type holds on any photograph */
.panel::after{content:"";position:absolute;inset:0;background:rgba(20,20,20,.4);}
.panel-copy{
  position:absolute;inset:0;z-index:2;
  display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:1fr auto;
  column-gap:clamp(20px,4vw,102px);
  padding:clamp(110px,15vh,150px) var(--pad) clamp(40px,9vh,100px);
}
/* each line is its own clipping box so the type rises into it */
.panel-num,.panel-title,.panel-desc{display:block;overflow:hidden;padding:.1em 0 .16em;margin:-.1em 0 -.16em;}
.panel-num > span,.panel-title > span,.panel-desc > span{display:inline-block;will-change:transform;}
.panel-num{grid-column:1/-1;align-self:start;font-family:var(--sans);font-weight:300;
  font-size:clamp(48px,calc(6.67*var(--fu)),171px);letter-spacing:0;line-height:1.1;}
.panel-title{grid-column:1;align-self:end;text-wrap:balance;font-family:var(--sans);font-weight:300;
  font-size:clamp(40px,calc(6.67*var(--fu)),171px);letter-spacing:0;line-height:1.1;}
.panel-desc{grid-column:2;align-self:end;margin-bottom:.9em;
  font-family:var(--caption);font-weight:300;font-size:clamp(17px,calc(1.46*var(--fu)),37px);line-height:1.2;letter-spacing:0;max-width:24ch;}
@media(max-width:760px){
  .panel-copy{grid-template-columns:1fr;grid-template-rows:1fr auto auto;}
  .panel-desc{grid-column:1;margin:14px 0 0;}
}

/* =============================== full bleed ============================= */
/* A landscape band the width of the screen, with the whole photograph
   uncropped inside it and a blurred, darkened copy of itself filling the
   rest — the square original would otherwise have to be cut to fit.
   (js/site.js pushes nothing here: scaling would crop it again.) */
.bleed{
  position:relative;height:min(86svh,100vw);overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.bleed::before{
  content:"";position:absolute;inset:0;
  background:var(--img) center/cover;filter:blur(34px) brightness(.72);transform:scale(1.12);
}
.bleed img{position:relative;z-index:1;width:auto;height:100%;max-width:100%;object-fit:contain;}
/* a soft foot so the caption reads against the picture */
.bleed::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:34%;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,20,20,0),rgba(20,20,20,.62));
}
.bleed-cap{position:absolute;left:var(--pad);bottom:clamp(16px,3vh,30px);z-index:2;}
.bleed-cap .mn{color:#fff;}

/* ============================== capabilities ============================ */
.caps{padding:clamp(80px,14vh,180px) var(--pad);}
/* section titles: the reference's "What We Do" — DM Sans Light, sentence case */
.sec-title{text-wrap:balance;font-family:var(--sans);font-weight:300;
  font-size:clamp(40px,calc(6.67*var(--fu)),171px);letter-spacing:0;line-height:1.1;}
.caps-head{margin-bottom:clamp(46px,8vh,100px);}
.caps-list{border-top:2px solid var(--black);}
.caps-list li{
  display:grid;grid-template-columns:70px minmax(0,1fr) minmax(0,1.5fr);
  gap:clamp(14px,2.4vw,61px);align-items:baseline;
  padding:clamp(20px,2.6vw,67px) 0;border-bottom:1px solid var(--rule);
  transition:padding-left .55s var(--ease);
}
.caps-list li:hover{padding-left:clamp(8px,1.4vw,36px);}
.caps-list i{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--red);}
/* list items: the reference's services list, 28px Light */
.caps-list b{font-family:var(--sans);font-weight:300;font-size:clamp(22px,calc(1.9*var(--fu)),49px);letter-spacing:0;line-height:1.2;}
.caps-list p{font-size:clamp(16px,calc(1*var(--fu)),26px);line-height:1.5;color:var(--grey);max-width:62ch;}
@media(max-width:820px){
  .caps-list li{grid-template-columns:44px minmax(0,1fr);gap:12px;}
  .caps-list p{grid-column:2;}
}

/* ================================ process =============================== */
.process{padding:clamp(70px,12vh,160px) var(--pad);border-top:1px solid var(--rule);}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,77px);margin-top:clamp(44px,7vh,90px);}
.step{border-top:2px solid var(--black);padding-top:20px;}
.step i{display:block;margin-bottom:14px;font-family:var(--serif);font-style:italic;font-size:clamp(16px,calc(1*var(--fu)),26px);color:var(--red);}
.step b{display:block;font-family:var(--sans);font-weight:300;font-size:clamp(21px,calc(1.9*var(--fu)),49px);letter-spacing:0;line-height:1.2;margin-bottom:10px;}
.step p{font-size:clamp(16px,calc(1*var(--fu)),26px);line-height:1.5;color:var(--grey);}
@media(max-width:900px){.steps{grid-template-columns:repeat(2,1fr);}}
@media(max-width:540px){.steps{grid-template-columns:1fr;}}

/* ================================= pair ================================= */
.pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2.4vw,61px);padding:0 var(--pad) clamp(60px,10vh,120px);}
.pair figure{margin:0;}
/* The frame is a ratio, not a pixel height: a fixed height turned each
   photograph into a letterbox slot as the column grew — 1157 x 640 on a
   2560px display — and the clipping sat on the figure, so the scaled image
   rode down over its own caption. The caption now sits outside the mask. */
.pair-media{overflow:hidden;aspect-ratio:3/2;max-height:78svh;}
.pair img{width:100%;height:100%;object-fit:cover;will-change:transform;}
.pair figcaption{margin-top:14px;}
@media(max-width:760px){
  .pair{grid-template-columns:1fr;}
  /* one column is narrow, so a squarer frame keeps the room readable */
  .pair-media{aspect-ratio:4/3;}
}

/* ================================= quote ================================ */
.quote{padding:clamp(70px,13vh,170px) var(--pad);border-top:1px solid var(--rule);}
.quote .lead-text{max-width:26ch;}

/* ================================== cta ================================= */
.cta{position:relative;border-top:1px solid var(--rule);}
/* the stage sticks while the photo layer (pulled up over it) scrolls through */
.cta-stage{
  position:sticky;top:0;z-index:2;height:100svh;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;
  padding:0 var(--pad) clamp(96px,18vh,190px);
}
/* see-through type: the photographs travelling behind show through the
   letters instead of being hidden by them */
.cta-title{margin:0;font-family:var(--sans);font-weight:300;
  font-size:clamp(60px,calc(10*var(--fu)),256px);letter-spacing:0;line-height:1;
  color:transparent;-webkit-text-stroke:clamp(1px,.13vw,3px) var(--black);}
.cta-line{display:block;will-change:transform;}
/* both lines left-aligned (the guidelines set nothing flush right); the
   second is simply indented further */
.cta-line--a{padding-left:4vw;}
.cta-line--b{padding-left:clamp(40px,24vw,614px);}
/* sits at the foot of the screen, with the headline centred above it */
.cta-foot{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(30px,6vh,70px);
  display:flex;justify-content:space-between;align-items:flex-end;gap:clamp(24px,5vw,128px);flex-wrap:wrap;}
/* Full-strength ink on its own Paper plate: against the page the plate is
   invisible (same colour), and when a photograph passes behind, the words
   stay crisp while the picture still shows faintly through. */
.cta-foot .body-text{
  /* Newsreader italic — the site's accent face, as the hero's
     "Designed, built and measured" and the section labels use */
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(19px,calc(1.7*var(--fu)),44px);line-height:1.45;max-width:34ch;
  color:var(--black);
  background:rgba(247,247,246,.88);
  padding:14px 18px;margin-left:-18px;border-radius:3px;
}
@media(max-width:760px){.cta-foot .body-text{padding:12px 14px;margin-left:-14px;}}
.cta-fly{position:relative;z-index:1;height:240svh;margin-top:-100svh;pointer-events:none;}
.fly{position:absolute;display:block;object-fit:cover;}
/* sized as the reference sets the photographs that travel through its
   contact section: three at 23vw and one wide one at 39vw */
.fly--1{left:6%;  top:100svh; width:clamp(170px,23vw,589px); aspect-ratio:3/4;}
.fly--2{right:5%; top:128svh; width:clamp(220px,39vw,998px); aspect-ratio:16/9;}
.fly--3{left:20%; top:160svh; width:clamp(180px,23vw,589px); aspect-ratio:4/3;}
.fly--4{right:12%;top:190svh; width:clamp(170px,23vw,589px); aspect-ratio:3/2;}
.cta-btns{display:flex;gap:10px;flex-wrap:wrap;}
.btn{
  display:inline-block;padding:17px 32px;border-radius:999px;
  font-family:var(--sans);font-weight:500;font-size:clamp(15px,calc(.95*var(--fu)),24px);letter-spacing:0;
  transition:transform .45s var(--ease),background .4s,color .4s,border-color .4s;
}
/* the page's one red CTA: white on Signal Red */
.btn--primary{background:var(--red);color:#fff;border:1px solid var(--red);}
.btn--primary:hover{background:var(--black);border-color:var(--black);transform:translateY(-3px);}
/* filled, not hollow: photographs pass behind it */
.btn--line{background:var(--paper);color:var(--black);border:1px solid var(--steel);}
.btn--line:hover{background:var(--black);border-color:var(--black);color:#fff;}

/* ================================= footer =============================== */
/* Beneath the sheet (lower layer, dark ground) so the page's last edge lifts
   off it; js/site.js slides it from partly hidden up there to rest. */
.foot{position:relative;z-index:1;background:var(--black);color:#fff;
  padding:clamp(50px,8vh,100px) var(--pad) clamp(22px,calc(1.6*var(--fu)),42px);}
.foot .mn{color:var(--steel);font-size:clamp(16px,calc(1.02*var(--fu)),26px);}
.foot-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,77px);}
.foot-cols p{margin-top:clamp(12px,calc(.9*var(--fu)),22px);font-size:clamp(15px,calc(1*var(--fu)),26px);line-height:1.55;color:var(--on-dark);}
.foot-cols a:hover{color:#fff;text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:4px;}
/* The tagline, set once on its own at the close — always this wording,
   always caps (guidelines §09). The old outlined "AV + ACOUSTICS" was a
   re-typeset wordmark, which the guidelines forbid. */
.foot-tag{
  margin:clamp(46px,8vh,100px) 0 0;padding-top:clamp(18px,2.4vh,28px);border-top:4px solid var(--red);
  font-family:var(--sans);font-weight:300;text-transform:uppercase;
  font-size:clamp(30px,calc(5.4*var(--fu)),138px);letter-spacing:0;line-height:1.05;color:#fff;max-width:20ch;text-wrap:balance;
}
.foot-base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:clamp(30px,5vh,56px);padding-top:clamp(18px,calc(1.3*var(--fu)),32px);border-top:1px solid var(--rule-dk);}
@media(max-width:820px){.foot-cols{grid-template-columns:repeat(2,1fr);}}
@media(max-width:480px){.foot-cols{grid-template-columns:1fr;}}

/* =============================== motion prep ============================ */
/* Lenis 1.1 relies on these; without them stop() does not hold the page */
html.lenis,html.lenis body{height:auto;}
.lenis.lenis-smooth{scroll-behavior:auto !important;}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain;}
.lenis.lenis-stopped{overflow:hidden;}
.lenis.lenis-smooth iframe{pointer-events:none;}

/* type split into characters (js/site.js): words stay unbreakable */
.split-chars{display:inline-block;white-space:nowrap;}
.split-chars > span{display:inline-block;}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
  .cursor{display:none !important;}
}