/* 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:160px;height:auto} /* approved companion visual (2026-10-22): 160 px desktop, 136 px from 991 px down */
.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:44px;height:44px;margin:-15.5px 0 0 -15.5px} /* 44 x 44 hit area, the 13 px square stays where it was (audit SOM-005) */
.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)}
/* Contrast (audit SOM-002, 2026-10-22): red text #D02E00 on the strip #EAEAE2 is 4.26:1, under 4.5:1 for 12 to 16 px text. The strip's label, IDs and
   names are ink (12.2:1); the red stays on the decorative pieces, and the hover and focus cue is the page's accent underline (as .follow-link). */
.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(--ink)}
.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(--ink)}
.intro-strip-name{font-size:16px;font-weight:600;line-height:1.2;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:5px;transition:text-decoration-color var(--d-link) var(--ease)}
@media (hover:hover){.intro-strip-list a:hover .intro-strip-name{text-decoration-color:var(--accent)}}
.intro-strip-list a:focus-visible .intro-strip-name{text-decoration-color:var(--accent)}

/* 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:calc((100% - 44px) / 2)} /* a 44 x 44 hit area around the 24 or 28 px marker; the anchor does not move (audit SOM-005) */
.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);overflow:clip} /* plan only: the scene is 3.4672 viewports tall (js/som.js master scrub).
    clip (2026-10-22): the stage slides in from minus its own height, and at 1440 x 900 it is taller than the studio section that hides it, so its
    unseen top reached into the intro and took the clicks of the "Projects on file" links. Clipping to the section keeps the look (the studio's paper
    covered that area) and keeps sticky working (clip is not a scroll container). */
  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)}
/* Phase 4: Hill projects with a confirmed Somdesign contribution (written by release/somdesign-live/build.mjs from Hill's feed; absent while it is empty) */
.work-projects{padding:27px;border-top:1px solid var(--hairline)}
.work-ptitle{margin-bottom:14px;font-family:var(--f-mono);font-size:12px;font-weight:400;letter-spacing:.04em;text-transform:uppercase}
.work-plist li{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:4px 27px;border-top:1px dashed var(--hairline)}
.work-plist a{display:inline-flex;align-items:center;min-height:44px;font-size:18px;font-weight:500;text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:.2em}
.work-plist span{font-size:16px;line-height:1.35;font-weight:500;color:var(--ink-72)}

/* 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;padding:11px 0;margin:-11px 0} /* one-line questions get a 44 px tall button without moving the rows (audit SOM-005) */
.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:48px 27px 32px}
.ftr-logo img{width:200px;height:auto} /* Rule 1: the full Somdesign logo, colour version (reads on cream); 200 px (approved companion visual, 2026-10-22) */
.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 */
/* Footer rows (approved companion visual, 2026-10-22): identity and links above, the outline wordmark, then three labelled rows in the approved order:
   Our group, Contact, Legal. Red mono label in the 5fr column, content in the 7fr column (lined up with the identity and link columns above);
   up to 4 items per line 32 px apart on desktop; stacked rows 24 px apart from 991 px down. Links keep a 44 px tall target. */
.ftr-rows{display:flex;flex-direction:column;padding-bottom:var(--wa-clear,88px)} /* the one bottom reserve under the floating coin: 24 px row padding + coin + gap = 112 px desktop, 98 px phones */
.ftr-row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.ftr-row+.ftr-row{border-top:1px solid var(--hairline)}
.ftr-row-k{padding:24px 27px;font-family:var(--f-mono);font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--red)}
.ftr-row-v{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 32px;margin:0;padding:12px 27px 24px;border-left:1px solid var(--hairline);font-size:16px;line-height:1.4;font-weight:500;color:var(--ink)}
.ftr-row-v a{display:inline-flex;align-items:center;min-height:44px;transition:color var(--d-link) var(--ease)}
@media (hover:hover){.ftr-row-v a:hover{color:var(--red-text)}}
.ftr-row-v a:focus-visible{color:var(--red-text)}
.ftr-contact>p{padding-top:12px}
.ftr-coins{flex-basis:100%;margin-top:8px}
.ftr-copy{letter-spacing:0} /* the rest (mono 12 px, uppercase, ink-72) comes from .ftr-legal */
.ftr-legal{font-family:var(--f-mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-72)}
.ftr-top{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:136px}
  .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-scroll{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none} /* the named, focusable region scrolls (audit SOM-003); arrow keys move it */
  .studio-scroll::-webkit-scrollbar{display:none}
  .studio-scroll:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
  .studio-cols{display:flex}
  .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:32px 20px 28px}
  .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}
  .ftr-row{grid-template-columns:minmax(0,1fr)}
  .ftr-row-k{padding:24px 20px 4px}
  .ftr-row-v{padding:0 20px 24px;border-left:0}
}

/* Mobile band (767 and below): single columns, 390 px first */
@media (max-width:767px){
  /* Loader (audit SOM-001, 2026-10-22): the caption and the sheet log leave the 75% side column (42 px wide at 390 px, it stacked word by word through
     the drawing) for two full-width rows under the scan line, 24 px from the screen edges. The log is decorative: it keeps the first 6 sheet names
     (6 x 17 px fits its 112 px); the counter still shows the progress. */
  .loader-sub,.loader-log{left:24px;right:24px;font-size:12px;line-height:1.4}
  .loader-sub{top:calc(50% + 24px);bottom:auto;padding-bottom:8px}
  .loader-log{top:calc(50% + 24px + 26px + 16px);bottom:auto;max-height:112px;overflow:hidden}
  .loader-log li:nth-child(n+7){display:none}
  .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-group,.ftr-contact{flex-direction:column;flex-wrap:nowrap;align-items:flex-start;gap:0}
  .ftr-coins{flex-basis:auto}
  .ftr-contact>p{padding-block:10px}
  .ftr-legal{align-items:center;gap:0 24px}
  .ftr-legal .ftr-copy{flex-basis:100%;padding-block:10px 4px}
}

/* 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: .ftr-rows carries it once (--wa-clear = coin + gap, from the kit); phones add the safe area once */
@media (max-width:767px){
  .ftr-rows{padding-bottom:calc(var(--wa-clear,74px) + env(safe-area-inset-bottom,0px))}
}