@font-face{
  font-family:'Schibsted';
  src:url('assets/fonts/SchibstedGrotesk-var.woff2') format('woff2-variations');
  font-weight:100 900;font-style:normal;font-display:swap;
}

:root{
  --ink:#0a0c0d;
  --ink-2:#5a6366;
  --paper:#fff;
  /* cool off-white pulled from the teal rather than a warm cream */
  --mist:#edf1f1;
  --teal:#34ada9;
  --teal-deep:#1f6e6c;   /* teal that stays readable on light */
  --line:rgba(10,12,13,.13);
  --line-dk:rgba(255,255,255,.15);
  --pad:clamp(20px,4.4vw,80px);
  --maxw:1500px;
  --d1:clamp(2.9rem,7.6vw,7.2rem);
  --d2:clamp(2.2rem,5.2vw,4.6rem);
  --body:clamp(1.02rem,1vw,1.14rem);
  /* --sect is the rhythm BETWEEN two sections. Each section applies half per
     side, so adjacent sections total --sect rather than double it. */
  --sect:clamp(96px,13vw,210px);
  --sect-h:clamp(72px,9.5vw,165px);
}

*,*::before,*::after{box-sizing:border-box}
/* no scroll-behavior:smooth here: it conflicts with ScrollTrigger and can stop
   scroll-linked reveals firing. Anchor jumps are fine. */
html{-webkit-text-size-adjust:100%;scroll-padding-top:90px}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:'Schibsted',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:var(--body);line-height:1.55;font-weight:400;
  /* clip, not hidden: overflow-x:hidden with visible overflow-y computes to auto,
     which turns body into a scroll container and stops scroll events reaching
     ScrollTrigger, leaving every reveal below the fold permanently invisible */
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
img,video{display:block;max-width:100%}
h1,h2,h3,h4{margin:0;line-height:1;letter-spacing:-.032em;font-weight:700}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}

/* status markers are information, not emphasis, so they stay neutral */
sup.mk{color:currentColor;opacity:.45;font-size:.58em;font-weight:500;vertical-align:super;
  line-height:0;margin-left:.12em}

/* Teal marks what is live: the phrase that carries the claim, the current row,
   and every interactive affordance. It does nothing decorative. */
/* scales with the type it sits under, so it works at 16px and at 115px.
   Offset stays tight because display line-height is 0.96 and a looser rule
   crowds the line beneath it. */
.u{text-decoration:underline;text-decoration-color:var(--teal);
  text-decoration-thickness:max(2px,.055em);text-underline-offset:.085em;
  text-decoration-skip-ink:none}
.ftr-col .u{text-underline-offset:.16em}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:12px 18px;z-index:200}
.skip:focus{left:12px;top:12px}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px}

/* ---------- buttons ---------- */
.btn{display:inline-block;padding:15px 30px;font-weight:600;font-size:.95rem;border-radius:2px;
  transition:background .3s ease,color .3s ease,border-color .3s ease}
.btn-solid{background:var(--ink);color:#fff}
.btn-solid:hover{background:var(--teal)}
.btn-ghost{border:1px solid rgba(255,255,255,.42);color:#fff;padding:11px 22px;font-size:.88rem;font-weight:500}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.1)}
.btn-lg{padding:18px 38px;font-size:1rem}
.hero .btn-solid,.cta .btn-solid{background:#fff;color:var(--ink)}
.hero .btn-solid:hover,.cta .btn-solid:hover{background:var(--teal);color:#fff}

.pill{display:inline-flex;align-items:center;gap:14px;font-weight:600;font-size:.8rem;
  text-transform:uppercase;letter-spacing:.055em}
.pill .arw{width:52px;height:52px;border:1px solid currentColor;border-radius:50%;position:relative;
  flex:0 0 auto;transition:background .3s ease,border-color .3s ease,color .3s ease}
.pill .arw::after{content:"";position:absolute;inset:0;margin:auto;width:16px;height:1.5px;background:currentColor;
  transition:transform .3s ease}
.pill .arw::before{content:"";position:absolute;top:50%;left:50%;width:7px;height:7px;
  border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;
  transform:translate(-2px,-50%) rotate(45deg);transition:transform .3s ease}
.pill:hover .arw{background:var(--teal);border-color:var(--teal);color:#fff}
.pill:hover .arw::after{transform:translateX(3px)}
.pill:hover .arw::before{transform:translate(1px,-50%) rotate(45deg)}
.pill-light{color:#fff}

/* ---------- header ---------- */
/* No transparent border here. Chromium seams a 1px transparent border against a
   gradient background, which drew a visible hairline across the hero. The stuck
   state gets its edge from an inset shadow instead, which still transitions. */
.hdr{position:fixed;top:0;left:0;right:0;z-index:100;padding:24px 0;
  transition:background .35s ease,padding .35s ease,box-shadow .35s ease}
.hdr.stuck{background:rgba(11,13,14,.93);backdrop-filter:blur(12px);padding:13px 0;
  box-shadow:inset 0 -1px 0 var(--line-dk)}
.hdr-in{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);display:flex;align-items:center;gap:32px}
/* the production lockup is 6.76:1, so it needs real height for EVENTS to read */
.hdr-logo img{height:40px;width:auto;transition:height .35s ease}
.hdr-logo .logo-mark{display:none;height:34px}
.hdr.stuck .hdr-logo img{height:32px}
.hdr-nav{display:flex;gap:32px;margin-left:auto;font-size:.92rem;font-weight:400;color:rgba(255,255,255,.88)}
.nav-i{position:relative}
.nav-i > a{position:relative;display:block;padding:4px 0}
.nav-i > a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1.5px;background:var(--teal);
  transition:width .3s ease}
.nav-i:hover > a::after,.nav-i:focus-within > a::after{width:100%}
.dd{position:absolute;top:100%;left:-22px;min-width:250px;padding:14px 0 18px;margin-top:14px;
  background:rgba(11,13,14,.97);backdrop-filter:blur(10px);border:1px solid var(--line-dk);
  display:flex;flex-direction:column;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .26s ease,transform .26s ease,visibility .26s}
.dd::before{content:"";position:absolute;bottom:100%;left:0;right:0;height:16px}
.nav-i:hover .dd,.nav-i:focus-within .dd{opacity:1;visibility:visible;transform:none}
.dd a{padding:9px 22px;font-size:.92rem;color:rgba(255,255,255,.72);
  transition:color .22s ease,background .22s ease}
.dd a:hover,.dd a:focus-visible{color:#fff;background:rgba(255,255,255,.06)}
.burger{display:none;width:44px;height:44px;background:none;border:0;cursor:pointer;padding:0;
  flex-direction:column;justify-content:center;align-items:center;gap:6px}
.burger span{display:block;width:24px;height:1.8px;background:#fff}

/* ---------- drawer ---------- */
.drawer{position:fixed;inset:0;z-index:150;background:var(--ink);color:#fff;padding:26px var(--pad) 40px;
  display:flex;flex-direction:column}
.drawer[hidden]{display:none}
.drawer-x{align-self:flex-end;background:none;border:0;color:#fff;font:inherit;font-weight:600;
  font-size:.9rem;cursor:pointer;padding:10px 0}
.drawer-nav{display:flex;flex-direction:column;margin-top:5vh;overflow-y:auto}
.dnav-top,.dnav-g > summary{font-size:clamp(1.7rem,7.6vw,2.3rem);font-weight:700;letter-spacing:-.025em;
  line-height:1.2;padding:12px 0;border-bottom:1px solid var(--line-dk);display:block;cursor:pointer}
.dnav-g > summary{list-style:none;position:relative}
.dnav-g > summary::-webkit-details-marker{display:none}
.dnav-g > summary::after{content:"";position:absolute;right:4px;top:50%;width:12px;height:12px;
  border-right:2px solid rgba(255,255,255,.6);border-bottom:2px solid rgba(255,255,255,.6);
  transform:translateY(-70%) rotate(45deg);transition:transform .25s ease}
.dnav-g[open] > summary::after{transform:translateY(-30%) rotate(-135deg)}
.dnav-sub{display:flex;flex-direction:column;padding:12px 0 16px}
.dnav-sub a{font-size:1.02rem;color:rgba(255,255,255,.72);padding:9px 0 9px 2px}
.dnav-sub a:hover{color:#fff}
/* The drawer's closing block is its own unit: a full-width action with the
   office line centred beneath it. The nav above keeps the left axis; a centred
   button over a left-aligned line was the part that read as unresolved. */
.drawer-cta{margin-top:auto;background:#fff;color:var(--ink);text-align:center}
.drawer-foot{margin-top:18px;text-align:center;color:rgba(255,255,255,.55);font-size:.9rem}

/* ---------- hero: one centred statement, generous air ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;color:#fff;overflow:hidden}
.hero-v,.hero-scrim{position:absolute;inset:0;width:100%;height:100%}
.hero-v{object-fit:cover;z-index:0}
/* the loop passes through dark and bright shots, so a soft pool sits behind the type
   rather than a flat sheet over the whole frame, which muddies the dark shots */
.hero-scrim{z-index:1;background:
  radial-gradient(ellipse 62% 58% at 26% 46%,rgba(6,8,9,.78) 0%,rgba(6,8,9,.42) 56%,rgba(6,8,9,0) 100%),
  linear-gradient(90deg,rgba(6,8,9,.55) 0%,rgba(6,8,9,.20) 46%,rgba(6,8,9,0) 78%),
  linear-gradient(180deg,rgba(6,8,9,.50) 0%,rgba(6,8,9,.14) 34%,rgba(6,8,9,.40) 78%,rgba(6,8,9,.82) 100%)}
/* left-aligned: every other section on the page shares this axis, and a long
   headline holds a hard edge better than a centred rag */
.hero-in{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;align-items:flex-start;
  justify-content:center;text-align:left;padding:130px 0 40px;
  max-width:var(--maxw);margin:0 auto;width:100%;
  padding-left:var(--pad);padding-right:var(--pad)}
.hero-slogan{font-size:clamp(.9rem,1.15vw,1.02rem);font-weight:500;color:rgba(255,255,255,.72);
  margin-bottom:clamp(24px,3vw,40px)}
/* no text-wrap:balance here: it interferes with line splitting */
.hero-h1{font-size:var(--d1);font-weight:700;letter-spacing:-.038em;line-height:.98;max-width:15ch}
/* inside the H1, so it keeps its own line and scale without leaving the heading */
.hero-reg{display:block;margin-top:clamp(16px,1.6vw,22px);
  font-size:clamp(1.1rem,1.9vw,1.7rem);font-weight:500;line-height:1.15;
  color:rgba(255,255,255,.7);letter-spacing:-.015em}
.hero-sub{margin-top:clamp(22px,2.4vw,32px);font-size:clamp(1rem,1.25vw,1.2rem);
  color:rgba(255,255,255,.82)}
.hero-cta{display:flex;align-items:center;gap:28px;flex-wrap:wrap;justify-content:flex-start;
  margin-top:clamp(34px,4vw,56px)}

/* her slim trust strip, kept slim and inside the hero */

/* ---------- brand band ----------
   Its own short register rather than an appendix to another section. It reads as
   the hero's plinth, which is why it shares the hero's dark ground: the intent
   is that hero, trust strip and client wall are one opening block, and the white
   proof section provides the page's first real edge. */
/* ---------- credibility block ----------
   One flat ground carrying both rows. The claim above labels the logos below,
   so no heading is needed; two stacked strips saying the same thing was the
   problem, and a translucent strip over the hero photograph was the mess. */
.brands{background:var(--ink)}
.brands-in{max-width:var(--maxw);margin:0 auto;
  padding:clamp(30px,3.2vw,46px) var(--pad) clamp(34px,3.6vw,54px)}
.trust-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 28px;
  font-size:clamp(.82rem,.92vw,.92rem);color:rgba(255,255,255,.74)}
/* the two rows share one distribution, which is what makes them read as one unit */
.logo-row{margin-top:clamp(26px,2.8vw,40px);padding-top:clamp(26px,2.8vw,40px);
  border-top:1px solid rgba(255,255,255,.12);
  display:flex;justify-content:space-between;align-items:center;gap:clamp(14px,1.8vw,32px)}
.logo-row li{display:flex;align-items:center;justify-content:center;
  height:clamp(38px,4vw,58px)}
/* Desaturated, not flattened. The supplied set is mixed — four marks are pure
   white, two carry full brand colour — which reads as an accident rather than a
   wall. brightness(0) invert(1) unifies it but destroys any mark with internal
   structure: Pepsi's globe collapses to a featureless disc. Greyscale plus a
   lift keeps that structure while removing the colour clash. It is still a
   treatment applied to someone else's mark, so confirm it with display
   permission. */
.logo-row img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  filter:grayscale(1) brightness(1.55);opacity:.88;
  transform:scale(var(--s,1));transition:opacity .3s ease,filter .3s ease}
/* per-mark optical balance: each file insets its mark in a different amount of
   transparent padding, so equal boxes do not mean equal apparent size */
.logo-row li:nth-child(1) img{--s:1.18}
.logo-row li:nth-child(5) img{--s:1.06}
.logo-row li:nth-child(6) img{--s:.9}
.logo-row li:hover img{opacity:1}

/* ---------- proof: statement left, factual note as the right counterweight ---------- */
/* The reference gives its intro section close to a full viewport of air. This
   one was the page's thinnest beat; it now reads as a deliberate pause rather
   than a gap between two other things. */
.proof{padding:clamp(112px,12.5vw,206px) 0 clamp(112px,12.5vw,206px);background:var(--paper)}
/* Two type roles, as the reference has: a short display statement on the left
   and a genuine body column on the right. A long paragraph set at display size
   is neither, which is what made this section read as merely big text. */
.proof-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr);
  gap:clamp(32px,7vw,140px);align-items:start}
.proof-statement{font-size:var(--d2);letter-spacing:-.036em;line-height:1.04;max-width:11ch}
.proof-body{max-width:46ch}
.proof-main{font-size:clamp(1.02rem,1.12vw,1.18rem);line-height:1.62;color:var(--ink)}
.proof-sec{margin-top:1.5em;color:var(--ink-2);
  font-size:clamp(.95rem,1.02vw,1.06rem);line-height:1.62}
/* The reference anchors the foot of its body column with a brand mark. Ammar's
   call on 6 August is that it stays in the brand teal rather than being set in
   ink: the X is Exponent's own mark in Exponent's own colour, which is not the
   loose ornamental use the teal rule exists to prevent. */
.proof-mark{margin-top:clamp(46px,5vw,84px);display:flex;justify-content:flex-end}
.proof-mark img{width:clamp(74px,7vw,118px);height:auto}

/* ---------- how we work: adjacent tinted panels ----------
   Built to the reference's panel device. It has no four-up media grid anywhere;
   its only multi-column block is a run of panels that share edges, carry no
   images and no buttons, and top-align their text. The previous version broke
   that four ways: media frames with nothing in them, gaps between the columns,
   text hanging below the boxes, and teal appearing nine times in one section
   against roughly three uses across their entire page. */
.proc{background:var(--paper);padding:var(--sect-h) 0}
.proc-lay{display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(22px,2.8vw,52px);align-items:start}

/* the vertical marker is the only section furniture the reference uses, and it
   replaces the heading rather than sitting beside one */
.marker{display:flex;flex-direction:column;align-items:center;
  gap:clamp(22px,2.6vw,36px);padding-top:clamp(6px,1vw,14px)}
.marker-rule{flex:0 0 auto;width:2px;height:clamp(58px,6.4vw,96px);background:var(--ink)}
.marker-label{writing-mode:vertical-rl;transform:rotate(180deg);
  font-size:clamp(.95rem,1.05vw,1.08rem);font-weight:500;letter-spacing:0}

/* no gap: the panels share edges and separate by tone, as the reference does */
.proc-panels{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.proc-p{padding:clamp(26px,2.8vw,44px);min-height:clamp(300px,30vw,420px);
  background:#e6ebeb}
.proc-p:nth-child(2){background:#eaeeee}
.proc-p:nth-child(3){background:#eef1f1}
.proc-p:nth-child(4){background:#f2f4f4}
/* teal carries one role here, the sequence, instead of three */
.proc-n{display:block;font-size:clamp(1.6rem,2.4vw,2.4rem);font-weight:700;
  letter-spacing:-.035em;line-height:1;color:var(--teal-deep);
  font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1}
.proc-p h3{margin-top:clamp(22px,2.4vw,34px);
  font-size:clamp(1.15rem,1.4vw,1.45rem);letter-spacing:-.028em;line-height:1.14}
.proc-p p{margin-top:clamp(10px,1vw,14px);color:var(--ink-2);
  font-size:clamp(.94rem,.98vw,1rem);line-height:1.58}

/* ---------- services: typographic rows, one large media stage ---------- */
.svcs{padding:var(--sect-h) 0;background:var(--mist)}
.svcs-h{margin-bottom:clamp(36px,4.4vw,64px)}
.d2{font-size:var(--d2);letter-spacing:-.032em}
/* stretch, not start: the media pane runs the full height of the list it belongs
   to instead of floating as a fixed square in a mostly empty column */
.svcs-lay{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.72fr);gap:clamp(30px,4vw,72px);
  align-items:stretch}
.svc-rows{border-top:1px solid var(--line)}
/* the teal rule marks the row currently driving the image */
.svc-r{border-bottom:1px solid var(--line);position:relative}
.svc-r::after{content:"";position:absolute;left:0;bottom:-1px;width:0;height:2px;background:var(--teal);
  transition:width .45s cubic-bezier(.22,.61,.36,1)}
.svc-r.on::after{width:100%}
.svc-r > a{display:block;padding:clamp(17px,2vw,30px) 0;
  transition:padding-left .4s cubic-bezier(.22,.61,.36,1),color .3s ease}
.svc-r.on > a{padding-left:clamp(8px,1.1vw,18px)}
.svc-t{font-size:clamp(1.5rem,3.1vw,2.7rem);font-weight:700;letter-spacing:-.034em;line-height:1.06}
.svc-r.on .svc-t{color:var(--ink)}
.svc-r:not(.on) .svc-t{color:rgba(10,12,13,.40);transition:color .3s ease}
.svc-mob{display:none}
.svc-stage{position:relative;height:100%;min-height:clamp(340px,42vw,620px);
  background:var(--mist);overflow:hidden}
.svc-s{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.04);transition:opacity .55s ease,transform .8s cubic-bezier(.22,.61,.36,1)}
.svc-s.is-on{opacity:1;transform:none}

.prov{margin-top:clamp(22px,2.4vw,34px);font-size:.85rem;color:var(--ink-2);max-width:70ch;line-height:1.6}
.prov-dark{color:rgba(255,255,255,.5)}

/* ---------- work ---------- */
.work{background:var(--ink);color:#fff;padding-bottom:clamp(64px,7vw,104px)}
.work-lead{position:relative;margin:0;height:100svh;overflow:hidden}
.work-lead img{width:100%;height:100%;object-fit:cover}
.work-lead-cap{position:absolute;inset:0;display:flex;align-items:flex-end;
  padding-bottom:clamp(44px,6vw,88px);
  background:linear-gradient(180deg,rgba(6,8,9,.12) 45%,rgba(6,8,9,.84) 100%)}
.work-lead-in{width:100%}
.work-kicker{font-size:.92rem;font-weight:500;color:rgba(255,255,255,.7);margin-bottom:16px}
.work-lead-t{font-size:var(--d1);letter-spacing:-.038em;line-height:.96}
.work-lead-m{margin-top:18px;color:rgba(255,255,255,.74);font-size:1.05rem}
.work-lead-in .pill{margin-top:34px}
/* ---------- work reel ----------
   Label sits rotated in the left gutter as the reference does, so it costs no
   vertical space, and the cards run off the right edge of the viewport. */
.reel-wrap{display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(18px,2.4vw,40px);padding:clamp(40px,4.4vw,72px) 0 0 var(--pad);
  align-items:stretch}
.reel-side{display:flex;flex-direction:column;justify-content:space-between;
  align-items:flex-start;padding-bottom:64px}
/* The teal rule is a sibling, not a pseudo-element on the label. Inside a vertical
   writing mode the physical offsets invert, so a bottom:0 pseudo-element drew the
   line above the text pointing at nothing. As a flex sibling it sits above the
   label and the label reads downward out of it, so the rule leads into the word
   rather than trailing off it. */
/* Proportioned against the reference's own markers. Theirs is a long thin rule,
   a generous gap, then the label at ordinary text weight and size. Ours was a
   short rule, a tight gap and a large bold label, which is what made it read as
   clumsy rather than as a quiet marker. */
.reel-label{display:flex;flex-direction:column;align-items:center;
  gap:clamp(22px,2.6vw,36px)}
/* rotate(180deg) so the label reads bottom-to-top, up toward the rule, which is
   the direction the reference sets its markers in */
.reel-kicker{writing-mode:vertical-rl;transform:rotate(180deg);
  font-size:clamp(.95rem,1.05vw,1.08rem);font-weight:500;letter-spacing:0;
  color:rgba(255,255,255,.86)}
.reel-rule{flex:0 0 auto;width:2px;height:clamp(58px,6.4vw,96px);background:var(--teal)}
.reel-nav{display:flex;flex-direction:column;gap:12px}
.rbtn{width:52px;height:52px;border:1px solid rgba(255,255,255,.4);border-radius:50%;background:none;
  color:#fff;cursor:pointer;position:relative;padding:0;
  transition:background .3s ease,border-color .3s ease,opacity .3s ease}
.rbtn:hover:not(:disabled){background:var(--teal);border-color:var(--teal)}
.rbtn:disabled{opacity:.3;cursor:default}
.rbtn .arw{width:100%;height:100%;border:0;display:block}
.rbtn .arw::after{content:"";position:absolute;inset:0;margin:auto;width:16px;height:1.5px;background:currentColor}
.rbtn .arw::before{content:"";position:absolute;top:50%;left:50%;width:7px;height:7px;
  border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;
  transform:translate(-2px,-50%) rotate(45deg)}
.rbtn .arw-l{transform:rotate(180deg)}

.reel{display:flex;gap:clamp(16px,1.8vw,28px);overflow-x:auto;scroll-snap-type:x mandatory;
  padding:0 var(--pad) 6px 0;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.reel::-webkit-scrollbar{display:none}
.reel:focus-visible{outline:2px solid var(--teal);outline-offset:4px}
/* cards sized against the viewport so they read as a reel, not a shrunken grid */
.rc{flex:0 0 clamp(280px,40vw,620px);scroll-snap-align:start}
.rc-img{overflow:hidden;background:#15191b}
.rc-img img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  transition:transform .8s cubic-bezier(.22,.61,.36,1)}
.rc:hover .rc-img img{transform:scale(1.045)}
.rc h3{margin-top:20px;font-size:clamp(1.25rem,1.9vw,1.7rem);letter-spacing:-.028em}
.rc p{margin-top:10px;color:rgba(255,255,255,.6);font-size:.94rem}
.work-more{grid-column:2;margin-top:clamp(30px,3.2vw,50px)}

/* ---------- industries: typographic statement register ---------- */
.ind-sect{background:var(--mist);padding:clamp(76px,8vw,124px) 0}
/* The reference's statement device: one display-size sentence with the claims
   set solid and the connective language receded. This replaces a five-row
   hairline list that was the loudest register on the page while carrying the
   least confirmed content, and it removes the page's third hairline list. */
/* shrink-to-fit, so the action aligns to the statement's real right edge. A
   `ch` max-width on both would not: `ch` resolves against each element's own
   font size, which made the action a quarter of the statement's width. */
.ind-block{display:inline-flex;flex-direction:column;max-width:100%}
.ind-say{max-width:40ch;font-size:clamp(1.55rem,3.3vw,3rem);font-weight:700;
  letter-spacing:-.032em;line-height:1.18;color:rgba(10,12,13,.40)}
.ind-say em{font-style:normal;color:var(--ink)}
.ind-act{align-self:flex-end;margin-top:clamp(30px,3.4vw,52px)}

/* ---------- regional: type leads, image supports ---------- */
.reg{background:var(--paper);padding:clamp(80px,8.5vw,132px) 0}
.reg-h{font-size:clamp(.92rem,1.1vw,1.02rem);font-weight:600;color:var(--ink-2);
  margin-bottom:clamp(34px,4vw,60px)}
/* shared row tracks so the images align even when the facts run to different
   line counts */
/* column-gap only: a shorthand gap would also space the shared subgrid rows */
/* Deliberately unequal: the copy says Islamabad is the headquarters and Dubai is
   project experience, so an exactly mirrored pair contradicted the words. */
.reg-split{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  column-gap:clamp(30px,4.4vw,80px);row-gap:0;
  grid-template-rows:auto auto auto}
.reg-c{border-top:2px solid var(--teal);padding-top:clamp(20px,2.2vw,30px);
  display:grid;grid-row:span 3;grid-template-rows:subgrid;align-content:start}
.reg-c h3{font-size:clamp(2.1rem,4.2vw,3.6rem);letter-spacing:-.036em;line-height:1}
.reg-fact{margin-top:16px;color:var(--ink-2);font-size:clamp(1rem,1.15vw,1.12rem);line-height:1.55;
  max-width:32ch;align-self:start}
.reg-img{margin-top:clamp(26px,3vw,42px);overflow:hidden;background:var(--mist)}
.reg-img img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  transition:transform .8s cubic-bezier(.22,.61,.36,1)}
/* narrower column, taller crop, so the two images still land on one baseline
   while carrying visibly different weight */
.reg-c:nth-child(2) .reg-img img{aspect-ratio:80/63}
.reg-c:hover .reg-img img{transform:scale(1.035)}

/* ---------- footer CTA ---------- */
/* A band, not a full viewport. The reference closes on a short image strip
   carrying a single action; a full-height photograph with centred text was both
   the page's flattest beat and the one place that abandoned the left axis every
   other section holds. */
.cta{position:relative;min-height:min(56svh,540px);display:grid;align-items:center;
  color:#fff;overflow:hidden;padding:clamp(56px,6vw,96px) 0}
.cta-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
/* the image is a busy mid-tone crowd, so the scrim has to carry the type */
.cta-scrim{position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(90deg,rgba(6,8,9,.86) 0%,rgba(6,8,9,.62) 52%,rgba(6,8,9,.42) 100%),
    linear-gradient(180deg,rgba(6,8,9,.42) 0%,rgba(6,8,9,.52) 100%)}
.cta-in{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin:0 auto;
  padding:0 var(--pad)}
.cta-t{font-size:clamp(1.85rem,3.5vw,3.05rem);letter-spacing:-.034em;line-height:1.06;
  max-width:20ch}
.cta-s{margin:20px 0 clamp(28px,3vw,42px);color:rgba(255,255,255,.82);
  font-size:clamp(1rem,1.15vw,1.12rem);max-width:44ch}
.cta .btn-lg{white-space:nowrap}

/* ---------- footer ---------- */
/* a teal hairline separates the dark CTA band from the dark footer so the page
   does not end as one undifferentiated black mass */
.ftr{background:var(--ink);color:#fff;padding:clamp(48px,5vw,72px) 0 clamp(26px,2.6vw,36px);
  border-top:2px solid var(--teal)}
.ftr-top{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;
  padding-bottom:clamp(30px,3.2vw,44px);border-bottom:1px solid var(--line-dk)}
.ftr-logo{height:52px;width:auto}
.ftr-social{display:flex;gap:28px;font-size:.95rem;font-weight:500}
.ftr-social a{color:rgba(255,255,255,.78)}
.ftr-social a:hover{color:var(--teal)}
.ftr-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(28px,3vw,48px);
  padding:clamp(34px,3.6vw,52px) 0;align-items:start}
.ftr-col h4{font-size:1rem;margin-bottom:14px;letter-spacing:-.018em}
.ftr-col p{color:rgba(255,255,255,.62);font-size:.94rem;line-height:1.6;margin-bottom:6px}
.ftr-col a:hover{color:var(--teal)}
.ftr-links li{margin-bottom:8px;color:rgba(255,255,255,.62);font-size:.94rem}
.ftr-legal{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding-top:clamp(22px,2.4vw,30px);border-top:1px solid var(--line-dk);
  color:rgba(255,255,255,.42);font-size:.86rem}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  /* One media pane leads the section once the two columns collapse. Putting an
     image under rows one and four to feature the confirmed pillars read as an
     accordion stuck half open. This lives here rather than at the phone
     breakpoint so every width below the two-column layout behaves the same. */
  .svcs-lay{grid-template-columns:1fr}
  .svc-mob{display:none}
  .svc-stage{display:block;order:-1;height:auto;min-height:0;aspect-ratio:16/10;
    margin-bottom:clamp(26px,4vw,38px)}
  /* Inactive rows stay readable but clearly secondary. Setting them to full ink
     left the teal underline as the only mark of the active row, which read as a
     stray rule rather than a selection — the 40% used on desktop is too faint
     for a phone. */
  .svc-r:not(.on) .svc-t{color:rgba(10,12,13,.62)}
  .proof-in{grid-template-columns:1fr;gap:22px}
  /* six across crushes each mark to about a third of its legible size */
  .logo-row{flex-wrap:wrap;row-gap:clamp(22px,5vw,34px)}
  .logo-row li{flex:0 0 30%;height:clamp(46px,7vw,64px)}
  /* four panels across a tablet leaves each about 260px; two reads properly */
  .proc-panels{grid-template-columns:repeat(2,1fr)}
  .proc-p{min-height:clamp(240px,34vw,320px)}
}
@media (max-width:820px){
  .hdr-nav{display:none}
  .hdr .btn-ghost{display:none}
  .burger{display:flex}
  .hdr-logo .logo-full{display:none}
  .hdr-logo .logo-mark{display:block}
  .hero-in{padding-top:112px}
  .hero-h1{max-width:12ch}
  .trust-row{justify-content:flex-start;gap:8px 20px}

  /* The nav carries margin-left:auto, which is what pushes everything after the
     logo to the right edge. Hiding it left the burger sitting beside the logo
     with the whole right half of the header empty, so the actions take over
     that job here. */
  .hdr-act{margin-left:auto}

  /* The header is transparent until it sticks. On desktop it opens over the
     dark part of the hero; the phone crop lands on a pale ceiling, so the mark
     and the burger sat on nothing. A top scrim gives them a ground without
     turning the header into a solid bar over the photograph. */
  .hdr:not(.stuck){background:linear-gradient(180deg,rgba(6,8,9,.78) 0%,rgba(6,8,9,.45) 55%,rgba(6,8,9,0) 100%)}

  /* A shrink-to-fit button puts its centred label ~30px in while the pill below
     starts at the page edge, so the two calls to action read as misaligned.
     Full width makes the primary action a block and the secondary a plain link. */
  .hero-cta{gap:20px}
  .hero-cta .btn{width:100%;text-align:center}

  /* Five items wrapping raggedly across three lines. A two-column grid gives
     them a shared left edge instead of flex reflowing them arbitrarily. */
  .trust-row{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px}

  /* Sized by its content rather than forced to 56svh. On a phone the fixed
     height left a band of dead photograph under the button, and a shrink-to-fit
     action floating in it. */
  .cta{min-height:0;padding:clamp(64px,13vw,92px) 0}
  .cta-t{max-width:none}
  .cta-s{margin-bottom:clamp(26px,5vw,34px)}
  .cta .btn-lg{width:100%;text-align:center;white-space:normal}

  /* The two actions become one stacked block. A full-width centred button above
     a left-aligned secondary link was the mismatch; both are centred, and the
     block gets real air under the subheadline rather than 34px. */
  .hero-cta{flex-direction:column;align-items:stretch;gap:20px;
    margin-top:clamp(48px,14vw,72px)}
  .hero-cta .btn{width:100%;text-align:center}
  .hero-cta .pill{width:100%;justify-content:center}

  /* The footer collapsed to one column is eight stacked blocks and reads
     endless. The addresses are short enough to pair. */
  .ftr-top{padding-bottom:clamp(22px,4vw,32px)}
  .ftr-logo{height:40px}
  .ftr-cols{grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,34px);
    padding:clamp(26px,5vw,36px) 0}

  /* Four stacked panels four tint-points apart are one grey block. A hairline
     gives each station an edge; the wider steps do the rest. */
  .proc-p{border-top:1px solid var(--line)}
  .proc-p:nth-child(1){background:#e2e9e9}
  .proc-p:nth-child(2){background:#eaeeee}
  .proc-p:nth-child(3){background:#e2e9e9}
  .proc-p:nth-child(4){background:#eaeeee}

  /* Subgrid exists to align the two cards side by side. Stacked, it invents
     implicit row tracks and opens a 54px hole under each heading. */
  .reg-split{display:block}
  .reg-c{display:block;grid-row:auto}
  .reg-c + .reg-c{margin-top:clamp(38px,7vw,56px)}
  .work-lead{height:78svh}
  .reel-nav{display:none}
  .rc{flex:0 0 78vw}
  /* label returns to a horizontal position above the reel on touch */
  .reel-wrap{grid-template-columns:minmax(0,1fr);gap:clamp(16px,3vw,24px);padding-right:0}
  .work-more{grid-column:1}
  .reel-side{padding-bottom:0}
  /* row-reverse keeps the rule trailing the word on mobile, where a leading
     rule would push the label off the page's left alignment */
  .reel-label{flex-direction:row-reverse;justify-content:flex-end;align-items:center;gap:14px}
  .reel-kicker{writing-mode:horizontal-tb;transform:none}
  .reel-rule{width:clamp(28px,7vw,48px);height:2px}
  /* the marker turns horizontal on touch, same as the reel label */
  .proc-lay{grid-template-columns:minmax(0,1fr);gap:clamp(20px,4vw,32px)}
  .marker{flex-direction:row-reverse;justify-content:flex-end;align-items:center;
    gap:14px;padding-top:0}
  .marker-rule{width:clamp(28px,7vw,48px);height:2px}
  .marker-label{writing-mode:horizontal-tb;transform:none}
  .proof-in{grid-template-columns:1fr;gap:clamp(26px,4vw,40px)}
  .proof-statement{max-width:none}
  .proof-mark{margin-top:clamp(32px,6vw,48px)}
  .reg-split{grid-template-columns:1fr;gap:clamp(38px,6vw,56px)}
  .ftr-cols{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){
  .proc-panels{grid-template-columns:1fr}
  .proc-p{min-height:0}
  .pill .arw{width:46px;height:46px}
  .ftr-legal{flex-direction:column;gap:8px}
  /* One continuous run, not five stacked lines. A two-column grid broke into a
     ragged table here, and one item per line gave five equal grey fragments no
     relationship to each other while costing five lines of height for a strip.
     Set as flowing text with separators it reads as a single credential line. */
  .trust-row{display:block;font-size:.86rem;line-height:1.8}
  /* nowrap keeps each credential whole, so a break can only fall between items */
  .trust-row li{display:inline;white-space:nowrap}
  /* the separator trails its own item rather than leading the next one, or a
     wrapped line starts on a stray dot */
  .trust-row li:not(:last-child)::after{content:"·";margin:0 .5em;
    color:rgba(255,255,255,.34)}
}

/* ---------- motion ---------- */
/* Pre-set only when JS will animate, so content is never hidden if the script
   fails or is blocked. */
/* hero lines are hidden only once SplitText has wrapped them, so a failed
   split never leaves the headline invisible */
.js-motion .hero-in.is-split .hero-slogan,
.js-motion .hero-in.is-split .hero-h1,
.js-motion .hero-in.is-split .hero-reg,
.js-motion .hero-in.is-split .hero-sub{visibility:visible}
.js-motion .hero-in:not(.is-split) .hero-slogan,
.js-motion .hero-in:not(.is-split) .hero-h1,
.js-motion .hero-in:not(.is-split) .hero-reg,
.js-motion .hero-in:not(.is-split) .hero-sub{opacity:0}
.js-motion .m-up{opacity:0;transform:translateY(26px)}
.js-motion .hero-v{transform:scale(1.07)}
.js-motion .brands{opacity:0}
/* extra height so the parallax never exposes an edge */
.work-lead img{height:114%;top:-7%;position:relative}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
  .js-motion .m-up,.js-motion .hero-v{
    opacity:1 !important;transform:none !important}
  .js-motion .brands{opacity:1 !important}
  .js-motion .hero-in:not(.is-split) .hero-slogan,
  .js-motion .hero-in:not(.is-split) .hero-h1,
  .js-motion .hero-in:not(.is-split) .hero-reg,
  .js-motion .hero-in:not(.is-split) .hero-sub{opacity:1 !important}
}