/* ============================================================
   CONNECTING DIGITALLY — THE PAGES BEYOND THE HOMEPAGE
   ------------------------------------------------------------
   Every page outside the homepage loads two stylesheets:

     site.css   the homepage's own stylesheet, copied out verbatim by
                the build. Tokens, type, the tone system, buttons, the
                nav, the menu, the footer, the reveals, the archive,
                the testimonials — all of it, exactly as approved.

     pages.css  this file. Only the handful of layouts the new pages
                need that the homepage never had: a page hero, case
                study and service layouts, the insights grid, the
                contact block and the briefing sitting in the page.

   Nothing in here restates a colour, a font or an easing curve. It is
   all read from the homepage's tokens, so the new pages cannot drift
   from the approved design without the homepage drifting with them.
   ============================================================ */

/* ---- the frame ----
   The homepage indents its content 72px on wide screens to make room
   for the hand-drawn spine down its left edge. These pages do not
   carry the spine, so they keep an even gutter rather than an
   unexplained gap. */
.page .below{--pad-l:var(--gutter)}
@media (min-width:1181px){ .page .below{--pad-l:var(--gutter)} }
.page main{display:block}

/* ---- ONE CONTENT EDGE ----
   The homepage aligns its content to a 1320px column: the gutter from
   the edge on a laptop, centred on anything wider. Every section on
   these pages is padded to exactly that column, so whatever sits inside
   it lines up with everything else without each piece having to know.
   Measured against the homepage at 1440: content starts at 72px. */
.page{--col:max(var(--gutter), calc((100% - 1320px) / 2))}
.page .below > section:not(.quotesec):not(.full){padding-inline:var(--col)}
/* a section that carries something edge to edge keeps its bleed, and
   only its heading is pulled in to the column */
.page .below > section.full{padding-inline:0}
.page .below > section.full > .wrap{max-width:none;padding-inline:var(--col)}
/* the archive is the homepage's own #work markup, which pads each of its
   pieces separately; here the section pads once and the pieces do not */
.page .below > #work{padding-inline:var(--col)}
.page #work .wrap,.page #work .films,.page #work .crgrid,.page #work .printgrid,
.page #work .brochgrid,.page #work .sites{padding-inline:0;max-width:none}
/* the four sites in one row on a desktop — three and an orphan on a
   second row read as a mistake; two by two on a tablet, one on a phone */
.page .sites{padding-inline:0}
@media (min-width:1100px){ .page .sites{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (min-width:561px) and (max-width:1099px){ .page .sites{grid-template-columns:repeat(2,minmax(0,1fr))} }
.page .site .meta{gap:4px 10px}
.page .site .meta em{flex-basis:100%}
.page .site .meta .go{flex-basis:100%;margin-left:0;margin-top:4px}
/* the testimonial row scrolls sideways edge to edge, so the section keeps
   its bleed; its heading, its first card and its progress bar all start
   on the column (on the homepage the heading and cards are ~20px apart) */
.page .quotesec > .wrap{max-width:none;padding-inline:var(--col)}
.page .quotesec .quotes{padding-inline:var(--col);scroll-padding-inline:var(--col)}
.page .quotesec .qnav{max-width:none;margin-inline:var(--col)}

/* a case study or a service is inside Portfolio or Services: the nav
   says so, the same way it marks the page you are on */
.navlinks a.is-sec{color:var(--text-primary)}
.navlinks a.is-sec::after{transform:scaleX(1)}
.menu-nav a.is-sec{color:var(--accent)}
/* on these pages the footer's ask is a link to the contact page rather
   than a button that opens the homepage's panel */
a.fcta{text-decoration:none;display:inline-flex;align-items:center}

/* ============================================================
   THE PAGE HERO
   The homepage hero's type — condensed Archivo at full weight, the
   second line in the accent — without its scene. The studio's own
   mark stands in for the scene: the real logo, cut from the logo
   file with its 3D shading, shown whole. (It was a faint outline of
   two rings, cropped by the page edge; the client read it as a CD.)
   ============================================================ */
/* The first screen is the whole first screen, as on the homepage: the
   rings and the headline own it, and the page's detail starts below the
   fold. Contact and the sample article keep a short hero, because the
   thing someone came for (the booking, the article) is right under it. */
.phero{position:relative;overflow:hidden;isolation:isolate;
  min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(110px,15vh,170px) var(--col) clamp(64px,11vh,120px)}
.phero > .wrap{position:relative;z-index:3;width:100%;max-width:none;margin:0}
.phero--short{min-height:0;padding-bottom:clamp(40px,7vh,80px)}
/* the rings are drawn across the whole hero, under the words */
.pmark{position:absolute;inset:0;z-index:1;display:block;width:100%;height:100%;pointer-events:none}
/* and over them, the homepage hero's own two shades, copied exactly: its
   base vignette and its top-and-bottom fade. They are what give the
   homepage rings their depth — the lit side stays hot, the far side
   sinks into the room — and without them the same rings read flat. */
.phero::before,.phero::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none}
.phero::before{background:radial-gradient(ellipse 124% 96% at 50% 46%,rgba(10,10,18,0) 42%,rgba(10,10,18,.46) 100%)}
.phero::after{background:linear-gradient(to bottom,rgba(10,8,16,.72) 0%,rgba(10,8,16,0) 20%,rgba(10,8,16,0) 70%,rgba(10,8,16,.8) 100%)}
.no-gl .pmark{display:none}
/* the way on, bottom right, the same cue the homepage hero carries */
.pscroll{position:absolute;z-index:3;right:var(--col);bottom:clamp(24px,4.4vh,44px);margin:0;display:flex;align-items:center;gap:12px;
  font:500 10.5px/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--text-faint)}
.pscroll i{display:block;width:34px;height:1px;background:currentColor;opacity:.7;transform-origin:left;animation:pscroll 2.6s var(--ease-out) infinite}
@keyframes pscroll{0%{transform:scaleX(0)}45%{transform:scaleX(1)}100%{transform:scaleX(1);opacity:0}}
@media (prefers-reduced-motion:reduce){ .pscroll i{animation:none} }

.crumbs{display:flex;flex-wrap:wrap;gap:6px 10px;margin:0 0 clamp(22px,4vh,38px);padding:0;list-style:none;
  font:500 10.5px/1.4 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--text-faint)}
.crumbs a{color:var(--text-secondary);text-decoration:none;transition:color .3s var(--ease-out)}
.crumbs a:hover{color:var(--accent)}
.crumbs li + li::before{content:"/";margin-right:10px;color:var(--accent);opacity:.75}

.phero-h{margin:0;max-width:none;
  font-family:var(--display);font-variation-settings:'wdth' 62,'wght' 800;font-weight:800;
  font-size:clamp(50px,10.2vw,168px);line-height:.86;letter-spacing:-.04em;text-transform:uppercase;
  color:var(--text-primary)}
.phero-h > span{display:block}
/* ---- room between words ----
   Condensed Archivo at wdth 62, tracked in to -.04em, has almost no
   word space left: "ALL OF IT OURS" read as "ALLOFITOURS". Every
   condensed display line on these pages gets a little of it back. */
.phero-h,.pcta-h,.pcase-n,.cs-next b,.ins-soon,.markets strong,.svc-name{word-spacing:.14em}
.phero-h .pop{color:var(--accent)}
.phero .lede{margin-top:clamp(22px,3.6vh,36px);max-width:58ch}
.phero-meta{display:flex;flex-wrap:wrap;gap:8px;margin:clamp(22px,3.4vh,34px) 0 0;padding:0;list-style:none}
.phero-meta li{font:500 10.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--text-secondary);
  border:1px solid var(--line);border-radius:999px;padding:9px 13px}

/* ---- the box the rings are fitted into ----
   Nothing is drawn here; the scene reads this box and fits the pair of
   rings inside it, so the layout is decided in this file and the 3D
   follows it. Desktop: right of the words, vertically a touch above
   centre, and the words keep a column of their own so the rings never
   cross the headline. Phone: centred in the space between the bar and
   the words, as on the homepage — rings over the top, words along the
   bottom. On a device with no WebGL the box shows the logo instead. */
.phero{--mark:clamp(300px,36vw,560px)}
.phero-mark{position:absolute;z-index:0;top:46%;right:var(--col);width:var(--mark);aspect-ratio:1.35;
  transform:translateY(-50%);pointer-events:none}
.phero-mark img{display:none;width:100%;height:auto}
.no-gl .phero-mark img{display:block;filter:drop-shadow(0 28px 50px rgba(0,0,0,.45))}
@media (min-width:761px){
  .phero > .wrap{padding-right:calc(var(--mark) + clamp(28px,4vw,72px))}
  .phero-h{font-size:clamp(50px,8.4vw,150px)}
  .phero--short{--mark:clamp(240px,28vw,420px)}
}
@media (max-width:760px){
  .phero{padding-top:84px;--mark:min(84vw,360px,50svh)}
  .phero-mark{position:relative;top:auto;right:auto;transform:none;align-self:center;margin-block:auto}
  .phero--short{--mark:min(66vw,270px)}
  .phero--short .phero-mark{margin-block:4px 14px}
  .pscroll{bottom:22px}
}

/* ============================================================
   A SECTION HEAD, shared by every page
   ============================================================ */
.shead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(20px,4vw,72px);align-items:end;
  margin-bottom:clamp(34px,6vh,64px)}
.shead h2{max-width:14ch}
.shead .lede{margin:0}
@media (max-width:900px){ .shead{grid-template-columns:1fr;align-items:start} .shead .lede{margin-top:6px} }

/* ============================================================
   THE CLOSING ASK — full bleed, in the pink, like the homepage's
   own last word. Same sentence as the back of the brochure.
   ============================================================ */
.pcta{text-align:left}
.pcta .wrap{max-width:none;margin:0}
.pcta-h{margin:0;max-width:none;
  font-family:var(--display);font-variation-settings:'wdth' 62,'wght' 800;font-weight:800;
  font-size:clamp(56px,11vw,184px);line-height:.84;letter-spacing:-.045em;text-transform:uppercase}
.pcta-p{margin:clamp(20px,3vh,30px) 0 0;max-width:40ch;font-size:clamp(17px,1.4vw,22px);line-height:1.5;color:var(--text-secondary)}
/* desktop: the heading is held on one line by the page script (data-fit),
   and the sentence under it gets the width to run as one line — or two
   for the longer one on Services — instead of breaking after a word or two */
.pcta{overflow:hidden}
@media (min-width:761px){ .pcta-p{max-width:62ch} }
.pcta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(28px,4.4vh,44px)}
.pcta-row .btn{width:auto}
@media (max-width:560px){ .pcta-row .btn{width:100%} }

/* ============================================================
   PORTFOLIO — the four case studies as cards
   Each one opens its own page. The picture is always the client's
   own; a client with no picture of its own is set in type instead,
   rather than borrowing someone else's photograph.
   ============================================================ */
.pcases{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.8vw,26px)}
@media (max-width:760px){ .pcases{grid-template-columns:1fr} }
.pcase{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:clamp(360px,40vw,580px);border-radius:clamp(16px,1.6vw,22px);
  text-decoration:none;color:#fff;background:#16111F}
.pcase-media{position:absolute;inset:0;z-index:-2}
.pcase-media{overflow:hidden}
.pcase-media img{width:100%;height:100%;object-fit:cover;transform:scale(var(--z,1));transform-origin:50% 0;transition:transform 1.2s var(--ease-out)}
/* strong enough that the white type holds over the busiest of the
   covers (the Monotel poster is itself full of lettering), measured by
   eye at both sizes rather than set by rule */
.pcase::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(12,9,19,0) 18%,rgba(12,9,19,.5) 42%,rgba(12,9,19,.86) 62%,rgba(12,9,19,.96) 100%)}
.pcase-in{padding:clamp(20px,2.6vw,34px)}
.pcase-k{margin:0 0 12px;font:500 10.5px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.78)}
.pcase-k b{color:var(--flood);font-weight:500;margin-right:10px}
.pcase-n{margin:0;font-family:var(--display);font-variation-settings:'wdth' 62,'wght' 800;font-weight:800;
  font-size:clamp(34px,4.3vw,66px);line-height:.88;letter-spacing:-.035em;text-transform:uppercase}
.pcase-s{margin:12px 0 0;max-width:44ch;font-size:15px;line-height:1.5;color:rgba(255,255,255,.82)}
.pcase-go{display:inline-flex;align-items:center;gap:9px;margin-top:18px;font:600 13px var(--body);letter-spacing:.01em}
.pcase-go::after{content:"";width:18px;height:1px;background:currentColor;transition:width .45s var(--ease-out)}
@media (hover:hover){
  .pcase:hover .pcase-media img{transform:scale(calc(var(--z,1) * 1.045))}
  .pcase:hover .pcase-go::after{width:34px}
}
.pcase:focus-visible{outline:2px solid var(--flood);outline-offset:4px}
/* a client with no picture of its own: the name is the picture */
.pcase--type{background:var(--flood)}
.pcase--type::after{display:none}
/* in the empty top of the card, clear of the label and heading below */
.pcase-word{position:absolute;inset:12% -4% auto -4%;z-index:-1;margin:0;
  font-family:var(--display);font-variation-settings:'wdth' 62,'wght' 800;font-weight:800;
  font-size:clamp(90px,15vw,240px);line-height:.8;letter-spacing:-.05em;text-transform:uppercase;
  color:rgba(12,9,19,.16);white-space:nowrap}
.pcase--type .pcase-k b{color:#0C0913}
/* On a phone the card is narrow, so the words fill most of its height
   and end up over the busiest middle of the cover (the Monotel poster's
   own lettering ran straight through the name). Here the cover becomes a
   band across the top and the words sit on the card's own dark ground
   beneath it, with the picture fading into that ground rather than
   stopping at a hard line. */
@media (max-width:760px){
  .pcase:not(.pcase--type){--mh:clamp(200px,56vw,300px);min-height:0;justify-content:flex-start}
  .pcase:not(.pcase--type) .pcase-media{position:relative;inset:auto;display:block;flex:none;height:var(--mh)}
  .pcase:not(.pcase--type)::after{background:linear-gradient(180deg,rgba(22,17,31,0) 0,rgba(22,17,31,0) calc(var(--mh) - 90px),rgba(22,17,31,.92) calc(var(--mh) - 12px),#16111F var(--mh))}
  /* only the label overlaps the picture's faded foot, never the name —
     a cover's own lettering (the Biryanishk ad's logo box) can sit low */
  .pcase:not(.pcase--type) .pcase-in{margin-top:-26px;padding-top:0}
}

/* ============================================================
   CASE STUDY PAGES
   ============================================================ */
.cs-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;padding:0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cs-facts > div{padding:clamp(18px,2.6vh,26px) clamp(14px,2vw,26px) clamp(18px,2.6vh,26px) 0}
.cs-facts > div + div{border-left:1px solid var(--line);padding-left:clamp(14px,2vw,26px)}
.cs-facts dt{font:500 10.5px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--text-faint);margin-bottom:12px}
.cs-facts dd{margin:0;font-size:clamp(15px,1.2vw,18px);line-height:1.45;color:var(--text-primary)}
.cs-facts--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1000px){ .cs-facts--4{grid-template-columns:repeat(2,minmax(0,1fr))} .cs-facts--4 > div:nth-child(3){border-left:0;padding-left:0} }
@media (max-width:700px){
  .cs-facts,.cs-facts--4{grid-template-columns:1fr}
  .cs-facts > div + div{border-left:0;padding-left:0;border-top:1px solid var(--line)}
}

.cs-block{display:grid;grid-template-columns:minmax(150px,22%) minmax(0,1fr);gap:clamp(14px,3.4vw,56px);
  padding-block:clamp(28px,4.6vh,52px);border-top:1px solid var(--line)}
.cs-block:first-child{border-top:0}
.cs-block > h2{margin:.35em 0 0;max-width:none;font:500 11px/1.4 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.cs-block p{margin:0;max-width:30ch;font-family:var(--display);font-variation-settings:'wdth' 100,'wght' 600;font-weight:600;
  font-size:clamp(22px,2.3vw,36px);line-height:1.2;letter-spacing:-.018em;color:var(--text-primary)}
.cs-block ul{margin:0;padding:0;list-style:none;display:grid;gap:14px;max-width:62ch}
.cs-block li{position:relative;padding-left:26px;font-size:clamp(16px,1.3vw,19px);line-height:1.55;color:var(--text-secondary)}
.cs-block li::before{content:"";position:absolute;left:0;top:.78em;width:12px;height:1px;background:var(--accent)}
.cs-block blockquote{margin:0;max-width:34ch;font-family:var(--display);font-variation-settings:'wdth' 100,'wght' 600;font-weight:600;
  font-size:clamp(22px,2.3vw,36px);line-height:1.22;letter-spacing:-.018em}
.cs-block cite,.cs-block .by{display:block;margin-top:18px;font:500 10.5px/1.4 var(--mono);font-style:normal;
  letter-spacing:.18em;text-transform:uppercase;color:var(--text-secondary)}
@media (max-width:700px){ .cs-block{grid-template-columns:1fr;gap:12px} .cs-block > h2{margin:0} }

/* the client's own work, and nobody else's */
.cs-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:clamp(12px,1.6vw,22px);
  padding-inline:0;max-width:none;margin:0}
.cs-gallery .film{align-self:start}
/* a landscape film takes the whole row rather than a tall slot */
.cs-gallery .film--wide{grid-column:1 / -1}
/* one case card alone takes the full width instead of leaving half a row empty */
.pcases > .pcase:only-child{grid-column:1 / -1}
.cs-gallery .tile{border-radius:14px}
.cs-gallery--wide{grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr))}

/* one quote, set large, in the client's own words */
/* a heading with the work straight beneath it: the same breathing room
   the "Where it has been done" heading has above its cards */
.wrap--lead{margin-bottom:clamp(28px,5vh,52px)}

/* margin:0 — a figure carries a 40px indent of its own by default,
   which pushed the quote in from every other left edge on the page */
.cs-quote{max-width:1100px;margin:0}
.cs-quote blockquote{margin:0;font-family:var(--display);font-variation-settings:'wdth' 96,'wght' 600;font-weight:600;
  font-size:clamp(24px,3vw,46px);line-height:1.18;letter-spacing:-.022em}
.cs-quote figcaption{margin-top:clamp(18px,3vh,28px);display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline}
.cs-quote figcaption strong{font:600 15px var(--body)}
.cs-quote figcaption em{font:500 10.5px/1 var(--mono);font-style:normal;letter-spacing:.18em;text-transform:uppercase;color:var(--text-secondary)}

/* related links, as a row of pills */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.chips a,.chips span{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:10px 18px;border-radius:999px;
  border:1px solid var(--border-ui);color:var(--text-primary);text-decoration:none;font:500 14px var(--body);
  transition:background .3s var(--ease-out),border-color .3s var(--ease-out),color .3s var(--ease-out)}
.chips a::after{content:"→";color:var(--accent);transition:transform .35s var(--ease-out)}
@media (hover:hover){
  .chips a:hover{background:var(--accent);border-color:var(--accent);color:#fff}
  .chips a:hover::after{color:#fff;transform:translateX(3px)}
}

/* the next case study, as the last thing on the page before the ask */
.cs-next{display:block;text-decoration:none;color:var(--text-primary);padding-block:clamp(40px,7vh,80px);
  border-top:1px solid var(--line)}
.cs-next small{display:block;margin-bottom:14px;font:500 10.5px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--text-secondary)}
.cs-next b{display:inline-block;font-family:var(--display);font-variation-settings:'wdth' 62,'wght' 800;font-weight:800;
  font-size:clamp(46px,9vw,150px);line-height:.84;letter-spacing:-.045em;text-transform:uppercase;
  transition:color .4s var(--ease-out),transform .6s var(--ease-out)}
@media (hover:hover){ .cs-next:hover b{color:var(--accent);transform:translateX(12px)} }

/* ============================================================
   SERVICES — the six, as an index
   A row per category. The pink fills in from the left on hover, the
   same gesture as the underline under the nav links, scaled up.
   ============================================================ */
.svc-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.svc-row{border-bottom:1px solid var(--line)}
.svc-row > a{position:relative;isolation:isolate;display:grid;grid-template-columns:clamp(40px,5vw,72px) minmax(0,1fr) auto;
  gap:clamp(14px,3vw,48px);align-items:center;padding:clamp(24px,3.6vh,42px) clamp(4px,1.4vw,22px);
  text-decoration:none;color:var(--text-primary);overflow:hidden}
.svc-row > a::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--flood);
  transform:scaleX(0);transform-origin:left;transition:transform .7s cubic-bezier(.76,0,.24,1)}
.svc-num{font:500 11px/1 var(--mono);letter-spacing:.18em;color:var(--accent);transition:color .4s var(--ease-out)}
.svc-name{margin:0;font-family:var(--display);font-variation-settings:'wdth' 62,'wght' 800;font-weight:800;
  font-size:clamp(42px,7.4vw,118px);line-height:.86;letter-spacing:-.04em;text-transform:uppercase}
.svc-sub{display:flex;flex-wrap:wrap;gap:6px 18px;margin:14px 0 0;padding:0;list-style:none}
.svc-sub li{font:500 10.5px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary);
  transition:color .4s var(--ease-out)}
.svc-go{width:clamp(44px,4.6vw,64px);height:clamp(44px,4.6vw,64px);border-radius:50%;border:1px solid var(--border-ui);
  display:grid;place-items:center;flex:none;transition:border-color .4s var(--ease-out),transform .6s var(--ease-out)}
.svc-go svg{width:40%;height:40%}
@media (hover:hover){
  .svc-row > a:hover::before{transform:scaleX(1)}
  .svc-row > a:hover{color:#fff}
  .svc-row > a:hover .svc-num,.svc-row > a:hover .svc-sub li{color:rgba(255,255,255,.86)}
  .svc-row > a:hover .svc-go{border-color:#fff;transform:rotate(-45deg)}
}
/* a touch screen has no hover: the row passing through the middle of the
   screen (marked .is-live by the page script) gets the same sweep */
@media (hover:none){
  .svc-row > a.is-live::before{transform:scaleX(1)}
  .svc-row > a.is-live{color:#fff}
  .svc-row > a.is-live .svc-num,.svc-row > a.is-live .svc-sub li{color:rgba(255,255,255,.86)}
  .svc-row > a.is-live .svc-go{border-color:#fff;transform:rotate(-45deg)}
  .svc-row > a .svc-name,.svc-row > a .svc-sub li{transition:color .5s var(--ease-out)}
}
@media (max-width:640px){
  .svc-row > a{grid-template-columns:1fr auto;row-gap:10px}
  .svc-num{grid-column:1 / -1}
}

/* the brochure's service cards, inside a category */
.sv-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(12px,1.6vw,22px)}
.sv-card{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:clamp(22px,2.6vw,34px)}
.sv-card h3{margin:0;font-family:var(--display);font-variation-settings:'wdth' 100,'wght' 700;font-weight:700;
  font-size:clamp(20px,1.7vw,26px);line-height:1.1;letter-spacing:-.018em}
.sv-card h3::after{content:"";display:block;width:28px;height:2px;margin-top:14px;background:var(--accent)}
.sv-card p{margin:14px 0 0;color:var(--text-secondary);line-height:1.62;font-size:15.5px}

/* the movement's own line, set as the page's thesis */
.sv-say{margin:0;max-width:24ch;font-family:var(--display);font-variation-settings:'wdth' 96,'wght' 700;font-weight:700;
  font-size:clamp(28px,3.8vw,60px);line-height:1.04;letter-spacing:-.03em}
.sv-say em{font-style:normal;color:var(--accent)}

/* what is in the category, as a short list */
.sv-incl{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
  border-top:1px solid var(--line)}
.sv-incl li{display:flex;gap:14px;align-items:baseline;padding:20px 0;border-bottom:1px solid var(--line);
  font-size:clamp(17px,1.4vw,21px)}
.sv-incl li b{font:500 10.5px/1 var(--mono);letter-spacing:.14em;color:var(--accent)}

/* the other five, so every service page leads to the whole */
.sv-others{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:10px;list-style:none;margin:0;padding:0}
.sv-others a{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:64px;padding:16px 20px;
  border:1px solid var(--line);border-radius:14px;color:var(--text-primary);text-decoration:none;background:var(--panel);
  font-family:var(--display);font-variation-settings:'wdth' 80,'wght' 700;font-weight:700;font-size:18px;text-transform:uppercase;letter-spacing:-.01em;
  transition:border-color .35s var(--ease-out),background .35s var(--ease-out),color .35s var(--ease-out)}
.sv-others a small{font:500 10px/1 var(--mono);letter-spacing:.16em;color:var(--accent)}
@media (hover:hover){ .sv-others a:hover{background:var(--accent);border-color:var(--accent);color:#fff} .sv-others a:hover small{color:#fff} }

/* ============================================================
   THE STUDIO
   ============================================================ */
/* forty words in one sentence: a step below display size, or it reads
   as a wall rather than a statement */
.story-lead{margin:0;max-width:34ch;font-family:var(--display);font-variation-settings:'wdth' 100,'wght' 500;font-weight:500;
  font-size:clamp(21px,2.2vw,34px);line-height:1.24;letter-spacing:-.02em;color:var(--text-primary)}
.story-lead b{font-weight:700;color:var(--accent)}
.story-more{margin:clamp(22px,3.4vh,34px) 0 0;max-width:58ch;color:var(--text-secondary);line-height:1.68;font-size:clamp(16px,1.2vw,18px)}
.story-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(28px,5vw,90px);align-items:start}
@media (max-width:900px){ .story-grid{grid-template-columns:1fr} }
@media (min-width:901px){
  .story-grid--one{align-items:end}
  .story-grid--one .story-more{margin:0}
}

.idea{border:1px solid var(--line);border-radius:clamp(18px,2vw,26px);padding:clamp(26px,4vw,56px);background:var(--panel);position:relative;overflow:hidden}
.idea .kicker{margin-bottom:18px}
/* classed, not ".idea p": the label and the heading are paragraphs too,
   and a blanket rule was greying and spacing them out as body text */
.idea .idea-h{margin:0;max-width:14ch;font-family:var(--display);font-variation-settings:'wdth' 100,'wght' 700;font-weight:700;
  font-size:clamp(30px,3.6vw,56px);line-height:1.02;letter-spacing:-.03em;color:var(--text-primary)}
.idea .idea-p{margin:20px 0 0;max-width:42ch;color:var(--text-secondary);line-height:1.62}
.idea::after{content:"";display:block;width:56px;height:3px;background:var(--accent);margin-top:26px}

.why3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,48px);list-style:none;margin:0;padding:0}
.why3 li::before{content:"";display:block;width:36px;height:3px;background:var(--accent);margin-bottom:22px}
.why3 b{display:block;font-family:var(--display);font-variation-settings:'wdth' 100,'wght' 800;font-weight:800;
  font-size:clamp(30px,3vw,44px);line-height:1;color:var(--accent);letter-spacing:-.02em}
.why3 h3{margin:14px 0 0;font-family:var(--display);font-variation-settings:'wdth' 100,'wght' 700;font-weight:700;
  font-size:clamp(20px,1.7vw,25px);letter-spacing:-.015em}
.why3 p{margin:10px 0 0;color:var(--text-secondary);line-height:1.6;max-width:32ch}
@media (max-width:760px){ .why3{grid-template-columns:1fr} }

.markets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.markets li{padding:clamp(22px,3.6vh,36px) clamp(14px,2vw,28px) clamp(22px,3.6vh,36px) 0;border-bottom:1px solid var(--line)}
.markets li + li{border-left:1px solid var(--line);padding-left:clamp(14px,2vw,28px)}
.markets strong{display:block;font-family:var(--display);font-variation-settings:'wdth' 62,'wght' 800;font-weight:800;
  font-size:clamp(34px,4.4vw,70px);line-height:.88;letter-spacing:-.035em;text-transform:uppercase}
.markets span{display:block;margin-top:14px;color:var(--text-secondary);font-size:15px;line-height:1.55;max-width:34ch}
@media (max-width:760px){
  .markets{grid-template-columns:1fr}
  .markets li + li{border-left:0;padding-left:0}
}

/* ============================================================
   INSIGHTS
   ============================================================ */
.cats{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.cats li{font:500 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--text-secondary);
  padding:12px 16px;border:1px solid var(--line);border-radius:999px}
.cats li b{color:var(--accent);font-weight:500;margin-right:8px}

/* .ins-soon, not .soon: the homepage's Aranyak card already owns .soon
   for its "Relaunching" frame, and on Portfolio this rule was shrinking it */
.ins-soon{margin:0;max-width:18ch;font-family:var(--display);font-variation-settings:'wdth' 62,'wght' 800;font-weight:800;
  font-size:clamp(48px,8vw,128px);line-height:.86;letter-spacing:-.04em;text-transform:uppercase}
.ins-soon em{font-style:normal;color:var(--accent)}

.art-grid{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:clamp(14px,1.8vw,26px)}
@media (max-width:1000px){ .art-grid{grid-template-columns:1fr 1fr} .art-card:first-child{grid-column:1 / -1} }
@media (max-width:640px){ .art-grid{grid-template-columns:1fr} }
.art-card{position:relative;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);
  border-radius:20px;overflow:hidden;text-decoration:none;color:var(--text-primary)}
.art-shot{aspect-ratio:16/10;overflow:hidden;background:var(--panel-2)}
.art-shot img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease-out)}
.art-in{display:flex;flex-direction:column;gap:12px;padding:clamp(20px,2.2vw,28px);flex:1}
.art-cat{font:500 10.5px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.art-t{margin:0;font-family:var(--display);font-variation-settings:'wdth' 100,'wght' 700;font-weight:700;
  font-size:clamp(20px,1.8vw,28px);line-height:1.12;letter-spacing:-.02em}
.art-x{margin:0;color:var(--text-secondary);line-height:1.6;font-size:15px}
.art-meta{margin-top:auto;padding-top:8px;font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint)}
@media (hover:hover){ .art-card:hover .art-shot img{transform:scale(1.04)} .art-card:hover .art-t{color:var(--accent)} }
/* sample content is labelled on the card itself, not in small print */
.badge{position:absolute;z-index:2;top:14px;left:14px;font:600 10px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:#fff;background:#0C0913;border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:8px 11px}

/* the article layout */
.art-note{display:flex;gap:14px;align-items:flex-start;max-width:760px;margin:0 auto clamp(30px,5vh,48px);
  padding:16px 20px;border:1px dashed var(--border-ui);border-radius:14px;color:var(--text-secondary);font-size:14.5px;line-height:1.55}
.art-note b{flex:none;font:600 10px/1.6 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.article{max-width:760px;margin:0 auto}
.article > p{margin:0 0 1.25em;font-size:clamp(17px,1.3vw,19px);line-height:1.75;color:var(--text-secondary)}
.article > p:first-child{font-size:clamp(20px,1.8vw,26px);line-height:1.5;color:var(--text-primary)}
.article h2{margin:1.8em 0 .6em;max-width:none;font-size:clamp(26px,2.6vw,38px);line-height:1.1}
.article blockquote{margin:1.6em 0;padding:0 0 0 clamp(18px,2vw,28px);border-left:3px solid var(--accent);
  font-family:var(--display);font-variation-settings:'wdth' 96,'wght' 600;font-weight:600;
  font-size:clamp(22px,2.2vw,32px);line-height:1.24;letter-spacing:-.02em;color:var(--text-primary)}
.article figure{margin:1.8em 0}
.article figure img{width:100%;border-radius:16px}
.article figcaption{margin-top:12px;font:500 10.5px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint)}
.art-by{display:flex;flex-wrap:wrap;gap:8px 22px;margin:clamp(20px,3vh,30px) 0 0;padding:0;list-style:none;
  font:500 10.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--text-secondary)}
.art-by b{color:var(--accent);font-weight:500;margin-right:8px}

/* ============================================================
   CONTACT
   ============================================================ */
.cinfo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin:0;padding:0;border-top:1px solid var(--line)}
.cinfo > div{padding:clamp(20px,3.4vh,32px) clamp(14px,2vw,30px) clamp(20px,3.4vh,32px) 0;border-bottom:1px solid var(--line)}
.cinfo > div:nth-child(2n){border-left:1px solid var(--line);padding-left:clamp(14px,2vw,30px)}
.cinfo dt{margin-bottom:12px;font:500 10.5px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.cinfo dd{margin:0;font-size:clamp(17px,1.5vw,22px);line-height:1.45;color:var(--text-primary)}
.cinfo dd a{color:inherit;text-decoration:none;background:linear-gradient(var(--accent),var(--accent)) left bottom / 0 1px no-repeat;
  transition:background-size .4s var(--ease-out)}
@media (hover:hover){ .cinfo dd a:hover{background-size:100% 1px} }
.cinfo dd small{display:block;margin-top:8px;font-size:14px;color:var(--text-secondary)}
@media (max-width:700px){
  .cinfo{grid-template-columns:1fr}
  .cinfo > div:nth-child(2n){border-left:0;padding-left:0}
}

/* ---- what happens after you get in touch ----
   Was one heading and one paragraph, both set at display size — a wall
   of large type. Now the heading is a section heading and the answer is
   the three things that actually happen, side by side. */
.nx-h{font-size:clamp(30px,3.6vw,54px);max-width:22ch}
.nx{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,22px);list-style:none;margin:0;padding:0}
.nx li{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:clamp(22px,2.4vw,32px)}
.nx b{display:block;font:500 11px/1 var(--mono);letter-spacing:.18em;color:var(--accent)}
.nx h3{margin:16px 0 0;font-family:var(--display);font-variation-settings:'wdth' 100,'wght' 700;font-weight:700;
  font-size:clamp(20px,1.7vw,25px);line-height:1.15;letter-spacing:-.015em}
.nx p{margin:10px 0 0;color:var(--text-secondary);line-height:1.6;font-size:15.5px}
@media (max-width:860px){ .nx{grid-template-columns:1fr} }

/* ---- less to read on a phone ----
   On a service page the big statement straight after the hero says the
   same thing as the hero's line, so on a phone only the statement stays. */
@media (max-width:760px){ .page--service .phero .lede,.m-hide{display:none} }

/* ---- CONTACT: THE FORM IS THE FIRST SCREEN ----
   A short heading that says what to do, one line on how long it takes,
   and the briefing straight under it. On a desktop the heading and the
   line sit side by side and the form fills the rest of the screen, so
   the first question, its options and Continue are all in view without
   scrolling. On a phone the form's own title (which would repeat the
   page heading) steps aside and the first question comes up under the
   heading, with Continue pinned to the bottom of the screen as always. */
.phero--form{padding-top:clamp(92px,12vh,124px);padding-bottom:clamp(16px,2.6vh,28px)}
.phero--form::before,.phero--form::after{display:none}
.phero--form .crumbs{margin-bottom:clamp(10px,1.8vh,16px)}
.phero--form .phero-h{font-size:clamp(36px,5.2vw,84px);line-height:.9}
.phero--form .lede{margin-top:clamp(10px,1.6vh,14px);max-width:46ch;font-size:clamp(15px,1.15vw,18px);color:var(--text-secondary)}
@media (min-width:901px){
  .phero--form > .wrap{padding-right:0;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:clamp(28px,4vw,72px);align-items:end}
  .phero--form .crumbs{grid-column:1 / -1}
  .phero--form .lede{margin:0 0 .5em;justify-self:end;text-align:right}
  .page--contact .brief--inline .brief-shell{min-height:clamp(520px,calc(100svh - 270px),720px)}
}
/* a laptop screen is short: the side paragraph repeats the line above the
   form ("thirty minutes"), so it goes, and Continue stays on screen */
@media (min-width:901px) and (max-height:860px){
  .page--contact .brief--inline .brief-note{display:none}
}
/* The frame's rounded corners used overflow:hidden, and that quietly
   switched off the pinned Continue bar on a phone — sticky cannot see
   past a box that hides its overflow. overflow:clip trims the corners the
   same way without becoming a scroll box, so the bar pins again. */
.page--contact .brief--inline .brief-shell{overflow:clip}
@media (max-width:900px){
  .page--contact .brief--inline .brief-aside h2,
  .page--contact .brief--inline .brief-sum .empty{display:none}
  .page--contact .brief--inline .brief-aside{padding-block:16px 14px}
  .page--contact .brief--inline .brief-sheet{margin-top:0}
  .page--contact .brief--inline .brief-body{padding-top:20px}
}

/* ---- the brand briefing, sitting in the page instead of over it ----
   The same form, the same four steps, the same validation, calendar
   and sending as the popup on the homepage — only the frame changes.
   It is not fixed to the screen, has no backdrop and no close button,
   because it is not over anything: it IS the page. */
.brief--inline{position:relative;inset:auto;width:100%;max-width:none;height:auto;max-height:none;margin:0;padding:0;
  display:block;overflow:visible;background:transparent;border:0;scroll-margin-top:96px}
/* in the page it takes the page's column, not the popup's centred 1160 */
.brief--inline .brief-shell{max-width:none;opacity:1;transform:none;height:auto;min-height:clamp(600px,78vh,720px);
  box-shadow:0 40px 110px -40px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.02) inset}
.brief--inline .brief-x{display:none}
.brief--inline .brief-body{overflow:visible}
@media (max-width:900px){
  .brief--inline .brief-shell{height:auto;min-height:0;border:1px solid var(--line);border-radius:20px;
    grid-template-rows:auto auto}
  .brief--inline .brief-foot{position:sticky;bottom:0;z-index:3}
}