/* White Room V2 — site.css * One stylesheet for the whole site. No frameworks, no build step. * Order: tokens · base · type · chrome · components · motifs · motion · responsive * Every value here is law from WRS_V2_Brand_and_Build_Brief.md. * Sections are marked so you can find things; do not reorder them. *//* ============================================================ 1 · TOKENS ============================================================ */ :root{ --surface:#F8F8F7; --ink:#1C1A17; --muted:#6E675F; --verm:#C0392B; --gold:#B8965A; --ez:cubic-bezier(.35,.35,0,1); --ezi:cubic-bezier(.69,0,0,1); --display:'Bodoni Moda',Didot,'Times New Roman',serif; --oa-cubic:cubic-bezier(.35,.35,0,1); --oa-fast:cubic-bezier(.2,.75,.35,1); --oa-smooth:cubic-bezier(.5,0,.3,1); --body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; }/* ============================================================ 2 · BASE ============================================================ */ *{box-sizing:border-box} html{scroll-behavior:auto} body{margin:0;background:var(--surface);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.68;-webkit-font-smoothing:antialiased} /* the ground: window light on a wall, fixed, behind the whole page. Measured mean 239 against the #F8F8F7 surface at 248, so it reads as light in a room rather than a second ground. */ body:before{content:"";position:fixed;inset:-25% 0;z-index:-2;pointer-events:none; background:var(--surface) url(../img/texture/texture-window-light-wall.webp) center/cover no-repeat} img,svg{display:block} a{color:var(--ink)} .wrap{max-width:1200px;margin:0 auto;padding:0 var(--gut)} .label{font-family:var(--body);font-weight:500;font-size:13px;color:var(--muted)} .hairline{border:0;border-top:1px solid rgba(28,26,23,.14);margin:0} /* skip link: off-screen until it takes focus. Without this rule it prints as visible text at the top of every page. */ .skip{position:absolute;left:-9999px;top:0;z-index:300;background:var(--ink);color:var(--surface); padding:12px 18px;font-size:14px;text-decoration:none;border-radius:0} .skip:focus{left:0} /* buttons. These were stripped with the dead rules by mistake — the enquiry form's submit is .btn.primary, so without them it renders as a raw browser button. */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px; font-family:var(--body);font-weight:500;font-size:15px;line-height:1; padding:15px 28px;border-radius:0;border:1px solid var(--ink); text-decoration:none;cursor:pointer;background:transparent;color:var(--ink); transition:background-color .45s var(--ez),color .45s var(--ez),border-color .45s var(--ez)} .btn.primary{background:var(--ink);color:var(--surface)} .btn.primary:hover{background:transparent;color:var(--ink)} .btn.ghost{background:transparent;color:var(--ink)} .btn.ghost:hover{background:var(--ink);color:var(--surface)} .btn:focus-visible{outline:2px solid var(--verm);outline-offset:3px} .btn[disabled]{opacity:.5;cursor:default} /* ============================================================ 3 · SITE CHROME (header, lockup, menu) ============================================================ *//* ============================================================ 4 · COMPONENTS AND MOTIFS Each block below is a reusable piece. Patterns in WordPress map one-to-one onto these. ============================================================ *//* rosette: four-petal tile flower, hairline only, drawn from the Level 2 floor */ .rosette{display:block;width:26px;height:26px;margin:0 auto;opacity:.85} .rosette svg{width:100%;height:100%;fill:none;stroke:var(--muted);stroke-width:1;vector-effect:non-scaling-stroke}/* numbered chapter rail: the stages, strung along a hairline */ @media (max-width:700px){ .rail ol{flex-direction:column;align-items:flex-start;gap:22px} .rail li{flex-direction:row;align-items:center;gap:14px} .rail .line{display:none} .rail .stage{text-align:left} }/* mega word: the page's name, oversized, sitting across the frame *//* chapter menu: huge display words on an ordered path, never scattered */ .chapters{position:relative;overflow:hidden;position:relative;padding:14vh 0 10vh} .chapters .thread-arc{position:absolute;inset:0;pointer-events:none} .chapters .thread-arc path{fill:none;stroke:var(--verm);stroke-width:1;opacity:.5;vector-effect:non-scaling-stroke} .chapters ol{list-style:none;margin:0;padding:0 var(--gut);position:relative;z-index:2} .chapters li{display:flex;align-items:baseline;gap:clamp(10px,2vw,26px); margin-left:calc(var(--i,0) * clamp(0px, 3.2vw, 62px));padding:.18em 0} .chapters .no{font-family:var(--display);font-style:italic;font-size:40px;color:var(--muted);flex:0 0 auto} .chapters .name{font-family:var(--display);font-size:clamp(40px,6.4vw,104px);line-height:1;color:var(--ink); text-decoration:none;transition:color .5s var(--ez)} .chapters li:hover .name{color:var(--verm)} .chapters .from{font-family:var(--body);font-size:14px;color:var(--muted);flex:0 0 auto} .chapters .utility{margin:8vh 6vw 0;padding-top:26px;border-top:1px solid rgba(28,26,23,.14); display:flex;flex-wrap:wrap;gap:8px 22px;font-size:14px;color:var(--muted)} .chapters .utility a{color:var(--muted);text-decoration:none} .chapters .utility a:hover{color:var(--ink)} @media (max-width:820px){ .chapters li{margin-left:0} }/* full-screen form: the page is replaced, not covered. Surface fills the viewport, the halo light sits behind, chrome floats at the corners. */ .modal{position:fixed;inset:0;z-index:200;display:none} .modal[open]{display:block} .modal .scrim{position:absolute;inset:0;background:var(--surface);opacity:0;transition:opacity .7s var(--ez)} .modal.in .scrim{opacity:1} .modal .panel{position:absolute;inset:0;display:grid;place-items:center;padding:12vh 6vw 8vh;overflow:auto} .modal .sheet{position:relative;width:min(1180px,100%);background:transparent;border-radius:0; padding:0;opacity:0;transform:translateY(28px);transition:opacity .8s var(--ez),transform .8s var(--ez)} .modal.in .sheet{opacity:1;transform:none} .modal .x{position:fixed;top:26px;right:5vw;width:40px;height:40px;border:0;background:transparent;cursor:pointer;color:var(--ink);z-index:3} .modal .x:before,.modal .x:after{content:"";position:absolute;left:6px;right:6px;top:16px;height:1px;background:currentColor} .modal .x:before{transform:rotate(45deg)} .modal .x:after{transform:rotate(-45deg)} .modal .sent{display:none;text-align:center;padding:8vh 0} .modal.done .sent{display:block} .modal .sent p{font-family:var(--display);font-size:clamp(40px,3.4vw,48px);line-height:1.2;margin:0 0 14px} .modal .sent small{color:var(--muted);font-size:14px} .modal .closeword{position:fixed;top:26px;left:5vw;border:0;background:transparent;cursor:pointer; font-family:var(--body);font-weight:500;font-size:15px;color:var(--muted);z-index:3;padding:6px 2px; transition:color .5s var(--ez)} .modal .closeword:hover{color:var(--ink)}/* the fan: four portraits start stacked behind the word, then spread into a row *//* arch bloom: the band opens from an arch aperture to full bleed as you scroll. Refinements over a plain scale: a soft vignette inside the arch, a hairline rim that fades as the arch passes the viewport, and a gentle counter-drift on the photograph so it reads as depth rather than zoom. *//* A photo slot holding a real photograph: the hatch is only ever a stand-in, so it is switched off the moment an is present. Object-fit cover keeps the frame filled while the arch scales; the transform stays on the wrapper. */ .photo.real{background:none} .photo.real img{width:100%;height:100%;object-fit:cover;display:block} .photo.real.low img{object-position:50% 34%}/* departure arch: the inverse of the bloom. The full-bleed world contracts back into a doorway as the page ends, the words riding inside it. */ .depart{position:relative;height:210vh} .depart .stage{position:sticky;top:0;height:100vh;display:grid;place-items:center;overflow:hidden} .depart .frame{position:relative;width:var(--w,100%);height:var(--h,100%);overflow:hidden; border-radius:var(--r,0)} .depart .frame .photo{position:absolute;inset:-6%;background: repeating-linear-gradient(135deg,rgba(28,26,23,.07) 0 14px,rgba(28,26,23,.02) 14px 28px); transform:scale(var(--cs,1))} .depart .frame .vig{position:absolute;inset:0;pointer-events:none; background:radial-gradient(120% 90% at 50% 42%, rgba(28,26,23,0) 40%, rgba(28,26,23,.3) 100%); opacity:var(--vig,0)} .depart .frame .rim{position:absolute;inset:0;pointer-events:none;border:1px solid rgba(248,248,247,.5); border-radius:inherit;opacity:var(--rim,0)} .depart .words{position:absolute;left:50%;top:50%;translate:-50% -50%;width:min(30ch,80vw);text-align:center;z-index:3; color:var(--surface)} .depart .words .permanence{color:inherit;margin:0;font-size:clamp(24px,2.4vw,34px);line-height:1.34} .depart .words .archmark{border-color:rgba(248,248,247,.8)} .after{padding:12vh 6vw 14vh;text-align:center} @media (max-width:700px){ .depart{height:180vh} } /* window row: five arched hairlines, the bookshelf rhythm *//* shutter lines: louvres as a section divider *//* chapter numerals: the book made navigable *//* mat rule: the double line from print matting *//* arch-framed portraits */ .card{border-radius:50% 50% 0 0 / 22% 22% 0 0;overflow:hidden}/* 1927 cartouche *//* the rest of the studio: named, no portraits */ .studio{padding:4vh 0 12vh} @media (max-width:700px){ .fan .card2{width:44vw} .studio .row{flex-direction:column;gap:2px} .studio .row .role{text-align:left} }/* ---- thread: the vermillion stitch (Alison's album thread) ---- The path MUST have fill:none or the browser fills the curve solid. */ .thread{position:absolute;inset:0;pointer-events:none;z-index:1; transform:translateX(calc(var(--mx,0)*10px));transition:transform 1.2s var(--ez)} .thread path{fill:none;stroke:url(#vgrad);stroke-width:1.3;vector-effect:non-scaling-stroke}/* Safety net: decorative SVG never fills by default. *//* ---- arch band caption row and the living-building line ---- *//* ============================================================ 5 · MOTION All choreography is gated on html.anim, which site.js adds only when the visitor has not asked for reduced motion. ============================================================ *//* ================= choreography (gated on html.anim) ================= */ .anim [data-reveal]{opacity:0;transform:translateY(38px);transition:opacity 1.5s var(--ez),transform 1.5s var(--ez);transition-delay:calc(var(--d,0)*.12s)} .anim [data-reveal].in{opacity:1;transform:none} .anim .split .w{display:inline-block;overflow:hidden;vertical-align:top} .anim .split .ch{display:inline-block;opacity:0;filter:blur(7px);transform:translateY(.65em) scale(1.7) skew(9deg,4deg);transform-origin:0 100%; transition:opacity 1.4s var(--ez),transform 1.4s var(--ez),filter 1.4s var(--ez); transition-delay:calc(var(--rand)*.09s + var(--ci)*.012s)} .anim .split.in .ch{opacity:1;filter:blur(0);transform:none} .anim .rl{clip-path:inset(0 0 102% 0);transform:translateY(1.1em);transition:clip-path 1.4s var(--ez),transform 1.4s var(--ez);transition-delay:calc(var(--d,0)*.12s)} .anim .rl.in{clip-path:inset(-8% -12% -8% -12%);transform:none} .reveal-off .rl{clip-path:none!important;transform:none!important;opacity:1!important} .reveal-off .display .wd > span{transform:none!important} .reveal-off [data-reveal]{opacity:1!important;transform:none!important} .anim .drift{transform:translateY(calc(var(--p,0)*var(--dr,-46px)))} .anim .band, .anim .card, .anim .thread, .anim .inner{will-change:transform}/* ============================================================ 6 · REDUCED MOTION AND RESPONSIVE ============================================================ */ /* 2.7.3 (El 2 Nov): the "no transitions, no animations when the phone says Reduce Motion" rule is switched off: El decided the page animates whatever that setting says (see WRSC_IGNORE_REDUCED_MOTION in site.js). @media (prefers-reduced-motion: reduce){ *{transition:none !important;animation:none !important} } */ @media (max-width:900px){ .grid{grid-template-columns:repeat(2,1fr)} .story p.offset{margin-left:0} .duo{height:auto;display:flex;flex-direction:column;gap:18px;align-items:center} .card{position:static;transform:rotate(-3deg)} .card.b{transform:rotate(2.5deg)} .mega .row.two{margin-left:.35em} }/* ============================================================ 7 · HOMEPAGE COMPONENTS Added 10 Aug 2026. Each block below is a WordPress block pattern. ============================================================ *//* ---------- identity hero: the video, full viewport, lockup centred ---------- Height is fixed at 100svh with the video absolutely placed inside it, so the first paint reserves the space and CLS stays at zero whether or not the video has loaded. The poster is the first frame, so the still and the first frame of playback are the same picture and there is no flash on start. */ .vhero{position:relative;height:100svh;min-height:560px;overflow:hidden;display:grid;place-items:center} .vhero video,.vhero .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}/* The veil. Measured, not guessed: across this clip the centre of frame runs from 62 to 248 mean luminance, so on the brightest frames white type sits on near-white video at roughly 1:1. A gradient cannot fix that, because the lockup lives in the middle where a top-and-bottom gradient is transparent. So: one uniform veil across the whole frame, which is a full-frame wash with no discernible edge and therefore legal under the invisible-scrim rule, plus a soft gradient at top and bottom for the nav and the scroll cue. At .42 every frame but the brightest clears 3:1 for large type. The real fix is grading the clip down on re-export, not stacking more ink over it. */ .vhero .scrim{position:absolute;inset:0;pointer-events:none;background:rgba(28,26,23,.42)} .vhero .scrim.edges{background:linear-gradient(180deg,rgba(28,26,23,.34) 0%,rgba(28,26,23,0) 26%,rgba(28,26,23,0) 58%,rgba(28,26,23,.38) 100%)} .vhero .plate{position:relative;z-index:2;display:grid;place-items:center;padding:0 6vw;width:100%}/* the circle: a gold hairline ring holding the mark and the line */ .vhero .ring{position:relative;display:grid;place-items:center; width:min(78vmin,720px);aspect-ratio:1/1} .vhero .ring-line{position:absolute;inset:0;width:100%;height:100%;overflow:visible} .vhero .ring-line circle{fill:none;stroke:var(--gold);stroke-width:3.4; vector-effect:non-scaling-stroke;opacity:.58} .vhero .ring-in{position:relative;text-align:center;padding:0 13%;width:100%}/* the mark stays solid; everything else sits back */ .vhero .wordmark{width:min(300px,54vmin);height:auto;margin:0 auto; filter:drop-shadow(0 1px 16px rgba(28,26,23,.6))} .vhero .rule{display:block;width:min(300px,54vmin);height:1px;background:var(--gold); margin:clamp(9px,1.3vmin,15px) auto 0;opacity:.7} .vhero .line{font-family:var(--body);font-weight:200;text-transform:uppercase; font-size:clamp(28px,5vmin,52px);letter-spacing:.15em;line-height:1.22; color:var(--surface);opacity:.74;margin:clamp(15px,2.6vmin,30px) 0 0; text-shadow:0 1px 14px rgba(28,26,23,.55)} .vhero .cue{position:absolute;left:50%;bottom:4vh;translate:-50% 0;width:22px;height:30px; border:1.5px solid var(--verm);border-bottom:0;border-radius:0;z-index:2} @media (max-width:700px){ .vhero .ring{width:min(80vmin,440px)} }/* ---------- heritage ---------- *//* ================= homepage sections, rebuilt 8 Sep ================= Heading pattern throughout: .seo is the small muted heading tag carrying the searchable words; .display is the large line beneath it. Visual and document hierarchy point opposite ways on purpose. .seo must never be hidden. ------------------------------------------------------------------ *//* The searchable line and the display line are one heading block. Bound tight together with air above, so the small line never reads as an orphan floating between sections. */ .seo{font-family:var(--body);font-weight:400;font-size:clamp(18px,1.9vw,25px);letter-spacing:.005em; color:var(--ink);margin:clamp(24px,2.8vw,38px) auto 0;max-width:44ch;line-height:1.5;text-align:center} .display{font-family:var(--display);font-weight:400;font-size:clamp(52px,10.5vw,190px); line-height:.9;letter-spacing:-.02em;margin:0 auto;max-width:14ch;text-align:center} /* the heading pair rides into the ghost numeral, as the LP does */ .eyebrow + .seo{margin-top:2px} .centred{text-align:center} .more{font-size:14px;margin:7vh 0 0} .more a{color:var(--ink);text-decoration:none;border-bottom:1px solid rgba(28,26,23,.3);padding-bottom:2px} .more a:hover{border-bottom-color:var(--ink)}/* photographs drift at their own rate as the page moves; site.js writes --dy */ [data-drift]{transform:translate(var(--dx,0px),var(--dy,0px));transition:transform .1s linear} [data-drift] img{display:block;width:100%;height:auto}/* ---------- LP section furniture: ghost numeral and eyebrow ---------- Taken from the retired landing page. The numeral sits behind the eyebrow at very low contrast and is decorative only, so it is drawn with a pseudo element and never enters the accessibility tree. */ .numbered{position:relative}/* ---------- ground textures ---------- The single ground stays #F8F8F7. These sit over it at low opacity as light, not as a second colour: one is window light falling on a wall, the other is leaf shadow. Both were measured before use — the lightest runs 221 to 255 luminance, the other 186 to 250, so ink type clears contrast everywhere. Applied to two sections only. */ .textured{position:relative;isolation:isolate} .textured:before{content:none}/* ---------- credentials line ---------- */ .creds{border-top:1px solid rgba(28,26,23,.12);border-bottom:1px solid rgba(28,26,23,.12); overflow:hidden;padding:16px 0; -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)} .creds .track{display:flex;gap:44px;width:max-content;font-family:var(--display); font-size:clamp(17px,1.7vw,30px);color:var(--muted);white-space:nowrap} .creds .track span::after{content:"\00b7";margin-left:44px;opacity:.4}/* ---------- welcome ---------- */ .welcome{padding:10vh 0 4vh;position:relative;overflow:hidden} .welcome .inner{max-width:1500px;margin:0 auto;padding:0 var(--gut);position:relative} /* three staggered blocks, each behind its own ghost numeral */ .welcome .says{margin:6vh 0 0} .welcome .say{position:relative;margin:0 0 clamp(38px,5vh,64px)} .welcome .say.a{margin-left:0;max-width:52%} .welcome .say.b{margin-left:34%;max-width:52%} .welcome .say.c{margin-left:12%;max-width:54%} .welcome .say .gh{position:absolute;left:-.04em;top:-.42em;z-index:0;pointer-events:none; font-family:var(--body);font-weight:700;font-size:clamp(72px,11vw,150px);line-height:.8; letter-spacing:-.04em;color:rgba(28,26,23,.055)} .welcome .say .stat{position:relative;z-index:1;color:var(--ink);font-family:var(--display);font-weight:400; font-size:clamp(26px,3vw,46px);line-height:1.1;margin:0 0 clamp(12px,1.4vw,20px);max-width:20ch} .welcome .say p{position:relative;z-index:1;font-size:clamp(16px,1.4vw,19px);line-height:1.75; margin:0;max-width:44ch;color:var(--muted)} .welcome .say figure{margin:clamp(24px,3vw,44px) 0 0;overflow:hidden;border-radius:0} .welcome .say figure img{width:100%;height:auto;display:block; transition:scale 1.5s var(--oa-cubic)} .welcome .say figure:hover img{scale:1.03} .welcome .say.a figure{width:78%;margin-left:auto} .welcome .say.b figure{width:62%} .welcome .say.c figure{width:72%;margin-left:auto} @media (max-width:860px){ .welcome .say,.welcome .say.a,.welcome .say.b,.welcome .say.c{margin-left:0;max-width:none} .welcome .say figure,.welcome .say.a figure,.welcome .say.b figure,.welcome .say.c figure{width:100%;margin-left:0} } .welcome .provenance{font-size:13px;color:var(--muted);margin:0}/* ---------- find your chapter: three journeys ---------- */ .chapters{position:relative;padding:12vh 0} .chapters .thread{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0} .chapters .thread path{fill:none;stroke:url(#vgrad);stroke-width:1.3;vector-effect:non-scaling-stroke} .chapters .inner{position:relative;z-index:1;max-width:1400px;margin:0 auto;padding:0 var(--gut)} .chapters .journey{margin-top:9vh} .chapters .jhead{display:flex;align-items:baseline;gap:14px;margin:0 0 26px} .chapters .jhead .no{font-family:var(--display);font-size:clamp(19px,1.8vw,24px);color:var(--muted)} .chapters .jhead .say{font-family:var(--display);font-size:clamp(21px,3vw,38px);line-height:1} .chapters .arc{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(10px,1.2vw,16px);align-items:end} .chapters .arc.four{grid-template-columns:repeat(4,1fr);align-items:start} .chapters .two{display:grid;grid-template-columns:1.42fr 1fr;gap:clamp(14px,2vw,24px); align-items:start;margin-top:clamp(20px,3vh,34px)} .chapters .tile{display:block;text-decoration:none;color:var(--ink)} .chapters .tile.mid{margin-top:5vh} .chapters .shot{display:block;overflow:hidden;border-radius:0} .chapters .shot img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;display:block; transition:filter .7s var(--ez),transform 1.2s var(--ez)} .chapters .tile.big .shot img,.chapters .tile.mid .shot img{aspect-ratio:4/3} .chapters .tile.corp .shot img{aspect-ratio:16/6} .chapters .tile:hover .shot img,.chapters .tile:focus-visible .shot img{filter:grayscale(1);transform:scale(1.02)} .chapters .tile:focus-visible{outline:2px solid var(--verm);outline-offset:4px}/* the shallow arch: the Level 3 window head, not the departure doorway. Only the three pages that matter most take it. */ .chapters .shot.arch{border-radius:34% 34% 0 0 / 20% 20% 0 0} .chapters .nm{display:block;font-family:var(--display);font-weight:400;line-height:1.12; margin-top:12px;font-size:clamp(14px,1.6vw,21px)} .chapters .nm.lg{font-size:clamp(20px,2.5vw,36px)} .chapters .nm.xl{font-size:clamp(24px,3.4vw,50px)} .chapters .pr{display:block;font-size:11px;color:var(--muted);margin-top:4px} .chapters .tile.corp{display:grid;grid-template-columns:1.7fr 1fr;gap:clamp(16px,2.4vw,28px);align-items:end}/* ---------- writing: the three latest posts, Obsidian's Updates shape ---------- */ .reading .writing{margin-top:13vh} .reading .posts{display:grid;grid-template-columns:1fr 1.55fr 1fr;gap:clamp(14px,2.4vw,34px); align-items:start;margin-top:6vh} .reading .post{text-decoration:none;color:var(--ink);display:block} .reading .post .shot{display:block;overflow:hidden;border-radius:0} .reading .post img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block; transition:filter .7s var(--ez)} .reading .post.lead img{aspect-ratio:16/10} .reading .post:not(.lead) .shot{margin-top:5vh} .reading .post:hover img{filter:grayscale(1)} .reading .post .cap{display:block;margin-top:clamp(20px,4vh,44px)} .reading .post .kicker{display:block;font-family:var(--display);font-size:15px;color:var(--muted);margin-bottom:8px} .reading .post .title{display:block;font-size:15px;letter-spacing:.06em;text-transform:uppercase;line-height:1.4} .reading .post .dek{display:block;font-size:14px;line-height:1.7;color:var(--muted);margin-top:16px;max-width:34ch}@media (max-width:1000px){ .spaces .floor{grid-template-columns:repeat(2,1fr);gap:3vh 2vw} .spaces .core{grid-column:1 / -1;grid-row:1} .spaces .caption{grid-column:1 / -1;grid-row:2} .spaces .sat{grid-column:auto!important;grid-row:auto!important;margin-top:0!important} .spaces .where{grid-template-columns:1fr;gap:4vh} .chapters .arc{grid-template-columns:repeat(3,1fr);gap:30px 12px} .chapters .tile[style]{margin-bottom:0!important;margin-top:0!important} .chapters .two,.chapters .arc,.chapters .tile.corp{margin-bottom:34px} .chapters .arc.four{grid-template-columns:repeat(2,1fr)} .chapters .two{grid-template-columns:1fr} .chapters .tile.mid{margin-top:0} .chapters .tile.corp{grid-template-columns:1fr} .reading .posts{grid-template-columns:1fr;gap:6vh} .reading .post:not(.lead) .shot{margin-top:0} } @media (max-width:560px){ .chapters .arc{grid-template-columns:repeat(2,1fr)} .chapters .tile[style]{margin-bottom:0!important;margin-top:0!important} }/* ---------- 04 how it works: the LP's S3A process sequence ---------- Ported verbatim from the landing page — the LP's own class names are kept so the engine's selectors match without renaming. The variables below map the LP's tokens onto this theme's. Knob: --wrs-proc-track. */ .wrs-process{ --wrs-proc-track:660vh; --wrs-pad:6vw; --wrs-eyebrow-top:clamp(150px,19vh,214px); --wrs-ghost-top-rest:clamp(10px,2vw,40px); --wrs-radius:0; --wrs-display:var(--display); --wrs-sans:var(--body); --wrs-heading:var(--ink); --wrs-text:var(--ink); --wrs-muted:var(--muted); --wrs-accent:var(--verm); padding:12vh 0} .wrs-process .wrs-wrap{max-width:1500px;margin:0 auto;padding:0 var(--wrs-pad)} .wrs-process .wrs-eyebrow{font-size:clamp(15px,1.5vw,20px);font-weight:500;letter-spacing:.2em; text-transform:uppercase;color:var(--muted);margin:0 0 18px} .wrs-process__title{font-family:var(--display);font-weight:400; font-size:clamp(40px,6.2vw,92px);line-height:.95;letter-spacing:-.01em;margin:0 auto;max-width:14ch;text-align:center} .wrs-process__lead{font-size:clamp(16px,1.3vw,18px);line-height:1.7;color:var(--muted);margin:clamp(18px,2vw,28px) auto 0;max-width:52ch;text-align:center} .wrs-process__after{max-width:1500px;margin:0 auto;padding:6vh var(--wrs-pad) 0} .wrs-process__after .seo{margin:0} .wrs-process .wrs-lead, .wrs-process .wrs-step__body, .wrs-process .wrs-step p { color: var(--wrs-heading); font-weight: 600; } .wrs-process .wrs-step__body a { color: var(--wrs-text); } .wrs-process .wrs-step__body a:hover { color: var(--wrs-accent); } .wrs-process .wrs-eyebrow { color: var(--wrs-heading); } .wrs-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(20px, 2.4vw, 38px); margin-top: clamp(40px, 5vw, 70px); } .wrs-step { position: relative; padding-top: 0; border-top: 0; display: flex; flex-direction: column; } .wrs-step__num { font-family: var(--wrs-display); font-weight: 600; font-size: clamp(28px, 2.6vw, 40px); color: var(--wrs-muted); display: block; margin-bottom: 12px; line-height: 1; word-spacing: normal; } .wrs-step__title, .wrs-step h4 { font-size: clamp(17px, 1.4vw, 20px); } .wrs-step__body, .wrs-step p { color: var(--wrs-text); font-size: 16px; margin: 0; } .wrs-step__img { margin: 0; overflow: hidden; border-radius: 0; } .wrs-step__img img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; } .wrs-process__cta { margin-top: clamp(40px, 5vw, 64px); text-align: center; } .wrs-step__head { order: 1; min-height: clamp(86px, 6.4vw, 116px); } .wrs-step__img { order: 2; margin-top: 0; } .wrs-step__body { order: 3; margin-top: clamp(16px, 1.4vw, 24px); } .wrs-process.wrs-proc-pin { overflow: visible; padding-top: 0; padding-bottom: 0; } .wrs-process.wrs-proc-pin::before { content: none; } .wrs-process.wrs-proc-pin .wrs-process__track { position: relative; min-height: var(--wrs-proc-track, 660vh); } .wrs-process.wrs-proc-pin .wrs-process__pin { position: sticky; top: var(--hd,76px); height: calc(100vh - var(--hd,76px)); overflow: hidden; } .wrs-process.wrs-proc-pin .wrs-wrap { position: relative; height: 100%; width: 100%; max-width: none; margin: 0; padding: 0; } .wrs-process.wrs-proc-pin .wrs-process__pin::before { content: counter(wrs-sec, decimal-leading-zero); position: absolute; top: var(--wrs-ghost-top-anim); left: var(--wrs-pad); z-index: 0; /* v1.4.26: match S2's animation ghost offset (was clamp(60px,9vh,120px), which tucked "03" under the header) */ font-family: var(--wrs-display); font-weight: 700; font-size: var(--wrs-ghost-size); line-height: 0.8; color: var(--wrs-ghost); pointer-events: none; letter-spacing: -0.04em; } .wrs-process.wrs-proc-pin.wrs-proc-collapsed .wrs-process__pin::before { top: var(--wrs-ghost-top-rest); } .wrs-process.wrs-proc-pin .wrs-eyebrow { position: absolute; top: var(--wrs-eyebrow-top); left: var(--wrs-pad); margin: 0; z-index: 20; opacity: 1; transform: none; } .wrs-process.wrs-proc-pin .wrs-process__title { position: absolute; top: 0; left: var(--wrs-pad); right: var(--wrs-pad); margin: 0 auto; z-index: 20; transform-origin: top center; transition: none; will-change: transform; } .wrs-process.wrs-proc-pin .wrs-process__lead { position: absolute; top: 0; left: var(--wrs-pad); right: var(--wrs-pad); margin: 0 auto; max-width: none; white-space: nowrap; text-align: center; z-index: 19; opacity: 0; transition: none; will-change: transform, opacity; } .wrs-process.wrs-proc-pin .wrs-steps { position: absolute; margin: 0; gap: 0; display: block; } .wrs-process.wrs-proc-pin .wrs-steps:not(.is-grid) .wrs-step { position: absolute; inset: 0; border-top: 0; padding: 0; display: grid; grid-template-columns: 1fr 1.05fr; grid-template-rows: auto 1fr; grid-template-areas: "head img" "body img"; column-gap: clamp(30px, 4vw, 72px); opacity: 0; pointer-events: none; transition: opacity 0.45s var(--wrs-ease); } .wrs-process.wrs-proc-pin .wrs-steps:not(.is-grid) .wrs-step.is-active { opacity: 1; pointer-events: auto; } .wrs-process.wrs-proc-pin .wrs-steps:not(.is-grid) .wrs-step.is-past { opacity: 0; } .wrs-process.wrs-proc-pin .wrs-steps:not(.is-grid) .wrs-step__head { grid-area: head; align-self: start; } .wrs-process.wrs-proc-pin .wrs-steps:not(.is-grid) .wrs-step__body { grid-area: body; align-self: start; margin-top: clamp(18px, 2vw, 30px); max-width: 46ch; } .wrs-process.wrs-proc-pin .wrs-steps:not(.is-grid) .wrs-step__img { grid-area: img; align-self: start; justify-self: center; width: min(100%, calc(var(--wrs-board-imgmax, 9999px) * 1.5)); height: auto; margin: 0; } .wrs-process.wrs-proc-pin .wrs-steps:not(.is-grid) .wrs-step__img img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; } .wrs-process.wrs-proc-pin .wrs-steps:not(.is-grid) .wrs-step__num { font-size: clamp(40px, 4.4vw, 72px); margin-bottom: 0.1em; } .wrs-process.wrs-proc-pin .wrs-steps:not(.is-grid) .wrs-step__title { font-size: clamp(28px, 3.2vw, 52px); line-height: 1.04; } .wrs-process.wrs-proc-pin .wrs-steps:not(.is-grid) .wrs-step__body { font-size: clamp(16px, 1.2vw, 18px); line-height: 1.55; } .wrs-process.wrs-proc-pin .wrs-steps:not(.is-grid) .wrs-step__head, .wrs-process.wrs-proc-pin .wrs-steps:not(.is-grid) .wrs-step__img, .wrs-process.wrs-proc-pin .wrs-steps:not(.is-grid) .wrs-step__body { opacity: 0; transition: transform 0.7s var(--wrs-ease), opacity 0.7s var(--wrs-ease); } .wrs-process.wrs-proc-pin .wrs-steps:not(.is-grid) .wrs-step__head { transform: translateX(64px); } .wrs-process.wrs-proc-pin .wrs-steps:not(.is-grid) .wrs-step__img { transform: translateY(48px); } .wrs-process.wrs-proc-pin .wrs-steps:not(.is-grid) .wrs-step__body { transform: translateY(48px); } .wrs-process.wrs-proc-pin .wrs-steps:not(.is-grid) .wrs-step.is-active .wrs-step__head { transform: none; opacity: 1; transition-delay: 0.05s; } .wrs-process.wrs-proc-pin .wrs-steps:not(.is-grid) .wrs-step.is-active .wrs-step__img { transform: none; opacity: 1; transition-delay: 0.16s; } .wrs-process.wrs-proc-pin .wrs-steps:not(.is-grid) .wrs-step.is-active .wrs-step__body { transform: none; opacity: 1; transition-delay: 0.26s; } .wrs-process.wrs-proc-pin .wrs-steps:not(.is-grid) .wrs-step.is-past .wrs-step__head { transform: translateX(-150px); opacity: 0; } .wrs-process.wrs-proc-pin .wrs-steps:not(.is-grid) .wrs-step.is-past .wrs-step__img { transform: translateY(-64px); opacity: 0; } .wrs-process.wrs-proc-pin .wrs-steps:not(.is-grid) .wrs-step.is-past .wrs-step__body { transform: translateY(-64px); opacity: 0; } .wrs-process.wrs-proc-pin .wrs-fw { display: inline-block; will-change: transform; } .wrs-process.wrs-proc-pin .wrs-steps.is-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(20px, 2.4vw, 38px); padding-bottom: 25px; } .wrs-process.wrs-proc-pin .wrs-steps.is-grid .wrs-step { position: relative; inset: auto; border-top: 0; padding-top: 0; display: flex; flex-direction: column; opacity: 1; } .wrs-process.wrs-proc-pin .wrs-steps.is-grid .wrs-step__head { order: 1; min-height: clamp(86px, 6.4vw, 116px); } .wrs-process.wrs-proc-pin .wrs-steps.is-grid .wrs-step__img { order: 2; margin-top: 0; height: auto; } .wrs-process.wrs-proc-pin .wrs-steps.is-grid .wrs-step__img img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; } .wrs-process.wrs-proc-pin .wrs-steps.is-grid .wrs-step__body { order: 3; margin-top: clamp(10px, 1vw, 16px); max-width: none; } .wrs-process.wrs-proc-pin .wrs-steps.is-grid .wrs-step__num { font-size: clamp(28px, 2.6vw, 40px); } .wrs-process.wrs-proc-pin .wrs-steps.is-grid .wrs-step__title { font-size: clamp(17px, 1.4vw, 20px); } .wrs-process.wrs-proc-pin .wrs-process__after { padding-top: 0; padding-bottom: clamp(36px, 6vw, 90px); } .wrs-process.wrs-proc-pin .wrs-process__after .wrs-process__cta { margin-top: clamp(24px, 3vh, 36px); } .wrs-steps { grid-template-columns: repeat(3, 1fr); } .wrs-process .wrs-process__track, .wrs-process .wrs-process__pin { margin: 0; padding: 0; min-height: 0; height: auto; position: static; overflow: visible; } .wrs-process .wrs-steps { display: flex; flex-direction: column; gap: clamp(40px, 10vw, 68px); margin-top: clamp(26px, 6vw, 44px); } .wrs-process .wrs-step { min-height: 0; border-top: 0; padding-top: 0; display: flex; flex-direction: column; justify-content: flex-start; gap: clamp(12px, 3vw, 18px); } .wrs-process .wrs-step__head { display: block; } .wrs-process .wrs-step__num { font-size: clamp(34px, 11vw, 52px); margin-bottom: 4px; } .wrs-process .wrs-step__title { font-size: clamp(22px, 6vw, 30px); line-height: 1.12; } .wrs-process .wrs-step__img { margin: 0; width: 100%; max-width: 100%; } .wrs-process .wrs-step__img img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; } .wrs-process .wrs-step__body { font-size: clamp(15px, 4vw, 17px); max-width: none; } .wrs-process .wrs-step.wrs-reveal { transform: translateY(40px); } .wrs-process .wrs-step.wrs-reveal.is-visible { transform: none; } .wrs-process .wrs-process__after { padding: 0; } .wrs-process .wrs-process__cta { margin-top: clamp(28px, 8vw, 48px); width: 100%; text-align: center; } .wrs-process .wrs-process__cta .wrs-btn { display: block; width: 100%; max-width: 440px; margin-left: auto; margin-right: auto; white-space: normal; box-sizing: border-box; padding: 16px 22px; } .wrs-process__title { transform: none !important; } .wrs-steps { grid-template-columns: 1fr; } .wrs-process__cta .wrs-btn + .wrs-btn { margin-left: 16px; } .wrs-process__cta, .wrs-process__cta > .wp-block-group__inner-container { display: flex; justify-content: center; align-items: stretch; gap: 8px; min-width: 0; } .wrs-process__cta > .wp-block-group__inner-container { width: 100%; } .wrs-process__cta .wrs-btn { display: inline-flex !important; align-items: center; justify-content: center; flex: 0 1 auto; min-width: 0; width: auto !important; max-width: 100%; white-space: nowrap !important; box-sizing: border-box; padding: 12px clamp(5px, 1.8vw, 14px) !important; margin: 0 !important; font-size: clamp(9.5px, 3.2vw, 12.5px) !important; letter-spacing: 0.09em !important; line-height: 1.2 !important; } .wrs-process__cta .wrs-btn + .wrs-btn { margin: 0 !important; } /* ---------- proof: counters, reviews, awards ---------- */ .proof{padding:11vh 0} .proof .inner{max-width:1200px;margin:0 auto;padding:0 var(--gut)} .proof .sub{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted); margin:0;text-align:center} .proof .counters{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,50px); max-width:1300px;margin:9vh auto 12vh;padding:0 var(--gut);text-align:center} .proof .counters .num{padding-top:22px;border-top:1px solid var(--ink)} .proof .counters b{display:block;font-family:var(--display);font-weight:400; font-size:clamp(44px,5.2vw,84px);line-height:1;margin-bottom:16px} .proof .counters span{font-size:11px;letter-spacing:.13em;text-transform:uppercase; color:var(--muted);line-height:1.6;display:block;max-width:22ch;margin:0 auto} .proof .voices{max-width:1000px;margin:0 auto 12vh;padding:0 var(--gut);text-align:center}/* the quotes stack in a grid rather than absolutely, so the tallest one sets the height and the nav below it can never ride over the text */ .proof .voices .frames{display:grid} .proof .voices .frame{grid-area:1/1;margin:0;opacity:0;visibility:hidden; transform:translateY(14px);transition:opacity .7s var(--ez),transform .7s var(--ez),visibility .7s; pointer-events:none} .proof .voices .frame.on{opacity:1;visibility:visible;transform:none;pointer-events:auto} .proof .voices .mark{display:block;font-family:var(--display);font-size:clamp(40px,4vw,56px); line-height:.6;color:var(--muted);margin-bottom:18px} .proof .voices .frame p{font-family:var(--display);font-weight:400; font-size:clamp(20px,1.9vw,27px);line-height:1.55;margin:0 0 24px;max-width:46ch; margin-left:auto;margin-right:auto} .proof .voices cite{font-style:normal;font-size:13px} .proof .voices cite b{display:block;font-weight:500} .proof .voices cite span{color:var(--muted)} .proof .voices .more{margin:0} /* ---------- press and writing ---------- */ .reading{padding:11vh 0} .reading .inner{max-width:1540px;margin:0 auto;padding:0 var(--gut)} .reading .cutting:hover{border-top-color:var(--ink)}/* ---------- questions ---------- */ .asked{padding:11vh 0} .asked .inner{max-width:1200px;margin:0 auto;padding:0 var(--gut)} .asked .qlist{max-width:1100px;margin:0 auto;padding:0 var(--gut); border-top:1px solid rgba(28,26,23,.14)} .asked .q{border-bottom:1px solid rgba(28,26,23,.14)} .asked .q h3{margin:0;font-size:inherit;font-weight:400} .asked .q button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px; background:none;border:0;cursor:pointer;text-align:left;padding:clamp(20px,2.4vh,28px) 0; font-family:var(--display);font-weight:400;font-size:clamp(19px,2.1vw,30px);line-height:1.3; color:var(--ink);transition:color .4s var(--ez)} .asked .q button:hover{color:var(--muted)} .asked .q button:focus-visible{outline:2px solid var(--verm);outline-offset:3px}/* the plus becomes a minus when open */ .asked .q i{position:relative;width:17px;height:17px;flex-shrink:0} .asked .q i:before,.asked .q i:after{content:"";position:absolute;background:var(--ink); transition:transform .45s var(--ez),opacity .45s var(--ez)} .asked .q i:before{left:0;right:0;top:8px;height:1px} .asked .q i:after{top:0;bottom:0;left:8px;width:1px} .asked .q.open i:after{transform:scaleY(0);opacity:0} .asked .q .a{overflow:hidden;max-height:0;transition:max-height .6s var(--ez)} .asked .q .a p{font-size:16px;line-height:1.75;color:var(--muted);margin:0 0 clamp(22px,3vh,32px); max-width:62ch;padding-right:8%}/* ---------- departure: the enquiry form ---------- */ .crossover{max-width:1200px;margin:9vh auto 0;padding:0 var(--gut);font-size:14px;color:var(--muted)} .crossover a{color:var(--ink)} @media (max-width:900px){ .whyus .stage{grid-template-columns:1fr;gap:6vh} .whyus .texts{gap:7vh;padding:0} .whyus .archwrap{position:static;order:-1;aspect-ratio:4/5} .process .steps li,.process .steps li:nth-child(even) figure{grid-template-columns:1fr;order:0} .process .steps{gap:8vh} .problem .pcard,.problem .pcard.left,.problem .pcard.right{grid-template-columns:1fr} .problem .pcard figure,.problem .pcard.right figure{grid-column:1;grid-row:auto} .problem .pcard.right .n,.problem .pcard.right h3,.problem .pcard.right p{grid-column:1} .whyus .reasons,.reading .cuttings,.reading .posts{grid-template-columns:1fr;gap:5vh} .process .steps{grid-template-columns:1fr 1fr;gap:4vh 4vw} .proof .counters{grid-template-columns:1fr 1fr;gap:6vh 4vw} .asked .qgrid{grid-template-columns:1fr} .asked .qframe{position:static;margin-top:5vh} .askbox{grid-template-columns:1fr;gap:5vh} } @media (max-width:560px){ .process .steps{grid-template-columns:1fr} } .heritage{padding:16vh 0 10vh} .heritage .inner{max-width:1200px;margin:0 auto;padding:0 var(--gut)} .heritage .lead{font-family:var(--display);font-size:clamp(40px,3.4vw,48px);line-height:1.25;max-width:22ch;margin:0 0 8vh} .heritage p{max-width:36ch;font-size:clamp(19px,1.7vw,23px);line-height:1.72;margin:0 0 7vh} .heritage p.offset{margin-left:clamp(0px,22vw,340px)} .heritage .provenance{font-size:14px;color:var(--muted);margin:0;max-width:none}/* ---------- two floors ---------- */ @media (max-width:780px){ .floors .pair{grid-template-columns:1fr;gap:5vh} }/* ---------- the gallery: full bleed, gapless, one text cell ---------- No captions under photographs anywhere. Every word lives in the text cell. Tiles are greyscale at rest and resolve to colour on hover, so the grid reads as one field rather than twelve competing pictures. *//* ---------- the bar ---------- No solid header. The nav sits as chips floating over whatever is beneath, and both the chips and the mark invert once the page has scrolled past the hero. Three states, because `.pagehead` did not exist before and every non-front page rendered an unstyled bar: 1. front page over the video — light mark, translucent chips 2. front page scrolled — ink mark, hairline chips, ground behind 3. every other page — state 2 from the start ---------------------------------------------------------------- */ #hd{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center; gap:8px;flex-wrap:wrap;padding:18px var(--gut);background:transparent; transition:background-color .6s var(--ez)} .pagehead,.homehead.scrolled{background:rgba(248,248,247,.93); -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}/* the mark: never boxed, colour only */ .lockup{display:inline-flex;align-items:center;gap:9px;flex-shrink:0;text-decoration:none; color:var(--ink);transition:color .6s var(--ez)} .lockup .archmk{width:16px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;flex-shrink:0} .lockup .mark{display:block;flex-shrink:0} .lockup .rule{display:block;height:1px;background:var(--gold);margin-top:5px; transition:background-color .6s var(--ez)} .homehead:not(.scrolled) .lockup{color:var(--surface); filter:drop-shadow(0 1px 10px rgba(28,26,23,.55))} .homehead:not(.scrolled) .lockup .rule{background:rgba(248,248,247,.85)}/* the chips */ .nav{margin-left:auto} .nav > ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px} .chip{display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border-radius:0; font-family:var(--body);font-size:11px;letter-spacing:.11em;text-transform:uppercase; line-height:1;white-space:nowrap;text-decoration:none;cursor:pointer; color:var(--ink);background:transparent;border:1px solid rgba(28,26,23,.18); transition:background-color .5s var(--ez),color .5s var(--ez),border-color .5s var(--ez)} .chip:hover{background:var(--ink);color:var(--surface);border-color:var(--ink)} .chip:focus-visible{outline:2px solid var(--verm);outline-offset:2px} .homehead:not(.scrolled) .chip{color:var(--surface);border-color:transparent; background:rgba(248,248,247,.18);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} .homehead:not(.scrolled) .chip:hover{background:var(--surface);color:var(--ink)} .chip .chev{width:5px;height:5px;border-right:1px solid currentColor; border-bottom:1px solid currentColor;transform:rotate(45deg);translate:0 -1px;opacity:.65}/* WhatsApp is the one filled chip in either state */ .wa.chip{background:var(--ink);color:var(--surface);border-color:var(--ink)} .wa.chip:hover{background:transparent;color:var(--ink)} .homehead:not(.scrolled) .wa.chip{background:var(--surface);color:var(--ink);border-color:var(--surface)} .homehead:not(.scrolled) .wa.chip:hover{background:transparent;color:var(--surface)} .wa .ico{width:14px;height:14px;stroke:currentColor} .nav .has{position:relative} .nav .drop{position:absolute;top:calc(100% + 8px);right:0;min-width:520px; background:var(--surface);border:1px solid rgba(28,26,23,.12);border-radius:0; padding:22px 26px;opacity:0;visibility:hidden;transform:translateY(-6px); transition:opacity .35s var(--ez),transform .35s var(--ez),visibility .35s} .nav .drop.narrow{min-width:210px} .nav .drop ul{list-style:none;margin:0;padding:0;columns:3;column-gap:28px} .nav .drop.narrow ul{columns:1} .nav .drop li{break-inside:avoid} .nav .drop a{display:block;padding:7px 0;font-size:11px;letter-spacing:.11em; text-transform:uppercase;color:var(--ink);text-decoration:none} .nav .drop a:hover{text-decoration:underline;text-underline-offset:4px} .nav .has:hover .drop,.nav .has:focus-within .drop,.nav .has.open .drop{ opacity:1;visibility:visible;transform:none} .menu.chip{display:none}/* Eleven chips plus the mark need roughly 1150px. Below that the nav hands over to the Menu overlay rather than wrapping to a second row. */ @media (max-width:1280px){ .nav{display:none} .menu.chip{display:inline-flex;margin-left:auto;width:44px;height:38px;padding:0;align-items:center;justify-content:center} .menu.chip .bars{display:block;width:20px;height:14px;position:relative} .menu.chip .bars i{position:absolute;left:0;right:0;height:1.5px;background:currentColor;border-radius:0; transition:transform .5s var(--oa-cubic),opacity .3s var(--oa-fast)} .menu.chip .bars i:nth-child(1){top:0} .menu.chip .bars i:nth-child(2){top:6.25px} .menu.chip .bars i:nth-child(3){bottom:0} /* a cross while the index overlay is open */ body.index-open .menu.chip .bars i:nth-child(1){transform:translateY(6.25px) rotate(45deg)} body.index-open .menu.chip .bars i:nth-child(2){opacity:0} body.index-open .menu.chip .bars i:nth-child(3){transform:translateY(-6.25px) rotate(-45deg)} }/* the editor iframe has no , so keep the ground on the wrapper too */ .editor-styles-wrapper{background:var(--surface)}/* ============================================================ FOOTER Restored 8 Sep: an earlier block replacement cut this out entirely, which left the seam SVG unstyled (so the browser filled the curve solid black) and the inline icons at their natural size. ============================================================ */ .crossline{padding:7vh 6vw 0;text-align:center;font-size:13px;color:var(--muted)} .crossline a{color:var(--ink);font-weight:500;text-decoration:none; border-bottom:1px solid rgba(28,26,23,.3);padding-bottom:2px} .crossline a:hover{border-bottom-color:var(--ink)}/* inline icons. Without an explicit size an inline SVG fills its container, which is how the WhatsApp glyph once covered the whole footer. */ .ico{width:17px;height:17px;flex-shrink:0;fill:none;stroke:var(--muted);stroke-width:1.4; stroke-linecap:round;stroke-linejoin:round} /* ================================================================== PINNED SEQUENCES Ported from the landing-page engine, 8 Sep. Each of these three sections has TWO layouts in one DOM: the static one, used on tablet and phone, without JS, and under Reduce Motion; and the pinned one JS layers on. All pinned geometry is written by JS in px — the CSS only declares the states. ================================================================== */ /* section furniture: ghost numeral and eyebrow */ .numbered{position:relative} .numbered > .inner{position:relative} .numbered > .inner:before{content:none} .numbered > .inner > *{position:relative;z-index:1} .eyebrow{font-size:clamp(15px,1.5vw,20px);font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin:0 0 18px;text-align:center} /* the split-word heading rise */ .anim .display .ln{display:block} .anim .display .wd{display:inline-block;vertical-align:top} .anim .display .wd > span{display:inline-block} /* 2.7.3 (El 2 Nov, from her video of obsidianassembly.com): every letter arrives by itself, out of a blur, larger and slanted, and settles into place. Same values as v2's .split. */ .anim .display .ch{display:inline-block;opacity:0;filter:blur(7px);transform:translateY(.65em) scale(1.7) skew(9deg,4deg);transform-origin:0 100%; transition:opacity 1.1s var(--ez),transform 1.1s var(--ez),filter 1.1s var(--ez); transition-delay:calc(var(--wi,0) * .07s + var(--rand,0) * .16s + var(--ci,0) * .018s)} .anim .display.in .ch{opacity:1;filter:none;transform:none} .reveal-off .display .ch{opacity:1!important;filter:none!important;transform:none!important} /* the fixed backdrop handed from the arch to the next section */ .archbg-fixed{position:fixed;inset:0;z-index:-1;pointer-events:none; background-size:cover;background-position:center;display:none; will-change:transform,opacity} /* ---------- 01 the problem ---------- */ .problem{padding:11vh 0;overflow:visible} .problem .inner{max-width:1200px;margin:0 auto;padding:0 var(--gut)} .problem .pcard{max-width:min(520px,44vw);margin:0 0 9vh;border-top:2px solid var(--ink);padding-top:26px} .problem .pcard.right{margin-left:auto} .problem .pcard .n{display:block;font-family:var(--display);font-size:clamp(28px,2.8vw,42px); color:var(--muted);line-height:1;margin-bottom:16px} .problem .pcard h3{font-family:var(--display);font-weight:400;font-size:clamp(19px,2vw,27px);line-height:1.25;margin:0 0 18px} .problem .pcard figure{margin:18px 0;overflow:hidden;border-radius:0} .problem .pcard figure img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;display:block} .problem .pcard p{font-size:16px;line-height:1.7;color:var(--muted);margin:0;max-width:44ch} .problem .ctastrip{text-align:center;padding:4vh 6vw 0;font-family:var(--display); font-size:clamp(20px,2.2vw,30px);line-height:1.35} .problem .ctastrip a{display:inline-block;margin:18px 8px 0;font-family:var(--body);font-size:14px; letter-spacing:.05em;padding:13px 26px;border:1px solid var(--ink);border-radius:0; text-decoration:none;color:var(--ink);transition:background-color .45s var(--ez),color .45s var(--ez)} .problem .ctastrip a:first-of-type{background:var(--ink);color:var(--surface)} .problem .ctastrip a:hover{background:var(--ink);color:var(--surface)} .problem .ctastrip a:first-of-type:hover{background:transparent;color:var(--ink)} .problem.pinned{min-height:var(--prob-track,620vh);padding:0} .problem.pinned .stage{position:sticky;top:0;height:100vh;overflow:hidden} .problem.pinned .inner{position:relative;height:100%;margin:0 auto} .problem.pinned .display{position:absolute;top:clamp(150px,22vh,280px);left:6vw;right:6vw;margin:0; z-index:20;transform-origin:left top;will-change:transform} .problem.pinned .eyebrow{position:absolute;top:clamp(110px,17vh,220px);left:6vw;margin:0;z-index:20} .problem.pinned .seo{position:absolute;top:clamp(128px,19vh,244px);left:6vw;margin:0;z-index:20} .problem.pinned .pcard{position:absolute;top:0;width:clamp(300px,40%,520px);margin:0; transform:translateY(100vh);will-change:transform,opacity} .problem.pinned .pcard.left{left:6vw} .problem.pinned .pcard.right{right:6vw;left:auto;margin-left:0} .problem.pinned .ctastrip{position:relative;z-index:5} /* ---------- 02 why us: the arch ---------- */ .whyus{padding:12vh 0} .whyus .wrap{max-width:1300px;margin:0 auto;padding:0 var(--gut)} .whyus .inner{max-width:1200px;margin:0 auto} .whyus .stage{display:grid;gap:clamp(36px,4vw,64px);margin-top:clamp(40px,5vw,70px)} .whyus .reason h3{font-family:var(--display);font-weight:400;font-size:clamp(19px,1.7vw,25px);line-height:1.3;margin:0 0 14px} .whyus .reason p{font-size:16px;line-height:1.72;color:var(--muted);margin:0} .whyus .archstrip{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .whyus .archslide{margin:0;overflow:hidden;border-radius:0} .whyus .archslide img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;display:block;transition:transform .8s var(--ez)} .whyus .archslide:hover img{transform:scale(1.06)} .whyus .archbg{display:none} @media (min-width:761px){ .whyus:not(.archpin) .stage{grid-template-columns:repeat(3,1fr);gap:clamp(30px,3.4vw,60px)} .whyus:not(.archpin) .arch{grid-column:1 / -1} .whyus:not(.archpin) .archstrip{grid-template-columns:repeat(6,1fr)} } @media (max-width:760px){ /* text with its pictures: a paragraph, two photographs, a paragraph, two photographs, a paragraph, the last two. The arch and strip wrappers dissolve so the slides sit in the same grid as the reasons. */ .whyus:not(.archpin) .stage{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,3vw,24px) clamp(12px,3vw,20px)} .whyus:not(.archpin) .arch,.whyus:not(.archpin) .archstrip{display:contents} .whyus:not(.archpin) .archbg{display:none} .whyus:not(.archpin) .reason{grid-column:1 / -1} .whyus:not(.archpin) .reason.r1{order:1} .whyus:not(.archpin) .archslide:nth-child(1),.whyus:not(.archpin) .archslide:nth-child(2){order:2} .whyus:not(.archpin) .reason.r2{order:3} .whyus:not(.archpin) .archslide:nth-child(3),.whyus:not(.archpin) .archslide:nth-child(4){order:4} .whyus:not(.archpin) .reason.r3{order:5} .whyus:not(.archpin) .archslide:nth-child(5),.whyus:not(.archpin) .archslide:nth-child(6){order:6} .whyus:not(.archpin) .archslide{margin:0;border-radius:0;overflow:hidden} } .whyus.archpin{overflow:visible;min-height:var(--arch-track,760vh);padding:0} .whyus.archpin .pinstage{position:sticky;top:var(--hd,76px);height:calc(100vh - var(--hd,76px));overflow:hidden} .whyus.archpin .wrap{position:relative;height:100%;width:100%;max-width:none;margin:0;padding:0} .whyus.archpin .inner{max-width:none;margin:0} .whyus.archpin .eyebrow{position:absolute;top:clamp(150px,19vh,214px);left:0;right:0;margin:0;z-index:20} .whyus.archpin .seo{position:absolute;top:clamp(174px,22vh,244px);left:0;right:0;margin:0 auto;z-index:20;max-width:40ch} .whyus.archpin .display{position:absolute;top:0;left:6vw;right:6vw;margin:0;z-index:20; white-space:nowrap;line-height:1;transform-origin:top center;will-change:transform} .whyus.archpin .stage{position:absolute;inset:0;margin:0;display:block} .whyus.archpin .reason{position:absolute;display:flex;flex-direction:column;justify-content:center; opacity:0;z-index:15;will-change:transform,opacity} .whyus.archpin .reason h3{font-size:clamp(20px,1.9vw,28px);margin-bottom:.6em} .whyus.archpin .reason p{font-size:clamp(15px,1.1vw,17px);line-height:1.55} .whyus.archpin .arch{position:absolute;overflow:hidden;opacity:0;z-index:5;background:var(--surface); box-shadow:0 0 0 var(--arch-stroke,0) rgba(28,26,23,.14);will-change:transform,opacity} .whyus.archpin .archbg{display:block;position:absolute;inset:0;width:100%;height:100%; margin:0;transform-origin:center center;z-index:0;will-change:transform} .whyus.archpin .archbg img{width:100%;height:100%;object-fit:cover;display:block} .whyus.archpin .archstrip{position:relative;z-index:1;display:flex;flex-wrap:nowrap;height:100%;width:100%;gap:0;will-change:transform} .whyus.archpin .archslide{flex:0 0 100%;height:100%;position:relative;border-radius:0;overflow:hidden} .whyus.archpin .archslide img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;transform:none} .whyus.archpin.covered .inner:before{opacity:0} /* ---------- 03 the spaces: Obsidian's Places scatter ---------- Seven frames, one set. Centre plus six satellites. Every frame stacks all seven photographs and shows the one carrying is-on; site.js advances them together. Satellites drift outward on scroll: one --p, each frame scaled by its own --lx / --ly, the way Obsidian drives everything from one progress variable. Hover opens a frame wider rather than draining its colour. */ /* overflow:clip, not hidden — hidden makes the section a scroll container and position:sticky stops working inside one. clip contains the thread just the same without that side effect. */ .spaces{padding:12vh 0;position:relative;overflow:clip} .spaces .inner{max-width:1500px;margin:0 auto 4vh;padding:0 var(--gut)} .spaces .floorhead{max-width:1500px;margin:0 auto 6vh;padding:0 var(--gut)} .spaces .lede{font-size:clamp(16px,1.3vw,18px);line-height:1.7;color:var(--muted); margin:0;max-width:62ch} /* the pin: a short track, a stage that holds the scatter still while it passes, and the frames opening out on the track's progress */ .spaces .places-track{position:relative;height:160vh} .spaces .places-stage{position:sticky;top:var(--hd,76px);height:calc(100vh - var(--hd,76px));display:grid;place-items:center;overflow:hidden} .spaces .places{position:relative;display:grid;grid-template-columns:repeat(12,1fr); grid-template-rows:repeat(13,1fr);gap:clamp(9px,1.1vw,20px); height:min(92vh,1000px);width:100%;max-width:1500px;margin:0 auto;padding:0 var(--gut)} .spaces .frame{position:relative;overflow:hidden;border-radius:0;min-width:0; background:rgba(28,26,23,.04); transition:transform 1.5s var(--oa-cubic),flex-basis .9s var(--oa-cubic)} .spaces .frame .roomshot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; display:block;opacity:0; transition:opacity .9s var(--oa-cubic),scale 1.5s var(--oa-cubic)} .spaces .frame .roomshot.is-on{opacity:1} /* the satellites carry the drift; the centre frame holds still */ .anim .spaces .frame.sat{ transform:translate3d(calc(var(--p,0) * var(--lx,0) * 1vw), calc(var(--p,0) * var(--ly,0) * 1vh), 0)} .spaces .frame.sat:hover{z-index:4} .spaces .frame.sat:hover .roomshot.is-on{scale:1.06} .spaces .frame.centre:hover .roomshot.is-on{scale:1.03} .spaces .frame.centre{grid-column:4/10;grid-row:4/10;z-index:2;overflow:visible;border-radius:0} .spaces .frame.centre .roomshot{border-radius:0} .spaces .frame.tl{grid-column:1/4;grid-row:2/8} .spaces .frame.bl{grid-column:1/4;grid-row:8/13} .spaces .frame.tr{grid-column:8/10;grid-row:1/4} .spaces .frame.mr{grid-column:10/13;grid-row:2/7} .spaces .frame.bc{grid-column:4/7;grid-row:10/14} .spaces .frame.br{grid-column:10/13;grid-row:7/12} /* arrows sit low in the centre frame, quiet rather than solid black */ .spaces .arrows{position:absolute;left:50%;bottom:0;transform:translate(-50%,50%); display:flex;gap:clamp(10px,1.2vw,18px);z-index:5} .spaces .arrow{width:clamp(48px,3.6vw,62px);height:clamp(48px,3.6vw,62px);border:0;border-radius:50%; background:rgba(28,26,23,.42);backdrop-filter:blur(.25rem);-webkit-backdrop-filter:blur(.25rem); color:#fff;cursor:pointer;display:grid;place-items:center;padding:0; transition:background .9s var(--oa-cubic),scale .9s var(--oa-cubic)} .spaces .arrow:hover{background:rgba(28,26,23,.62);scale:1.05} .spaces .arrow svg{width:clamp(18px,1.4vw,24px);height:auto;fill:none;stroke:#fff; stroke-width:1.3;vector-effect:non-scaling-stroke} .spaces .count{position:absolute;right:clamp(18px,2vw,34px);bottom:clamp(16px,2vh,30px);margin:0;z-index:3; font-family:var(--display);font-weight:400;color:#fff;line-height:1; font-size:clamp(22px,2.4vw,38px);text-shadow:0 1px 18px rgba(0,0,0,.38)} .spaces .closing{max-width:60ch;margin:8vh 0 0;padding:0 var(--gut); font-size:clamp(15px,1.2vw,17px);line-height:1.75;color:var(--muted)} .spaces .where{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,26px); max-width:1500px;margin:9vh auto 0;padding:0 var(--gut)} .spaces .where figure{margin:0} .spaces .where img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block; border-radius:0;transition:scale 1.5s var(--oa-cubic)} .spaces .where figure:hover img{scale:1.03} .spaces .where figcaption{margin-top:14px;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)} @media (max-width:900px){ .spaces .places-track{height:auto} .spaces .places-stage{position:static;height:auto;overflow:visible;display:block} .anim .spaces .frame.centre{transform:none} .spaces .places{grid-template-columns:repeat(6,1fr);grid-template-rows:auto; height:auto;padding:0 var(--gut);gap:clamp(8px,1.6vw,14px)} .spaces .frame{grid-column:auto;grid-row:auto;aspect-ratio:1/1} .spaces .frame.centre{grid-column:1/-1;grid-row:auto;aspect-ratio:4/3;order:-1} .spaces .frame.sat{grid-column:span 2;grid-row:auto} .anim .spaces .frame.sat{transform:none} .spaces .arrow{width:58px;height:58px} .spaces .lede,.spaces .closing{margin-left:0} } @media (max-width:1000px){ .whyus .archstrip{grid-template-columns:repeat(3,1fr)} } @media (max-width:760px){ .spaces .frame.sat{grid-column:span 3} .whyus .archstrip{grid-template-columns:1fr;gap:3vh} .problem .pcard{max-width:none} .spaces .where{grid-template-columns:1fr;gap:4vh} } /* ---------- awards: a continuous marquee ---------- Values from the live site's own marquee. The track holds three passes of the same cells, so translating by exactly a third loops with no gap and the row is always wider than the viewport. */ .proof .marquee{width:100%;overflow:hidden;padding:2vh 0} .proof .marquee .track{display:flex;flex-wrap:nowrap;width:max-content;align-items:flex-start; animation:award-scroll 26s linear infinite} .proof .marquee:hover .track{animation-play-state:paused} @keyframes award-scroll{from{transform:translateX(0)}to{transform:translateX(-33.3333%)}} .proof .badge{flex:0 0 auto;width:175px;margin:0 30px 0 0;text-align:center; text-decoration:none;color:var(--muted);display:block} .proof .badge img{height:105px;width:auto;display:block;margin:0 auto 12px; filter:grayscale(1);opacity:.72;transition:filter .3s var(--ez),opacity .3s var(--ez)} .proof .badge:hover img{filter:grayscale(0);opacity:1} .proof .badge span{display:block;font-size:12px;line-height:1.5;letter-spacing:.04em} .proof .badge b{display:block;font-weight:500;color:var(--ink);margin-bottom:3px} @media (max-width:767px){ .proof .badge{width:160px;margin-right:24px} .proof .badge img{height:96px} .proof .marquee .track{animation-duration:38s} } /* ---------- overlays ---------- footer.php prints both on every page. Without a rule hiding them they render as visible content after the copyright — a close button and a full chapter list, which is what was on screen. */ .index,.viewer{position:fixed;inset:0;z-index:210;display:none} .index[open],.viewer[open]{display:block} .index .ground,.viewer .ground{position:absolute;inset:0;background:var(--surface);opacity:.98} .index .sheet,.viewer .sheet{position:absolute;inset:0;overflow:auto;padding:12vh 6vw 8vh;display:grid;place-items:center} .shut{position:fixed;top:26px;left:5vw;z-index:3;border:0;background:transparent;cursor:pointer; font-family:var(--body);font-weight:500;font-size:15px;color:var(--muted);padding:6px 2px; transition:color .5s var(--ez)} .shut:hover{color:var(--ink)} /* the overlay's list is older markup and must not inherit .chapters */ .index .chapters{position:static;padding:0} .index .chapters ol{list-style:none;margin:0;padding:0;max-width:900px} .index .chapters li{display:flex;align-items:baseline;gap:clamp(10px,2vw,26px);padding:.16em 0; margin-left:calc(var(--i,0) * clamp(0px,2.6vw,48px))} .index .chapters .no{font-family:var(--display);font-style:italic;font-size:28px;color:var(--muted);flex:0 0 auto} .index .chapters .name{font-family:var(--display);font-size:clamp(30px,5vw,72px);line-height:1.05; color:var(--ink);text-decoration:none;transition:color .5s var(--ez)} .index .chapters li:hover .name{color:var(--verm)} .index .chapters .from{font-size:13px;color:var(--muted);flex:0 0 auto} .viewer .chrome{position:fixed;z-index:4;border:0;background:transparent;color:var(--ink);cursor:pointer; font-family:var(--body);font-size:22px;line-height:1;padding:10px} .viewer .chrome.prev{left:4vw;top:50%;translate:0 -50%} .viewer .chrome.next{right:4vw;top:50%;translate:0 -50%} .viewer .chrome.cap{left:0;right:0;bottom:5vh;text-align:center;font-size:13px;color:var(--muted);pointer-events:none} .chips{display:contents} @media (max-width:900px){ .sitefoot .mesh{text-align:left} } /* ---------- circular arrows, used by the reviews carousel ---------- */ .controls{display:flex;align-items:center;gap:14px} .arrow{width:52px;height:52px;border-radius:50%;border:1px solid rgba(28,26,23,.2); background:transparent;cursor:pointer;display:grid;place-items:center;padding:0; transition:background-color .5s var(--ez),border-color .5s var(--ez)} .arrow svg{width:22px;height:22px;fill:var(--ink);transition:fill .5s var(--ez)} .arrow:hover{background:var(--ink);border-color:var(--ink)} .arrow:hover svg{fill:var(--surface)} .arrow:focus-visible{outline:2px solid var(--verm);outline-offset:3px} /* the hero's "studio" mark, beneath the wordmark inside the circle */ .vhero .submark{width:min(96px,17vmin);height:auto;margin:clamp(6px,1vmin,12px) auto 0; filter:drop-shadow(0 1px 14px rgba(28,26,23,.55))} /* ---------- the floating pair: WhatsApp and Enquire ---------- 96px discs, 12.5px caps on one line. They appear once the hero is behind you, so they never compete with the circle. */ .wrs-float{position:fixed;right:clamp(16px,2vw,26px);bottom:max(22px,env(safe-area-inset-bottom)); z-index:60;display:flex;gap:11px;align-items:center; opacity:0;pointer-events:none;transform:translateY(14px); transition:opacity .9s var(--oa-cubic),transform .9s var(--oa-cubic)} .wrs-float.on{opacity:1;pointer-events:auto;transform:none} .wrs-float a{width:96px;height:96px;border-radius:50%;display:flex;align-items:center;justify-content:center; font-family:var(--body);font-size:12.5px;letter-spacing:.01em;text-transform:uppercase; white-space:nowrap;text-decoration:none; transition:scale .9s var(--oa-cubic),background .9s var(--oa-cubic)} .wrs-float a:hover{scale:1.04} .wrs-float .enq{background:var(--ink);color:var(--surface)} .wrs-float .enq:hover{background:var(--verm);color:var(--surface)} .wrs-float .wa{border:1px solid rgba(28,26,23,.28);background:rgba(248,248,247,.72); backdrop-filter:blur(.25rem);-webkit-backdrop-filter:blur(.25rem);color:var(--ink)} @media (max-width:700px){ .wrs-float a{width:82px;height:82px;font-size:11px} .wrs-float{gap:9px} } /* ---------- client work: the live site's marquee, ported ---------- Full bleed, images duplicated once, the track translated -50% so the loop is seamless. No JavaScript. 390px tall on desktop, 300px under 768px. */ .clients{width:100%;overflow:hidden;position:relative} .clients__track{display:flex;flex-wrap:nowrap;width:max-content; animation:wrs-scroll 30s linear infinite} .clients__track img{height:390px;width:auto;max-width:none;display:block;flex:0 0 auto; margin:0 4px 0 0;object-fit:cover} @keyframes wrs-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media (max-width:767px){ .clients__track img{height:300px} } @media (prefers-reduced-motion:reduce){ .clients__track{animation:none} } /* ---------- corrections ---------- */ /* the ported LP block carries its own counter numeral; the numerals are retired */ .wrs-process::before, .wrs-process.wrs-proc-pin .wrs-process__pin::before{content:none!important} /* awards: the heading needs air before the laurels start */ .proof .marquee{margin-top:clamp(48px,7vh,96px)} /* the rosette sits on the same axis as the heading it introduces */ .welcome .rosette{margin:0 0 clamp(20px,2.4vw,32px)} /* the tile labels say the query back, in caps as the live site has them */ .chapters .name{text-transform:uppercase;letter-spacing:.02em} /* emphasis inside the prose: the facts, not the adjectives */ .welcome .say p b,.welcome .say p strong, .spaces .lede b,.spaces .lede strong{font-weight:500;color:var(--ink)} .spaces .lede--open{font-size:clamp(21px,2vw,28px);line-height:1.45;color:var(--ink);margin:0 0 clamp(18px,2vw,28px)} .spaces .lede p{margin:0 0 clamp(14px,1.6vw,22px);max-width:62ch} /* ---------- headings, centred everywhere ---------- The pinned sections used to place eyebrow, title and lead at fixed absolute tops. Any set of numbers collides once a title wraps, so the heading block now flows normally above the sequence and centres like every other one. */ /* Both pinned sequences animate opacity and transform on their headings. Two blocks here forced those static — written to cure overlaps that came from long titles, which are now two words — and in doing so disabled the arch and the process sequences entirely. Removed. The LP's own rules stand. */ /* the spaces prose centres with its heading */ .spaces .floorhead{text-align:center} .spaces .lede p,.spaces .lede--open{margin-left:auto;margin-right:auto} .spaces .closing{margin-left:auto;margin-right:auto;text-align:center} .welcome .say{margin-left:auto;margin-right:auto;text-align:center} .welcome .say p{margin-left:auto;margin-right:auto} .welcome .say .gh{left:50%;transform:translateX(-50%)} .welcome .rosette{margin:0 auto clamp(20px,2.4vw,32px)} /* the H1 pair: the second half dissolves into the ground. Used once, at the top of the page — on a sentence heading it would fade out the facts. */ .welcome .display .ghostline{display:block; background:linear-gradient(180deg,var(--ink) 10%,rgba(28,26,23,.06) 92%); -webkit-background-clip:text;background-clip:text;color:transparent} /* reviews: the attribution earns its place, and the arrows sit under the quote */ .proof .voices cite{display:block;text-align:right;font-style:normal;margin-top:clamp(22px,2.6vw,36px)} .proof .voices cite b{display:block;font-family:var(--display);font-weight:400; font-size:clamp(19px,1.7vw,26px);color:var(--ink);margin:0 0 5px} .proof .voices cite span{display:block;font-family:var(--body);font-size:14px; letter-spacing:.06em;text-transform:uppercase;color:var(--muted)} /* the room name on the centre frame, rising as the set changes */ .spaces .centre .roomname{position:absolute;left:clamp(18px,2vw,34px);bottom:clamp(16px,2vh,30px); margin:0;z-index:3;font-family:var(--display);font-weight:400;color:#fff;line-height:1; font-size:clamp(20px,2.2vw,34px);text-shadow:0 1px 18px rgba(0,0,0,.38); overflow:hidden} .spaces .centre .roomname span{display:block; transition:transform .9s var(--oa-cubic),opacity .9s var(--oa-cubic)} .spaces .centre .roomname.out span{transform:translate3d(0,100%,0);opacity:0} /* The sequence is the LP's. These overrides used to flatten it into a static row — written to cure an overlap that no longer exists now the title is two words — which is why the animation stopped running. They are gone. */ /* the arch hands the sky here; it sits at very low opacity, almost white */ /* the opacity is written inline by site.js as the arch hands the layer over */ .wrs-process__after{padding-top:clamp(44px,6vh,90px);text-align:center} .wrs-process__after .wrs-process__cta{display:flex;gap:12px;justify-content:center;margin-top:clamp(22px,3vw,34px)} /* the spaces prose reads left, in one column, under a centred heading */ .spaces .lede{max-width:64ch;margin:0 auto;text-align:left} .spaces .lede p,.spaces .lede--open{margin-left:0;margin-right:0;text-align:left} .spaces .floorhead{text-align:left;max-width:1500px} /* the centre frame's label needs something to sit on */ .spaces .frame.centre:after{content:"";position:absolute;left:0;right:0;bottom:0;height:42%; background:linear-gradient(180deg,rgba(28,26,23,0),rgba(28,26,23,.52)); pointer-events:none;z-index:2;border-radius:0} .spaces .roomname,.spaces .count{z-index:4} /* the scatter holds still until you are leaving it, then opens out */ /* the scatter holds still, then opens out as the section leaves */ .anim .spaces .frame.sat{ transform:translate3d(calc(var(--exit,0) * var(--lx,0) * 11vw), calc(var(--exit,0) * var(--ly,0) * 11vh), 0); transition:transform .35s var(--oa-cubic)} .anim .spaces .frame.centre{transform:scale(calc(1 + var(--exit,0) * 1.5)); transform-origin:center center;transition:transform .35s var(--oa-cubic);z-index:3} /* the three ways to be photographed are not captions */ .spaces .where figcaption{margin-top:clamp(16px,1.8vw,24px); font-family:var(--display);font-size:clamp(20px,2vw,30px);letter-spacing:.01em; text-transform:none;color:var(--ink);text-align:left} /* every frame that is not arch-masked is rounded */ .chapters .shot:not(.arch),.chapters .shot:not(.arch) img, .clients__track img,.wrs-step__img,.wrs-step__img img, .spaces .where img,.reading .cutting .shot,.reading .cutting .shot img, .welcome .say figure{border-radius:0} /* the gallery tile labels, in caps, on the class they actually use */ .chapters .nm{text-transform:uppercase;letter-spacing:.03em} /* review arrows sit under the quote, centred */ /* The circles centre on the page; the counter sits beside them and the link is pushed to the right, so the arrows are not shifted off-centre by the width of the text next to them. */ .proof .voices .seqnav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center; gap:clamp(14px,2vw,28px);margin-top:clamp(24px,3vw,40px);border-top:0;padding-top:0} .proof .voices .seqnav .controls{grid-column:2;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;justify-self:center;width:100%} .proof .voices .seqnav .controls .pair{grid-column:2;display:flex;gap:clamp(12px,1.6vw,22px)} .proof .voices .seqnav .controls .count{grid-column:3;justify-self:start;padding-left:clamp(14px,1.8vw,26px)} .proof .voices .seqnav .more{grid-column:3;justify-self:end} /* ---------- 9 September, second pass ---------- */ /* the video plays at full strength; the scrims were never asked for */ .vhero .scrim{opacity:0} .vhero .scrim.edges{background:linear-gradient(180deg,rgba(28,26,23,.30),transparent 22%)} /* the credentials line runs faster, the client work slower */ .creds .track{animation-duration:12s} @media (max-width:760px){ .creds .track{font-size:clamp(19px,5.2vw,24px);animation-duration:7s;gap:28px} } .clients__track{animation-duration:52s} /* The header's two states — transparent over the video, 93% ground with a blur once scrolled — are defined at .homehead.scrolled above and were correct. A gradient pseudo-element added on 9 Sep forced the real background transparent with !important, so the menu had nothing behind it over light sections. Removed. */ /* the ground drifts as the page moves, so it reads as light in a room */ /* No drift on the ground. A fixed layer can only be moved as far as its own overhang before its edge appears, and this one is oversized by 25% of the viewport while the drift grows without limit — which is the hard horizontal line that appeared partway down the page. */ /* every button answers the pointer: a small lift and a change of ground */ .btn.ghost:hover{background:var(--ink);color:var(--surface);border-color:var(--ink)} .more a:hover{color:var(--verm);border-bottom-color:var(--verm)} .wrs-float .wa:hover{background:var(--ink);color:var(--surface);border-color:var(--ink)} /* the three ways to be photographed each get a line of their own */ .spaces .where figcaption .sub{display:block;margin-top:8px;font-family:var(--body); font-size:clamp(14px,1.15vw,16px);line-height:1.55;color:var(--muted);text-transform:none;letter-spacing:0} /* the sections between the reviews and the FAQ need photographs, full width, moving at their own rate against the scroll */ .band{position:relative;width:100%;height:clamp(320px,52vh,620px);overflow:hidden;margin:clamp(60px,9vh,130px) 0} .band img{position:absolute;left:0;top:-12%;width:100%;height:124%;object-fit:cover; will-change:transform} .anim .band img{transform:translate3d(0,calc((var(--p,.5) - .5) * -16vh),0)} /* google reviews, monochrome */ .greviews{filter:grayscale(1);max-width:1500px;margin:clamp(50px,7vh,100px) auto 0;padding:0 var(--gut)} /* ---------- 9 September, third pass ---------- */ /* a fixed measure of air between every section */ .spaces .wheredo{margin-top:clamp(90px,14vh,200px)} .spaces .where{margin-top:clamp(40px,6vh,80px)} /* ---- the overlay ---- */ /* ---- the spotlight, in both placements ---- */ /* ---- the heading ---- */ /* ---- the fields ---- */ /* ---- in place at the foot of the page ---- */ /* ========================================================================== PRESS — three cuttings The photographs sit at different sizes and different heights inside a row of fixed height. Because that row is fixed, every caption below starts on the same line. That shared baseline is what makes a stagger read as composed. ========================================================================== */ .reading .cuttings{display:grid;grid-template-columns:1fr 1.5fr 1fr; gap:clamp(24px,3.4vw,64px);align-items:stretch} .reading .cutting{display:grid;grid-template-rows:1fr auto; text-decoration:none;color:var(--ink);border-top:0;padding-top:0;height:100%} .reading .cutting .shot{display:block;overflow:hidden;border-radius:0;align-self:end;min-height:0} .reading .cutting img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;border-radius:0; transition:filter .7s var(--ez)} .reading .cutting:hover img{filter:grayscale(1)} /* the stagger: three widths, sitting on a common base line; the captions beneath share their own line because the first row is 1fr */ .reading .cutting:nth-child(1) .shot{width:100%;margin:0 0 clamp(20px,3vh,44px) 0} .reading .cutting:nth-child(2) .shot{width:100%;margin:0} .reading .cutting:nth-child(3) .shot{width:92%;margin:0 0 clamp(40px,6vh,80px) 8%} /* and the captions, all beginning on the same line */ .reading .cutting .cap{display:block;align-self:start; border-top:1px solid rgba(28,26,23,.16); padding-top:clamp(14px,1.6vw,22px);margin-top:clamp(24px,3vw,40px)} .reading .cutting .masthead{display:block;font-family:var(--display);font-weight:400; font-size:clamp(15px,1.3vw,19px);color:var(--muted);margin:0 0 10px} .reading .cutting .headline{display:block;font-family:var(--body);font-weight:400; font-size:clamp(14px,1.15vw,17px);letter-spacing:.02em;text-transform:uppercase; line-height:1.35;color:var(--ink);max-width:30ch} @media (max-width:900px){ .reading .cuttings{grid-template-columns:1fr;gap:5vh} .reading .cutting{grid-template-rows:auto auto} .reading .cutting .shot,.reading .cutting:nth-child(n) .shot{height:auto;margin-top:0} .reading .cutting img{height:auto;aspect-ratio:4/3} } /* ========================================================================== ENQUIRY One component, two placements. Written once; there are no other .enq or .ef rules anywhere in this stylesheet. Stacking: scrim 1, light 2, panel 3. All positive and all explicit, because the overlay creates and destroys stacking contexts as it fades, and a negative z-index resolves differently at each stage — which is why the spotlight showed for a moment and then dropped behind the scrim. Sizing: the overlay is built to fit one viewport. The heading is a fraction of the in-page one, the fields run two to a row, the country code sits inside the mobile field, and the consent shares its row with the button. ========================================================================== */ /* ---- the overlay shell ---- */ .enq-modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;overflow:hidden; opacity:0;pointer-events:none;transition:opacity .6s var(--oa-cubic)} .enq-modal[hidden]{display:none} .enq-modal.on{opacity:1;pointer-events:auto} .enq__scrim{position:absolute;inset:0;z-index:1; background:linear-gradient(rgba(248,248,247,.82),rgba(248,248,247,.82)), url(../img/studio/level-3-natural-light-hall-hanging-chairs-photo-studio-singapore.webp) center/cover no-repeat; backdrop-filter:blur(.5rem);-webkit-backdrop-filter:blur(.5rem)} .enq__light{position:absolute;inset:0;z-index:2;pointer-events:none; background:radial-gradient(60% 70% at 50% 46%, rgba(28,26,23,0) 0%,rgba(28,26,23,0) 42%, rgba(28,26,23,.28) 66%,rgba(28,26,23,.62) 100%)} .enq__panel{position:relative;z-index:3;width:min(880px,92vw); max-height:92vh;overflow-y:auto;overflow-x:hidden;padding:clamp(20px,3vh,40px) clamp(20px,3vw,44px); transform:translateY(16px);transition:transform .8s var(--oa-cubic);text-align:center} .enq-modal.on .enq__panel{transform:none} .enq__close{position:fixed;top:clamp(16px,2.6vh,30px);right:clamp(16px,2.6vw,38px);z-index:4; border:0;background:transparent;cursor:pointer;padding:8px 10px; font-family:var(--body);font-size:12px;letter-spacing:.2em;text-transform:uppercase; color:rgba(28,26,23,.6);transition:color .5s var(--oa-fast)} .enq__close:hover{color:var(--ink)} /* ---- the heading, sized for a viewport rather than a page ---- */ .enq__h{font-family:var(--display);font-weight:400;font-size:clamp(56px,9vw,150px); line-height:.9;letter-spacing:-.02em;color:var(--ink);margin:0} .enq__lede{font-size:clamp(14px,1.1vw,16px);line-height:1.55;color:var(--muted); margin:clamp(8px,1.4vh,16px) auto clamp(18px,3vh,32px);max-width:44ch} /* ---- the fields ---- */ .ef{max-width:660px;margin:0 auto;text-align:left} .ef__grid{display:grid;grid-template-columns:1fr 1fr; gap:clamp(12px,1.8vh,22px) clamp(16px,2.2vw,30px)} .ef__f{display:block;min-width:0} .ef__f--wide{grid-column:1 / -1} .ef__f > span{display:block;font-family:var(--display);font-weight:400; font-size:clamp(20px,1.8vw,26px);line-height:1.1;letter-spacing:0;text-transform:none; color:var(--ink);margin:0 0 8px;white-space:normal} .ef input,.ef select,.ef textarea{ width:100%;border:0;border-bottom:1px solid rgba(28,26,23,.3);background:transparent; font-family:var(--display);font-weight:400;font-size:clamp(17px,1.5vw,22px); color:var(--ink);padding:2px 0 7px;outline:none;border-radius:0; appearance:none;-webkit-appearance:none;transition:border-color .5s var(--oa-fast)} .ef textarea{font-family:var(--body);font-size:15px;line-height:1.5;resize:vertical;min-height:52px} .ef input:focus,.ef select:focus,.ef textarea:focus{border-bottom-color:var(--ink)} .ef select{padding-right:28px;cursor:pointer; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231C1A17' stroke-width='1.2'/%3E%3C/svg%3E") right 4px center/12px 8px no-repeat} .ef select:invalid,.ef select option[value=""]{color:var(--muted)} /* the dial code lives inside the mobile field, not beside it */ .ef__tel{display:grid;grid-template-columns:76px 1fr;gap:10px;align-items:end} .ef__tel select{text-align:left} /* ---- consent and send, sharing a row ---- */ .ef__err{margin:clamp(10px,1.6vh,16px) 0 0;font-size:14px;color:var(--verm)} .ef__foot{display:flex;align-items:flex-start;gap:clamp(16px,2.4vw,34px); margin-top:clamp(16px,2.6vh,30px);flex-wrap:wrap} .ef__consent{flex:1 1 320px;display:flex;gap:11px;align-items:flex-start; font-size:13.5px;line-height:1.5;color:var(--muted)} .ef__consent input{margin-top:3px;flex:0 0 auto;width:16px;height:16px;accent-color:var(--ink)} .ef__send{flex:0 0 auto;border:0;border-radius:0;background:var(--ink);color:var(--surface); cursor:pointer;font-family:var(--body);font-size:12px;letter-spacing:.18em; text-transform:uppercase;padding:15px 40px; transition:transform .5s var(--oa-fast),background .5s var(--oa-fast)} .ef__send:hover{background:var(--verm);transform:translateY(-2px)} .ef__sent{font-family:var(--display);font-size:clamp(20px,2.2vw,30px);line-height:1.3;margin:0;text-align:center} /* ---- in place, at the foot of the page ---- */ .enquiry{position:relative;isolation:isolate;padding:clamp(70px,11vh,150px) var(--gut);text-align:center} .enquiry__light{position:absolute;inset:0;z-index:0;pointer-events:none; background:radial-gradient(52% 60% at 50% 48%, rgba(250,249,246,.9) 0%,rgba(250,249,246,.7) 42%,rgba(250,249,246,0) 74%)} .enquiry > *{position:relative;z-index:1} .enquiry .enq__h{font-size:clamp(64px,11vw,190px)} .enquiry .enq__lede{margin-bottom:clamp(26px,4vh,52px)} @media (max-width:700px){ .enq__panel{width:100%;max-height:100vh;padding:clamp(60px,10vh,90px) 6vw 30px} .ef__grid{grid-template-columns:1fr} .ef__foot{flex-direction:column;align-items:stretch;gap:14px;margin-top:14px} .ef__send{width:100%} .enq__h{font-size:clamp(38px,12vw,64px)} } /* ---------- the wordmark ---------- Inline SVG, filled with currentColor. .lockup is already --surface over the video and --ink once scrolled, so the mark inverts with no rule of its own. */ .lockup .wm{display:block;line-height:0} /* the width is set from the file's own ratio (88.635 / 12.435) rather than left to width:auto, which browsers resolve unreliably on an inline svg */ .lockup .wmsvg{display:block;height:clamp(24px,2.2vw,32px);width:calc(clamp(24px,2.2vw,32px) * 7.128); overflow:visible;flex-shrink:0} /* the departure line, in the display face at the section-heading scale */ .depart .words .permanence.display{font-family:var(--display);font-weight:400; font-size:clamp(44px,8vw,140px);line-height:.92;letter-spacing:-.02em; color:#fff;max-width:12ch;margin:0 auto} .depart .words{width:min(14ch,84vw)} /* B. the arch strip: the photographs sit high enough to fill the arch's crown */ .whyus.archpin .archslide img{object-position:center 30%} /* C. how it works: a smooth arrival for the five-card grid, and the buttons sitting closer to the cards */ .wrs-process.wrs-proc-pin .wrs-steps.is-grid .wrs-step{ transition:opacity .9s var(--oa-cubic),transform .9s var(--oa-cubic)} .wrs-process__after{padding-top:clamp(18px,3vh,40px)} /* F. air between the press heading and the cuttings */ .reading .cuttings{margin-top:clamp(56px,8vh,120px)} /* ========================================================================== FOOTER — one composition A rounded sheet on a slightly warmer ground, a gold thread behind, the menu scattered large across the middle, the statement at the left, the facts in a row along the base. There are no other .sitefoot rules. ========================================================================== */ .sitefoot{position:relative;isolation:isolate;overflow:clip; margin:clamp(40px,7vh,110px) clamp(10px,1.4vw,22px) clamp(10px,1.4vw,22px); padding:clamp(60px,9vh,130px) clamp(24px,4vw,70px) clamp(28px,4vh,50px); background:linear-gradient(168deg,#F1EFEB 0%,#F8F8F7 48%,#ECE9E3 100%); border-radius:0;color:var(--ink)} .sitefoot .footthread{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none; fill:none;stroke:var(--gold);stroke-width:1;opacity:.55} .sitefoot .footgrid,.sitefoot .footbase,.sitefoot .footcopy{position:relative;z-index:1} /* the upper composition: statement left, menu across the rest */ .sitefoot .footgrid{display:grid;grid-template-columns:minmax(220px,.9fr) 2.4fr; gap:clamp(30px,5vw,90px);align-items:start;max-width:1500px;margin:0 auto} .sitefoot .lockup{color:var(--ink)} .sitefoot .lockup .wmsvg{height:clamp(36px,3.2vw,46px);width:calc(clamp(36px,3.2vw,46px) * 7.128)} .sitefoot .footline{font-family:var(--display);font-weight:400; font-size:clamp(30px,3.6vw,58px);line-height:1;letter-spacing:-.01em;margin:clamp(34px,5vh,70px) 0 0} .sitefoot .footline span{display:block} .sitefoot .footline span+span{padding-left:1.4ch;color:var(--muted)} .sitefoot .footwhere{font-size:clamp(14px,1.05vw,16px);line-height:1.6;color:var(--muted); max-width:30ch;margin:clamp(22px,3vh,38px) 0 0} /* the menu: large, staggered, with a small plus like a map pin */ .sitefoot .footnav{list-style:none;margin:0;padding:0; display:flex;flex-wrap:wrap;align-items:baseline;justify-content:flex-start; gap:clamp(10px,1.6vh,26px) clamp(22px,3.4vw,70px)} .sitefoot .footnav li{margin:0;transform:translateY(calc((var(--i,0) - 4) * .55vh))} .sitefoot .footnav a{display:inline-flex;align-items:baseline;gap:.35em; font-family:var(--display);font-weight:400;font-size:clamp(32px,4.6vw,78px);line-height:1; color:var(--ink);text-decoration:none;transition:color .5s var(--oa-fast),transform .5s var(--oa-fast)} .sitefoot .footnav a .plus{font-family:var(--body);font-size:.32em;color:var(--gold);transform:translateY(-.5em)} .sitefoot .footnav a:hover{color:var(--verm);transform:translateY(-3px)} .sitefoot .footnav .chapter a{color:var(--muted)} .sitefoot .footnav .chapter a:hover{color:var(--verm)} /* the base: four quiet facts */ .sitefoot .footbase{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(20px,3vw,50px);max-width:1500px;margin:clamp(60px,9vh,130px) auto 0; padding-top:clamp(22px,3vh,36px);border-top:1px solid rgba(28,26,23,.14)} .sitefoot .footfact{font-size:15px;line-height:1.65;color:var(--ink)} .sitefoot .footfact .lbl{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase; color:var(--muted);margin:0 0 10px} .sitefoot .footfact a{color:var(--ink);text-decoration:none;border-bottom:1px solid rgba(28,26,23,.18); transition:border-color .4s var(--oa-fast),color .4s var(--oa-fast)} .sitefoot .footfact a:hover{color:var(--verm);border-bottom-color:var(--verm)} .sitefoot .footfact small{display:block;color:var(--muted);margin-top:6px;font-size:13px} .sitefoot .socials{list-style:none;margin:0;padding:0;display:flex;gap:10px;flex-wrap:wrap} .sitefoot .socials a{width:44px;height:44px;border-radius:50%;border:1px solid rgba(28,26,23,.22); display:flex;align-items:center;justify-content:center; color:var(--ink);text-decoration:none;border-bottom-width:1px; transition:background .5s var(--oa-fast),color .5s var(--oa-fast),transform .5s var(--oa-fast)} .sitefoot .socials a:hover{background:var(--ink);color:var(--surface);transform:translateY(-3px);border-color:var(--ink)} .sitefoot .socials svg{width:18px;height:18px;display:block;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .sitefoot .socials svg .f{fill:currentColor;stroke:none} .sitefoot .footcopy{max-width:1500px;margin:clamp(28px,4vh,50px) auto 0;font-size:12px; letter-spacing:.04em;color:var(--muted)} .sitefoot .footcopy a{color:var(--muted);text-decoration:none;border-bottom:1px solid rgba(28,26,23,.18)} @media (max-width:900px){ .sitefoot .footgrid{grid-template-columns:1fr} .sitefoot .footnav li{transform:none} .sitefoot .footnav a{font-size:clamp(28px,8vw,44px)} .sitefoot .footbase{grid-template-columns:1fr 1fr} } @media (max-width:560px){ .sitefoot .footbase{grid-template-columns:1fr} } /* ========================================================================== AWARDS — seven laurels, one arrangement Tatler in the centre, the six others around it on a twelve-column field, each at its own size. Greyscale, full opacity, no hover change. They drift outward on the section's --p. Under each: who, and what. There are no other .laurel rules. ========================================================================== */ .proof .laurels{position:relative;max-width:1400px;margin:clamp(56px,8vh,110px) auto 0;padding:0 var(--gut); display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:auto auto auto; gap:clamp(26px,3vw,52px);align-items:center} .proof .laurel{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0} .proof .laurel:nth-child(1){grid-column:5/9;grid-row:2} .proof .laurel:nth-child(2){grid-column:1/4;grid-row:1} .proof .laurel:nth-child(3){grid-column:9/12;grid-row:1} .proof .laurel:nth-child(4){grid-column:9/12;grid-row:3} .proof .laurel:nth-child(5){grid-column:1/4;grid-row:3} .proof .laurel:nth-child(6){grid-column:5/8;grid-row:1} .proof .laurel:nth-child(7){grid-column:10/13;grid-row:2} .anim .proof .laurel{ transform:translate3d(calc(var(--p,0) * var(--lx,0) * 4.5vw), calc(var(--p,0) * var(--ly,0) * 3.2vh), 0); transition:transform 1.5s var(--oa-cubic)} .proof .laurel__badge{display:block;margin:0 0 clamp(14px,1.8vw,24px)} .proof .laurel__badge img{display:block;width:auto; height:calc(clamp(150px,14vw,240px) * var(--sc,1));filter:grayscale(1);opacity:1} .proof .laurel:nth-child(1) .laurel__badge img{height:clamp(220px,21vw,360px)} .proof .laurel__who{font-family:var(--display);font-size:clamp(14px,1.15vw,17px);color:var(--muted);margin:0 0 4px} .proof .laurel__what{font-family:var(--body);font-size:clamp(12px,1vw,14px);letter-spacing:.04em; text-transform:uppercase;line-height:1.3;color:var(--ink);margin:0;max-width:22ch} .proof .laurel__say{display:none} .proof .more.centred a{font-family:var(--display);font-size:clamp(19px,1.8vw,28px);border-bottom-width:1px;padding-bottom:4px} .band{height:clamp(480px,78vh,900px)} .band img{filter:none;transition:filter .7s var(--ez)} .band:hover img{filter:grayscale(1)} @media (max-width:1000px){ .proof .laurels{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto} .proof .laurel,.proof .laurel:nth-child(n){grid-column:auto;grid-row:auto} .proof .laurel:nth-child(1){grid-column:1/-1} .anim .proof .laurel{transform:none} } /* ---- the thread, continued below the spaces ---- */ .proof,.reading,.asked{position:relative;overflow:clip} .proof > .thread,.reading > .thread,.asked > .thread{position:absolute;inset:0;width:100%;height:100%; z-index:0;pointer-events:none;fill:none;stroke:var(--verm);stroke-width:1;opacity:.28} .proof > .thread ~ *,.reading > .thread ~ *,.asked > .thread ~ *{position:relative;z-index:1} /* ---- the hero on phones: the landscape clip cropped to a portrait ---- */ @media (max-width:760px){ .vhero video,.vhero .poster{object-fit:cover;object-position:50% 40%;width:100%;height:100%} } /* ========================================================================== PHONES — placed last so these override the desktop motion rules on cascade order rather than on specificity ========================================================================== */ @media (max-width:900px){ /* the scatter does not drift on phones; the arrows sit beneath the frame */ .anim .spaces .frame.sat,.anim .spaces .frame.centre{transform:none} .spaces .arrows{position:static;transform:none;justify-content:center;margin:14px 0 6px} /* your chapter: the two large tiles before the five small ones */ .chapters .journey{display:flex;flex-direction:column} .chapters .journey > .jhead:nth-of-type(1){order:1} .chapters .journey > .two{order:2} .chapters .journey > .arc:not(.four){order:3} .chapters .journey > .jhead:nth-of-type(2){order:4} .chapters .journey > .arc.four{order:5} .chapters .journey > .jhead:nth-of-type(3){order:6} .chapters .journey > .tile.corp{order:7} /* the press: no fixed row height on phones, so nothing sits above the cuttings */ .reading{padding:8vh 0} .reading .cuttings{margin-top:clamp(28px,5vh,48px)} .reading .cutting{grid-template-rows:auto auto;height:auto} .reading .cutting:nth-child(n) .shot{width:100%;margin:0} } /* Studio · Outdoors · Home · Photoshoots — one line, the dots in gold */ .spaces .wherewords{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline; gap:0 .18em;max-width:none} .spaces .wherewords i{font-style:normal;color:var(--gold);font-size:.55em;transform:translateY(-.22em);margin:0 .08em} @media (max-width:760px){ .spaces .wherewords{font-size:clamp(34px,9vw,52px)} }