@font-face { font-family: Manrope; src: url('fonts/manrope-variable.woff2') format('woff2'); font-weight: 200 800; font-style: normal; font-display: swap; }
:root {
  --ink: #272a2b; --dark: #232728; --paper: #f8f8f5; --soft: #eeefeb;
  --muted: #616865; --light-muted: #bec4c0; --line: #d8dcd7; --dark-line: #4d5653;
  --accent: #f4c447; --accent-hover: #ffd365; --ease: cubic-bezier(.22,1,.36,1);
  --gutter: clamp(20px, 3.9vw, 64px); --space: clamp(64px, 6.7vw, 104px);
  --cut: clamp(20px, 2.8vw, 40px);
}
* { box-sizing: border-box; }
html { overflow-x: hidden; overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: 108px; }
body { overflow-x: hidden; overflow-x: clip; margin: 0; background: var(--paper); color: var(--ink); font-family: Manrope, Arial, sans-serif; font-size: 16px; line-height: 1.7; }
button, input, select, textarea { font: inherit; }
a, button { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { color: inherit; cursor: pointer; }
button:disabled { cursor: wait; }
img { display: block; max-width: 100%; height: auto; }
figure, p, h1, h2, h3, ol, ul { margin: 0; }
p + p { margin-top: 18px; }
h1, h2, h3 { font-weight: 600; line-height: 1.1; }
h1 { font-size: clamp(48px, 5.35vw, 86px); letter-spacing: -.065em; }
h2 { font-size: clamp(34px, 3.35vw, 54px); letter-spacing: -.052em; }
h3 { font-size: 22px; letter-spacing: -.025em; }
::selection { color: var(--ink); background: var(--accent); }
:focus-visible { outline: 3px solid #986800; outline-offset: 5px; }
.dark :focus-visible, .image-dialog :focus-visible { outline-color: var(--accent); }
[hidden] { display: none !important; }
.wrap { width: calc(100% - var(--gutter) * 2); max-width: 1328px; margin-inline: auto; }
.section { padding-block: var(--space); }
.dark { background: var(--dark); color: var(--paper); }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; line-height: 1.5; margin-bottom: 22px; color: var(--muted); }
.eyebrow.light { color: var(--light-muted); }
/* The R's diagonal is the shared mark: one cut, one short accent stroke. */
.brand-label { display: flex; align-items: center; gap: 12px; }
.brand-label::before { content: ''; width: 19px; height: 4px; flex: none; background: var(--accent); transform: rotate(46deg); transform-origin: center; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 20px; min-height: 52px; padding: 14px 25px; border: 1px solid transparent; border-radius: 2px; background: var(--accent); color: var(--ink); font-size: 15px; line-height: 1.5; font-weight: 750; transition: background .2s, transform .3s var(--ease); }
.button:hover { background: var(--accent-hover); transform: translateY(-2px); }
.button-small { min-height: 44px; padding: 11px 20px; font-size: 13px; }
.text-link { display: inline-flex; align-items: center; gap: 20px; min-height: 44px; font-size: 14px; font-weight: 700; border-bottom: 1px solid #7c8580; transition: border-color .2s, color .2s; }
.text-link:hover { border-color: var(--ink); color: #111; }
.light-link { border-color: #84918a; }
.light-link:hover { color: var(--accent); border-color: var(--accent); }
.skip-link { position: fixed; top: 12px; left: 16px; z-index: 100; padding: 10px 20px; background: var(--accent); transform: translateY(-150%); }
.skip-link:focus { transform: none; }
.site-header { position: sticky; top: 0; z-index: 30; background: rgba(248,248,245,.98); border-bottom: 1px solid var(--line); }
.header-inner { display: flex; justify-content: space-between; align-items: center; height: 88px; gap: 24px; }
.brand { width: clamp(230px, 21vw, 300px); flex: none; }
.brand img { width: 100%; }
.navigation { display: flex; align-items: center; gap: clamp(18px,2.3vw,32px); }
.navigation > a:not(.button) { display: flex; align-items: center; min-height: 44px; font-size: 13px; font-weight: 650; }
.navigation > a:not(.button):hover { color: #856000; }
.menu-toggle { display: none; }

.hero-grid { display: grid; grid-template-columns: 48% 52%; max-width: 1600px; margin-inline: auto; }
.hero-copy { padding: 82px 34px 64px max(var(--gutter), calc((100vw - 1328px)/2)); display: flex; flex-direction: column; justify-content: center; min-width: 0; min-height: 610px; }
.hero .eyebrow { font-size: 11px; letter-spacing: .05em; }
.hero h1 { position: relative; z-index: 1; margin-right: -180px; line-height: 1.06; pointer-events: none; }
.hero-word { color: var(--accent); }
.hero-description { color: #d0d5d1; max-width: 39ch; margin-top: 28px; line-height: 1.8; }
.hero-actions { display: flex; align-items: center; gap: 24px; margin-top: 30px; flex-wrap: wrap; }
.hero-meta { display: flex; gap: 22px; font-size: 12px; color: var(--light-muted); margin-top: 42px; }
.hero-meta span + span { padding-left: 22px; border-left: 1px solid #69716d; }
.hero-visual { position: relative; isolation: isolate; overflow: hidden; clip-path: polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut)); }
.hero-visual > img { width: 100%; height: 100%; object-fit: cover; object-position: 35% center; }
.hero-visual::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg,rgba(35,39,40,.3),transparent 35%); pointer-events: none; }
.image-note { position: absolute; bottom: 30px; left: 30px; z-index: 1; background: rgba(35,39,40,.88); padding: 9px 14px; border: 1px solid rgba(255,255,255,.25); font-size: 12px; }
.hero-scroll { position: absolute; bottom: 26px; right: 26px; z-index: 2; width: 52px; height: 52px; display: grid; place-items: center; background: var(--accent); color: var(--ink); border-radius: 50%; font-size: 25px; transition: transform .3s; }
.hero-scroll:hover { transform: translateY(3px); }
.hero-footer { min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 20px; color: #c8cec9; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.hero-footer span { display: flex; align-items: center; gap: 16px; }
.hero-footer span::before { content: ''; width: 12px; height: 2px; flex: none; background: var(--accent); transform: rotate(46deg); }

.founder-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(44px,8vw,110px); align-items: center; scroll-margin-top: 108px; }
.founder-copy { max-width: 56ch; min-width: 0; }
.founder-copy > p:not(.eyebrow):not(.founder-lead) { color: var(--muted); margin-top: 20px; }
.founder-lead { font-size: clamp(20px,1.8vw,25px); line-height: 1.55; letter-spacing: -.025em; margin-top: 24px; max-width: 37ch; }
.founder-image { width: 100%; max-width: 410px; justify-self: end; }
.founder-image img { width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: center 28%; clip-path: polygon(0 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%); }
.founder-image figcaption { font-size: 12px; color: var(--muted); margin-top: 14px; }
.experience { display: flex; align-items: center; gap: 24px; border-top: 1px solid var(--line); padding-top: 20px; margin-block: 26px 18px; }
.experience-number { font-size: 68px; font-weight: 600; letter-spacing: -.06em; line-height: 1; }
.experience > p { font-size: 14px; color: var(--muted); line-height: 1.6; }

.section-heading { display: block; margin-bottom: 44px; }
.section-heading h2 { width: auto; max-width: 26ch; }
.section-heading .eyebrow { margin-top: 0; }
.services-layout { display: grid; grid-template-columns: 1.18fr .82fr; gap: clamp(40px,6.7vw,96px); align-items: start; }
.service-list, .process-list { min-width: 0; }
.service-item { border-top: 1px solid var(--dark-line); }
.service-item:last-child { border-bottom: 1px solid var(--dark-line); }
summary { cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
.service-item summary { display: grid; grid-template-columns: 35px minmax(0,1fr) 24px; gap: 10px; align-items: center; min-height: 90px; }
.tiny-index { font-size: 12px; color: var(--muted); font-weight: 650; letter-spacing: .04em; }
.service-item .tiny-index { color: #adb7af; }
.service-item h3 { font-size: clamp(21px,1.8vw,26px); line-height: 1.25; }
.plus { position: relative; display: block; width: 24px; height: 24px; flex: none; }
.plus::before, .plus::after { content: ''; position: absolute; background: currentColor; left: 5px; top: 11px; width: 14px; height: 1px; transition: transform .25s; }
.plus::after { transform: rotate(90deg); }
details[open] .plus::after { transform: rotate(0); }
.service-item[open] summary { color: var(--accent); }
.service-content { padding: 0 24px 28px 45px; color: #c7cec8; font-size: 16px; line-height: 1.75; }
.service-content ul { padding: 16px 0 12px; list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.service-content li { font-size: 14px; }
.service-content li::before { content: '·'; margin-right: 8px; color: var(--accent); }
.service-content .text-link { color: var(--paper); }
.service-visual { position: sticky; top: 125px; min-width: 0; }
.service-visual img { width: 100%; height: auto; aspect-ratio: 6/5; object-fit: cover; object-position: center 44%; }
.service-visual figcaption { display: flex; justify-content: space-between; gap: 15px; padding-top: 16px; border-top: 1px solid var(--dark-line); margin-top: 16px; font-size: 12px; color: var(--light-muted); }
.service-visual figcaption span:first-child { color: var(--paper); }

.care { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 40px; padding-block: 58px; }
.care-item { border-top: 1px solid var(--line); padding-top: 18px; }
.care-item .tiny-index { display: block; margin-bottom: 18px; }
.care-item h3 { font-size: 22px; line-height: 1.3; }
.care-item p { color: var(--muted); font-size: 16px; margin-top: 12px; max-width: 32ch; }
.process-layout { display: grid; grid-template-columns: 1fr .42fr; gap: clamp(40px,5.9vw,85px); align-items: start; }
.process-list { list-style: none; padding: 0; }
.process-list li { display: grid; grid-template-columns: 32px minmax(0,.85fr) minmax(0,1.3fr); gap: 16px; align-items: start; border-top: 1px solid var(--dark-line); padding-block: 27px; }
.process-list li:last-child { border-bottom: 1px solid var(--dark-line); }
.step-number { font-size: 12px; line-height: 1.8; color: var(--accent); }
.process-list h3 { font-size: 23px; line-height: 1.3; }
.process-list p { font-size: 16px; color: #c4ccc6; line-height: 1.75; max-width: 38ch; }
.process-aside { position: sticky; top: 125px; min-width: 0; }
.process-aside img { width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; object-position: center 48%; clip-path: polygon(0 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%); }
.process-aside p { font-size: 16px; color: var(--light-muted); margin-top: 22px; }
.process-aside .button { margin-top: 20px; width: 100%; }

.gallery-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 50px; margin-bottom: 44px; }
.gallery-heading > p { max-width: 34ch; color: var(--muted); margin-bottom: 4px; }
.gallery-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 34px 28px; }
.gallery-card { display: block; border: 0; padding: 0; background: none; text-align: left; width: 100%; min-width: 0; }
.gallery-image { display: block; position: relative; overflow: hidden; }
.gallery-image > img { width: 100%; height: 300px; object-fit: cover; transition: transform .7s var(--ease); }
.gallery-wide .gallery-image > img, .gallery-tall .gallery-image > img { height: 380px; }
.gallery-tall .gallery-image > img { object-position: center 43%; }
.gallery-card:nth-child(4) .gallery-image > img { object-position: center 32%; }
.image-expand { position: absolute; bottom: 18px; right: 18px; width: 44px; height: 44px; display: grid; place-items: center; font-size: 22px; background: var(--paper); border-radius: 50%; color: var(--ink); transition: background .25s, transform .3s; }
.gallery-card:hover img { transform: scale(1.025); }
.gallery-card:hover .image-expand { background: var(--accent); transform: rotate(90deg); }
.gallery-caption { display: flex; justify-content: space-between; align-items: baseline; gap: 15px; margin-top: 16px; line-height: 1.5; }
.gallery-caption strong { font-size: 15px; font-weight: 650; }
.gallery-caption > span { font-size: 12px; color: var(--muted); text-align: right; }
.faq { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(40px,7vw,100px); padding-top: 0; }
.faq-heading > p:last-child { color: var(--muted); margin-top: 24px; max-width: 30ch; }
.faq-list { border-top: 1px solid var(--line); min-width: 0; }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 23px; font-size: 16px; font-weight: 600; line-height: 1.5; }
.faq-list details > p { padding: 0 40px 24px 0; font-size: 16px; line-height: 1.8; color: var(--muted); }

.contact { background: #edece6; }
.contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(40px,7vw,100px); }
.contact-copy, .contact-form { min-width: 0; }
.contact-copy h2 { font-size: clamp(48px,5.5vw,80px); letter-spacing: -.065em; }
.contact-copy > p:not(.eyebrow):not(.contact-region) { color: var(--muted); max-width: 37ch; margin-top: 26px; }
.contact-links { margin-top: 32px; }
.contact-links a { display: flex; flex-direction: column; padding-block: 15px; border-bottom: 1px solid #c8ccc3; gap: 3px; }
.contact-links a:first-child { border-top: 1px solid #c8ccc3; }
.contact-links a > span { font-size: 12px; color: var(--muted); }
.contact-links a > strong { font-size: clamp(17px,1.5vw,22px); letter-spacing: -.035em; font-weight: 600; overflow-wrap: anywhere; }
.contact-links a:hover > strong { color: #8b6206; }
.contact-region { margin-top: 24px; font-size: 13px; color: var(--muted); }
.contact-form { background: var(--paper); padding: clamp(24px,3vw,42px); border-top: 3px solid var(--accent); }
.contact-form h3 { font-size: 24px; line-height: 1.3; }
.form-intro { font-size: 14px; color: var(--muted); margin: 14px 0 24px; }
.form-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.field { margin-bottom: 20px; min-width: 0; }
.field label { display: block; font-size: 14px; font-weight: 650; margin-bottom: 8px; }
.optional { font-weight: 400; color: var(--muted); font-size: 13px; }
.field input, .field select, .field textarea { display: block; width: 100%; padding: 12px; border: 1px solid #858e86; border-radius: 2px; background: transparent; color: var(--ink); font-size: 16px; line-height: 1.5; min-height: 48px; }
.field textarea { resize: vertical; min-height: 140px; }
.field input::placeholder, .field textarea::placeholder { color: #70796f; font-size: 14px; }
.optional-fields { border-block: 1px solid var(--line); margin-bottom: 22px; }
.optional-fields summary { display: flex; align-items: center; gap: 8px; min-height: 52px; font-size: 14px; font-weight: 650; }
.optional-fields .plus { margin-left: auto; }
.optional-fields[open] summary { margin-bottom: 12px; }
.form-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-note, .preview-note { font-size: 13px; line-height: 1.7; color: var(--muted); margin-bottom: 20px; }
.preview-note { border-left: 2px solid #9b7616; padding-left: 14px; }
.form-note a, .preview-note a, .form-status a, .form-fallback a { font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }
.form-submit { width: 100%; }
.form-status { font-size: 15px; color: var(--ink); padding: 14px; border: 1px solid #838c7d; margin-top: 20px !important; }
.form-fallback { display: flex; flex-direction: column; font-size: 14px; gap: 6px; margin-top: 16px; }
.form-fallback span { color: var(--muted); font-size: 13px; }
.contact-form noscript p { font-size: 14px; margin-top: 18px; }

.site-footer { padding-top: 68px; }
.footer-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; padding-bottom: 46px; border-bottom: 1px solid var(--dark-line); }
.footer-top h2 { font-size: clamp(34px,3.9vw,62px); letter-spacing: -.05em; line-height: 1.12; }
.footer-grid { display: grid; grid-template-columns: 1.4fr .65fr 1fr .9fr; gap: 40px; padding-block: 46px; }
.footer-grid > div { min-width: 0; }
.footer-brand img { width: 280px; }
.footer-grid h3 { font-size: 13px; line-height: 1.7; margin-bottom: 16px; font-weight: 650; }
.footer-grid p, .footer-grid a:not(.footer-brand a) { font-size: 13px; line-height: 1.9; color: var(--light-muted); overflow-wrap: anywhere; }
.footer-grid > div > a { display: flex; align-items: center; min-height: 44px; }
.footer-brand p { margin-top: 18px; }
.footer-grid > div > p { margin-top: 8px; }
.footer-grid a:hover { color: var(--accent); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 24px; border-top: 1px solid var(--dark-line); padding-block: 18px; font-size: 12px; color: var(--light-muted); }
.footer-bottom nav { display: flex; gap: 24px; }
.footer-bottom a { display: inline-flex; align-items: center; min-height: 44px; }

/* Intrinsic image dimensions keep the dialog compact, including landscape photos on phones. */
.image-dialog { min-width: min(320px,calc(100vw - 24px)); position: fixed; max-width: 1100px; width: fit-content; max-height: calc(100dvh - 32px); max-width: min(1100px,calc(100vw - 32px)); padding: 64px 20px 20px; border: 1px solid #646c64; background: var(--dark); color: var(--paper); overflow: auto; }
.image-dialog::backdrop { background: rgba(15,18,18,.88); }
.dialog-close { position: absolute; top: 10px; right: 12px; width: 44px; height: 44px; background: var(--paper); color: var(--ink); border: 0; border-radius: 50%; font-size: 30px; line-height: 1; z-index: 1; display: grid; place-items: center; }
.dialog-close:hover { background: var(--accent); }
.dialog-image-wrap { display: flex; justify-content: center; align-items: center; }
.dialog-image-wrap img { width: auto; height: auto; max-width: 100%; max-height: calc(100dvh - 210px); object-fit: contain; }
.dialog-bottom { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-top: 18px; }
.dialog-bottom p { font-size: 14px; max-width: 50ch; }
.dialog-controls { display: flex; align-items: center; gap: 16px; flex: none; font-size: 12px; }
.dialog-controls button { width: 44px; height: 44px; border: 1px solid #8a948c; background: none; color: var(--paper); font-size: 20px; }
.dialog-controls button:hover { background: var(--accent); color: var(--ink); }

.js-motion .reveal { opacity: 0; transform: translateY(18px); transition: opacity .65s var(--ease),transform .75s var(--ease); transition-delay: var(--reveal-delay, 0s); }
.js-motion .reveal.in { opacity: 1; transform: translateY(0); }
.js-motion :is(.founder-image,.service-visual,.process-aside).reveal { transform: translateX(20px); }
.js-motion :is(.founder-image,.service-visual,.process-aside).reveal.in { transform: translateX(0); }
.js-motion .reveal.motion-settled { transition-delay: 0s; }
.hero-copy > * { animation: hero-in .8s var(--ease) both; }
.hero-copy h1 { animation-delay: .06s; }
.hero-description { animation-delay: .12s; }
.hero-actions { animation-delay: .18s; }
.hero-meta { animation-delay: .24s; }
.hero-visual > img { animation: photo-settle 1.35s var(--ease) both; }
.hero .brand-label::before, .reveal.in .brand-label::before, .brand-label.reveal.in::before { animation: stroke-in .8s var(--ease) both; }
@keyframes hero-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes photo-settle { from { transform: scale(1.035); } to { transform: scale(1); } }
@keyframes stroke-in { from { transform: rotate(46deg) scaleX(0); } to { transform: rotate(46deg) scaleX(1); } }

.legal-main { padding-top: 72px; padding-bottom: 96px; }
.legal-main > h1 { font-size: clamp(36px,5vw,72px); letter-spacing: -.055em; margin-bottom: 38px; overflow-wrap: anywhere; }
.legal-back { margin-bottom: 28px; }
.legal-layout { display: grid; grid-template-columns: 240px minmax(0,760px); gap: 70px; align-items: start; }
.legal-nav { position: sticky; top: 125px; display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.legal-nav a { font-size: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); min-height: 44px; }
.legal-nav a[aria-current="page"] { font-weight: 750; }
.legal-content { font-size: 16px; line-height: 1.85; overflow-wrap: anywhere; }
.legal-content h2 { font-size: 24px; line-height: 1.35; margin: 44px 0 18px; letter-spacing: -.03em; }
.legal-content h2:first-child { margin-top: 0; }
.legal-content p { margin: 0 0 18px; }
.legal-content ul { padding-left: 22px; margin-block: 18px; }
.legal-content a { text-decoration: underline; text-underline-offset: 3px; }

@media (min-width:1600px) { .hero-copy { padding-left: 80px; } }
@media (max-width:1100px) {
  .hero h1 { font-size: clamp(44px,5.25vw,60px); margin-right: 0; }
  .hero-copy { padding-top: 60px; padding-bottom: 52px; }
  .hero .eyebrow { max-width: 30ch; }
  .hero-actions { flex-direction: column; align-items: flex-start; gap: 12px; }
  .hero-meta { gap: 14px; }
  .hero-meta span + span { padding-left: 14px; }
  .process-list li { grid-template-columns: 28px minmax(0,1fr); gap: 8px 14px; }
  .process-list p { grid-column: 2; max-width: none; }
  .gallery-caption { flex-direction: column; gap: 4px; }
  .gallery-caption > span { text-align: left; }
  .footer-grid { gap: 26px; grid-template-columns: 1.25fr .65fr 1fr; }
  .footer-grid > div:last-child { grid-column: 1/-1; border-top: 1px solid var(--dark-line); padding-top: 20px; display: flex; gap: 30px; align-items: baseline; }
  .footer-grid > div:last-child h3, .footer-grid > div:last-child p { margin: 0; }
  .footer-grid > div:last-child p br { display: none; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
}
@media (max-width:800px) {
  html { scroll-padding-top: 92px; }
  .header-inner { height: 76px; }
  .brand { width: 245px; }
  .menu-toggle { display: flex; align-items: center; justify-content: center; gap: 12px; min-width: 44px; min-height: 44px; padding: 10px; border: 0; background: none; font-size: 12px; font-weight: 650; }
  .menu-lines { position: relative; width: 22px; height: 14px; }
  .menu-lines::before, .menu-lines::after { content: ''; position: absolute; left: 0; width: 22px; height: 1px; background: var(--ink); transition: transform .25s; top: 3px; }
  .menu-lines::after { top: 11px; }
  .menu-toggle[aria-expanded="true"] .menu-lines::before { transform: translateY(4px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] .menu-lines::after { transform: translateY(-4px) rotate(-45deg); }
  .navigation { position: absolute; top: 75px; inset-inline: 0; padding: 20px var(--gutter) 24px; background: var(--paper); border-bottom: 1px solid #aeb7ae; display: none; flex-direction: column; align-items: stretch; gap: 8px; box-shadow: 0 25px 35px rgba(0,0,0,.1); }
  .navigation.is-open { display: flex; }
  .navigation > a:not(.button) { font-size: 17px; padding-block: 9px; }
  .navigation .button { margin-top: 8px; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { padding: 52px var(--gutter) 36px; min-height: 0; }
  .hero h1 { font-size: clamp(42px,8.8vw,70px); }
  .hero .eyebrow { max-width: none; font-size: 11px; }
  .hero-description { max-width: 52ch; margin-top: 24px; }
  .hero-actions { flex-direction: row; align-items: center; gap: 20px; margin-top: 26px; }
  .hero-meta { font-size: 12px; margin-top: 28px; gap: 20px; }
  .hero-meta span + span { padding-left: 20px; }
  .hero-visual { height: auto; aspect-ratio: 16/9; }
  .hero-visual > img { object-position: center 58%; }
  .hero-visual::after { background: linear-gradient(0deg,rgba(35,39,40,.25),transparent 35%); }
  .hero-footer { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; padding-block: 20px; font-size: 11px; }
  .founder-grid { gap: 34px; grid-template-columns: 1.2fr .8fr; align-items: start; }
  .founder-lead { font-size: 20px; }
  .founder-image figcaption { font-size: 11px; }
  .section-heading { display: block; margin-bottom: 34px; }
  .section-heading h2 { width: auto; }
  .section-heading .eyebrow { margin-top: 0; }
  .services-layout { grid-template-columns: 1fr; gap: 30px; }
  .service-item h3 { font-size: 24px; }
  .service-visual { position: static; }
  .service-visual img { aspect-ratio: 16/9; }
  .care { gap: 26px; }
  .care-item h3 { font-size: 20px; }
  .process-layout { grid-template-columns: 1fr; gap: 32px; }
  .process-list li { grid-template-columns: 28px minmax(0,.75fr) minmax(0,1.4fr); padding-block: 24px; }
  .process-list p { grid-column: auto; }
  .process-aside { position: static; display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; align-items: center; }
  .process-aside img { aspect-ratio: 4/3; grid-row: 1/3; }
  .process-aside p { margin-top: 0; align-self: end; }
  .process-aside .button { align-self: start; }
  .gallery-heading { display: block; }
  .gallery-heading > p { margin-top: 24px; max-width: 50ch; }
  .gallery-wide .gallery-image > img, .gallery-tall .gallery-image > img { height: 300px; }
  .gallery-image > img { height: 240px; }
  .faq { grid-template-columns: 1fr; gap: 32px; }
  .faq-heading > p:last-child { max-width: 50ch; }
  .contact-grid { grid-template-columns: 1fr; gap: 36px; }
  .contact-copy h2 { font-size: 60px; }
  .contact-copy h2 br { display: none; }
  .contact-copy > p:not(.eyebrow):not(.contact-region) { max-width: 55ch; }
  .contact-links { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; margin-top: 28px; }
  .contact-links a { border-top: 1px solid #c8ccc3; }
  .contact-links a:last-child { grid-column: 1/-1; }
  .contact-links a > strong { font-size: 20px; }
  .form-row { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
  .footer-top { align-items: flex-start; flex-direction: column; padding-bottom: 36px; gap: 26px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; padding-block: 36px; }
  .footer-brand { grid-column: 1/-1; }
  .footer-grid > div:last-child { display: block; }
  .footer-grid > div:last-child h3 { margin-bottom: 16px; }
  .footer-grid > div:last-child p { margin-bottom: 12px; }
  .footer-bottom { flex-wrap: wrap; gap: 8px 20px; }
  .footer-bottom > span { width: 100%; }
  .back-to-top { margin-left: auto; }
  .legal-layout { grid-template-columns: 1fr; gap: 36px; }
  .legal-nav { position: static; flex-direction: row; gap: 24px; border-bottom: 1px solid var(--line); }
  .legal-nav a { border-bottom: 0; }
  .legal-main { padding-top: 44px; }
}
@media (max-width:540px) {
  .header-inner { gap: 10px; }
  .brand { width: min(225px, calc(100vw - 110px)); }
  .menu-toggle > span:first-child { display: none; }
  .hero-copy { padding-top: 40px; }
  .hero h1 { font-size: clamp(35px,9.8vw,53px); }
  .hero .eyebrow { font-size: 10px; max-width: 36ch; }
  .hero-actions { gap: 12px 20px; }
  .hero-actions .button { padding-inline: 20px; }
  .hero-actions .text-link { font-size: 14px; }
  .hero-meta { font-size: 11px; gap: 14px; }
  .hero-meta span + span { padding-left: 14px; }
  .image-note { left: 20px; bottom: 22px; font-size: 11px; padding: 8px 10px; max-width: calc(100% - 100px); }
  .hero-scroll { right: 20px; bottom: 20px; width: 44px; height: 44px; font-size: 22px; }
  .hero-footer { font-size: 10px; letter-spacing: .03em; }
  .hero-footer span { gap: 8px; }
  h2 { font-size: clamp(31px,8.7vw,42px); line-height: 1.14; }
  .founder-grid { grid-template-columns: 1fr; gap: 28px; }
  .founder-image { max-width: none; }
  .founder-image img { aspect-ratio: 6/5; object-position: center 28%; }
  .experience { margin-top: 22px; }
  .experience-number { font-size: 62px; }
  .service-item summary { min-height: 80px; gap: 7px; grid-template-columns: 24px minmax(0,1fr) 24px; }
  .service-item h3 { font-size: 21px; letter-spacing: -.035em; }
  .service-content { padding-left: 31px; padding-right: 0; }
  .service-visual img { aspect-ratio: 4/3; }
  .care { grid-template-columns: 1fr; gap: 24px; padding-block: 44px; }
  .care-item { display: grid; grid-template-columns: 1fr; padding-top: 16px; }
  .care-item .tiny-index { margin-bottom: 8px; }
  .care-item p { max-width: none; margin-top: 8px; }
  .process-list li { grid-template-columns: 26px minmax(0,1fr); gap: 8px 12px; }
  .process-list p { grid-column: 2; }
  .process-list h3 { font-size: 22px; }
  .process-aside { grid-template-columns: 1fr; gap: 0; }
  .process-aside img { aspect-ratio: 16/9; grid-row: auto; object-position: center 45%; }
  .process-aside p { margin-top: 20px; }
  .process-aside .button { width: auto; justify-self: start; margin-top: 16px; }
  .gallery-heading { margin-bottom: 28px; }
  .gallery-grid { grid-template-columns: 1fr; gap: 28px; }
  .gallery-image > img, .gallery-wide .gallery-image > img, .gallery-tall .gallery-image > img { height: auto; aspect-ratio: 4/3; }
  .gallery-caption { gap: 4px; margin-top: 12px; }
  .gallery-caption strong { font-size: 16px; }
  .gallery-caption > span { font-size: 13px; }
  .faq-list summary { padding-block: 22px; gap: 18px; }
  .faq-list details > p { padding-right: 10px; }
  .contact-copy h2 { font-size: clamp(44px,12vw,60px); }
  .contact-links { grid-template-columns: 1fr; gap: 0; }
  .contact-links a { border-top: 0; }
  .contact-links a:first-child { border-top: 1px solid #c8ccc3; }
  .contact-links a:last-child { grid-column: auto; }
  .contact-form { padding: 24px 20px; }
  .contact-form h3 { font-size: 22px; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .site-footer { padding-top: 52px; }
  .footer-top h2 { font-size: clamp(30px,8.6vw,38px); }
  .footer-grid { gap: 26px 20px; }
  .footer-bottom nav { gap: 18px; }
  .image-dialog { max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); padding: 62px 12px 16px; }
  .dialog-image-wrap img { max-height: calc(100dvh - 240px); }
  .dialog-bottom { align-items: flex-start; flex-direction: column; padding-top: 14px; gap: 12px; }
  .dialog-controls { align-self: flex-end; }
  .dialog-bottom p { font-size: 14px; }
  .legal-nav { gap: 20px; }
}

html[data-motion="reduced"] { scroll-behavior: auto; }
html[data-motion="reduced"] *, html[data-motion="reduced"] *::before, html[data-motion="reduced"] *::after { animation: none !important; transition: none !important; transition-delay: 0s !important; }
html[data-motion="reduced"] .js-motion .reveal, html[data-motion="reduced"] .js-motion .reveal.in, html[data-motion="reduced"] .js-motion :is(.founder-image,.service-visual,.process-aside).reveal, html[data-motion="reduced"] .js-motion :is(.founder-image,.service-visual,.process-aside).reveal.in { opacity: 1; transform: none; }
html[data-motion="reduced"] .gallery-card:hover img, html[data-motion="reduced"] .gallery-card:hover .image-expand, html[data-motion="reduced"] .button:hover { transform: none; }

@media (pointer:coarse) { a, button, summary { touch-action: manipulation; } }
@media print {
  .site-header, .site-footer, .hero-scroll, .menu-toggle, .image-dialog { display: none; }
  .wrap { width: 100%; }
  .dark { background: #fff; color: #222; }
  .hero-grid, .services-layout, .care, .process-layout, .founder-grid, .faq, .contact-grid { display: block; }
  .section { padding: 30px 0; }
  .hero-copy { padding: 20px 0; min-height: 0; }
  .hero h1 { margin: 0; font-size: 42px; }
  .hero-visual { height: 250px; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .service-visual, .process-aside { position: static; }
  .contact-form { display: none; }
}

/* Visible motion belongs to the content: type, the R diagonal, and real photos. */
.hero h1:has(.title-line), h2:has(.title-line) { display: flex; flex-direction: column; align-items: flex-start; }
.title-line { width: 100%; display: block; overflow: hidden; padding-bottom: .16em; margin-bottom: -.16em; }
.title-line > span { display: block; }
.js-motion .reveal .title-line > span { opacity: 0; transform: translateY(110%); transition: transform 1.05s var(--ease),opacity .85s var(--ease); transition-delay: .08s; }
.js-motion .reveal .title-line:nth-child(2) > span { transition-delay: .22s; }
.js-motion .reveal.in .title-line > span { opacity: 1; transform: translateY(0); }
.hero-copy .title-line > span { animation: title-rise 1.05s var(--ease) both; animation-delay: .12s; }
.hero-copy .title-line:nth-child(2) > span { animation-delay: .28s; }
@keyframes title-rise { from { opacity: 0; transform: translateY(110%); } to { opacity: 1; transform: translateY(0); } }
.service-item[open] .service-content { animation: service-in .45s var(--ease) both; }
@keyframes service-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.photo-frame { display: block; position: relative; overflow: hidden; isolation: isolate; }
.founder-image .photo-frame, .process-aside .photo-frame { clip-path: polygon(0 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%); }
.photo-frame img { clip-path: none; }
.js-motion .photo-frame img { transform: scale(1.075); transition: transform 1.65s var(--ease); }
.js-motion .reveal.in .photo-frame img { transform: scale(1); }
.photo-wipe { display: none; position: absolute; inset: 0 -25% 0 0; z-index: 1; background: var(--paper); clip-path: polygon(0 0,100% 0,80% 100%,0 100%); pointer-events: none; }
.dark .photo-wipe { background: var(--dark); }
.js-motion .photo-wipe { display: block; transform: translateX(0); transition: transform 1.25s var(--ease); transition-delay: .14s; }
.js-motion .reveal.in .photo-wipe { transform: translateX(130%); }

.whatsapp-link { gap: 10px; }
.whatsapp-link svg, .whatsapp-float svg { width: 24px; height: 24px; flex: none; }
.whatsapp-float { position: fixed; z-index: 40; right: 24px; bottom: max(24px,env(safe-area-inset-bottom)); display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 12px 18px; border: 1px solid #62706a; border-radius: 28px; background: var(--ink); color: var(--paper); box-shadow: 0 5px 20px rgba(0,0,0,.16); font-size: 14px; font-weight: 700; transition: background .2s,transform .3s var(--ease); }
.whatsapp-float svg { color: #72e69d; }
.whatsapp-float:hover { background: #34433b; transform: translateY(-3px); }

.brand { position: relative; display: block; }
.brand-light { position: absolute; inset: 0; opacity: 0; }
.brand img { transition: opacity .25s; }

/* At the entrance, header and image form one composition. */
.home-page .site-header { position: fixed; inset-inline: 0; top: 0; background: transparent; color: var(--paper); border-color: rgba(255,255,255,.18); transition: background .25s,color .25s,border-color .25s; }
.home-page .site-header:not(.is-scrolled) .brand-dark { opacity: 0; }
.home-page .site-header:not(.is-scrolled) .brand-light { opacity: 1; }
.home-page .site-header:not(.is-scrolled) .navigation > a:not(.button):hover { color: var(--paper); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 6px; }
.home-page .site-header:not(.is-scrolled) :focus-visible { outline-color: var(--accent); }
.home-page .site-header:not(.is-scrolled) .menu-lines::before, .home-page .site-header:not(.is-scrolled) .menu-lines::after { background: var(--paper); }
.home-page .site-header.is-scrolled, .home-page .site-header:has(.navigation.is-open) { background: var(--paper); color: var(--ink); border-color: var(--line); }
.home-page .site-header:has(.navigation.is-open) .brand-dark { opacity: 1; }
.home-page .site-header:has(.navigation.is-open) .brand-light { opacity: 0; }
.home-page .site-header:has(.navigation.is-open) .menu-lines::before, .home-page .site-header:has(.navigation.is-open) .menu-lines::after { background: var(--ink); }
.home-page .navigation.is-open { color: var(--ink); }
.home-page .site-header:has(.navigation.is-open) .navigation > a:not(.button):hover { color: #856000; }
.home-page .hero-grid { position: relative; display: block; max-width: none; min-height: max(740px,100svh); }
.home-page .hero-copy { position: relative; z-index: 2; margin-left: max(var(--gutter),calc((100vw - 1328px)/2)); width: min(760px,calc(100% - var(--gutter) * 2)); padding: 156px 0 156px; min-height: max(740px,100svh); justify-content: center; }
.home-page .hero h1 { margin-right: 0; font-size: clamp(48px,5.35vw,86px); }
.home-page .hero-description { max-width: 43ch; }
.home-page .hero-visual { position: absolute; inset: 0; z-index: 0; height: auto; aspect-ratio: auto; clip-path: none; }
.home-page .hero-visual > img { width: 100%; height: 100%; object-position: center 56%; }
.home-page .hero-visual::after { background: linear-gradient(90deg,rgba(24,29,29,.94),rgba(24,29,29,.78) 40%,rgba(24,29,29,.18) 82%),linear-gradient(180deg,rgba(24,29,29,.6),transparent 28%,transparent 72%,rgba(24,29,29,.6)); }
.home-page .hero-footer { position: absolute; inset-inline: 0; bottom: 0; z-index: 2; border-top: 1px solid rgba(255,255,255,.22); }
.home-page .hero { position: relative; }
.home-page .image-note { left: auto; right: calc(var(--gutter) + 76px); bottom: 104px; }
.home-page .hero-scroll { right: var(--gutter); bottom: 100px; z-index: 3; }
@media (max-width:1100px) {
  .home-page .hero-copy { width: min(670px,calc(100% - var(--gutter) * 2)); }
  .home-page .hero h1 { font-size: clamp(48px,6.8vw,72px); }
  .home-page .hero-actions { flex-direction: row; align-items: center; }
}
@media (max-width:800px) {
  .process-aside .photo-frame { grid-row: 1/3; }
  .home-page .hero-grid, .home-page .hero-copy { min-height: max(780px,100svh); }
  .home-page .hero-copy { padding-top: 128px; padding-bottom: 176px; }
  .home-page .hero h1 { font-size: clamp(42px,8.8vw,70px); }
  .home-page .hero-visual > img { object-position: 36% center; }
  .home-page .hero-visual::after { background: linear-gradient(90deg,rgba(24,29,29,.92),rgba(24,29,29,.7) 70%,rgba(24,29,29,.4)),linear-gradient(180deg,rgba(24,29,29,.3),transparent 70%,rgba(24,29,29,.65)); }
  .home-page .image-note { right: calc(var(--gutter) + 60px); bottom: 124px; max-width: calc(100% - var(--gutter) * 2 - 60px); }
  .home-page .hero-scroll { bottom: 120px; }
}
@media (max-width:540px) {
  .process-aside .photo-frame { grid-row: auto; }
  .home-page .hero h1 { font-size: clamp(35px,9.8vw,53px); }
  .home-page .hero-copy { width: calc(100% - var(--gutter) * 2); }
  .home-page .hero-meta { margin-top: 26px; }
  .whatsapp-float { right: 16px; bottom: max(16px,env(safe-area-inset-bottom)); min-height: 52px; }
  .js-motion .reveal .title-line > span { transition-duration: .8s; }
  .js-motion .photo-wipe { transition-duration: .95s; }
}

html[data-motion="reduced"] .js-motion .reveal .title-line > span, html[data-motion="reduced"] .js-motion .reveal.in .title-line > span { opacity: 1; transform: none; }
html[data-motion="reduced"] .js-motion .photo-frame img, html[data-motion="reduced"] .js-motion .reveal.in .photo-frame img { transform: none; }
html[data-motion="reduced"] .js-motion .photo-wipe { display: none; }
html[data-motion="reduced"] .whatsapp-float:hover { transform: none; }

@media print {
  .whatsapp-float, .brand-light { display: none; }
  .home-page .hero-copy { width: 100%; margin: 0; min-height: 0; padding: 20px 0; }
  .home-page .hero-grid { min-height: 0; }
  .home-page .hero-visual { position: static; height: 250px; }
  .home-page .hero-footer { position: static; }
  .title-line > span { opacity: 1 !important; transform: none !important; }
  .photo-wipe { display: none !important; }
}

/* V5: open space, one fixed service photo and detail windows without layout shifts. */
html { scrollbar-gutter: stable; }
.site-header, .home-page .site-header, .home-page .site-header.is-scrolled { border: 0; }
.home-page .hero-footer { border: 0; }
.hero-meta span + span { padding-left: 0; border: 0; }
.hero-meta { gap: 24px; }
.text-link { border: 0; }
.text-link:hover { color: #795900; }
.light-link:hover { color: var(--accent); }
.services { background: var(--paper); }
.services .eyebrow.light { color: var(--muted); }
.services-layout { align-items: center; grid-template-columns: 1.15fr .85fr; }
.service-list { display: grid; gap: 12px; }
.service-item, .service-item:last-child { border: 0; }
.detail-trigger { display: flex; align-items: center; text-align: left; width: 100%; border: 0; background: var(--soft); padding: 24px; gap: 18px; min-height: 84px; transition: background .25s var(--ease),transform .4s var(--ease); }
.detail-trigger:hover { background: #e5e7df; transform: translateX(4px); }
.detail-trigger .plus { margin-left: auto; border-radius: 50%; background: var(--paper); width: 40px; height: 40px; }
.detail-trigger .plus::before, .detail-trigger .plus::after { top: 19px; left: 13px; }
.service-item .tiny-index { color: var(--muted); align-self: flex-start; padding-top: 4px; }
.service-title { font-size: clamp(20px,1.7vw,26px); font-weight: 600; letter-spacing: -.035em; line-height: 1.3; }
.service-visual { position: static; }
.service-visual img { aspect-ratio: 4/5; max-height: 530px; }
.service-visual .photo-frame { clip-path: polygon(0 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%); }
.gallery { padding-top: 0; }
.gallery-grid { gap: 42px 28px; }
.intro { padding-top: 0; }
.experience { border: 0; padding-top: 0; }
.process { background: #e9ebe5; color: var(--ink); }
.process .eyebrow.light { color: var(--muted); }
.process-layout { display: block; }
.process-list { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: clamp(24px,3.5vw,50px); }
.process-list li, .process-list li:last-child { display: flex; flex-direction: column; border: 0; padding: 0; gap: 16px; }
.process-list .step-number { width: 52px; height: 52px; display: grid; place-items: center; background: var(--ink); color: var(--accent); font-size: 15px; font-weight: 700; clip-path: polygon(0 0,100% 0,100% 78%,78% 100%,0 100%); }
.process-list h3 { font-size: 22px; }
.process-list p { color: var(--muted); font-size: 16px; }
.faq { padding-top: var(--space); }
.faq-list { display: grid; align-content: start; gap: 10px; border: 0; }
.faq-trigger { min-height: 80px; font-size: 16px; font-weight: 600; }
.contact-links { display: flex; flex-direction: column; gap: 16px; }
.contact-links a, .contact-links a:first-child { border: 0; padding-block: 0; min-height: 58px; }
.contact-choice-inline { align-self: flex-start; display: inline-flex; gap: 24px; align-items: center; min-height: 52px; padding: 12px 20px; margin-bottom: 12px; background: var(--ink); color: var(--paper); border: 0; font-size: 14px; font-weight: 650; transition: background .25s; }
.contact-choice-inline:hover { background: #424b47; }
.contact-form { border: 0; box-shadow: 0 16px 55px #272a2b08; scroll-margin-top: 112px; }
.contact-preference { border: 0; padding: 0; margin: 0 0 26px; min-width: 0; }
.contact-preference legend { padding: 0; font-size: 14px; font-weight: 650; margin-bottom: 12px; }
.channel-options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.channel-options label { cursor: pointer; position: relative; min-width: 0; }
.channel-options input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.channel-options span { display: grid; place-items: center; min-height: 48px; font-size: 14px; font-weight: 650; border: 1px solid #858e86; transition: background .2s,color .2s; }
.channel-options input:checked + span { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.channel-options input:focus-visible + span { outline: 3px solid #986800; outline-offset: 3px; }
.field-help { margin-top: -8px; margin-bottom: 22px; font-size: 13px; color: var(--muted); }
.preview-note { border: 0; padding: 14px; background: var(--soft); }
.footer-top, .footer-bottom, .footer-grid > div:last-child { border: 0; }
.content-dialog { width: min(680px,calc(100vw - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: clamp(28px,4vw,56px); padding-top: 78px; border: 0; background: var(--paper); color: var(--ink); overflow: auto; box-shadow: 0 24px 100px #0003; }
.content-dialog::backdrop { background: #151b1bd1; backdrop-filter: blur(7px); }
.content-dialog[open] { animation: detail-in .4s var(--ease) both; }
.content-dialog h2 { font-size: clamp(28px,3vw,42px); line-height: 1.15; margin-bottom: 24px; overflow-wrap: anywhere; }
.content-dialog .dialog-close { top: 16px; right: 16px; background: var(--soft); }
.content-dialog .dialog-close:hover { background: var(--accent); }
.content-dialog .eyebrow { margin-bottom: 16px; }
.content-dialog .service-content { padding: 0; color: var(--muted); }
.content-dialog .service-content ul { display: block; padding-block: 20px; }
.content-dialog .service-content li { font-size: 16px; margin-bottom: 8px; }
.content-dialog .service-content li::before { color: #795900; }
.content-dialog .service-content .text-link { color: var(--ink); background: var(--accent); min-height: 52px; padding: 12px 22px; }
.detail-copy, .dialog-intro { color: var(--muted); font-size: 16px; line-height: 1.8; }
.contact-dialog { width: min(740px,calc(100vw - 32px)); }
.contact-choice-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 28px; }
.contact-choice-grid > * { position: relative; display: flex; flex-direction: column; text-align: left; padding: 24px 20px; border: 0; background: var(--soft); min-width: 0; min-height: 128px; transition: background .25s,transform .4s var(--ease); }
.contact-choice-grid > *:hover { background: #e1e4d8; transform: translateY(-3px); }
.contact-choice-grid strong { font-size: 20px; font-weight: 600; margin-bottom: 6px; }
.contact-choice-grid span:not(.choice-symbol) { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.contact-choice-grid .choice-symbol { position: absolute; right: 16px; top: 16px; font-size: 20px; color: #795900; }

@keyframes detail-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width:1100px) { .process-list { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 38px; } }
@media (max-width:800px) {
  .services-layout { grid-template-columns: 1fr; gap: 32px; }
  .service-visual { max-width: none; width: 100%; }
  .service-visual img { aspect-ratio: 16/10; max-height: 420px; }
  .process-list p { grid-column: auto; }
}
@media (max-width:540px) {
  .detail-trigger { padding: 20px 16px; gap: 12px; min-height: 82px; }
  .service-title { font-size: 20px; }
  .service-item .tiny-index { font-size: 11px; }
  .detail-trigger .plus { width: 32px; height: 32px; }
  .detail-trigger .plus::before, .detail-trigger .plus::after { top: 15px; left: 9px; }
  .process-list { grid-template-columns: 1fr; gap: 30px; }
  .process-list li { display: grid; grid-template-columns: 44px minmax(0,1fr); gap: 8px 18px; }
  .process-list .step-number { width: 44px; height: 44px; grid-row: 1/3; }
  .process-list h3 { font-size: 20px; }
  .process-list p { grid-column: 2; }
  .contact-choice-grid { gap: 10px; }
  .contact-choice-grid > * { padding: 24px 14px 18px; min-height: 128px; }
  .contact-choice-grid strong { font-size: 18px; }
  .contact-choice-grid span:not(.choice-symbol) { font-size: 12px; }
  .contact-choice-grid .choice-symbol { right: 10px; top: 10px; }
  .channel-options { gap: 6px; }
  .channel-options span { font-size: 13px; }
  .content-dialog { width: calc(100vw - 24px); padding-inline: 24px; }
}

html[data-motion="reduced"] .detail-trigger:hover, html[data-motion="reduced"] .contact-choice-grid > *:hover { transform: none; } 

/* The signature work stage gives each real photograph space and a deliberate pace. */
:root { --space: clamp(76px,8.5vw,136px); }
.home-page .hero h1 { font-weight: 500; font-size: clamp(64px,7.45vw,118px); letter-spacing: -.065em; }
.home-page .hero-copy { width: min(1020px,calc(100% - var(--gutter) * 2)); }
.home-page .hero-description { max-width: 41ch; font-size: 17px; }
.home-page .hero-visual > img { height: calc(100% + 72px); max-width: none; transform: translateY(var(--hero-drift,0px)) scale(1.015); animation: none; position: absolute; top: -36px; }
.section-heading h2, .founder-copy h2 { font-size: clamp(38px,4.6vw,72px); font-weight: 500; line-height: 1.12; }
.services .section-heading { margin-bottom: 48px; }
.gallery { padding-block: var(--space); overflow: hidden; }
.work-stage { display: grid; grid-template-columns: .78fr 1.22fr; grid-template-rows: 1fr auto; gap: 44px 64px; align-items: start; }
.stage-copy { grid-column: 1; grid-row: 1; padding-top: 12px; }
.stage-copy h2 { font-size: clamp(54px,6.25vw,96px); font-weight: 500; letter-spacing: -.065em; line-height: 1.02; }
.stage-intro { color: var(--light-muted); max-width: 31ch; margin-top: 28px; font-size: 16px; }
.stage-description { display: flex; align-items: center; gap: 20px; margin-top: 44px; min-height: 76px; }
#stage-index { color: var(--accent); font-size: 62px; line-height: 1; font-weight: 400; letter-spacing: -.065em; }
.stage-description h3 { font-size: 20px; line-height: 1.35; }
.stage-description p { font-size: 13px; color: var(--light-muted); margin-top: 6px; }
.stage-visual { min-width: 0; grid-column: 2; grid-row: 1/3; position: relative; background: #2d3231; height: clamp(440px,43vw,650px); overflow: hidden; clip-path: polygon(0 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%); }
.stage-visual .gallery-card { height: 100%; }
.stage-visual .gallery-image { height: 100%; }
.stage-visual .gallery-image > img { height: 100%; width: 100%; object-fit: contain; background: #2d3231; }
.stage-visual .gallery-caption { display: none; }
.stage-visual .image-expand { bottom: 24px; right: 24px; }
.stage-visual .gallery-card:hover img { transform: scale(1.012); }
.stage-navigation { grid-column: 1; grid-row: 2; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; align-self: end; }
.stage-navigation button { border: 0; min-height: 78px; display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 12px 6px; background: #343b37; color: #d0d5d1; font-size: 11px; text-align: center; transition: background .25s,color .25s,transform .4s var(--ease); }
.stage-navigation button > span { font-size: 18px; font-weight: 600; }
.stage-navigation button[aria-pressed="true"] { background: var(--accent); color: var(--ink); }
.stage-navigation button:hover { background: #465248; transform: translateY(-2px); }
.stage-navigation button[aria-pressed="true"]:hover { background: var(--accent-hover); }
.intro { padding-top: var(--space); }
.intro .founder-image { max-width: 450px; }
.service-item { position: relative; overflow: hidden; }
.service-trigger { position: relative; }
@media (max-width:1100px) {
  .home-page .hero h1 { font-size: clamp(54px,8vw,86px); }
  .work-stage { gap: 32px; grid-template-columns: .9fr 1.1fr; }
  .stage-copy h2 { font-size: clamp(50px,6.8vw,76px); }
  .stage-navigation { gap: 6px; }
}
@media (max-width:800px) {
  .home-page .hero h1 { font-size: clamp(48px,8.8vw,72px); }
  .work-stage { grid-template-columns: 1fr; gap: 28px; }
  .stage-copy { grid-column: 1; grid-row: 1; padding: 0; }
  .stage-copy h2 { font-size: clamp(52px,10vw,76px); }
  .stage-intro { max-width: 50ch; }
  .stage-description { margin-top: 26px; min-height: 65px; }
  .stage-visual { grid-column: 1; grid-row: 2; height: clamp(320px,65vw,480px); }
  .stage-navigation { grid-column: 1; grid-row: 3; max-width: 440px; width: 100%; }
}
@media (max-width:540px) {
  .home-page .hero h1 { font-size: clamp(35px,9.6vw,52px); }
  .home-page .hero-description { font-size: 16px; }
  .stage-copy h2 { font-size: clamp(48px,13vw,65px); }
  .stage-visual { height: 340px; }
  .stage-navigation button { min-height: 70px; font-size: 10px; }
  .stage-description { gap: 16px; }
  .stage-description h3 { font-size: 18px; }
  #stage-index { font-size: 54px; }
  .stage-intro { margin-top: 22px; }
}

html[data-motion="reduced"] .home-page .hero-visual > img, html[data-motion="reduced"] .stage-visual .gallery-card:hover img, html[data-motion="reduced"] .stage-navigation button:hover { transform: none; }

.detail-view-toggle { position: absolute; z-index: 2; top: 20px; right: 20px; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 16px; border: 0; border-radius: 24px; background: var(--paper); color: var(--ink); font-size: 13px; font-weight: 700; box-shadow: 0 2px 20px #0002; transition: background .25s; }
.detail-view-toggle > span:first-child { font-size: 22px; line-height: 1; }
.detail-view-toggle:hover, .detail-view-toggle[aria-pressed="true"] { background: var(--accent); }
.stage-visual.is-detail-view .gallery-image > img, .stage-visual.is-detail-view .gallery-card:hover img { transform: scale(2); transform-origin: var(--detail-x,50%) var(--detail-y,50%); }
.stage-visual.is-detail-view .gallery-image { cursor: zoom-in; }
@media (max-width:540px) { .detail-view-toggle { top: 14px; right: 14px; } }
.service-item { overflow: visible; }
.service-trigger { overflow: hidden; }
/* Opening aperture echoes the signet's cut; all movement is transform or opacity. */
.home-page .hero-visual::before { content: ''; position: absolute; inset: 0 -40% 0 0; z-index: 2; background: var(--dark); pointer-events: none; clip-path: polygon(0 0,100% 0,86% 100%,0 100%); animation: hero-aperture 1.8s var(--ease) both; }
.home-page .hero-visual > img { transition: transform .35s linear; }
@keyframes hero-aperture { from { transform: translateX(0); } to { transform: translateX(-120%); } }
@keyframes hero-photo-open { from { transform: translateY(var(--hero-drift,0px)) scale(1.065); } to { transform: translateY(var(--hero-drift,0px)) scale(1.015); } }

html[data-motion="reduced"] .home-page .hero-visual::before { display: none; } 

.navigation { border: 0; }

/* V6: a visible room, answers in the page and a scroll-led work study. */
:root { --header-height: 88px; --stage-height: calc(100svh - var(--header-height)); }
.home-page .hero-copy { width: min(760px,calc(100% - var(--gutter) * 2)); padding-block: 160px 140px; }
.home-page .hero h1 { font-size: clamp(58px,6.35vw,96px); }
.home-page .hero-description { max-width: 35ch; line-height: 1.8; margin-top: 32px; }
.home-page .hero-visual { left: 30%; }
.home-page .hero-visual > img { object-position: left center; }
.home-page .hero-visual::after { background: linear-gradient(90deg,#232728 0%,rgba(35,39,40,.72) 14%,rgba(35,39,40,.08) 46%,transparent 62%),linear-gradient(180deg,rgba(20,26,26,.62),transparent 25%,transparent 75%,rgba(20,26,26,.5)); }
.home-page .hero-visual::before { background: var(--dark); }
.service-list { display: flex; flex-direction: column; gap: 12px; }
.services-layout { align-items: start; }
.service-visual { position: sticky; top: 120px; }
.service-visual img { max-height: none; aspect-ratio: 4/5; }
.service-visual .photo-frame { clip-path: none; }
.inline-readout { overflow: auto; overscroll-behavior: auto; scrollbar-width: thin; scroll-padding: 16px; }
.service-readout { height: 292px; padding: 24px 24px 0; margin-top: 10px; }
.inline-readout h3 { font-size: 24px; line-height: 1.35; margin-bottom: 14px; }
.inline-readout .eyebrow { margin-bottom: 10px; }
.inline-readout p { font-size: 16px; line-height: 1.75; color: var(--muted); }
.inline-readout .service-content { padding: 0; color: var(--muted); }
.inline-readout .service-content ul { padding: 16px 0; gap: 8px 16px; }
.inline-readout .service-content li::before { color: #795900; }
.inline-readout .service-content .text-link { color: var(--ink); min-height: 44px; }
.detail-trigger[aria-expanded="true"] { background: #e0e4d9; }
.detail-trigger[aria-expanded="true"] .plus { background: var(--accent); }
.detail-trigger[aria-expanded="true"] .plus::after { transform: rotate(0); }
.js-sequence .sequence-item { opacity: var(--entry-opacity,0); transform: translateY(var(--entry-shift,24px)); }
.js-sequence .sequence-item.keyboard-visible { opacity: 1; transform: none; }
.gallery { overflow: visible; }
.gallery-sticky { width: 100%; }
.stage-visual { clip-path: none; }
.stage-visual .gallery-image > img { object-fit: cover; background: none; }
.stage-visual [data-gallery="0"] img { object-position: 52% center; }
.stage-visual [data-gallery="1"] img { object-position: center 40%; }
.stage-visual [data-gallery="2"] img { object-position: 45% center; }
.stage-visual [data-gallery="3"] img { object-position: center 36%; }
.js-scroll .gallery { height: calc(var(--stage-height) + 150svh); padding-block: 0; }
.js-scroll .gallery-sticky { position: sticky; top: var(--header-height); height: var(--stage-height); padding-block: clamp(24px,4svh,44px); display: flex; align-items: center; }
.js-scroll .work-stage { height: 100%; max-height: 680px; gap: 28px 56px; min-height: 0; }
.js-scroll .stage-copy { padding-top: 0; }
.js-scroll .stage-copy h2 { font-size: clamp(54px,5.5vw,84px); }
.js-scroll .stage-description { margin-top: 28px; }
.js-scroll .stage-intro { margin-top: 24px; }
.js-scroll .stage-visual { height: 100%; }
.stage-navigation button { position: relative; overflow: hidden; }
.js-scroll .stage-navigation::after { content: ''; grid-column: 1/-1; height: 3px; background: var(--accent); transform: scaleX(var(--study-progress,0)); transform-origin: left; }
.faq-intro { min-width: 0; }
.faq-readout { height: 286px; margin-top: 32px; padding-right: 12px; }
.faq-readout h3 { font-size: 22px; }
.faq-heading > p:last-child { margin-top: 20px; }
.contact-copy.reveal, .faq-heading.reveal, .founder-copy.reveal { transition-duration: .55s; }
.founder-image .photo-wipe { display: none; }
.js-motion .founder-image.reveal { transform: none; }
.js-motion .founder-image.reveal.in { transform: none; }
.js-motion .founder-image .photo-frame img { transform: none; }
.contact-choice-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.contact-choice-grid .choice-whatsapp { grid-column: 1/-1; min-height: 104px; background: #25D366; }
.contact-choice-grid .choice-whatsapp span:not(.choice-symbol), .contact-choice-grid .choice-whatsapp .choice-symbol { color: var(--ink); }
.contact-choice-grid .choice-whatsapp strong { font-size: 24px; }
.contact-choice-grid .choice-whatsapp:hover { background: #20BD5A; }
@media (max-width:1100px) {
  .home-page .hero h1 { font-size: clamp(54px,6.6vw,76px); }
  .home-page .hero-copy { width: min(660px,calc(100% - var(--gutter) * 2)); }
  .js-scroll .work-stage { gap: 24px 36px; }
  .js-scroll .stage-copy h2 { font-size: clamp(50px,6.8vw,70px); }
  .js-scroll .stage-intro { margin-top: 18px; }
  .service-readout { height: 326px; padding-inline: 18px; }
}
@media (max-width:800px) {
  :root { --header-height: 75px; }
  .home-page .hero-grid { min-height: 0; display: flex; flex-direction: column; }
  .home-page .hero-copy { min-height: 0; width: calc(100% - var(--gutter) * 2); padding-top: 132px; padding-bottom: 40px; }
  .home-page .hero h1 { font-size: clamp(38px,8.5vw,66px); }
  .home-page .hero-description { max-width: 40ch; margin-top: 24px; }
  .home-page .hero-visual { position: relative; inset: auto; height: 340px; width: 100%; }
  .home-page .hero-visual > img { object-position: 25% center; }
  .home-page .hero-visual::after { background: linear-gradient(180deg,rgba(35,39,40,.45),transparent 24%,transparent 78%,rgba(35,39,40,.3)); }
  .home-page .hero-footer { position: static; }
  .service-visual { position: static; }
  .service-visual img { aspect-ratio: 16/10; max-height: 420px; }
  .service-readout { height: 288px; padding-inline: 16px; }
  .faq-list { grid-row: 2; }
  .faq-intro { display: contents; }
  .faq-heading { grid-row: 1; }
  .faq-readout { grid-row: 3; margin-top: 0; height: 310px; }
  .js-scroll .gallery-sticky { padding-block: 24px; }
  .js-scroll .work-stage { display: grid; grid-template-columns: 1fr; grid-template-rows: auto minmax(0,1fr) auto; gap: 20px; max-height: none; }
  .js-scroll .stage-copy { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; align-items: center; }
  .js-scroll .stage-copy > .eyebrow { grid-column: 1/-1; margin-bottom: 10px; }
  .js-scroll .stage-copy h2 { font-size: clamp(40px,7vw,56px); grid-column: 1; }
  .js-scroll .stage-intro { display: none; }
  .js-scroll .stage-description { grid-column: 2; margin: 0; gap: 12px; min-height: 0; }
  .js-scroll .stage-description h3 { font-size: 17px; }
  .js-scroll #stage-index { font-size: 42px; }
  .js-scroll .stage-caption { font-size: 12px; }
  .js-scroll .stage-visual { height: 100%; grid-row: 2; }
  .js-scroll .stage-navigation { grid-row: 3; max-width: none; }
  .js-scroll .stage-navigation button { min-height: 60px; }
}
@media (max-width:540px) {
  .home-page .hero h1 { font-size: clamp(35px,9.6vw,52px); }
  .home-page .hero-visual { height: 270px; }
  .home-page .hero-copy { padding-top: 120px; padding-bottom: 34px; }
  .hero-actions { margin-top: 24px; }
  .hero-description { font-size: 16px; }
  .service-readout { height: 366px; padding-inline: 10px; }
  .inline-readout h3 { font-size: 21px; }
  .inline-readout .service-content ul { display: block; padding-block: 12px; }
  .inline-readout .service-content li { margin-bottom: 6px; font-size: 14px; }
  .faq-readout { height: 356px; }
  .js-scroll .gallery-sticky { padding-block: 20px; }
  .js-scroll .work-stage { gap: 16px; }
  .js-scroll .stage-copy { grid-template-columns: 1fr .92fr; gap: 10px 16px; }
  .js-scroll .stage-copy > .eyebrow { margin-bottom: 0; }
  .js-scroll .stage-copy h2 { font-size: clamp(36px,10vw,44px); }
  .js-scroll .stage-description { gap: 8px; }
  .js-scroll .stage-description h3 { font-size: 14px; }
  .js-scroll .stage-description p { font-size: 11px; }
  .js-scroll #stage-index { font-size: 32px; }
  .contact-choice-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .contact-choice-grid > a:last-child { grid-column: 1/-1; min-height: 96px; }
}

html[data-motion="reduced"] .sequence-item { opacity: 1 !important; transform: none !important; }

.js-motion :is(.founder-copy,.faq-heading,.contact-copy) .title-line > span { transform: translateY(10px); transition-duration: .55s; transition-delay: .04s; }
.js-motion :is(.founder-copy,.faq-heading,.contact-copy) .title-line:nth-child(2) > span { transition-delay: .12s; }
.js-motion :is(.founder-copy,.faq-heading,.contact-copy).in .title-line > span { transform: none; }

html[data-motion="reduced"] .js-motion :is(.founder-copy,.faq-heading,.contact-copy) .title-line > span { transform: none; } 
/* Keep the answer beside its options; mobile uses the same reserved space below selection. */
@media (min-width:801px) {
  .services-layout { grid-template-columns: 1.6fr .85fr; gap: clamp(32px,4.2vw,64px); }
  .service-list { display: grid; grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr); gap: 12px 24px; align-items: stretch; }
  .service-item { grid-column: 1; }
  .service-item:nth-of-type(1) { grid-row: 1; }
  .service-item:nth-of-type(2) { grid-row: 2; }
  .service-item:nth-of-type(3) { grid-row: 3; }
  .service-item:nth-of-type(4) { grid-row: 4; }
  .service-trigger { height: 100%; padding: 20px 16px; gap: 12px; }
  .service-title { font-size: clamp(20px,1.65vw,24px); }
  .service-readout { grid-column: 2; grid-row: 1/5; margin: 0; padding: 16px 8px 16px 0; height: 490px; }
  .service-readout .service-content ul { display: block; padding-block: 14px; }
  .service-readout .service-content li { margin-bottom: 8px; font-size: 14px; }
  .service-list > noscript { grid-column: 1/-1; }
}
@media (max-width:800px) { .service-item { order: var(--service-order,0); } }

/* V7: native scroll chaining, persistent contact and an explicit motion choice. */
.whatsapp-float { width: 56px; height: 56px; min-height: 56px; padding: 0; border-radius: 50%; border: 0; background: #25D366; color: #fff; }
.whatsapp-float svg { width: 30px; height: 30px; color: inherit; }
.whatsapp-float:hover { background: #20BD5A; }
.motion-toggle { min-height: 44px; padding: 8px 0; border: 0; background: transparent; color: var(--light-muted); font-size: 12px; cursor: pointer; text-align: left; }
.motion-toggle:hover { color: var(--paper); }
.footer-bottom { padding-right: 72px; }
.js-sequence .sequence-item { transition: opacity .8s var(--ease), transform 1.1s var(--ease); transition-delay: var(--sequence-delay,0ms); }
.js-sequence .service-item { transform: translateX(calc(var(--entry-shift,48px) * -1)); }
.js-sequence .service-item.keyboard-visible { transform: none; }
.js-motion .faq-list.reveal, .js-motion .contact-form.reveal { transform: translateY(10px); transition-duration: .55s; }
.js-motion .faq-list.reveal.in, .js-motion .contact-form.reveal.in { transform: none; }
.js-sequence .sequence-item.sequence-settled { transition-delay: 0ms; }
html[data-motion="full"] .motion-visible .brand-label::before { animation: diagonal-breathe 7s ease-in-out -1.5s infinite; }
/* A quiet plaster grain gives the light and dark surfaces one material world. */
.home-page::before { content: ''; position: fixed; inset: -5%; z-index: 2; pointer-events: none; opacity: .022; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23808780' filter='url(%23n)' d='M0 0h160v160H0z'/%3E%3C/svg%3E"); }
html[data-motion="full"] .home-page::before { animation: plaster-drift 60s linear -12s infinite; }
@keyframes plaster-drift { 0%,100% { transform: translate3d(-1%,0,0); } 50% { transform: translate3d(1%,1%,0); } }
html[data-motion="full"] .motion-visible .step-number::after { content: ''; position: absolute; inset: 3px; border: 1px solid #616865; border-radius: inherit; opacity: 0; animation: detail-breathe 7s ease-in-out -2s infinite; pointer-events: none; }
.step-number { position: relative; }
@keyframes diagonal-breathe { 0%,100% { opacity: .72; transform: rotate(46deg) scaleX(.85); } 50% { opacity: 1; transform: rotate(46deg) scaleX(1); } }
@keyframes detail-breathe { 0%,100% { opacity: 0; } 50% { opacity: .35; } }
body.motion-paused::before, body.motion-paused *, body.motion-paused *::before, body.motion-paused *::after { animation-play-state: paused !important; }
html[data-motion="reduced"] .sequence-item { opacity: 1 !important; transform: none !important; }
.home-page .hero-footer { padding-right: 70px; }
@media (min-width:801px) and (max-width:1200px) { .faq-readout { height: 460px; } }
@media (min-width:801px) and (max-width:900px) { .service-readout { height: 520px; } }
@media (max-width:800px) {
 .whatsapp-float { right: 16px; bottom: max(16px,env(safe-area-inset-bottom)); width: 52px; height: 52px; min-height: 52px; }
 .stage-navigation { width: calc(100% - 62px); margin-right: 62px; }
 .js-scroll .stage-navigation { width: calc(100% - 62px); margin-right: 62px; }
 .footer-bottom { padding-right: 62px; }
}
@media (max-width:360px) { .service-readout { height: 420px; } .faq-readout { height: 450px; } }
@media (max-width:540px) { .stage-navigation button { padding-inline: 2px; } }
html:not(.motion-ready) .home-page .hero-copy > *, html:not(.motion-ready) .home-page .hero-copy .title-line > span { animation: none; }
html:not(.motion-ready) .home-page .hero-visual::before { animation: none; transform: translateX(-120%); }

/* V9: one entrance language per section, all within the same quiet easing. */
/* Services: horizontal construction; the existing sequential rows stay intact. */
.js-motion .services .section-heading.reveal { transform: none; }
.js-motion .services .section-heading .title-line > span { transform: translateX(-36px); }
.js-motion .services .section-heading.in .title-line > span { transform: none; }

/* Work studies: let the photographs carry the movement, the copy only fades. */
.js-motion .stage-copy.reveal { transform: none; transition: opacity .8s var(--ease); }
.js-motion .stage-copy .title-line > span { transform: none; }

/* A personal introduction: quiet crossfade, stationary portrait and typography. */
.js-motion .founder-copy.reveal,
.js-motion .founder-image.reveal { transform: none; transition: opacity .75s var(--ease); }
.js-motion .founder-copy .title-line > span { transform: none; transition: opacity .75s var(--ease); }
.js-motion .founder-copy > :is(.founder-lead,p:not(.eyebrow),.experience,.text-link) { opacity: 0; transition: opacity .7s var(--ease); transition-delay: .12s; }
.js-motion .founder-copy > .experience { transition-delay: .22s; }
.js-motion .founder-copy > .text-link { transition-delay: .3s; }
.js-motion .founder-copy.in > :is(.founder-lead,p:not(.eyebrow),.experience,.text-link) { opacity: 1; }

/* Process: steps rise in order; the number resolves with its own precise beat. */
.js-sequence .process-list .step-number { transform: scale(calc(.86 + var(--entry-opacity,0) * .14)); transition: transform .85s var(--ease); transition-delay: var(--sequence-delay,0ms); }
.js-sequence .process-list .keyboard-visible .step-number { transform: none; }

/* Questions: brief opacity entrance only, every answer stays in its fixed area. */
.js-motion .faq-heading.reveal,
.js-motion .faq-list.reveal { transform: none; transition: opacity .5s var(--ease); }
.js-motion .faq-heading .title-line > span { transform: none; transition: opacity .5s var(--ease); }
.js-motion .faq-list.reveal { transition-delay: .1s; }

/* Contact: a short lateral title reveal and a gentle settling of the form. */
.js-motion .contact-copy.reveal { transform: none; transition: opacity .55s var(--ease); }
.js-motion .contact-copy .title-line > span { transform: translateX(16px); transition: opacity .55s var(--ease),transform .7s var(--ease); }
.js-motion .contact-copy.in .title-line > span { transform: none; }
.js-motion .contact-form.reveal { transform: scale(.985); transform-origin: top right; transition: opacity .55s var(--ease),transform .8s var(--ease); }
.js-motion .contact-form.reveal.in { transform: none; }

html[data-motion="reduced"] .js-motion .founder-copy > :is(.founder-lead,p:not(.eyebrow),.experience,.text-link) { opacity: 1; transition: none; }
html[data-motion="reduced"] .process-list .step-number { transform: none !important; transition: none; }

.footer-grid > .footer-legal:last-child { display: block; grid-column: auto; padding-top: 0; }
.footer-grid > .footer-legal:last-child h3 { margin-bottom: 16px; }
.footer-legal nav { display: grid; gap: 0; }
.footer-legal nav a { display: flex; align-items: center; min-height: 44px; }
@media (min-width:801px) and (max-width:1100px) { .footer-grid { grid-template-columns: 1.2fr 1fr; gap: 32px 44px; } }

/* V11: services are a typographic index with an inline detail view, not FAQ cards. */
.services-layout { grid-template-columns: 1.1fr .9fr; gap: clamp(36px,5vw,80px); align-items: start; }
.service-selector { position: relative; min-width: 0; height: 540px; }
.service-list { display: flex; flex-direction: column; gap: 0; height: 100%; }
.service-list[hidden], .service-readout[hidden] { display: none; }
.service-item { flex: 1; min-height: 0; }
.service-trigger { display: grid; grid-template-columns: 28px minmax(0,1fr) 40px; gap: 20px; height: 100%; min-height: 0; padding: 20px 0; background: transparent; }
.service-trigger:hover, .service-trigger[aria-expanded="true"] { background: transparent; transform: none; }
.service-item .tiny-index { align-self: center; padding: 0; font-size: 12px; }
.service-title { font-size: clamp(28px,3vw,42px); font-weight: 500; line-height: 1.15; letter-spacing: -.055em; transition: transform .4s var(--ease); }
.service-trigger:hover .service-title { transform: translateX(6px); }
.service-trigger .plus { margin: 0; background: transparent; border-radius: 0; width: 40px; height: 40px; }
.service-readout { position: absolute; inset: 0; height: 100%; margin: 0; padding: 0 12px 0 0; display: block; }
.service-readout h3 { font-size: clamp(28px,3vw,42px); font-weight: 500; line-height: 1.15; letter-spacing: -.055em; margin-bottom: 28px; }
.service-back { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: 28px; padding: 0; border: 0; background: transparent; color: var(--muted); font-size: 14px; }
.service-back:hover { color: var(--ink); }
.service-readout .service-content ul { display: block; padding-block: 24px; }
.service-readout .service-content li { margin-bottom: 8px; }
.service-visual { position: static; }
.service-visual img { height: 540px; width: 100%; max-height: none; aspect-ratio: auto; object-fit: cover; }
@media (max-width:800px) {
  .services-layout { grid-template-columns: 1fr; gap: 32px; }
  .service-selector { height: 520px; }
  .service-trigger { grid-template-columns: 24px minmax(0,1fr) 40px; gap: 14px; }
  .service-title, .service-readout h3 { font-size: clamp(28px,6.5vw,40px); }
  .service-visual img { height: auto; aspect-ratio: 16/10; max-height: 420px; }
}
@media (max-width:360px) { .service-selector { height: 580px; } }
html[data-motion="reduced"] .service-trigger:hover .service-title { transform: none; }

.privacy-ack { display: grid; grid-template-columns: 22px minmax(0,1fr); align-items: start; gap: 12px; margin-block: 8px 16px; }
.privacy-ack input { appearance: auto; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--ink); cursor: pointer; }
.privacy-ack label { cursor: pointer; font-size: 13px; line-height: 1.7; color: var(--muted); }
.privacy-ack a { color: var(--ink); font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }
.privacy-ack a:hover { text-decoration-thickness: 2px; }

/* V13: the approved desktop composition remains the reference. */
.mobile-label, .faq-topics { display: none; }
.founder-opening, .founder-body { display: contents; }
.founder-body > p { color: var(--muted); margin-top: 20px; }
.privacy-settings { min-height: 44px; border: 0; padding: 0; background: none; color: var(--light-muted); font-size: 12px; text-align: left; }
.privacy-settings:hover { color: var(--paper); }
.cookie-banner { position: fixed; z-index: 50; left: 24px; bottom: 24px; width: min(430px,calc(100% - 48px)); padding: 24px; background: var(--paper); color: var(--ink); box-shadow: 0 12px 60px #17202035; max-height: calc(100dvh - 48px); overflow: auto; }
.cookie-banner .eyebrow { margin-bottom: 12px; }
.cookie-banner h2 { font-size: 28px; margin-bottom: 12px; letter-spacing: -.04em; }
.cookie-banner > p:not(.eyebrow) { font-size: 14px; line-height: 1.6; }
.cookie-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
.cookie-actions button { border: 1px solid var(--ink); min-height: 48px; padding: 10px 8px; background: var(--ink); color: var(--paper); font-size: 14px; font-weight: 650; }
.cookie-actions button:last-child { background: transparent; color: var(--ink); }
.cookie-actions button:hover { background: var(--soft); color: var(--ink); }
.cookie-details { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; border: 0; padding: 8px; margin-top: 4px; background: transparent; font-size: 13px; text-decoration: underline; text-underline-offset: 4px; }
.privacy-dialog { width: min(680px,calc(100vw - 32px)); }
.privacy-dialog h3, #cookie-policy-excerpt h2 { font-size: 19px; line-height: 1.35; margin: 28px 0 12px; letter-spacing: -.03em; }
.privacy-dialog p:not(.eyebrow) { color: var(--muted); font-size: 14px; line-height: 1.7; }
.privacy-dialog .privacy-state { padding: 12px 16px; background: var(--soft); }
.privacy-dialog .cookie-actions { position: sticky; bottom: -1px; padding: 16px 0 0; background: var(--paper); }

@media (max-width:800px), (orientation:landscape) and (pointer:coarse) and (max-height:560px) {
  :root { --space: 52px; --gutter: 22px; }
  html { scroll-padding-top: 91px; }
  .home-page .hero-grid { min-height: 0; }
  .home-page .hero-visual { order: 0; left: auto; height: clamp(220px,36svh,360px); aspect-ratio: auto; }
  .home-page .hero-visual > img { object-position: 20% 55%; }
  .home-page .hero-visual::after { background: linear-gradient(180deg,#172020aa,transparent 48%,#23272833); }
  .home-page .hero-copy { order: 1; min-height: 0; width: calc(100% - var(--gutter) * 2); padding: 28px 0 38px; }
  .home-page .hero h1 { font-size: clamp(32px,9vw,62px); line-height: 1.1; }
  .home-page .hero .eyebrow { margin-bottom: 16px; font-size: 10px; max-width: none; }
  .home-page .hero-description { margin-top: 18px; font-size: 15px; line-height: 1.6; max-width: 42ch; }
  .hero-actions { margin-top: 22px; gap: 12px; flex-wrap: nowrap; }
  .hero-actions .button { padding-inline: 16px; font-size: 14px; min-height: 48px; }
  .hero-actions .text-link { gap: 6px; min-height: 48px; font-size: 14px; white-space: nowrap; }
  .hero-actions .desktop-label { display: none; }
  .hero-actions .mobile-label { display: inline; }
  .home-page .hero-footer { display: none; }
  .services .section-heading { margin-bottom: 24px; }
  .services h2 { font-size: clamp(29px,7.5vw,48px); }
  .services-layout { gap: 24px; }
  .service-selector { height: 408px; }
  .service-trigger { padding: 14px 0; grid-template-columns: 20px minmax(0,1fr) 44px; gap: 10px; }
  .service-title, .service-readout h3 { font-size: clamp(27px,6.9vw,36px); }
  .service-trigger .plus { width: 44px; height: 44px; }
  .service-trigger .plus::before, .service-trigger .plus::after { top: 21px; left: 15px; }
  .service-readout { padding: 0; }
  .service-back { margin-bottom: 14px; }
  .service-readout h3 { margin-bottom: 16px; }
  .service-readout .service-content p { font-size: 15px; line-height: 1.6; }
  .service-readout .service-content ul { padding-block: 14px; }
  .service-readout .service-content li { font-size: 14px; line-height: 1.5; margin-bottom: 6px; }
  .service-visual img { max-height: 350px; aspect-ratio: 16/10; }
  .work-stage { grid-template-columns: 1fr; gap: 24px; }
  .stage-copy { grid-column: 1; }
  .stage-visual { grid-column: 1; grid-row: 2; height: clamp(250px,65vw,420px); }
  .stage-navigation { grid-column: 1; grid-row: 3; }
  /* Short native travel, with the photograph and its caption on their own rows. */
  .js-scroll .gallery { height: calc(var(--stage-height) + 90svh); }
  .js-scroll .gallery-sticky { padding-block: 18px 24px; }
  .js-scroll .work-stage { grid-template-rows: auto minmax(0,1fr) auto; gap: 16px; }
  .js-scroll .stage-copy { grid-template-columns: 1fr; gap: 12px; }
  .js-scroll .stage-copy > .eyebrow { margin-bottom: 0; }
  .js-scroll .stage-copy h2 { display: block; font-size: clamp(32px,8.8vw,48px); }
  .js-scroll .stage-copy h2 .title-line { display: inline; width: auto; }
  .js-scroll .stage-copy h2 .title-line > span { display: inline; }
  .js-scroll .stage-copy h2 .title-line + .title-line::before { content: ' '; }
  .js-scroll .stage-description { grid-column: 1; gap: 12px; }
  .js-scroll #stage-index { font-size: 32px; }
  .js-scroll .stage-description h3 { font-size: 17px; line-height: 1.3; }
  .js-scroll .stage-description p { font-size: 13px; line-height: 1.4; }
  .stage-navigation, .js-scroll .stage-navigation { width: 100%; margin-right: 0; }
  .stage-navigation button, .js-scroll .stage-navigation button { min-height: 56px; font-size: 12px; padding: 8px 2px; }
  .stage-navigation button > span { font-size: 12px; }
  .gallery-sticky { padding-bottom: 84px; }
  /* The portrait follows the introduction, before the longer explanation. */
  .founder-grid { grid-template-columns: 1fr; gap: 24px; }
  .founder-copy { display: contents; }
  .founder-opening { display: block; grid-row: 1; }
  .founder-image { grid-row: 2; justify-self: start; width: min(100%,420px); max-width: none; }
  .founder-body { display: block; grid-row: 3; }
  .founder-body > p { margin-top: 0; }
  .founder-image img { aspect-ratio: 6/5; object-position: center 28%; }
  .founder-lead { margin-top: 18px; font-size: 19px; }
  .intro { padding-top: var(--space); }
  .experience { margin-block: 20px 12px; gap: 18px; }
  .experience-number { font-size: 56px; }
  .process .section-heading { margin-bottom: 30px; }
  .process-list { gap: 24px; }
  .process-list p { font-size: 15px; line-height: 1.6; }
  /* Topics and a stable answer are different from the services' index-to-detail. */
  .faq-intro { display: contents; }
  .faq { grid-template-columns: 1fr; gap: 22px; }
  .faq-heading { grid-row: 1; }
  .faq-heading > p:last-child { max-width: 42ch; margin-top: 16px; font-size: 15px; line-height: 1.6; }
  .faq-list { display: none; }
  .faq-topics { display: flex; flex-wrap: wrap; gap: 8px; grid-row: 2; align-content: start; }
  .faq-topics button { min-height: 44px; padding: 9px 13px; border: 1px solid #858e86; border-radius: 24px; background: transparent; font-size: 13px; line-height: 1.4; }
  .faq-topics button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
  .faq-readout { grid-row: 3; margin: 0; padding: 0; height: 320px; }
  .faq-readout h3 { font-size: 21px; margin-bottom: 14px; }
  .faq-readout p { font-size: 15px; line-height: 1.65; }
  /* Keep controls out of the persistent WhatsApp corner. */
  .faq { padding-bottom: 90px; }
  .contact-grid { gap: 28px; }
  .contact-copy > p:not(.eyebrow):not(.contact-region) { margin-top: 18px; font-size: 15px; line-height: 1.6; }
  .contact-links { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; margin-top: 22px; }
  .contact-choice-inline { display: none; }
  .contact-links .contact-whatsapp { grid-column: 1/-1; grid-row: 1; background: #25D366; color: var(--ink); padding: 14px 18px; min-height: 72px; }
  .contact-links .contact-whatsapp span { color: var(--ink); }
  .contact-links a > strong { font-size: 16px; line-height: 1.5; letter-spacing: -.025em; }
  .contact-links a { min-height: 54px; }
  .contact-links .contact-email > strong { font-size: 13px; }
  .contact-form { padding: 24px 20px; scroll-margin-top: 91px; }
  .form-intro { display: none; }
  .contact-preference { margin: 18px 0; }
  .field { margin-bottom: 16px; }
  .field label { margin-bottom: 6px; }
  .field textarea { min-height: 120px; }
  .email-field.is-optional { display: none; }
  .field-help { margin-bottom: 16px; line-height: 1.5; }
  .privacy-ack { gap: 8px; margin-block: 4px 10px; }
  .privacy-ack a { display: inline-flex; align-items: center; min-height: 44px; }
  .form-note { margin-bottom: 14px; font-size: 12px; }
  .preview-note { padding: 12px; margin-bottom: 14px; font-size: 12px; }
  .form-fallback a { display: inline-flex; align-items: center; min-height: 44px; }
  .site-footer { padding-top: 40px; }
  .footer-top { padding-bottom: 28px; gap: 20px; }
  .footer-grid { padding-block: 24px; gap: 22px 20px; }
  .footer-grid h3, .footer-grid > .footer-legal:last-child h3 { margin-bottom: 8px; }
  .footer-brand p { margin-top: 12px; }
  .footer-bottom { padding-block: 8px 24px; }
  .privacy-settings { order: 1; }
  .cookie-banner { left: 16px; bottom: max(84px,calc(env(safe-area-inset-bottom) + 76px)); width: calc(100% - 32px); max-height: calc(100dvh - 110px); padding: 20px; }
  .privacy-dialog { width: calc(100% - 24px); max-height: calc(100dvh - 24px); padding-inline: 22px; }
  .js-sequence .sequence-item { transition-duration: .35s,.48s; transition-delay: min(var(--sequence-delay,0ms),120ms); }
  .js-sequence .process-list .step-number { transition-duration: .4s; transition-delay: 0s; }
  .js-motion .reveal .title-line > span { transition-duration: .48s,.35s; transition-delay: .04s; }
  .js-motion .reveal .title-line:nth-child(2) > span { transition-delay: .1s; }
  .js-motion .photo-frame img { transition-duration: .7s; }
  .hero-copy > *, .hero-copy .title-line > span { animation-duration: .55s; }
  .js-motion .founder-opening, .js-motion .founder-body { opacity: 0; transition: opacity .4s var(--ease); }
  .js-motion .founder-copy.in .founder-opening, .js-motion .founder-copy.in .founder-body { opacity: 1; }
  .js-motion .contact-form.reveal { transition-duration: .4s,.5s; }
}
@media (max-width:360px) {
  :root { --gutter: 18px; }
  .service-selector { height: 444px; }
  .service-readout h3 { font-size: 27px; }
  .service-readout .service-content li { font-size: 13px; }
  .faq-readout { height: 380px; }
  .cookie-banner { padding: 16px; }
}
/* Short landscape phones keep a usable menu and an unpinned photograph. */
@media (orientation:landscape) and (pointer:coarse) and (max-height:560px) {
  :root { --header-height: 75px; }
  .header-inner { height: 75px; }
  .menu-toggle { display: inline-flex; align-items: center; gap: 14px; min-width: 44px; min-height: 44px; border: 0; background: none; padding: 8px; }
  .menu-lines { display: block; position: relative; width: 22px; height: 16px; }
  .menu-lines::before, .menu-lines::after { content: ''; position: absolute; left: 0; top: 3px; width: 22px; height: 1px; background: currentColor; }
  .menu-lines::after { top: 11px; }
  .navigation { display: none; position: absolute; top: 75px; inset-inline: 0; padding: 12px var(--gutter); background: var(--paper); color: var(--ink); max-height: calc(100dvh - 75px); overflow: auto; flex-direction: column; align-items: stretch; gap: 4px; }
  .navigation.is-open { display: flex; }
  .home-page .hero-grid { min-height: 600px; }
  .home-page .hero-copy { min-height: 600px; padding-block: 112px 64px; }
  .cookie-banner { bottom: 16px; width: min(430px,calc(100% - 100px)); max-height: calc(100dvh - 32px); }
}
html[data-motion="reduced"] .js-motion .founder-opening, html[data-motion="reduced"] .js-motion .founder-body { opacity: 1; }
@media print { .cookie-banner,.privacy-dialog,.privacy-settings { display: none!important; } }
@media (max-width:800px), (orientation:landscape) and (pointer:coarse) and (max-height:560px) {
  .js-motion .founder-opening.in, .js-motion .founder-body.in { opacity: 1; }
}
@media (max-width:800px), (orientation:landscape) and (pointer:coarse) and (max-height:560px) {
  .js-motion .founder-opening.in .title-line > span { opacity: 1; transform: none; }
  .contact-links a.contact-whatsapp { grid-column: 1/-1; grid-row: 1; }
  .js-scroll .gallery-sticky { padding-bottom: max(84px,calc(env(safe-area-inset-bottom) + 76px)); }
}
@media (min-width:801px) and (orientation:landscape) and (pointer:coarse) and (max-height:560px) {
  .home-page .hero-grid { display: block; min-height: 480px; }
  .home-page .hero-visual { position: absolute; inset: 0 auto 0 0; width: 44%; height: 100%; }
  .home-page .hero-visual > img { object-position: 20% center; }
  .home-page .hero-visual::after { background: linear-gradient(180deg,#17202088,transparent 40%),linear-gradient(90deg,transparent 75%,#232728); }
  .home-page .hero-copy { margin-left: calc(44% + 24px); width: calc(56% - 48px); min-height: 480px; padding: 100px 0 32px; }
  .home-page .hero h1 { font-size: clamp(32px,5vw,44px); }
}

/* V14: centre the mobile hero as one balanced text composition. */
@media (max-width:800px), (orientation:landscape) and (pointer:coarse) and (max-height:560px) {
  .home-page .hero-copy { align-items: center; text-align: center; }
  .home-page .hero .eyebrow { justify-content: center; }
  .home-page .hero h1 { width: 100%; align-items: center; text-align: center; }
  .home-page .hero-description { margin-inline: auto; }
  .home-page .hero-actions { width: 100%; justify-content: center; }
}

/* Shared structural helpers; the mobile experience is in mobile.css. */
.brand-icon, .faq-mobile { display: none; }
.gallery-track { display: contents; }
.arrow-icon { width: 20px; height: 20px; flex: none; }
.founder-image figcaption { display: grid; gap: 3px; }
.founder-image figcaption strong { color: var(--ink); font-weight: 650; }

/* Desktop consent: a wider, compact panel centered above the lower edge. */
@media (min-width: 801px) and (min-height: 561px), (min-width: 801px) and (pointer: fine) {
  .cookie-banner {
    left: 50%; bottom: 24px; transform: translateX(-50%);
    width: min(680px, calc(100% - 64px)); padding: 24px;
    display: grid; grid-template-columns: minmax(0,1fr) 220px; gap: 10px 24px;
  }
  .cookie-banner .eyebrow { display: none; }
  .cookie-banner h2 { grid-column: 1; grid-row: 1; align-self: center; font-size: 23px; line-height: 1.3; margin: 0; }
  .cookie-banner > p:not(.eyebrow) { grid-column: 1; grid-row: 2; margin: 0; font-size: 13px; line-height: 1.65; }
  .cookie-banner .cookie-actions { grid-column: 2; grid-row: 1; margin: 0; align-self: center; }
  .cookie-banner .cookie-actions button { font-size: 13px; min-height: 48px; }
  .cookie-banner .cookie-details { grid-column: 2; grid-row: 2; align-self: start; justify-self: center; margin: 0; min-height: 44px; font-size: 12px; }
}

/* V17: round the interactive controls, with generous corners on larger surfaces. */
button, .button, .channel-options span { border-radius: 999px; }
.contact-choice-grid > *, .gallery-card { border-radius: 24px; }
.contact-choice-grid > *, .gallery-card { overflow: hidden; }
.service-trigger, .faq-trigger { border-radius: 20px; }
.service-trigger .plus { border-radius: 50%; }
.service-back { padding-inline: 14px; background: var(--soft); }
.footer-bottom { flex-direction: column; align-items: flex-start; gap: 4px; padding-block: 12px 20px; }
.footer-copyright { color: var(--paper); }
.footer-company { font-size: 11px; }
.legal-cookie-settings { display: inline-flex; align-items: center; justify-content: center; gap: 12px; margin-block: 16px; padding: 12px 22px; min-height: 48px; background: var(--ink); color: var(--paper); border: 0; font-weight: 650; }
.legal-cookie-settings:hover { background: #424b47; }

/* V18: each work study reads as a photograph with a chapter caption. */
.stage-visual { border-radius: 24px; isolation: isolate; }
.stage-visual::after { content: ''; position: absolute; inset: 36% 0 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg,rgba(20,25,23,0),rgba(20,25,23,.74) 50%,rgba(20,25,23,.96)); }
.stage-visual .stage-description { position: absolute; z-index: 3; left: 28px; right: 92px; bottom: 28px; display: flex; gap: 20px; align-items: center; min-height: 0; margin: 0; pointer-events: none; text-align: left; }
.stage-number { display: flex; flex-direction: column; flex: none; align-items: center; gap: 5px; }
.stage-total { color: #e6ebe6; font-size: 11px; letter-spacing: .06em; }
.stage-visual #stage-index { font-size: 52px; }
.stage-visual .stage-description h3 { color: #f8f8f5; font-size: clamp(20px,2.1vw,30px); letter-spacing: -.035em; line-height: 1.2; }
.stage-visual .stage-description p { color: #e6ebe6; font-size: 13px; line-height: 1.5; margin-top: 6px; }
.stage-visual .detail-view-toggle, .stage-visual .image-expand { z-index: 4; }
.stage-navigation::after { display: none; }
.stage-navigation button { background: transparent; color: var(--light-muted); }
.stage-navigation button[aria-pressed="true"], .stage-navigation button[aria-pressed="true"]:hover { background: transparent; color: var(--accent); }
.stage-navigation button > span { font-size: 24px; font-weight: 500; }
.stage-navigation button::after { content: ''; height: 3px; width: 20px; background: var(--accent); border-radius: 2px; position: absolute; bottom: 4px; left: calc(50% - 10px); transform: scaleX(0); transition: transform .3s var(--ease); }
.stage-navigation button[aria-pressed="true"]::after { transform: scaleX(1); }

/* V19: one uninterrupted photographic composition, distinct from the service index. */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.gallery .work-stage { display: block; height: auto; max-height: none; }
.gallery .stage-visual { grid-area: auto; height: auto; clip-path: none; border-radius: 26px; }
.gallery .gallery-track { display: grid; gap: 24px; height: auto; overflow: visible; }
.gallery .gallery-card { position: relative; height: auto; overflow: hidden; cursor: default; border-radius: 26px; }
.gallery .gallery-image { display: block; height: clamp(360px, 52vw, 720px); }
.gallery .gallery-image > img { width: 100%; height: 100%; object-fit: cover; transform: none; }
.gallery .gallery-card:hover img { transform: none; }
.gallery .stage-description, .gallery .stage-visual::after { display: none; }
.gallery .gallery-caption { position: absolute; inset: auto 0 0; display: grid; gap: 4px; margin: 0; padding: 54px 28px 28px; background: linear-gradient(transparent, #141917e8); }
.gallery .gallery-caption strong { color: var(--paper); font-size: 24px; }
.gallery .gallery-caption > span { color: #e6ebe6; text-align: left; }
:is(.js-scroll,.js-mobile-studies) .gallery .work-stage { height: 100%; max-height: none; }
:is(.js-scroll,.js-mobile-studies) .gallery .stage-visual { height: 100%; }
:is(.js-scroll,.js-mobile-studies) .gallery .gallery-track { display: block; position: relative; height: 100%; overflow: hidden; }
:is(.js-scroll,.js-mobile-studies) .gallery .gallery-card { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
:is(.js-scroll,.js-mobile-studies) .gallery .gallery-image { height: 100%; }
:is(.js-scroll,.js-mobile-studies) .gallery .gallery-caption { display: none; }
:is(.js-scroll,.js-mobile-studies) .gallery .stage-visual::after { display: block; z-index: 3; inset-block-start: 52%; }
:is(.js-scroll,.js-mobile-studies) .gallery .stage-description { display: flex; z-index: 4; left: 40px; right: 80px; bottom: 36px; }
:is(.js-scroll,.js-mobile-studies) .gallery .stage-description h3 { font-size: clamp(24px, 3vw, 42px); }
:is(.js-scroll,.js-mobile-studies) .gallery .stage-description p { font-size: 15px; }

/* A rounded portrait arriving from the right, with quieter accompanying text. */
.intro .founder-image .photo-frame, .intro .founder-image img { clip-path: none; border-radius: 26px; }
.intro .experience { clip-path: none; border-radius: 24px; background: var(--soft); padding: 24px; }
.js-motion .intro .founder-image.reveal { opacity: 0; transform: translateX(56px) scale(.98); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.js-motion .intro .founder-image.reveal.in { opacity: 1; transform: translateX(0) scale(1); }
.js-motion .intro .founder-copy.reveal { opacity: 0; transform: translateX(-18px); transition: opacity .85s var(--ease), transform .85s var(--ease); }
.js-motion .intro .founder-copy.reveal.in { opacity: 1; transform: none; }

/* FAQ questions arrive as a quiet rhythm, without moving the entire section. */
.js-motion .faq .faq-list.reveal { opacity: 1; transform: none; transition: none; }
.js-motion .faq .faq-trigger { opacity: 0; transform: translateY(12px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js-motion .faq .faq-list.in .faq-trigger { opacity: 1; transform: none; }
.js-motion .faq .faq-trigger:nth-child(2) { transition-delay: 70ms; }
.js-motion .faq .faq-trigger:nth-child(3) { transition-delay: 140ms; }
.js-motion .faq .faq-trigger:nth-child(4) { transition-delay: 210ms; }
.js-motion .faq .faq-trigger:nth-child(5) { transition-delay: 280ms; }
.js-motion .faq .faq-trigger.entrance-finished { transition-delay: 0ms; }
.js-motion .faq .faq-answer { opacity: 0; transform: translateY(10px); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: var(--faq-delay, 0ms); }
.js-motion .faq .faq-answer.in { opacity: 1; transform: none; }
.js-motion .faq .faq-answer.entrance-finished { transition-delay: 0ms; }
html[data-motion="reduced"] .intro .founder-image, html[data-motion="reduced"] .intro .founder-copy, html[data-motion="reduced"] .faq .faq-trigger, html[data-motion="reduced"] .faq .faq-answer { opacity: 1; transform: none; transition: none; transition-delay: 0ms; }
@media print { .gallery .gallery-card { opacity: 1 !important; position: relative !important; } }

/* Desktop: a full-width rounded bar with written navigation and a right-hand CTA. */
@media screen and (min-width: 801px) and (min-height: 561px), screen and (min-width: 801px) and (pointer: fine) {
  .site-header, .home-page .site-header.is-scrolled,
  .home-page .site-header:has(.navigation.is-open) {
    position: fixed; top: 0; left: 0; right: 0; background: transparent; border: 0;
  }
  .header-inner {
    position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr);
    column-gap: clamp(20px, 2.2vw, 32px); transition: background .25s, box-shadow .25s;
  }
  .site-header .brand { width: clamp(200px, 21vw, 300px); }
  .site-header.is-scrolled .header-inner,
  body:not(.home-page) .header-inner {
    width: calc(100% - var(--gutter) * 2); max-width: 1328px; margin: 12px auto 0;
    height: 76px; padding: 14px 24px; border-radius: 40px;
    background: var(--paper); color: var(--ink); box-shadow: 0 4px 24px #17202012;
  }
  .site-header.is-scrolled .brand,
  body:not(.home-page) .brand { width: 48px; height: 48px; display: grid; place-items: center; }
  .site-header.is-scrolled .brand-dark, .site-header.is-scrolled .brand-light,
  body:not(.home-page) .brand-dark, body:not(.home-page) .brand-light { display: none; }
  .site-header.is-scrolled .brand-icon,
  body:not(.home-page) .brand-icon { display: block; position: static; width: 42px; height: 42px; opacity: 1; }
  .site-header .menu-toggle { display: none; }
  .site-header .navigation, .site-header .navigation.is-open {
    display: grid; grid-template-columns: minmax(0, 1fr) repeat(5, auto) minmax(0, 1fr) auto;
    align-items: center; column-gap: clamp(12px, 1.7vw, 24px);
    position: static; padding: 0; border: 0; background: transparent; box-shadow: none;
  }
  .site-header .navigation > a:nth-child(1) { grid-column: 2; }
  .site-header .navigation > a:nth-child(2) { grid-column: 3; }
  .site-header .navigation > a:nth-child(3) { grid-column: 4; }
  .site-header .navigation > a:nth-child(4) { grid-column: 5; }
  .site-header .navigation > a:nth-child(5) { grid-column: 6; }
  .site-header .navigation > a:nth-child(6) { grid-column: 8; }
  .site-header .navigation > a:not(.button) {
    font-size: clamp(13px, 1vw, 15px); min-height: 48px; padding: 0; white-space: nowrap;
  }
  .site-header .navigation .button { margin: 0; min-height: 48px; padding: 12px 22px; font-size: 14px; white-space: nowrap; }
  .legal-main { padding-top: 116px; }
}