/* WYRD homepage demo, stage 7 (stage 3 base; stage 7 = critique-3 fixes). Grounds: ultramarine #002FA7 and cream #F2F0E7 only; type colour follows the ground.
   Fonts and tokens come from base.css. Uppercase only on buttons and huge statement/service names.
   Stage 3: illustrated hero world, islands at SIC scale (52vw, bleeding 6vw), real WYRD work inside the engraved screens,
   cream suede notch buttons (Figma export), drawn hand-offs (hero underside fringe, flood to the right edge),
   one paper-plane traveller, phone = one big island per screen. */
/* Bookish has Book + Italic only: one range so a stray 500 never synthesises bold (base.css declares 400 only) */
@font-face{font-family:"Bookish";src:url(fonts/BookishTrial-Book.otf) format("opentype");font-weight:100 900;font-display:block}
@font-face{font-family:"Bookish";src:url(fonts/BookishTrial-Italic.otf) format("opentype");font-style:italic;font-weight:100 900;font-display:block}
:root{
  --hero-ground:var(--blue);
  --hdr:82px;   /* adapted: the space the og pill takes (20px + 54px + 8px); client 26 Oct: pill pushed down 8 -> 20px */
  --out:cubic-bezier(.215,.61,.355,1);        /* Baillat easeOutCubic */
  --hair:rgba(242,240,231,.34);   /* suede pass: cream hairlines on the suede */
  --suede:640px;   /* suede pass: displayed tile size (the 860px tile from Drive 32, tools/make_suede.py) */
  /* stage 7: the drawn underside strip (17, aspect 3.282) at 82 % of its natural height, capped on very wide screens */
  --fringe-h:min(calc(100vw / 3.282 * .82),420px);
}
.ground-ink{--hero-ground:var(--ink)}
@media (max-width:767px){:root{--hdr:82px;   /* adapted: pill + START A PROJECT row */
  --fringe-h:calc(200vw / 3.282 * .82)}
  .fringe{-webkit-mask-image:url(assets/v7/hero/underside-17-1536.webp)!important;mask-image:url(assets/v7/hero/underside-17-1536.webp)!important;
    -webkit-mask-size:200% 100%!important;mask-size:200% 100%!important;-webkit-mask-position:38% 0!important;mask-position:38% 0!important}
  .fringe--work{-webkit-mask-position:72% 0!important;mask-position:72% 0!important}}
html,body{height:auto}
html{background:#0230A8} /* The suede texture lives in the fixed layer below all content. */
@media (max-width:767px){:root{--suede:480px}}
@media (prefers-reduced-motion:no-preference){html:not(.wyrd-smooth){scroll-behavior:smooth}}
html{scroll-padding-top:calc(var(--hdr) + 12px)}
html.wyrd-smooth{scroll-behavior:auto!important}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-stopped{overflow:clip}
.lenis.lenis-smooth iframe{pointer-events:none}
body{background:none;color:var(--cream)}
::selection{background:var(--cream);color:var(--blue)}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:12px;top:-60px;z-index:100;background:var(--cream);color:var(--blue);padding:10px 14px;font:500 15px/1 "Haas Display",sans-serif}
.skip:focus{top:12px}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
figure{margin:0}

/* ---------- buttons: the cream suede notch slab from the Figma library (its material raster, 9-sliced so the
   rounded end and the curl never stretch); a blue velvet copy of the same slab on cream grounds ---------- */
.btn{--bh:56px;display:inline-flex;align-items:center;justify-content:center;height:var(--bh);min-width:calc(var(--bh) * 3.2);
  padding:0 4px calc(var(--bh) * .04);gap:0;background:none;border-radius:0;border-style:solid;border-color:transparent;
  border-width:0 calc(var(--bh) * .508) 0 calc(var(--bh) * .281);
  border-image:url(assets/v3/btn/suede-cream.webp) 0 130 0 72 fill stretch;
  font:500 15px/1 "Haas Display",sans-serif;letter-spacing:.01em;text-transform:uppercase;color:#1131A8;
  cursor:pointer;white-space:nowrap;-webkit-appearance:none;appearance:none;
  filter:drop-shadow(0 5px 7px rgba(0,8,40,.38));
  transition:transform 180ms var(--ease),filter 180ms var(--ease)}
.btn .arr{display:none}
.btn--blue{border-image-source:url(assets/v3/btn/suede-cream.webp);color:#1131A8}   /* suede pass: blue suede vanishes on the suede, so the slab is cream */
@media (hover:hover){
  .btn:hover{transform:translateY(-1px);filter:drop-shadow(0 8px 11px rgba(0,8,40,.42))}
}
.btn:active{transform:translateY(1px) scale(.98);filter:drop-shadow(0 2px 3px rgba(0,8,40,.4))}
.btn:focus-visible{outline:2px solid var(--ice);outline-offset:4px}
.btn:focus-visible,.btn--blue:focus-visible{outline-color:var(--cream)}
@media (max-width:767px){.btn{--bh:52px;font-size:14px}}

/* ---------- header ---------- */
/* adapted 25 Oct (client: "compact like the original WYRD website, no logo"): the original site's nav pill, measured in
   WebKit on wyrdbydesign.com (tools/measure_og_nav.py -> work/og-nav.json): sticky, centred, 8px from the top; the pill is
   54px tall (5px 8px padding, 1px rgba(0,47,167,.11) hairline, 28px radius, solid cream, shadow 0 5px 24px rgba(7,29,100,.035),
   no blur); items 42px tall, 0 19px padding, 21px radius, 13px, #343A4B; Contact #002FA7 with a 1px x 18px divider before it;
   the active item gets an rgba(0,47,167,.03) fill, blue ink and a 3px blue dot 6px from its foot. Haas Display, not Satoshi
   (fonts frozen). The header wrapper is transparent; only the pill and START A PROJECT (top right) take clicks. */
.hdr{--pt:20px;position:fixed;inset:0 0 auto 0;height:var(--hdr);z-index:50;pointer-events:none}
.hdr__layer{position:absolute;inset:0;background:none;color:var(--blue);pointer-events:none}
.hdr__nav{position:absolute;left:50%;top:var(--pt);transform:translateX(-50%);display:flex;align-items:center;gap:2px;height:54px;box-sizing:border-box;
  padding:5px 8px;border:1px solid rgba(0,47,167,.11);border-radius:28px;background:var(--cream);box-shadow:0 6px 22px rgba(0,8,52,.28);   /* suede pass: the og shadow (.035) is invisible on blue */
  pointer-events:auto;white-space:nowrap}
.hdr__nav a{position:relative;display:flex;align-items:center;height:42px;padding:0 19px;border-radius:21px;font:500 13px/1 "Haas Display",sans-serif;
  color:#343A4B;transition:background-color 180ms var(--ease),color 180ms var(--ease)}
.hdr__nav a::after{content:"";position:absolute;left:50%;bottom:6px;width:3px;height:3px;margin-left:-1.5px;border-radius:50%;background:var(--blue);opacity:0;transition:opacity 180ms var(--ease)}
.hdr__nav a.is-on{background:rgba(0,47,167,.03);color:var(--blue)}
.hdr__nav a.is-on::after{opacity:1}
@media (hover:hover){.hdr__nav a:hover{background:rgba(0,47,167,.03);color:var(--blue)}}
.hdr__div{flex:none;width:1px;height:18px;background:rgb(217,219,224);margin:0 2px}
.hdr__nav .hdr__contact{color:var(--blue);padding:0 16px 0 20px;gap:5px}
.hdr__contact svg{width:9px;height:9px;flex:none}
.hdr__cta{position:absolute;right:var(--m);top:calc(var(--pt) + 4px);pointer-events:auto}
@media (max-width:767px){
  /* phone: the same pill centred (44px items as on the original's phone pill, 16px padding narrowed to fit 320), START A
     PROJECT in a row under the pill, right-aligned, same suede size */
  .hdr__nav{padding:4px 8px}
  .hdr__nav a{height:44px;padding:0 clamp(9px,3.4vw,16px)}
  .hdr__nav .hdr__contact{padding:0 clamp(9px,3.2vw,12px) 0 clamp(9px,3.6vw,14px)}
  .hdr__cta{top:calc(var(--pt) + 54px + 8px)}
}
@media (prefers-reduced-motion:reduce){.hdr__nav a,.hdr__nav a::after{transition:none}}
.hdr__inv{display:none!important}   /* suede pass: the whole page is blue, nothing to flip over */
.hdr__inv .hdr__nav{visibility:hidden}   /* adapted: the cream pill reads on blue as it is; only START A PROJECT flips to cream suede over the flood */
.hdr__inv--top{background:var(--hero-ground)}
/* over the flood the whole bar flips at once (SIC): a short opacity cross-swap, never a ragged clip through the type */
.hdr__inv--bot{opacity:0;visibility:hidden;transition:none}
.hdr.is-flood .hdr__inv--bot{opacity:1;visibility:visible;transition:none}   /* stage 7: an instant swap (SIC); Safari caught the cross-fade as a lilac bar */
.hdr__cta{--bh:46px;font-size:13px;border-width:0 calc(var(--bh) * .281);border-image-source:url(assets/v5/btn/suede-cream-plain.webp);border-image-slice:0 72 0 72 fill;color:#1131A8}
.hdr__inv .hdr__cta{border-image-source:url(assets/v5/btn/suede-cream-plain.webp)}
@media (max-width:767px){
  .hdr__cta{--bh:46px;font-size:12px}
}

/* ---------- 1. hero (hero rebuild + hero deletions, 24 Oct): one drawn plate is the whole scene, no visible type
   (Akash: "delete the circled elements": the headline, SEE THE WORK and the plate's garland, lamps, wreath and kite).
   Desktop/tablet: 01c (= 01b with the garland, lamps, wreath, kite + string erased offline, same 1536x961 frame) at
   100vw straight under the header; the orb floats in the plate's now open upper centre (no pedestal).
   Phone: a portrait scene re-composed from 01c's own pieces (assets/hero3/compose_phone.py).
   Plate geometry = fractions of the plate image, measured from its alpha mask (shots-hero3/probe3.py):
   --pa aspect; --ox/--oy orb centre (x of width, y of height); --od orb diameter / plate height (the largest clear circle
   at x .5 with >= 30 px of plate clearance and a 6 % sky margin); --root ink below the solid soil (roots), which hangs
   over the next section. The h1 stays in the DOM, visually hidden (.vh). */
/* The showreel owns the panel. Original corner sculptures overlap its edges. */
.hero{--rg:24px;--rt:8px;height:auto;min-height:100vh;min-height:100svh;overflow:visible;overflow-x:clip;z-index:3;background:none;color:var(--cream);
  display:flex;align-items:center;justify-content:center;padding:calc(var(--hdr) + var(--rt)) var(--rg) var(--rg)}
/* The brand mark belongs to the hero, so it leaves with the video on scroll. */
.hero__logo{position:absolute;z-index:4;top:calc(var(--hdr) + 14px);left:50%;transform:translateX(-50%);
  display:block;width:clamp(150px,16vw,210px);height:auto;aspect-ratio:2504/1248;fill:currentColor;color:var(--cream);
  pointer-events:none;filter:drop-shadow(0 2px 4px rgba(0,6,35,.7)) drop-shadow(0 5px 18px rgba(0,6,35,.24))}
.reel{--fa:1.84397;--ol:.025;--ot:.065;--ow:.94;--oh:.88;position:relative;flex:none;aspect-ratio:var(--fa);
  --zoom:1.06;   /* 26 Oct (client: "increase the frame size"): +6 %, the art has ~30px of margin each side so only the curls' tips touch the edge. 1.12 was tried and cropped the curls. */
  width:calc(min(calc(100vw - 2 * var(--rg)), calc((100vh - var(--hdr) - var(--rt) - var(--rg)) * 1.84397)) * var(--zoom));
  width:calc(min(calc(100vw - 2 * var(--rg)), calc((100svh - var(--hdr) - var(--rt) - var(--rg)) * 1.84397)) * var(--zoom))}
.reel__clip{position:absolute;pointer-events:none}
.reel__ornaments{position:absolute;inset:0;z-index:2;pointer-events:none;
  filter:drop-shadow(0 .7cqw .8cqw rgba(0,6,44,.34))}
.reel__art{width:100%;height:100%;max-width:none;display:block;pointer-events:none;user-select:none;-webkit-user-select:none;
  clip-path:url(#reel-corners)}
.reel__vid{position:absolute;z-index:1;left:calc(var(--ol) * 100%);top:calc(var(--ot) * 100%);
  width:calc(var(--ow) * 100%);height:calc(var(--oh) * 100%);object-fit:cover;object-position:50% 50%;
  border-radius:1.8cqw;box-shadow:0 0 0 .35cqw #092e9e,0 1.4cqw 2.5cqw rgba(0,6,44,.35);
  display:block;background:#02040c;pointer-events:none}
@media (max-width:767px){.hero{--rg:12px}.reel{--zoom:1.06}}   /* phone: full width minus 12px, centred in the first screen */
/* adapted 25 Oct (client: "put the text By Design. Not Chance. in this box"): live text on the frame's lower-left velvet
   band, in the box he drew (measured on his 1512 screenshot against the frame rect: left 7.67 %, top 80.1 %, width 39.2 %,
   height 11.9 % of the frame). Sized in container units of the frame, so it scales with the frame at every width. */
.reel{container-type:inline-size}
.reel__motto{position:absolute;z-index:3;left:7.67%;top:80.1%;width:39.2%;height:11.9%;margin:0;display:flex;align-items:center;
  font:500 var(--motto-fs,3.86cqw)/1 "Haas Display",sans-serif;letter-spacing:0;color:var(--cream);white-space:nowrap;pointer-events:none}
/* reduced motion only (client): the poster stays still, with one play control in the opening's centre that plays the reel once */
.reel__play{display:none;position:absolute;z-index:3;left:calc((var(--ol) + var(--ow) / 2) * 100%);top:calc((var(--ot) + var(--oh) / 2) * 100%);
  width:clamp(52px,5.2vw,84px);aspect-ratio:1;transform:translate(-50%,-50%);border:0;border-radius:50%;padding:0;cursor:pointer;
  background:var(--blue);color:var(--cream);box-shadow:0 0 0 2px var(--cream),0 6px 18px rgba(0,47,167,.25)}   /* cream ring: the reel's first frame is a blue button */
.reel__play svg{width:46%;height:46%;display:block;margin:0 auto;transform:translateX(6%)}
.reel__play:focus-visible{outline:2px solid var(--cream);outline-offset:4px}
@media (prefers-reduced-motion:reduce){.reel:not(.is-playing) .reel__play{display:grid;place-items:center}}
html:not(.js) .reel__play{display:none!important}
/* the W3 plate + orb rules went with the globe (Task B, 26 Oct); copies in work/pre-slider/home.css */
/* ---------- hand-off: the hero ends as an island's underside (drawn soil and hanging roots), not a ruled edge ----------
   stage 7: ONE drawn strip (17: rocky soil lip, roots, ivy, seed pods; dense at the top, sparse at the bottom), 2x
   upscaled for retina, its top lip baked to solid so it joins the hero's flat ground with no hairline. The hero's own
   ground art dissolves before the edge (.hw__ground mask), so there is no ruler-straight cut. */
.fringe{position:absolute;left:0;right:0;top:-2px;height:calc(var(--fringe-h) + 2px);z-index:3;pointer-events:none;background:var(--hero-ground);
  -webkit-mask:url(assets/v7/hero/underside-17-1536.webp) 50% 0/100% 100% no-repeat;mask:url(assets/v7/hero/underside-17-1536.webp) 50% 0/100% 100% no-repeat}
/* the 2x strip only where it is needed: retina desktops, or screens wider than the 1536 master */
@media (min-width:768px) and (min-resolution:1.5dppx),(min-width:768px) and (-webkit-min-device-pixel-ratio:1.5),(min-width:1700px){
  .fringe{-webkit-mask-image:url(assets/v7/hero/underside-17-3072.webp);mask-image:url(assets/v7/hero/underside-17-3072.webp)}}
/* the work section ends in the same underside, mirrored and cropped differently so the two edges never look identical */
.fringe--work{top:auto;bottom:calc(-1 * var(--fringe-h));height:var(--fringe-h);background:var(--blue);transform:scaleX(-1);
  -webkit-mask-size:125% 100%;mask-size:125% 100%;-webkit-mask-position:70% 0;mask-position:70% 0}

/* ---------- 2 + 5. breaks: two separate islands at SIC scale, bleeding off both edges, right one higher ---------- */
/* clip sideways only, so island roots may hang over the next section (the ending's sky) */
.brk{position:relative;z-index:2;overflow-x:clip;background:none;color:var(--cream)}
.brk--two{background:none}
.brk__head{font:400 clamp(44px,5.1vw,88px)/1 "Bookish",Georgia,serif;letter-spacing:-.012em;text-wrap:balance}
.brk__head em{font-style:normal}
.isl{position:absolute;margin:0}
.isl img{display:block;width:100%;height:auto}
.sky{position:absolute;pointer-events:none;height:auto}
.ph-band{display:none}

.brk__stage{position:relative;height:51vw}
.brk .isl--l{left:-6vw;top:16vw;width:52vw}
.brk .isl--r{right:-6vw;top:0;width:52vw}
/* Task D (26 Oct, client: "replace the left element and resize both the elements to fit like the reference ss"):
   his new left curl (refs/el-left-2.png, AS SUPPLIED: fit IoU .82 vs .62-.73 flipped/mirrored) and the right curl, sized
   and placed as in his reference refs/ref-cobalt-hero.png, read as 100vw (1556 px). The stage starts at WATCH OUR WORK's
   bottom edge (B), the point his reference button also ends (y 418). Fit (work/left2/fit-boxes.json), in vw from B:
   left  x -19.02 (cut edge 19vw off screen), top -8.80, w 70.95, h 76.35 (runs on under the headline into services)
   right x 57.54 (bleeds .33vw off the right edge), top -21.21 (beside the about statement), w 42.79, h 46.02
   headline: right-aligned under the right curl, as in his reference, but 1.4vw lower than his (27.4 vs 26vw): the right
   curl's scroll parallax (+2.5vw at the end) would otherwise touch its first line. */
.brk--one{margin-top:0;padding:0 0 24px}
.brk--one .isl--l{left:-19.02vw;top:-8.8vw;width:70.95vw}
.brk--one .isl--r{right:-.33vw;top:-21.21vw;width:42.79vw}
.brk--one .brk__stage{height:56vw}
.brk--one .brk__head{position:absolute;right:var(--m);top:32vw;margin:0;text-align:right;font-size:clamp(40px,4.2vw,76px);z-index:2}
/* the left curl's tail runs on into the services' top padding; services text and the shutter paint over it */
.svc{z-index:3}
.brk--one .brk__head span{display:block}

.brk--two{padding:clamp(40px,4vw,72px) 0 0}   /* featured rococo: the work section no longer hangs a soil strip into this one */
/* Task C (26 Oct, client: "shift these 2 text boxes down to the marked areas", refs/textbox1-full.png): his arrow runs
   268 css px down from the circled motto on a 1512 px wide screen = 17.72vw; 26 Oct: +8.5vw more (his second arrow, ~128 px on a 1512 screen) = 26.22vw, top only */
.brk--two .brk__motto{position:absolute;right:var(--m);text-align:right;top:calc(36vw - .06em);font-size:5.6vw;line-height:.9;letter-spacing:-.01em;z-index:1}
.brk__motto span{display:block}
@media (min-width:1024px){.brk--two .isl--r{right:-3vw}}   /* stage 5: the billboard (real posters) stays inside the frame */

/* ---------- the real work inside the engraved screens: a mask cut from the drawing's own blank screen (so its frame,
   hatching and anything in front of it stay on top), with the footage warped onto the screen's four corners ---------- */
.isl:not(.is-ready) .scr{visibility:hidden}
.scr{position:absolute;pointer-events:none;-webkit-mask:var(--mask) 0 0/100% 100% no-repeat;mask:var(--mask) 0 0/100% 100% no-repeat}
.scr__in{position:absolute;left:0;top:0;transform-origin:0 0;overflow:hidden;background:var(--blue)}
.scr__in>img,.scr__in>video{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.9) contrast(1.04)}
.scr__in::after{content:"";position:absolute;inset:0;background:var(--blue);mix-blend-mode:multiply;opacity:.1;pointer-events:none}
.scr--lap .scr__in{background:var(--cream)}
.scr--lap .scr__scroll{height:auto;object-fit:fill}
@media (prefers-reduced-motion:no-preference){
  .scr--lap .scr__scroll{animation:site 40s linear infinite alternate}
  @keyframes site{from{transform:translateY(0)}to{transform:translateY(-76%)}}
}
/* stage 5: stills arrive pre-warped and pre-trimmed (assets/v5/scr): a plain rectangle, no mask, no transform */
.scr--baked{-webkit-mask:none;mask:none}
.scr--baked>img{position:absolute;inset:0;width:100%;height:100%;display:block}
.scr--bb>img{opacity:0}
.scr--bb>img.on{opacity:1}

/* ---------- the traveller: one paper plane, scroll-linked across three chapters (home.js), desktop only ---------- */
.traveller{position:fixed;left:0;top:0;z-index:40;width:clamp(84px,6.8vw,120px);height:auto;pointer-events:none;opacity:0;will-change:transform}
@media (max-width:767px),(prefers-reduced-motion:reduce){.traveller{display:none}}

@media (max-width:767px){
  .dk{display:none!important}
  .brk__stage{height:auto!important}
  .brk--two .isl,.ph-isl{position:relative;left:auto!important;right:auto!important;top:auto!important}
  /* phone: ONE big island per screen, bleeding off both edges; the other island arrives in its own band */
  .brk--two .isl,.ph-isl{width:118vw;margin-left:-9vw}
  /* Task D phone: the same pair, same vw geometry relative to each other as his reference, but the whole group starts
     16px under WATCH OUR WORK (the stacked phone statement has no room beside it); the headline follows under the left
     curl's tail, which leaves the screen edge at 82vw */
  .brk--one .brk__stage{padding-top:calc(86vw + 20px)}
  .brk--one .isl--l{left:-19.02vw;top:12.41vw;width:70.95vw}
  .brk--one .isl--r{right:-.33vw;top:0;width:42.79vw}
  .brk--one{padding:16px 0 40px}
  .brk--one .brk__head{position:static;text-align:left;font-size:clamp(34px,10.4vw,46px);padding:0 var(--m);margin:0 0 28px}
  .brk--two{padding:32px 0 24px}
  .brk--two .brk__motto{position:static;text-align:left;font-size:clamp(44px,13.6vw,60px);padding:0 var(--m);margin-bottom:28px}
  .ph-band{display:block;position:relative;overflow:hidden;overflow:clip;background:none;padding:8px 0 16px}
}

/* ---------- 3. services: SIC index rows + Baillat shutter ---------- */
.svc{position:relative;padding:clamp(72px,10vh,120px) var(--m) clamp(112px,15vh,168px);background:none;color:var(--cream)}
.svc__grid{display:grid;grid-template-columns:var(--aside) minmax(0,1fr);column-gap:20px;--aside:clamp(190px,19vw,300px)}
.svc__aside{border-right:1px solid var(--hair);padding-top:4px}
.svc__title,.work__head h2{font:400 clamp(32px,2.8vw,46px)/1.05 "Bookish",Georgia,serif;letter-spacing:-.01em}
.svc__list{list-style:none;position:relative;isolation:isolate;margin-top:clamp(72px,9vh,104px)}
.svc__item{position:relative;margin-top:-1px}
.svc__item::before{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--hair);transform-origin:0 50%;transition:transform .9s var(--out) calc(var(--i) * 70ms)}
.svc__item:first-child{box-shadow:inset 0 1px 0 var(--hair)}
.js .svc__list:not(.is-in) .svc__item::before{transform:scaleX(0)}
/* the shutter: full row, reaching 20px left to the column rule; grows from the top edge, collapses to the bottom */
/* stage 5: one continuous band at the row's exact y, from the viewport's left edge to its right edge (Baillat) */
.svc__item::after{content:"";position:absolute;top:0;bottom:0;left:calc(-1 * (var(--aside) + 20px + var(--m)));right:calc(-1 * var(--m));z-index:-1;background:var(--cream);
  transform-origin:0 50%;transform:scaleX(0);transition:transform .3s var(--out)}
.svc__link{display:grid;grid-template-columns:1fr auto;align-items:start;column-gap:24px;padding:22px 0 24px;color:inherit;
  transition:color .6s var(--out);outline:none}
.svc__name{font:400 var(--svc,96px)/.84 "Bookish",Georgia,serif;text-transform:uppercase;letter-spacing:-.012em;padding-top:.06em;white-space:nowrap;justify-self:start;width:max-content}
.svc__arr{width:clamp(18px,1.6vw,26px);height:auto;aspect-ratio:1;margin-top:.3em;transition:transform .45s var(--out)}
.svc__more{grid-column:1 / -1}
.svc__desc{display:block;font:400 17px/1.4 "Haas Display",sans-serif;margin-top:14px;max-width:60ch}
.svc__ph{display:none}
/* the row's own engraving lives in the left column at the row's exact height. At rest it is blue ink on cream (so the
   column is an illustrated index, never empty); on hover/focus the band wipes in and the cream copy shows on it. */
.svc__still,.svc__visual{position:absolute;top:0;bottom:0;right:calc(100% + 20px);width:calc(var(--aside) + var(--m));pointer-events:none}
.svc__still img,.svc__visual img{position:absolute;left:var(--m);top:4%;width:calc(100% - var(--m) - 24px);height:92%;object-fit:contain;object-position:50% 50%}
.svc__visual{overflow:hidden;background:var(--cream);transform-origin:0 50%;transform:scaleX(0);transition:transform .3s var(--out);z-index:1}
@media (hover:hover) and (min-width:768px){
  .svc__item:hover::after,.svc__item:hover .svc__visual{transform-origin:0 50%;transform:scaleX(1)}
  .svc__item:hover .svc__link{color:var(--blue)}
  .svc__item:hover .svc__arr{transform:rotate(45deg)}
}
@media (min-width:768px){
  .svc__item:focus-within::after,.svc__item:focus-within .svc__visual{transform-origin:0 50%;transform:scaleX(1)}
  .svc__item:focus-within .svc__link{color:var(--blue)}
}
@media (max-width:767px){
  .svc{padding:72px var(--m) 72px}
  .svc__grid{grid-template-columns:minmax(0,1fr)}
  .svc__aside{border:0}
  .svc__list{margin-top:36px}
  .svc__visual{display:none}
  /* stage 7: the row's engraving returns on the phone, 56 px, left of the name (the plainest phone screen joins the world) */
  .svc__still{display:block;position:absolute;left:0;right:auto;top:12px;width:56px;height:56px;bottom:auto;transition:opacity .2s var(--out)}
  .svc__still img{left:0;top:0;width:100%;height:100%}
  .svc__item .svc__link{padding-left:68px}
  .svc__item.is-open .svc__still{opacity:0}
  .svc__link{padding:20px 0 18px;min-height:64px;align-items:center}
  .svc__arr{width:18px;margin-top:0;transform:rotate(90deg)}
  .svc__item::after{inset:0 calc(-1 * var(--m))}
  /* tap to expand: the row opens on the shutter, cream type, its vignette below the line */
  .svc__more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--out)}
  .svc__more-in{overflow:hidden;min-height:0;display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
  .svc__desc{font-size:16px;margin-top:12px;max-width:none;flex:1}
  .svc__ph{display:block;width:34%;max-width:140px;height:auto;margin-top:12px}
  .svc__item .svc__more-in{margin-left:-68px}
  .svc__item.is-open::after{transform-origin:0 50%;transform:scaleX(1)}
  .svc__item.is-open .svc__link{color:var(--blue)}
  .svc__item.is-open .svc__more{grid-template-rows:1fr}
  .svc__item.is-open .svc__arr{transform:rotate(-90deg)}
}
@media (prefers-reduced-motion:reduce){
  .svc__item::after,.svc__visual,.svc__link,.svc__arr,.svc__more,.svc__item::before{transition-duration:0s!important;transition-delay:0s!important}
}

/* ---------- Task E/E2 (26 Oct: the velvet swag, then full width), replaced by Task F (26 Oct, client: "this element is
   taking up too much space / try using the attached element instead / place it right below the distribution button"):
   his flat wave shelf (cream top bar, blue velvet in two waves, 5.12:1) is the full-bleed break. width:100% of .swag (a
   full-width child of main) so the bar's two ends sit on the screen edges at every width; height = width / 5.12. The break
   is compact: --sa clear under the DISTRIBUTION rule (desktop ~20 px, phone 12), --sb clear above "Featured work" (~30 px
   at 1440, phone 16). .svc and .work keep their paddings (--ga, --gb, same expressions); .swag's negative margins pull it
   into them. overflow-x:clip keeps the shadow at the ends from creating horizontal scroll. No transform in CSS: home.js
   drifts it by y <= 6 px (phone 3 px). ---------- */
.swag{position:relative;z-index:3;pointer-events:none;overflow-x:clip;
  --ga:clamp(112px,15vh,168px);--gb:clamp(72px,8vw,128px);--sa:clamp(12px,1.4vw,24px);--sb:clamp(16px,2.1vw,40px);
  margin:calc(var(--sa) - var(--ga)) 0 calc(var(--sb) - var(--gb))}
.swag__img{display:block;width:100%;height:auto;max-width:none;filter:drop-shadow(0 5px 8px rgba(0,6,44,.5))}
@media (max-width:767px){
  .swag{--ga:72px;--gb:64px;--sa:12px;--sb:16px}   /* the phone paddings of .svc (bottom) and .work (top) */
  .swag__img{filter:drop-shadow(0 3px 5px rgba(0,6,44,.5))}
}

/* ---------- 4. featured work (Task G, 26 Oct, client: "implement this idea on the featured work section", his sketch +
   the Drive frame hf_20261025_100557, read in ../19-featured-frame-reading.md). Replaces the Task B sliding wall
   (work/pre-frame/). The frame is 2609x1396 (1.869:1); its open stage runs x 0.20-0.70 of its width (tower inner edge to the
   crest/fern dome) and down to y ~0.80-0.86 of its height (the wave's inner top). Desktop: --fw wide, its stage centred on
   the page (left = 50% - .45fw), the grid as wide as the stage + one column, so each edge column tucks half a tile
   over the tower / the dome, as drawn; the bottom row sits on the wave (grid bottom = frame top + .86H). Tiles paint over
   the frame (z), the frame bleeds off the right edge and 1vw into break two. Below 1024: 4 / 2 columns of tiles, then the
   whole frame under them as a cradle for the one wide film tile (tower fully on screen at the left, wave along the bottom). */
.work{position:relative;z-index:3;overflow-x:hidden;overflow-x:clip;background:none;color:var(--cream);
  --fw:clamp(1300px,118vw,2150px);--H:calc(var(--fw) / 1.8689);--fg:clamp(10px,.9vw,16px);
  --c:calc((var(--fw) * .5 - 5 * var(--fg)) / 5);--rt:clamp(10px,1.4vw,22px);
  --k:1;
  padding:clamp(24px,2.5vw,40px) var(--m) calc(var(--H) * .14 - 1vw);margin-top:calc(-1 * clamp(48px,6vw,110px))}
/* nav Work lands on the section top: the heading always clears the fixed pill */
.work{scroll-margin-top:max(0px, calc(var(--hdr) + 12px - clamp(24px,2.5vw,40px)))}
.ft-stage{position:relative;display:flex;flex-direction:column;align-items:center;margin:0 auto;
  width:calc(var(--fw) * .5 + var(--c));min-height:calc(var(--H) * .84)}
.ft-frame{position:absolute;z-index:2;left:calc(50% - var(--fw) * .45);bottom:calc(var(--H) * -.14);
  width:var(--fw);height:auto;max-width:none;pointer-events:none;user-select:none;filter:drop-shadow(0 6px 10px rgba(0,6,44,.45))}
.work__head{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center;
  margin:calc(var(--H) * .03) 0 auto;padding-bottom:clamp(24px,2.4vw,44px)}
.work__head h2{font-size:clamp(40px,3.6vw,64px)}
.ft-grid{position:relative;z-index:1;display:grid;width:100%;grid-template-columns:repeat(6,minmax(0,1fr));
  grid-auto-rows:var(--c);gap:var(--fg)}
/* each tile is the brand container: 2px corners, one soft corner (top-right; the right-hand column mirrors it, as drawn) */
.ft{position:relative;display:block;min-width:0;border-radius:2px var(--rt) 2px 2px;-webkit-tap-highlight-color:transparent;
  transition:opacity 700ms var(--ease),transform 700ms var(--ease);transition-delay:calc(var(--i,0) * 45ms)}
.ft--r{border-radius:var(--rt) 2px 2px 2px}
.ft--w{grid-column:span 2}
.ft__m{position:absolute;inset:0;display:block;overflow:hidden;border-radius:inherit;background:#06217f;
  box-shadow:0 6px 14px rgba(0,6,44,.35);transition:transform 220ms var(--ease)}
.ft__m img,.ft__m video{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;object-position:var(--pos,50% 50%)}
.ft__m video{opacity:0;transition:opacity 300ms linear}
.ft__m video.on{opacity:1}
@media (hover:hover) and (pointer:fine){.ft:hover .ft__m{transform:translateY(-6px)}}
.ft:focus-visible{outline:2px solid var(--cream);outline-offset:3px}
.ft:focus-visible .ft__m{transform:translateY(-6px)}
/* one-time rise on entry (home.js adds .is-in once); without JS nothing is hidden */
.ft-grid.rv .ft{opacity:0;transform:translateY(18px)}
.ft-grid.rv.is-in .ft{opacity:1;transform:none}
@media (max-width:1023px){
  .work{--fw:106vw;--H:calc(var(--fw) / 1.8689);--fg:12px;padding:clamp(64px,8vw,96px) var(--m) calc(var(--H) * .18 - 1vw)}
  .ft-stage{display:block;width:auto;min-height:0}
  .ft-frame{left:calc(-1 * var(--m) - var(--fw) * .02);bottom:calc(var(--H) * -.18)}
  .work__head{margin:0 0 clamp(28px,4vw,40px)}
  .ft-grid{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:auto}
  .ft{aspect-ratio:10/9}
  .ft--r{border-radius:2px var(--rt) 2px 2px}
  .ft--xt{display:none}
  /* the wide film sits in the frame's mouth: centred on the stage (x .43fw from the screen edge), its foot on the wave */
  .ft--w{grid-column:1/-1;aspect-ratio:16/9;width:calc(var(--fw) * .44);justify-self:start;
    margin:calc(var(--H) * .34 + 3vw - var(--fg)) 0 0 calc(var(--fw) * .21 - var(--m))}
}
@media (max-width:767px){
  .work{--fg:10px;--rt:12px;padding-top:64px;scroll-margin-top:calc(var(--hdr) + 12px - 64px)}
  .ft-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ft--xp{display:none}
}
@media (prefers-reduced-motion:reduce){
  .ft,.ft__m,.ft__m video{transition:none}
  .ft-grid.rv .ft{opacity:1;transform:none}
}

/* 26 Oct (client: "element above the video layer"; "rows keep moving: first left, next right, next left"): the frame (z 2)
   now paints OVER the tiles; each row slides under it. Window = stage + one column each side, track = 4 copies of the row,
   one period = row width + gap, so the loop is seamless. Desktop only; paused off screen is not needed (compositor transform). */
.ft-row,.ft-track{display:contents}
.ft-clone{display:none}
@media (min-width:1024px){
  /* 27 Oct (client: only 6-8 cards visible at a time, rows keep moving): big tiles in a narrow window, ~2.7 tiles per row */
  .work{--c:clamp(300px,37vw,760px);--h:calc(var(--c) * .68)}
  .ft-grid{display:flex;flex-direction:column;gap:var(--fg)}
  .ft-stage{width:100%}
  .ft-row{display:block;position:relative;height:var(--h);width:100vw;margin:0 0 0 calc(50% - 50vw);overflow-x:clip}
  .ft-track{display:flex;gap:var(--fg);width:max-content;height:100%;--P:calc(var(--n,6) * (var(--c) + var(--fg)));
    margin-left:calc(-1 * var(--P));animation:ft-l var(--dur,70s) linear infinite;will-change:transform}
  .ft-row--2 .ft-track{animation-name:ft-r;--dur:80s}
  .ft-row--3 .ft-track{--dur:90s}
  .ft-track>.ft{flex:none;width:var(--c);height:var(--h)}
  .ft-clone{display:block}
  .ft-row:hover .ft-track,.ft-row:focus-within .ft-track{animation-play-state:paused}
  @keyframes ft-l{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(-1 * var(--P)),0,0)}}
  @keyframes ft-r{from{transform:translate3d(calc(-1 * var(--P)),0,0)}to{transform:translate3d(0,0,0)}}
}
@media (min-width:1024px) and (prefers-reduced-motion:reduce){
  .ft-track{animation:none;margin-left:var(--c)}.ft-clone{display:none}
}

/* ---------- 6. ending: the scene rises, its ground is the footer ---------- */
.end{position:relative;z-index:1;background:none;overflow-x:clip;padding-top:0}
.end__scene{position:relative;width:100%;aspect-ratio:1536/260;z-index:1;margin-top:-6vw}   /* suede pass: no flood to rise, so the empty run before the footer is shorter (was 1536/420) */
.end__world{position:absolute;inset:0}
/* the engraving is used as a MASK over a flat #002FA7 fill: its solid ground is therefore the exact footer colour.
   Stage 3 mask: the drawn ground line now continues to the right edge (no flat step where it met the footer). */
/* adapted: the drawn ground line (a mask) becomes a flat #002FA7 rise from 42 % of the scene; home.js FLAT matches it */
.end__art{position:absolute;left:0;right:0;top:42%;bottom:0;background:none}   /* suede pass: no flood, the whole page is the suede */
.scr--cin .scr__in{background:var(--blue)}
/* the footer is at least a full screen, so the last frame is all ultramarine (no sliver of the scene above it) */
.foot{position:relative;z-index:2;margin-top:-2px;background:none;color:var(--cream);padding:calc(var(--hdr) + clamp(12px,2.5vh,32px)) var(--m) clamp(20px,3vh,32px);
  min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:space-between}
.foot__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--g);align-items:start}
.foot__motto{grid-column:1 / span 6;font:400 clamp(44px,4.6vw,80px)/.9 "Bookish",Georgia,serif;letter-spacing:-.01em;text-transform:uppercase}
.foot__side{grid-column:8 / span 5}
.foot__form{display:flex;gap:16px;align-items:center}
.foot__form input{flex:1;min-width:0;height:48px;background:transparent;border:0;border-bottom:1px solid rgba(242,240,231,.55);color:var(--cream);
  font:400 16px/1 "Haas Display",sans-serif;border-radius:0;padding:0 2px}   /* stage 7: sentence case, no label styling; 16px = no iOS zoom */
.foot__form input::placeholder{color:rgba(242,240,231,.72)}
.foot__form input:focus{outline:none;border-bottom-color:var(--cream)}
.foot__thanks{margin-top:18px;font:400 17px/1.45 "Bookish",Georgia,serif}
.foot__thanks[hidden]{display:none}
.foot__links{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:40px;font:500 15px/1.2 "Haas Display",sans-serif}
.foot__links a{transition:opacity 180ms var(--ease)}
@media (hover:hover){.foot__links a:hover{opacity:.6}}
.foot__loc{margin-top:20px;font:400 17px/1.45 "Bookish",Georgia,serif;opacity:.86}
/* stage 7: the wordmark spans the grid wherever the screen is tall enough, and the whole footer still fits one screen */
.foot__mark{display:block;width:min(calc(100vw - 2 * var(--m)),calc((100svh - 312px) * 2.006));height:auto;aspect-ratio:2504/1248;margin-top:clamp(28px,4vh,56px);color:var(--cream)}
@media (max-width:767px){
  .end__scene{margin-top:0;aspect-ratio:390/160}   /* adapted: flat rise, no cinema screen to keep in frame */
  .foot{padding:calc(var(--hdr) + 16px) var(--m) 0;min-height:auto;justify-content:flex-start}
  .foot__grid{display:block}
  .foot__motto{font-size:clamp(44px,13vw,58px)}
  .foot__side{margin-top:32px}
  .foot__form{flex-direction:column;align-items:stretch;gap:20px}
  .foot__form input{flex:none}
  .foot__form .btn{align-self:flex-start}
  .foot__links{margin-top:28px;gap:4px 24px}
  .foot__links a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px}
  .foot__mark{width:100%;margin-top:56px;margin-bottom:-4%}
}

/* ---------- stage 9: keyboard focus rings that show on every ground ----------
   The focusable header lives in .hdr__base (cream bar, blue ink); over blue grounds the inverted copies sit on top of it,
   so home.js mirrors the focused item onto them (.is-fv) and they draw a cream ring. */
.hdr__base a:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
.hdr__inv .is-fv{outline:2px solid var(--cream);outline-offset:4px}
.hdr__inv .btn.is-fv{outline-color:var(--cream)}
.foot__form input:focus-visible{outline:2px solid var(--cream);outline-offset:6px}
.foot a:focus-visible,.foot .btn:focus-visible{outline:2px solid var(--cream);outline-offset:4px}
.hero .btn:focus-visible,.work .btn:focus-visible,.hdr__base .hdr__cta:focus-visible{outline:2px solid var(--cream);outline-offset:4px}
.svc__link:focus-visible{outline:2px solid var(--blue);outline-offset:-6px}   /* suede pass: the focused row wears the cream shutter */
@media (max-width:767px){.svc__item:not(.is-open) .svc__link:focus-visible{outline-color:var(--cream)}}
/* stage 9: before home.js clips the inverted header copies, the bar already wears the hero's ground (no cream strip in
   the first frames on a slow CPU) */
/* ================= stage 9b (Akash, 24 Oct): no negatives. The hero and the featured work sit on CREAM, and every
   engraving is a positive (ultramarine ink, assets/v9 = the same art with its ink recoloured, nothing generated).
   Only the flood footer is blue, and it carries type only. ================= */
:root{--hero-ground:transparent}
.hdr__inv--top{display:none}
/* the hero ends in the drawn island underside (17) as a positive engraving hanging into the next cream section */
.edge17{position:absolute;left:0;width:100%;height:var(--fringe-h);object-fit:cover;object-position:50% 0;pointer-events:none;z-index:3;display:block}
/* featured work: see section 4 (rococo frames on cream) */
/* services (Akash): on hover / keyboard focus the row's engraving is smoothly replaced by real WYRD work for that service
   (crossfade, no shutter on the media, no layout shift); the engraving returns on leave */
.svc__visual{transform:none!important;opacity:0;background:none;transition:opacity .36s cubic-bezier(.23,1,.32,1)}
.svc__still{transition:opacity .36s cubic-bezier(.23,1,.32,1)}
.svc__visual img,.svc__visual video{position:absolute;left:var(--m);top:6%;width:calc(100% - var(--m) - 24px);height:88%;object-fit:cover;object-position:50% 50%;display:block}
/* services fill (Akash, after Baillat): on desktop the hovered row's media takes the WHOLE left column box: flush to the
   viewport's left edge (x 0), right up to the column's vertical rule, the row's full height, cover, no margin or radius,
   opaque over the band; the blue shutter carries on to the right of it */
@media (min-width:768px){
  .svc__visual{z-index:2;background:var(--cream)}
  .svc__visual img,.svc__visual video{left:0;top:0;width:100%;height:100%;border-radius:0}
  .svc__visual video[data-svc-src*="mm01"]{object-position:50% 40%}   /* MM film 01 (25-31 s): keep the subject in the cover crop */
}
.svc__visual .svc__top,.svc__phw .svc__top{object-position:50% 0}
@media (hover:hover) and (min-width:768px){.svc__item:hover .svc__visual{opacity:1}.svc__item:hover .svc__still{opacity:0}}
@media (min-width:768px){.svc__item:focus-within .svc__visual{opacity:1}.svc__item:focus-within .svc__still{opacity:0}}
.svc__phw{display:none}
@media (max-width:767px){
  .svc__ph{display:block!important;position:absolute;inset:0;width:100%!important;max-width:none!important;height:100%!important;margin:0!important;object-fit:cover}
  .svc__phw{display:block;position:relative;flex:none;width:38%;max-width:160px;aspect-ratio:4/3;overflow:hidden;margin-top:12px}
}
@media (prefers-reduced-motion:reduce){.svc__visual,.svc__still{transition:none!important}}

/* ================= text sections (24 Oct, Akash: "add a short about section here / a text section here too").
   SIC rhythm: a calm text section, then the illustration break drifts in. Both sit INSIDE the existing cream gaps:
   the about takes the open sky left of island 06 and above island 05 (break one is pulled up under it); the second
   takes the open sky right of island 07, under island 08 and above the ending's right half (pulled up into break two,
   the ending pulled up under it). Bookish statement + one Haas sentence; uppercase only on the button. ================= */
.say{position:relative;z-index:4;padding:0 var(--m);background:none;color:var(--cream)}
.say__lede{font:400 clamp(34px,3.4vw,56px)/1.08 "Bookish",Georgia,serif;letter-spacing:-.012em;text-wrap:pretty}
.say__sub{font:400 clamp(17px,1.25vw,20px)/1.45 "Haas Display",sans-serif;margin-top:clamp(18px,1.7vw,30px);max-width:34em}
.say__btn{margin-top:clamp(24px,2.3vw,40px)}
.say .btn:focus-visible{outline:2px solid var(--cream);outline-offset:4px}
/* the scroll-written statement: home.js wraps every glyph (the plain sentence stays in a .vh copy for readers) */
.say__w{white-space:nowrap}
.say__c{display:inline}
/* about: below the hero's hanging roots (7vw), in the left 52 % (island 06's ink starts at ~54vw) */
.say--about{padding-top:clamp(28px,3vw,56px)}   /* adapted: no roots hang from the hero now */
.say--about .say__body{max-width:calc(52vw - var(--m))}
/* Task D: break one's stage starts right at the about's last line (WATCH OUR WORK's bottom); the elements reach up beside
   the statement from there (see the break-one block) */
/* two: a right-hand column (x >= 50vw) starting 2.7vw under island 08's ink; the ending is pulled up under it, but never
   higher than before relative to break two (min-height), so island 07 and the bulb keep their hand-off */
.say--two{margin-top:-14vw;margin-bottom:-4vw;min-height:18vw}
.say--two .say__body{margin-left:calc(50vw - var(--m))}
.say--two .say__sub{max-width:30em}
/* Task C (refs/textbox2-full.png): his arrow runs 154 css px down at 1512 = 10.2vw; the block moves by that without
   changing the flow (the ending stays where it was, so the gap to START A PROJECT closes by the same amount) */
.say--two .say__body{transform:translateY(10.2vw)}
@media (max-width:767px){
  .say__lede{font-size:clamp(28px,8.2vw,34px);line-height:1.1;letter-spacing:-.01em}
  .say__sub{font-size:17px;margin-top:18px}
  .say__btn{margin-top:26px}
  .say--about{padding-top:36px}
  .say--about .say__body{max-width:none}
  .say--two{margin:0;min-height:0;padding:44px var(--m) 12px calc(var(--m) + 10vw)}
  .say--two .say__body{margin-left:0}
}
/* text sections, fine tune from the clearance probe (shots-text/geom.py): the statement never runs into island 06 on
   very wide screens; tablets (type at its 34px floor is relatively larger) get a little more air round the kite and island 08 */
.say--about .say__lede{max-width:15em}
@media (min-width:768px) and (max-width:1023px){.say--two{margin-top:-12.8vw}}

/* ================= Blue suede continuity pass (26 Oct 2026, client: "a constant blue suede texture throughout the
   entire homepage ... no hard section breaks ... elements bleeding onto adjacent sections"). The suede itself is the html
   fixed background layer; every section is transparent on it. Below: the light layer, the relief, the parallax
   hints and the small contrast aids the new ground needs. ================= */
main{position:relative;z-index:1}
/* a fixed light under the page: one broad pool of light and a soft vignette, like the client's refs (lighter centre,
   darker edges). The texture and light stay still while content moves above them. */
.suede{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 46%,rgba(0,10,60,0) 52%,rgba(0,8,48,.30) 100%),
    #0230A8 url(assets/suede/suede-tile-860.webp) 0 0/var(--suede) var(--suede) repeat}
.suede__light{position:absolute;left:-10%;top:0;width:120%;height:260vh;
  background:radial-gradient(42% 22% at 28% 14%,rgba(92,132,255,.13),rgba(92,132,255,0) 100%),
             radial-gradient(46% 24% at 76% 46%,rgba(92,132,255,.10),rgba(92,132,255,0) 100%),
             radial-gradient(40% 20% at 34% 80%,rgba(92,132,255,.11),rgba(92,132,255,0) 100%)}
/* break two + One team: the tone-on-tone relief (Drive 25, the client's ref 4). It starts under the globe plate's
   drapery and fades out under One team, so neither seam is a line. */
.relief{position:absolute;left:0;width:100%;top:1vw;z-index:0;margin:0;pointer-events:none;will-change:transform}
.relief img{display:block;width:100%;height:auto}
.brk--two .brk__stage{z-index:1}
/* contrast aid (suede pass): the relief's lacquer edge runs under the motto and One team; a wide, soft shadow of the
   ground colour keeps cream >= 4.5:1 on its lightest pixels. No change to size, weight or tracking. */
.brk--two .brk__motto,.say--two .say__body{text-shadow:0 0 28px rgba(0,14,70,.55),0 0 8px rgba(0,14,70,.35)}
/* the blue velvet service vignettes keep their silhouette on the blue: a soft contact shadow, no outline */
.svc__still img{filter:drop-shadow(0 6px 10px rgba(0,6,40,.5))}
/* islands and the plate sit on the suede with the same soft contact shadow as the frame */
.isl img{filter:drop-shadow(0 18px 26px rgba(0,6,44,.42))}
@media (max-width:767px){
  .relief{top:auto;bottom:-30vw;left:auto;right:0;width:100%}
  .brk--two .brk__motto{position:relative;z-index:2}   /* the motto is static on the phone: lift it over the relief */
  .isl img{filter:drop-shadow(0 10px 16px rgba(0,6,44,.42))}
}

/* Home button added (27 Oct): five items must fit the pill on 320px phones */
@media (max-width:359px){.hdr__nav{gap:0;padding:5px 4px}.hdr__nav a{padding:0 11px}.hdr__nav .hdr__contact{padding:0 10px 0 12px}}

/* 27 Oct (client): the five velvet statue vignettes beside the services list are removed (markup deleted). The phone no longer reserves their 56px. */
@media (max-width:767px){.svc__item .svc__link{padding-left:0}}