/* United Boubyan Company. Tokens first; everything derives from them.
   Colours follow the old site (light #F0F0F0 ground, #101010 bands, gold #C8A048 accent), Pietro 2026-09-06.
   The logo's red stays inside the logo. Temperament: Weighted. Texture: a faint trowelled grain, not paper. */
:root{
  --rise:clamp(96px,13vh,150px);
  --ground:#F1F0ED; --bone:#F8F7F5; --ink:#111111; --night:#101010;
  --gold:#C8A048; --open:#1E7A3C; --open-light:#A6EAB3; --gold-deep:#8A6A1F; --red:#E41818; --mute:#5A5650; --rule:rgba(17,17,17,.16);
  --shadow-sm:0 1px 2px rgba(20,18,14,.10);
  --shadow-md:0 1px 3px rgba(20,18,14,.08),0 8px 22px rgba(20,18,14,.10);
  --shadow-lg:0 4px 10px rgba(20,18,14,.10),0 22px 48px rgba(20,18,14,.16);
  --font-display:"Libre Caslon Display","Caslon Fallback",Georgia,serif; --font-subject:"Geologica","Geologica Fallback",Arial,sans-serif;
  --font-body:"IBM Plex Sans","Plex Fallback",Arial,sans-serif;
  --dur:480ms; --dur-scene:560ms; --dur-fast:150ms;
  --ease:cubic-bezier(.16,.84,.44,1); --ease-out:cubic-bezier(.32,.24,.15,1);
  --wrap:1280px; --gutter:clamp(20px,4vw,56px);
}
@font-face{font-family:"Libre Caslon Display";src:url(assets/fonts/caslon.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Caslon Fallback";src:local("Georgia");size-adjust:97%;ascent-override:92%;descent-override:24%;line-gap-override:0%}
@font-face{font-family:"Geologica";src:url(assets/fonts/geologica.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Hand";src:url(assets/fonts/hand.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(assets/fonts/plex.woff2) format("woff2");font-weight:100 700;font-display:swap}
@font-face{font-family:"Geologica Fallback";src:local("Arial Black"),local("Arial");size-adjust:96%;ascent-override:95%;descent-override:24%;line-gap-override:0%}
@font-face{font-family:"Plex Fallback";src:local("Arial");size-adjust:98%;ascent-override:94%;descent-override:22%;line-gap-override:0%}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--ink);font:400 17px/1.55 var(--font-body);-webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg{max-width:100%;display:block}
img{height:auto}
a{color:inherit}
h1{font-family:var(--font-display);font-weight:400;line-height:1.02;letter-spacing:-.01em;margin:0;text-wrap:balance}
h2,h3{font-family:var(--font-subject);font-weight:600;line-height:1.08;letter-spacing:-.02em;margin:0;text-wrap:balance}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
#main,#projects,#contact,#what,#chair,#footer{scroll-margin-top:118px}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.hero :focus-visible,.foot :focus-visible,.nf :focus-visible,.nav.is-dark :focus-visible,.nav:not(.is-solid) :focus-visible{outline-color:var(--bone)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Ground: a faint trowelled grain so no surface is flat. Two turbulence layers, multiplied. */
.ground{position:relative;isolation:isolate}
.ground::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.07 0 0 0 0 0.06 0 0 0 0 0.05 0 0 0 0.045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.009 0.016' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.2 0 0 0 0 0.17 0 0 0 0 0.13 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");
  background-size:320px 320px,900px 900px;mix-blend-mode:multiply}

/* Nav: one clean bar. Transparent over the hero with the lockup and links in bone; once the page moves it turns
   to frosted bone with ink type, and it steps out of the way on scroll down, back on scroll up. */
.nav{position:fixed;inset:0 0 auto;z-index:50;color:var(--bone);transition:transform var(--dur) var(--ease),background-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),color var(--dur) var(--ease)}
.nav .bar{display:flex;align-items:center;gap:30px;min-height:88px;transition:min-height var(--dur) var(--ease)}
/* Scrolled: the bar stays transparent (Pietro 2026-09-07), the type and the lockup turn to ink so they read on the light ground. */
.nav.is-solid{color:var(--ink)}
.nav.is-solid .bar{min-height:72px}
.brand{display:flex;align-items:center;text-decoration:none;margin-right:auto;transform-origin:50% 0;transition:transform 680ms var(--ease-out)}
/* Over the chairman's message the lockup slides to the centre of the bar and grows a little (app.js sets .in-message and --shift). */
.nav.in-message .brand{transform:translateX(var(--shift,0px)) translateY(6px) scale(1.6)}
.brand img{height:60px;width:auto;transition:height var(--dur) var(--ease)}
.brand .dark{display:none}
.nav.is-solid .brand .light{display:none}
.nav.is-solid .brand .dark{display:block;height:48px}
.links{display:flex;align-items:center;gap:30px;margin:0;padding:0;list-style:none;font-family:var(--font-subject);font-weight:500;font-size:.95rem;letter-spacing:.01em}
.links a{position:relative;text-decoration:none;padding:8px 0;color:inherit}
.links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:var(--red);transform:scaleX(0);transform-origin:left center;transition:transform var(--dur) var(--ease)}
.links a:hover::after,.links a[aria-current]::after{transform:scaleX(1)}
.cta{display:inline-flex;align-items:center;gap:12px;background:var(--gold);color:var(--ink);border-radius:999px;padding:6px 22px 6px 6px;font-weight:600;font-size:.98rem;text-decoration:none;white-space:nowrap;box-shadow:0 0 26px rgba(200,160,72,.38);transition:box-shadow var(--dur-fast) linear,transform var(--dur-fast) linear}
.cta:hover{box-shadow:0 0 34px rgba(200,160,72,.55)}
.cta:active{transform:translateY(1px)}
.ic{flex:none;display:inline-grid;place-items:center;width:34px;height:34px;border-radius:999px;background:var(--ink);color:var(--gold);transition:transform var(--dur-fast) linear}
.ic svg{width:16px;height:16px}
.cta:hover .ic,.btn:hover .ic{transform:scale(1.08)}
/* The icons answer the pointer: the phone rings once, the building builds itself floor by floor. */
.cta .ic svg{transform-origin:50% 90%}
.cta:hover .ic svg{animation:ring 640ms var(--ease-out) 1}
@keyframes ring{0%{transform:rotate(0)}18%{transform:rotate(-14deg)}38%{transform:rotate(12deg)}58%{transform:rotate(-8deg)}78%{transform:rotate(5deg)}100%{transform:rotate(0)}}
.btn:hover .ic svg{animation:build 520ms var(--ease-out) 1}
@keyframes build{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
.cta:active .ic,.btn:active .ic{transform:scale(.96)}
/* The strip above the bar: phone, email, hours. Bone at reduced strength over the hero, mute on the frosted bar. */
.strip{font:500 .8rem/1 var(--font-body);letter-spacing:.01em}
.strip{transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.strip .wrap{display:flex;align-items:center;gap:28px;min-height:34px;border-bottom:1px solid rgba(248,247,245,.18);transition:border-color var(--dur) var(--ease)}
.strip a,.strip span{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:inherit;opacity:.88;transition:opacity var(--dur-fast) linear}
.strip a:hover{opacity:1}
.strip svg{width:14px;height:14px;flex:none}
.strip .hours{margin-left:auto}
/* The strip is solid bone from the first frame and stays so. */
.nav .strip{color:var(--mute);background:var(--bone)}
.nav .strip .wrap{border-bottom-color:var(--rule)}
/* The hours turn green while the office is open in Kuwait (set by app.js on the clock); closed, they stay as they are. */
.hours .now{display:none}
.hours.is-open .now{display:inline}
.hours.is-open{color:var(--open);opacity:1}
.nav.is-solid .hours.is-open,.links .hours.is-open{color:var(--open)}
.menu-btn{display:none;width:44px;height:44px;border:0;background:var(--bone);color:var(--ink);border-radius:999px;cursor:pointer;align-items:center;justify-content:center;transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.nav.is-solid .menu-btn{background:var(--ink);color:var(--bone)}
.menu-btn svg{width:22px;height:22px}
/* The bar never frosts (Pietro, 2026-09-07). It still must not let writing run into the lockup, so once the
   page moves a soft scrim of the ground's own colour fades out beneath it. No blur, no edge, just separation. */
.nav .bar{position:relative}
.nav .bar::before{content:"";position:absolute;left:50%;width:100vw;transform:translateX(-50%);top:0;bottom:-72px;z-index:-1;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,rgba(241,240,237,.42) 0%,rgba(241,240,237,.24) 46%,rgba(241,240,237,0) 100%);
  transition:opacity var(--dur) var(--ease)}
.nav.is-solid .bar::before{opacity:1}
.nav.is-dark .bar::before{background:linear-gradient(180deg,rgba(16,16,16,.46) 0%,rgba(16,16,16,.26) 46%,rgba(16,16,16,0) 100%)}
.nav.menu-open .bar::before{opacity:0}
/* Over a night section the bar goes back to bone type, the light lockup and the bone menu button. app.js sets .is-dark. */
.nav.is-dark{color:var(--bone)}
.nav.is-dark .brand .light{display:block}
.nav.is-dark .brand .dark{display:none}
.nav.is-dark .menu-btn{background:var(--bone);color:var(--ink)}
/* Compact bar, everywhere and for the whole scroll (Pietro 2026-09-07): the round button opens the panel, the inline
   links never show. The strip stays above the bar on desktop; on phones its three items sit in the menu instead. */
.nav.is-compact .menu-btn{display:inline-flex}
.nav.is-compact .links{display:none}
/* Open: the bar turns solid bone with no blur (a blur over the playing reel is what made it lag), the lockup goes dark. */
.nav.menu-open{background:var(--bone);color:var(--ink)}
.nav.menu-open .brand .light{display:none}
.nav.menu-open .brand .dark{display:block}
.nav.menu-open .menu-btn{background:var(--ink);color:var(--bone)}
.menu-btn svg path{transition:d var(--dur-fast) linear}
/* The panel. Bone ground, a hairline above, the deck drawn across the top left to right, then the links and the
   contact details rise in order. Closed: hidden, no layout, nothing painted. */
.menu{position:absolute;left:0;right:0;top:100%;background:var(--bone);color:var(--ink);box-shadow:0 1px 0 var(--rule) inset,var(--shadow-lg);visibility:hidden;opacity:0;transform:translateY(-6px);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility 0s linear var(--dur)}
.nav.menu-open .menu{visibility:visible;opacity:1;transform:none;transition-delay:0s}
.menu .wrap{display:grid;grid-template-columns:1fr auto;column-gap:clamp(40px,8vw,120px);row-gap:30px;padding-top:30px;padding-bottom:44px;align-items:start}
.menu-deck{grid-column:1/-1;width:min(60%,340px);height:auto;fill:var(--red);margin-bottom:-14px}
.menu-deck path{clip-path:inset(0 100% 0 0);transition:clip-path 200ms var(--ease-out)}
.nav.menu-open .menu-deck path{clip-path:inset(0 0 0 0);transition:clip-path 640ms var(--ease-out) 60ms}
.menu-links{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-family:var(--font-subject);font-weight:600;font-size:clamp(1.5rem,1.1rem + 1.1vw,2.1rem);letter-spacing:-.015em;line-height:1.15}
.menu-links a{position:relative;display:inline-block;padding:4px 0;text-decoration:none}
.menu-links a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;border-radius:2px;background:var(--red);transform:scaleX(0);transform-origin:left center;transition:transform var(--dur) var(--ease)}
.menu-links a:hover::after,.menu-links a[aria-current]::after{transform:scaleX(1)}
.menu-contact{margin:0;display:grid;gap:18px;min-width:min(100%,300px)}
.menu-contact dt{font:500 .72rem/1 var(--font-subject);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-bottom:6px}
.menu-contact dd{margin:0;font:500 1.02rem/1.4 var(--font-body)}
.menu-contact a{text-decoration:none}
.menu-contact a:hover{text-decoration:underline;text-underline-offset:3px}
.menu .hours.is-open{color:var(--open)}
/* the rise: each item in turn, after the deck has crossed */
.menu-links li,.menu-contact>div{opacity:0;transform:translateY(8px);transition:opacity 200ms var(--ease),transform 200ms var(--ease)}
.nav.menu-open .menu-links li,.nav.menu-open .menu-contact>div{opacity:1;transform:none;transition:opacity 420ms var(--ease-out),transform 420ms var(--ease-out)}
.nav.menu-open .menu-links li:nth-child(1){transition-delay:200ms}.nav.menu-open .menu-links li:nth-child(2){transition-delay:260ms}.nav.menu-open .menu-links li:nth-child(3){transition-delay:320ms}.nav.menu-open .menu-links li:nth-child(4){transition-delay:380ms}.nav.menu-open .menu-links li:nth-child(5){transition-delay:440ms}
.nav.menu-open .menu-contact>div:nth-child(1){transition-delay:320ms}.nav.menu-open .menu-contact>div:nth-child(2){transition-delay:400ms}.nav.menu-open .menu-contact>div:nth-child(3){transition-delay:480ms}
@media(max-width:900px){
  .nav .strip{display:none}
  .nav .bar{gap:14px;min-height:72px}
  .brand img{height:46px}.nav.is-solid .brand .dark{height:40px}.nav.is-solid .bar{min-height:64px}
  /* The one CTA stays on the phone bar: it is the only way to reach the company from the top of the page,
     and the strip above is hidden here. Compact so it clears the lockup and the menu button at 390px. */
  .nav .cta{display:inline-flex;gap:8px;padding:5px 15px 5px 5px;font-size:.9rem}
  .nav .cta .ic{width:30px;height:30px}
  .menu .wrap{grid-template-columns:1fr;row-gap:30px;padding-top:22px;padding-bottom:36px}
  .menu-deck{width:56%;margin-bottom:-8px}
  .menu-links{gap:2px}
  .menu-contact{gap:14px}
}
/* Touch targets. The contact rows are 21px of text; on any coarse pointer they get a 44px tall hit area
   (WCAG 2.5.8 asks 24px, Apple and Android ask 44). Nothing moves visually: the padding is negative-margined back. */
@media(max-width:900px),(pointer:coarse){
  .menu-contact dd a,.foot-contact dd a{display:inline-block;padding-block:12px;margin-block:-12px}
  .foot-links a,.menu-links a{padding-block:6px}
  .spot{width:44px;height:44px}
}

/* Hero: the vision. The motorway to the horizon fills the screen under a light off-white wash, the logo and
   the statement sit over it in the upper half so the loop stays visible below. The photograph eases forward
   once, very slowly, and rests. Reduced motion: still. */
.hero{--nav:122px;position:relative;min-height:100svh;display:grid;align-items:start;padding:calc(var(--nav) + 7vh) 0 calc(var(--rise) + 96px);overflow:clip;isolation:isolate}
.real{position:absolute;inset:0;z-index:-1}
.real picture,.real img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
/* The wash into the ground is lighter while the hero is at rest and comes to full strength as the page moves
   towards the services (app.js sets --wash from .6 to 1 over the first 40% of a screen). Pietro, 2026-09-19. */
.real::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(241,240,237,0) calc(100% - 300px),rgba(241,240,237,calc(.5*var(--wash,1))) calc(100% - 170px),rgba(241,240,237,calc(.9*var(--wash,1))) calc(100% - 90px),var(--ground) calc(100% - 40px),var(--ground) 100%),
  linear-gradient(180deg,rgba(16,16,16,.5) 0%,rgba(16,16,16,.42) 55%,rgba(16,16,16,.34) 74%,rgba(16,16,16,.12) 100%)}
/* The reel sits over the still, covers the frame, plays once and holds. Under reduced motion it is hidden and the still shows. */
.real video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
/* Once the reel has finished, the picture eases forward very slowly and rests. The still does the same on a clock. */
.js .real.settled video{animation:drift 14s cubic-bezier(.2,.5,.3,1) forwards}
.js .real .still img{animation:drift 14s cubic-bezier(.2,.5,.3,1) 4.6s forwards}
@keyframes drift{from{transform:scale(1)}to{transform:scale(1.05)}}
.hero .wrap{width:100%;display:grid;justify-items:center}
.stage{position:relative;width:min(100%,1160px);padding:clamp(16px,2vh,28px) 0;display:grid;justify-items:center;text-align:center;gap:clamp(22px,4vh,40px)}
.lockup{position:relative;width:min(68%,690px);aspect-ratio:2944/1094;z-index:2}
.lockup svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.lockup path{fill:var(--bone)}
.lockup .deck path{fill:var(--red)}
.copy{position:relative;z-index:2;max-width:70ch;display:grid;justify-items:center;gap:26px}
.hero h1{font-size:clamp(2.8rem,5.1vw + .4rem,5.5rem);max-width:15ch;color:var(--bone)}
.actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:22px}
.btn{display:inline-flex;align-items:center;gap:14px;background:var(--bone);color:var(--ink);border-radius:999px;padding:8px 28px 8px 8px;font-weight:600;font-size:1.05rem;text-decoration:none;box-shadow:var(--shadow-md);transition:transform var(--dur-fast) linear,box-shadow var(--dur-fast) linear}
.btn:hover{box-shadow:var(--shadow-lg)}
.btn:active{transform:translateY(1px)}
.btn .ic{width:40px;height:40px;color:var(--bone)}
.btn .ic svg{width:18px;height:18px}
@media(max-width:900px){
  .hero{--nav:72px;padding:calc(var(--nav) + 4vh) 0 56px}
  .real picture,.real img,.real video{object-position:42% 40%}
  .stage{width:100%;padding:16px 0}
  .lockup{width:min(90%,420px)}
  .hero h1{font-size:clamp(2.35rem,10.2vw,3.2rem);max-width:14ch}
}
/* the assembly */
.js .hero:not(.built) .towers{clip-path:inset(100% 0 0 0)}
.js .hero:not(.built) .cables{clip-path:inset(0 50% 0 50%)}
.js .hero:not(.built) .deck{clip-path:inset(0 50% 0 50%)}
.js .hero:not(.built) .ubc,.js .hero:not(.built) .arabic{opacity:0;transform:translateY(10px)}
.js .hero .towers{transition:clip-path 520ms var(--ease-out) 120ms}
.js .hero .cables{transition:clip-path 620ms var(--ease-out) 520ms}
.js .hero .deck{transition:clip-path 560ms var(--ease-out) 1000ms}
.js .hero .ubc{transition:opacity 400ms var(--ease-out) 1420ms,transform 400ms var(--ease-out) 1420ms}
.js .hero .arabic{transition:opacity 400ms var(--ease-out) 1640ms,transform 400ms var(--ease-out) 1640ms}
.js .hero.built .towers,.js .hero.built .cables,.js .hero.built .deck{clip-path:inset(0 0 0 0)}
.js .hero.built .ubc,.js .hero.built .arabic{opacity:1;transform:none}

/* Our Core Services: the section after the vision. The four numbered lines as an index on the sketch ground,
   one open at a time; the heading and the lead sentence top right; the photograph beside the index, plain,
   tucked under its lower corner; the plan drawing of the same site as a faint layer; the old figure row beneath. */
.reality{position:relative;z-index:2;padding:0 0 clamp(96px,12vh,160px)}
.sketch{position:absolute;left:0;top:-12%;z-index:0;width:100%;height:124%;object-fit:cover;object-position:50% 50%;opacity:.11;mix-blend-mode:multiply;pointer-events:none;will-change:transform;
  /* the drawing has no edge of its own: it fades up out of the hero and away again at the foot */
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 24%,#000 88%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 24%,#000 88%,transparent 100%)}
/* the ground grain starts where the photograph has finished settling, not on the section's own edge */
.reality.ground::before{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 190px);mask-image:linear-gradient(180deg,transparent 0,#000 190px)}
.reality .wrap{position:relative;z-index:1;display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(16px,2.4vw,32px)}
/* Two columns that overlap: the right one carries the heading and the photograph, stacked with one fixed gap; the
   left one the panel and the figures. Subgrid keeps both on the twelve columns. The right sits above the left so the
   photograph crosses the panel's corner, and lets the pointer through to the index beneath. */
.right{grid-column:6/13;grid-row:1;display:grid;grid-template-columns:subgrid;align-content:start;position:relative;z-index:3;pointer-events:none}
.right>*{pointer-events:auto}
.left{grid-column:1/8;grid-row:1;display:grid;grid-template-columns:subgrid;align-content:start;position:relative;z-index:2}
.head{grid-column:3/8;display:grid;gap:22px;margin-top:clamp(36px,5vh,60px)}
.what{font-family:var(--font-display);font-weight:400;font-size:clamp(2.4rem,4.1vw,4.2rem);line-height:1;letter-spacing:-.01em;max-width:9ch;margin-top:-4px}
.lead{margin:0;font-size:1.02rem;line-height:1.5;color:var(--mute);max-width:34ch;text-wrap:pretty}
.index{grid-column:1/8;position:relative;margin-top:calc(-1 * var(--rise));background:var(--bone);
  border-radius:clamp(18px,2.4vw,32px) clamp(48px,7vw,110px) 0 0;
  padding:clamp(36px,5vw,64px) clamp(32px,5vw,64px) clamp(36px,5vw,56px);
  box-shadow:0 2px 6px rgba(20,18,14,.06),0 18px 40px rgba(20,18,14,.13),0 44px 90px rgba(20,18,14,.14)}
.services{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--rule)}
.svc{position:relative;border-top:1px solid var(--rule)}
.svc::before{content:"";position:absolute;left:0;top:-1px;height:2px;width:0;background:var(--red);transition:width var(--dur) var(--ease)}
.svc.is-open::before{width:56px}
.svc button{all:unset;box-sizing:border-box;display:grid;grid-template-columns:52px 1fr;align-items:baseline;width:100%;padding:20px 0 18px;cursor:pointer;font-family:var(--font-subject);font-weight:500;font-size:clamp(1.5rem,2.1vw,2.1rem);line-height:1.05;letter-spacing:-.02em;color:var(--ink);transition:color var(--dur-fast) linear}
.svc button:focus-visible{outline:3px solid var(--ink);outline-offset:4px}
.svc .n{font-family:var(--font-body);font-weight:400;font-size:.95rem;letter-spacing:.02em;color:var(--mute);font-variant-numeric:tabular-nums}
.svc:not(.is-open) button:hover{color:var(--gold-deep)}
.svc .d{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--dur) var(--ease)}
.svc .d>p{overflow:hidden;margin:0;padding-left:52px;max-width:44ch;font-size:1.05rem;line-height:1.55;opacity:0;transition:opacity var(--dur) var(--ease)}
.svc.is-open .d{grid-template-rows:1fr}
.svc.is-open .d>p{opacity:1;padding-bottom:26px}
.btn.dark{background:var(--ink);color:var(--bone)}
.btn.dark .ic{background:var(--bone);color:var(--ink)}
.more{margin-top:30px}
.site{grid-column:1/8;margin:56px 0 0;position:relative}
.site .frame{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:clamp(22px,3vw,40px) clamp(22px,3vw,40px) clamp(22px,3vw,40px) clamp(64px,9vw,140px);box-shadow:var(--shadow-lg);background:var(--night)}
.site picture,.site img{position:absolute;inset:0;width:100%;height:100%}
.site img{object-fit:cover;object-position:50% 50%}
.figures{grid-column:1/6;margin:48px 24px 0 0;display:grid;grid-template-columns:1fr 1fr;align-items:start;column-gap:clamp(16px,2.4vw,32px);row-gap:clamp(28px,4vh,44px);text-decoration:none;
  padding-top:28px;border-top:1px solid var(--rule)}
.figures .go{grid-column:1/-1;justify-self:start;margin-top:8px}
.fig{display:grid;gap:6px}
.fig b{font-family:var(--font-subject);font-weight:600;font-size:clamp(2.4rem,4vw,4rem);line-height:.95;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.fig small{font-size:.95rem;color:var(--mute)}
.go{display:inline-flex;align-items:center;gap:12px;font-weight:600;font-size:1.05rem;padding-bottom:3px;border-bottom:2px solid var(--gold);transition:border-color var(--dur-fast) linear;white-space:nowrap}
.go svg{width:20px;height:20px}
.figures:hover .go{border-color:var(--ink)}
/* The tie: four routes from the heading to the four services, grey; the open one flows red from the heading
   outwards, two pixels, round ends. Desktop only, script only. */
.tie{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none;overflow:visible;display:none}
.tie path{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tie .tie-grey path{stroke:rgba(17,17,17,.22);opacity:0;transition:opacity 600ms var(--ease-out)}
.tie.ready .tie-grey path{opacity:1}
.tie .tie-red{stroke:var(--red)}
.tie circle{fill:var(--red);opacity:0;transition:opacity 220ms var(--ease-out)}
.tie circle.on{opacity:1}
@media(min-width:901px) and (hover:hover) and (pointer:fine){.js .tie.ready{display:block}}
/* Desktop: the index reads off a scale rule, as the projects chooser does. Fine graduations run down the panel's
   edge, a long tick marks each service, and the red marker slides out at the one that is open. */
@media(min-width:901px){
  .services{position:relative;--pad:clamp(32px,5vw,64px);--mid:calc(20px + clamp(1.5rem,2.1vw,2.1rem) * .54)}
  .services::before{content:"";position:absolute;left:calc(-1 * var(--pad));top:0;bottom:0;width:13px;pointer-events:none;
    background-image:repeating-linear-gradient(180deg,rgba(17,17,17,.5) 0 1px,transparent 1px 6px),repeating-linear-gradient(180deg,rgba(17,17,17,.7) 0 1px,transparent 1px 30px);background-size:7px 100%,13px 100%;background-repeat:no-repeat}
  .svc::after{content:"";position:absolute;left:calc(-1 * var(--pad));top:var(--mid);width:24px;height:1px;background:var(--ink)}
  .svc::before{left:calc(-1 * var(--pad));top:calc(var(--mid) - 1px);height:3px;border-radius:0 2px 2px 0}
  .svc.is-open::before{width:calc(var(--pad) - 10px)}
}
/* Chairman's Message: a deeper shade of the bone ground, pinned for one screen on desktop. The two paragraphs share
   one box and swap; each word turns ink as the runway is read (app.js sets .lit from scroll progress). Each
   paragraph's strong saying is set a size larger. Right, the photograph with plus markers. */
.message{color:var(--ink);background:linear-gradient(180deg,var(--ground) 0,#DAD6CE 260px,#DAD6CE 100%)}
.runway{height:380svh}
.pin{position:sticky;top:0;height:100svh;display:grid;align-items:center;overflow:clip}
/* the last beat: the label, signature and photograph ease away and the closing saying lifts out of the paragraph to
   the centre of the section (app.js moves it; the other words fade) */
.pin .chair,.pin .signature,.pin .sheet{transition:opacity 520ms var(--ease),transform 520ms var(--ease)}
.pin.is-final .chair,.pin.is-final .signature,.pin.is-final .sheet{opacity:0;transform:translateY(-14px);pointer-events:none}
.pin.is-final .para .w{opacity:0;transition:opacity 420ms var(--ease)}
/* The closing saying: laid out once, at its final size, in the centre of the pinned screen. It crossfades with
   the message rather than flying out of it, so nothing scales and nothing re-wraps and the type stays crisp.
   It reads the same way backwards: scroll up and the message comes back. */
.closing{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) translateY(10px);margin:0;z-index:4;pointer-events:none;
  width:min(24ch,66%);text-align:center;text-wrap:balance;
  font-family:var(--font-display);font-weight:400;letter-spacing:-.012em;line-height:1.14;
  font-size:clamp(1.9rem,min(4.4vw,6.4svh),3.9rem);color:var(--ink);
  opacity:0;transition:opacity 420ms var(--ease),transform 560ms var(--ease)}
.pin.is-final .closing{opacity:1;transform:translate(-50%,-50%);transition:opacity 560ms var(--ease) 120ms,transform 640ms var(--ease) 120ms}
.pin .wrap{position:relative;width:100%;display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:auto auto auto;column-gap:clamp(16px,2.4vw,32px);row-gap:clamp(16px,3vh,40px);padding-top:calc(122px + 1vh)}
.chair{grid-column:1/13;grid-row:1;font-family:"Hand",cursive;font-weight:400;font-size:clamp(1.6rem,2.4vw,2.3rem);line-height:1.2;letter-spacing:0;text-transform:none;color:var(--ink);margin:0}
.scrub{grid-column:1/8;grid-row:2;position:relative;z-index:1;display:grid;align-self:center}
.para{grid-area:1/1;margin:0;font-family:var(--font-display);font-weight:400;font-size:clamp(1.2rem,min(2.5vw,2.9svh),2.5rem);line-height:1.38;letter-spacing:-.005em;max-width:40ch;text-wrap:pretty;opacity:0;transform:translateY(14px);transition:opacity 420ms var(--ease),transform 420ms var(--ease);pointer-events:none}
.para.is-on{opacity:1;transform:none;pointer-events:auto}
.scrub .key{font-style:normal;position:relative}
.scrub .w{transition:color 260ms var(--ease),background-color 260ms var(--ease)}
.js .scrub .w{color:rgba(17,17,17,.2)}
.js .scrub .w.lit{color:var(--ink)}
/* the saying is set a size larger than the rest; that is the highlight */
.signature{grid-column:1/8;grid-row:3;position:relative;z-index:1;display:grid;gap:16px;justify-items:start;align-self:end}
.who{margin:0;font-family:"Hand",cursive;font-size:1.25rem;color:var(--mute)}
.sig-row{display:flex;align-items:flex-end;gap:clamp(28px,4vw,56px)}
.years{margin:0;display:grid;gap:4px}
.years b{font-family:var(--font-subject);font-weight:600;font-size:clamp(2rem,min(3.6vw,4.4svh),3.6rem);line-height:.9;letter-spacing:-.04em}
.years small{font-size:.9rem;color:var(--mute)}
/* the photograph and its markers */
.sheet{grid-column:7/13;grid-row:2/4;margin:0;align-self:center;justify-self:end;display:grid;gap:14px;width:min(100%,calc(58svh * 900 / 811))}
.plate{position:relative;aspect-ratio:900/811;overflow:visible;border-radius:22px 22px 22px 72px;box-shadow:var(--shadow-lg)}
.plate img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit;transform:translateZ(0)}
.spot{all:unset;position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);cursor:pointer;display:grid;place-items:center;z-index:2}
.spot:focus-visible .dot{outline:3px solid var(--ink);outline-offset:3px}
.dot{width:26px;height:26px;border-radius:999px;background:var(--bone);color:var(--ink);box-shadow:0 0 0 2px rgba(17,17,17,.22),var(--shadow-md);display:grid;place-items:center;transition:transform var(--dur-fast) linear,box-shadow var(--dur) var(--ease)}
.dot::before{content:"+";font:600 16px/1 var(--font-subject)}
.spot:hover .dot,.spot:focus-visible .dot,.spot.open .dot{transform:scale(1.08);box-shadow:0 0 0 3px var(--gold),var(--shadow-md)}
.lab{position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%) translateX(-6px);background:var(--bone);color:var(--ink);font:500 .78rem/1 var(--font-subject);letter-spacing:.04em;padding:9px 12px;border-radius:999px;box-shadow:var(--shadow-md);white-space:nowrap;opacity:0;transition:opacity var(--dur-fast) linear,transform var(--dur) var(--ease)}
.spot.up .lab{left:auto;right:calc(100% + 10px);transform:translateY(-50%) translateX(6px)}
.spot:hover .lab,.spot:focus-visible .lab,.spot.open .lab{opacity:1;transform:translateY(-50%)}
.lab .ar{display:inline-block;margin-left:10px;padding-left:10px;border-left:1px solid rgba(17,17,17,.22);font-family:var(--font-subject),system-ui,sans-serif;font-size:.95rem;line-height:1;vertical-align:middle}
.cap{margin:0;font-size:.9rem;line-height:1.45;color:var(--mute)}
.cap b{font-weight:600;color:var(--ink)}
@media(max-height:780px){.pin .wrap{row-gap:14px;padding-top:112px}.chair{font-size:1.5rem}}
/* Phones, and reduced motion: no pin, both paragraphs stacked, the photograph below. */
@media(max-width:900px){
  .message{padding:72px 0 64px}
  .runway{height:auto}
  .pin{position:static;height:auto;display:block;overflow:visible}
  .closing{display:none} /* phones read both paragraphs in full; there is nothing to cross to */
  .pin .wrap{display:block;padding-top:0}
  .chair{margin-bottom:24px}
  .scrub{display:block}
  .para{opacity:1;transform:none;pointer-events:auto;font-size:1.35rem;line-height:1.45;margin-bottom:22px}
  .signature{margin-top:32px}
  .who{font-size:1.1rem;text-wrap:balance} /* the hand keeps the attribution on one line at 390 */
  .sheet{margin-top:40px;width:100%}
  .lab{left:50%;right:auto;top:calc(100% + 8px);transform:translate(-50%,5px);
    width:max-content;max-width:min(80vw,300px);white-space:nowrap;text-align:center}
  .spot.up .lab{left:50%;right:auto;top:auto;bottom:calc(100% + 8px);transform:translate(-50%,-5px)}
  .spot:hover .lab,.spot:focus-visible .lab,.spot.open .lab{transform:translate(-50%,0)}
  .spot.up:hover .lab,.spot.up:focus-visible .lab,.spot.up.open .lab{transform:translate(-50%,0)}
}
/* Shared with the 404 page: the section eyebrow, and the number set as an action. */
.eyebrow{margin:0;font:500 .72rem/1 var(--font-subject);letter-spacing:.16em;text-transform:uppercase;color:rgba(248,247,245,.5)}
.ct-tel{display:inline-flex;align-items:center;gap:16px;text-decoration:none;color:var(--gold)}
.ct-tel .ic{width:52px;height:52px;background:var(--gold);color:var(--night)}
.ct-tel .num{font-family:var(--font-subject);font-weight:600;letter-spacing:-.02em;font-size:clamp(1.7rem,3.6vw,2.9rem);font-variant-numeric:tabular-nums;
  background-image:linear-gradient(var(--gold),var(--gold));background-size:0% 2px;background-position:0 100%;background-repeat:no-repeat;transition:background-size var(--dur) var(--ease)}
.ct-tel:hover .num{background-size:100% 2px}
.ct-tel:hover .ic{transform:scale(1.06)}
@media(max-width:900px){.ct-tel{gap:12px}.ct-tel .ic{width:44px;height:44px}}

/* Footer: the menu panel's manner on the night ground. The deck draws across the top as the footer arrives. */
.foot{overflow:clip;background:var(--night);color:var(--bone);padding:clamp(56px,8vh,88px) 0 36px}
.foot-deck{display:block;width:min(60%,340px);height:auto;fill:var(--red);margin-bottom:22px}
.js .foot-deck path{clip-path:inset(0 100% 0 0);transition:clip-path 900ms var(--ease-out) 120ms}
.js .foot.in .foot-deck path{clip-path:inset(0 0 0 0)}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.3fr) auto minmax(0,1fr);column-gap:clamp(40px,7vw,120px);row-gap:36px;align-items:start;padding-bottom:40px;border-bottom:1px solid rgba(248,247,245,.16)}
.foot-brand img{width:min(100%,300px);height:auto}
.foot-about{margin:22px 0 0;max-width:44ch;font-size:.98rem;line-height:1.55;color:rgba(248,247,245,.78)}
.foot-links{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-family:var(--font-subject);font-weight:600;font-size:clamp(1.4rem,1rem + 1vw,1.9rem);letter-spacing:-.015em;line-height:1.15}
.foot-links a{position:relative;display:inline-block;padding:4px 0;text-decoration:none}
.foot-links a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;border-radius:2px;background:var(--red);transform:scaleX(0);transform-origin:left center;transition:transform var(--dur) var(--ease)}
.foot-links a:hover::after,.foot-links a[aria-current]::after{transform:scaleX(1)}
.foot-contact{margin:0;display:grid;gap:18px}
.foot-contact dt{font:500 .72rem/1 var(--font-subject);letter-spacing:.12em;text-transform:uppercase;color:rgba(248,247,245,.55);margin-bottom:6px}
.foot-contact dd{margin:0;font:500 1rem/1.5 var(--font-body)}
.foot-contact a{text-decoration:none}
.foot-contact a:hover{text-decoration:underline;text-underline-offset:3px}
.foot .hours.is-open{color:var(--open-light)}
.foot-end{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 32px;margin-top:22px}
.foot-base{margin:0;font-size:.85rem;color:rgba(248,247,245,.55)}
.darb{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:.85rem;color:rgba(248,247,245,.55);text-decoration:none;transition:color var(--dur-fast) linear}
.darb svg{width:auto;height:20px;color:var(--bone);transition:transform var(--dur) var(--ease)}
.darb span{color:var(--bone);font-weight:500}
.darb:hover{color:rgba(248,247,245,.8)}.darb:hover svg{transform:translateY(-2px)}
.darb:focus-visible{outline:2px solid var(--bone);outline-offset:4px;border-radius:2px}
@media(max-width:900px){
  .foot{padding:52px 0 28px}
  .foot-deck{width:56%}
  .foot-grid{grid-template-columns:1fr;row-gap:26px;padding-bottom:28px}
  .foot-links{gap:0;font-size:1.35rem}
  .foot-contact{gap:14px}
  .foot-about{margin-top:16px}
  .foot-brand img{width:min(100%,240px)}
}
/* Reveal: desktop only, fail-safe. Nothing is hidden unless the script and a fine pointer are both present. */
@media(hover:hover) and (pointer:fine){
  .js .rv{opacity:0;transform:translateY(28px);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
  .js .rv.in{opacity:1;transform:none}
  /* The footer is the last thing on the page: moving it would make the page taller until it reveals, then shorter
     under the reader. It only fades; its contents rise inside it, clipped. */
  .js .foot.rv{transform:none}.js .foot.rv>.wrap{transform:translateY(28px);transition:transform var(--dur) var(--ease)}.js .foot.rv.in>.wrap{transform:none}
  .js .index.rv.in{transition-delay:300ms}.js .site.rv.in{transition-delay:420ms}.js .figures.rv.in{transition-delay:120ms}
}
@media(max-width:900px){
  .reality{padding:0 0 56px}
  .reality .wrap{display:flex;flex-direction:column}
  .left,.right{display:contents}
  .head{order:0;gap:16px;margin:44px 0 0}.index{order:1}.site{order:2}.figures{order:3}
  .what{font-size:clamp(2.4rem,10vw,3.2rem)}
  /* The services as site folders in a drawer: each card carries a numbered tab on its top edge, the tabs step across
     so all four show at once, and each folder slides over the last with the covered tabs still standing above it.
     A tick-ended dimension line draws across each folder as it lands. Tapping a tab goes to that folder. */
  .index{margin:28px 0 0;padding:0;border-radius:0;background:transparent;box-shadow:none}
  .services{display:grid;gap:46px;border-bottom:0;padding:34px 0 18px}
  .svc{position:sticky;top:calc(112px + var(--i,0) * 12px);border-top:0;background:var(--bone);border-radius:0 18px 18px 44px;padding:40px 20px 26px;box-shadow:none;filter:drop-shadow(0 3px 6px rgba(20,18,14,.10)) drop-shadow(0 18px 30px rgba(20,18,14,.14));display:grid;align-content:start}
  .svc:nth-child(1){--i:0}.svc:nth-child(2){--i:1;border-top-left-radius:18px}.svc:nth-child(3){--i:2;border-top-left-radius:18px}.svc:nth-child(4){--i:3;border-top-left-radius:18px}
  .svc button{padding:0 0 10px;font-size:1.6rem;display:block;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .svc .n{position:absolute;left:calc(var(--i,0) * 24.5%);top:-34px;width:24.5%;height:35px;display:grid;place-items:center;background:var(--bone);border-radius:12px 12px 0 0;font:600 .86rem/1 var(--font-subject);letter-spacing:.04em;color:var(--mute);transition:color var(--dur) var(--ease)}
  .svc .n::after{content:"";position:absolute;left:30%;right:30%;bottom:6px;height:2px;border-radius:2px;background:var(--red);transform:scaleX(0);transition:transform var(--dur) var(--ease)}
  .svc.landed .n{color:var(--ink)}
  .svc.landed .n::after{transform:scaleX(1)}
  .svc .d{grid-template-rows:1fr}
  .svc .d>p{opacity:1;padding-left:0;padding-bottom:0;max-width:none}
  .more{margin-top:8px}
  .svc::before{display:block;left:20px;right:20px;top:17px;width:auto;height:11px;background:linear-gradient(var(--ink),var(--ink)) 50% 50%/100% 1px no-repeat,linear-gradient(var(--ink),var(--ink)) 0 0/1px 100% no-repeat,linear-gradient(var(--ink),var(--ink)) 100% 0/1px 100% no-repeat;opacity:.55;transform-origin:50% 50%}
  .svc.is-open::before{width:auto}
  .js .svc::before{transform:scaleX(0);transition:transform 760ms var(--ease-out) 120ms}
  .js .svc.landed::before{transform:scaleX(1)}
  .site{margin:34px 0 0;margin-right:calc(-1 * var(--gutter))}
  .site .frame{aspect-ratio:4/3;border-radius:18px 0 0 56px}
  .figures{margin:40px 0 0;row-gap:22px}
  .fig b{font-size:2.4rem}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .hero .lockup svg{clip-path:none!important;opacity:1!important;transform:none!important;transition:none!important}
  .real video{display:none}
  .real video,.real img{animation:none!important}
  .cta:hover .ic svg,.btn:hover .ic svg{animation:none}
  .menu-deck path,.menu-links li,.menu-contact>div{clip-path:none!important;opacity:1!important;transform:none!important;transition:none!important}
  .js .rv,.js .foot.rv>.wrap{opacity:1!important;transform:none!important}.svc .d,.svc .d>p,.svc::before{transition:none!important}
  .tie path,.tie circle{transition:none!important}.js .foot-deck path{clip-path:none!important}.js .scrub .w{color:inherit!important}.runway{height:auto!important}.pin{position:static!important;height:auto!important}.pin .chair,.pin .signature,.pin .sheet{opacity:1!important;transform:none!important}.pin.is-final .para .w{opacity:1!important}.closing{display:none!important}.para{opacity:1!important;transform:none!important;position:static!important}.scrub{display:block!important}
  *{transition-duration:.01ms!important}
}

/* Not found. The night ground, the lockup, and the one thing a visitor actually needs: the number. */
.nf{background:var(--night);color:var(--bone);min-height:100svh;display:grid;align-content:center;padding:64px 0}
.nf-mark{width:min(100%,260px);height:auto;margin-bottom:clamp(32px,6vh,56px)}
.nf-h{font-family:var(--font-display);font-weight:400;letter-spacing:-.015em;line-height:1.04;font-size:clamp(2.2rem,5.4vw,4rem);margin:14px 0 0}
.nf-p{margin:18px 0 0;max-width:46ch;font-size:1.05rem;line-height:1.55;color:rgba(248,247,245,.72)}
.nf .ct-tel{margin-top:clamp(26px,4vh,40px)}
.nf-alt{margin:16px 0 0;color:rgba(248,247,245,.7)}
.nf-alt a{color:var(--bone);text-decoration:underline;text-underline-offset:3px}
.nf-back{margin:clamp(30px,5vh,46px) 0 0}
.nf-back a{font-family:var(--font-subject);font-weight:500;color:var(--bone);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}

/* ---------- Projects page ---------- */
/* The bar over a light first screen: ink type and the dark lockup from the first frame. */
.nav.on-light:not(.is-dark):not(.menu-open){color:var(--ink)}
.nav.on-light:not(.is-dark):not(.menu-open) .brand .light{display:none}
.nav.on-light:not(.is-dark):not(.menu-open) .brand .dark{display:block}
.nav.on-light:not(.is-dark):not(.menu-open) .menu-btn{background:var(--ink);color:var(--bone)}
.nav.on-light:not(.is-dark) :focus-visible{outline-color:var(--ink)}
/* One ground for the whole page, on main. Two sections each carrying the grain overlapped by 9vh and the grain
   multiplied twice there, which showed as a darker band under the heading. */
/* The top: the heading, the mark under it, the old site's line. Short, so the first photograph already shows. */
.pj-top{position:relative;overflow:clip;padding:calc(122px + 7vh) 0 clamp(36px,6vh,64px);text-align:center}
.pj-top .sketch{top:-6%;height:112%;opacity:.09;-webkit-mask-image:linear-gradient(180deg,#000 48%,transparent 96%);mask-image:linear-gradient(180deg,#000 48%,transparent 96%)}
.pj-top .wrap{position:relative;z-index:1;display:grid;justify-items:center}
.pj-top h1{font-size:clamp(3.2rem,2rem + 6.4vw,7.4rem);letter-spacing:-.02em}
.pj-mark{width:clamp(150px,16vw,230px);height:auto;margin-top:clamp(18px,3vh,30px)}
.pj-lead{margin:clamp(14px,2.4vh,22px) 0 0;font:500 .8rem/1 var(--font-subject);letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.js .pj-top h1,.js .pj-mark,.js .pj-lead{animation:pj-rise 900ms var(--ease-out) both}
.js .pj-mark{animation-delay:140ms}.js .pj-lead{animation-delay:260ms}
@keyframes pj-rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
/* The rail. Default, and on phones, under reduced motion and without the script: a swipe rail, nothing pinned. */
.pj{position:relative;padding:0 0 clamp(56px,9vh,110px)}
.pj-rail{overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:34px 0 8px}
.pj-rail::-webkit-scrollbar{display:none}
.pj-track{list-style:none;margin:0;padding:0 8vw;display:flex;gap:18px}
.pj-card{flex:none;width:84vw;max-width:560px;scroll-snap-align:center;transition:opacity var(--dur-scene) var(--ease),filter var(--dur-scene) var(--ease),transform var(--dur-scene) var(--ease)}
.js .pj-card:not(.is-on){opacity:.42;filter:saturate(.15);transform:scale(.965)}
.pj-photo{position:relative;margin:0}
.pj-photo picture{display:block;border-radius:6px;overflow:hidden;box-shadow:var(--shadow-lg);background:var(--bone)}
.pj-photo img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}
/* The measure: a dimension line with tick ends over the photograph's top edge, its one fact set on the line. */
.pj-measure{position:absolute;left:0;right:0;bottom:calc(100% + 8px);height:22px;display:grid;place-items:center;pointer-events:none}
.pj-line{position:absolute;left:0;right:0;top:50%;height:1px;background:var(--ink);transform-origin:50% 50%}
.pj-line::before,.pj-line::after{content:"";position:absolute;top:-6px;width:1px;height:13px;background:var(--ink)}
.pj-line::before{left:0}.pj-line::after{right:0}
.pj-tag{position:relative;display:inline-flex;align-items:baseline;gap:8px;padding:0 12px;background:var(--ground);font-family:var(--font-subject);white-space:nowrap}
.pj-tag small{font-size:.66rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.pj-tag b{font-size:.92rem;font-weight:600;letter-spacing:.01em;font-variant-numeric:tabular-nums}
.js .pj-card .pj-line{transform:scaleX(0);transition:transform 320ms var(--ease)}
.js .pj-card .pj-tag{opacity:0;transition:opacity 200ms linear}
.js .pj-card.is-on .pj-line{transform:scaleX(1);transition:transform 760ms var(--ease-out) 260ms}
.js .pj-card.is-on .pj-tag{opacity:1;transition:opacity var(--dur) var(--ease) 620ms}
.pj-text{position:relative;z-index:1;margin:-26px 14px 0;padding:22px 22px 24px;background:var(--bone);border-radius:6px;box-shadow:var(--shadow-md)}
.pj-no{margin:0 0 10px;font:500 .72rem/1 var(--font-subject);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.pj-no span{color:var(--ink);margin-right:8px;font-variant-numeric:tabular-nums}
.pj-text h2{font-family:var(--font-display);font-weight:400;letter-spacing:-.012em;line-height:1.06;font-size:clamp(1.7rem,1.3rem + 1.3vw,2.5rem)}
.pj-desc{margin:12px 0 0;color:#2b2925;font-size:1rem;line-height:1.55}
.pj-fact{display:flex;flex-wrap:wrap;gap:6px 26px;margin:16px 0 0;padding-top:14px;border-top:1px solid var(--rule)}
.pj-fact dt{font:500 .64rem/1 var(--font-subject);letter-spacing:.13em;text-transform:uppercase;color:var(--mute);margin-bottom:5px}
.pj-fact dd{margin:0;font:500 .9rem/1.3 var(--font-subject)}
.pj-choose{display:none}
.pj-foot{display:flex;align-items:center;gap:16px;padding:22px var(--gutter) 0}
.pj-bar{position:relative;flex:1;max-width:340px}
.pj-deck{display:block;width:100%;height:auto;fill:rgba(17,17,17,.15)}
.pj-deck.fill{position:absolute;inset:0;fill:var(--red);clip-path:inset(0 calc(100% - var(--k,.077)*100%) 0 0);transition:clip-path var(--dur-scene) var(--ease)}
.pj-counter{margin:0;font:500 .9rem/1 var(--font-subject);color:var(--mute);font-variant-numeric:tabular-nums;white-space:nowrap}
.pj-counter b{color:var(--ink);font-weight:600}
.pj-all{min-height:44px;padding:0 18px;border:1px solid var(--ink);border-radius:999px;background:transparent;color:var(--ink);font:600 .9rem/1 var(--font-subject);cursor:pointer}
.pj-arrows{display:none;gap:8px}
.pj-arrows button{width:44px;height:44px;display:inline-grid;place-items:center;border:1px solid var(--ink);border-radius:999px;background:transparent;color:var(--ink);cursor:pointer;transition:background-color var(--dur-fast) linear,color var(--dur-fast) linear,opacity var(--dur-fast) linear}
.pj-arrows button:hover{background:var(--ink);color:var(--bone)}
.pj-arrows button[disabled]{opacity:.3;pointer-events:none}
.pj-arrows svg{width:18px;height:18px}
/* The sheet: the chooser on phones. The same scale rule, the deck drawing across its head as it rises. */
.pj-sheet{width:min(100% - 20px,460px);max-height:84svh;margin:auto auto 10px;padding:0;border:0;border-radius:18px;background:var(--bone);color:var(--ink);box-shadow:var(--shadow-lg);overflow:hidden;outline:0}
.pj-sheet[open]{display:flex;flex-direction:column;animation:pj-sheet-up 460ms var(--ease-out) both}
.pj-sheet::backdrop{background:rgba(16,16,16,.46);animation:pj-fade 300ms linear both}
@keyframes pj-sheet-up{from{opacity:0;transform:translateY(36px)}to{opacity:1;transform:none}}
@keyframes pj-fade{from{opacity:0}to{opacity:1}}
.pj-sheet-head{flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 16px 12px 22px;border-bottom:1px solid var(--rule)}
.pj-sheet-deck{width:min(56%,220px);height:auto;fill:var(--red)}
.pj-sheet[open] .pj-sheet-deck path{animation:pj-deck-draw 760ms var(--ease-out) 120ms both}
@keyframes pj-deck-draw{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.pj-close{flex:none;width:44px;height:44px;display:inline-grid;place-items:center;border:0;border-radius:999px;background:var(--ink);color:var(--bone);cursor:pointer}
.pj-close svg{width:20px;height:20px}
.pj-sheet-list{overflow:auto;overscroll-behavior:contain;padding:20px 20px 10px 52px;background-image:repeating-linear-gradient(180deg,rgba(17,17,17,.5) 0 1px,transparent 1px 6px),repeating-linear-gradient(180deg,rgba(17,17,17,.7) 0 1px,transparent 1px 30px);background-size:8px 100%,15px 100%;background-repeat:no-repeat;background-attachment:local}
.pj-sheet a{position:relative;display:flex;gap:12px;align-items:baseline;min-height:44px;padding:11px 0;text-decoration:none;font:500 1rem/1.3 var(--font-subject);color:var(--mute)}
.pj-sheet a::before{content:"";position:absolute;left:-52px;top:calc(11px + .6em);width:28px;height:1px;background:var(--ink)}
.pj-sheet a::after{content:"";position:absolute;left:-52px;top:calc(11px + .6em - 1px);width:42px;height:3px;border-radius:0 2px 2px 0;background:var(--red);transform:scaleX(0);transform-origin:0 50%}
.pj-sheet a[aria-current]{color:var(--ink);font-weight:600}
.pj-sheet a[aria-current]::after{transform:scaleX(1)}
.pj-sheet[open] a[aria-current]::after{animation:pj-mark 520ms var(--ease-out) 420ms both}
@keyframes pj-mark{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.pj-sheet a span,.pj-choose a span{font-size:.72rem;color:var(--mute);font-variant-numeric:tabular-nums;flex:none}
.pj-choose h3,.pj-sheet h3{margin:0 0 8px;font:500 .68rem/1 var(--font-subject);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.pj-choose ol,.pj-sheet ol{list-style:none;margin:0 0 16px;padding:0}

/* Desktop, motion allowed, script running: the screen pins and the scroll carries the rail sideways. */
@media(min-width:901px){
  .pj-arrows{display:flex}
  .pj-all{display:none}
  .pj.is-pinned{padding-bottom:0;margin-top:-9vh}
  .pj.is-pinned .pj-run{height:calc(100vh + var(--steps,10) * 62vh)}
  .pj.is-pinned .pj-pin{position:sticky;top:0;height:100vh;min-height:620px;overflow:clip;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:1fr auto;padding:132px 0 clamp(22px,4vh,40px)}
  .pj.is-pinned .pj-rail{overflow:visible;scroll-snap-type:none;padding:0;align-self:center;outline-offset:-3px}
  .pj.is-pinned .pj-track{--edge:max(var(--gutter),calc((100vw - var(--wrap))/2 + var(--gutter)));--unit:calc(100vw - var(--edge)*2 - clamp(224px,19vw,272px) + 20px);--gap:clamp(28px,3vw,48px);padding:0 0 0 max(var(--gutter),calc((100vw - var(--wrap))/2 + var(--gutter)));gap:var(--gap);transform:translate3d(calc(var(--i,0) * -1 * (var(--unit) + var(--gap))),0,0);transition:transform 820ms var(--ease-out);will-change:transform}
  .pj.is-pinned .pj-card{width:var(--unit);max-width:none;display:grid;grid-template-columns:minmax(0,2.5fr) minmax(0,1fr);align-items:end}
  .pj.is-pinned .pj-card:not(.is-on){opacity:.3;filter:saturate(.1);transform:scale(.94)}
  .pj.is-pinned .pj-card:not(.is-on) .pj-text{opacity:0;transform:translateY(14px)}
  .pj.is-pinned .pj-photo img{max-height:calc(100vh - 300px)}
  .pj.is-pinned .pj-text{margin:0 0 clamp(18px,4vh,40px) -84px;padding:26px 28px 28px;transition:opacity var(--dur) var(--ease),transform var(--dur-scene) var(--ease-out)}
  .pj.is-pinned .pj-card.is-on .pj-text{transition-delay:240ms}
  /* The chooser: a bone panel on the right; the rail slides beneath it. */
  .pj.is-pinned .pj-choose{display:block;position:absolute;z-index:3;right:max(var(--gutter),calc((100vw - var(--wrap))/2 + var(--gutter)));top:50%;transform:translateY(-46%);width:clamp(224px,19vw,272px);max-height:calc(100vh - 236px);overflow:auto;padding:18px 18px 2px;background:var(--bone);border-radius:6px;box-shadow:var(--shadow-lg)}
  /* The chooser is a scale rule: fine graduations down its edge, a long tick at each project, and the red marker
     sliding to the one in focus. */
  .pj.is-pinned .pj-choose{padding-left:46px;background-image:repeating-linear-gradient(180deg,rgba(17,17,17,.5) 0 1px,transparent 1px 6px),repeating-linear-gradient(180deg,rgba(17,17,17,.7) 0 1px,transparent 1px 30px);background-size:7px 100%,13px 100%;background-repeat:no-repeat;background-position:0 0,0 0;background-attachment:local}
  .pj-choose a{position:relative;display:flex;gap:10px;align-items:baseline;padding:4px 0;text-decoration:none;font:500 .8rem/1.25 var(--font-subject);color:var(--mute);transition:color var(--dur-fast) linear}
  .pj-choose a::before{content:"";position:absolute;left:-46px;top:calc(4px + .55em);width:24px;height:1px;background:var(--ink)}
  .pj-choose a::after{content:"";position:absolute;left:-46px;top:calc(4px + .55em - 1px);width:36px;height:3px;border-radius:0 2px 2px 0;background:var(--red);transform:scaleX(0);transform-origin:0 50%;transition:transform var(--dur) var(--ease)}
  .pj-choose a:hover,.pj-choose a[aria-current]{color:var(--ink)}
  .pj-choose a[aria-current]::after{transform:scaleX(1)}
  .pj.is-pinned .pj-foot{padding-inline:max(var(--gutter),calc((100vw - var(--wrap))/2 + var(--gutter)))}
  .pj.is-pinned .pj-bar{max-width:380px}
  .pj.is-pinned .pj-counter{margin-right:auto}
}
@media(min-width:901px) and (max-height:760px){.pj.is-pinned .pj-pin{padding-top:118px}.pj.is-pinned .pj-text h2{font-size:1.7rem}.pj.is-pinned .pj-desc{font-size:.94rem}}
@media(max-width:900px){
  .pj-top{padding:calc(72px + 5vh) 0 28px}
  .pj-rail{padding-top:52px}
  .pj-measure{height:36px}
  .pj-tag{flex-direction:column;align-items:center;gap:4px;padding:0 10px}
  .pj-tag small{font-size:.6rem}
}
@media(prefers-reduced-motion:reduce){
  .js .pj-top h1,.js .pj-mark,.js .pj-lead{animation:none}
  .js .pj-card,.js .pj-card:not(.is-on){opacity:1;filter:none;transform:none;transition:none}
  .js .pj-card .pj-line{transform:none;transition:none}.js .pj-card .pj-tag{opacity:1;transition:none}
  .pj-deck.fill{transition:none}
  .pj-sheet[open],.pj-sheet::backdrop,.pj-sheet[open] .pj-sheet-deck path,.pj-sheet[open] a[aria-current]::after{animation:none}
}

/* ---------- About page ---------- */
/* The top: the heading with the company's own site photographs floating round it. Each plate idles on its own clock
   and shifts against the pointer by its own depth (app.js sets --mx and --my, -1 to 1). Centre kept clear for the words. */
.ab-top{position:relative;min-height:min(100svh,920px);display:grid;align-items:center;padding:calc(122px + 4vh) 0 8vh;text-align:center;overflow:clip}
.ab-top .wrap{position:relative;z-index:2;display:grid;justify-items:center}
.ab-top h1{font-size:clamp(3.2rem,2rem + 6.4vw,7.4rem);letter-spacing:-.02em}
.js .ab-top h1,.js .ab-top .pj-mark,.js .ab-top .pj-lead{animation:pj-rise 900ms var(--ease-out) both}
.js .ab-top .pj-mark{animation-delay:140ms}.js .ab-top .pj-lead{animation-delay:260ms}
.ab-float{position:absolute;inset:0;z-index:1;pointer-events:none}
.ab-plate{position:absolute;width:var(--w);left:var(--x);top:var(--y);transform:translate3d(calc(var(--mx,0) * var(--dp,0) * 1px),calc(var(--my,0) * var(--dp,0) * .7px),0);transition:transform 900ms var(--ease-out);will-change:transform}
.ab-plate img{display:block;width:100%;height:auto;border-radius:6px;box-shadow:var(--shadow-lg);rotate:var(--r,0deg)}
.js .ab-plate img{animation:ab-in 1100ms var(--ease-out) both,ab-idle var(--t,9s) ease-in-out var(--dl,0s) infinite alternate}
@keyframes ab-in{from{opacity:0;scale:.9}to{opacity:1;scale:1}}
@keyframes ab-idle{from{translate:0 -7px}to{translate:0 9px}}
/* Plates keep to the outer quarters: the left three end by 26% of the width, the right three start at 74%, so
   the heading, the mark and the line under it are never touched at any width. Checked in the browser, 390 to 1920. */
.ab-a{--w:clamp(140px,17vw,250px);--x:4%;--y:17%;--r:-5deg;--t:8s}
.ab-b{--w:clamp(110px,12vw,180px);--x:13%;--y:47%;--r:4deg;--t:10s;--dl:-3s}
.ab-c{--w:clamp(150px,19vw,290px);--x:2%;--y:67%;--r:-3deg;--t:11s;--dl:-5s;opacity:.96}
.ab-d{--w:clamp(140px,18vw,270px);--x:76%;--y:15%;--r:5deg;--t:9.5s;--dl:-2s}
.ab-e{--w:clamp(110px,12vw,180px);--x:75%;--y:46%;--r:-4deg;--t:8.5s;--dl:-6s}
.ab-f{--w:clamp(150px,18vw,280px);--x:79%;--y:66%;--r:3deg;--t:12s;--dl:-1s}
.ab-top .wrap>*{max-width:46vw}
.ab-b img,.ab-e img{filter:saturate(.85) blur(.6px)}
/* Who We Are: the words beside a photograph that develops out of its own plan drawing (--d, 0 to 1, from the scroll). */
.ab-who{padding:clamp(40px,8vh,96px) 0 clamp(72px,11vh,140px)}
.ab-who .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,5vw,80px);align-items:center}
.ab-eye{margin:0 0 14px;font:500 .74rem/1 var(--font-subject);letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.ab-copy h2{font-family:var(--font-display);font-weight:400;letter-spacing:-.015em;line-height:1.04;font-size:clamp(2.2rem,1.4rem + 2.6vw,3.8rem)}
.ab-copy>p:not(.ab-eye){margin:22px 0 0;font-size:1.08rem;line-height:1.62;max-width:56ch}
.ab-list{list-style:none;margin:28px 0 0;padding:0;border-top:1px solid var(--rule)}
.ab-list li{position:relative;padding:13px 0 13px 34px;border-bottom:1px solid var(--rule);font:500 1rem/1.35 var(--font-subject)}
.ab-list li::before{content:"";position:absolute;left:0;top:50%;width:20px;height:1px;background:var(--ink)}
.ab-develop{position:relative;margin:0;--d:1}
.ab-frame{position:relative;border-radius:6px 6px 6px 56px;overflow:hidden;box-shadow:var(--shadow-lg);background:var(--bone)}
.ab-frame picture img{display:block;width:100%;height:auto;aspect-ratio:1600/781;object-fit:cover;opacity:var(--d);filter:saturate(calc(.25 + .75 * var(--d)))}
.ab-ink{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply;opacity:calc(1 - var(--d) * .96);pointer-events:none}
.js .ab-develop .pj-line{transform:scaleX(var(--d));transition:none}
.js .ab-develop .pj-tag{opacity:var(--d);transition:none}
/* The four blocks as an index on the scale rule, one open at a time. Without the script every row stands open. */
.ab-acc{padding:0 0 clamp(72px,11vh,140px)}
.ab-panel{position:relative;background:var(--bone);border-radius:clamp(18px,2.4vw,32px) clamp(48px,7vw,110px) 18px 18px;padding:clamp(28px,4vw,56px) clamp(24px,5vw,64px) clamp(28px,4vw,48px) clamp(52px,7vw,96px);box-shadow:0 2px 6px rgba(20,18,14,.06),0 18px 40px rgba(20,18,14,.13),0 44px 90px rgba(20,18,14,.12);
  background-image:repeating-linear-gradient(180deg,rgba(17,17,17,.5) 0 1px,transparent 1px 6px),repeating-linear-gradient(180deg,rgba(17,17,17,.7) 0 1px,transparent 1px 30px);background-size:8px 100%,15px 100%;background-repeat:no-repeat;background-position:0 40px,0 40px}
.ab-rows{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--rule);--pad:clamp(52px,7vw,96px);--mid:calc(24px + clamp(1.5rem,1.1rem + 1.4vw,2.3rem) * .56)}
.ab-row{position:relative;border-top:1px solid var(--rule)}
.ab-row h3{margin:0;font:inherit}
.ab-row::after{content:"";position:absolute;left:calc(-1 * var(--pad));top:var(--mid);width:28px;height:1px;background:var(--ink)}
.ab-row::before{content:"";position:absolute;left:calc(-1 * var(--pad));top:calc(var(--mid) - 1px);height:3px;width:0;border-radius:0 2px 2px 0;background:var(--red);transition:width var(--dur) var(--ease)}
.ab-row.is-open::before{width:calc(var(--pad) - 12px)}
.ab-row button{all:unset;box-sizing:border-box;display:grid;grid-template-columns:48px minmax(120px,190px) 1fr 44px;align-items:baseline;column-gap:8px;width:100%;padding:24px 0 22px;cursor:pointer;color:var(--ink)}
.ab-row button:focus-visible{outline:3px solid var(--ink);outline-offset:4px}
.ab-row .n{font:400 .95rem/1 var(--font-body);color:var(--mute);font-variant-numeric:tabular-nums}
.ab-row .k{font:500 .74rem/1.2 var(--font-subject);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.ab-row .t{font:500 clamp(1.5rem,1.1rem + 1.4vw,2.3rem)/1.08 var(--font-subject);letter-spacing:-.02em}
.ab-row .pm{position:relative;align-self:center;justify-self:end;width:34px;height:34px;border-radius:999px;border:1px solid var(--ink);transition:background-color var(--dur-fast) linear,transform var(--dur) var(--ease)}
.ab-row .pm::before,.ab-row .pm::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;border-radius:2px;background:var(--ink);transition:transform var(--dur) var(--ease),background-color var(--dur-fast) linear}
.ab-row .pm::after{transform:rotate(90deg)}
.ab-row.is-open .pm{background:var(--ink)}
.ab-row.is-open .pm::before,.ab-row.is-open .pm::after{background:var(--bone)}
.ab-row.is-open .pm::after{transform:rotate(0deg)}
.ab-row .d{display:grid;grid-template-rows:1fr}
.js .ab-row .d{grid-template-rows:0fr;transition:grid-template-rows var(--dur-scene) var(--ease)}
.js .ab-row.is-open .d{grid-template-rows:1fr}
.ab-row .in{overflow:hidden;padding-left:calc(48px + 8px + min(190px,22vw) + 8px)}
.ab-row .in>*{opacity:1}
.js .ab-row .in>*{opacity:0;transform:translateY(8px);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.js .ab-row.is-open .in>*{opacity:1;transform:none;transition-delay:140ms}
.ab-row .in p{margin:0;max-width:62ch;font-size:1.06rem;line-height:1.62;padding-bottom:28px}
.ab-iso{list-style:none;margin:0;padding:0 0 30px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;max-width:760px}
.ab-iso li{display:grid;gap:8px;padding:18px 18px 20px;border:1px solid var(--rule);border-radius:6px 6px 6px 22px;background:var(--ground);font-size:.95rem;line-height:1.4;color:#2b2925}
.ab-iso b{font:600 1.06rem/1.1 var(--font-subject);color:var(--ink)}
.ab-figs{padding:0 0 clamp(72px,11vh,130px)}
.ab-figs .figures{margin:0;grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:900px){
  .ab-top{min-height:0;padding:calc(72px + 200px) 0 210px}
  .ab-a{--x:4%;--y:104px;--w:min(36vw,170px)}.ab-d{--x:auto;left:auto;right:5%;--y:118px;--w:min(38vw,180px)}
  .ab-c{--x:6%;--y:auto;top:auto;bottom:34px;--w:min(40vw,190px)}.ab-f{--x:auto;left:auto;right:4%;--y:auto;top:auto;bottom:22px;--w:min(40vw,190px)}
  .ab-b,.ab-e{display:none}
  .ab-top .wrap>*{max-width:none}
  .ab-who .wrap{grid-template-columns:1fr;gap:34px}
  .ab-develop{order:-1;margin-top:34px}
  .ab-frame{border-radius:6px 6px 6px 40px}
  .ab-panel{padding:22px 16px 20px 40px;border-radius:18px 44px 18px 18px;background-size:7px 100%,13px 100%}
  .ab-rows{--pad:40px;--mid:48px}
  .ab-row.is-open::before{width:30px}
  .ab-row::after{width:22px}
  .ab-row button{grid-template-columns:1fr 44px;grid-template-areas:"k pm" "t pm";row-gap:8px;padding:20px 0 18px;min-height:44px}
  .ab-row .n{display:none}.ab-row .k{grid-area:k}.ab-row .t{grid-area:t;font-size:1.5rem}.ab-row .pm{grid-area:pm}
  .ab-row .in{padding-left:0}
  .ab-iso{grid-template-columns:1fr}
  .ab-figs .figures{grid-template-columns:1fr 1fr}
}
@media(prefers-reduced-motion:reduce){
  .js .ab-top h1,.js .ab-top .pj-mark,.js .ab-top .pj-lead,.js .ab-plate img{animation:none}
  .ab-plate{transform:none;transition:none}
  .js .ab-row .d,.js .ab-row .in>*,.ab-row::before,.ab-row .pm,.ab-row .pm::before,.ab-row .pm::after{transition:none}
}

/* The old site's two group labels, Current Work and Track Record, sit above the chooser's headings. */
.pj-choose h3 small,.pj-sheet h3 small{display:block;margin-bottom:5px;font-size:.92em;letter-spacing:.14em;color:var(--ink);opacity:.55}
.ab-row .in p+p{margin-top:-10px}
.ab-copy>p+p:not(.ab-eye){margin-top:14px}

/* The old site's line under the mark, in the headline face (Pietro, 2026-09-19: change the font). */
.pj-lead{font:400 clamp(1.5rem,1.1rem + 1.5vw,2.4rem)/1.1 var(--font-display);letter-spacing:-.01em;text-transform:none;color:var(--ink)}
/* What the company does: five plain lines set in the headline face, numbered, each under a tick-ended rule that
   draws across as the list arrives. No icons (Pietro, 2026-09-19: not for a premium contractor). */
.ab-list{counter-reset:ab;border-top:0;display:block;margin-top:36px}
.ab-list li{counter-increment:ab;position:relative;display:grid;grid-template-columns:44px 1fr;align-items:baseline;padding:20px 0 16px;border:0;font:400 clamp(1.3rem,1.05rem + .9vw,1.75rem)/1.2 var(--font-display);letter-spacing:-.005em;transition:transform var(--dur) var(--ease)}
.ab-list li::before{content:counter(ab,decimal-leading-zero);display:block;position:static;width:auto;height:auto;background:none;font:500 .78rem/1 var(--font-subject);letter-spacing:.06em;color:var(--mute);font-variant-numeric:tabular-nums}
.ab-list li::after{content:"";position:absolute;left:0;right:0;top:0;height:11px;transform-origin:0 50%;opacity:.5;background:linear-gradient(var(--ink),var(--ink)) 0 5px/100% 1px no-repeat,linear-gradient(var(--ink),var(--ink)) 0 0/1px 11px no-repeat,linear-gradient(var(--ink),var(--ink)) 100% 0/1px 11px no-repeat}
.ab-list li:nth-child(2){--s:1}.ab-list li:nth-child(3){--s:2}.ab-list li:nth-child(4){--s:3}.ab-list li:nth-child(5){--s:4}
@media(hover:hover) and (pointer:fine){
  .ab-list li:hover{transform:translateX(10px)}
  .js .ab-list.rv{opacity:1;transform:none}
  .js .ab-list.rv li>span{opacity:0;transform:translateY(10px);display:block}
  .js .ab-list.rv li::before{opacity:0}
  .js .ab-list.rv li::after{transform:scaleX(0)}
  .js .ab-list.rv.in li>span{opacity:1;transform:none;transition:opacity var(--dur) var(--ease),transform var(--dur-scene) var(--ease-out);transition-delay:calc(var(--s,0) * 110ms + 160ms)}
  .js .ab-list.rv.in li::before{opacity:1;transition:opacity var(--dur) var(--ease) calc(var(--s,0) * 110ms + 160ms)}
  .js .ab-list.rv.in li::after{transform:scaleX(1);transition:transform 820ms var(--ease-out) calc(var(--s,0) * 110ms)}
}
/* The three certificates as documents on the desk: paper plates at slight angles, overlapping, the number set large
   in the headline face, a tick-ended rule under it. They straighten and lift under the pointer. */
.ab-iso{grid-template-columns:repeat(3,minmax(0,1fr));gap:0;max-width:770px;box-sizing:content-box;margin-left:-14px;padding:16px 34px 50px 14px}
.ab-iso li{position:relative;gap:0;padding:34px 22px 26px;border:0;border-radius:4px 4px 4px 30px;background:linear-gradient(180deg,#fff 0%,var(--bone) 100%);box-shadow:var(--shadow-lg);rotate:var(--r,0deg);margin-left:var(--ml,0);transition:rotate var(--dur-scene) var(--ease-out),translate var(--dur-scene) var(--ease-out),box-shadow var(--dur) var(--ease);color:#2b2925}
.ab-iso li:nth-child(1){--r:-3deg;z-index:1}.ab-iso li:nth-child(2){--r:1.5deg;--ml:-14px;z-index:2;translate:0 12px}.ab-iso li:nth-child(3){--r:-1.5deg;--ml:-14px;z-index:1}
.ab-iso b{display:flex;align-items:baseline;gap:8px;font:400 clamp(2.2rem,1.6rem + 1.6vw,3.2rem)/1 var(--font-display);letter-spacing:-.02em;color:var(--ink)}
.ab-iso b small{font:600 .7rem/1 var(--font-subject);letter-spacing:.16em;color:var(--mute)}
.ab-iso b i{font:500 .95rem/1 var(--font-subject);font-style:normal;letter-spacing:0;color:var(--mute)}
.ab-iso li span:last-child{display:block;margin-top:16px;padding-top:14px;font:500 .95rem/1.35 var(--font-subject);background:linear-gradient(var(--ink),var(--ink)) 0 5px/100% 1px no-repeat,linear-gradient(var(--ink),var(--ink)) 0 0/1px 11px no-repeat,linear-gradient(var(--ink),var(--ink)) 100% 0/1px 11px no-repeat;padding-top:22px}
@media(hover:hover) and (pointer:fine){.ab-iso li:hover{rotate:0deg;translate:0 -8px;z-index:3;box-shadow:0 8px 16px rgba(20,18,14,.12),0 34px 60px rgba(20,18,14,.2)}}
@media(max-width:900px){
  /* phones: the three sheets stay, at about half the height, and sit inside the panel without being cut */
  .ab-iso{grid-template-columns:1fr;gap:0;margin-left:0;padding:8px 10px 26px 8px;box-sizing:border-box;max-width:340px}
  .ab-iso li{padding:16px 16px 14px;border-radius:4px 4px 4px 20px}
  .ab-iso b{font-size:1.75rem;gap:6px}
  .ab-iso b small{font-size:.6rem}.ab-iso b i{font-size:.8rem}
  .ab-iso li span:last-child{margin-top:8px;padding-top:16px;font-size:.84rem;line-height:1.25;background-size:100% 1px,1px 9px,1px 9px;background-position:0 4px,0 0,100% 0}
  .ab-iso li{margin-left:0!important;translate:none!important}
  .ab-iso li+li{margin-top:-8px!important}
  .ab-iso li:nth-child(1){--r:-2deg}.ab-iso li:nth-child(2){--r:1.5deg}.ab-iso li:nth-child(3){--r:-1deg}
}
@media(prefers-reduced-motion:reduce){.ab-iso li,.ab-list li{transition:none}}

/* ---------- Services page ---------- */
/* What We Do: the old paragraph set large in the headline face, across the page. */
.sv-what{padding:clamp(30px,6vh,70px) 0 clamp(56px,10vh,120px)}
.sv-what h2{font:400 clamp(2.2rem,1.5rem + 2.6vw,3.8rem)/1.05 var(--font-display);letter-spacing:-.015em}
.sv-say{margin:clamp(22px,4vh,40px) 0 0;font:400 clamp(1.45rem,1rem + 1.75vw,2.7rem)/1.22 var(--font-display);letter-spacing:-.01em;text-wrap:pretty}
.js .sv-what .rv:nth-child(2){transition-delay:90ms}.js .sv-what .rv:nth-child(3){transition-delay:200ms}
/* The five sheets. Each is paper, sticks under the bar one tab lower than the last, and is tall enough to reach the
   foot of the screen, so the sheet arriving covers everything of the last one except its tab. --sv-top and --sv-tab
   are plain px because app.js reads them. */
.sv-stack{--sv-top:122px;--sv-tab:56px;position:relative;margin-inline:clamp(10px,2.2vw,36px);padding-bottom:clamp(40px,8vh,96px)}
.sv-sheet{position:relative;border-radius:8px 8px 0 0;background:linear-gradient(180deg,#fff 0,var(--bone) 340px);box-shadow:0 -1px 0 rgba(20,18,14,.08),0 -10px 28px rgba(20,18,14,.10),0 -34px 60px rgba(20,18,14,.07)}
.sv-sheet+.sv-sheet{margin-top:clamp(28px,5vh,56px)}
.sv-sheet:last-child{border-radius:8px}
.sv-tab{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:18px;width:100%;height:var(--sv-tab);padding:0 clamp(20px,4vw,64px);cursor:pointer;font:500 .82rem/1 var(--font-subject);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);transition:color var(--dur-fast) var(--ease)}
.sv-tab .n{font-variant-numeric:tabular-nums;color:var(--ink)}
/* the tab's own measure: a tick-ended rule running out to the sheet's edge, red on the sheet being read */
.sv-tab::after{content:"";flex:1;height:11px;opacity:.4;background:linear-gradient(currentColor,currentColor) 0 5px/100% 1px no-repeat,linear-gradient(currentColor,currentColor) 0 0/1px 11px no-repeat,linear-gradient(currentColor,currentColor) 100% 0/1px 11px no-repeat;transition:opacity var(--dur) var(--ease)}
.sv-tab:focus-visible{outline:3px solid var(--ink);outline-offset:-5px}
.sv-sheet.is-current .sv-tab{color:var(--ink)}
.sv-sheet.is-current .sv-tab::after{color:var(--red);opacity:1}
@media(hover:hover) and (pointer:fine){.sv-tab:hover{color:var(--ink)}.sv-tab:hover::after{opacity:.8}}
.sv-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,110px);align-items:center;padding:clamp(18px,3vh,40px) clamp(20px,4vw,64px) clamp(30px,5vh,60px)}
.sv-num{display:block;font:400 clamp(8rem,4rem + 15vw,19rem)/.8 var(--font-display);letter-spacing:-.04em;margin-left:-.04em;padding-bottom:.17em}
.sv-lede h2{margin-top:clamp(18px,3vh,34px);font:400 clamp(2rem,1.4rem + 2.2vw,3.4rem)/1.04 var(--font-display);letter-spacing:-.015em}
.sv-lede p{margin:16px 0 0;max-width:44ch;font-size:1.08rem;line-height:1.6;color:var(--mute)}
.sv-items{list-style:none;margin:0;padding:0}
.sv-items li{position:relative;display:grid;grid-template-columns:44px 1fr;align-items:baseline;padding:19px 0 15px;font:400 clamp(1.2rem,1rem + .8vw,1.7rem)/1.2 var(--font-display);letter-spacing:-.005em;counter-increment:sv;transition:transform var(--dur) var(--ease)}
.sv-items{counter-reset:sv}
.sv-items li::before{content:counter(sv,decimal-leading-zero);font:500 .76rem/1 var(--font-subject);letter-spacing:.06em;color:var(--mute);font-variant-numeric:tabular-nums}
.sv-items li::after{content:"";position:absolute;left:0;right:0;top:0;height:11px;transform-origin:0 50%;opacity:.5;background:linear-gradient(var(--ink),var(--ink)) 0 5px/100% 1px no-repeat,linear-gradient(var(--ink),var(--ink)) 0 0/1px 11px no-repeat,linear-gradient(var(--ink),var(--ink)) 100% 0/1px 11px no-repeat}
@media(hover:hover) and (pointer:fine){.sv-items li:hover{transform:translateX(10px)}}
/* Stacking: only with the script, and only when app.js has found every sheet fits its screen (no .is-flat). */
.js .sv-stack:not(.is-flat):not(.is-measuring) .sv-sheet{position:sticky;top:calc(var(--sv-top) + var(--i) * var(--sv-tab));min-height:calc(100svh - var(--sv-top) - var(--i) * var(--sv-tab));display:grid;grid-template-rows:auto 1fr}
.js .sv-stack:not(.is-flat):not(.is-measuring) .sv-sheet+.sv-sheet{margin-top:22svh}
/* Arrival: the numeral, the name and the line rise, then each rule draws across and its words follow. Both ways:
   a sheet that has left the screen is reset, so scrolling back up plays it again. */
@media(prefers-reduced-motion:no-preference){
  .js .sv-sheet .sv-num,.js .sv-sheet .sv-lede h2,.js .sv-sheet .sv-lede p,.js .sv-sheet .sv-items li>span,.js .sv-sheet .sv-items li::before{opacity:0}
  .js .sv-sheet .sv-num{transform:translateY(34px)}
  .js .sv-sheet .sv-lede h2,.js .sv-sheet .sv-lede p,.js .sv-sheet .sv-items li>span{transform:translateY(14px);display:block}
  .js .sv-sheet .sv-items li::after{transform:scaleX(0)}
  .js .sv-sheet.in .sv-num,.js .sv-sheet.in .sv-lede h2,.js .sv-sheet.in .sv-lede p{opacity:1;transform:none;transition:opacity var(--dur-scene) var(--ease),transform 900ms var(--ease-out)}
  .js .sv-sheet.in .sv-lede h2{transition-delay:120ms}.js .sv-sheet.in .sv-lede p{transition-delay:220ms}
  .js .sv-sheet.in .sv-items li>span{opacity:1;transform:none;transition:opacity var(--dur) var(--ease),transform var(--dur-scene) var(--ease-out);transition-delay:calc(var(--s,0) * 100ms + 300ms)}
  .js .sv-sheet.in .sv-items li::before{opacity:1;transition:opacity var(--dur) var(--ease) calc(var(--s,0) * 100ms + 300ms)}
  .js .sv-sheet.in .sv-items li::after{transform:scaleX(1);transition:transform 820ms var(--ease-out) calc(var(--s,0) * 100ms + 140ms)}
}
@media(max-width:900px){
  .sv-stack{--sv-top:74px;--sv-tab:44px;margin-inline:8px}
  .sv-tab{gap:12px;font-size:.7rem;letter-spacing:.1em;padding:0 18px}
  .sv-in{grid-template-columns:1fr;gap:16px;align-items:start;align-content:start;padding:4px 18px 22px}
  /* phones: the numeral sits beside the name, so the longest sheet (six lines) still fits under four tabs */
  .sv-lede{display:grid;grid-template-columns:auto 1fr;column-gap:16px;align-items:center}
  .sv-num{font-size:clamp(4.2rem,20vw,5.6rem);padding-bottom:.1em}
  .sv-lede h2{margin-top:0;font-size:clamp(1.7rem,7.4vw,2.2rem)}
  .sv-lede p{grid-column:1/-1;font-size:.98rem;line-height:1.5;margin-top:8px}
  .sv-items li{grid-template-columns:32px 1fr;padding:13px 0 9px;font-size:1.08rem}
}
@media(prefers-reduced-motion:reduce){.sv-items li,.sv-tab,.sv-tab::after{transition:none}}
/* The close: the old site's call and the number, centred on the ground before the night footer. On the light
   ground the number is ink and only the chip is gold, so it passes contrast. */
.sv-close{padding:clamp(40px,9vh,110px) 0 clamp(70px,13vh,150px);text-align:center}
.sv-close .wrap{display:grid;justify-items:center}
.sv-close h2{font:400 clamp(2.4rem,1.6rem + 3.4vw,4.6rem)/1.04 var(--font-display);letter-spacing:-.015em}
.sv-close .ct-tel{margin-top:clamp(22px,4vh,38px);color:var(--ink)}
.sv-close .ct-tel .num{background-image:linear-gradient(var(--ink),var(--ink))}
.sv-mail{margin:14px 0 0}
.sv-mail a{display:inline-block;padding:12px 6px;color:var(--mute);text-underline-offset:4px}

/* ---------- Contact page ---------- */
/* A utility page: the heading and the sheet share the first screen. The sheet is the same paper as the services. */
.ct{position:relative;overflow:clip;min-height:100svh;display:grid;align-items:center;padding:calc(122px + 3vh) 0 clamp(56px,9vh,110px)}
.ct .sketch{position:absolute;inset:-4% 0 auto;width:100%;height:108%;object-fit:cover;opacity:.08;-webkit-mask-image:linear-gradient(180deg,#000 40%,transparent 96%);mask-image:linear-gradient(180deg,#000 40%,transparent 96%)}
.ct .wrap{position:relative;z-index:1;width:100%;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,90px);align-items:center}
.ct-head{display:grid;justify-items:start}
.ct-head h1{font-size:clamp(3.2rem,1.6rem + 5.4vw,6.6rem);letter-spacing:-.02em}
.ct-head .pj-mark{width:clamp(130px,13vw,200px)}
.ct-sheet{border-radius:8px 8px 8px 34px;background:linear-gradient(180deg,#fff 0,var(--bone) 340px);box-shadow:var(--shadow-lg);padding:clamp(26px,4vh,44px) clamp(22px,3.4vw,52px) clamp(20px,3vh,34px)}
.ct-sheet h2{font:400 clamp(1.9rem,1.4rem + 1.6vw,2.8rem)/1.05 var(--font-display);letter-spacing:-.015em}
.ct-rows{margin:clamp(20px,3.4vh,34px) 0 0}
.ct-rows>div{position:relative;display:grid;grid-template-columns:150px 1fr;align-items:baseline;gap:8px 20px;padding:24px 0 20px}
.ct-rows>div::after{content:"";position:absolute;left:0;right:0;top:0;height:11px;transform-origin:0 50%;opacity:.5;background:linear-gradient(var(--ink),var(--ink)) 0 5px/100% 1px no-repeat,linear-gradient(var(--ink),var(--ink)) 0 0/1px 11px no-repeat,linear-gradient(var(--ink),var(--ink)) 100% 0/1px 11px no-repeat}
.ct-rows dt{font:500 .76rem/1.2 var(--font-subject);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.ct-rows dd{margin:0;font:400 clamp(1.25rem,1rem + .9vw,1.8rem)/1.25 var(--font-display);letter-spacing:-.005em}
.ct-rows a{text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0% 1px no-repeat;transition:background-size var(--dur) var(--ease);padding:6px 0}
.ct-rows a:hover,.ct-rows a:focus-visible{background-size:100% 1px}
.ct-nums{display:grid;gap:4px;justify-items:start}
.ct-nums a{white-space:nowrap;font:600 clamp(1.7rem,1.1rem + 1.5vw,2.5rem)/1.1 var(--font-subject);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ct-nums a+a{font-size:clamp(1.25rem,1rem + .9vw,1.8rem);font-weight:500;color:var(--mute)}
.ct-rows .hours{font-size:.86em}
@media(prefers-reduced-motion:no-preference){
  .js .ct-head h1,.js .ct-head .pj-mark,.js .ct-head .pj-lead{animation:pj-rise 900ms var(--ease-out) both}
  .js .ct-head .pj-mark{animation-delay:140ms}.js .ct-head .pj-lead{animation-delay:260ms}
  .js .ct-sheet{animation:pj-rise 1000ms var(--ease-out) 200ms both}
  .js .ct-rows>div::after{animation:ct-draw 820ms var(--ease-out) calc(var(--s) * 120ms + 520ms) both}
  .js .ct-rows dt,.js .ct-rows dd{animation:ct-in var(--dur-scene) var(--ease-out) calc(var(--s) * 120ms + 700ms) both}
}
@keyframes ct-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes ct-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(max-width:900px){
  .ct{min-height:0;padding:calc(84px + 2vh) 0 56px}
  .ct .wrap{grid-template-columns:1fr;gap:26px}
  .ct-head h1{font-size:clamp(2.8rem,13vw,3.6rem)}
  .ct-head .pj-mark{width:112px;margin-top:12px}
  .ct-head .pj-lead{margin-top:10px;font-size:1.35rem}
  .ct-sheet{padding:22px 18px 14px;border-radius:6px 6px 6px 24px}
  .ct-rows>div{grid-template-columns:1fr;gap:6px;padding:20px 0 16px}
  .ct-nums a{padding:9px 0}.ct-rows a{padding:10px 0;display:inline-block}
}

/* ---------- Privacy and Accessibility ---------- */
/* The contact page's layout and paper, with paragraphs in the rows instead of contact details. */
.lg .wrap{align-items:start}
.lg .ct-head{position:sticky;top:150px}
.lg-rows a[href^="tel:"]{white-space:nowrap}
.lg .ct-sheet h2{font-size:clamp(1.7rem,1.3rem + 1.2vw,2.4rem)}
.lg-sum{margin:0;font:400 clamp(1.15rem,1rem + .5vw,1.4rem)/1.45 var(--font-display);max-width:44ch}
.lg-rows dd{font:400 1.02rem/1.6 var(--font-body);letter-spacing:0;max-width:60ch}
.lg-rows dd a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;background:none;padding:0}
.foot-base a{margin-left:22px;color:inherit;text-underline-offset:3px;display:inline-block;padding-block:12px;margin-block:-12px}
.foot-base a:hover{color:var(--bone)}
@media(max-width:900px){.foot-base a{margin-left:16px}.lg .ct-head{position:static}}

/* Project galleries: the lead photo stays; the portfolio's frames wipe in over it along a drafting line,
   one after another while the card is in focus, then all lift away back to the lead. */
.pj-photo picture{position:relative}
.pj-frames{position:absolute;inset:0;z-index:1;border-radius:6px;overflow:hidden;pointer-events:none}
.pj-frames img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:inset(0 100% 0 0);opacity:1}
.pj-frames img.is-shown{clip-path:inset(0 0 0 0);transition:clip-path 1150ms var(--ease-out)}
.pj-frames.is-lifting img{opacity:0;transition:opacity 700ms var(--ease)}
.pj-wipe{position:absolute;top:0;bottom:0;left:0;width:1px;background:var(--bone);opacity:0;box-shadow:0 0 0 .5px rgba(17,17,17,.18)}
.pj-wipe::before,.pj-wipe::after{content:"";position:absolute;left:-6px;width:13px;height:1px;background:var(--bone)}
.pj-wipe::before{top:12px}.pj-wipe::after{bottom:12px}
.pj-wipe.is-going{opacity:1;left:100%;transition:left 1150ms var(--ease-out),opacity 300ms linear 900ms}
.pj-wipe.is-going.is-end{opacity:0}
.pj-more{position:absolute;z-index:2;top:12px;left:12px;display:inline-flex;align-items:baseline;gap:4px;min-height:36px;padding:9px 12px 10px;border:0;border-radius:999px;background:rgba(248,247,245,.92);color:var(--mute);font:500 .78rem/1 var(--font-subject);font-variant-numeric:tabular-nums;cursor:pointer;overflow:hidden;opacity:0;transition:opacity var(--dur) var(--ease)}
.pj-more b{color:var(--ink);font-weight:600}
.pj-more-bar{position:absolute;left:12px;right:12px;bottom:5px;height:2px;border-radius:2px;background:var(--red);transform:scaleX(0);transform-origin:left center}
.pj-card.is-on .pj-more{opacity:1}
.pj-card.is-on .pj-more.is-timing .pj-more-bar{transform:scaleX(1);transition:transform var(--hold,3600ms) linear}
.pj-more:hover{color:var(--ink)}
.pj-more:focus-visible{outline:2px solid var(--ink);outline-offset:2px;opacity:1}
@media (prefers-reduced-motion: reduce){
  .pj-frames img.is-shown{transition:none}.pj-wipe{display:none}
}

/* Track record: one paper sheet, the portfolio's table. Year in the display serif, rules drawing in row by row. */
.tr{position:relative;padding:clamp(64px,11vh,130px) 0 clamp(70px,12vh,140px)}
.tr-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px 30px;margin-bottom:clamp(22px,4vh,40px)}
.tr-head h2{font-family:var(--font-display);font-weight:400;letter-spacing:-.015em;line-height:1.02;font-size:clamp(2.2rem,1.3rem + 2.5vw,3.9rem);max-width:22ch;text-wrap:balance;margin:0}
.tr-sum{margin:0;font:500 1rem/1.3 var(--font-subject);color:var(--mute)}
.tr-sum b{font-family:var(--font-display);font-weight:400;font-size:2.2rem;color:var(--ink);margin-right:8px;vertical-align:-.12em}
.tr-sheet{background:var(--bone);border-radius:6px;box-shadow:var(--shadow-lg);padding:clamp(10px,2vw,26px) clamp(16px,3vw,40px)}
.tr-table{width:100%;border-collapse:collapse}
.tr-table thead th{padding:14px 12px 12px 0;text-align:left;font:500 .66rem/1 var(--font-subject);letter-spacing:.13em;text-transform:uppercase;color:var(--mute);border-bottom:1px solid var(--ink)}
.tr-table tbody tr{position:relative}
.tr-table tbody th,.tr-table tbody td{padding:15px 14px 15px 0;text-align:left;vertical-align:baseline;background:linear-gradient(var(--rule),var(--rule)) 0 100%/100% 1px no-repeat}
.tr-table tbody th{font:500 1rem/1.35 var(--font-subject);color:var(--ink)}
.tr-table tbody td{font-size:.95rem;line-height:1.4;color:#3a3833}
.tr-table .tr-y{width:7.5rem;font-family:var(--font-display);font-size:1.7rem;line-height:1;color:var(--ink);font-variant-numeric:lining-nums}
.tr-table tbody tr:hover th{color:var(--red)}
@media (prefers-reduced-motion: no-preference){
  .js .tr-sheet.rv{opacity:1;transform:none}
  .js .tr-table tbody th,.js .tr-table tbody td{background-size:0 1px;transition:background-size 900ms var(--ease-out) calc(var(--s,0) * 45ms + 200ms)}
  .js .tr-table tbody tr>*{opacity:0;transform:translateY(8px);transition:opacity var(--dur) var(--ease) calc(var(--s,0) * 45ms),transform var(--dur-scene) var(--ease-out) calc(var(--s,0) * 45ms)}
  .js .tr-sheet.rv.in .tr-table tbody th,.js .tr-sheet.rv.in .tr-table tbody td{background-size:100% 1px}
  .js .tr-sheet.rv.in .tr-table tbody tr>*{opacity:1;transform:none}
}
@media (max-width:700px){
  .tr-table thead{display:none}
  .tr-table tbody tr{display:grid;grid-template-columns:4.6rem 1fr;column-gap:12px;padding:14px 0;background:linear-gradient(var(--rule),var(--rule)) 0 100%/100% 1px no-repeat}
  .tr-table tbody th,.tr-table tbody td{padding:0;background:none!important}
  .tr-table .tr-y{grid-row:span 2;width:auto;font-size:1.45rem}
  .tr-table tbody td:last-child{margin-top:4px;font-size:.88rem;color:var(--mute)}
}

/* Across Kuwait, on the night ground. The join is crisp, bridged by the photograph that straddles it (the corporate
   page turn, no fade). The band rises 8vh as it enters, transform only. The index is type and hairlines. */
.reality{padding-bottom:clamp(210px,30vh,320px)}
.atlas{display:flow-root;position:relative;z-index:3;background:var(--night);color:var(--bone);padding:0 0 clamp(100px,15vh,170px)}
.atlas .wrap{position:relative}
.ix-band{margin:calc(-1 * clamp(150px,22vh,250px)) 0 0;border-radius:6px;overflow:hidden;box-shadow:0 30px 60px rgba(0,0,0,.35)}
.ix-band img{display:block;width:100%;aspect-ratio:21/9;object-fit:cover;object-position:50% 55%}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .ix-band{animation:ix-rise linear both;animation-timeline:view();animation-range:entry 0% cover 45%}
  }
}
@keyframes ix-rise{from{transform:translateY(8vh)}to{transform:none}}
.ix-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 40px;margin:clamp(64px,10vh,110px) 0 clamp(18px,3vh,28px)}
.atlas h2{font-family:var(--font-display);font-weight:400;font-size:clamp(2.3rem,1.5rem + 2.6vw,4rem);line-height:1.04;letter-spacing:-.015em;margin:0;max-width:14ch;text-wrap:balance}

.at-filter{display:flex}
.at-filter button{all:unset;box-sizing:border-box;position:relative;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 4px;margin-left:22px;cursor:pointer;font:500 .95rem/1 var(--font-subject);color:rgba(248,247,245,.55);transition:color var(--dur-fast) linear}
.at-filter button:first-child{margin-left:0}
.at-filter button span{font-size:.72rem;font-variant-numeric:tabular-nums;opacity:.7}
.at-filter button::after{content:"";position:absolute;left:4px;right:4px;bottom:4px;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform 380ms var(--ease-out)}
.at-filter button[aria-pressed="true"],.at-filter button:hover{color:var(--bone)}
.at-filter button[aria-pressed="true"]::after{transform:scaleX(1)}
.at-filter button:focus-visible{outline:2px solid var(--bone);outline-offset:3px}

.ix-body{display:grid;grid-template-columns:minmax(0,1fr) clamp(260px,28vw,380px);gap:clamp(28px,4vw,64px);align-items:start}
.ix-list{list-style:none;margin:0;padding:0;border-top:1px solid rgba(248,247,245,.22)}
.ix-list li.is-out{display:none}
.ix-list a{display:grid;grid-template-columns:3.2rem minmax(0,1.5fr) minmax(0,1fr) 4rem 6.2rem;align-items:baseline;column-gap:18px;padding:18px 0 17px;border-bottom:1px solid rgba(248,247,245,.12);color:rgba(248,247,245,.62);text-decoration:none;transition:color 180ms linear}
.ix-no{font:500 .78rem/1 var(--font-subject);font-variant-numeric:tabular-nums;color:rgba(248,247,245,.4)}
.ix-name{font:400 clamp(1.25rem,1rem + .7vw,1.65rem)/1.15 var(--font-display);color:var(--bone)}
.ix-place,.ix-year,.ix-status{font:500 .86rem/1.3 var(--font-subject)}
.ix-year{font-variant-numeric:tabular-nums}
.ix-status{text-align:right}
.is-ongoing .ix-status{color:var(--gold)}
.ix-thumb{display:none}
.ix-list a:hover,.ix-list a:focus-visible,.ix-list a.is-hot{color:var(--bone)}
.ix-list a:hover .ix-name,.ix-list a.is-hot .ix-name{color:var(--gold)}
.ix-list a:focus-visible{outline:2px solid var(--bone);outline-offset:4px}
.ix-peek{position:sticky;top:18vh;margin:0;aspect-ratio:3/4;border-radius:6px;overflow:hidden;background:#1c1c1c}
.ix-peek img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity 320ms var(--ease)}
.ix-peek .ix-b{opacity:0}
.ix-peek figcaption{position:absolute;left:0;right:0;bottom:0;padding:44px 18px 16px;background:linear-gradient(transparent,rgba(0,0,0,.65));font:400 1.1rem/1.2 var(--font-display);color:var(--bone)}
.at-all{color:var(--bone);margin-top:clamp(30px,5vh,48px)}
@media (prefers-reduced-motion: reduce){.ix-peek img{transition:none}}
@media (max-width:900px){
  .reality{padding-bottom:150px}
  .ix-band{margin-top:-110px}
  .ix-band img{aspect-ratio:3/2}
  .ix-head{margin-top:48px}
  .at-filter button{margin-left:16px}
  .ix-body{grid-template-columns:minmax(0,1fr)}
  .ix-peek{display:none}
  .ix-list a{grid-template-columns:minmax(0,1fr) 76px;grid-template-areas:"name thumb" "meta thumb";column-gap:14px;row-gap:6px;align-items:center;padding:14px 0}
  .ix-no{display:none}
  .ix-name{grid-area:name;font-size:1.2rem}
  .ix-place{grid-area:meta}
  .ix-year,.ix-status{display:none}
  .ix-thumb{display:block;grid-area:thumb;width:76px;height:54px;object-fit:cover;border-radius:3px}
  .is-ongoing .ix-place::after{content:"  Ongoing";color:var(--gold)}
}

/* Letters From Our Clients: the bone ground rises out of the chairman's deeper shade. One spotlight per letter: the
   client's words, the project, the photograph where there is one. */
.letters{position:relative;padding:clamp(90px,14vh,170px) 0 clamp(90px,14vh,160px);background:linear-gradient(180deg,#DAD6CE 0,var(--ground) 300px)}
.lt-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:18px 40px;margin-bottom:clamp(30px,5vh,56px)}
.lt-head h2{font-family:var(--font-display);font-weight:400;font-size:clamp(2.3rem,1.5rem + 2.6vw,4rem);line-height:1.04;letter-spacing:-.015em;margin:0;max-width:12ch}
.lt-nav{display:flex;gap:6px 28px;flex-wrap:wrap}
.lt-nav button{all:unset;box-sizing:border-box;position:relative;display:inline-flex;gap:10px;align-items:baseline;min-height:44px;padding:12px 0;cursor:pointer;font:500 .95rem/1.2 var(--font-subject);color:var(--mute)}
.lt-nav button span{font-size:.72rem;font-variant-numeric:tabular-nums}
.lt-nav button::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:2px;background:var(--red);transform:scaleX(0);transform-origin:left center;transition:transform 420ms var(--ease-out)}
.lt-nav button[aria-selected="true"]{color:var(--ink)}
.lt-nav button[aria-selected="true"]::after{transform:scaleX(1)}
.lt-nav button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.lt-spot[hidden]{display:none}
.lt-spot{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(16px,2.4vw,32px);align-items:center}
.lt-spot.is-on{animation:lt-in 620ms var(--ease-out) both}
@keyframes lt-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.lt-words{grid-column:1/7;border-left:2px solid var(--ink);padding:6px 0 6px clamp(20px,2.6vw,36px)}
.lt-words blockquote{position:relative;margin:0}
.lt-words blockquote::before{content:"\201C";display:block;height:.52em;margin-bottom:6px;font:400 6rem/1 var(--font-display);color:var(--gold)}
.lt-words blockquote p{margin:0;font:400 clamp(1.5rem,1.05rem + 1.5vw,2.35rem)/1.22 var(--font-display);letter-spacing:-.008em;text-wrap:pretty}
.lt-note{margin:12px 0 0;font:500 .82rem/1.3 var(--font-subject);color:var(--mute)}
.lt-facts{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:0;margin:clamp(22px,3.4vh,30px) 0 0;padding-top:18px;border-top:1px solid var(--rule)}
.lt-facts div{padding-right:clamp(16px,2vw,28px);margin-right:clamp(16px,2vw,28px);border-right:1px solid var(--rule)}
.lt-facts div:last-child{border-right:0;margin-right:0}
.lt-facts dt{font:500 .64rem/1 var(--font-subject);letter-spacing:.13em;text-transform:uppercase;color:var(--mute);margin-bottom:6px}
.lt-facts dd{margin:0;font:500 .92rem/1.35 var(--font-subject);max-width:22ch}
.lt-pics{grid-column:8/13;position:relative;margin:0}
.lt-spot.is-solo .lt-words{grid-column:1/10}
.lt-photo{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:6px;box-shadow:var(--shadow-lg)}
@media (max-width:900px){
  .lt-words,.lt-pics{grid-column:1/-1}
  .lt-pics{margin:36px 0 10px}
    .lt-facts{grid-template-columns:1fr;row-gap:14px}
  .lt-facts div{border-right:0;margin-right:0;padding-right:0}
  }
@media (prefers-reduced-motion: reduce){.lt-spot.is-on{animation:none}}


/* Buttons, picked from the button lab on 18 Oct. Header: Get a Quote flips to the number. Hero: Our Projects with a
   drafting line. Services: the five services peek above the button. Chairman: the bridge deck draws under Learn More.
   Services close: the contact ledger. Projects on phones: a scale rule of sixteen ticks. */
.x-draft{display:inline-flex;align-items:center;gap:16px;min-height:48px;color:inherit;font:600 1.05rem/1 var(--font-subject);text-decoration:none}
.x-draft .dim{position:relative;width:46px;height:1px;background:currentColor;transition:width 420ms var(--ease-out)}
.x-draft .dim::before,.x-draft .dim::after{content:"";position:absolute;top:-6px;width:1px;height:13px;background:currentColor}
.x-draft .dim::before{left:0}.x-draft .dim::after{right:0}
.x-draft:is(:hover,:focus-visible) .dim{width:82px}
.x-arw{width:18px;height:18px;flex:none;transition:transform 260ms var(--ease-out)}
.x-flip{display:inline-grid;perspective:640px;text-decoration:none;color:var(--ink);font:600 1rem/1 var(--font-subject)}
.x-flip-in{display:grid;transform-style:preserve-3d;transform:translateZ(-25px);transition:transform 380ms cubic-bezier(.65,0,.25,1)}
.x-flip-f{grid-area:1/1;display:flex;align-items:center;justify-content:center;height:50px;padding:0 20px;border-radius:2px;background:var(--gold);backface-visibility:hidden;transform:translateZ(25px)}
.x-flip-f+.x-flip-f{background:var(--bone);font-variant-numeric:tabular-nums;transform:rotateX(-90deg) translateZ(25px)}
.x-flip:is(:hover,:focus-visible) .x-flip-in{transform:translateZ(-25px) rotateX(90deg)}
.x-idx{position:relative;display:inline-flex;text-decoration:none}
.x-idx-f{display:inline-flex;align-items:center;gap:14px;min-height:50px;padding:0 22px;border-radius:2px;background:var(--ink);color:var(--bone);font:600 1rem/1 var(--font-subject)}
.x-idx-list{position:absolute;left:0;bottom:calc(100% + 14px);display:grid;gap:7px;padding-left:14px;pointer-events:none}
.x-idx-list::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--ink);transform:scaleY(0);transform-origin:bottom;transition:transform 360ms var(--ease-out)}
.x-idx-list span{display:flex;gap:10px;color:var(--ink);font:500 .95rem/1.2 var(--font-subject);white-space:nowrap;opacity:0;transform:translateY(6px);transition:opacity 200ms linear,transform 340ms var(--ease-out);transition-delay:calc(var(--i)*45ms)}
.x-idx-list b{min-width:1.6em;color:var(--mute);font-weight:500;font-variant-numeric:tabular-nums}
.x-idx:is(:hover,:focus-visible) .x-idx-list::before{transform:scaleY(1)}
.x-idx:is(:hover,:focus-visible) .x-idx-list span{opacity:1;transform:none}
.x-deck{display:inline-grid;gap:10px;color:var(--ink);text-decoration:none}
.x-deck-l{display:inline-flex;align-items:center;gap:12px;font:600 1.05rem/1 var(--font-subject)}
.x-deck-d{position:relative;width:180px}
.x-deck-d svg{width:100%;height:auto;fill:rgba(17,17,17,.16)}
.x-deck-d .x-deck-red{position:absolute;inset:0;fill:var(--red);clip-path:inset(0 100% 0 0);transition:clip-path 760ms var(--ease-out)}
.x-deck:is(:hover,:focus-visible) .x-deck-red{clip-path:inset(0 0 0 0)}
.x-ledger{display:grid;width:min(100%,400px);border-top:1px solid var(--ink)}
.x-ledger>*{display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:12px;min-height:46px;margin:0;padding:8px 10px;border-bottom:1px solid var(--rule);color:var(--ink);text-decoration:none;font:500 .9rem/1.35 var(--font-subject);transition:background-color var(--dur-fast) linear}
.x-ledger b{color:var(--mute);font:500 .78rem/1 var(--font-subject)}
.x-ledger a span{font-weight:600;overflow-wrap:anywhere}
.x-ledger p span{text-wrap:balance}
.x-ledger a:is(:hover,:focus-visible){background:var(--gold)}
.x-ledger a:is(:hover,:focus-visible) b{color:var(--ink)}
.x-ledger a:is(:hover,:focus-visible) .x-arw{transform:translateX(4px)}
.x-r16{display:inline-flex;align-items:center;gap:16px;min-height:50px;padding:0 20px;border:1px solid var(--ink);border-radius:2px;background:transparent;color:var(--ink);font:600 1rem/1 var(--font-subject)}
.x-r16-t{display:flex;align-items:flex-end;gap:5px;height:16px}
.x-r16-t i{width:1px;height:5px;background:currentColor;opacity:.45;transition:height 180ms var(--ease-out),opacity 180ms linear;transition-delay:calc(var(--i)*26ms)}
.x-r16-t i:nth-child(4n+1),.x-r16-t i:last-child{height:9px}
.x-r16-t i:last-child{background:var(--red);opacity:1}
.x-r16:is(:hover,:focus-visible) .x-r16-t i{height:9px;opacity:1}
.x-r16:is(:hover,:focus-visible) .x-r16-t i:is(:nth-child(4n+1),:last-child){height:16px}
.x-arw{width:18px;height:18px}
.x-idx:is(:hover,:focus-visible) .x-arw,.x-deck:is(:hover,:focus-visible) .x-arw{transform:translateX(4px)}
.nav .x-flip{font-size:.95rem}
.nav .x-flip-in{transform:translateZ(-22px)}
.nav .x-flip-f{height:44px;padding:0 18px;transform:translateZ(22px)}
.nav .x-flip-f+.x-flip-f{transform:rotateX(-90deg) translateZ(22px)}
.nav .x-flip:is(:hover,:focus-visible) .x-flip-in{transform:translateZ(-22px) rotateX(90deg)}
.x-flip:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.x-draft:focus-visible,.x-deck:focus-visible,.x-idx:focus-visible,.x-r16:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.sv-close .x-ledger{margin-top:clamp(22px,4vh,38px);text-align:left}
.pj-all.x-r16{border-radius:2px;min-height:48px}
@media (prefers-reduced-motion: reduce){
  .x-flip-in,.x-draft .dim,.x-idx-list span,.x-idx-list::before,.x-deck-red,.x-r16-t i,.x-arw{transition-duration:0s!important;transition-delay:0s!important}
}
@media (max-width:900px){
  .nav .x-flip{font-size:.88rem}
  .nav .x-flip-in{transform:translateZ(-20px)}
  .nav .x-flip-f{height:40px;padding:0 14px;transform:translateZ(20px)}
  .nav .x-flip-f+.x-flip-f{transform:rotateX(-90deg) translateZ(20px)}
  .x-idx-list{display:none}
}
.hero .x-draft{color:var(--bone);font-size:1.15rem}
.x-idx-list{top:calc(100% + 10px);bottom:auto;z-index:5;gap:9px;padding:16px 22px 16px 34px;background:var(--bone);border-radius:2px;box-shadow:var(--shadow-lg);opacity:0;transform:translateY(-6px);transition:opacity 220ms linear,transform 320ms var(--ease-out)}
.x-idx-list::before{left:18px;top:18px;bottom:18px;transform-origin:top}
.x-idx:is(:hover,:focus-visible) .x-idx-list{opacity:1;transform:none}