/* About v2: service-page tokens, readable px floors, static-first enhancement. */
.about { --ground:#222628; --deep:#1b2225; --card:#1f2325; --line:#293135; --line-ui:#6b7d86; --muted:rgba(255,255,255,.74); --soft:#a5c4d3; --mint:#23d7b6; --sec:clamp(72px,9vw,15rem); --gap:clamp(16px,2.4vw,3.2rem); --display:"Random Grotesque Standard","Inter",sans-serif; position:relative; overflow:clip; background:var(--ground); color:#fff; font-size:max(1.7rem,16px); line-height:1.55; }
.about ::selection { background:var(--mint); color:var(--deep); }
.about :where(h1,h2,h3,h4,p,ul,ol) { margin:0; }
.about :where(ul,ol) { padding:0; list-style:none; }
.about :where(h1,h2,h3,h4) { font-family:var(--display); font-weight:700; line-height:1.05; text-wrap:balance; }
.about :where(a,button):focus-visible { outline:2px solid var(--mint); outline-offset:4px; }
.about :where(a) { color:inherit; }
.about :where(svg) { flex-shrink:0; }
.about-section { padding-top:var(--sec); }
.about h2 { font-size:clamp(32px,4.4vw,7.2rem); margin-bottom:32px; }
.about p { color:var(--muted); }
.about-link { display:inline-flex; align-items:center; min-height:44px; color:var(--soft)!important; font-size:max(1.6rem,16px); text-decoration:underline; text-underline-offset:.25em; }
.about-link:hover { color:var(--mint)!important; }
.about-actions { display:flex; flex-wrap:wrap; align-items:center; gap:16px 28px; }
.about-actions .btn { display:inline-flex; align-items:center; min-height:56px; font-size:max(1.6rem,16px); padding:16px max(3.2rem,24px); }
.about-pill { display:inline-flex; justify-content:center; align-items:center; gap:24px; min-height:56px; padding:12px 28px; border:1px solid var(--line-ui); border-radius:100px; font-size:max(1.6rem,16px); line-height:1.4; color:#fff; background:transparent; cursor:pointer; text-decoration:none; transition:color .2s,transform .2s; }
.about-pill:hover { background:var(--mint); color:var(--deep); border-color:var(--mint); }
.about-hero { min-height:100svh; display:flex; align-items:center; padding:clamp(110px,15rem,180px) 0 64px; background:radial-gradient(60rem 40rem at 8% 0%,rgba(9,133,100,.22),transparent 70%),radial-gradient(70rem 50rem at 92% 40%,rgba(28,96,100,.28),transparent 70%); }
.about-hero__grid { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); align-items:center; gap:32px; }
.about-hero__copy { position:relative; z-index:2; display:grid; gap:28px; }
.about-hero h1 { font-size:clamp(48px,7vw,12rem); letter-spacing:-.025em; line-height:.98; }
.about-crumbs .breadcrumb { justify-content:flex-start; text-align:left; font-size:max(1.4rem,14px); }
.about-lead { font-size:max(2rem,17px); max-width:56ch; }
.about-facts { display:flex; flex-wrap:wrap; gap:12px 20px; font-size:max(1.5rem,14px); color:var(--soft); }
.about-facts li { padding-right:20px; border-right:1px solid var(--line-ui); }
.about-facts li:last-child { border:0; }
.about-wall-stage { position:relative; width:calc(100% + 10vw); height:78svh; min-height:560px; min-width:0; overflow:hidden; }
.about-wall { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; gap:20px; }
.about-wall__row { display:flex; width:max-content; gap:20px; }
.about-wall__row:nth-child(2) { transform:translateX(-130px); }
.about-tile { position:relative; width:clamp(240px,27vw,480px); aspect-ratio:16/10; overflow:hidden; border-radius:20px; flex-shrink:0; }
/* Frames draw their outline above the image: a real border lets a composited image bleed over the corners. */
.about-tile::after,.about-case::before { content:""; position:absolute; inset:0; border:1px solid var(--line); border-radius:inherit; pointer-events:none; z-index:2; transition:border-color .2s; }
.about-case::before { border-width:2px; }
.about-tile img { width:100%; height:100%; object-fit:cover; object-position:top; }
.about-tile__label { position:absolute; bottom:12px; left:12px; background:var(--deep); border-radius:100px; padding:6px 16px; font-size:max(1.4rem,14px); }
.about-wall-stage canvas { position:absolute; inset:0; width:100%; height:100%; opacity:0; }
.about-wall-label { position:fixed; z-index:10; top:0; left:0; pointer-events:none; opacity:0; max-width:280px; background:var(--deep); padding:12px 18px; border:1px solid var(--line-ui); border-radius:12px; font-size:max(1.4rem,14px); }
.about-projects__text { max-width:72ch; font-size:max(2rem,17px); margin-bottom:40px!important; }
/* .about-projects__text a, .about-person p a: colour and underline come from the text-link block in styles.min.css. */
.about-bento { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--gap); }
.about-case { position:relative; grid-column:span 6; min-height:420px; height:100%; border-radius:24px; overflow:hidden; isolation:isolate; background:var(--card); transition:transform .2s; }
.about-case:nth-child(1),.about-case:nth-child(7) { grid-column:span 7; }
.about-case:nth-child(2),.about-case:nth-child(6) { grid-column:span 5; }
.about-case:nth-child(3),.about-case:nth-child(4),.about-case:nth-child(5) { grid-column:span 4; }
.about-case__image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top; z-index:-3; }
.about-case__image--second { z-index:-2; opacity:0; transition:opacity .3s; }
.about-case__reveal { position:absolute; inset:0; width:100%; height:100%; z-index:-2; pointer-events:none; }
.about-case::after { content:""; position:absolute; inset:0; background:linear-gradient(transparent 25%,rgba(27,34,37,.86) 68%,#1b2225); z-index:-1; }
.about-case__copy { position:absolute; bottom:28px; left:28px; right:48px; }
.about-case h3 { font-size:clamp(24px,2.4vw,4rem); margin-bottom:10px; }
.about-case__subtitle { color:var(--soft)!important; margin-bottom:10px!important; }
.about-case__delivered { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.about-case > svg { position:absolute; bottom:28px; right:18px; transition:transform .2s; }
.about-case:hover,.about-case:focus-visible { transform:translateY(-4px); }
.about-case:hover::before,.about-case:focus-visible::before { border-color:var(--mint); }
.about-case:hover > svg,.about-case:focus-visible > svg { transform:translateX(4px); }
.about-portfolio { margin-top:32px; }
.about-services .container > p { margin-bottom:36px; font-size:max(2rem,17px); }
.about-services__index { border-bottom:1px solid var(--line); }
.about-services__index li { border-top:1px solid var(--line); }
.about-service { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(0,1fr) 24px; gap:32px; align-items:center; padding:32px 0; }
.about-services__name { font-family:var(--display); font-size:clamp(28px,4.4vw,7.2rem); line-height:1.08; transition:transform .2s,color .2s; }
.about-services__note { color:var(--muted); }
.about-preview { position:fixed; top:0; left:0; width:320px; height:200px; z-index:20; pointer-events:none; opacity:0; overflow:hidden; border-radius:16px; }
.about-preview img { width:100%; height:100%; object-fit:cover; object-position:top; }
.about-process__pin { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.8fr); gap:8vw; align-items:center; padding:40px 0; }
.about-process__line { width:20px; height:260px; color:var(--mint); }
.about-steps { display:grid; gap:24px; }
.about-steps li { display:grid; grid-template-columns:clamp(90px,11vw,16rem) minmax(0,1fr); gap:24px; align-items:center; }
.about-step-number { font-family:var(--display); font-size:clamp(80px,11vw,16rem); line-height:1; color:transparent; -webkit-text-stroke:3px var(--mint); background:linear-gradient(to top,var(--mint) var(--fill,0%),transparent var(--fill,0%)); -webkit-background-clip:text; background-clip:text; transition:-webkit-text-stroke-color .3s; }
.about-steps li.is-done .about-step-number { background:linear-gradient(#8a9aa3,#8a9aa3); -webkit-background-clip:text; background-clip:text; -webkit-text-stroke-color:#8a9aa3; }
.about-steps h3 { font-size:clamp(24px,2.4vw,3.6rem); margin-bottom:12px; }
.about-price { padding-top:56px; margin-top:40px; border-top:1px solid var(--line); }
.about-price__highlight { font-family:var(--display); font-size:clamp(32px,5vw,8.8rem); color:#fff!important; line-height:1.1; margin-bottom:24px!important; }
.about-price > p:last-child { color:var(--soft); }
.about-person { background:var(--deep); margin-top:var(--sec); padding:var(--sec) 0; scroll-margin-top:100px; }
.about-person__card { border:1px solid var(--line-ui); border-radius:32px; padding:clamp(24px,4vw,64px); background:radial-gradient(ellipse 60% 80% at 18% 30%,rgba(35,215,182,.10),transparent 70%),radial-gradient(ellipse at 100% 100%,rgba(28,96,100,.22),transparent 60%),var(--deep); }
.about-person__grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.8fr); gap:4vw; align-items:center; }
.about-monogram { width:100%; color:var(--mint); }
.about-monogram text { font:700 280px var(--display); }
.about-person h2 { font-size:clamp(44px,6vw,11.2rem); }
.about-profiles-label { margin-top:24px!important; font-size:max(1.4rem,14px); }
.about-profiles { display:flex; flex-wrap:wrap; gap:12px; margin:16px 0!important; }
.about-profiles .about-pill { min-height:52px; padding:12px 20px; }
.about-blog { margin-top:64px; padding-top:40px; border-top:1px solid var(--line-ui); }
.about-blog > h3 { font-size:clamp(28px,3vw,44px); margin-bottom:28px; }
.about-blog__grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.about-blog-card img { width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:16px; }
.about-blog-card h4 { font-size:max(2.4rem,22px); margin:20px 0 12px; }
.about-blog-card time { font-size:max(1.4rem,14px); color:var(--soft); }
.about-blog-card:hover h4 { color:var(--mint); }
.about-contact { min-height:90svh; padding-bottom:48px; }
.about-marquee { overflow:hidden; margin:40px 0; }
.about-marquee__track { display:flex; width:max-content; }
.about-marquee__copy { display:flex; align-items:center; gap:4vw; padding-right:4vw; font:700 clamp(64px,12vw,22rem)/1.1 var(--display); white-space:nowrap; }
.about-marquee__copy span:nth-of-type(2) { color:transparent; -webkit-text-stroke:1.5px white; }
.about-marquee svg { width:clamp(32px,5vw,80px); height:clamp(32px,5vw,80px); color:var(--mint); }
.about-marquee.is-moving .about-marquee__track { animation:about-marquee 40s linear infinite; }
.about-marquee.is-paused .about-marquee__track,.about-marquee:hover .about-marquee__track { animation-play-state:paused; }
@keyframes about-marquee { to { transform:translateX(-50%); } }
.about-email { position:relative; display:block; width:fit-content; max-width:100%; font:700 clamp(32px,calc(100cqi / 7.6),40rem)/1.2 var(--display); letter-spacing:-.035em; overflow-wrap:anywhere; margin-bottom:24px; }
.about-email::after { content:""; position:absolute; bottom:0; left:0; width:100%; height:2px; background:var(--mint); transform:scaleX(0); transform-origin:left; transition:transform .25s; }
.about-email:hover::after,.about-email:focus::after { transform:scaleX(1); }
.about-copy { margin-bottom:32px; }
.about-copy[hidden] { display:none; }
.about .page-text { margin:var(--sec) 0 0; }
.about .block-start { position:relative; }
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) { .about-service:hover .about-services__name { transform:translateX(1.2rem); color:var(--mint); } }
@media (max-width:1023px) { .about-hero__grid { grid-template-columns:minmax(0,1fr); } .about-wall-stage { height:60vh; width:calc(100% + 8vw); } .about-bento { grid-template-columns:repeat(2,minmax(0,1fr)); } .about-bento .about-case { grid-column:auto; min-height:380px; } .about-service { grid-template-columns:minmax(0,1fr) 24px; gap:16px; } .about-services__note { grid-row:2; } .about-service svg { grid-column:2; grid-row:1; } .about-process__pin { grid-template-columns:1fr; gap:24px; } .about-process__line { display:none; } .about-person__grid { grid-template-columns:1fr; } .about-monogram { max-width:300px; } }
@media (max-width:767px) { .about-blog__grid { grid-template-columns:1fr; gap:40px; }  .about-contact { min-height:auto; } }
@media (max-width:599px) { .about-bento { grid-template-columns:1fr; } .about-bento .about-case { aspect-ratio:4/5; min-height:360px; } .about-case__copy { left:20px; bottom:24px; } .about-steps li { grid-template-columns:1fr; gap:12px; } .about-facts { display:grid; } .about-facts li { border:0; } .about-person__card { padding:24px 18px; } .about-pill { padding-inline:20px; } }
@media (prefers-reduced-motion:reduce) { .about *, .about *::after { animation:none!important; transition:none!important; } .about-case:hover { transform:none; } .about-marquee__copy[aria-hidden],.about-marquee__copy span:nth-of-type(2),.about-marquee__copy svg { display:none; } .about-marquee__copy { white-space:normal; font-size:clamp(48px,10vw,160px); } }

/* Second screen: crossfade without JS/WebGL or with reduced motion; touch keeps the first screen.
   .is-gl = about-reveal.js draws the blob mask and owns the swap through .is-revealed. */
@media (hover:hover) and (pointer:fine) { .about-bento:not(.is-gl) .about-case:hover .about-case__image--second { opacity:1; } }
.about-bento:not(.is-gl) .about-case:focus-visible .about-case__image--second,.about-bento.is-gl .about-case.is-revealed .about-case__image--second { opacity:1; }
.about-bento.is-gl .about-case__image--second { transition:none; }
@media (prefers-reduced-motion:reduce) { .about .about-case__image--second { transition:opacity .3s!important; } }

/* Round 1: stage scale, explicit bento rows and theme-link overrides. */
.about-wall-stage,.about-wall { -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%),linear-gradient(0deg,transparent,#000 10%,#000 90%,transparent); mask-image:linear-gradient(90deg,transparent,#000 14%),linear-gradient(0deg,transparent,#000 10%,#000 90%,transparent); -webkit-mask-composite:source-in; mask-composite:intersect; }
.about-bento { grid-auto-rows:clamp(420px,35vw,620px); align-items:stretch; }
.about .about-service,.about .about-service:hover,.about .about-service:focus,.about .about-services__name,.about .about-services__note,.about .about-email,.about .about-email:hover,.about .about-email:focus { text-decoration:none; }
.about-service > svg { transition:transform .2s; }
.about-service:hover > svg,.about-service:focus-visible > svg { transform:translateX(4px); }
.about-service:focus-visible .about-services__name { transform:translateX(1.2rem); color:var(--mint); }
.about-process__pin > div { display:flex; flex-direction:column; align-self:stretch; min-height:440px; }
.about-process__line { position:relative; display:block; flex:0 0 60%; width:2px; margin:40px 0 0 4px; background:rgba(35,215,182,.16); border-radius:2px; }
.about-process__fill { position:absolute; inset:0; background:var(--mint); border-radius:inherit; transform-origin:50% 0; }
.about-process__dot { position:absolute; top:100%; left:50%; width:10px; height:10px; margin:-5px 0 0 -5px; border-radius:50%; background:var(--mint); box-shadow:0 0 0 6px rgba(35,215,182,.14); }
.about-contact .container { container-type:inline-size; }
/* The marquee is the visual headline; the H2 stays for the outline only. */
.about .about-contact h2 { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }
@media (max-width:1023px) { .about-wall-stage { min-height:0; } .about-bento { grid-auto-rows:clamp(380px,60vw,600px); } .about-process__line { display:none; } .about-process__pin > div { min-height:0; } }
@media (max-width:767px) { .about-hero { padding-top:110px; } .about-hero__grid { display:flex; flex-direction:column; align-items:stretch; gap:20px; } .about-hero__copy { display:contents; } .about-crumbs { order:0; } .about-hero h1 { order:1; } .about-wall-stage { order:2; height:46svh; } .about-lead { order:3; } .about-facts { order:4; } .about-hero .about-actions { order:5; } .about-tile { width:60vw; } }
@media (max-width:599px) { .about-bento { grid-auto-rows:auto; } .about-bento .about-case { height:auto; } }