:root {
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --hero: clamp(2.5rem, 4.7vw, 4.5rem);
  --title: clamp(1.625rem, 2.3vw, 2rem);
  --body: 1.0625rem;
  --ink: #202121;
  --muted: #646666;
  --canvas: #fff;
  --surface: #f5f5f7;
  --hover: #e9e9ed;
  --line: #e4e4e4;
  --gutter: clamp(22px, 5vw, 80px);
  --width: 1240px;
  --pill: 999px;
  --ease: cubic-bezier(.22,1,.36,1);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 112px; }
body { margin: 0; color: var(--ink); background: var(--canvas); font: 400 var(--body)/1.55 var(--font); -webkit-font-smoothing: antialiased; }
body { animation:document-arrive .32s ease-out both; }
@keyframes document-arrive { from { opacity:.45; } to { opacity:1; } }
h1,h2,h3,p { margin: 0; }
h1 { font-size: var(--hero); line-height: 1.15; letter-spacing: -.025em; font-weight: 500; }
h2,h3 { font-size: var(--title); line-height: 1.26; letter-spacing: -.018em; font-weight: 500; }
p { text-wrap: pretty; }
button,input,textarea,summary { font: inherit; color: inherit; }
button,a,summary { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; object-fit: cover; border-radius: 0; }
button { border: 0; }
svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible { outline: 2px solid #2457d6; outline-offset: 5px; }
::selection { background: #dce8e6; }
.wrap { width: min(var(--width), calc(100% - var(--gutter)*2)); margin-inline: auto; }
.section { padding-top: clamp(90px, 10vw, 150px); }
.muted { color: var(--muted); }
.skip-link { position: fixed; top: 10px; left: 10px; transform: translateY(-180%); padding: 12px 20px; z-index: 100; background: var(--ink); color: white; border-radius: var(--pill); }
.skip-link:focus { transform: none; }
.site-logo { position:fixed; top:22px; left:var(--gutter); z-index:30; display:inline-grid; place-items:center; width:118px; min-height:54px; opacity:0; transform:translateY(-7px) scale(.96); animation:site-logo-arrive .36s var(--ease) .08s both; }
.site-logo img { width:100%; height:auto; object-fit:contain; transition:transform .25s var(--ease); }
.site-logo:hover img { transform:translateY(-1px); }
.site-logo:active img { transform:scale(.97); }
@keyframes site-logo-arrive { from { opacity:0; transform:translateY(-7px) scale(.96); } to { opacity:1; transform:none; } }
.nav { position: fixed; top: 22px; left: 50%; transform: translateX(-50%); z-index: 30; display: flex; gap: 4px; padding: 5px; border-radius: var(--pill); background: var(--surface); }
.nav,.language-nav { isolation:isolate; }
.nav::before,.language-nav::before { content:""; position:absolute; z-index:0; top:5px; left:5px; width:var(--pill-indicator-width,0); height:calc(100% - 10px); border-radius:var(--pill); background:var(--hover); opacity:var(--pill-indicator-opacity,0); transform:translateX(var(--pill-indicator-x,0)); transition:transform .42s var(--ease),width .42s var(--ease),opacity .18s ease; }
.nav a { position:relative; z-index:1; display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 20px; border-radius: var(--pill); white-space: nowrap; transition:color .25s ease,transform .32s var(--ease); }
.nav a:hover { transform:translateY(-1px); }
.nav a:active { transform:translateY(0) scale(.98); }
.nav svg { width: 17px; height: 17px; }
.language-nav { position: fixed; top: 22px; right: var(--gutter); z-index: 30; display: flex; gap: 4px; padding: 5px; border-radius: var(--pill); background: var(--surface); }
.language-option { position:relative; z-index:1; display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 20px; border-radius: var(--pill); background: transparent; color: inherit; font: inherit; white-space: nowrap; transition:color .25s ease,transform .32s var(--ease); }
.language-option:hover { transform:translateY(-1px); }
.language-option:active { transform:translateY(0) scale(.98); }
.language-option svg { display: none; width: 17px; height: 17px; }
.language-option[aria-current="true"] svg { display: block; }
.mobile-language,.mobile-menu-toggle,.mobile-menu { display: none; }
@view-transition { navigation:auto; }
::view-transition-old(root) { animation:none; mix-blend-mode:normal; }
::view-transition-new(root) { animation:page-crossfade .24s ease-out both; mix-blend-mode:normal; }
@keyframes page-crossfade { from { opacity:0; } to { opacity:1; } }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 22px; min-height: 50px; padding: 12px 24px; border-radius: var(--pill); background: var(--surface); transition: background .2s, transform .25s var(--ease); }
.button svg,.text-link svg { transition: transform .3s var(--ease); }
.button:hover { background: var(--hover); }
.button:hover svg,.text-link:hover svg { transform: translate(2px,-2px); }
.button:active { transform: scale(.97); }
.button-dark { background: var(--ink); color: #fff; }
.button-dark:hover { background: #393b3b; }
.text-link { display: inline-flex; align-items: center; gap: 14px; padding: 9px 0; min-height: 44px; border-radius: var(--pill); background: transparent; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: #b7baba; }
.circle-button { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: var(--pill); background: var(--surface); transition: background .2s, transform .2s; flex-shrink: 0; }
.circle-button:hover { background: var(--hover); }
.circle-button:active { transform: scale(.94); }
.circle-button:disabled { opacity: .35; cursor: default; }
.hero { text-align: center; padding-top: 135px; padding-bottom: 0; }
.identity { display: inline-flex; flex-direction: column; align-items: center; gap: 12px; }
.identity-symbol { width: 55px; height: 55px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); font-size: var(--title); font-weight: 500; }
.hero h1 { margin: 50px auto 24px; max-width: 1120px; }
.hero h1 { margin-top: 60px; margin-bottom: 40px; }
.hero-hello,.hero-message { margin-bottom: 0; }
.hero-idea { position: relative; display: inline-block; color: #436455; }
.idea-underline { position: absolute; left: 0; right: 0; bottom: -.06em; height: .1em; }
.idea-underline svg { display: block; width: 100%; height: 100%; stroke-width: 3; stroke-dasharray: 210; animation: idea-draw 5.5s var(--ease) infinite; }
.hero-photo-pair { position: relative; display: inline-block; width: 2.28em; height: 1em; vertical-align: -.15em; margin-inline: .13em; }
.hero-photo-pair img { position: absolute; display: block; height: .78em; width: auto; object-fit: contain; border-radius: .09em; will-change: transform; }
.hero-graphic-square { left: .02em; top: .06em; z-index: 2; animation: hero-card-square 5.8s cubic-bezier(.45,.05,.55,.95) infinite; }
.hero-graphic-wide { right: .01em; top: .17em; z-index: 1; animation: hero-card-wide 5.8s cubic-bezier(.45,.05,.55,.95) infinite; }
.hero-ending .hero-words { color: #af4e2c; }
.hero-ending { display:flex; justify-content:center; align-items:baseline; }
.hero-ending-copy { display:inline-flex; align-items:baseline; justify-content:center; gap:.16em; white-space:nowrap; }
.hero-prefix { display:inline-block; flex:0 0 var(--hero-prefix-slot,auto); width:var(--hero-prefix-slot,auto); text-align:right; }
.hero-motion-art { display: inline-flex; width: 1.85em; height: 1.85em; overflow: hidden; vertical-align: -.55em; margin-left: .22em; border-radius: .22em; }
.hero-motion-art video { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-hello .hero-greeting { width: .63em; height: .63em; margin-left: .17em; color: #c6643d; vertical-align: .02em; }
.hero-hello .hero-greeting svg { animation: greeting-wave 5.5s var(--ease) infinite; transform-origin: 50% 85%; stroke-width: 2.8; fill: #fae5d4; }
.hero.motion-paused svg,.hero.motion-paused .hero-photo-pair img { animation-play-state: paused; }
@keyframes greeting-wave { 0%,55%,100% { transform: rotate(-8deg); } 65%,85% { transform: rotate(13deg); } 75%,95% { transform: rotate(-12deg); } }
@keyframes hero-card-square { 0%,100% { transform: translate(.04em,.01em) rotate(-7deg); } 50% { transform: translate(-.05em,-.045em) rotate(-9deg); } }
@keyframes hero-card-wide { 0%,100% { transform: translate(-.04em,.045em) rotate(8deg); } 50% { transform: translate(.045em,.09em) rotate(10deg); } }
@keyframes idea-draw { 0%,12% { stroke-dashoffset: 210; } 38%,92% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -210; } }
.hero-line { display: block; }
.hero-doodle { display: inline-flex; width: .78em; height: .78em; vertical-align: -.07em; margin-inline: .03em; color: #436455; }
.hero-doodle svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.hero-greeting { width: .56em; height: .56em; vertical-align: .04em; }
.hero-greeting svg { animation: hero-spark-turn 9s var(--ease) infinite; }
.hero-pen { transform: rotate(-9deg); }
.hero-pen .pen-stroke { stroke-dasharray: 44; animation: hero-ink 4.2s var(--ease) infinite; }
.hero-browser { width: .96em; height: .72em; transform: rotate(6deg); }
.hero-browser svg { background: #eef1eb; }
.browser-code { animation: hero-code 4.2s var(--ease) infinite; }
.hero-words { display: inline-grid; flex:0 0 var(--hero-word-slot,auto); width:var(--hero-word-slot,auto); vertical-align: bottom; overflow: hidden; text-align: left; }
.hero-word { grid-area: 1 / 1; opacity: 0; transform: translateY(105%); transition: transform .8s var(--ease),opacity .55s var(--ease); }
.hero-word.is-active { opacity: 1; transform: translateY(0); }
.hero-word.is-leaving { transform: translateY(-105%); }
.hero-typing { padding-right: .1em; }
.hero-typing .hero-word { visibility: hidden; opacity: 0; transform: none; transition: none; }
.hero-typed { grid-area: 1 / 1; justify-self:start; text-align:left; white-space:nowrap; }
.hero-caret { display: inline-block; width: 2px; height: .82em; background: var(--ink); margin-left: .04em; vertical-align: -.02em; animation: hero-caret-blink 1s steps(1,end) infinite; }
.hero.motion-paused .hero-caret { animation: none; opacity: 1; }
@keyframes hero-caret-blink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }
@media(prefers-reduced-motion:reduce) { .hero-caret { display: none; } }
.hero-actions { display: flex; justify-content: center; align-items: center; gap: 12px; }
.hero-motion-toggle { display: none; }
.hero-live .hero-motion-toggle { display: inline-grid; }
.hero-motion-toggle svg { fill: none; stroke: currentColor; stroke-width: 1.7; }
.hero-motion-toggle .play-symbol { display: none; }
.hero-motion-toggle[aria-pressed="true"] .pause-symbol { display: none; }
.hero-motion-toggle[aria-pressed="true"] .play-symbol { display: block; }
.hero.motion-paused .hero-doodle svg,.hero.motion-paused .hero-doodle path { animation-play-state: paused; }
@keyframes hero-spark-turn { 0%,65% { transform: rotate(0); } 100% { transform: rotate(180deg); } }
@keyframes hero-ink { 0%,15% { stroke-dashoffset: 44; } 45%,85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -44; } }
@keyframes hero-code { 0%,15% { opacity: .35; transform: translateY(2px); } 45%,100% { opacity: 1; transform: translateY(0); } }
.hero-spark { display: inline-block; color: #436455; font-size: inherit; transform: scale(.45) translateY(-.23em); width: .45em; transform-origin: center; }
.inline-window { display: inline-flex; position: relative; align-items: start; padding: 7px; gap: 3px; width: .95em; height: .64em; vertical-align: middle; border: 1.5px solid #627366; background: #eef1eb; border-radius: 7px; transform: rotate(-7deg) translateY(-.07em); transition: transform .6s var(--ease); }
.inline-window::after { content: ''; position: absolute; inset: 32% 0 auto; border-top: 1.5px solid #627366; }
.inline-window i { width: 3px; height: 3px; background: #627366; border-radius: 50%; }
.inline-art { display: inline-block; width: 1.05em; height: .62em; vertical-align: middle; transform: rotate(5deg) translateY(-.09em); overflow: hidden; transition: transform .6s var(--ease); }
.inline-art img { width: 100%; height: 100%; }
.hero-line:hover .inline-art,.hero-line:hover .inline-window { transform: rotate(0deg) translateY(-.09em); }
.hero-description { color: var(--muted); margin: 0 auto 30px; max-width: 48ch; }
.about { display: block; text-align: center; padding-top: 60px; }
.about-copy { width: min(700px,100%); margin-inline: auto; }
.about-copy p { max-width: 57ch; margin: 24px auto 28px; color: var(--muted); }
.about-strip { display: flex; gap: 22px; justify-content: center; align-items: center; padding-top: 52px; }
.mini-study { width: 120px; height: 145px; overflow: hidden; transition: transform .7s var(--ease); }
.mini-study img { width: 100%; height: 100%; }
.mini-one { transform: rotate(-8deg) translateY(10px); }
.mini-two { width: 170px; height: 170px; }
.mini-three { transform: rotate(8deg) translateY(10px); }
.about-strip:hover .mini-one,.about-strip:hover .mini-three { transform: rotate(0deg); }
.art-spread { position: relative; height: clamp(280px,30vw,390px); margin-top: 60px; isolation: isolate; }
.spread-piece { position: absolute; left: 50%; top: 25px; width: clamp(120px,17vw,210px); transform: translateX(calc(-50% + var(--slot) * 105%)) rotate(var(--tilt)); transform-origin: center 80%; }
.spread-piece img { width: 100%; height: auto; aspect-ratio: 3/4; object-fit: cover; transition: transform .7s var(--ease); }
.feature-spread-piece { margin: 0; }
.spread-piece span,.spread-piece figcaption { display: block; margin-top: 12px; opacity: 0; transform: translateY(5px); transition: opacity .3s,transform .3s; }
.spread-piece:hover,.spread-piece:focus-visible { z-index: 6; }
.spread-piece:hover img,.spread-piece:focus-visible img { transform: translateY(-12px) rotate(calc(var(--tilt) * -1)); }
.spread-piece:hover span,.spread-piece:focus-visible span,.spread-piece:hover figcaption,.spread-piece:focus-visible figcaption { opacity: 1; transform: none; }
.flair-ready .spread-piece { transform: translateX(calc(-50% + var(--slot) * var(--spread,1) * 105%)) translateY(calc((1 - var(--spread,1)) * 65px)) rotate(calc(var(--tilt) * var(--spread,1))); }
.studio-story { align-items: start; }
.studio-panel { position: sticky; top: 115px; }
.studio-canvas { position: relative; padding: 30px; background: var(--surface); overflow: hidden; }
.studio-grid { position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size: 30px 30px; opacity: 0; transition: opacity .7s; }
.studio-preview { position: relative; padding: 0; background: transparent; transform: translateY(0); transition: transform .8s var(--ease); }
.studio-preview-nav { display: flex; justify-content: space-between; padding-bottom: 24px; }
.studio-preview h3 { margin-bottom: 24px; }
.studio-preview-image { position: relative; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; }
.studio-preview-media { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; transition: clip-path 1s var(--ease),transform 1.2s var(--ease); clip-path: inset(0); background: transparent; }
.studio-wire { position: absolute; inset: 0; border: 1px solid var(--line); background: linear-gradient(to top right,transparent calc(50% - 1px),var(--line) 50%,transparent calc(50% + 1px)),linear-gradient(to bottom right,transparent calc(50% - 1px),var(--line) 50%,transparent calc(50% + 1px)); opacity: 0; transition: opacity .7s; }
.studio-preview-bottom { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; margin-top: 24px; }
.studio-mini-action { padding: 9px 16px; background: var(--surface); border-radius: var(--pill); transition: background .6s,color .6s; }
.studio-canvas[data-phase="0"] .studio-grid,.studio-canvas[data-phase="0"] .studio-wire { opacity: 1; }
.studio-canvas[data-phase="0"] .studio-preview-media { clip-path: inset(100% 0 0); transform: scale(1.12); }
.studio-canvas[data-phase="2"] .studio-mini-action { background: var(--ink); color: #fff; }
.studio-controls { display: none; gap: 5px; padding: 6px; border-radius: var(--pill); background: var(--surface); margin-top: 20px; width: fit-content; }
.studio-ready .studio-controls { display: flex; }
.studio-controls button { border-radius: var(--pill); padding: 10px 16px; background: transparent; transition: background .3s; }
.studio-controls button[aria-pressed="true"] { background: var(--hover); }
.studio-caption { margin-top: 18px; color: var(--muted); }
.studio-story .principle { min-height: 260px; padding-block: 35px; scroll-margin-top: 145px; transition: opacity .5s; }
.studio-ready .principle { opacity: 1; transition: border-color .5s; }
.studio-ready .principle.is-current { border-color: #627366; }
@media(max-width: 899px), (max-height: 799px) {
  .studio-panel { position: static; }
  .studio-story .principle { min-height: 0; }
  .studio-ready .principle { opacity: 1; }
}
.work-story { margin-top: 130px; }
.work-stage { padding-block: 38px; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 32px; margin-bottom: 36px; }
.section-heading p { color: var(--muted); max-width: 30ch; }
.gallery-viewport { overflow-x: auto; scrollbar-width: none; touch-action: pan-x pan-y; cursor: grab; scroll-behavior: auto; }
.gallery-viewport::-webkit-scrollbar { display: none; }
.gallery-viewport.is-dragging { cursor: grabbing; user-select: none; }
.gallery-rail { display: flex; gap: 14px; }
.gallery-card { flex: 0 0 calc((100% - 42px)/4); min-width: 0; margin-inline-end: -7%; }
.gallery-card:last-child { margin-inline-end: 0; }
.gallery-rail { padding-block: 48px 28px; }
.card-space { perspective: 1400px; padding: 0 10px; }
.card-object { position: relative; transform-style: preserve-3d; transform: rotateY(var(--card-angle,-77deg)) rotateZ(var(--card-roll,0deg)) translateY(var(--card-rise,0px)); }
.card-object .project-image { transform: translateZ(5px); box-shadow: 10px 16px 20px -17px #20212170; backface-visibility: hidden; }
.card-object .project-image::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg,transparent 30%,#ffffff35 50%,transparent 70%); background-size: 230% 100%; background-position: var(--card-light,50%) 0; opacity: .65; }
.card-edge { position: absolute; inset: 0 auto 0 0; width: 10px; background: var(--project-color); filter: brightness(.67); transform: translateX(-5px) rotateY(-90deg); }
.card-object::before { content: ''; position: absolute; inset: 0 0 0 auto; width: 10px; background: var(--project-color); filter: brightness(.72); transform: translateX(5px) rotateY(90deg); }
.gallery-card .card-object { width: 150%; margin-left: -25%; }
.gallery-card .card-object .project-image { aspect-ratio: 9/8; }
.feature-card { margin: 0; }
.gallery-card .project-caption { color: var(--ink); padding-inline: 10px; max-width: 72%; }
.gallery-card .project-caption p { color: var(--ink); }
.gallery-card .project-link:hover img { transform: none; }
@media(prefers-reduced-motion:reduce) { .card-object { transform: rotateY(-77deg); } }
.project-image { background: var(--project-color,var(--surface)); position: relative; aspect-ratio: 3/4; overflow: hidden; }
.project-image img { width: 100%; height: 100%; transition: transform .7s var(--ease); }
.project-link:hover img { transform: scale(1.045); }
.project-arrow { position: absolute; right: 12px; bottom: 12px; width: 42px; height: 42px; border-radius: var(--pill); background: #fff; display: grid; place-items: center; opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .35s var(--ease); }
.project-link:hover .project-arrow,.project-link:focus-visible .project-arrow { opacity: 1; transform: none; }
.project-caption { padding-top: 18px; }
.project-caption p { margin-top: 5px; color: var(--muted); }
.gallery-bottom { display: grid; grid-template-columns: 1fr 1.1fr auto; gap: 48px; padding-top: 32px; align-items: start; }
.gallery-description { color: var(--muted); }
.gallery-description .text-link { color: var(--ink); margin-top: 6px; }
.gallery-controls { display: flex; gap: 8px; }
.gallery-progress { height: 2px; background: var(--line); margin-top: 28px; overflow: hidden; }
.gallery-progress span { display: block; width: 44.44%; height: 100%; background: #737c74; transform-origin: left; }
.work-story.is-enhanced { position: relative; }
.is-enhanced .work-stage { position: sticky; top: 94px; }
.ethic-grid { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(50px,8vw,130px); align-items: center; }
.ethic-art { width: 100%; max-width: 440px; aspect-ratio: 1; overflow: hidden; }
.ethic-art img { width: 100%; height: 100%; }
.principle { border-top: 1px solid var(--line); padding: 27px 0; }
.principle p { margin-top: 13px; color: var(--muted); max-width: 48ch; }
.results { margin-top: 130px; padding-block: 85px; background: var(--surface); }
.results-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 60px; }
.results-grid p { color: var(--muted); margin-top: 16px; }
.result-symbol { display: grid; place-items: center; width: 50px; height: 50px; font-size: var(--title); margin: 0 0 40px; color: #526558; }
.results-foot { display: flex; justify-content: space-between; gap: 30px; align-items: center; margin-top: 55px; padding-top: 25px; border-top: 1px solid var(--line); color: var(--muted); }
.results-foot a { color: var(--ink); }
.skills { width: min(var(--width), calc(100% - var(--gutter)*2)); margin-left: max(var(--gutter), calc((100% - var(--width))/2)); margin-right: 0; padding-bottom: clamp(90px,10vw,150px); }
.skills-intro { margin: -12px 0 52px; max-width: 52ch; color: var(--muted); }
.skills-subheading { display: flex; align-items: baseline; gap: 18px; margin-bottom: 20px; }
.skills-subheading>p { color: var(--muted); }
.skills-subheading h3 { font-size: clamp(1.5rem,2vw,1.9rem); line-height: 1.25; letter-spacing: -.018em; font-weight: 500; }
.skills-showcase { position: relative; }
.skill-major-grid { display: flex; width: 100%; gap: 12px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; padding: 1px; margin: -1px; scroll-snap-type: x mandatory; scroll-padding-left: 1px; scrollbar-width: none; touch-action: pan-x pan-y; cursor: grab; }
.skill-major-grid::-webkit-scrollbar { display: none; }
.skill-major-grid:active { cursor: grabbing; }
.skill-major { position: relative; display: flex; flex: 0 0 380px; flex-direction: column; height: 510px; padding: 32px; border: 1px solid #dedede; border-radius: 0; overflow: hidden; scroll-snap-align: start; transition: border-color .25s, background .25s; }
.skill-major:hover { background: var(--surface); border-color: var(--surface); }
.skill-number { color: #9ba5b7; }
.skill-illustration { display: grid; place-items: center; width: 66px; height: 66px; margin: 68px 0 auto; border: 1px solid #a6a6a6; border-radius: 50%; font-size: 32px; line-height: 1; color: #5f6464; }
.skill-major:nth-child(2) .skill-illustration { border-radius: 14px; transform: rotate(10deg); }
.skill-major:nth-child(3) .skill-illustration { border-radius: 0; }
.skill-major:nth-child(4) .skill-illustration { transform: rotate(-12deg); }
.skill-major:nth-child(5) .skill-illustration { border-style: dashed; }
.skill-major h3,.tech-card h3 { font-size: var(--title); }
.skill-line { margin-top: 14px; font-weight: 500; }
.skill-detail { margin-top: 17px; color: var(--muted); }
@media(min-width: 1001px) { .skills-showcase::after { content: ''; position: absolute; z-index: 2; top: 44px; bottom: 0; left: calc(100% - 220px); width: 220px; pointer-events: none; background: linear-gradient(90deg, rgb(255 255 255 / 0), var(--canvas) 92%); transition: opacity .2s; } .skills-showcase.is-at-end::after { opacity: 0; } }
.skills-technology { margin-top: 72px; }
.tech-marquee-stack { display: grid; gap: 12px; width: 100%; margin-left: 0; overflow: visible; }
.tech-marquee { overflow: hidden; scrollbar-width: none; touch-action: pan-y; cursor: grab; }
.tech-marquee::-webkit-scrollbar { display: none; }
.tech-marquee.is-dragging { cursor: grabbing; }
.tech-marquee-track,.tech-marquee-set { display: flex; gap: 12px; width: max-content; }
.tech-marquee-track { padding-inline: 12px; will-change: transform; }
.tech-card { display: flex; flex: 0 0 clamp(190px,21vw,270px); align-items: center; gap: 12px; min-height: 88px; padding: 12px 16px; background: var(--surface); border: 0; border-radius: 12px; transition: background .25s, transform .3s var(--ease); }
.tech-card:hover { background: var(--hover); transform: translateY(-3px); }
.tech-mark { display: block; width: 36px; height: 36px; flex: 0 0 36px; object-fit: contain; }
.tech-mark-text { display: grid; place-items: center; font-size: 14px; font-weight: 500; line-height: 1; }
.tech-card-icon-only { justify-content: center; }
.tech-card-icon-only .tech-mark { width: 52px; height: 52px; flex-basis: 52px; }
.tech-card h3 { font-size: clamp(1rem,1.15vw,1.15rem); letter-spacing: -.012em; line-height: 1.25; }
.tech-card p { margin-top: 3px; color: var(--muted); font-size: .95rem; line-height: 1.3; }
@media (min-width: 768px) {
  .tech-marquee { overflow: visible; cursor: default; }
  .tech-marquee-track { width: 100%; padding-inline: 0; transform: none !important; }
  .tech-marquee-set { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; }
  .tech-marquee-set[aria-hidden="true"] { display: none; }
  .tech-card { width: 100%; flex: initial; }
}
.contact { display: grid; grid-template-columns: 1fr 1.15fr; align-items: center; gap: 110px; }
.contact-art { width: 330px; max-width: 100%; aspect-ratio: 4/5; justify-self: center; }
.contact-art img { width: 100%; height: 100%; }
.contact-copy>p { max-width: 43ch; color: var(--muted); margin-top: 22px; }
.contact-copy>.button { margin-top: 30px; }
.contact-copy .contact-note { margin-top: 18px; }
.contact-copy>.text-link { margin-top: 15px; }
.faq { display: grid; grid-template-columns: 1fr 1.2fr; gap: 90px; }
.faq-intro p { margin-top: 22px; color: var(--muted); }
.faq-list details { border-top: 1px solid var(--line); }
.faq-list details:last-child { border-bottom: 1px solid var(--line); }
.faq-list summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; cursor: pointer; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary span { transition: transform .42s cubic-bezier(.22,1,.36,1); }
.faq-list details.is-expanded summary span { transform: rotate(45deg); }
.faq-answer { display: grid; grid-template-rows: 0fr; max-width: 53ch; color: var(--muted); opacity: 0; transition: grid-template-rows .46s cubic-bezier(.22,1,.36,1), opacity .25s ease; }
.faq-answer>p { min-height: 0; overflow: hidden; padding-bottom: 0; transition: padding-bottom .46s cubic-bezier(.22,1,.36,1); }
.faq-list details.is-expanded .faq-answer { grid-template-rows: 1fr; opacity: 1; }
.faq-list details.is-expanded .faq-answer>p { padding-bottom: 24px; }
@media (prefers-reduced-motion: reduce) { .faq-list summary span,.faq-answer,.faq-answer>p { transition-duration: .01ms; } }
.footer { padding-top: 55px; padding-bottom: 25px; margin-top: 130px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.footer-name { font-size: var(--title); font-weight: 500; letter-spacing: -.018em; display: inline-flex; align-items: center; gap: 14px; }
.footer-dot { width: 11px; height: 11px; background: #718c68; border-radius: 50%; }
.footer p { color: var(--muted); margin-top: 12px; }
.footer>div:nth-child(2) { display: flex; align-items: flex-start; flex-direction: column; justify-self: end; }
.footer>div:nth-child(2) a { padding-block: 7px; min-height: 44px; }
.footer a:hover { color: #526558; }
.footer-note { grid-column: 1/-1; padding-top: 24px; }
.brief-dialog { width: min(650px,calc(100% - 32px)); max-height: 90svh; padding: 32px; border: 1px solid var(--line); border-radius: 0; overflow: auto; overscroll-behavior: contain; scroll-padding: 24px; }
.brief-dialog::backdrop { background: #20212166; backdrop-filter: blur(5px); }
.dialog-top { display: flex; gap: 20px; justify-content: space-between; align-items: start; margin-bottom: 20px; }
.brief-dialog>p { color: var(--muted); }
.brief-dialog form { margin-top: 25px; display: grid; gap: 20px; }
.brief-dialog label { display: grid; gap: 8px; }
.brief-dialog input,.brief-dialog textarea { width: 100%; border: 1px solid #bebfc0; background: #fff; border-radius: 0; padding: 12px 16px; }
.brief-dialog textarea { resize: vertical; }
body:has(dialog[open]) { overflow: hidden; }
.brief-dialog .button { justify-self: start; }
.page-header { padding-top: 170px; padding-bottom: 70px; }
.page-header p { max-width: 53ch; margin-top: 30px; color: var(--muted); }
.talk-page { min-height: calc(100svh - 130px); }
.talk-hero { display: grid; grid-template-columns: .96fr 1.04fr; gap: clamp(42px,7vw,112px); align-items: center; padding-top: 150px; padding-bottom: 78px; }
.talk-hero-copy p { max-width: 49ch; margin-top: 30px; color: var(--muted); }
.talk-image-pair { position: relative; height: clamp(430px,43vw,610px); min-width: 0; }
.talk-image { position: absolute; margin: 0; overflow: hidden; background: var(--surface); }
.talk-image img,.talk-image video { display: block; width: 100%; height: 100%; object-fit: cover; }
.talk-image-primary { inset: 0 5% 0 0; }
.talk-image-primary img { object-position: 58% center; }
.talk-image-detail { right: 0; bottom: 7%; width: 36%; height: 47%; }
.talk-image-detail img,.talk-image-detail video { object-position: center; }
.talk-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(52px,9vw,144px); padding-top: 88px; border-top: 1px solid var(--line); }
.talk-copy p { margin-top: 22px; max-width: 38ch; color: var(--muted); }
.talk-copy .talk-kicker { margin: 0 0 18px; color: var(--ink); font-size: .92rem; }
.talk-links { display: grid; justify-items: start; gap: 18px; margin-top: 34px; }
.talk-email,.talk-cv,.talk-linkedin { display: inline-flex; align-items: center; gap: 10px; width: fit-content; }
.talk-email { padding-bottom: 5px; border-bottom: 1px solid var(--ink); font-size: clamp(1.1rem,1.6vw,1.35rem); }
.talk-cv,.talk-linkedin { color: var(--muted); }
.talk-cv:hover,.talk-linkedin:hover { color: var(--ink); }
.talk-options { display: grid; gap: 12px; }
.talk-option { display: grid; grid-template-columns: 52px 1fr; gap: 8px 18px; min-height: 220px; padding: 28px; border: 1px solid var(--line); border-radius: 14px; transition: background .25s, border-color .25s, transform .3s var(--ease); }
.talk-option:hover { background: var(--surface); border-color: var(--surface); transform: translateY(-3px); }
.talk-option-number { color: #9ba5b7; }
.talk-option h3 { font-size: var(--title); }
.talk-option div>p { margin-top: 14px; max-width: 40ch; color: var(--muted); }
.talk-option-action,.talk-option .text-link { grid-column: 2; align-self: end; justify-self: start; }
.talk-option-action { display: inline-flex; align-items: center; gap: 14px; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: #b7baba; }
.talk-option-action svg { width: 19px; height: 19px; }
.talk-preview-note { margin-top: 24px; color: var(--muted); }
.talk-form { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 0; }
.talk-form-heading { grid-column: 1/-1; display: flex; align-items: baseline; gap: 18px; margin-bottom: 4px; }
.talk-form-heading>span { color: #9ba5b7; }
.talk-form-heading h3 { font-size: var(--title); }
.talk-form label { display: grid; gap: 9px; color: var(--ink); font-size: .95rem; }
.talk-form input,.talk-form textarea { width: 100%; border: 0; border-radius: 0; background: var(--surface); padding: 14px 16px; outline: none; }
.talk-form input { min-height: 54px; }
.talk-form textarea { min-height: 170px; resize: vertical; }
.talk-form input:focus,.talk-form textarea:focus { box-shadow: 0 0 0 2px var(--ink); }
.talk-form-message,.talk-form button,.talk-form-note { grid-column: 1/-1; }
.talk-form button { justify-self: start; }
.talk-form-note { color: var(--muted); font-size: .92rem; }
.work-index { display: grid; grid-template-columns: repeat(3,1fr); gap: 60px 24px; }
.work-index .project-image { aspect-ratio: 4/5; }
.archive-header { padding-bottom: 48px; }
.archive-header p { max-width: 47ch; }
.archive-summary { display: flex; justify-content: space-between; gap: 24px; border-top: 1px solid var(--line); padding: 22px 0 32px; color: var(--muted); }
.archive .work-card { min-width: 0; }
.page-cta { display: flex; gap: 24px; flex-wrap: wrap; align-items: center; }
.page-cta h2 { flex: 1 1 45%; }
.about-page .page-header { padding-bottom: 55px; }
.about-intro { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(35px,6vw,90px); align-items: start; }
.about-visual img { width: 100%; height: auto; aspect-ratio: 1 / 1.08; object-fit: cover; }
.about-image-composition { position: relative; }
.about-photo { overflow: hidden; }
.about-photo-work { position: relative; width: 100%; aspect-ratio: 1 / 1.08; overflow: visible; background: var(--surface); }
.about-photo-portrait { position: absolute; right: -12%; bottom: 7%; z-index: 1; width: 38%; aspect-ratio: 4 / 5; padding: 1.1%; background: #ededf0; }
.about-photo > img { display: block; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
.about-photo-placeholder { display: grid; place-items: center; width: 100%; height: 100%; background: #e9e9ec; color: var(--muted); text-align: center; font-size: .875rem; line-height: 1.35; }
.about-photo-placeholder span { display: block; }
.about-image-composition>p { margin-top: 18px; }
.about-visual p { margin-top: 18px; color: var(--muted); max-width: 40ch; }
.about-story h2 { margin-bottom: 25px; }
.about-story p { margin-bottom: 22px; max-width: 49ch; }
.about-story .button { margin-top: 7px; }
.about-more { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .38s var(--ease), opacity .22s ease; }
.about-more-inner { min-height: 0; overflow: hidden; }
.about-story.is-expanded .about-more { grid-template-rows: 1fr; opacity: 1; }
.about-read-more { display:inline-flex; align-items:center; gap:12px; margin:6px 18px 16px 0; padding:0; background:transparent; color:var(--ink); font:500 1rem/1 var(--font); text-decoration:underline; text-underline-offset:5px; transition:opacity .2s ease; }
.about-read-more:hover { opacity:.6; }
.about-read-more:active { opacity:.45; }
.about-read-more svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; transition:transform .3s var(--ease); }
.about-story.is-expanded .about-read-more svg { transform: rotate(180deg); }
@media(prefers-reduced-motion:reduce) { .about-more,.about-read-more,.about-read-more svg { transition: none; } }
.about-values { margin-top: 75px; padding-block: 30px; border-block: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(35px,6vw,90px); align-items: center; }
.about-values>div { display: flex; flex-direction: column; gap: 8px; }
.about-invitation { padding-top: 70px; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.about-page+.footer { margin-top: 75px; }
.reveal { opacity: 1; transform: none; }
.motion-ready .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease),transform .9s var(--ease); }
.motion-ready .reveal.is-visible { opacity: 1; transform: none; }
.results-grid .reveal:nth-child(2) { transition-delay: 80ms; }
.results-grid .reveal:nth-child(3) { transition-delay: 160ms; }
.motion-ready .hero-line { animation: hero-in .85s var(--ease) both; }
.motion-ready .hero-line:nth-child(2) { animation-delay: .1s; }
.motion-ready .hero-line:nth-child(3) { animation-delay: .2s; }
@keyframes hero-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes soft-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@media(min-width: 900px) and (max-height: 780px) {
  .gallery-card .project-image { aspect-ratio: auto; height: min(34vh,310px); }
  .gallery-bottom { padding-top: 20px; }
  .work-stage { padding-block: 20px; }
  .gallery-progress { margin-top: 15px; }
}
@media(max-width: 1000px) {
  .gallery-card { flex-basis: calc((100% - 28px)/3); }
  .ethic-grid { gap: 50px; }
  .contact { gap: 55px; }
  .results-grid { gap: 30px; }
  .skills { margin-inline: auto; }
  .skill-major-grid { width: auto; }
  .skill-major { flex-basis: calc((100% - 14px)/2); height: 500px; }
  .tech-card { padding: 18px; gap: 12px; }
  .faq { gap: 40px; }
}
@media(max-width: 767px) {
  :root { --body: 1rem; --hero: clamp(2.25rem,9.6vw,3.4rem); --title: 1.625rem; }
  .nav,.language-nav { display: none; }
  .site-logo { top:max(14px,env(safe-area-inset-top)); left:var(--gutter); z-index:53; width:102px; min-height:54px; }
  .mobile-language { display:block; position:fixed; top:max(14px,env(safe-area-inset-top)); right:calc(var(--gutter) + 64px); z-index:53; }
  .mobile-language-current { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-width:76px; height:54px; padding:0 14px; border:0; border-radius:var(--pill); background:var(--surface); color:var(--ink); font:500 .95rem/1 var(--font); transition:background .25s ease,transform .32s var(--ease); }
  .mobile-language-current:hover { background:var(--hover); transform:translateY(-1px); }
  .mobile-language-current>svg:first-child { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.5; }
  .mobile-language-current>svg:last-child { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; transition:transform .35s var(--ease); }
  .mobile-language.is-open .mobile-language-current>svg:last-child { transform:rotate(180deg); }
  .mobile-language-options { position:absolute; top:62px; right:0; display:grid; gap:3px; min-width:100%; padding:5px; border-radius:22px; background:var(--surface); box-shadow:0 16px 34px rgb(20 20 20 / .1); transform-origin:top right; transform:translateY(-8px) scale(.92); opacity:0; visibility:hidden; pointer-events:none; transition:transform .38s var(--ease),opacity .2s ease,visibility 0s linear .38s; }
  .mobile-language.is-open .mobile-language-options { transform:none; opacity:1; visibility:visible; pointer-events:auto; transition:transform .38s var(--ease),opacity .2s ease; }
  .mobile-language-options .language-option { justify-content:flex-start; min-height:42px; padding:0 12px; border-radius:17px; }
  .mobile-language-options .language-option svg { display:block; width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.5; }
  .mobile-language-options .language-option[aria-current="true"] { background:var(--hover); }
  .mobile-menu-toggle { position: fixed; top: max(14px,env(safe-area-inset-top)); right: var(--gutter); z-index: 52; display: grid; place-items: center; width: 54px; height: 54px; padding: 0; border: 0; border-radius: 50%; background: var(--surface); color: var(--ink); }
  .mobile-menu-toggle span { grid-area: 1/1; width: 20px; height: 1.5px; background: currentColor; transition: transform .55s var(--ease); }
  .mobile-menu-toggle span:first-child { transform: translateY(-4px); }
  .mobile-menu-toggle span:last-child { transform: translateY(4px); }
  .mobile-menu-toggle[aria-expanded="true"] span:first-child { transform: rotate(45deg); }
  .mobile-menu-toggle[aria-expanded="true"] span:last-child { transform: rotate(-45deg); }
  .mobile-menu { position: fixed; inset: 0; z-index: 50; display: block; padding: 18px var(--gutter) max(24px,env(safe-area-inset-bottom)); background: rgb(255 255 255 / .98); backdrop-filter: blur(18px); opacity: 0; clip-path: inset(0 0 100% 0); pointer-events: none; transition: clip-path .62s var(--ease), opacity .18s ease; }
  .mobile-menu.is-open { opacity: 1; clip-path: inset(0); pointer-events: auto; }
  .mobile-menu-inner { display: grid; grid-template-rows: auto 1fr auto; min-height: 100%; padding-top: 4px; }
  .mobile-menu-brand { align-self: start; display:inline-flex; width:102px; min-height:54px; align-items:center; }
  .mobile-menu-brand img { width:100%; height:auto; object-fit:contain; }
  .mobile-menu-links { align-self: center; display: grid; gap: 6px; margin-top: 16px; }
  .mobile-menu-links a { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 10px 0; font-size: clamp(2rem,10.5vw,3.25rem); line-height: 1.08; letter-spacing: -.05em; transform: translateY(18px); opacity: 0; transition: transform .55s var(--ease), opacity .38s ease; }
  .mobile-menu-links a svg { width: .62em; height: .62em; }
  .mobile-menu.is-open .mobile-menu-links a { transform: none; opacity: 1; }
  .mobile-menu.is-open .mobile-menu-links a:nth-child(2) { transition-delay: 55ms; }
  .mobile-menu.is-open .mobile-menu-links a:nth-child(3) { transition-delay: 110ms; }
  .mobile-menu.is-open .mobile-menu-links a:nth-child(4) { transition-delay: 165ms; }
  .mobile-menu-footer { display: grid; gap: 22px; border-top: 1px solid var(--line); padding-top: 18px; transform: translateY(14px); opacity: 0; transition: transform .5s var(--ease) .14s, opacity .35s ease .14s; }
  .mobile-menu.is-open .mobile-menu-footer { transform: none; opacity: 1; }
  .mobile-menu-languages { position: relative; isolation: isolate; display: flex; gap: 6px; padding: 5px; width: fit-content; border-radius: var(--pill); background: var(--surface); }
  .mobile-menu-languages::before { content: ''; position: absolute; z-index: 0; top: 5px; left: 5px; width: var(--pill-indicator-width,0); height: calc(100% - 10px); border-radius: var(--pill); background: var(--hover); opacity: var(--pill-indicator-opacity,0); transform: translateX(var(--pill-indicator-x,0)); transition: transform .5s var(--ease), width .5s var(--ease), opacity .2s ease; }
  .mobile-menu-languages .language-option { min-height: 44px; padding-inline: 18px; border-radius: var(--pill); }
  .mobile-menu-languages .language-option svg { display: none; width: 17px; height: 17px; }
  .mobile-menu-languages .language-option[aria-current="true"] svg { display: block; }
  .mobile-menu-contact { display: grid; gap: 9px; color: var(--muted); }
  .mobile-menu-contact a { display: inline-flex; align-items: center; gap: 10px; width: fit-content; font-size: 1.05rem; }
  .mobile-menu-email { display: flex; align-items: center; gap: 10px; }
  .mobile-menu-contact .mobile-email-action { display: grid !important; place-items: center; width: 42px; height: 42px; padding: 0; border-radius: 50%; background: var(--surface); color: var(--ink); }
  .mobile-email-action:hover { background: var(--hover); }
  .mobile-menu-contact svg { width: 15px; height: 15px; }
  body:has(.mobile-menu.is-open) { overflow: hidden; }
  @media (prefers-reduced-motion: reduce) { .site-logo { animation:none; opacity:1; transform:none; } .site-logo img,.mobile-menu,.mobile-menu-toggle span,.mobile-menu-links a,.mobile-menu-footer,.mobile-language-current,.mobile-language-current svg,.mobile-language-options { transition-duration: .01ms; } }
  .hero { padding-top: 115px; }
  .hero h1 { margin-top: 36px; line-height: 1.3; }
  .hero-message { max-width: 18ch; margin-inline: auto; }
  .hero-photo-pair { width: 1.92em; height: .92em; margin-inline: .1em; vertical-align: -.15em; }
  .hero-photo-pair img { height: .69em; }
  .hero-ending .hero-words { vertical-align: bottom; }
  .hero-ending { display: grid; justify-items: center; }
  .hero-ending-copy { grid-column: 1; grid-row: 1; text-align: left; }
  .hero-motion-art { grid-column: 1; grid-row: 2; width: 2.6em; height: 2.6em; flex-shrink: 0; vertical-align: initial; margin: .22em 0 0; border-radius: .26em; }
  .hero-description { max-width: 27ch; margin-top: 20px; }
  .inline-window { padding: 3px; gap: 2px; }
  .inline-window i { width: 2px; height: 2px; }
  .about { padding-top: 50px; }
  .art-spread { height: 230px; margin-top: 40px; }
  .spread-piece { width: clamp(80px,25vw,100px); transform: translateX(calc(-50% + var(--slot) * 56%)) rotate(var(--tilt)); }
  .flair-ready .spread-piece { transform: translateX(calc(-50% + var(--slot) * var(--spread,1) * 56%)) translateY(calc((1 - var(--spread,1)) * 35px)) rotate(calc(var(--tilt) * var(--spread,1))); }
  .spread-piece span,.spread-piece figcaption { display: none; }
  .studio-canvas { padding: 18px; }
  .studio-preview { padding: 0; }
  .studio-controls { width: 100%; justify-content: center; }
  .studio-controls button { padding-inline: 12px; }
  .flair-ready .art-spread { display: flex; gap: 14px; height: auto; padding: 18px 28px 12px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; scroll-padding-inline: 28px; touch-action: pan-x pan-y; }
  .flair-ready .art-spread::-webkit-scrollbar { display: none; }
  .flair-ready .spread-piece { position: relative; left: auto; top: auto; flex: 0 0 56%; width: auto; scroll-snap-align: center; transform: scale(calc(.91 + var(--focus,1) * .09)) rotate(var(--lean,0deg)); transform-origin: center; transition: transform .42s var(--ease); }
  .flair-ready .spread-piece img { aspect-ratio: 4/5; }
  .flair-ready .spread-piece span,.flair-ready .spread-piece figcaption { display: block; opacity: 1; transform: none; margin-top: 16px; text-align: left; }
  .flair-ready .spread-piece:hover img,.flair-ready .spread-piece:focus-visible img { transform: none; }
  .studio-canvas { touch-action: pan-y pinch-zoom; }
  .studio-controls { position: relative; gap: 0; display: none; }
  .studio-controls::before { content: ''; position: absolute; top: 6px; bottom: 6px; left: 6px; width: calc((100% - 12px) / 3); background: var(--hover); border-radius: var(--pill); transform: translateX(calc(var(--phase,2) * 100%)); transition: transform .5s var(--ease); }
  .studio-controls button { position: relative; z-index: 1; flex: 1; padding-inline: 8px; }
  .studio-controls button[aria-pressed="true"] { background: transparent; }
  .about-strip { gap: 15px; padding-top: 40px; }
  .mini-study { width: 80px; height: 110px; }
  .mini-two { width: 115px; height: 135px; }
  .desktop-break { display: none; }
  .work-story { margin-top: 75px; height: auto !important; }
  .work-stage { padding-block: 15px; }
  .section-heading { flex-direction: column; align-items: start; gap: 16px; margin-bottom: 28px; }
  .work-stage .section-heading { gap: 8px; margin-bottom: 20px; }
  .gallery-viewport { scroll-snap-type: x mandatory; scroll-padding-left: 0; }
  .gallery-rail { gap: 8px; }
  .gallery-card { flex-basis: 71%; margin-inline-end: -4%; scroll-snap-align: start; }
  .gallery-card .card-space { padding-inline: 6px; }
  .gallery-card .card-object { width: 136%; margin-left: -18%; }
  .gallery-card .project-caption { max-width: 100%; padding-inline: 6px; }
  .gallery-card .project-caption p { margin-top: 2px; line-height: 1.25; }
  .gallery-card .project-image { aspect-ratio: 3/4; }
  .project-arrow { opacity: 1; transform: none; }
  .gallery-bottom { grid-template-columns: 1fr auto; gap: 20px; padding-top: 24px; }
  .gallery-bottom>p { display: none; }
  .gallery-description { grid-column: 1/-1; }
  .gallery-controls { grid-column: 2; }
  .gallery-progress { margin-top: 18px; }
  .ethic-grid { grid-template-columns: 1fr; gap: 32px; }
  .ethic-art { width: 80%; max-width: 340px; }
  .principle { padding-block: 24px; }
  .results { margin-top: 85px; padding-block: 55px; }
  .results-grid { display: flex; gap: 14px; margin-right: calc(var(--gutter) * -1); padding: 2px var(--gutter) 10px 0; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-left: 0; scrollbar-width: none; touch-action: pan-x pan-y; }
  .results-grid::-webkit-scrollbar { display: none; }
  .results-grid article { flex: 0 0 78%; min-height: 270px; padding: 20px; border-radius: 0; background-color: var(--canvas); background-image: linear-gradient(45deg,transparent calc(50% - .5px),rgb(62 67 71 / .018) 50%,transparent calc(50% + .5px)),linear-gradient(-45deg,transparent calc(50% - .5px),rgb(62 67 71 / .018) 50%,transparent calc(50% + .5px)),linear-gradient(rgb(62 67 71 / .032) 1px,transparent 1px),linear-gradient(90deg,rgb(62 67 71 / .032) 1px,transparent 1px); background-size:100% 100%,100% 100%,30px 30px,30px 30px; scroll-snap-align: start; }
  .result-symbol { margin-bottom: 22px; }
  .results-grid h3 { max-width: 17ch; }
  .results-grid p { max-width: 29ch; }
  .results-foot { flex-direction: column; align-items: start; gap: 14px; margin-top: 35px; }
  .skills { padding-bottom: 64px; }
  .skills-intro { margin: -6px 0 36px; }
  .skill-major-grid { gap: 10px; }
  .skill-major { flex-basis: 84%; height: 470px; padding: 24px; }
  .skill-illustration { width: 56px; height: 56px; margin-top: 54px; font-size: 28px; }
  .skills-technology { margin-top: 52px; }
  .tech-marquee-stack { width: 100vw; margin-left: calc(50% - 50vw); gap: 8px; overflow: hidden; }
  .tech-marquee { overflow: hidden; cursor: grab; touch-action: pan-y; }
  .tech-marquee-track,.tech-marquee-set { display: inline-flex; gap: 8px; width: max-content; }
  .tech-marquee-track { padding-inline: 8px; transform: translate3d(0,0,0); will-change: transform; }
  .tech-marquee-set { flex: none; }
  .tech-marquee-set[aria-hidden="true"] { display: flex; }
  .tech-card { box-sizing: border-box; width: clamp(184px,54vw,200px); min-width: clamp(184px,54vw,200px); flex: none; min-height: 70px; padding: 8px 10px; gap: 8px; overflow: hidden; contain: layout paint; }
  .tech-card>div { min-width: 0; max-width: 100%; }
  .tech-mark { width: 34px; height: 34px; flex-basis: 34px; border-radius: 8px; font-size: 12px; }
  .tech-card h3 { font-size: 16px; overflow-wrap: normal; }
  .tech-card p { font-size: 16px; overflow-wrap: normal; }
  .contact { grid-template-columns: 1fr; gap: 35px; }
  .contact-art { width: 58%; max-width: 250px; justify-self: start; }
  .faq { grid-template-columns: 1fr; gap: 35px; }
  .footer { margin-top: 85px; padding-top: 35px; grid-template-columns: 1fr; }
  .footer>div:nth-child(2) { justify-self: start; }
  .footer-note { padding-top: 10px; }
  .page-header { padding-top: 130px; padding-bottom: 45px; }
  .talk-hero { grid-template-columns: 1fr; gap: 42px; padding-top: 126px; padding-bottom: 58px; }
  .talk-image-pair { height: min(114vw,520px); }
  .talk-image-primary { inset: 0 8% 0 0; }
  .talk-image-detail { width: 42%; height: 44%; }
  .talk-layout { grid-template-columns: 1fr; gap: 42px; padding-top: 48px; }
  .talk-option { min-height: 0; padding: 24px; }
  .talk-form { grid-template-columns: 1fr; padding: 0; }
  .work-index { grid-template-columns: 1fr 1fr; gap: 35px 16px; }
  .work-index h3 { overflow-wrap: anywhere; }
  .work-index .project-caption p { overflow-wrap: anywhere; }
  .page-cta { align-items: start; flex-direction: column; }
  .case-heading { flex-direction: column; align-items: start; gap: 24px; }
  .case-hero { height: 110vw; }
  .case-study .case-hero { height: 90vw; }
  .case-facts { gap: 12px; flex-direction: column; }
  .case-detail-grid { grid-template-columns: 1fr; gap: 35px; }
  .case-brand-plane,.case-type-plane { height: 360px; }
  .case-responsive,.case-process,.case-contact { grid-template-columns: 1fr; gap: 28px; }
  .case-responsive-copy { padding-top: 0; }
  .case-mobile-plane { padding: 25px 16px; }
  .case-contact>.button { grid-column: 1; }
  .case-brief,.case-outcome,.case-decisions { grid-template-columns: 1fr; gap: 28px; }
  .website-concept { padding: 20px; }
  .concept-nav>span+span { display: none; }
  .concept-layout { grid-template-columns: 1fr; gap: 30px; }
  .concept-layout>img { height: 340px; }
  .next-project { gap: 28px; grid-template-columns: 1fr; }
  .about-page .page-header { padding-bottom: 35px; }
  .about-intro { grid-template-columns: 1fr; gap: 35px; }
  .about-story { grid-row: 1; }
  .about-visual img { aspect-ratio: 4 / 3; }
  .about-photo-work { width:90%; aspect-ratio: 4 / 5; }
  .about-photo-portrait { right: -15%; bottom: 7%; width: 40%; padding: 1.4%; }
  .about-values { margin-top: 45px; grid-template-columns: 1fr; gap: 22px; }
  .about-invitation { padding-top: 45px; align-items: start; flex-direction: column; }
  .about-page+.footer { margin-top: 55px; }
  .brief-dialog { width: calc(100% - 24px); max-height: var(--dialog-mobile-height,calc(100dvh - 24px)); padding: 24px; margin: auto; transform: translateY(var(--dialog-keyboard-shift,0)); transition: transform .2s var(--ease); }
  .brief-dialog form { padding-bottom: max(4px,env(safe-area-inset-bottom)); }
  .brief-dialog input,.brief-dialog textarea { font-size: max(16px,1rem); }
}
@media(max-width: 767px) {
  .language-nav { display: none; }
}
@media(max-width: 360px) {
  .nav { gap: 2px; padding: 4px; }
  .nav a { gap: 8px; min-height: 42px; padding-inline: 10px; }
}
/* Case studies: compact context, purposeful device views, and grouped reasoning. */
.case-study figure:not(.wrap) { margin: 0; }
.case-study .case-header { padding-bottom: 32px; }
.case-study .case-heading { align-items: center; }
.case-study .case-heading>h2 { max-width: 22ch; }
.case-study .case-intro { display: grid; grid-template-columns: 1fr 1.4fr; gap: 32px 80px; align-items: start; margin-bottom: 36px; }
.case-study .case-intro>p { max-width: 56ch; color: var(--muted); }
.case-study .case-overview-grid,.case-study .case-decision-grid,.case-study .case-result-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.case-overview-grid article,.case-study .case-decision-grid article,.case-result-grid article { background: var(--surface); padding: 32px; border: 0; }
.case-overview-grid h3,.case-result-grid h3 { margin-bottom: 20px; }
.case-overview-grid p,.case-result-grid p { color: var(--muted); }
.case-study .case-decisions,.case-study .case-outcome { display: block; }
.case-study .decision-number { display: block; padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid var(--line); color: var(--ink); }
.case-study .case-decision-grid article { display: flex; flex-direction: column; }
.case-study .case-decision-grid h3 { margin-bottom: 20px; }
.case-study .case-decision-grid .decision-effect { margin-top: auto; padding-top: 32px; min-height: 146px; }
.case-study .decision-effect strong { color: var(--ink); font-weight: 500; }
.case-study .decision-effect p+p { margin-top: 8px; }
.case-device-stage { background: var(--surface); padding: clamp(28px,5vw,64px) clamp(16px,4vw,56px) 24px; perspective: 1600px; overflow: hidden; }
.case-laptop { width: 100%; max-width: 1060px; margin-inline: auto; transform-origin: center 55%; }
.laptop-lid { background: #202121; border: 2px solid #454646; border-radius: 20px 20px 8px 8px; padding: 20px 10px 10px; position: relative; box-shadow: 0 24px 40px -30px #20212180; }
.laptop-camera { position: absolute; top: 7px; left: calc(50% - 2px); width: 4px; height: 4px; border-radius: 50%; background: #646666; }
.case-laptop .website-concept { border: 0; background: var(--canvas); padding: clamp(20px,3vw,40px); }
.case-laptop .concept-nav { border-color: var(--line); padding-bottom: 16px; }
.case-laptop .concept-layout { gap: 32px; padding-top: 24px; }
.case-laptop .concept-layout>img { height: clamp(220px,29vw,390px); object-fit: cover; }
.case-laptop .concept-layout h2 { max-width: 16ch; }
.case-laptop .concept-layout p { max-width: 25ch; }
.laptop-base { height: 17px; width: calc(100% + 24px); margin-left: -12px; background: linear-gradient(#d7d7d8,#aaa9aa); border-radius: 2px 2px 45% 45%; position: relative; box-shadow: 0 16px 20px -15px #20212166; }
.laptop-base>span { position: absolute; width: 15%; height: 5px; background: #969798; border-radius: 0 0 7px 7px; left: 42.5%; }
.case-study .case-device-stage figcaption { margin: 32px auto 0; text-align: center; }
.case-study .case-hero { height: clamp(360px,48vw,600px); }
.case-study .case-art-reveal { perspective: 1200px; }
.case-study .case-art-reveal img { object-fit: cover; }
.case-study .case-detail-grid { padding-top: 64px; }
.case-study .case-brand-plane,.case-study .case-type-plane { height: 420px; }
.case-study .case-responsive { align-items: center; }
.case-study .case-mobile-plane { padding: 56px 24px; perspective: 1200px; overflow: hidden; }
.case-phone { position: relative; width: min(100%,316px); margin-inline: auto; padding: 11px; border-radius: 48px; background: #202121; border: 2px solid #646666; box-shadow: 14px 24px 38px -24px #20212180; transform-origin: center 65%; }
.case-phone::before { content: ''; position: absolute; width: 3px; height: 52px; background: #646666; right: -4px; top: 122px; border-radius: 2px; }
.phone-island { position: absolute; width: 82px; height: 22px; background: #202121; border-radius: var(--pill); left: calc(50% - 41px); top: 20px; z-index: 1; }
.case-study .case-mobile-screen { padding: 48px 20px 40px; border: 0; border-radius: 36px; height: 590px; overflow: hidden; }
.case-study .case-mobile-nav { margin-bottom: 24px; }
.case-study .case-mobile-screen img { height: 230px; margin: 22px 0; object-fit: cover; }
.case-study .case-mobile-screen p { color: var(--muted); }
.phone-home { position: absolute; width: 98px; height: 4px; background: var(--ink); bottom: 20px; left: calc(50% - 49px); border-radius: var(--pill); }
.case-study .case-mobile-points { margin-top: 32px; }
.case-study .case-mobile-points p { padding: 20px 0; border-top: 1px solid var(--line); margin: 0; }
.case-mobile-points strong { font-weight: 500; color: var(--ink); }
.case-study .case-process { padding-top: 80px; }
.case-study .case-process article:first-child { padding-top: 0; border: 0; }
.case-study .case-evidence { display: grid; grid-template-columns: 1fr 1.4fr; gap: 32px 80px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); }
.case-study .case-evidence p+p { margin: 0; }
.case-study strong { font-weight: 500; }
.case-study .case-contact { background: var(--surface); padding: 40px; margin-top: 96px; }
[data-device-motion] { backface-visibility: hidden; }
@media(max-width:1000px) and (min-width:768px) {
  .case-overview-grid article,.case-study .case-decision-grid article,.case-result-grid article { padding: 24px; }
  .case-study .case-intro,.case-study .case-evidence { gap: 40px; }
}
@media(max-width:767px) {
  .case-study .case-header { padding-top: 116px; }
  .case-study .case-heading { align-items: start; }
  .case-study .case-facts { gap: 8px; margin-top: 24px; }
  .case-study .case-intro,.case-study .case-evidence { grid-template-columns: 1fr; gap: 20px; }
  .case-study .case-intro { margin-bottom: 28px; }
  .case-study .case-overview-grid,.case-study .case-decision-grid,.case-study .case-result-grid { grid-template-columns: 1fr; gap: 12px; }
  .case-overview-grid article,.case-study .case-decision-grid article,.case-result-grid article { padding: 28px; }
  .case-study .case-decision-grid .decision-effect { min-height: 0; }
  .case-device-stage { padding: 28px 16px 22px; }
  .laptop-lid { border-radius: 12px 12px 4px 4px; padding: 14px 5px 5px; }
  .laptop-camera { top: 5px; }
  .case-laptop .website-concept { padding: 20px 16px; }
  .case-laptop .concept-layout { grid-template-columns: 1fr 1fr; gap: 12px; padding-top: 16px; }
  .case-laptop .concept-layout>img { height: 156px; }
  .case-laptop .concept-layout h2 { font-size: var(--body); line-height: 1.3; letter-spacing: normal; }
  .case-laptop .concept-layout p { display: none; }
  .case-laptop .concept-cta { display: none; }
  .laptop-base { width: calc(100% + 12px); margin-left: -6px; height: 10px; }
  .case-study .case-device-stage figcaption { margin-top: 24px; text-align: left; }
  .case-study .case-hero { height: 400px; }
  .case-study .case-detail-grid { padding-top: 40px; }
  .case-study .case-brand-plane,.case-study .case-type-plane { height: 360px; }
  .case-study .case-mobile-plane { padding: 40px 16px; }
  .case-study .case-contact { padding: 28px; margin-top: 72px; }
}
/* Image-led project stories. Artwork sits directly on the canvas. */
.project-story figure { margin: 0; min-width: 0; }
.project-story figure.wrap { margin-inline: auto; }
.story-header { padding: 132px 0 40px; }
.story-heading { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 64px; margin-top: 32px; }
.story-heading h2 { max-width: 27ch; }
.story-heading p { color: var(--muted); margin-top: 16px; }
.story-opening { padding-top: 16px; }
.project-story figcaption { color: var(--muted); margin-top: 16px; }
.story-overview { display: grid; grid-template-columns: 1fr 1.35fr; gap: 96px; padding-top: 96px; }
.story-scope dl { margin: 28px 0 0; max-width: 340px; }
.story-scope dl>div { display: grid; grid-template-columns: 95px 1fr; gap: 20px; padding: 12px 0; }
.story-scope dt { color: var(--muted); }
.story-scope dd { margin: 0; }
.story-overview-copy h2 { max-width: 32ch; }
.story-overview-copy p { max-width: 58ch; margin-top: 24px; color: var(--muted); }
.story-feature { display: grid; grid-template-columns: 1.35fr 1fr; gap: 96px; align-items: center; padding-top: 112px; }
.story-feature-reverse { grid-template-columns: 1fr 1.35fr; }
.story-feature-copy h2 { max-width: 21ch; margin-bottom: 24px; }
.story-feature-copy p { max-width: 44ch; color: var(--muted); }
.story-feature-copy p+p { margin-top: 20px; }
.study-web { color: var(--ink); background: var(--canvas); }
.study-web-nav { display: flex; justify-content: space-between; gap: 24px; border-block: 1px solid var(--line); padding: 16px 0; }
.study-web-nav>span:first-child { font-weight: 500; }
.study-web-opening-layout { display: grid; grid-template-columns: .65fr 1.35fr; gap: 40px; align-items: center; }
.study-web-opening-layout h3 { max-width: 18ch; }
.study-web-opening-layout p { margin-top: 24px; max-width: 25ch; }
.study-web-opening-layout>img { width: 100%; height: clamp(360px,40vw,560px); }
.study-web-link { display: inline-block; margin-top: 32px; padding-bottom: 5px; border-bottom: 1px solid var(--ink); }
.study-web-bottom { display: flex; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--line); padding: 16px 0; }
.study-web-collection>h3 { padding: 28px 0; }
.study-web-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.study-web-grid img { width: 100%; height: 390px; object-fit: cover; object-position: 28% center; }
.study-web-grid img+img { object-position: 82% center; }
.study-web-detail>img { width: 100%; height: 420px; margin-top: 20px; }
.story-feature .study-web>img { width: 100%; height: 500px; margin: 0; }
.story-feature .study-web-detail>img { object-position: 30% center; }
.story-feature .study-web-collection>img { object-position: 75% center; }
.study-web-detail-copy { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.study-web-detail-copy p { color: var(--muted); }
.study-web-flow-layout { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 32px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.study-web-flow-layout img { width: 100%; height: 390px; }
.study-web-flow-layout p { margin-top: 20px; color: var(--muted); }
.story-gallery-section { padding-top: 112px; }
.story-gallery-heading { display: flex; justify-content: space-between; align-items: end; gap: 32px; margin-bottom: 36px; }
.story-gallery-heading p { color: var(--muted); margin-top: 16px; }
.story-gallery-controls { display: none; gap: 12px; }
.study-gallery-ready .story-gallery-controls { display: flex; }
.story-gallery-arrow { width: 54px; height: 54px; padding: 0; justify-content: center; }
.story-gallery-arrow:disabled { opacity: .4; cursor: default; }
.story-gallery { display: flex; overflow-x: auto; gap: 32px; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--line) transparent; padding-bottom: 20px; }
.study-gallery-item { flex: 0 0 64%; scroll-snap-align: start; }
.study-gallery-art { height: 550px; }
.study-gallery-art .study-web-opening-layout h3 { font-size: var(--title); letter-spacing: -.018em; }
.study-gallery-art .study-web-opening-layout>img { height: 355px; }
.study-gallery-art .study-web-grid img { height: 312px; }
.study-gallery-art .study-web-detail>img { height: 310px; }
.study-gallery-art .study-web-flow-layout img { height: 370px; }
.study-gallery-art .study-web-nav,
.study-gallery-art .study-web-bottom,
.study-gallery-art .study-web-detail-copy,
.study-gallery-art .study-web-flow-layout { border: 0; }
.project-story .study-gallery-item figcaption { display: flex; justify-content: space-between; gap: 20px; padding-top: 16px; color: var(--ink); }
.story-gallery-note { margin-top: 16px; color: var(--muted); }
.story-result { display: grid; grid-template-columns: 1fr 1.35fr; gap: 96px; padding-top: 96px; }
.story-result>div>p { margin-top: 24px; max-width: 46ch; color: var(--muted); }
.story-result-detail p { color: var(--muted); margin-top: 20px; }
.story-result-status { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; border-top: 1px solid var(--line); margin-top: 32px; }
.story-result-status strong { font-weight: 500; color: var(--ink); }
.story-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; padding-top: 40px; }
.story-stat { background: var(--surface); padding: 28px 32px; }
.story-stat h3 { margin-bottom: 12px; }
.story-stat p { color: var(--muted); }
.story-stats-note { grid-column: 1/-1; color: var(--muted); margin-top: 8px; max-width: 70ch; }
.project-story:not(.project-story-app) .study-gallery-item { flex-basis: auto; }
.story-gallery-image { width: auto; max-width: none; height: 480px; object-fit: contain; }
.story-overview,.story-result,.story-gallery-section { position: relative; }
.story-overview::before,.story-result::before,.story-gallery-section::before { content: ''; position: absolute; top: 48px; left: 0; right: 0; height: 1px; background: var(--line); }
.story-next { display: grid; grid-template-columns: 1fr 1.35fr; align-items: center; gap: 96px; padding-top: 48px; margin-top: 112px; border-top: 1px solid var(--line); }
.story-next h3 { margin-top: 24px; }
.story-next p { margin-top: 16px; color: var(--muted); }
.story-next .button { margin-top: 28px; }
.story-next-image { display: block; overflow: hidden; }
.story-next-image img { width: 100%; height: 360px; transition: transform .5s var(--ease); }
.story-next-image:hover img { transform: scale(1.025); }
.study-app-art { display: flex; align-items: center; justify-content: center; }
.study-phone { width: 312px; max-width: 100%; padding: 10px; border: 1px solid #747575; border-radius: 42px; background: var(--ink); position: relative; flex-shrink: 0; }
.study-phone-island { position: absolute; top: 17px; left: calc(50% - 40px); width: 80px; height: 22px; border-radius: var(--pill); background: var(--ink); }
.study-app { background: var(--canvas); border-radius: 32px; padding: 46px 20px 22px; min-height: 606px; }
.study-app h3 { margin-top: 24px; }
.study-app>img { width: 100%; height: 248px; margin-top: 24px; }
.study-app>p:not(.app-brand) { margin-top: 20px; }
.app-tabs { display: flex; gap: 24px; justify-content: center; margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--line); }
.app-track { display: flex; flex-wrap: wrap; gap: 4px 16px; border-top: 1px solid var(--line); margin-top: 16px; padding-top: 12px; }
.app-track span:nth-child(2) { color: var(--muted); }
.app-track span:last-child { margin-left: auto; }
.study-app:has(.app-track)>img { height: 166px; }
.app-progress { height: 3px; margin-top: 28px; background: var(--line); }
.app-progress>span { display: block; height: 100%; width: 42%; background: var(--ink); }
.app-playback { display: flex; justify-content: space-around; align-items: center; margin-top: 24px; }
.app-playback span:nth-child(2) { background: var(--surface); border-radius: var(--pill); padding: 16px 24px; }
.project-story-app .study-gallery-art { height: 710px; align-items: start; }
.project-story-app .study-gallery-item { flex-basis: 34%; }
.story-app-opening { display: flex; gap: 48px; justify-content: center; align-items: center; padding: 32px 0; }
.story-app-opening>.study-phone:first-child { transform: translateY(32px) rotate(-4deg); }
.story-app-opening>.study-phone:last-child { transform: translateY(32px) rotate(4deg); }
.story-opening-art,.story-feature-art { transform-origin: center; }
@media(max-width:1000px) {
 .story-heading,.story-overview,.story-feature,.story-result,.story-next { gap: 48px; }
 .story-app-opening { gap: 20px; }
 .story-app-opening>.study-phone { width: 28%; }
 .story-app-opening .study-app { padding-inline: 14px; }
 .study-gallery-item { flex-basis: 80%; }
 .project-story-app .study-gallery-item { flex-basis: 48%; }
}
@media(max-width:767px) {
 .story-header { padding-top: 116px; padding-bottom: 28px; }
 .story-heading { grid-template-columns: 1fr; gap: 24px; margin-top: 28px; }
 .story-heading p { margin-top: 12px; }
 .story-overview,.story-feature,.story-result,.story-next { grid-template-columns: 1fr; gap: 32px; }
 .story-overview,.story-feature,.story-gallery-section,.story-result { padding-top: 64px; }
 .story-overview::before,.story-result::before,.story-gallery-section::before { top: 32px; }
 .story-scope dl { max-width: none; margin-top: 24px; }
 .story-scope dl>div { grid-template-columns: 85px 1fr; gap: 16px; }
 .story-feature-reverse>figure { grid-row: 1; }
 .story-feature-copy h2 { margin-bottom: 20px; }
 .story-feature .study-web>img { height: 360px; }
 .story-stats { grid-template-columns: 1fr; padding-top: 32px; gap: 12px; }
 .story-stat { padding: 24px; }
 .story-gallery-image { height: 360px; }
 .study-web-nav { padding: 12px 0; gap: 12px; }
 .study-web-nav>span+span { max-width: 58%; text-align: right; }
 .study-web-opening-layout { grid-template-columns: 1fr; gap: 24px; padding-top: 24px; }
 .study-web-opening-layout h3 { font-size: var(--title); max-width: 20ch; }
 .study-web-opening-layout p { margin-top: 16px; }
 .study-web-opening-layout .study-web-link { margin-top: 16px; }
 .study-web-opening-layout>img { height: 340px; }
 .story-opening .study-web-opening-layout>img { grid-row: 1; }
 .study-web-bottom { gap: 16px; }
 .study-web-detail>img { height: 330px; }
 .study-web-detail-copy { grid-template-columns: 1fr; gap: 16px; }
 .study-web-grid img { height: 280px; }
 .story-gallery-heading { align-items: start; flex-direction: column; gap: 24px; margin-bottom: 28px; }
 .story-gallery { gap: 24px; }
 .study-gallery-item { flex-basis: 100%; }
 .study-gallery-art { height: 600px; }
 .study-gallery-art .study-web-opening-layout>img { height: 275px; }
 .study-gallery-art .study-web-grid img { height: 380px; }
 .study-gallery-art .study-web-flow-layout { grid-template-columns: 1fr; }
 .study-gallery-art .study-web-flow-layout img { height: 280px; }
 .study-gallery-art .study-web-flow-layout h3 { margin-top: 0; }
 .study-gallery-art .study-web-flow-layout p,.study-gallery-art .study-web-flow-layout .study-web-link { margin-top: 16px; }
 .story-result-status { grid-template-columns: 1fr; gap: 0; }
 .story-next { margin-top: 64px; padding-top: 32px; }
 .story-next-image img { height: 320px; }
 .story-app-opening { overflow-x: auto; justify-content: start; scroll-snap-type: x mandatory; gap: 24px; padding: 16px 0; }
 .story-app-opening>.study-phone { width: 292px; scroll-snap-align: center; }
 .story-app-opening>.study-phone:first-child,.story-app-opening>.study-phone:last-child { transform: none; }
 .project-story-app .study-gallery-item { flex-basis: 100%; }
 .story-feature .study-phone { width: 292px; }
}
@media(prefers-reduced-motion:reduce) {
  @view-transition { navigation: none; }
  html { scroll-behavior: auto; }
  *,*::before,*::after { animation: none !important; transition: none !important; }
  .motion-ready .reveal,.hero-line { opacity: 1; transform: none; }
  .project-image { clip-path: none !important; transform: none !important; opacity: 1 !important; }
  .studio-ready .principle { opacity: 1; }
  [data-story-visual] { transform: none !important; }
}

/* The desktop concept rail uses a deliberate, consistent artwork size so new
   studies can be dropped in without changing the composition. */
@media (min-width:768px) {
  .gallery-rail { gap: 26px; }
  .gallery-card { flex: 0 0 250px; margin-inline-end: 0; }
  .gallery-card .card-object { width: 250px; margin-left: 0; }
  .gallery-card .card-object .project-image { width: 250px; height: 315px; aspect-ratio: auto; }
}
/* STR8: one ecosystem, connected product chapters, replaceable raw artwork. */
.str8-story .story-heading h1 { margin-bottom: 24px; }
.str8-overview-art { display: grid; grid-template-columns: 1.5fr .75fr .75fr; gap: 24px; align-items: start; padding-top: 32px; }
.str8-visual img { display: block; width: 100%; height: auto; object-fit: contain; border-radius: 0; }
.str8-visual figcaption { text-align: center; }
.str8-overview-art .str8-phone { width: min(280px,100%); justify-self: center; }
.str8-visual-note { color: var(--muted); max-width: 80ch; margin-top: 24px; }
.str8-chapter-nav { position: relative; padding-top: 56px; padding-bottom: 32px; }
.str8-chapter-nav>div { display: flex; gap: 4px; width: max-content; max-width: 100%; margin-inline: auto; background: var(--surface); border-radius: var(--pill); padding: 6px; overflow-x: auto; scrollbar-width: none; box-shadow: 0 8px 28px #ffffffc9; }
.str8-chapter-nav a { white-space: nowrap; padding: 10px 18px; border-radius: var(--pill); }
.str8-chapter-nav a:hover,.str8-chapter-nav a:focus-visible,.str8-chapter-nav a[aria-current] { background: var(--hover); }
.str8-content { padding-bottom: 100px; }
.str8-section { padding-top: 96px; margin-top: 48px; border-top: 1px solid var(--line); scroll-margin-top: 190px; }
.str8-product-divider { display: grid; grid-template-columns: 112px 1fr 1fr; gap: 24px; align-items: baseline; border-bottom: 1px solid var(--line); padding-bottom: 20px; margin-bottom: 56px; }
.str8-product-divider p { color: var(--muted); }
.str8-product-divider p:first-child { color: var(--ink); font-size: clamp(2.3rem, 3.2vw, 3.65rem); line-height: .82; }
.str8-product-divider h2 { font-size: var(--title); }
.str8-intro { display: grid; grid-template-columns: 1.2fr 1fr; gap: 96px; }
.str8-copy p { color: var(--muted); margin-top: 24px; max-width: 58ch; }
.str8-responsibilities { display: grid; gap: 32px; }
.str8-responsibilities p { color: var(--muted); margin-top: 12px; }
.str8-chapter-heading { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; margin-bottom: 48px; }
.str8-chapter-heading>p { color: var(--muted); max-width: 57ch; }
.str8-wide img { max-height: 690px; object-fit: contain; }
.str8-experience-story { margin-top: 80px; }
.str8-experience-story .str8-visual { margin-top: 40px; }
.str8-priority-story { margin-top: 96px; padding-top: 72px; border-top: 1px solid var(--line); scroll-margin-top: 190px; }
.str8-priority-layout { display: grid; grid-template-columns: minmax(320px, .85fr) minmax(0, 1fr); gap: clamp(56px, 9vw, 160px); align-items: center; max-width: 1120px; margin-inline: auto; }
.str8-priority-layout .str8-visual { margin: 0; }
.str8-priority-layout .str8-phone { width: min(360px, 100%); justify-self: center; }
.str8-priority-copy { max-width: 560px; }
.str8-priority-copy>p { color: var(--muted); margin-top: 24px; }
.str8-priority-detail { border-top: 1px solid var(--line); margin-top: 48px; padding-top: 24px; }
.str8-priority-detail h3 { background: linear-gradient(105deg, #367cf0 0%, #7568e8 23%, #bd55d8 46%, #ef4f94 70%, #ff6a43 100%); background-size: 180% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: str8-spectrum 8s ease-in-out infinite alternate; }
.str8-priority-detail p { color: var(--muted); margin-top: 16px; }
@keyframes str8-spectrum { to { background-position: 100% 0; } }
.work-index a[href$="work/str8/"] .project-image { background: var(--canvas); }
.work-index a[href$="work/str8/"] .project-image img { object-fit: contain; }
.str8-pair { display: grid; grid-template-columns: 1.35fr 1fr; gap: 88px; align-items: center; margin-top: 88px; }
.str8-pair-reverse { grid-template-columns: 1fr 1.35fr; }
.str8-pair .str8-phone { max-width: 340px; justify-self: center; }
.str8-phone { max-width: 360px; justify-self: center; }
.str8-inline-note { display: grid; grid-template-columns: 1fr 1.35fr; gap: 72px; margin-top: 64px; }
.str8-inline-note p,.str8-editorial p { color: var(--muted); }
.str8-phone-spread { display: grid; grid-template-columns: repeat(3,1fr); gap: 48px; max-width: 1030px; margin-inline: auto; align-items: start; }
.str8-phone-spread figure:nth-child(2) { margin-top: 48px; }
.str8-editorial { display: grid; grid-template-columns: 1fr 1.35fr; gap: 72px; margin-top: 48px; }
.str8-gauge-section { display: grid; grid-template-columns: 1.15fr 1fr; gap: 88px; align-items: center; margin-top: 112px; }
.str8-range-image { margin: 0; }
.str8-range-image img { display: block; width: 100%; height: auto; object-fit: contain; border-radius: 0; }
.str8-range-image figcaption { color: var(--muted); margin-top: 16px; }
.str8-range-demo { min-width: 0; padding-block: 48px; }
.str8-range-readout { margin: 48px 0 68px; }
.str8-range-readout h2 { font-variant-numeric: tabular-nums; }
.str8-range-readout p { color: var(--muted); margin-top: 12px; }
.str8-range-track { position: relative; }
.str8-range-tooltip { position: absolute; left: 57.14%; top: -45px; transform: translateX(-50%); white-space: nowrap; color: var(--ink); transition: left .2s var(--ease); }
.str8-range-track input { appearance: none; width: 100%; margin: 0; height: 20px; border: 0; border-radius: 0; cursor: pointer; background: linear-gradient(90deg,#c67a5c 0 12.5%,#ce956c 12.5% 25%,#d8b57e 25% 37.5%,#c8c394 37.5% 50%,#abc0a1 50% 62.5%,#8eb39c 62.5% 75%,#6c9f8c 75% 87.5%,#467d68 87.5%); }
.str8-range-track input::-webkit-slider-thumb { appearance: none; background: var(--ink); width: 5px; height: 34px; border-radius: 0; }
.str8-range-track input::-moz-range-thumb { background: var(--ink); width: 5px; height: 34px; border: 0; border-radius: 0; }
.str8-range-ends { display: flex; justify-content: space-between; margin-top: 16px; }
.str8-range-demo>p { color: var(--muted); margin-top: 40px; }
.str8-image-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 56px; }
.str8-image-duo .str8-phone { max-width: 340px; justify-self: center; }
.str8-calendar-story .str8-editorial { margin-top: 0; }
.str8-report-pair { display: grid; grid-template-columns: 1.35fr 1fr; gap: 88px; align-items: center; margin-top: 88px; }
.str8-system { margin-top: 64px; }
.str8-system-products { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; text-align: center; padding-bottom: 36px; }
.str8-system-products h3 { position: relative; padding-bottom: 40px; }
.str8-system-products h3:after { content: ''; position: absolute; bottom: -36px; left: 50%; height: 60px; width: 1px; background: var(--line); }
.str8-system-core { border-block: 1px solid var(--line); padding: 32px 0; text-align: center; }
.str8-system-core p { color: var(--muted); margin-top: 16px; }
.str8-explanations { display: grid; grid-template-columns: repeat(3,1fr); gap: 40px; margin-top: 56px; }
.str8-explanations p { color: var(--muted); margin-top: 20px; }
.str8-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.str8-stats article { background: var(--surface); padding: 28px; }
.str8-stats p { color: var(--muted); margin-top: 16px; }
.str8-outcome-copy { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; margin-top: 56px; }
.str8-outcome-copy p { color: var(--muted); margin-top: 20px; }
.str8-closing { text-align: center; max-width: 720px; margin: 96px auto 0; }
.str8-closing p { color: var(--muted); margin: 24px 0 32px; }
.str8-story .story-gallery-section:before { display: none; }
.str8-story .story-gallery-section { border-top: 1px solid var(--line); margin-top: 96px; padding-top: 56px; }
.str8-story .study-gallery-item figcaption { display: block; }
@media (max-width: 900px) {
 .str8-intro,.str8-pair,.str8-gauge-section,.str8-report-pair,.str8-priority-layout { gap: 40px; }
 .str8-chapter-heading,.str8-editorial,.str8-inline-note { gap: 40px; }
 .str8-phone-spread { gap: 24px; }
 .str8-stats { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 650px) {
 .str8-story .story-heading { grid-template-columns: 1fr; gap: 24px; }
 .str8-priority-layout { grid-template-columns: 1fr; }
 .str8-priority-layout .str8-phone { width: min(320px, 100%); }
 .str8-overview-art { grid-template-columns: 1fr .6fr; gap: 20px; }
 .str8-overview-art figure:first-child { grid-column: 1/-1; }
 .str8-overview-art figure:nth-child(2) { max-width: 210px; }
 .str8-chapter-nav { padding-inline: 0; width: 100%; }
 .str8-chapter-nav>div { border-radius: 0; width: 100%; justify-content: flex-start; }
 .str8-chapter-nav a { padding: 10px 14px; }
 .str8-section { padding-top: 56px; margin-top: 40px; scroll-margin-top: 170px; }
 .str8-intro,.str8-chapter-heading,.str8-pair,.str8-editorial,.str8-inline-note,.str8-gauge-section,.str8-report-pair,.str8-outcome-copy { grid-template-columns: 1fr; gap: 32px; }
 .str8-product-divider { grid-template-columns: 64px 1fr; gap: 12px; margin-bottom: 40px; }
 .str8-product-divider p:first-child { font-size: 2.25rem; }
 .str8-product-divider p:last-child { grid-column: 2; }
 .str8-pair,.str8-report-pair { margin-top: 64px; }
 .str8-pair-reverse .str8-copy { order: 2; }
 .str8-phone-spread { gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; grid-template-columns: repeat(3,70%); padding-bottom: 20px; }
 .str8-phone-spread figure { scroll-snap-align: start; }
 .str8-phone-spread figure:nth-child(2) { margin-top: 0; }
 .str8-gauge-section { margin-top: 72px; }
 .str8-range-demo { padding-block: 16px; }
 .str8-image-duo { grid-template-columns: 1fr; gap: 32px; margin-top: 40px; }
 .str8-explanations { grid-template-columns: 1fr; gap: 32px; }
 .str8-system-products { gap: 12px; text-align: left; }
 .str8-system-products h3 { font-size: var(--body); letter-spacing: normal; }
 .str8-stats { gap: 12px; }
 .str8-stats article { padding: 20px; }
 .str8-closing { margin-top: 64px; }
 .str8-content { padding-bottom: 64px; }
}

/* Parallex — personal AI operating system case study */
.px-header { padding-top:150px; display:grid; gap:64px; }
.px-header>div { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:end; }
.px-header p,.px-copy p,.px-section-head>p:last-child,.px-overview>div>p,.px-outcome-copy { color:var(--muted); }
.px-visual { margin:0; min-width:0; }
.px-visual img { display:block; width:100%; height:auto; object-fit:contain; border-radius:0; }
.px-visual figcaption { color:var(--muted); text-align:center; margin-top:18px; }
.px-hero { margin-top:64px; }
.px-hero-image figcaption { display:none; }
.px-overview { display:grid; grid-template-columns:1fr 1fr; gap:clamp(48px,8vw,128px); align-items:start; margin-top:112px; padding-top:48px; border-top:1px solid var(--line); }
.px-copy p { margin-top:20px; max-width:65ch; }
.px-chapter-links { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; padding-top:96px; }
.px-chapter-links a { padding:13px 20px; border-radius:999px; background:var(--surface); color:var(--ink); }
.px-section { border-top:1px solid var(--line); margin-top:112px; padding-top:48px; }
.px-section-head { display:grid; grid-template-columns:80px 1fr 1fr; gap:24px; border-bottom:1px solid var(--line); padding-bottom:24px; margin-bottom:64px; align-items:baseline; }
.px-section-head>p:first-child { font-size:var(--title); }
.px-phone-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(40px,8vw,128px); align-items:start; max-width:820px; margin:0 auto; }
.px-phone-pair .px-phone { width:auto; justify-self:center; display:flex; flex-direction:column; align-items:center; }
.px-phone-pair .px-phone img { width:auto; height:520px; margin-inline:auto; }
.px-phone-pair .px-phone figcaption { width:100%; min-height:48px; line-height:1.35; }
.px-phone-pair + .px-copy { margin:72px auto 0; max-width:900px; }
.px-interlude { margin-top:112px; padding:72px clamp(24px,7vw,112px); background:#111; color:#fff; }
.px-interlude>p:first-child { color:#aaa; margin-bottom:28px; }
.px-interlude h2 { max-width:980px; }
.px-interlude>p:last-child { color:#c9c9c9; max-width:72ch; margin-top:32px; }
.px-swarm-layout { display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(48px,8vw,128px); align-items:center; }
.px-swarm-layout .px-duo figcaption { text-align:left; }
.px-outcome { border-top:1px solid var(--line); margin-top:112px; padding-top:56px; text-align:center; }
.px-outcome>h2 { max-width:780px; margin:auto; }
.px-outcome-copy { max-width:800px; margin:28px auto 0; }
.px-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:56px 0 40px; text-align:left; }
.px-stats article { background:var(--surface); padding:24px; }
.px-stats p { color:var(--muted); margin-top:16px; }
.px-story .story-gallery-section { margin-top:112px; padding-top:48px; }
.px-story .study-gallery-item { flex:0 0 64%; display:grid; place-items:center; }
.px-story .story-gallery-image { display:block; width:100%; max-width:100%; height:620px; object-fit:contain; }
@media (max-width:650px) {
 .px-header { padding-top:112px; gap:48px; }
 .px-header>div,.px-overview,.px-swarm-layout { grid-template-columns:1fr; gap:32px; }
 .px-hero { margin-top:40px; }
 .px-overview,.px-section,.px-interlude,.px-outcome { margin-top:72px; }
 .px-chapter-links { justify-content:flex-start; padding-top:64px; }
 .px-section-head { grid-template-columns:56px 1fr; gap:12px; margin-bottom:40px; }
 .px-section-head>p:last-child { grid-column:2; }
 .px-phone-pair { display:flex; gap:20px; align-items:flex-start; overflow-x:auto; overflow-y:hidden; overscroll-behavior-inline:contain; overscroll-behavior-y:auto; scroll-snap-type:x mandatory; padding:0 16px 20px; margin-inline:-16px; scrollbar-width:none; }
 .px-phone-pair::-webkit-scrollbar { display:none; }
 .px-phone-pair .px-phone { flex:0 0 69%; width:auto; scroll-snap-align:start; }
 .px-phone-pair .px-phone img { width:100%; height:auto; }
 .px-phone-pair + .px-copy { margin-top:64px; }
 .px-interlude { padding:48px 24px; }
 .px-swarm-layout .px-copy { margin-top:16px; }
 .px-stats { grid-template-columns:1fr; margin-top:40px; }
 .px-story .story-gallery-image { height:440px; }
 .px-story .study-gallery-item { flex-basis:100%; }
}

/* Island Punch — packaging and label-system case study */
.ip-header { padding-top: 150px; display: grid; gap: 64px; }
.ip-header > div { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: end; }
.ip-header p,.ip-copy p,.ip-section-head > p:last-child,.ip-overview > div > p,.ip-note { color: var(--muted); }
.ip-visual { margin: 0; min-width: 0; }
.ip-visual img { display: block; width: 100%; height: auto; object-fit: contain; border-radius: 0; }
.ip-visual figcaption { color: var(--muted); margin-top: 16px; }
.ip-hero { margin-top: 64px; }
.ip-hero-image figcaption { display: none; }
.ip-overview { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(48px,8vw,128px); align-items: start; border-top: 1px solid var(--line); margin-top: 112px; padding-top: 48px; }
.ip-copy p { margin-top: 20px; max-width: 65ch; }
.ip-copy-wide { max-width: 780px; margin: 64px auto 0; }
.ip-chapter-links { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; padding-top: 96px; }
.ip-chapter-links a { padding: 13px 20px; border-radius: 999px; background: var(--surface); color: var(--ink); }
.ip-section { border-top: 1px solid var(--line); margin-top: 112px; padding-top: 48px; }
.ip-section-head { display: grid; grid-template-columns: 80px 1fr 1fr; gap: 24px; align-items: baseline; border-bottom: 1px solid var(--line); padding-bottom: 24px; margin-bottom: 64px; }
.ip-section-head > p:first-child { font-size: var(--title); }
.ip-image-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.ip-system-layout { display: grid; grid-template-columns: 1.35fr .65fr; gap: clamp(48px,7vw,112px); align-items: center; }
.ip-system-layout .ip-note { font-size: .88em; border-top: 1px solid var(--line); padding-top: 18px; }
.ip-range-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 32px 24px; align-items: start; }
.ip-range-grid .ip-visual:last-child { grid-column: 1 / -1; width: calc(50% - 12px); justify-self: center; }
.ip-outcome { border-top: 1px solid var(--line); margin-top: 112px; padding-top: 56px; text-align: center; }
.ip-outcome > h2 { max-width: 760px; margin: auto; }
.ip-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin: 56px 0 40px; text-align: left; }
.ip-stats article { background: var(--surface); padding: 24px; }
.ip-stats p { color: var(--muted); margin-top: 16px; }
.ip-story .story-gallery-section { margin-top: 112px; padding-top: 48px; }
.ip-gallery .study-gallery-item { flex: 0 0 76%; }
.ip-gallery .story-gallery-image { width: 100%; max-width: 100%; height: auto; }
@media (max-width: 650px) {
 .ip-header { padding-top: 112px; gap: 48px; }
 .ip-header > div,.ip-overview,.ip-system-layout { grid-template-columns: 1fr; gap: 32px; }
 .ip-hero { margin-top: 40px; }
 .ip-overview,.ip-section,.ip-outcome { margin-top: 72px; }
 .ip-chapter-links { justify-content: flex-start; padding-top: 64px; }
 .ip-section-head { grid-template-columns: 56px 1fr; gap: 12px; margin-bottom: 40px; }
 .ip-section-head > p:last-child { grid-column: 2; }
 .ip-image-pair,.ip-range-grid { display: flex; gap: 20px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; padding: 0 16px 12px; margin-inline: -16px; scrollbar-width: none; }
 .ip-image-pair::-webkit-scrollbar,.ip-range-grid::-webkit-scrollbar { display: none; }
 .ip-image-pair .ip-visual,.ip-range-grid .ip-visual,.ip-range-grid .ip-visual:last-child { flex: 0 0 88%; width: auto; grid-column: auto; scroll-snap-align: start; }
 .ip-copy-wide { margin-top: 40px; }
 .ip-stats { grid-template-columns: 1fr; gap: 12px; margin-top: 40px; }
 .ip-gallery .study-gallery-item { flex-basis: 94%; }
}
@media (prefers-reduced-motion: reduce) { .str8-priority-detail h3 { animation: none; } }

/* Brave Foods — Shopify and visual-direction case study */
.cfx-header { padding-top: 150px; }
.cfx-heading { display: grid; grid-template-columns: 1fr 1.2fr; gap: 72px; margin: 72px 0 56px; }
.cfx-heading p { color: var(--muted); margin-top: 24px; }
.cfx-visual { margin: 0; min-width: 0; }
.cfx-visual img { display: block; width: 100%; height: auto; object-fit: contain; border-radius: 0; }
.cfx-visual figcaption { text-align: center; color: var(--muted); margin-top: 20px; }
.cfx-phone { width: min(300px, 100%); justify-self: center; }
.cfx-overview,.cfx-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 88px; align-items: center; margin-top: 72px; }
.cfx-overview { align-items: start; padding-top: 48px; border-top: 1px solid var(--line); }
.cfx-overview>div>p,.cfx-copy p { color: var(--muted); margin-top: 24px; max-width: 65ch; }
.cfx-copy h2 { max-width: 26ch; }
.cfx-chapter-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 64px; }
.cfx-chapter-links a { padding: 12px 20px; border-radius: var(--pill); background: var(--surface); }
.cfx-chapter-links a:hover,.cfx-chapter-links a:focus-visible { background: var(--hover); }
.cfx-chapter { border-top: 1px solid var(--line); margin-top: 96px; padding-top: 56px; scroll-margin-top: 120px; }
.cfx-chapter-head { display: grid; grid-template-columns: 80px 1fr 1fr; gap: 24px; align-items: baseline; border-bottom: 1px solid var(--line); padding-bottom: 24px; margin-bottom: 56px; }
.cfx-chapter-head>p:first-child { font-size: var(--title); }
.cfx-chapter-head>p:last-child { color: var(--muted); }
.cfx-chapter>.cfx-copy { max-width: 760px; margin: 48px auto; }
.cfx-phone-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 56px; }
.cfx-two-phones { max-width: 900px; margin-inline: auto; }
.cfx-wide-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 64px; }
.cfx-stats { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; margin-top: 56px; }
.cfx-stats article { min-width: 0; padding: 24px; background: var(--surface); }
.cfx-stats h3 { overflow-wrap: anywhere; }
.cfx-stats p { color: var(--muted); margin-top: 20px; }
.cfx-contact { text-align: center; margin-top: 48px; }
.cfx-story .story-gallery-section { border-top: 1px solid var(--line); margin-top: 96px; padding-top: 56px; margin-bottom: 96px; }
.cfx-story .story-gallery-section:before { display: none; }
@media(max-width: 900px) { .cfx-pair,.cfx-overview,.cfx-heading { gap: 40px; } .cfx-stats { grid-template-columns: 1fr 1fr; } }
@media(max-width: 650px) {
 .cfx-header { padding-top: 112px; }
 .cfx-heading,.cfx-overview,.cfx-pair,.cfx-wide-duo { grid-template-columns: 1fr; gap: 32px; }
 .cfx-heading { margin-top: 48px; }
 .cfx-chapter { margin-top: 72px; padding-top: 40px; }
 .cfx-chapter-head { grid-template-columns: 48px 1fr; gap: 16px; }
 .cfx-chapter-head>p:last-child { grid-column: 2; }
 .cfx-phone-row { grid-template-columns: repeat(3, 75%); overflow-x: auto; scroll-snap-type: x mandatory; gap: 24px; padding-bottom: 24px; }
 .cfx-phone-row figure { scroll-snap-align: center; }
 .cfx-two-phones { grid-template-columns: 1fr 1fr; gap: 24px; }
 .cfx-stats { grid-template-columns: 1fr; }
 .cfx-stats article { padding: 20px; }
}
.brave-story { padding-bottom: 120px; }
.brave-header { padding-top: 164px; }
.brave-title { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(240px, .5fr); gap: 64px; align-items: end; margin-top: 80px; }
.brave-title>div>p,.brave-kicker { color: #c4493f; margin-bottom: 20px; }
.brave-title h1 { max-width: 850px; }
.brave-title>p { color: var(--muted); padding-bottom: 12px; }
.brave-hero { margin-top: 64px; }
.brave-visual { margin: 0; }
.brave-visual img { display: block; width: 100%; height: auto; object-fit: contain; }
.brave-visual figcaption { color: var(--muted); margin-top: 16px; }
.brave-hero-image figcaption { display: none; }
.brave-overview { display: grid; grid-template-columns: 1fr 1fr; gap: 96px; border-top: 1px solid var(--line); margin-top: 112px; padding-top: 48px; }
.brave-overview h2 { max-width: 540px; }
.brave-overview>div:last-child { max-width: 570px; }
.brave-overview>div:last-child p { color: var(--muted); }
.brave-overview>div:last-child p+p { margin-top: 24px; }
.brave-section { border-top: 1px solid var(--line); margin-top: 112px; padding-top: 24px; }
.brave-section-head { display: grid; grid-template-columns: 112px 1fr 1fr; gap: 24px; align-items: baseline; border-bottom: 1px solid var(--line); padding-bottom: 20px; margin-bottom: 64px; }
.brave-section-head>p:first-child { color: var(--ink); font-size: clamp(2.3rem, 3.2vw, 3.65rem); line-height: .82; }
.brave-section-head h2 { font-size: var(--title); }
.brave-section-head>p:last-child { color: var(--muted); }
.brave-split,.brave-shop-story,.brave-identity-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); align-items: center; gap: clamp(48px, 8vw, 128px); }
.brave-shop-story { grid-template-columns: minmax(280px, .7fr) minmax(0, 1.3fr); }
.brave-copy h3 { max-width: 430px; }
.brave-copy p { color: var(--muted); margin-top: 20px; }
.brave-device-row { display: grid; grid-template-columns: 1.25fr .45fr; gap: 32px; align-items: end; margin-top: 72px; }
.brave-mobile-visual { max-width: 320px; justify-self: center; }
.brave-identity-layout { grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr); }
.brave-foundation { border-block: 1px solid var(--line); margin-top: 112px; padding-block: 48px; }
.brave-foundation-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.brave-foundation-grid article { border-right: 1px solid var(--line); padding-right: 24px; }
.brave-foundation-grid article:last-child { border-right: 0; }
.brave-foundation-grid p,.brave-foundation>p { color: var(--muted); margin-top: 16px; }
.brave-foundation>p { max-width: 680px; margin-top: 48px; }
.brave-gallery-section { border-top: 1px solid var(--line); margin-top: 112px; padding-top: 48px; }
.brave-gallery-section>div:first-child { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: end; }
.brave-gallery-section>div:first-child>p:last-child { color: var(--muted); max-width: 480px; }
.brave-gallery { display: grid; grid-template-columns: .85fr 1.15fr .85fr 1.15fr; gap: 20px; align-items: end; margin-top: 64px; }
.brave-gallery-item:nth-child(even) { margin-bottom: 64px; }
.brave-gallery-item figcaption { display: none; }
.brave-closing { border-top: 1px solid var(--line); margin-top: 112px; padding-top: 64px; text-align: center; max-width: 820px; margin-inline: auto; }
.brave-closing p { color: var(--muted); margin: 24px auto 32px; max-width: 620px; }
.mjp-header { padding-top: 150px; display: grid; gap: 64px; }
.mjp-header>div { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: end; }
.mjp-header p,.mjp-copy p,.mjp-section-head>p:last-child,.mjp-overview>div>p { color: var(--muted); }
.mjp-visual { margin: 0; min-width: 0; }
.mjp-visual img { display:block; width:100%; height:auto; object-fit:contain; border-radius:0; }
.mjp-visual figcaption { color:var(--muted); text-align:center; margin-top:18px; }
.mjp-hero { margin-top:64px; }
.mjp-overview,.mjp-pair { display:grid; grid-template-columns:1fr 1fr; gap:clamp(48px,8vw,128px); align-items:center; margin-top:112px; }
.mjp-overview { padding-top:48px; border-top:1px solid var(--line); align-items:start; }
.mjp-copy p { margin-top:20px; max-width:65ch; }
.mjp-section { border-top:1px solid var(--line); margin-top:112px; padding-top:48px; }
.mjp-section-head { display:grid; grid-template-columns:80px 1fr 1fr; gap:24px; border-bottom:1px solid var(--line); padding-bottom:24px; margin-bottom:64px; align-items:baseline; }
.mjp-section-head>p:first-child { font-size:var(--title); }
.mjp-wide-duo { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:72px; }
.mjp-section>.mjp-copy { max-width:760px; margin:56px auto 0; }
.mjp-phone { width:min(300px,100%); justify-self:center; }
.mjp-phone-row { display:grid; grid-template-columns:repeat(3,1fr); gap:40px; align-items:start; }
.mjp-outcome { border-top:1px solid var(--line); margin-top:112px; padding-top:56px; text-align:center; }
.mjp-outcome>h2 { max-width:700px; margin:auto; }
.mjp-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:56px 0 40px; text-align:left; }
.mjp-stats article { background:var(--surface); padding:24px; }
.mjp-stats p { color:var(--muted); margin-top:16px; }
.mjp-story .story-gallery-section { margin-top:112px; padding-top:48px; }
.rr-header { padding-top:150px; display:grid; gap:64px; }
.rr-header>div { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:end; }
.rr-header p,.rr-copy p,.rr-section-head>p:last-child,.rr-overview>div>p { color:var(--muted); }
.rr-visual { margin:0; min-width:0; }
.rr-visual img { display:block; width:100%; height:auto; object-fit:contain; border-radius:0; }
.rr-visual figcaption { color:var(--muted); text-align:center; margin-top:18px; }
.rr-hero { margin-top:64px; }
.rr-overview,.rr-pair { display:grid; grid-template-columns:1fr 1fr; gap:clamp(48px,8vw,128px); align-items:center; margin-top:112px; }
.rr-overview { padding-top:48px; border-top:1px solid var(--line); align-items:start; }
.rr-copy p { margin-top:20px; max-width:65ch; }
.rr-section { border-top:1px solid var(--line); margin-top:112px; padding-top:48px; }
.rr-section-head { display:grid; grid-template-columns:80px 1fr 1fr; gap:24px; border-bottom:1px solid var(--line); padding-bottom:24px; margin-bottom:64px; align-items:baseline; }
.rr-section-head>p:first-child { font-size:var(--title); }
.rr-phone { width:min(330px,100%); justify-self:center; }
.rr-mobile-pair { display:grid; grid-template-columns:1fr; margin-top:64px; justify-items:center; }
.rr-outcome { border-top:1px solid var(--line); margin-top:112px; padding-top:56px; text-align:center; }
.rr-outcome>h2 { max-width:700px; margin:auto; }
.rr-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:56px 0 40px; text-align:left; }
.rr-stats article { background:var(--surface); padding:24px; }
.rr-stats p { color:var(--muted); margin-top:16px; }
.rr-story .story-gallery-section { margin-top:112px; padding-top:48px; }
.sr-header { padding-top:150px; display:grid; gap:64px; }
.sr-header>div { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:end; }
.sr-header p,.sr-copy p,.sr-section-head>p:last-child,.sr-overview>div>p { color:var(--muted); }
.sr-visual { margin:0; min-width:0; }
.sr-visual img { display:block; width:100%; height:auto; object-fit:contain; border-radius:0; }
.sr-visual figcaption { color:var(--muted); text-align:center; margin-top:18px; }
.sr-hero { margin-top:64px; }
.sr-overview,.sr-pair { display:grid; grid-template-columns:1fr 1fr; gap:clamp(48px,8vw,128px); align-items:center; margin-top:112px; }
.sr-overview { padding-top:48px; border-top:1px solid var(--line); align-items:start; }
.sr-copy p { margin-top:20px; max-width:65ch; }
.sr-section { border-top:1px solid var(--line); margin-top:112px; padding-top:48px; }
.sr-section-head { display:grid; grid-template-columns:80px 1fr 1fr; gap:24px; border-bottom:1px solid var(--line); padding-bottom:24px; margin-bottom:64px; align-items:baseline; }
.sr-section-head>p:first-child { font-size:var(--title); }
.sr-feature { margin:72px auto 0; max-width:1000px; }
.sr-wide-duo { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:72px; }
.sr-phone { width:min(320px,100%); justify-self:center; }
.sr-phone-row { display:grid; grid-template-columns:1fr 1fr; gap:72px; margin-top:64px; max-width:800px; margin-inline:auto; }
.sr-outcome { border-top:1px solid var(--line); margin-top:112px; padding-top:56px; text-align:center; }
.sr-outcome>h2 { max-width:700px; margin:auto; }
.sr-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:56px 0 40px; text-align:left; }
.sr-stats article { background:var(--surface); padding:24px; }
.sr-stats p { color:var(--muted); margin-top:16px; }
.sr-story .story-gallery-section { margin-top:112px; padding-top:48px; }
.fc-header { padding-top:150px; display:grid; gap:64px; }
.fc-header>div { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:end; }
.fc-header p,.fc-copy p,.fc-section-head>p:last-child,.fc-overview>div>p { color:var(--muted); }
.fc-visual { margin:0; min-width:0; }
.fc-visual img { display:block; width:100%; height:auto; object-fit:contain; border-radius:0; }
.fc-visual figcaption { color:var(--muted); text-align:center; margin-top:18px; }
.fc-hero { margin-top:64px; }
.fc-overview,.fc-pair { display:grid; grid-template-columns:1fr 1fr; gap:clamp(48px,8vw,128px); align-items:center; margin-top:112px; }
.fc-overview { padding-top:48px; border-top:1px solid var(--line); align-items:start; }
.fc-copy p { margin-top:20px; max-width:65ch; }
.fc-section { border-top:1px solid var(--line); margin-top:112px; padding-top:48px; }
.fc-section-head { display:grid; grid-template-columns:80px 1fr 1fr; gap:24px; border-bottom:1px solid var(--line); padding-bottom:24px; margin-bottom:64px; align-items:baseline; }
.fc-section-head>p:first-child { font-size:var(--title); }
.fc-feature { margin:72px auto 0; max-width:1000px; }
.fc-outcome { border-top:1px solid var(--line); margin-top:112px; padding-top:56px; text-align:center; }
.fc-outcome>h2 { max-width:700px; margin:auto; }
.fc-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:56px 0 40px; text-align:left; }
.fc-stats article { background:var(--surface); padding:24px; }
.fc-stats p { color:var(--muted); margin-top:16px; }
.fc-story .story-gallery-section { margin-top:112px; padding-top:48px; }
@media (max-width:650px) { .mjp-header { padding-top:112px; gap:48px; } .mjp-header>div,.mjp-overview,.mjp-pair,.mjp-wide-duo { grid-template-columns:1fr; gap:32px; } .mjp-hero { margin-top:40px; } .mjp-overview,.mjp-section,.mjp-outcome { margin-top:72px; } .mjp-section-head { grid-template-columns:56px 1fr; gap:12px; margin-bottom:40px; } .mjp-section-head>p:last-child { grid-column:2; } .mjp-wide-duo { margin-top:48px; } .mjp-phone-row { grid-template-columns:repeat(3,75%); overflow-x:auto; scroll-snap-type:x mandatory; gap:24px; padding-bottom:24px; } .mjp-phone-row figure { scroll-snap-align:center; } .mjp-stats { grid-template-columns:1fr; margin-top:40px; } }
@media (max-width:650px) { .rr-header { padding-top:112px; gap:48px; } .rr-header>div,.rr-overview,.rr-pair { grid-template-columns:1fr; gap:32px; } .rr-hero { margin-top:40px; } .rr-overview,.rr-section,.rr-outcome { margin-top:72px; } .rr-section-head { grid-template-columns:56px 1fr; gap:12px; margin-bottom:40px; } .rr-section-head>p:last-child { grid-column:2; } .rr-mobile-pair { margin-top:48px; } .rr-stats { grid-template-columns:1fr; margin-top:40px; } }

/* JLG Installations — local service case study */
.jlg-header { padding-top:150px; display:grid; gap:64px; }
.jlg-header>div { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:end; }
.jlg-header p,.jlg-copy p,.jlg-section-head>p:last-child,.jlg-overview>div>p { color:var(--muted); }
.jlg-visual { margin:0; min-width:0; }
.jlg-visual img { display:block; width:100%; height:auto; object-fit:contain; border-radius:0; }
.jlg-visual figcaption { color:var(--muted); text-align:center; margin-top:18px; }
.jlg-hero { margin-top:64px; }
.jlg-overview,.jlg-pair { display:grid; grid-template-columns:1fr 1fr; gap:clamp(48px,8vw,128px); align-items:center; margin-top:112px; }
.jlg-overview { padding-top:48px; border-top:1px solid var(--line); align-items:start; }
.jlg-copy p { margin-top:20px; max-width:65ch; }
.jlg-section { border-top:1px solid var(--line); margin-top:112px; padding-top:48px; }
.jlg-section-head { display:grid; grid-template-columns:80px 1fr 1fr; gap:24px; border-bottom:1px solid var(--line); padding-bottom:24px; margin-bottom:64px; align-items:baseline; }
.jlg-section-head>p:first-child { font-size:var(--title); }
.jlg-mobile-story { display:grid; grid-template-columns:minmax(180px, .7fr) minmax(260px,1fr) minmax(180px,.7fr); gap:clamp(28px,5vw,80px); align-items:center; }
.jlg-phone { width:min(330px,100%); justify-self:center; }
.jlg-outcome { border-top:1px solid var(--line); margin-top:112px; padding-top:56px; text-align:center; }
.jlg-outcome>h2 { max-width:750px; margin:auto; }
.jlg-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:56px 0 40px; text-align:left; }
.jlg-stats article { background:var(--surface); padding:24px; }
.jlg-stats p { color:var(--muted); margin-top:16px; }
.jlg-story .story-gallery-section { margin-top:112px; padding-top:48px; }
@media (max-width:650px) { .jlg-header { padding-top:112px; gap:48px; } .jlg-header>div,.jlg-overview,.jlg-pair,.jlg-mobile-story { grid-template-columns:1fr; gap:32px; } .jlg-hero { margin-top:40px; } .jlg-overview,.jlg-section,.jlg-outcome { margin-top:72px; } .jlg-section-head { grid-template-columns:56px 1fr; gap:12px; margin-bottom:40px; } .jlg-section-head>p:last-child { grid-column:2; } .jlg-phone { width:min(280px,100%); } .jlg-stats { grid-template-columns:1fr; margin-top:40px; } }

/* Newline Roofing — local roofing case study */
.nl-header { padding-top:150px; display:grid; gap:64px; }
.nl-header>div { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:end; }
.nl-header p,.nl-copy p,.nl-section-head>p:last-child,.nl-overview>div>p { color:var(--muted); }
.nl-visual { margin:0; min-width:0; }
.nl-visual img { display:block; width:100%; height:auto; object-fit:contain; border-radius:0; }
.nl-visual figcaption { color:var(--muted); text-align:center; margin-top:18px; }
.nl-hero { margin-top:64px; }
.nl-overview,.nl-pair { display:grid; grid-template-columns:1fr 1fr; gap:clamp(48px,8vw,128px); align-items:center; margin-top:112px; }
.nl-overview { padding-top:48px; border-top:1px solid var(--line); align-items:start; }
.nl-copy p { margin-top:20px; max-width:65ch; }
.nl-section,.nl-quality { border-top:1px solid var(--line); margin-top:112px; padding-top:48px; }
.nl-section-head { display:grid; grid-template-columns:80px 1fr 1fr; gap:24px; border-bottom:1px solid var(--line); padding-bottom:24px; margin-bottom:64px; align-items:baseline; }
.nl-section-head>p:first-child { font-size:var(--title); }
.nl-mobile-story { display:grid; grid-template-columns:minmax(180px,.7fr) minmax(260px,1fr) minmax(180px,.7fr); gap:clamp(28px,5vw,80px); align-items:center; margin-top:80px; }
.nl-phone { width:min(330px,100%); justify-self:center; }
.nl-outcome { border-top:1px solid var(--line); margin-top:112px; padding-top:56px; text-align:center; }
.nl-outcome>h2 { max-width:750px; margin:auto; }
.nl-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:56px 0 40px; text-align:left; }
.nl-stats article { background:var(--surface); padding:24px; }
.nl-stats p { color:var(--muted); margin-top:16px; }
.nl-story .story-gallery-section { margin-top:112px; padding-top:48px; }
@media (max-width:650px) { .nl-header { padding-top:112px; gap:48px; } .nl-header>div,.nl-overview,.nl-pair,.nl-mobile-story { grid-template-columns:1fr; gap:32px; } .nl-hero { margin-top:40px; } .nl-overview,.nl-section,.nl-quality,.nl-outcome { margin-top:72px; } .nl-section-head { grid-template-columns:56px 1fr; gap:12px; margin-bottom:40px; } .nl-section-head>p:last-child { grid-column:2; } .nl-mobile-story { margin-top:48px; } .nl-phone { width:min(280px,100%); } .nl-stats { grid-template-columns:1fr; margin-top:40px; } }

/* RIZE — native iOS AI planning case study */
.rz-header { padding-top:150px; display:grid; gap:64px; }
.rz-header>div { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:end; }
.rz-header p,.rz-copy p,.rz-section-head>p:last-child,.rz-overview>div>p { color:var(--muted); }
.rz-visual { margin:0; min-width:0; }
.rz-visual img { display:block; width:100%; height:auto; object-fit:contain; border-radius:0; }
.rz-visual figcaption { color:var(--muted); text-align:center; margin-top:18px; }
.rz-hero { margin-top:64px; }
.rz-hero .rz-wide { width:100%; }
.rz-overview,.rz-pair { display:grid; grid-template-columns:1fr 1fr; gap:clamp(48px,8vw,128px); align-items:center; margin-top:112px; }
.rz-overview { padding-top:48px; border-top:1px solid var(--line); align-items:start; }
.rz-copy p { margin-top:20px; max-width:65ch; }
.rz-pair .rz-phone { width:min(250px,100%); justify-self:center; }
.rz-pair .rz-duo { width:min(350px,100%); justify-self:center; }
.rz-chapter-links { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; padding-top:96px; }
.rz-chapter-links a { padding:13px 20px; border-radius:999px; background:var(--surface); color:var(--ink); }
.rz-section { border-top:1px solid var(--line); margin-top:112px; padding-top:48px; }
.rz-section-head { display:grid; grid-template-columns:80px 1fr 1fr; gap:24px; border-bottom:1px solid var(--line); padding-bottom:24px; margin-bottom:64px; align-items:baseline; }
.rz-section-head>p:first-child { font-size:var(--title); }
.rz-pair-reverse>*:first-child { order:2; }
.rz-phone-pair { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(24px,5vw,72px); align-items:end; max-width:1050px; margin:80px auto 0; }
.rz-duo-story { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(32px,7vw,104px); align-items:end; max-width:900px; margin:80px auto 0; }
.rz-phone-pair .rz-phone,.rz-duo-story .rz-phone { width:auto; height:auto; justify-self:center; }
.rz-phone-pair .rz-phone img,.rz-duo-story .rz-phone img { width:auto; height:390px; }
.rz-duo-story .rz-duo { width:auto; height:auto; justify-self:center; }
.rz-duo-story .rz-duo img { width:auto; height:390px; }
.rz-phone-pair + .rz-copy { margin-top:72px; }
.rz-duo-story-reverse>*:first-child { order:2; }
.rz-wide-pair { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:80px; }
.rz-contact-pair { display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(48px,8vw,128px); align-items:center; margin-top:80px; }
.rz-outcome { border-top:1px solid var(--line); margin-top:112px; padding-top:56px; text-align:center; }
.rz-outcome>h2 { max-width:760px; margin:auto; }
.rz-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:56px 0 40px; text-align:left; }
.rz-stats article { background:var(--surface); padding:24px; }
.rz-stats p { color:var(--muted); margin-top:16px; }
.rz-story .story-gallery-section { margin-top:112px; padding-top:48px; }
@media (max-width:650px) { .rz-header { padding-top:112px; gap:48px; } .rz-header>div,.rz-overview,.rz-pair,.rz-contact-pair { grid-template-columns:1fr; gap:32px; } .rz-hero { margin-top:40px; } .rz-overview,.rz-section,.rz-outcome { margin-top:72px; } .rz-chapter-links { justify-content:flex-start; padding-top:64px; } .rz-section-head { grid-template-columns:56px 1fr; gap:12px; margin-bottom:40px; } .rz-section-head>p:last-child { grid-column:2; } .rz-pair-reverse>*:first-child { order:0; } .rz-pair .rz-phone { width:min(190px,100%); } .rz-pair .rz-duo { width:min(270px,100%); } .rz-phone-pair,.rz-duo-story { display:flex; gap:24px; overflow-x:auto; overscroll-behavior-inline:contain; scroll-snap-type:x mandatory; margin-top:48px; padding:0 16px 12px; scrollbar-width:none; } .rz-phone-pair::-webkit-scrollbar,.rz-duo-story::-webkit-scrollbar { display:none; } .rz-phone-pair .rz-phone { flex:0 0 auto; width:auto; height:auto; scroll-snap-align:start; } .rz-phone-pair .rz-phone img { height:280px; } .rz-duo-story .rz-phone,.rz-duo-story .rz-duo { flex:0 0 auto; width:auto; height:auto; scroll-snap-align:start; } .rz-duo-story .rz-phone img,.rz-duo-story .rz-duo img { height:280px; } .rz-wide-pair { grid-template-columns:1fr; gap:32px; margin-top:48px; } .rz-duo-story-reverse>*:first-child { order:0; } .rz-stats { grid-template-columns:1fr; margin-top:40px; } }
@media (max-width:650px) { .sr-header { padding-top:112px; gap:48px; } .sr-header>div,.sr-overview,.sr-pair,.sr-wide-duo { grid-template-columns:1fr; gap:32px; } .sr-hero { margin-top:40px; } .sr-overview,.sr-section,.sr-outcome { margin-top:72px; } .sr-section-head { grid-template-columns:56px 1fr; gap:12px; margin-bottom:40px; } .sr-section-head>p:last-child { grid-column:2; } .sr-feature,.sr-wide-duo,.sr-phone-row { margin-top:48px; } .sr-phone-row { grid-template-columns:1fr 1fr; gap:24px; } .sr-stats { grid-template-columns:1fr; margin-top:40px; } }
@media (max-width:650px) { .fc-header { padding-top:112px; gap:48px; } .fc-header>div,.fc-overview,.fc-pair { grid-template-columns:1fr; gap:32px; } .fc-hero { margin-top:40px; } .fc-overview,.fc-section,.fc-outcome { margin-top:72px; } .fc-section-head { grid-template-columns:56px 1fr; gap:12px; margin-bottom:40px; } .fc-section-head>p:last-child { grid-column:2; } .fc-feature { margin-top:48px; } .fc-stats { grid-template-columns:1fr; margin-top:40px; } }
@media (max-width: 900px) {
 .brave-title,.brave-overview,.brave-split,.brave-shop-story,.brave-identity-layout { gap: 40px; }
 .brave-device-row { gap: 24px; }
}
@media (max-width: 650px) {
 .brave-story { padding-bottom: 72px; }
 .brave-header { padding-top: 112px; }
 .brave-title { grid-template-columns: 1fr; gap: 24px; margin-top: 48px; }
 .brave-hero { margin-top: 40px; }
 .brave-overview,.brave-split,.brave-shop-story,.brave-identity-layout { grid-template-columns: 1fr; gap: 32px; margin-top: 72px; }
 .brave-section,.brave-gallery-section { margin-top: 72px; }
 .brave-section-head { grid-template-columns: 64px 1fr; gap: 12px; margin-bottom: 40px; }
 .brave-section-head>p:first-child { font-size: 2.25rem; }
 .brave-section-head>p:last-child { grid-column: 2; }
 .brave-shop-story .brave-copy { order: 2; }
 .brave-device-row { grid-template-columns: 1fr; margin-top: 48px; }
 .brave-device-row .brave-visual:first-child { order: 2; }
 .brave-foundation { margin-top: 72px; padding-block: 32px; }
 .brave-foundation-grid { grid-template-columns: 1fr; gap: 28px; }
 .brave-foundation-grid article { border-right: 0; border-bottom: 1px solid var(--line); padding: 0 0 28px; }
 .brave-foundation-grid article:last-child { border: 0; padding: 0; }
 .brave-foundation>p { margin-top: 32px; }
 .brave-gallery-section>div:first-child { grid-template-columns: 1fr; gap: 20px; }
 .brave-gallery { grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 40px; }
 .brave-gallery-item:nth-child(even) { margin-bottom: 32px; }
 .brave-closing { margin-top: 72px; padding: 48px 24px 0; }
}

/* QuickCourt — booking automation case study */
.qc-header { padding-top: 150px; display: grid; gap: 64px; }
.qc-header > div { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: end; }
.qc-header p,.qc-copy p,.qc-section-head > p:last-child,.qc-overview > div > p { color: var(--muted); }
.qc-visual { margin: 0; min-width: 0; }
.qc-visual img { display: block; width: 100%; height: auto; object-fit: contain; border-radius: 0; }
.qc-visual figcaption { color: var(--muted); text-align: center; margin-top: 18px; }
.qc-hero { margin-top: 64px; }
.qc-hero-image figcaption { display: none; }
.qc-overview,.qc-pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(48px, 8vw, 128px); align-items: center; margin-top: 112px; }
.qc-overview { border-top: 1px solid var(--line); padding-top: 48px; align-items: start; }
.qc-copy p { margin-top: 20px; max-width: 65ch; }
.qc-chapter-links { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; padding-top: 96px; }
.qc-chapter-links a { padding: 13px 20px; border-radius: 999px; background: var(--surface); color: var(--ink); }
.qc-section { border-top: 1px solid var(--line); margin-top: 112px; padding-top: 48px; }
.qc-section-head { display: grid; grid-template-columns: 80px 1fr 1fr; gap: 24px; border-bottom: 1px solid var(--line); padding-bottom: 24px; margin-bottom: 64px; align-items: baseline; }
.qc-section-head > p:first-child { font-size: var(--title); }
.qc-detail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: start; }
.qc-detail-grid .qc-detail figcaption { text-align: left; }
.qc-settings-row { display: grid; grid-template-columns: minmax(250px, .7fr) minmax(0, 1.3fr); gap: clamp(48px, 8vw, 128px); align-items: center; margin-top: 80px; }
.qc-pair-reverse > *:first-child { order: 2; }
.qc-pair .qc-phone { width: min(310px, 100%); justify-self: center; }
.qc-phone-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 5vw, 72px); align-items: end; max-width: 1000px; margin: 80px auto 0; }
.qc-phone-row .qc-phone { width: auto; height: auto; justify-self: center; }
.qc-phone-row .qc-phone img { width: auto; height: 410px; margin-inline: auto; }
.qc-detail-grid + .qc-copy,.qc-phone-row + .qc-copy { margin-top: 72px; }
.qc-wide-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 80px; }
.qc-outcome { border-top: 1px solid var(--line); margin-top: 112px; padding-top: 56px; text-align: center; }
.qc-outcome > h2 { max-width: 760px; margin: auto; }
.qc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 56px 0 40px; text-align: left; }
.qc-stats article { background: var(--surface); padding: 24px; }
.qc-stats p { color: var(--muted); margin-top: 16px; }
.qc-story .story-gallery-section { margin-top: 112px; padding-top: 48px; }
.qc-story .study-gallery-item { flex:0 0 64%; display:grid; place-items:center; }
.qc-story .story-gallery-image { display:block; width:100%; max-width:100%; height:620px; object-fit:contain; }
@media (max-width: 650px) {
 .qc-header { padding-top: 112px; gap: 48px; }
 .qc-header > div,.qc-overview,.qc-pair,.qc-settings-row,.qc-wide-pair { grid-template-columns: 1fr; gap: 32px; }
 .qc-hero { margin-top: 40px; }
 .qc-overview,.qc-section,.qc-outcome { margin-top: 72px; }
 .qc-chapter-links { justify-content: flex-start; padding-top: 64px; }
 .qc-section-head { grid-template-columns: 56px 1fr; gap: 12px; margin-bottom: 40px; }
 .qc-section-head > p:last-child { grid-column: 2; }
 .qc-detail-grid,.qc-wide-pair { display: flex; gap: 20px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; padding: 0 16px 16px; margin-inline: -16px; scrollbar-width: none; }
 .qc-detail-grid::-webkit-scrollbar,.qc-wide-pair::-webkit-scrollbar { display: none; }
 .qc-detail-grid .qc-detail,.qc-wide-pair .qc-visual { flex: 0 0 84%; width: auto; scroll-snap-align: start; }
 .qc-pair-reverse > *:first-child { order: 0; }
 .qc-pair .qc-phone { width: min(230px, 100%); }
 .qc-phone-row { display: flex; gap: 20px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; margin-top: 48px; padding: 0 16px 20px; scrollbar-width: none; }
 .qc-phone-row::-webkit-scrollbar { display: none; }
 .qc-phone-row .qc-phone { flex: 0 0 69%; width: auto; height: auto; scroll-snap-align: start; }
 .qc-phone-row .qc-phone img { width: 100%; height: auto; }
 .qc-detail-grid + .qc-copy,.qc-phone-row + .qc-copy { margin-top: 72px; }
 .qc-story .story-gallery-image { height:440px; }
 .qc-story .study-gallery-item { flex-basis:100%; }
 .qc-wide-pair { margin-top: 48px; }
 .qc-stats { grid-template-columns: 1fr; margin-top: 40px; }
}

/* Prepp AI — native iOS food inventory and meal planning case study */
.pa-header { padding-top:150px; display:grid; gap:64px; }
.pa-header>div { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:end; }
.pa-title-lockup { display:flex; align-items:center; gap:18px; }
.pa-title-lockup img { display:block; width:72px; height:72px; object-fit:cover; border-radius:18px; flex:none; }
.pa-header p,.pa-copy p,.pa-section-head>p:last-child,.pa-overview>div>p,.pa-proof p,.pa-outcome p { color:var(--muted); }
.pa-visual { margin:0; min-width:0; }
.pa-visual img { display:block; width:100%; height:auto; object-fit:contain; border-radius:0; }
.pa-visual figcaption { color:var(--muted); text-align:center; margin-top:18px; }
.pa-hero { margin-top:64px; }
.pa-hero-phones { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(24px,5vw,72px); align-items:end; max-width:1000px; margin-inline:auto; }
.pa-hero-phones .pa-visual { width:auto; height:auto; justify-self:center; }
.pa-hero-phones .pa-visual img { width:auto; height:520px; margin-inline:auto; }
.pa-hero-phones figcaption { display:none; }
.pa-overview,.pa-pair { display:grid; grid-template-columns:1fr 1fr; gap:clamp(48px,8vw,128px); align-items:center; margin-top:112px; }
.pa-overview { padding-top:48px; border-top:1px solid var(--line); align-items:start; }
.pa-copy p { margin-top:20px; max-width:65ch; }
.pa-proof { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin-top:80px; background:var(--line); border:1px solid var(--line); }
.pa-proof article { background:#fff; padding:28px 24px; }
.pa-proof p { margin-top:12px; }
.pa-chapter-links { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; padding-top:96px; }
.pa-chapter-links a { padding:13px 20px; border-radius:999px; background:var(--surface); color:var(--ink); }
.pa-section { border-top:1px solid var(--line); margin-top:112px; padding-top:48px; }
.pa-section-head { display:grid; grid-template-columns:80px 1fr 1fr; gap:24px; border-bottom:1px solid var(--line); padding-bottom:24px; margin-bottom:64px; align-items:baseline; }
.pa-section-head>p:first-child { font-size:var(--title); }
.pa-pair .pa-visual { width:min(310px,100%); justify-self:center; }
.pa-pair-reverse>*:first-child { order:2; }
.pa-single-phone { display:grid; place-items:center; margin-top:80px; }
.pa-single-phone .pa-visual { width:min(310px,100%); }
.pa-phone-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(24px,5vw,72px); align-items:end; max-width:1000px; margin:0 auto; }
.pa-phone-row .pa-visual { width:auto; height:auto; justify-self:center; }
.pa-phone-row .pa-visual img { width:auto; height:520px; margin-inline:auto; }
.pa-phone-row+.pa-copy { margin-top:72px; }
.pa-outcome { margin-top:112px; padding-block:72px; border-block:1px solid var(--line); display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(48px,8vw,128px); align-items:start; }
.pa-outcome>div>p:first-child { margin-bottom:20px; }
.pa-outcome-copy p+p { margin-top:20px; }
.pa-outcome-copy .button { margin-top:32px; }
.pa-story .story-gallery-section { margin-top:112px; padding-top:48px; }
.pa-story .study-gallery-item { flex:0 0 36%; display:grid; place-items:center; }
.pa-story .story-gallery-image { display:block; width:100%; max-width:100%; height:640px; object-fit:contain; }

@media (max-width:900px) {
 .pa-proof { grid-template-columns:1fr 1fr; }
}

@media (max-width:650px) {
 .pa-header { padding-top:112px; gap:48px; }
 .pa-header>div,.pa-overview,.pa-pair,.pa-outcome { grid-template-columns:1fr; gap:32px; }
 .pa-title-lockup { gap:14px; }
 .pa-title-lockup img { width:54px; height:54px; border-radius:14px; }
 .pa-hero { margin-top:40px; }
 .pa-hero-phones { display:flex; gap:20px; overflow-x:auto; overscroll-behavior-inline:contain; scroll-snap-type:x mandatory; padding:0 16px 20px; margin-inline:-16px; scrollbar-width:none; }
 .pa-hero-phones::-webkit-scrollbar { display:none; }
 .pa-hero-phones .pa-visual { flex:0 0 69%; width:auto; height:auto; scroll-snap-align:start; }
 .pa-hero-phones .pa-visual img { width:100%; height:auto; }
 .pa-overview,.pa-section,.pa-outcome { margin-top:72px; }
 .pa-proof { grid-template-columns:1fr 1fr; margin-top:56px; }
 .pa-proof article { padding:22px 18px; }
 .pa-chapter-links { justify-content:flex-start; padding-top:64px; }
 .pa-section-head { grid-template-columns:56px 1fr; gap:12px; margin-bottom:40px; }
 .pa-section-head>p:last-child { grid-column:2; }
 .pa-pair-reverse>*:first-child { order:0; }
 .pa-pair .pa-visual,.pa-single-phone .pa-visual { width:min(240px,100%); }
 .pa-single-phone { margin-top:48px; }
 .pa-phone-row { display:flex; gap:20px; overflow-x:auto; overscroll-behavior-inline:contain; scroll-snap-type:x mandatory; margin:0 -16px; padding:0 16px 20px; scrollbar-width:none; }
 .pa-phone-row::-webkit-scrollbar { display:none; }
 .pa-phone-row .pa-visual { flex:0 0 69%; width:auto; height:auto; scroll-snap-align:start; }
 .pa-phone-row .pa-visual img { width:100%; height:auto; }
 .pa-outcome { padding-block:52px; }
 .pa-story .study-gallery-image { height:440px; }
 .pa-story .study-gallery-item { flex-basis:100%; }
}

/* On phones, image-only groups stay on one horizontal reading line. */
@media (max-width: 650px) {
 .str8-image-duo,.cfx-wide-duo,.brave-device-row,.mjp-wide-duo,.sr-wide-duo,.rz-wide-pair {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  padding: 0 16px 16px;
  margin-inline: -16px;
  scrollbar-width: none;
 }
 .str8-image-duo::-webkit-scrollbar,.cfx-wide-duo::-webkit-scrollbar,.brave-device-row::-webkit-scrollbar,.mjp-wide-duo::-webkit-scrollbar,.sr-wide-duo::-webkit-scrollbar,.rz-wide-pair::-webkit-scrollbar { display: none; }
 .str8-image-duo > figure,.cfx-wide-duo > figure,.brave-device-row > figure,.mjp-wide-duo > figure,.sr-wide-duo > figure,.rz-wide-pair > figure {
  flex: 0 0 86%;
  width: auto;
  scroll-snap-align: start;
 }
}

/* ENF Elevates — digital agency website case study */
.enf-header { padding-top: 150px; display: grid; gap: 64px; }
.enf-header > div { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: end; }
.enf-header p,.enf-copy p,.enf-section-head > p:last-child,.enf-overview > div > p,.enf-outcome p { color: var(--muted); }
.enf-visual { margin: 0; min-width: 0; }
.enf-visual img,.enf-visual video { display: block; width: 100%; height: auto; background: transparent; border-radius: 0; }
.enf-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(210px, .28fr); gap: clamp(24px, 5vw, 72px); align-items: end; margin-top: 64px; }
.enf-hero-phone { width: min(100%, 310px); justify-self: end; margin-bottom: -32px; }
.enf-hero-phone .enf-visual { box-shadow: none; }
.enf-overview,.enf-pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(48px, 8vw, 128px); align-items: center; margin-top: 112px; }
.enf-overview { padding-top: 48px; border-top: 1px solid var(--line); align-items: start; }
.enf-copy p { max-width: 65ch; margin-top: 20px; }
.enf-standalone { max-width: 65ch; margin-left: auto; }
.enf-chapter-links { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; padding-top: 96px; }
.enf-chapter-links a { padding: 13px 20px; border-radius: var(--pill); background: var(--surface); color: var(--ink); transition: background .2s, transform .25s var(--ease); }
.enf-chapter-links a:hover { background: var(--hover); transform: translateY(-1px); }
.enf-section { margin-top: 112px; padding-top: 48px; border-top: 1px solid var(--line); }
.enf-section-head { display: grid; grid-template-columns: 80px 1fr 1fr; gap: 24px; align-items: baseline; padding-bottom: 24px; margin-bottom: 64px; border-bottom: 1px solid var(--line); }
.enf-section-head > p:first-child { font-size: var(--title); }
.enf-pair-reverse > *:first-child { order: 2; }
.enf-wide-visual { margin-top: 72px; }
.enf-outcome { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(48px, 8vw, 128px); align-items: start; margin-top: 112px; padding-block: 72px; border-block: 1px solid var(--line); }
.enf-outcome > div > p:first-child { margin-bottom: 20px; }
.enf-outcome .button { margin-top: 32px; }

@media (max-width: 650px) {
 .enf-header { padding-top: 112px; gap: 48px; }
 .enf-header > div,.enf-overview,.enf-pair,.enf-outcome { grid-template-columns: 1fr; gap: 32px; }
 .enf-hero { grid-template-columns: minmax(0, 1fr) 30%; gap: 16px; margin-top: 40px; }
 .enf-hero-phone { width: 100%; margin-bottom: -16px; }
 .enf-overview,.enf-section,.enf-outcome { margin-top: 72px; }
 .enf-chapter-links { justify-content: flex-start; padding-top: 64px; }
 .enf-section-head { grid-template-columns: 56px 1fr; gap: 12px; margin-bottom: 40px; }
 .enf-section-head > p:last-child { grid-column: 2; }
 .enf-pair-reverse > *:first-child { order: 0; }
 .enf-wide-visual { margin-top: 48px; }
 .enf-outcome { padding-block: 52px; }
}

/* CSR Rental — East London luxury car rental case study */
.csr-header { padding-top:150px; display:grid; gap:64px; }
.csr-header>div { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:end; }
.csr-header p,.csr-copy p,.csr-section-head>p:last-child,.csr-overview>div>p,.csr-outcome p { color:var(--muted); }
.csr-visual { margin:0; min-width:0; }
.csr-visual img,.csr-visual video { display:block; width:100%; height:auto; object-fit:contain; border-radius:0; background:transparent; }
.csr-hero { margin-top:64px; }
.csr-home img { background:transparent; }
.csr-overview { display:grid; grid-template-columns:1fr 1fr; gap:clamp(48px,8vw,128px); align-items:start; margin-top:112px; padding-top:48px; border-top:1px solid var(--line); }
.csr-copy p { max-width:65ch; margin-top:20px; }
.csr-chapter-links { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; padding-top:96px; }
.csr-chapter-links a { padding:13px 20px; border-radius:var(--pill); background:var(--surface); color:var(--ink); transition:background .2s,transform .25s var(--ease); }
.csr-chapter-links a:hover { background:var(--hover); transform:translateY(-1px); }
.csr-section { margin-top:112px; padding-top:48px; border-top:1px solid var(--line); }
.csr-section-head { display:grid; grid-template-columns:80px 1fr 1fr; gap:24px; align-items:baseline; padding-bottom:24px; margin-bottom:64px; border-bottom:1px solid var(--line); }
.csr-section-head>p:first-child { font-size:var(--title); }
.csr-brand-layout { display:grid; grid-template-columns:.72fr 1.28fr; gap:clamp(48px,8vw,128px); align-items:start; }
.csr-logo-grid { list-style:none; padding:1px; margin:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); }
.csr-logo-grid li { min-width:0; aspect-ratio:1; display:grid; place-items:center; padding:18px; background:#f7f7f7; position:relative; }
.csr-logo-grid img { display:block; width:72%; height:72%; object-fit:contain; mix-blend-mode:multiply; }
.csr-logo-grid span { position:absolute; left:12px; bottom:10px; font-size:.72rem; color:var(--muted); }
.csr-about-grid { display:grid; grid-template-columns:.75fr 1.25fr; gap:clamp(48px,8vw,128px); align-items:center; }
.csr-fleet-layout { display:grid; grid-template-columns:.68fr 1.32fr; gap:clamp(48px,8vw,128px); align-items:center; }
.csr-collection img { background:transparent; }
.csr-wide-visual { margin-top:72px; }
.csr-features-video { margin-top:48px; }
.csr-features-video video { aspect-ratio:1200/772; object-fit:cover; background:#080808; }
.csr-films-intro { max-width:760px; margin-left:auto; }
.csr-film-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:64px; }
.csr-film-grid article { min-width:0; }
.csr-film-grid h3 { margin-bottom:14px; }
.csr-film-grid video { aspect-ratio:16/9; object-fit:cover; background:#080808; }
.csr-faq-layout { display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(48px,8vw,128px); align-items:start; }
.csr-faq-list { border-top:1px solid var(--line); }
.csr-faq-list article { display:grid; grid-template-columns:64px 1fr; gap:20px; padding:24px 0; border-bottom:1px solid var(--line); align-items:baseline; }
.csr-faq-list p { color:var(--muted); }
.csr-outcome { display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(48px,8vw,128px); align-items:start; margin-top:112px; padding-block:72px; border-block:1px solid var(--line); }
.csr-outcome>div>p:first-child { margin-bottom:20px; }
.csr-outcome .button { margin-top:32px; }

@media (max-width:900px) {
 .csr-brand-layout,.csr-fleet-layout,.csr-faq-layout { grid-template-columns:1fr; gap:48px; }
 .csr-about-grid { grid-template-columns:1fr; }
}

@media (max-width:650px) {
 .csr-header { padding-top:112px; gap:48px; }
 .csr-header>div,.csr-overview,.csr-outcome { grid-template-columns:1fr; gap:32px; }
 .csr-hero { margin-top:40px; }
 .csr-overview,.csr-section,.csr-outcome { margin-top:72px; }
 .csr-chapter-links { justify-content:flex-start; padding-top:64px; }
 .csr-section-head { grid-template-columns:56px 1fr; gap:12px; margin-bottom:40px; }
 .csr-section-head>p:last-child { grid-column:2; }
 .csr-logo-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .csr-logo-grid li { padding:14px; }
 .csr-about-grid { gap:32px; }
 .csr-film-grid { grid-template-columns:1fr; gap:36px; margin-top:48px; }
 .csr-faq-list article { grid-template-columns:44px 1fr; gap:12px; }
 .csr-outcome { padding-block:52px; }
 .csr-wide-visual { margin-top:48px; }
}