/* ACLab studio direction. Existing brand + real work, with deliberate hierarchy.
   Reference: Vercel's 1.25 heading leading, -2.4px English display tracking and 1px .08
   screen edge; colours, logo, photography and copy remain ACLab's own.
   Local tokens extend the shared scale; no additional display font download. */
:root {
  --studio-mint: #8EE0CC;
  --studio-mint-paper: #EAF7F2;
  --studio-heading-leading: 1.25;
  --studio-tracking: -2.4px;
  --studio-screen-edge: 0 0 0 1px rgba(0,0,0,.08);
  --studio-screen-depth: 0 12px 32px rgba(16,20,35,.14);
  --studio-portrait-max: 400px;
}
.studio-site { line-height: 1.8; }
.studio-site main { overflow: clip; }
.studio-site h1, .studio-site h2, .studio-site h3 { text-wrap: balance; }
.studio-site :is(h1,h2,h3,p,a,li,dd,figcaption) { overflow-wrap: break-word; }
.studio-site :is(h1,h2,h3) { font-weight: 700; line-height: 1.35; }
.studio-site :is(.display,.h-title) { line-height: 1.15; }
.studio-site .container { width: min(1200px, calc(100% - 48px)); }
.studio-site .site-header { background-color: var(--surface); border-bottom: 1px solid var(--line); }
.studio-site .site-nav a { font-weight: 500; }
.studio-site .site-nav.is-open { transition: none; visibility: visible; }
.studio-site .eyebrow { font-size: var(--fs-note); font-weight: 700; }
.studio-site .h-title { letter-spacing: 0; max-width: 12em; }
.studio-site .home-hero { background-color: var(--paper); background-image: none; }
.studio-site .h-hero { padding-block: var(--s-8); border-bottom: 1px solid var(--line); }
.studio-site .h-hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--s-8); align-items: center; }
.studio-site .h-lead { max-width: 30em; font-weight: 400; line-height: 1.8; }
.studio-site .home-hero-actions { align-items: center; gap: var(--s-5); }
.studio-site .h-offer { margin-top: var(--s-4); }
.studio-site .h-proof { border-top: 1px solid var(--line); margin-top: var(--s-7); padding-top: var(--s-6); }
.studio-site .h-proof-num { color: var(--ink); }
.studio-site .h-statement { max-width: 27em; font-size: var(--fs-h3); }
.studio-site .h-statement span { font-size: var(--fs-base); line-height: 1.8; margin-top: var(--s-3); }
.studio-site #statement { padding-block: var(--s-7); }
.studio-site #statement .h-proof { margin-top: var(--s-6); }
.studio-site .h-sec { padding-block: var(--s-9); }
.studio-site .h-sec-surface { background-color: var(--surface); }
.studio-site .studio-portrait { margin: 0; width: 100%; max-width: var(--studio-portrait-max); justify-self: end; position: relative; }
.studio-site .studio-portrait::before { content: ''; position: absolute; inset: var(--s-4) calc(-1 * var(--s-4)) calc(-1 * var(--s-4)) var(--s-4); background-color: var(--studio-mint); z-index: 0; }
.studio-site .studio-portrait img { position: relative; display: block; width: 100%; height: auto; aspect-ratio: 5 / 6; object-fit: cover; object-position: 50% 43%; border-radius: 0; }
.studio-site .studio-portrait figcaption { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2); background-color: var(--surface); padding: var(--s-3) var(--s-4); color: var(--meta); font-size: var(--fs-note); line-height: 1.5; }
.studio-site .studio-byline { display: grid; gap: var(--s-1); margin-top: var(--s-5); color: var(--ink); text-decoration: none; }
.studio-site .studio-byline b { font-size: var(--fs-lead); }
.studio-site .studio-byline span { font-size: var(--fs-note); color: var(--meta); }
.studio-site .studio-caption, .studio-site figcaption { max-width: none; margin-top: var(--s-3); font-size: var(--fs-note); line-height: 1.6; color: var(--meta); }
.studio-site .studio-text-link { display: inline-flex; gap: var(--s-2); min-height: 44px; align-items: center; color: var(--brand); font-weight: 700; text-underline-offset: var(--s-1); }
.studio-site .studio-feature { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: var(--s-8); align-items: center; }
.studio-site .studio-work-heading { padding-top: var(--s-9); }
.studio-site .studio-work-heading h2 { margin-top: var(--s-3); font-size: var(--fs-h2); }
.studio-site .studio-work-heading > p:last-child { margin-top: var(--s-4); color: var(--meta); }
.studio-site .studio-work-group > :is(#selected-work,#work) { padding-top: var(--s-7); padding-bottom: var(--s-8); }
.studio-site .studio-work-group > :is(#works,#results) { padding-top: var(--s-7); border-top: 1px solid var(--line); }
.studio-site .studio-feature h2 { margin-top: var(--s-4); font-size: var(--fs-h2); }
.studio-site .studio-feature-copy > p:not(.eyebrow) { margin-top: var(--s-5); }
.studio-site .studio-feature-copy > .studio-caption { margin-top: var(--s-4); }
.studio-site .studio-design-note { padding-left: var(--s-4); border-left: 2px solid var(--brand-fill); }
.studio-site .studio-design-note b { display: block; margin-bottom: var(--s-2); }
.studio-site .studio-screen { margin: 0; padding: var(--s-5); background-color: var(--studio-mint-paper); min-width: 0; }
.studio-site .studio-screen a { display: block; }
.studio-site .studio-screen img { display: block; width: 100%; height: auto; box-shadow: var(--studio-screen-edge), var(--studio-screen-depth); }
.studio-site .studio-screen figcaption { margin-top: var(--s-4); }
.studio-site .work-actions { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; margin-top: var(--s-5); }
.studio-site .work-actions .button span { font-size: var(--fs-note); }
.studio-site .studio-context-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: var(--s-8); align-items: start; }
.studio-site .studio-context-grid h2 { font-size: var(--fs-h2); }
.studio-site .studio-context-grid .eyebrow + h2 { margin-top: var(--s-4); }
.studio-site .studio-context { padding-block: var(--s-7); border-block: 1px solid var(--line); }
.studio-site .studio-context-grid > p { max-width: 34em; }
.studio-site .studio-process-list { list-style: none; margin: 0; padding: 0; counter-reset: studio-step; }
.studio-site .studio-process-list li { position: relative; padding: var(--s-5) 0 var(--s-5) var(--s-7); border-top: 1px solid var(--line); counter-increment: studio-step; }
.studio-site .studio-process-list li::before { content: '0' counter(studio-step); position: absolute; left: 0; color: var(--brand); font-weight: 700; }
.studio-site .studio-process-list b { display: block; font-size: var(--fs-lead); }
.studio-site .studio-process-list span { display: block; margin-top: var(--s-2); }
.studio-site .h-svc-grid { gap: 0 var(--s-7); }
.studio-site .h-svc { border: 0; border-top: 1px solid var(--rule-strong); border-radius: 0; background-color: transparent; padding: var(--s-6) 0; }
.studio-site .h-svc:hover { background-color: transparent; }
.studio-site .h-svc-wide { grid-column: auto; }
.studio-site .studio-service-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
.studio-site .studio-service-grid > :first-child { grid-row: span 2; padding-right: var(--s-7); }
.studio-site .studio-service-grid > :first-child h3 { font-size: var(--fs-h2); }
.studio-site .studio-service-grid > :nth-child(2) { grid-column: 1; grid-row: 3; }
.studio-site .studio-service-grid > :nth-child(3) { grid-column: 2; grid-row: 1; }
.studio-site .studio-service-grid > :nth-child(4) { grid-column: 2; grid-row: 2 / span 2; }
.studio-site .studio-service-note { margin-top: var(--s-5); color: var(--meta); }
.studio-site .studio-intake { padding-block: var(--s-6); border-top: 1px solid var(--line); }
.studio-site .studio-intake summary { font-weight: 700; cursor: pointer; min-height: 44px; display: list-item; }
.studio-site .studio-intake details p { margin-block: var(--s-4); max-width: 48em; }
.studio-site .studio-intake h2 { font-size: var(--fs-h3); }
.studio-site .h-profile-photo img { aspect-ratio: 4 / 5; object-fit: cover; object-position: center 35%; }
.studio-site .e-pillars { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
.studio-site .e-pillars > :first-child { grid-column: 1; grid-row: 1; }
.studio-site .e-pillars > :nth-child(2) { grid-column: 1; grid-row: 2; }
.studio-site .e-pillars > :nth-child(3) { grid-column: 2; grid-row: 1 / span 2; }
.studio-site .e-pillars .h-svc-list { grid-template-columns: minmax(0, 1fr); }
.studio-site .studio-analytics { border-block: 1px solid var(--line); }
.studio-site .studio-analytics > .container { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); column-gap: var(--s-8); }
.studio-site .studio-analytics-intro h2 { margin-top: var(--s-4); font-size: var(--fs-h2); }
.studio-site .studio-analytics-intro p { margin-top: var(--s-5); }
.studio-site .studio-capabilities { margin: 0; }
.studio-site .studio-capabilities > div { border-top: 1px solid var(--line); padding-block: var(--s-5); }
.studio-site .studio-capabilities dt { font-size: var(--fs-lead); font-weight: 700; line-height: 1.35; }
.studio-site .studio-capabilities dd { margin: var(--s-3) 0 0; line-height: 1.8; }
.studio-site .studio-founder { border-top: 1px solid var(--line); padding-top: var(--s-4); }
.studio-site .studio-pilot-note { padding: var(--s-6); border-left: var(--s-1) solid var(--studio-mint); background-color: var(--surface); }
.studio-site .studio-note-title { font-weight: 700; }
.studio-site .studio-pilot-note ol { padding-left: var(--s-5); margin-block: var(--s-4); }
.studio-site .page-hero { padding-block: var(--s-8); }
.studio-site .page-hero-grid { align-items: start; gap: var(--s-8); }
.studio-site .display, .studio-site .page-hero h1 { max-width: 18em; }
.studio-site .detail-block { padding-block: var(--s-7); }
.studio-site .detail-block h2 { max-width: 24em; }
.studio-site .section-head { max-width: 52em; }
.studio-site .studio-services { column-gap: var(--s-7); }
.studio-site .studio-services > :first-child { padding-block: var(--s-7); }
.studio-site .studio-services > :first-child h2 { font-size: var(--fs-h2); }
.studio-site .studio-demo { padding-block: var(--s-9); border-bottom: 1px solid var(--line); }
.studio-site .studio-demo-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: var(--s-8); align-items: center; }
.studio-site .studio-demo h2 { font-size: var(--fs-h2); margin-block: var(--s-4) var(--s-5); }
.studio-site .studio-demo-grid ul { padding-left: var(--s-5); margin-block: var(--s-5); }
.studio-site .studio-demo-screen { margin: 0; padding: var(--s-5); background-color: var(--studio-mint-paper); }
.studio-site .studio-demo-screen img { width: 100%; height: auto; display: block; box-shadow: var(--studio-screen-edge); }
.studio-site .studio-demo-followup { padding-top: var(--s-7); margin-top: var(--s-7); border-top: 1px solid var(--line); }
.studio-site .studio-demo-followup h3 { margin-bottom: var(--s-3); }
.studio-site .studio-demo h3 { font-size: var(--fs-lead); }
.studio-site .studio-demo a:not(.button), .studio-site .note a, .studio-site .doc-body a { display: inline-flex; align-items: center; min-height: 44px; text-underline-offset: var(--s-1); }
.studio-site .site-footer { border-top: 1px solid var(--line); }
.studio-site .h-profile-body > p { max-width: 34em; }
.studio-site .h-contact { background-color: var(--tint); }
.studio-site .h-contact .lead { max-width: 34em; }
.studio-site .h-contact h2 { font-size: var(--fs-h2); }
.studio-site :focus-visible { outline: 2px solid var(--focus); outline-offset: var(--s-1); }
.studio-site .h-title:lang(en) { letter-spacing: var(--studio-tracking); }
.studio-site:lang(en) h2 { font-weight: 700; line-height: var(--studio-heading-leading); }
.studio-site:lang(en) .studio-feature h2 { max-width: 16em; }
@media (max-width: 1024px) {
  .studio-site .h-hero-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); gap: var(--s-6); }
  .studio-site :is(.studio-feature,.studio-context-grid,.studio-demo-grid,.studio-analytics > .container) { gap: var(--s-6); }
  .studio-site .h-sec { padding-block: var(--s-8); }
  .studio-site .h-case { grid-template-columns: minmax(0, 3fr) minmax(0, 5fr); }
  .studio-site .h-case-time { grid-column: 2; justify-items: start; }
}
@media (max-width: 768px) {
  .studio-site .studio-work-heading { padding-top: var(--s-7); }
  .studio-site .studio-work-group > :is(#selected-work,#work) { padding-block: var(--s-6) var(--s-7); }
  .studio-site .container { width: calc(100% - 32px); }
  .studio-site .h-hero { padding-block: var(--s-7); }
  .studio-site .h-hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
  .studio-site .h-hero-grid > .h-copy, .studio-site .h-hero-grid > .home-hero-copy { display: contents; }
  .studio-site .h-hero-grid .h-eyebrow { grid-row: 1; margin: 0; }
  .studio-site .h-hero-grid .h-title { grid-row: 2; margin: 0; }
  .studio-site .h-hero-grid > .studio-portrait { grid-row: 3; margin-block: var(--s-2) var(--s-4); }
  .studio-site .h-hero-grid :is(.h-offer,.h-lead,.home-hero-actions,.studio-founder,.studio-byline) { margin-top: 0; }
  .studio-site .h-title { font-size: 40px; }
  .studio-site .h-title:lang(en) { letter-spacing: -.02em; }
  .studio-site .h-title br { display: initial; }
  .studio-site .studio-portrait { max-width: 100%; width: calc(100% - 16px); justify-self: start; }
  .studio-site .studio-portrait img { aspect-ratio: 3 / 2; object-position: 50% 40%; }
  .studio-site .studio-portrait figcaption { margin-top: 0; }
  .studio-site .studio-byline { margin-top: var(--s-4); }
  .studio-site .h-sec { padding-block: var(--s-7); }
  .studio-site :is(.studio-feature,.studio-context-grid,.studio-demo-grid,.studio-analytics > .container) { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .studio-site .studio-feature h2 { font-size: var(--fs-h3); }
  .studio-site .studio-screen, .studio-site .studio-demo-screen { padding: var(--s-3); }
  .studio-site .h-proof { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
  .studio-site .h-proof li { padding: 0; border: 0; }
  .studio-site .studio-service-grid, .studio-site .e-pillars { grid-template-columns: minmax(0, 1fr); }
  .studio-site :is(.studio-service-grid,.e-pillars) > :nth-child(n) { grid-column: 1 / -1; grid-row: auto; padding-right: 0; }
  .studio-site .studio-service-grid > :first-child h3 { font-size: var(--fs-h3); }
  .studio-site .h-case { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
  .studio-site .h-case-time { grid-column: auto; }
  .studio-site .h-flow-row li { font-size: var(--fs-note); }
  .studio-site .h-flow-row li + li { margin-left: var(--s-5); }
  .studio-site .h-flow-row li + li::before { left: calc(-1 * var(--s-5)); width: var(--s-5); }
  .studio-site .page-hero { padding-block: var(--s-7); }
  .studio-site .page-hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .studio-site .studio-demo { padding-block: var(--s-7); }
  .studio-site .home-hero-actions .button { max-width: 100%; }
  .studio-site .studio-capabilities dt { font-size: var(--fs-base); }
  .studio-site .h-contact h2 { font-size: var(--fs-h3); }
}
@media (prefers-reduced-motion: reduce) {
  .studio-site *, .studio-site *::before, .studio-site *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}