:root{color-scheme:dark;--bg:#3a3a3e;--surface:#343438;--elevated:#424247;--text:#f0f0ee;--secondary:#c1c1c7;--accent:#776783;--line:rgba(255,255,255,.1)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:40px}body{margin:0;background:var(--bg);color:var(--text);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}::selection{background:#77678380;color:#fff}a{color:inherit;text-decoration:none}a:focus-visible{outline:2px solid var(--accent);outline-offset:8px}img{display:block;max-width:100%}p,h1,h2,figure{margin:0}p{line-height:1.65}h1,h2{font-weight:400}.wrap{width:calc(100% - 112px);max-width:1600px;margin-inline:auto}.nav{position:absolute;top:0;left:0;right:0;height:108px;display:flex;align-items:center;justify-content:space-between;z-index:5}.wordmark{display:inline-flex;align-items:baseline;font-size:27px;letter-spacing:-1.8px;font-weight:800;gap:7px}.wordmark span{font-weight:400;font-size:15px;letter-spacing:.4px}nav{display:flex;gap:36px}nav a{font-size:12px;letter-spacing:.1em;padding:15px 0;transition:color .25s}nav a:hover{color:#b5a7c0}.eyebrow,.index,.hero-foot,.frame-top,.frame-center,figcaption{font-family:'SFMono-Regular',Consolas,'Liberation Mono',monospace;font-size:12px;font-weight:400;letter-spacing:.06em}.eyebrow{color:#c0c0c5}.slash{padding:0 11px;color:#646469}.hero{min-height:900px;height:100svh;max-height:1200px;position:relative;overflow:hidden;display:flex;align-items:center}.hero-content{position:relative;z-index:2;padding:145px 0 130px}.hero h1{font-size:clamp(54px,6.35vw,112px);letter-spacing:-.058em;line-height:.99;margin-top:40px;max-width:1050px}.muted-heading{color:#c0c0c6}.hero-copy{max-width:470px;font-size:16px;line-height:1.7;color:var(--secondary);margin-top:34px}.hero-art{position:absolute;width:61%;right:-13%;top:15%;height:85%;pointer-events:none;z-index:1}.hero-art img{height:100%;width:100%;object-fit:contain;transform:rotate(-12deg);filter:brightness(.83)}.hero:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#3a3a3e 2%,transparent 65%);pointer-events:none}.hero-foot{position:absolute;bottom:30px;left:0;right:0;z-index:2;display:flex;align-items:center;justify-content:space-between;color:#a0a0a7;font-size:11px}.down-line{height:36px;width:1px;background:#55515b;position:absolute;left:50%;bottom:-5px}.section{border-top:1px solid var(--line);padding-top:115px;padding-bottom:125px}.section.wrap,.product-heading{display:grid;grid-template-columns:24% 76%}.section-label{display:flex;gap:18px;align-items:baseline}.index{font-size:11px;color:#a5a2ad}.section-body h2{font-size:clamp(36px,4.5vw,72px);line-height:1.06;letter-spacing:-.052em}.soft{color:var(--secondary)}.philosophy-copy{margin-top:56px;display:grid;grid-template-columns:1fr 1fr;gap:70px}.lead{font-size:20px;line-height:1.5;letter-spacing:-.015em}.secondary{font-size:16px;color:var(--secondary);line-height:1.75}.secondary p+p{margin-top:22px}.product{background:var(--surface);overflow:hidden}.product-heading h2{font-size:clamp(36px,4.7vw,76px)}.product-copy{display:grid;grid-template-columns:1fr 1fr;gap:70px;margin-top:32px}.product-gallery{margin-top:72px;position:relative}.image-frame{background:linear-gradient(145deg,#2b2b2f,#252528 70%);border:1px solid var(--line);aspect-ratio:16/10;position:relative;padding:24px;display:flex;flex-direction:column;justify-content:space-between}.primary-frame{aspect-ratio:16/8;min-height:300px}.frame-top,figcaption{display:flex;justify-content:space-between;color:#aaaab1;font-size:11px;letter-spacing:.08em}.frame-center{display:flex;flex-direction:column;align-items:center;gap:18px;color:#a5a1ac;font-size:11px;letter-spacing:.12em}.frame-cross{width:21px;height:21px;position:relative}.frame-cross:before,.frame-cross:after{content:'';position:absolute;background:#625c69}.frame-cross:before{width:21px;height:1px;top:10px}.frame-cross:after{height:21px;width:1px;left:10px}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px}.product-tar{position:absolute;right:-130px;bottom:-160px;width:320px;pointer-events:none;filter:brightness(.65);transform:rotate(-25deg)}.about{padding-top:130px;padding-bottom:130px}.about h2{font-size:clamp(32px,3.3vw,54px)}.about-copy{max-width:530px;margin-top:43px}.about-copy .secondary{margin-top:24px}.contact{position:relative;overflow:hidden;padding-bottom:130px}.contact>.wrap{position:relative;z-index:1}.contact-body{margin-top:64px}.contact h2{font-size:clamp(70px,9vw,144px);letter-spacing:-.06em;line-height:.95}.contact-body>p{font-size:16px;color:var(--secondary);margin-top:35px}.contact-body .contact-email{font-size:22px;color:var(--text);margin-top:18px;display:inline-block;padding-bottom:10px;border-bottom:1px solid #77707d}.contact-tar{position:absolute;right:-9%;bottom:-10%;width:48%;max-width:730px;pointer-events:none;filter:brightness(.6);transform:rotate(15deg)}footer{border-top:1px solid var(--line);height:120px;display:flex;align-items:center;justify-content:space-between}footer .eyebrow{color:var(--secondary)}.skip-link{position:fixed;left:20px;top:-80px;z-index:10;padding:12px 20px;background:var(--text);color:var(--bg)}.skip-link:focus{top:20px}.hero-content{animation:enter 1s ease-out both}@keyframes enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(min-width:1600px){.hero-art{right:-5%;width:55%}}
@media(max-width:1000px){.wrap{width:calc(100% - 64px)}.hero{min-height:830px}.hero h1{font-size:7.5vw}.hero-art{width:70%;right:-24%;top:23%;height:72%;opacity:.8}.hero-copy{max-width:420px}.section.wrap,.product-heading{grid-template-columns:1fr}.section-label{margin-bottom:44px}.philosophy-copy,.product-copy{gap:40px}.section{padding-top:80px;padding-bottom:85px}.product-tar{width:240px;right:-90px;bottom:-135px}.about h2{font-size:4.9vw}.contact-body{margin-top:0}}
@media(max-width:600px){.wrap{width:calc(100% - 40px)}.nav{height:84px}.wordmark{font-size:25px;gap:5px}.wordmark span{font-size:12px}nav{gap:18px}nav a{font-size:10px;letter-spacing:.04em}.hero{min-height:880px;height:100svh;max-height:1050px;align-items:flex-start}.hero-content{padding-top:153px;padding-bottom:0}.hero h1{font-size:clamp(28px,8.5vw,52px);margin-top:30px;line-height:1.04;letter-spacing:-.055em}.hero-copy{font-size:15px;max-width:330px;margin-top:28px}.hero-art{top:auto;bottom:-75px;right:-23%;height:430px;width:100%;opacity:.75}.hero:after{background:linear-gradient(180deg,#3a3a3e 10%,transparent 85%)}.hero-foot{bottom:22px;font-size:9px}.hero-foot .down-line{display:none}.section{padding-block:68px}.section-label{margin-bottom:32px}.section-body h2{font-size:10vw}.philosophy-copy,.product-copy{grid-template-columns:1fr;gap:24px;margin-top:34px}.lead{font-size:19px}.secondary{font-size:16px}.product-heading h2{font-size:9vw}.product-gallery{margin-top:40px}.image-frame{padding:16px;min-height:235px}.primary-frame{min-height:260px}.detail-grid{grid-template-columns:1fr;gap:14px;margin-top:14px}.frame-top,figcaption{font-size:10px}.frame-center{font-size:10px}.product-tar{width:165px;right:-70px;bottom:-98px}.about h2{font-size:8.2vw}.about-copy{margin-top:30px}.contact{min-height:540px}.contact h2{font-size:18vw}.contact-body>p{font-size:15px;max-width:255px}.contact-tar{width:62%;right:-22%;bottom:-12%;opacity:.65}.contact-body .contact-email{font-size:19px}footer{height:95px}footer .eyebrow{font-size:10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.hero-art img{will-change:auto}}

/* The splotches spread across the lower edge instead of rising like sculptures. */
.hero-art{width:67%;right:-18%;top:30%;height:70%}.hero-art img{filter:brightness(.92)}.contact-tar{width:46%;right:-9%;bottom:-16%;filter:brightness(.85)}
@media(min-width:1600px){.hero-art{width:62%;right:-15%}}
@media(max-width:1000px){.hero-art{width:76%;right:-25%;top:37%;height:63%}}
@media(max-width:600px){.hero-art{width:115%;right:-27%;top:auto;bottom:-28px;height:360px;opacity:1}.contact-tar{width:65%;right:-23%;bottom:-15%;opacity:.85}}

/* About: two stacked blocks, each a heading over a short paragraph. */
.about .micro-head{margin:0;font-family:'SFMono-Regular',Consolas,'Liberation Mono',monospace;font-size:11px;font-weight:400;letter-spacing:.14em;color:#a5a2ad}
.about .micro-head.dim{color:#7d7a85}
.about-statement{margin-top:18px;font-size:clamp(16px,1.25vw,20px);line-height:1.45;letter-spacing:-.018em;max-width:660px}
.method{margin-top:clamp(36px,5.2vh,56px)}
.method-head{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:16px;border-bottom:1px solid var(--line)}
.method-list{list-style:none;margin:0;padding:6px 0 0 34px;position:relative}
.method-list:before{content:'';position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--line)}
.method-item{position:relative;display:grid;grid-template-columns:22px minmax(0,1fr);gap:0 24px;padding:clamp(14px,2.2vh,22px) 0}
.method-item:before{content:'';position:absolute;left:-34px;top:34px;width:20px;height:1px;background:var(--line)}
.m-num{font-family:'SFMono-Regular',Consolas,'Liberation Mono',monospace;font-size:11px;letter-spacing:.06em;color:#b0a3bb;line-height:1;padding-top:3px;transition:color .25s}
.method-item:hover .m-num{color:#d8ccE2}
.m-body h3{margin:0;font-size:15px;font-weight:400;color:var(--text)}
.m-body p{margin-top:9px;font-size:13.5px;line-height:1.7;color:var(--secondary);max-width:600px}

/* Scale pass: smaller type throughout, and a hero that fits any viewport.
   The hero sizes against viewport height as well as width, so the headline
   and blurb stay whole on short windows instead of being cropped. */
.nav{height:clamp(72px,9vh,104px)}
.wordmark{font-size:23px;letter-spacing:-1.5px}
.wordmark span{font-size:13px}
.hero{min-height:400px;max-height:none}
.hero-content{padding:clamp(78px,12.5vh,130px) 0 clamp(56px,9.5vh,100px)}
.hero h1{font-size:clamp(26px,min(4.4vw,7.4vh),68px);line-height:1.04;margin-top:0}
.hero-copy{font-size:clamp(13px,1.45vh,15px);line-height:1.68;margin-top:clamp(14px,2.4vh,26px);max-width:400px}
.hero-foot{bottom:clamp(14px,2.4vh,28px)}
.section{padding-top:92px;padding-bottom:100px}
.about{padding-top:96px;padding-bottom:104px}
.contact{padding-bottom:104px}
.contact h2{font-size:clamp(34px,4.4vw,68px)}
.contact-body{margin-top:34px}
.contact-body>p{font-size:14px;margin-top:22px}
.contact-body .contact-email{font-size:17px}
footer{height:96px}
@media(max-width:1000px){.method{margin-top:56px}.method-list{padding-left:28px}.method-item{gap:0 22px;padding:24px 0}.method-item:before{left:-28px;top:32px;width:16px}.section{padding-top:70px;padding-bottom:76px}.about{padding-top:74px;padding-bottom:80px}.contact{padding-bottom:80px}}
@media(max-width:600px){.hero h1{font-size:clamp(21px,6.7vw,34px)}.hero-copy{max-width:340px}.section{padding-top:56px;padding-bottom:60px}.about{padding-top:58px;padding-bottom:62px}.contact{padding-bottom:70px}.about-statement{font-size:16px;margin-top:14px}.method{margin-top:42px}.method-list{padding-left:22px}.method-item{grid-template-columns:19px minmax(0,1fr);gap:0 15px;padding:20px 0}.method-item:before{left:-22px;top:31px;width:12px}.m-body h3{font-size:14px}.m-body p{font-size:13px;margin-top:8px}.contact h2{font-size:11vw}.contact-body{margin-top:0}footer{height:80px}}

/* Page-break rules: a faint hairline terminated by crisp end ticks, so each
   divider reads as a measured span rather than an open line. All rules are
   inset to the content column, including Contact, which used to bleed full width. */
:root{--tick:rgba(255,255,255,.26)}
.section,footer{border-top:0;position:relative}
.section:before,footer:before{content:'';position:absolute;top:0;left:0;right:0;height:10px;pointer-events:none;background:linear-gradient(var(--tick),var(--tick)) 0 0/1px 10px no-repeat,linear-gradient(var(--tick),var(--tick)) 100% 0/1px 10px no-repeat,linear-gradient(var(--line),var(--line)) 0 0/100% 1px no-repeat}
.contact:before{left:max(56px,calc((100% - 1600px)/2));right:max(56px,calc((100% - 1600px)/2))}
@media(max-width:1000px){.contact:before{left:32px;right:32px}}
@media(max-width:600px){.contact:before{left:20px;right:20px}.section:before,footer:before{height:8px;background-size:1px 8px,1px 8px,100% 1px}}

/* Motion: content fades up as it enters, the page-break rules wipe in from the
   left, and the methodology spine draws downward. Everything is gated on the
   `js` class so the page renders fully if the script never runs, and the whole
   system is bypassed for visitors who ask for reduced motion. */
:root{--ease:cubic-bezier(.22,.61,.36,1)}
html.js [data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease) var(--d,0ms),transform .7s var(--ease) var(--d,0ms)}
html.js [data-reveal].in{opacity:1;transform:none}
html.js .section:before,html.js footer:before{clip-path:inset(0 100% 0 0);transition:clip-path .9s var(--ease)}
html.js .section.in:before,html.js footer.in:before{clip-path:inset(0 0 0 0)}
html.js .method-list:before{transform:scaleY(0);transform-origin:50% 0;transition:transform .85s var(--ease) .12s}
html.js .method-list.in:before{transform:none}
.about-intro{--d:70ms}
.method-item:nth-child(2){--d:90ms}
.method-item:nth-child(3){--d:180ms}
@media(prefers-reduced-motion:no-preference){html{scroll-snap-type:y proximity}.hero,.about,.contact{scroll-snap-align:start}}

/* One screen per section. About and Contact each fill the viewport and centre
   their content, so the page reads as three deliberate panels rather than a
   continuous scroll. Contact reserves the footer's height so the two together
   make a single screen. Snapping firms up to mandatory only when the viewport
   is tall enough to hold a whole panel. */
:root{--footer-h:96px}
.about{min-height:100svh;align-content:center;padding-top:clamp(64px,9vh,104px);padding-bottom:clamp(64px,9vh,104px)}
.contact{min-height:calc(100svh - var(--footer-h));display:flex;align-items:center;padding-top:clamp(64px,9vh,104px);padding-bottom:clamp(64px,9vh,104px)}
.contact>.wrap{width:calc(100% - 112px)}
@media(max-width:1000px){.contact>.wrap{width:calc(100% - 64px)}}
@media(max-width:600px){:root{--footer-h:80px}.contact>.wrap{width:calc(100% - 40px)}.about,.contact{padding-top:56px;padding-bottom:56px}}
footer{scroll-snap-align:end}
@media(prefers-reduced-motion:no-preference) and (min-height:760px){html{scroll-snap-type:y proximity}}

/* Short windows (laptops in split screen, phones in landscape): tighten the
   About panel so its content still fits one screen instead of spilling. */
@media(max-height:720px){
  .about{padding-top:44px;padding-bottom:44px}
  .about-statement{font-size:17px;margin-top:14px}
  .method{margin-top:26px}
  .method-item{padding:12px 0}
  .m-body p{margin-top:7px}
  .contact-body{margin-top:22px}
}

/* Techy entrance: monospace labels type in behind a block caret, display type
   resolves character by character. The hero block no longer fades as a whole,
   so the per-character work is what the eye actually sees. */
html.js .hero-content{animation:none}
html.js .ch{display:inline-block;opacity:0;transform:translateY(.16em);filter:blur(3px);transition:opacity .26s linear var(--d,0ms),transform .3s var(--ease) var(--d,0ms),filter .26s linear var(--d,0ms)}
html.js .ch.on{opacity:1;transform:none;filter:blur(0)}
html.js .typing::after{content:'';display:inline-block;width:.46em;height:.92em;margin-left:.1em;background:currentColor;vertical-align:-.12em;animation:caret .5s steps(1,end) infinite}
@keyframes caret{0%,49%{opacity:1}50%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){html.js .ch{opacity:1;transform:none;filter:none}html.js .typing::after{display:none}}

/* Wordmark lockup: the faceted ball sits left of TAR, sized and spaced from the
   reference artwork. The ball is 1.221x the cap height of TAR with a gap of
   0.199 cap heights, centred on the letterforms. Arial's cap height is .716em,
   so those become .874em and .143em, and the lockup scales with the font size
   at every breakpoint. */
.wordmark{gap:0}
.wordmark .mark{flex:none;align-self:center;height:.874em;width:auto;margin-right:.143em;filter:brightness(.94)}
.wordmark span{margin-left:.3em}

/* ---------------------------------------------------------------------------
   Blue off-white palette, built around keeping the black tar ball. The ball
   measures 8.63:1 against this background, so it is the mark at full strength.
   Everything above is written against a dark scheme, so this block restates
   the tokens and the colours that were hardcoded.
   --------------------------------------------------------------------------- */
:root{
  color-scheme:light;
  --bg:#e6ebf2;
  --surface:#dde4ed;
  --elevated:#d3dbe6;
  --text:#14181d;
  --secondary:#525a66;
  --accent:#3d6b93;
  --line:rgba(20,30,45,.15);
  --tick:rgba(20,30,45,.36);
}
::selection{background:rgba(61,107,147,.22);color:var(--text)}
.eyebrow{color:#565e6a}
.slash{color:#7b8490}
.index{color:#5c646f}
.muted-heading{color:#7b8490}
.soft{color:var(--secondary)}
.hero-foot{color:#5c646f}
.down-line{background:rgba(20,30,45,.22)}
nav a:hover{color:var(--accent)}
.hero:after{background:linear-gradient(90deg,#e6ebf2 2%,transparent 65%)}
@media(max-width:600px){.hero:after{background:linear-gradient(180deg,#e6ebf2 10%,transparent 85%)}}
.about .micro-head{color:#5c646f}
.about .micro-head.dim{color:#626a75}
.m-num{color:var(--accent)}
.method-item:hover .m-num{color:#2b5375}
.contact-body .contact-email{border-bottom-color:rgba(20,30,45,.4)}
/* The tar renders are already dark, so on a light ground they carry themselves. */
.hero-art img{filter:none}
.contact-tar{filter:none}
/* Black ball, full strength. */
.wordmark .mark{filter:none}