/* Somdesign Architects: som.css
   Rebuilt 2026-10-21 to canvas-final/somdesign/FINAL.html (the locked design). FINAL's values are px at 1440 and are used as they are:
   section order, copy, type, colour, spacing and pictures follow it. FINAL's body text has no font-family, so it renders in the browser
   default serif and black (its Inter Tight wrapper is empty). Since 2026-10-21 (Abdi) all text is Inter Tight except the Geist Mono labels.
   The 2026-10-20 motion is kept: the loader, header, cursor, hover sweeps, reveals, pinned drawings scene, parallax and the rest
   (js/som.js), now fitted to FINAL's places. Rem-based pieces (cursor, tags, loader, reveal offsets) keep the fluid root size below.
   FINAL's stills and static blocks are canvas stand-ins: the fixed sheet frame, the fixed header, the accordion rows and the hover-only pieces
   are as they were before the sprint, set in FINAL's type, colour and spacing. */

/* Fonts (Abdi 2026-10-21): Inter Tight for all text, with no serif fallback, except the mono labels: Heron's Geist Mono (FINAL), weight 400 only (Abdi 2026-10-21).
   The BT Grotesk Sub alias is retired. Licence of Inter Tight as a stand-in for BT Grotesk: UNCONFIRMED, see FONTS-TO-LICENSE.md. */
@font-face{font-family:"Inter Tight";src:url(../fonts/inter-tight-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter Tight";src:url(../fonts/inter-tight-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Inter Tight";src:url(../fonts/inter-tight-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Inter Tight";src:url(../fonts/inter-tight-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(../fonts/geist-mono-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}

:root{
  /* colour: FINAL */
  --paper:#F5F5EF;
  --paper-exit:#F5F5ED;       /* exit sweep on outline controls */
  --ink:#282828;
  --ink-72:rgba(40,40,40,.72);/* secondary text */
  --hairline:#B3B3AF;
  --tick:#D9D9D9;
  --white:#FFFFFF;
  --accent:#FA3600;           /* graphics only: markers, squares, lines */
  --accent-ill:#F15534;       /* drag marquee */
  --red:#D02E00;              /* red text and red fills that carry light text */
  --red-text:#D02E00;
  --red-fill:#D02E00;
  --strip:#EAEAE2;            /* projects-on-file strip */
  --grain:url(../img/grain.png);
  --grain-bg:var(--paper) var(--grain) 0 0/124px 124px repeat;

  /* type (Abdi 2026-10-21): Inter Tight for all text, Geist Mono for the labels (FINAL) */
  --f-body:"Inter Tight",Arial,sans-serif;
  --f-mono:"Geist Mono",ui-monospace,monospace;
  --f-sans:"Inter Tight",Arial,sans-serif;
  --u:min(1px,calc(100vw / 1440)); /* 1px from 1440 up; large type scales down with the width below it */
  --frame:.8rem;              /* the paper margin of the sheet frame: body padding, hairline inset, fixed header inset */
  --line:max(1px,.1rem);
  --hdr-h:61px;               /* the fixed header: FINAL's 60 px bar plus its 1 px line; the page starts this far down, as in FINAL */
  --screen-h:calc(100vh - 1.6rem);

  /* motion (unchanged from the 2026-10-20 build) */
  --ease:cubic-bezier(.25,.1,.25,1);
  --ease-roll:cubic-bezier(.625,.05,0,1);
  --ease-tick:cubic-bezier(.23,1,.32,1);
  --ease-circ-in:cubic-bezier(.6,.04,.98,.335);
  --ease-draw:cubic-bezier(.22,1,.36,1);
  --ease-p1:cubic-bezier(.5,1,.89,1);
  --ease-p3:cubic-bezier(.25,1,.5,1);
  --ease-menu:cubic-bezier(.33,1,.68,1);
  --d-sweep:.58s;
  --d-roll:.48s;
  --d-label:.15s;
  --d-ui:.4s;
  --d-link:.2s;
  --d-tick:.5s;
  --d-bar:.1s;
  --d-pulse:1.5s;
  --d-menu:.437s;
  --d-ticker:15s;

  /* layers */
  --z-header:10000000;
  --z-loader:2147483000;
  --z-frame:2147483500;
  --z-cursor:2147483600;
  --z-skip:2147483647;

  /* drawn pieces */
  --sweep:url(sweep.png);     /* 20 frames side by side; mask-size 2000% 100% */
  --dash-ink:repeating-linear-gradient(90deg,var(--ink-72) 0 1px,transparent 0 3px,var(--ink-72) 0 12px,transparent 0 13px);
  --dash-btn:repeating-linear-gradient(180deg,currentColor 0 .3rem,transparent 0 .5rem);
}
@supports (height:100dvh){:root{--screen-h:calc(100dvh - 1.6rem)}}

/* Root: fluid rem, three bands. Only the rem-based pieces read it (cursor, tags, loader, reveal offsets, scene curtain). */
html{font-size:.578704vw;-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--paper);scrollbar-width:none}
html::-webkit-scrollbar{display:none}
@media (max-width:991px){html{font-size:1.19904vw}}
@media (max-width:767px){html{font-size:2.54453vw}}

body{margin:0;padding:var(--frame);background:var(--grain-bg);color:#000;font-family:var(--f-body);font-size:16px;overflow-x:clip} /* FINAL: browser default size, black, no tracking; the root size above is only for the rem-based motion pieces */
h1,h2,h3,h4,p,ul,ol,figure,address,blockquote{margin:0;padding:0}
ul,ol{list-style:none}
address{font-style:normal}
a{color:inherit;text-decoration:none}
img,svg,canvas{display:block;max-width:100%}
img{height:auto}
button{font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;background:none;border:0;border-radius:0;padding:0;margin:0;text-align:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
:focus{outline:0}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
::selection{background:var(--ink);color:var(--paper)}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;top:16px;left:16px;z-index:var(--z-skip);padding:12px 16px;background:var(--ink);color:var(--white);font:400 12px var(--f-mono);text-transform:uppercase;letter-spacing:0;transform:translateY(-300%);opacity:0}
.skip:focus,.skip:focus-visible{transform:none;opacity:1}
main{display:block}
img[hidden]{display:none!important}
main section[id]{scroll-margin-top:calc(var(--hdr-h) + var(--frame))}

/* 1. Sheet frame: inset hairlines and the paper margin above and below them (fixed, as before the sprint; FINAL's 1 px box border is its canvas stand-in) */
.sheet{position:fixed;inset:0;z-index:var(--z-frame);pointer-events:none}
.sheet::before,.sheet::after{content:"";position:absolute;left:0;right:0;height:var(--frame);background:var(--grain-bg)}
.sheet::before{top:0}
.sheet::after{bottom:0}
.sheet-l{position:absolute;background:var(--hairline)}
.sheet-l--t,.sheet-l--b{left:var(--frame);right:var(--frame);height:var(--line)}
.sheet-l--l,.sheet-l--r{top:var(--frame);bottom:var(--frame);width:var(--line)}
.sheet-l--t{top:var(--frame)}
.sheet-l--b{bottom:var(--frame)}
.sheet-l--l{left:var(--frame)}
.sheet-l--r{right:var(--frame)}
/* the page runs inside the frame (body padding); the header is fixed, so the page starts one header height down, as in FINAL */
.page{display:flex;flex-direction:column;padding-top:var(--hdr-h)}
/* No sideways scroll (Abdi 2026-10-21). Cause: the reveal start state scale(1.25) of the studio drawings, the process pictures, the
   architects and work pictures and the contact picture reached past the right edge until each reveal played; body's overflow-x is
   handed to the viewport, so it never clipped them. Each of those sections now clips sideways (clip, not hidden: sticky and pins work). */
.studio,.process,.architects,.work,.contact{overflow-x:clip}
.sq{display:block;flex:none;width:9px;height:9px;background:var(--accent)}

/* Rulers and registration marks no longer exist in FINAL; the decorations are gone from the markup. */

/* 16. Buttons and links: the 19-step mask sweep, label roll and arrow roll.
   ::before is the fill (sweeps in on hover, stays solid); ::after is the exit layer in the rest
   colour, swept over the fill on leave (animation restarts when :hover ends). CSS only. */
:where(.hdr-tab-link,.hdr-menu a,.hdr-cta,.hero-more,.btn,.cell--wa,.ftr-cta,.cta){--sw-fill:var(--ink);--sw-exit:var(--paper-exit);--sw-c:var(--ink-72);--sw-c-on:var(--white)}
:is(.hdr-tab-link,.hdr-menu a,.hdr-cta,.hero-more,.btn,.cell--wa,.ftr-cta,.cta){
  position:relative;isolation:isolate;overflow:hidden;color:var(--sw-c);
  transition:color var(--d-label) var(--ease-circ-in),border-color .3s ease;
}
:is(.hdr-tab-link,.hdr-menu a,.hdr-cta,.hero-more,.btn,.cell--wa,.ftr-cta,.cta)::before,
:is(.hdr-tab-link,.hdr-menu a,.hdr-cta,.hero-more,.btn,.cell--wa,.ftr-cta,.cta)::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  -webkit-mask:var(--sweep) 0 0/2000% 100% no-repeat;mask:var(--sweep) 0 0/2000% 100% no-repeat;
}
:is(.hdr-tab-link,.hdr-menu a,.hdr-cta,.hero-more,.btn,.cell--wa,.ftr-cta,.cta)::before{background:var(--sw-fill);transition:-webkit-mask-position 0s linear var(--d-sweep),mask-position 0s linear var(--d-sweep)}
:is(.hdr-tab-link,.hdr-menu a,.hdr-cta,.hero-more,.btn,.cell--wa,.ftr-cta,.cta)::after{background:var(--sw-exit);animation:sw-out var(--d-sweep) steps(19)}
@keyframes sw-out{from{-webkit-mask-position:0 0;mask-position:0 0}to{-webkit-mask-position:100% 0;mask-position:100% 0}}
/* label roll: the label sits once in the markup; the copy that rolls in is generated from its data-t. Any number of lines. */
.lbl{display:block;overflow:hidden}
.lbl>span{position:relative;display:block;transition:transform var(--d-roll) var(--ease-roll)}
.lbl>span::after{content:attr(data-t);content:attr(data-t) / "";position:absolute;left:0;top:100%;width:100%}
/* arrow roll: the glyph slides out to the right while its copy slides in from the left */
.ico{position:relative;display:block;flex:none;overflow:hidden;line-height:1}
.arrow{position:relative;display:block;font-style:normal;transition:transform var(--d-roll) var(--ease-roll)}
.arrow::before{content:"→";content:"→" / "";position:absolute;right:100%;top:0}
/* the dashed divider before the arrow: invisible at rest (FINAL's buttons have none), white once the fill is in */
:is(.btn,.cta) .ico::before{content:"";position:absolute;left:0;top:.5rem;bottom:.5rem;width:var(--line);background:var(--dash-btn);color:transparent;transition:color var(--d-roll) var(--ease-roll)}
@media (hover:hover){
  :is(.hdr-tab-link,.hdr-menu a,.hdr-cta,.hero-more,.btn,.cell--wa,.ftr-cta,.cta):hover{color:var(--sw-c-on)}
  :is(.hdr-tab-link,.hdr-menu a,.hdr-cta,.hero-more,.btn,.cell--wa,.ftr-cta,.cta):hover::before{-webkit-mask-position:100% 0;mask-position:100% 0;transition:-webkit-mask-position var(--d-sweep) steps(19),mask-position var(--d-sweep) steps(19)}
  :is(.hdr-tab-link,.hdr-menu a,.hdr-cta,.hero-more,.btn,.cell--wa,.ftr-cta,.cta):hover::after{animation:none}
  :is(.hdr-tab-link,.hdr-menu a,.hero-more,.btn,.cell--wa,.ftr-cta,.cta):hover .lbl>span{transform:translateY(-100%)}
  .hdr-cta:hover .lbl>span{transform:translateY(-100%)} /* three lines at 1440: the roll is the label's own height, whatever the line count */
  :is(.hdr-cta,.hero-more,.btn,.cta,.work-row):hover .arrow{transform:translateX(100%)}
  :is(.btn,.cta):hover .ico::before{color:var(--white)}
}
:is(.hdr-tab-link,.hdr-menu a,.hdr-cta,.hero-more,.btn,.cell--wa,.ftr-cta,.cta):focus-visible{color:var(--sw-c-on)}
:is(.hdr-tab-link,.hdr-menu a,.hdr-cta,.hero-more,.btn,.cell--wa,.ftr-cta,.cta):focus-visible::before{-webkit-mask-position:100% 0;mask-position:100% 0;transition:-webkit-mask-position var(--d-sweep) steps(19),mask-position var(--d-sweep) steps(19)}
:is(.hdr-tab-link,.hdr-menu a,.hdr-cta,.hero-more,.btn,.cell--wa,.ftr-cta,.cta):focus-visible::after{animation:none}
:is(.hdr-tab-link,.hdr-menu a,.hdr-cta,.hero-more,.btn,.cell--wa,.ftr-cta,.cta):focus-visible .lbl>span{transform:translateY(-100%)}
:is(.hdr-cta,.hero-more,.btn,.cta,.work-row):focus-visible .arrow{transform:translateX(100%)}
:is(.btn,.cta):focus-visible .ico::before{color:var(--white)}

/* 2. Header and navigation (FINAL: 60 px bar, logo left, four tabs and the Hill cell right). It is fixed and hides on scroll down, as before. */
.hdr{position:fixed;top:var(--frame);left:var(--frame);right:var(--frame);z-index:var(--z-header);display:flex;align-items:stretch;height:calc(var(--hdr-h) - 1px);border-bottom:1px solid var(--hairline);background:var(--grain-bg);transition:transform var(--d-ui) ease}
.hdr-logo{flex:1 1 50%;display:flex;align-items:center;padding:0 27px}
.hdr-logo img{width:133px;height:auto}
.hdr-burger{display:none}
.hdr-nav{flex:1 1 50%;display:flex;position:static;inset:auto;width:auto;height:auto;margin:0;padding:0;border:0;overflow:visible;background:none;font-family:var(--f-mono);font-size:10px;letter-spacing:0;text-transform:uppercase;color:var(--ink-72);justify-content:flex-start;text-align:left}
.hdr-tabs{display:contents}
.hdr-tab{position:relative;display:flex;flex:1 1 20px;border-left:1px solid var(--hairline)} /* FINAL: the link itself is the flex item (basis 0 plus its 20 px padding); the 20 px basis keeps the same split */
.hdr-tab-link{display:block;flex:1 1 auto;padding:10px;font-size:calc(26 * var(--u))}
.hdr-tick{position:absolute;inset:0;overflow:hidden;pointer-events:none;color:var(--ink-72);opacity:0;transition:color var(--d-ui) ease,opacity var(--d-ui) ease}
.hdr-tick::before,.hdr-tick::after{content:"";box-sizing:border-box;position:absolute;right:6px;width:6px;height:6px;border-right:1px solid;transition:transform var(--d-tick) var(--ease-tick)}
.hdr-tick::before{top:6px;border-top:1px solid;transform:translate(calc(100% + 12px),calc(-100% - 12px))}
.hdr-tick::after{bottom:6px;border-bottom:1px solid}
.hdr-menu{box-sizing:border-box;position:absolute;top:100%;left:-1px;z-index:2;width:220px;display:none;grid-template-rows:repeat(4,0fr);border:1px solid var(--hairline);background:var(--grain-bg);opacity:0;pointer-events:none;transition:opacity var(--d-ui) ease,grid-template-rows var(--d-ui) ease,display var(--d-ui) allow-discrete}
.hdr-menu li{min-height:0;overflow:hidden}
.hdr-menu li:not(:last-child){border-bottom:1px solid var(--hairline)}
.hdr-menu a{display:flex;align-items:center;height:36px;padding:0 12px;font-size:11.67px}
@media (min-width:992px){
  .hdr-tab:is(:hover,.is-open) .hdr-menu,html:not(.is-ready) .hdr-tab:focus-within .hdr-menu{display:grid;grid-template-rows:repeat(4,1fr);opacity:1;pointer-events:auto;transition:opacity var(--d-ui) ease,grid-template-rows var(--d-ui) ease,display var(--d-ui) allow-discrete}
  @starting-style{.hdr-tab:is(:hover,.is-open) .hdr-menu{opacity:0;grid-template-rows:repeat(4,0fr)}}
  .hdr-tab:is(:hover,.is-open) .hdr-tick,html:not(.is-ready) .hdr-tab:focus-within .hdr-tick{color:var(--accent);opacity:1}
  .hdr-tab:is(:hover,.is-open) .hdr-tick::before,html:not(.is-ready) .hdr-tab:focus-within .hdr-tick::before{transform:none}
  .hdr-tab:is(:hover,.is-open) .hdr-tick::after,html:not(.is-ready) .hdr-tab:focus-within .hdr-tick::after{transform:translate(calc(100% + 12px),calc(100% + 12px))}
  .hdr-tab.is-open .hdr-tab-link{color:var(--sw-c-on)}
  .hdr-tab.is-open .hdr-tab-link::before{-webkit-mask-position:100% 0;mask-position:100% 0}
}
/* the Hill Development cell: FINAL's red cell, ink on hover (style-hover: background #282828, colour #F5F5EF) */
.hdr-cta{flex:1.2 1 0;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;border-left:1px solid var(--hairline);box-sizing:border-box;overflow:hidden;background:var(--red);font-size:12px;line-height:1.25;font-weight:400;--sw-c:var(--paper);--sw-c-on:var(--paper);--sw-fill:var(--ink);--sw-exit:var(--red)}
.hdr-cta .ico{font-size:22px}
@media (min-width:992px){.hdr-cta .lbl{max-width:86px}} /* FINAL wraps the label in a column that is 86.0 px wide (PART OF / HILL / DEVELOPMENT); PART OF HILL needs 86.4 px, so that wrap sat on a knife edge and flipped with the 1.7 px of frame width: the column is fixed */

/* 3. Loader: hidden unless html.is-loading (set by js/som.js) */
.loader{display:none}
html.is-loading,html.is-loading body{overflow:hidden}
html.is-loading .loader{display:block;position:fixed;inset:0;z-index:var(--z-loader);overflow:hidden;background:var(--grain-bg);pointer-events:all}
.loader-art{position:absolute;top:calc(var(--frame) + 6.4rem + 3.2rem);bottom:calc(var(--frame) + 16rem + 3.2rem);left:calc(var(--frame) + 3.2rem);right:calc(var(--frame) + 3.2rem);color:var(--ink);overflow:hidden}
.loader-art svg{width:100%;height:100%}
.loader-title{position:absolute;left:calc(var(--frame) + 3.2rem);bottom:calc(var(--frame) + 3.2rem);max-width:40rem;font:600 3.424rem/3.2rem var(--f-sans);text-transform:uppercase;letter-spacing:-.02em;color:var(--ink)}
.loader-sub,.loader-log{position:absolute;left:calc(75% + 1.6rem);right:calc(var(--frame) + 3.2rem);font:400 1rem/1.3 var(--f-mono);text-transform:uppercase;letter-spacing:0;color:var(--ink-72)}
.loader-sub{bottom:calc(var(--frame) + 3.2rem + 13rem + 2.4rem);padding-bottom:.8rem;border-bottom:1px solid var(--hairline)}
.loader-log{bottom:calc(var(--frame) + 3.2rem);counter-reset:log}
.loader-log li{counter-increment:log}
.loader-log li::before{content:counter(log,decimal-leading-zero) "  "}
.loader-count{position:absolute;left:calc(var(--frame) + 3.2rem);bottom:calc(50% + 1.1rem);font:400 1.2rem/1.3 var(--f-mono);letter-spacing:0;color:var(--red)}
.loader-scan{position:absolute;left:calc(var(--frame) + 1px);top:calc(50% - 1px);width:calc(100% - 2 * var(--frame) - 2px);height:2px;background:var(--accent);transform-origin:0 50%}

/* 17. Cursor canvas (drawn by js/som.js): positioned only */
.cursor{position:fixed;inset:0;width:100%;height:100%;z-index:var(--z-cursor);pointer-events:none}

/* 4. Hero: the front-view drawing in its frame (FINAL: 54 px padding, drawing up to 1240 px, two red squares) */
.hero{display:flex;flex-direction:column}
.hero-stage{position:relative;padding:54px;display:flex;justify-content:center;align-items:center}
.hero-art{position:relative;width:100%;max-width:1240px}
.hero-drawing{width:100%;height:auto}
.hero-render{position:absolute;inset:0;display:none;width:100%;height:100%;object-fit:cover;clip-path:inset(50%)}
.hero-box{position:absolute;z-index:3;display:none;box-sizing:border-box;border:1px solid var(--accent-ill);background:linear-gradient(315deg,rgba(241,85,52,.64) 0%,rgba(245,245,239,0) 67.05%);pointer-events:none}
.hero-box.is-active{display:block}
/* the two squares of FINAL (13 px, top left at 38% 30% and 71% 58%) are the markers: a 29 px hit area around a 13 px pulsing square */
.hero .marker{position:absolute;left:var(--x);top:var(--y);z-index:4;display:grid;place-items:center;width:29px;height:29px;margin:-8px 0 0 -8px}
.hero .marker::before{content:"";width:13px;height:13px;background:var(--accent);animation:marker-pulse var(--d-pulse) ease-in-out infinite}
@keyframes marker-pulse{0%,100%{opacity:.7;transform:scale(.95)}50%{opacity:1;transform:scale(1)}}
.hero .marker[aria-expanded="true"]::before{animation:none;opacity:1;background:var(--white)}
.hero .marker[aria-expanded="true"]::after{content:"";position:absolute;width:7px;height:7px;background:linear-gradient(45deg,transparent calc(50% - .5px),var(--red) 0 calc(50% + .5px),transparent 0),linear-gradient(-45deg,transparent calc(50% - .5px),var(--red) 0 calc(50% + .5px),transparent 0)}
.tag{box-sizing:border-box;position:absolute;left:calc(var(--x) + 6.5px);top:calc(var(--y) + 6.5px);z-index:3;width:24rem;padding:4.8rem 3.2rem 1.6rem 1.6rem;background:var(--red);color:var(--white);transform:translate(calc(-100% + 1.5rem),-1.5rem);clip-path:inset(0 0 calc(100% - 3rem) calc(100% - 3rem));opacity:0;visibility:hidden;transition:clip-path var(--d-ui) var(--ease),opacity var(--d-ui) var(--ease),visibility 0s linear var(--d-ui)}
.tag.is-open{clip-path:inset(0);opacity:1;visibility:visible;transition:clip-path var(--d-ui) var(--ease),opacity var(--d-ui) var(--ease),visibility 0s}
html:not(.is-ready):not(.is-loading) :is(.hero .marker:hover,.hero .marker:focus)+.tag{clip-path:inset(0);opacity:1;visibility:visible;transition:clip-path var(--d-ui) var(--ease),opacity var(--d-ui) var(--ease),visibility 0s}
.tag-t{font:400 1.2rem/1.3 var(--f-mono);text-transform:uppercase;letter-spacing:0}
.tag-b{margin-top:.4rem;font:400 1.4rem/1.4 var(--f-mono);text-transform:uppercase;letter-spacing:0}
.hero-tip{box-sizing:border-box;position:absolute;left:50%;top:50%;z-index:5;display:none;width:15.6rem;min-height:4.2rem;padding:.8rem 1rem;background:var(--ink);color:var(--white);font:400 1rem/1.3 var(--f-mono);text-transform:uppercase;letter-spacing:0;pointer-events:none;transform:translate(-50%,-50%);transition:opacity var(--d-link) ease}
html.is-ready .hero-tip{display:block}
.hero-tip.is-hidden{opacity:0}
/* no-JS: hovering the stage wipes the render in, so it is still reachable */
html:not(.is-ready):not(.is-loading) .hero-render{transition:clip-path .6s var(--ease)}
html:not(.is-ready):not(.is-loading) .hero-stage:hover .hero-render{display:block;clip-path:inset(0)}

/* 5. H1 band, description, discover cell; 6. ticker (FINAL: 99 : 55 : 17 columns) */
.hero-band{display:grid;grid-template-columns:minmax(0,99fr) minmax(0,55fr) minmax(0,17fr);border-top:1px solid var(--hairline)}
.hero-title{padding:24px 27px 16px;font-size:calc(47 * var(--u));line-height:1.05;font-weight:400;letter-spacing:.02em;word-spacing:.15em;text-align:justify;text-align-last:justify;text-transform:uppercase}
.hero-desc{padding:13px;border-left:1px solid var(--hairline);font-size:calc(24 * var(--u));line-height:1.25;text-align:justify}
.hero-desc .sl:not(:last-child){text-align-last:justify} /* the split lines keep the justified look until the reveal ends */
.hero-more{padding:14px;border-left:1px solid var(--hairline);display:flex;flex-direction:column;justify-content:space-between;box-sizing:border-box;background:var(--red);font-family:var(--f-mono);font-size:calc(20 * var(--u));line-height:1.15;font-weight:400;letter-spacing:0;text-transform:uppercase;--sw-c:var(--paper);--sw-c-on:var(--paper);--sw-fill:var(--ink);--sw-exit:var(--red)}
.hero-more .ico{align-self:flex-end;font-size:calc(44 * var(--u))}
.ticker{display:flex;overflow:hidden;padding:10px 0 10px 27px;border-top:1px solid var(--hairline);font-family:var(--f-mono);font-size:12px;letter-spacing:0;text-transform:uppercase;color:var(--ink-72)}
.ticker-track{display:flex;flex:none;gap:24px;padding-right:24px;animation:ticker var(--d-ticker) linear infinite}
.ticker-track li{white-space:nowrap}
@keyframes ticker{to{transform:translateX(-100%)}}

/* 7. Intro statement and drawing-to-render wipe (FINAL: render left, red button and projects-on-file strip right) */
.intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-top:1px solid var(--hairline)}
.intro-art{position:relative;min-height:620px;overflow:hidden}
.intro-render{width:100%;height:100%;object-fit:cover}
.intro-drawing{position:absolute;inset:0;box-sizing:border-box;width:100%;height:100%;object-fit:contain;padding:6.4rem 3.2rem;background:var(--grain-bg)}
html:not(.is-ready):not(.is-loading) .intro-drawing{display:none}
.intro-text{display:flex;flex-direction:column;gap:24px;padding:48px 40px 0 48px;border-left:1px solid var(--hairline);background:var(--paper)}
.intro-title{max-width:540px;font-size:calc(36 * var(--u));line-height:1.1;font-weight:500;letter-spacing:-.02em;text-transform:uppercase}
.btn{align-self:flex-start;display:flex;align-items:center;gap:8.84px;padding:16px 24px;border:1px solid var(--red);background:var(--red);font-family:var(--f-mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;--sw-c:var(--paper);--sw-c-on:var(--paper);--sw-fill:var(--ink);--sw-exit:var(--red)}
@media (hover:hover){.btn:hover{border-color:var(--ink)}} /* style-hover: background #282828, border-colour #282828 */
.btn:focus-visible{border-color:var(--ink)}
/* FINAL's style-hover on the three red controls, ported as :hover rules (background #282828; colour #F5F5EF; the button also takes border-colour #282828).
   The sweep above paints the ink fill in 0.58 s; the base colour follows when the sweep is done (0s delay of 0.58 s), so the motion is unchanged. */
.hdr-cta,.hero-more,.btn{transition:color var(--d-label) var(--ease-circ-in),border-color .3s ease,background-color 0s linear var(--d-sweep)}
@media (hover:hover){
  .hdr-cta:hover,.hero-more:hover{background-color:var(--ink);color:var(--paper)}
  .btn:hover{background-color:var(--ink);border-color:var(--ink)}
}
.intro-strip{margin:auto -40px 0 -48px;border-top:1px solid var(--ink);background:var(--strip)}
.intro-strip-label{padding:14px 40px 14px 48px;border-bottom:1px solid var(--hairline);font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--red)}
.intro-strip-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:0 0 0 32px}
.intro-strip-list li+li{border-left:1px dashed var(--hairline)}
.intro-strip-list li{transition:background-color var(--d-link) var(--ease)}
@media (hover:hover){.intro-strip-list li:hover{background:var(--strip)}} /* style-hover: background #EAEAE2 (x4) */
.intro-strip-list a{display:flex;flex-direction:column;gap:10px;height:100%;padding:28px 16px;box-sizing:border-box}
.intro-strip-id{font-family:var(--f-mono);font-size:12px;font-weight:400;letter-spacing:.04em;color:var(--red)}
.intro-strip-name{font-size:16px;font-weight:600;line-height:1.2;transition:color var(--d-link) var(--ease)}
@media (hover:hover){.intro-strip-list a:hover .intro-strip-name{color:var(--red-text)}}
.intro-strip-list a:focus-visible .intro-strip-name{color:var(--red-text)}

/* 8. Studio: four columns with isometric drawings (FINAL: label bar, 300 px picture cell, text) */
.studio{border-top:1px solid var(--hairline)}
.studio-head{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,1fr);gap:27px;padding:55px 27px 40px}
.studio-title{font-size:calc(40 * var(--u));line-height:1;font-weight:400;text-transform:uppercase}
.studio-lead{font-size:17px;line-height:1.3;font-weight:500;color:var(--ink-72)}
.studio-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--hairline)}
.studio-col{display:flex;flex-direction:column;min-width:0}
.studio-col+.studio-col{border-left:1px solid var(--hairline)}
.studio-label{display:flex;justify-content:space-between;align-items:center;padding:16px 27px;border-bottom:1px dashed var(--hairline);font-family:var(--f-mono);font-size:16px;font-weight:400;letter-spacing:.04em;text-transform:uppercase;color:var(--ink)}
.studio-label>span:first-child{display:flex;align-items:center;gap:10px;transition:transform var(--d-ui) ease}
.studio-label>span:first-child::before{content:"";flex:none;width:9px;height:9px;background:var(--accent);opacity:0;transition:opacity var(--d-ui) ease} /* hover-only square: FINAL's square marks where it sits */
.studio-idx{padding:4px 8px;background:var(--red);color:var(--white);font-size:13px}
.studio-art{display:block;color:var(--hairline);transition:color var(--d-ui) ease}
.iso{display:block;width:100%;height:300px;object-fit:contain;padding:40px;box-sizing:border-box;border-bottom:1px dashed var(--hairline)}
svg.iso{overflow:visible;stroke:currentColor}
.studio-text{display:flex;flex-direction:column;gap:20px;padding:27px}
.studio-col-title{font-size:calc(27 * var(--u));line-height:1;font-weight:600;text-transform:uppercase}
.studio-col-body{font-size:17px;line-height:1.3;color:var(--ink-72)}
@media (hover:hover){
  .studio-col:hover .studio-label>span:first-child{transform:translateX(2rem)}
  .studio-col:hover .studio-label>span:first-child::before{opacity:1}
  .studio-col:hover .studio-art{color:var(--ink)}
}

/* 9. Drawings: the floor plan scene (FINAL: plan left, 464 px panel right; pinned and scrubbed only with JS and motion allowed) */
.drawings{position:relative;border-top:1px solid var(--hairline)}
.drawings-sticky{display:flex}
.drawings-stage{position:relative;flex:1;min-width:0;display:flex;justify-content:center;align-items:center;padding:40px}
.plan{position:relative;width:100%;max-width:820px}
.plan img,.plan svg{width:100%;height:auto}
.plan svg{color:#000}
.marker--num{position:absolute;z-index:3;left:var(--px);top:var(--py);display:flex;align-items:center;justify-content:center;width:28px;height:28px;background:var(--red);color:var(--white);font-family:var(--f-mono);font-size:10px;letter-spacing:0;transition:background-color var(--d-ui) ease,color var(--d-ui) ease,box-shadow var(--d-ui) ease}
.marker--num::after{content:"";position:absolute;inset:-6px}
.marker--num:is(.is-active,[aria-expanded="true"]){background:var(--paper);color:var(--red-text);box-shadow:inset 0 0 0 1px var(--accent)}
.plan-card{position:absolute;left:20px;bottom:20px;z-index:4;width:183px;border:1px solid var(--ink);background:var(--paper)}
.plan-card-h{padding:8px 10px;background:var(--ink);color:var(--white);font-family:var(--f-mono);font-size:10px;letter-spacing:0;text-transform:uppercase}
.plan-card-b{padding:10px;font-size:12px;color:var(--ink-72)}
.drawings-side{box-sizing:border-box;display:flex;flex:0 0 464px;flex-direction:column;border-left:1px solid var(--hairline)}
.drawings-side>*{box-sizing:border-box} /* js/som.js pins each child to the open width while the panel is closed: border-box keeps that width the whole width */
.drawings-label{padding:20px 27px;border-bottom:1px solid var(--hairline);font-family:var(--f-mono);font-size:12px;letter-spacing:0;text-transform:uppercase;color:var(--ink-72)}
.drawings-thumb{padding:20px 27px 0}
.drawings-thumb img{width:100%;height:auto;padding:13px;box-sizing:border-box;border:1px solid var(--hairline)}
.drawings-thumb figcaption{padding:7px 10px;border:1px solid var(--hairline);border-top:0;font-family:var(--f-mono);font-size:10px;letter-spacing:0;text-transform:uppercase;color:var(--ink-72)}
.drawings-title{margin-top:20px;padding:0 27px;font-size:calc(40 * var(--u));line-height:1;font-weight:400;text-transform:uppercase}
.drawings-lead{padding:20px 27px 33px;font-size:13px;line-height:1.3;font-weight:500;color:var(--ink-72)}
.drawings-rows{display:flex;flex-direction:column}
.drawings-rows li{padding:18px 27px;border-top:1px solid var(--hairline);font-size:13px;font-weight:500}
@media (prefers-reduced-motion:no-preference) and (min-width:992px){
  html.is-ready .drawings{height:calc(3.4672 * 100vh)} /* plan only: the scene is 3.4672 viewports tall (js/som.js master scrub) */
  html.is-ready .drawings-sticky{position:sticky;top:var(--frame);height:var(--screen-h);overflow:hidden}
  html.is-ready .plan{max-width:min(820px,calc((var(--screen-h) - 80px) * 1.1676))} /* the plan always fits the pinned stage */
  html.is-ready .drawings-thumb{display:flex;flex:0 1 auto;flex-direction:column;min-height:0}
  html.is-ready .drawings-thumb img{flex:1 1 auto;min-height:0;object-fit:contain} /* the sections picture gives way on short screens */
}

/* 11. Process: header (label, title, pills) and the bar that slides along the rows (3 stops) */
.sec-head{display:grid;border-bottom:1px solid var(--hairline)}
.sec-title-col{display:flex;flex-direction:column;gap:12px;padding:40px 27px 27px}
.sec-label{display:flex;align-items:center;gap:10px;font-family:var(--f-mono);font-size:14px;font-weight:400;letter-spacing:.04em;text-transform:uppercase;color:var(--ink)}
.sec-title{font-size:calc(56 * var(--u));line-height:.95;font-weight:600;text-transform:uppercase}
.sec-lead{font-size:calc(22 * var(--u));line-height:1.25;font-weight:500;color:var(--ink)}
.process{border-top:1px solid var(--hairline)}
.process-head{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.process-side{display:flex;flex-direction:column;justify-content:flex-end;gap:14px;padding:27px;border-left:1px solid var(--hairline)}
.process-pills{display:flex;flex-wrap:wrap;gap:8px;font-family:var(--f-mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase}
.process-pills span{padding:4px 8px;border:1px solid var(--red);color:var(--red)}
.process-pills span:first-child{border:0;background:var(--red);color:var(--white)}
.process-rows{position:relative;display:flex;flex-direction:column;gap:20px;padding:20px 27px}
.process-bar{position:absolute;left:27px;right:27px;top:0;z-index:3;height:1px;background:var(--accent);opacity:0;pointer-events:none}
.process-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:27px;align-items:center}
.process-art{margin:0}
.process-art img{width:100%;max-height:320px;object-fit:contain;mix-blend-mode:multiply}
.process-card{display:grid;grid-template-columns:180px minmax(0,1fr) 7px;gap:17px;align-items:center;padding:20px;background:var(--ink);color:var(--white);transition:background-color var(--d-bar) ease,color var(--d-bar) ease,box-shadow var(--d-bar) ease}
.process-card h3{font-size:calc(27 * var(--u));font-weight:700;text-transform:uppercase;transition:color var(--d-bar) ease}
.process-card p{font-size:17px;line-height:1.3}
.process-idx{width:7px;height:7px;background:var(--accent)}
/* pointer inside the rows (js adds .is-tracking): the active card stays dark with a red title, the other cards dim to outlines */
.process-row.is-active .process-card h3{color:var(--accent)}
.process-rows.is-tracking .process-row:not(.is-active) .process-card{background:transparent;color:var(--ink-72);box-shadow:inset 0 0 0 1px var(--hairline)}
@media (min-width:992px) and (hover:hover) and (prefers-reduced-motion:no-preference){
  html.is-ready .process-rows:hover .process-bar{opacity:1}
}

/* 12. Architects: head, image with swap, four cards (FINAL: 5 : 7 columns, 2 x 2 cards) */
.architects{display:flex;flex-direction:column;border-top:1px solid var(--hairline)}
.arch-head{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.arch-head>.sec-lead,.work-head>.sec-lead{padding:27px;border-left:1px solid var(--hairline)}
.arch-head>.sec-lead{display:flex;align-items:flex-end}
.arch-body{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.acc-media,.work-preview{position:relative;min-height:560px;overflow:hidden}
.acc-media{border-right:1px solid var(--hairline)}
.work-preview{border-left:1px solid var(--hairline)}
:is(.acc-media,.work-preview) img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity var(--d-ui) var(--ease),transform var(--d-ui) var(--ease)}
:is(.acc-media,.work-preview) img.is-active{opacity:1;transform:none}
.acc-cap{position:absolute;left:0;bottom:0;z-index:2;padding:7px 10px;border-top:1px solid var(--hairline);border-right:1px solid var(--hairline);background:var(--paper);font-family:var(--f-mono);font-size:10px;letter-spacing:0;text-transform:uppercase;color:var(--ink-72)}
/* Architects: the accordion of the pre-sprint build (one row open at a time, plus and minus icon, picture and caption swap),
   set in FINAL's type, colours and spacing. FINAL's four open cards are its canvas stand-in. */
.acc-row{position:relative;display:flex;flex-direction:column;gap:14px;padding:27px}
.architects .acc-rows{display:flex;flex-direction:column}
.architects .acc-row{display:block;padding:0;border-bottom:1px solid var(--hairline)}
.architects .acc-row:last-child{border-bottom:0}
.acc-no{flex:0 0 96px;font-size:calc(64 * var(--u));line-height:.8;font-weight:400;text-transform:none;color:var(--red)}
.acc-name{font-size:calc(30 * var(--u));line-height:1.05;font-weight:700;text-transform:uppercase}
.acc-btn{display:block;width:100%}
.architects .acc-btn{display:flex;align-items:center;padding:27px}
.pm{position:relative;flex:none;width:2rem;height:2rem;margin-left:auto;color:var(--hairline);transition:color var(--d-ui) ease}
.pm::before,.pm::after{content:"";position:absolute;background:currentColor}
.pm::before{left:0;right:0;top:50%;height:var(--line);transform:translateY(-50%)}
.pm::after{top:0;bottom:0;left:50%;width:var(--line);transform:translateX(-50%);transition:transform var(--d-ui) ease}
.acc-row:is(.is-open) .pm::after,.acc-btn[aria-expanded="true"] .pm::after{transform:translateX(-50%) scaleY(0)}
.acc-row.is-open .pm,.acc-btn[aria-expanded="true"] .pm{color:var(--accent)}
html:not(.is-ready):not(.is-loading) .acc-body[hidden]{display:block}
html:not(.is-ready):not(.is-loading) .acc-row .pm::after{transform:translateX(-50%) scaleY(0)}
.architects .acc-body{padding:0 27px 27px 123px}
.acc-role{display:block;width:fit-content;padding:4px 8px;border:1px solid var(--red);color:var(--red);font-family:var(--f-mono);font-size:12px;font-weight:400;letter-spacing:.04em;text-transform:uppercase}
.acc-row:first-child .acc-role{border:0;background:var(--red);color:var(--white)}
.acc-bio{margin-top:14px;font-size:16px;line-height:1.35;font-weight:500;color:var(--ink-72)}
@media (min-width:992px){.architects .acc-row{flex:1 1 0}}
.acc-row::after,.work-rows li::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--dash-ink);opacity:0;pointer-events:none;transition:opacity var(--d-ui) ease}
.acc-row:last-child::after,.work-rows li:last-child::after{display:none}
@media (hover:hover){
  .acc-row:hover::after,.work-rows li:hover::after{opacity:1}
  .acc-row:hover .pm{color:var(--ink-72)}
}

/* Work: four departments (FINAL: 2 x 2 cards, image right); hovering a card swaps the image like the old project rows */
.work{display:flex;flex-direction:column;border-top:1px solid var(--hairline)}
.work-head{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.work-head>.sec-lead{display:flex;align-items:flex-end}
.work-body{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.work-rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.work-rows li{position:relative;display:flex}
.work-row{position:relative;display:flex;flex:1;flex-direction:column;gap:14px;padding:27px}
.work-rows li:nth-child(-n+2) .work-row{border-bottom:1px solid var(--hairline)}
.work-rows li:nth-child(even) .work-row{border-left:1px solid var(--hairline)}
.work-id{font-size:calc(64 * var(--u));line-height:.8;font-weight:400;color:var(--red);transition:color var(--d-ui) ease}
.work-name{font-size:calc(30 * var(--u));line-height:1.05;font-weight:700;text-transform:uppercase;transition:color var(--d-ui) ease}
.work-by{font-size:16px;line-height:1.35;font-weight:500;color:var(--ink-72)}
.work-meta{align-self:flex-start;display:flex;align-items:center;gap:7.68px;margin-top:auto;padding:4px 8px;border:1px solid var(--red);color:var(--red);font-family:var(--f-mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;transition:background-color var(--d-ui) ease,color var(--d-ui) ease}
.work-rows li:first-child .work-meta{border:0;background:var(--red);color:var(--white)}
@media (hover:hover){
  .work-row:hover .work-name{color:var(--red-text)}
  .work-row:hover .arrow{color:var(--ink)}
}
.work-row:is(.is-active,:focus-visible) .work-name{color:var(--red-text)}
.work-row .arrow{transition:color var(--d-ui) ease,transform var(--d-roll) var(--ease-roll)}
.work-row:is(.is-active,:focus-visible) .arrow{color:var(--ink)}

/* FAQ: FINAL lists the four answers open; a question still folds its answer (400 ms swing) */
.faq{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-top:1px solid var(--hairline)}
.faq-head{display:flex;flex-direction:column;gap:27px;padding:27px}
.faq-title{font-size:calc(47 * var(--u));line-height:1;font-weight:600;text-transform:uppercase}
.faq-art img{width:100%;height:auto;padding:13px;box-sizing:border-box;border:1px solid var(--hairline)}
.faq-art figcaption{padding:7px 10px;border:1px solid var(--hairline);border-top:0;font-family:var(--f-mono);font-size:10px;letter-spacing:0;text-transform:uppercase;color:var(--ink-72)}
.faq .acc-rows{display:flex;flex-direction:column;border-left:1px solid var(--hairline)}
.faq .acc-row{gap:0;padding:20px 27px}
.faq .acc-row:nth-child(-n+2),.faq .acc-row:nth-child(even){border-left:0;border-bottom:0}
.faq .acc-row:not(:last-child){border-bottom:1px dashed var(--hairline)}
.faq-q{font-size:20px;line-height:1.1;font-weight:700;text-transform:uppercase}
.acc-body{padding-top:10px;font-size:13px;font-weight:500;color:var(--ink-72)}
@media (hover:hover){
  .faq .acc-btn:hover{color:var(--red-text)}
}
.faq .acc-btn{transition:color var(--d-ui) ease}
.faq .acc-btn:focus-visible{color:var(--red-text)}

/* 13. Contact (FINAL: head with the red button, picture and four cells, follow row) */
.contact{display:flex;flex-direction:column;border-top:1px solid var(--hairline)}
.contact-head{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.contact-head .sec-title-col{padding:48px 27px 32px}
.contact-title{font-size:calc(88 * var(--u));line-height:.9;font-weight:600;text-transform:uppercase}
.contact-main{display:flex;flex-direction:column;justify-content:flex-end;gap:20px;padding:32px 27px;border-left:1px solid var(--hairline)}
.cta{align-self:flex-start;display:flex;align-items:center;gap:8px;padding:16px 22px;background:var(--red);font-family:var(--f-mono);font-size:15px;letter-spacing:.02em;text-transform:uppercase;--sw-c:var(--white);--sw-c-on:var(--white);--sw-fill:var(--ink);--sw-exit:var(--red)}
.contact-mid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);border-bottom:1px solid var(--hairline)}
.contact-art{position:relative;min-height:440px;overflow:hidden;border-right:1px solid var(--hairline)}
.contact-art img{width:100%;height:100%;object-fit:cover}
.contact-art figcaption{position:absolute;left:0;bottom:0;padding:7px 10px;border-top:1px solid var(--hairline);border-right:1px solid var(--hairline);background:var(--paper);font-family:var(--f-mono);font-size:10px;letter-spacing:0;text-transform:uppercase;color:var(--ink-72)}
.contact-lines{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.cell{display:flex;flex-direction:column;gap:14px;padding:27px;color:var(--ink)}
.cell:nth-child(-n+2){border-bottom:1px solid var(--hairline)}
.cell:nth-child(even){border-left:1px solid var(--hairline)}
.cell-k{font-family:var(--f-mono);font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--red)}
.cell-v{font-size:calc(28 * var(--u));line-height:1.1;font-weight:600;color:inherit;transition:color var(--d-link) var(--ease)}
.cell-v--email{word-break:break-word}
.cell-v--address{font-size:17px;line-height:1.35;font-weight:500}
.cell-a{margin-top:auto;font-family:var(--f-mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-72)}
.cell--wa{background:var(--red);color:var(--white);--sw-c:var(--white);--sw-c-on:var(--white);--sw-fill:var(--ink);--sw-exit:var(--red)}
.cell--wa .cell-k,.cell--wa .cell-v,.cell--wa .cell-a{color:inherit}
@media (hover:hover){
  .contact-lines a:hover{color:var(--red-text)}
  .contact-lines a.cell--wa:hover{color:var(--white)}
}
.follow{display:flex;justify-content:space-between;align-items:center;gap:27px;flex-wrap:wrap;padding:32px 27px}
.follow-text{display:flex;flex-direction:column;gap:8px}
.follow-k{font-family:var(--f-mono);font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--red)}
.follow-link,.ftr-more{text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:5px;color:var(--ink);transition:color var(--d-link) var(--ease)}
.follow-link{font-size:17px;font-weight:500}
@media (hover:hover){.follow-link:hover,.ftr-more:hover,.ftr-top:hover{color:var(--red-text)}}
.follow-link:focus-visible,.ftr-more:focus-visible,.ftr-top:focus-visible{color:var(--red-text)}

/* 14. Footer: statement, links, giant outlined wordmark, copyright (FINAL: 5 : 7 columns, 2 x 2 link cells) */
.ftr{border-top:1px solid var(--hairline)}
.ftr-main{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);border-bottom:1px solid var(--hairline)}
.ftr-left{display:flex;flex-direction:column;justify-content:space-between;gap:32px;padding:32px 27px}
.ftr-logo img{width:168px;height:auto} /* Rule 1: the full Somdesign logo, colour version (reads on cream) */
.ftr-hill{display:inline-flex;align-items:center;gap:12px}
.ftr-hill img{width:auto;height:36px}
.ftr-meta{font-size:calc(47 * var(--u));line-height:1;font-weight:600;text-transform:uppercase}
.ftr-more{align-self:flex-start;font-family:var(--f-mono);font-size:13px;letter-spacing:.04em;text-transform:uppercase}
.ftr-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-left:1px solid var(--hairline)}
.ftr-links a{display:flex;flex-direction:column;gap:10px;padding:27px;color:var(--ink);transition:color var(--d-link) var(--ease)}
.ftr-links a:nth-child(-n+2){border-bottom:1px solid var(--hairline)}
.ftr-links a:nth-child(even){border-left:1px solid var(--hairline)}
.ftr-no{font-family:var(--f-mono);font-size:13px;letter-spacing:.04em;color:var(--red)}
.ftr-name{font-size:calc(55 * var(--u));line-height:1;font-weight:500}
.ftr-links a.ftr-cta{background:var(--red);color:var(--white);--sw-c:var(--white);--sw-c-on:var(--white);--sw-fill:var(--ink);--sw-exit:var(--red)}
.ftr-links a.ftr-cta .ftr-no{color:inherit}
.ftr-mark{position:relative;overflow:hidden;padding:20px 27px;display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--hairline)}
.ftr-mark svg{width:92%;height:auto}
.ftr-mark text{font:700 140px "Inter Tight",Arial,sans-serif;fill:var(--paper);stroke:var(--ink);stroke-width:2px;paint-order:stroke fill;transition:fill .65s cubic-bezier(.59,.23,.22,.96)}
@media (hover:hover){.ftr-mark:hover text{fill:var(--ink)}} /* footer.wordmark.ink: Heron inks the wordmark under the pointer; ink fill on hover, same timing */
.ftr-family{position:absolute;left:0;bottom:0;z-index:2;display:flex;gap:10px;padding:7px 10px;border-top:1px solid var(--hairline);border-right:1px solid var(--hairline);background:var(--paper);font-family:var(--f-mono);font-size:10px;letter-spacing:0;text-transform:uppercase;color:var(--ink-72)}
.ftr-family-k{color:var(--red-text)} /* "Our group": a red mono label, as the page's other labels */
.ftr-family a{transition:color var(--d-link) var(--ease)}
@media (hover:hover){.ftr-family a:hover{color:var(--red-text)}}
.ftr-family a:focus-visible{color:var(--red-text)}
.ftr-bar{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:10px 27px}
.ftr-fine{display:flex;flex-wrap:wrap;align-items:center;gap:6px 24px}
.ftr-copy{font-family:var(--f-mono);font-size:12px;letter-spacing:0;text-transform:uppercase;color:var(--ink-72)}
.ftr-legal{display:flex;gap:16px;font-family:var(--f-mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-72)}
.ftr-legal a{transition:color var(--d-link) var(--ease)}
@media (hover:hover){.ftr-legal a:hover{color:var(--red-text)}}
.ftr-legal a:focus-visible{color:var(--red-text)}
.ftr-top{font-family:var(--f-mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);transition:color var(--d-link) var(--ease)}
@media (hover:hover){
  .ftr-links a:hover{color:var(--red-text)}
  .ftr-links a.ftr-cta:hover{color:var(--sw-c-on)}
}
.ftr-links a:focus-visible{color:var(--red-text)}

/* Reveal state toggled by js/som.js (only hides anything while JS runs) */
[data-reveal]{transition:opacity 1s var(--ease-p3),transform 1s var(--ease-p3)}
html.is-ready [data-reveal]:not(.is-revealed){opacity:0;transform:translateY(3.2rem)}

/* Section hairlines draw as their top edge enters (js animates --draw 0 to 1; without JS it rests at 1) */
.hero-band,.ticker,.intro,.studio,.drawings,.process,.architects,.work,.faq,.contact,.ftr{border-image:linear-gradient(90deg,var(--hairline) calc(var(--draw,1)*100%),transparent 0) 1}
.hero-desc,.hero-more{border-image:linear-gradient(180deg,var(--hairline) calc(var(--draw,1)*100%),transparent 0) 1}
/* loader text stays hidden from the first paint until the loader timeline starts */
html.is-loading:not(.is-live) .loader>:not(.loader-art){opacity:0}

/* Touch and small screens: no canvas cursor, no hero tools; the two squares stay as a drawn detail */
@media (hover:none),(max-width:991px){
  .cursor,.hero-tip,.hero-box,.hero .marker,.tag{display:none!important}
  .hero-render{display:none!important}
  .hero-stage::before,.hero-stage::after{content:"";position:absolute;width:9px;height:9px;background:var(--accent)}
  .hero-stage::before{left:38%;top:30%}
  .hero-stage::after{left:71%;top:58%}
}

/* Tablet band (991 and below): burger menu, stacked columns, no pointer tools */
@media (max-width:991px){
  :root{--hdr-h:57px}
  .hdr-logo{flex:1 1 auto;padding:0 16px}
  .hdr-logo img{width:118px}
  .hdr-burger{display:flex;flex:0 0 auto;align-items:center;justify-content:space-between;gap:14px;padding:0 16px;border-left:1px solid var(--hairline);font:400 12px var(--f-mono);text-transform:uppercase;letter-spacing:0;color:var(--ink-72)}
  .hdr-burger i{position:relative;width:15px;height:11px;background:linear-gradient(currentColor,currentColor) 0 50%/100% 1px no-repeat}
  .hdr-burger i::before,.hdr-burger i::after{content:"";position:absolute;left:0;right:0;height:1px;background:currentColor;transition:transform var(--d-menu) var(--ease-menu)}
  .hdr-burger i::before{top:0}
  .hdr-burger i::after{bottom:0}
  .hdr:has(.hdr-nav:popover-open) .hdr-burger i::before,.hdr:has(.hdr-nav:popover-open) .hdr-burger i::after{transform:scale(0)}
  .hdr-nav{box-sizing:border-box;display:none;position:fixed;top:calc(var(--frame) + var(--hdr-h) - var(--line));right:var(--frame);bottom:auto;left:auto;width:max(50vw,240px);max-height:calc(100vh - var(--hdr-h) - 2 * var(--frame));overflow:auto;flex-direction:column;border:1px solid var(--hairline);border-right:0;background:var(--grain-bg);font-size:12px;clip-path:inset(0 0 100%);transition:clip-path var(--d-menu) var(--ease-menu),display var(--d-menu) allow-discrete,overlay var(--d-menu) allow-discrete}
  .hdr-nav:popover-open{display:flex;clip-path:inset(0)}
  @starting-style{.hdr-nav:popover-open{clip-path:inset(0 0 100%)}}
  .hdr-tabs{display:flex;flex-direction:column;height:auto}
  .hdr-tab{display:block;flex:none;border-left:0;border-bottom:1px solid var(--hairline)}
  .hdr-tab-link{display:flex;align-items:center;min-height:44px;padding:0 14px;font-size:14px}
  .hdr-tick{display:none}
  .hdr-menu{position:static;display:none;width:auto;border:0;border-top:1px solid var(--hairline);opacity:1;pointer-events:auto;transition:none}
  .hdr-tab.is-open .hdr-menu,html:not(.is-ready) .hdr-tab:focus-within .hdr-menu{display:grid;grid-template-rows:repeat(4,1fr)}
  .hdr-menu a{height:auto;min-height:44px;padding:0 14px 0 26px;font-size:12px}
  .hdr-cta{flex:none;min-height:48px;border-left:0;font-size:12px}

  .hero-stage{padding:28px 14px}
  .hero-band{grid-template-columns:minmax(0,1fr)}
  .hero-title{font-size:clamp(30px,6.2vw,47px)}
  .hero-desc{border-left:0;border-top:1px solid var(--hairline);font-size:clamp(17px,2.9vw,24px)}
  .hero-more{border-left:0;border-top:1px solid var(--hairline);min-height:84px;font-size:18px}
  .hero-more .ico{font-size:34px}
  .ticker{padding-left:16px}

  .intro{grid-template-columns:minmax(0,1fr)}
  .intro-art{min-height:0;aspect-ratio:16/9}
  .intro-drawing{padding:24px 16px}
  .intro-text{gap:20px;padding:32px 20px 0;border-left:0;border-top:1px solid var(--hairline)}
  .intro-title{max-width:none;font-size:clamp(22px,4.6vw,36px)}
  .intro-strip{margin:12px -20px 0}
  .intro-strip-label{padding:14px 20px}
  .intro-strip-list{grid-template-columns:repeat(2,minmax(0,1fr));padding:0}
  .intro-strip-list li:nth-child(3){border-left:0}
  .intro-strip-list li:nth-child(n+3){border-top:1px dashed var(--hairline)}
  .intro-strip-list a{padding:22px 16px}

  .studio-head{grid-template-columns:minmax(0,1fr);gap:14px;padding:32px 20px 28px}
  .studio-title{font-size:clamp(26px,5.4vw,40px)}
  .studio-cols{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  .studio-cols::-webkit-scrollbar{display:none}
  .studio-col{flex:0 0 min(78vw,330px);scroll-snap-align:start}
  .studio-col-title{font-size:24px}

  .drawings-sticky{flex-direction:column}
  .drawings-stage{flex:none;padding:20px 16px 150px}
  .plan-card{left:16px;right:16px;bottom:16px;width:auto}
  .marker--num{width:24px;height:24px}
  .drawings-side{flex:none;border-left:0;border-top:1px solid var(--hairline)}
  .drawings-label{padding:16px 20px}
  .drawings-thumb{padding:20px 20px 0}
  .drawings-title{padding:0 20px;font-size:clamp(26px,5.4vw,40px)}
  .drawings-lead{padding:18px 20px 28px}
  .drawings-rows li{padding:18px 20px}

  .sec-head,.process-head,.arch-head,.work-head,.contact-head{grid-template-columns:minmax(0,1fr)}
  .sec-title-col,.contact-head .sec-title-col{padding:32px 20px 16px}
  .sec-title{font-size:clamp(30px,7.2vw,56px)}
  .sec-lead{font-size:clamp(17px,3vw,22px)}
  .arch-head>.sec-lead,.work-head>.sec-lead{padding:0 20px 28px;border-left:0}
  .process-side{padding:0 20px 28px;border-left:0}
  .process-rows{padding:20px}
  .process-row{grid-template-columns:minmax(0,1fr);gap:14px}
  .process-row[data-stop="1"] .process-art{order:-1}
  .process-card{grid-template-columns:minmax(0,1fr) 7px;gap:6px 14px;padding:16px}
  .process-card h3{grid-column:1;font-size:24px}
  .process-card p{grid-column:1}
  .process-idx{grid-column:2;grid-row:1}
  .process-bar{display:none}

  .arch-body{grid-template-columns:minmax(0,1fr)}
  .acc-media{min-height:0;aspect-ratio:16/9;border-right:0;border-bottom:1px solid var(--hairline)}
  .acc-no{font-size:48px}
  .acc-name{font-size:24px}
  .work-body{grid-template-columns:minmax(0,1fr)}
  .work-preview{min-height:0;aspect-ratio:16/9;border-left:0;border-top:1px solid var(--hairline)}
  .work-id{font-size:48px}
  .work-name{font-size:24px}

  .faq{grid-template-columns:minmax(0,1fr)}
  .faq-head{padding:28px 20px}
  .faq-title{font-size:clamp(30px,6vw,47px)}
  .faq .acc-rows{border-left:0;border-top:1px solid var(--hairline)}
  .faq .acc-row{padding:18px 20px}

  .contact-title{font-size:clamp(44px,13vw,88px)}
  .contact-main{padding:0 20px 28px;border-left:0}
  .contact-mid{grid-template-columns:minmax(0,1fr)}
  .contact-art{min-height:0;aspect-ratio:16/9;border-right:0;border-bottom:1px solid var(--hairline)}
  .cell{padding:22px 20px}
  .cell-v{font-size:22px}
  .follow{padding:28px 20px}

  .ftr-main{grid-template-columns:minmax(0,1fr)}
  .ftr-left{padding:28px 20px}
  .ftr-meta{font-size:clamp(28px,6.6vw,47px)}
  .ftr-links{border-left:0;border-top:1px solid var(--hairline)}
  .ftr-links a{padding:22px 20px}
  .ftr-name{font-size:clamp(24px,5vw,55px)}
  .ftr-mark{padding:16px 20px 48px}
  .ftr-bar{flex-wrap:wrap;padding:14px 20px}
}

/* Mobile band (767 and below): single columns, 390 px first */
@media (max-width:767px){
  .hero-stage{padding:20px 10px}
  .hero-title{font-size:clamp(26px,8vw,40px);text-align:left;text-align-last:auto;word-spacing:0}
  .hero-desc{text-align:left;font-size:17px}
  .hero-desc .sl:not(:last-child){text-align-last:auto}
  .intro-title{font-size:clamp(20px,6vw,28px)}
  .intro-strip-list a{padding:18px 14px}
  .architects .acc-btn{padding:20px}
  .acc-no{flex-basis:70px}
  .architects .acc-body{padding:0 20px 20px 90px}
  .work-rows{grid-template-columns:minmax(0,1fr)}
  .work-rows li:nth-child(-n+2) .work-row{border-bottom:0}
  .work-rows li:nth-child(even) .work-row{border-left:0}
  .work-rows li:not(:last-child) .work-row{border-bottom:1px solid var(--hairline)}
  .contact-lines{grid-template-columns:minmax(0,1fr)}
  .cell:nth-child(-n+2){border-bottom:0}
  .cell:nth-child(even){border-left:0}
  .cell:not(:last-child){border-bottom:1px solid var(--hairline)}
  .cell-v--email{font-size:20px}
  .ftr-links a:nth-child(-n+2){border-bottom:0}
  .ftr-links a:nth-child(even){border-left:0}
  .ftr-links a:not(:last-child){border-bottom:1px solid var(--hairline)}
  .ftr-links{grid-template-columns:minmax(0,1fr)}
  .ftr-bar{flex-direction:column;align-items:flex-start;gap:12px}
}

/* Reduced motion: final states, no loader, no sticky scenes, no ticker loop, no canvas cursor, no hint over the drawing */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
  .ticker-track{animation:none!important}
  .ticker{overflow-x:auto;scrollbar-width:none}
  .ticker-track--clone{display:none}
  .loader,.cursor,.hero-tip{display:none!important}
  html.is-loading,html.is-loading body{overflow:visible}
  .intro-drawing{display:none}
  html.is-ready [data-reveal]:not(.is-revealed){opacity:1;transform:none}
}

/* WhatsApp kit (site/shared/whatsapp-kit): this page's theme for the floating coin, the chat panel and the social coin rows.
   The kit's css loads after this file, so html:root (one selector more than the kit's :root) is what wins. The panel and its dim layer sit above the
   fixed header and the sheet frame (below the cursor and the skip link), as the page's own chat did. */
html:root{
  --wa-ink:var(--ink);--wa-muted:#5F5F5F;--wa-line:var(--hairline);--wa-paper:var(--paper);--wa-wash:var(--strip);
  --wa-btn-bg:var(--red);--wa-btn-fg:var(--white);--wa-btn-hover:var(--ink);
  --wa-ring:var(--ink);--wa-ring-gap:var(--paper);
  --wa-radius:4px;--wa-font:var(--f-body);
  --wa-z-scrim:2147483540;--wa-z-panel:2147483550;
}
/* the coin rows are filled by the kit after load: the row keeps its height so nothing below it jumps */
[data-wa-coins]{min-height:var(--wa-coin,48px)}
/* bottom reserve at every width: the end of the page scrolls clear of the floating coin (--wa-clear = coin + gap, from the kit; the fallbacks are its values) */
.ftr-bar{padding-bottom:calc(10px + var(--wa-clear,88px))}
@media (max-width:767px){
  .ftr-bar{padding-bottom:calc(14px + var(--wa-clear,74px) + env(safe-area-inset-bottom))}
}