@font-face { font-family:Inter;src:url('/fonts/inter-hero-variable.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap }
:root { --teal:#115e59;--aqua:#14b8a6;--ink:#103f38;--muted:#4d6a61;--paper:#fff;--gutter:clamp(24px,6.1vw,100px) }
* { box-sizing:border-box }
html { scroll-behavior:smooth;scroll-padding-top:95px }
body { margin:0;background:var(--teal);color:var(--ink);font:400 15px/1.7 Inter,Arial,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip }
a { color:inherit;text-decoration:none }
button, input, textarea { font:inherit }
button { cursor:pointer;color:inherit }
a, button { -webkit-tap-highlight-color:transparent }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible { outline:3px solid var(--aqua);outline-offset:5px }
img, svg, video { display:block;max-width:100% }
h1, h2, h3, p, figure { margin:0 }
h1, h2, h3 { text-wrap:balance;word-break:normal;overflow-wrap:normal }
em { font:inherit;color:var(--aqua) }
[hidden] { display:none!important }
::selection { background:#14b8a6;color:#073e37 }
.wrap { width:min(100%,1510px);padding-inline:var(--gutter);margin-inline:auto }
main, .flow-footer { position:relative;z-index:2 }
.paper-section, .paper-flow { position:relative;background:white }
.paper-flow:before { content:"";position:absolute;left:0;right:0;bottom:calc(100% - 1px);height:190px;background:linear-gradient(0deg,#fff,rgba(255,255,255,.75) 38%,transparent);pointer-events:none }
.eyebrow { font-size:9px;line-height:1.7;font-weight:650;letter-spacing:.12em;text-transform:uppercase }
h2 { font-size:clamp(37px,5.05vw,78px);line-height:1.1;letter-spacing:-.045em;font-weight:600 }
h3 { font-weight:600;letter-spacing:-.025em }
.text-link { display:inline-flex;align-items:center;gap:32px;min-height:44px;padding-block:8px;font-size:12px;font-weight:550 }
.text-link>span { font-size:24px;line-height:1;transition:transform .25s }
.text-link:hover>span { transform:translate(3px,-3px) }
.button { display:inline-flex;align-items:center;justify-content:space-between;gap:27px;padding:14px 22px;min-height:49px;border:1px solid transparent;border-radius:5px;font-size:13px;font-weight:600;line-height:1.4;transition:background .25s,transform .25s }
.button>span { font-size:23px;line-height:1 }
.button:hover { transform:translateY(-2px) }
.button--aqua { background:#9cebdc;border-color:#9cebdc;color:#073e37 }
.button--aqua:hover { background:white }
.button--teal { background:var(--teal);color:white }
.button--teal:hover { background:#0b4a45 }
.skip-link { position:fixed;top:12px;left:20px;z-index:100;background:#fff;color:var(--teal);padding:12px 18px;transform:translateY(-150%);border-radius:4px }
.skip-link:focus { transform:none }
.film-stage { position:fixed;inset:0;z-index:0;background:#0c4f49;pointer-events:none }
.film-scene { position:absolute;inset:0;opacity:0;transition:opacity 1.4s ease;background:var(--poster) center/cover no-repeat }
.film-scene.is-active { opacity:1 }
.film-scene video { width:100%;height:100%;object-fit:cover;filter:saturate(.66);transform:scale(1.025) }
.film-scene[data-film=design] video { object-position:50% 55% }
.film-scene[data-film=planning] video { object-position:52% center }
.stage-vignette { position:absolute;inset:0;background:linear-gradient(90deg,#073b35db,#0b4a4196 55%,#0e4c4554),linear-gradient(0deg,#083e3659,transparent 70%) }
.reading-progress { position:fixed;left:0;top:0;height:2px;width:100%;background:var(--aqua);transform:scaleX(0);transform-origin:left;z-index:80;pointer-events:none }
.film-control { position:fixed;z-index:55;right:25px;bottom:22px;display:flex;align-items:center;gap:9px;min-height:42px;padding:10px 15px;background:#0a4942e8;color:#fff;border:1px solid #9cebdc66;border-radius:30px;box-shadow:0 4px 20px #073e3720;font-size:10px;line-height:1.5;backdrop-filter:blur(14px) }
.film-control.needs-tap { background:#f2fff9;color:#0c5148;border-color:var(--aqua) }
.film-icon { font-size:10px;min-width:12px;text-align:center }
body:has(dialog[open]), body.is-modal-open, body.nav-open { overflow:hidden }
body:has(dialog[open]) .film-control { visibility:hidden }
.flow-header { position:fixed;inset:0 0 auto;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:25px;min-height:91px;padding-inline:var(--gutter);color:#fff;background:linear-gradient(180deg,#063e3429,transparent);transition:color .35s,background .35s }
.flow-header[data-surface=light] { color:var(--ink);background:#fffffff0;backdrop-filter:blur(16px) }
.flow-brand { position:relative;z-index:2;display:inline-flex;min-height:44px;align-items:center;flex-shrink:0 }
.flow-brand>img { width:215px;height:auto }
.brand-on-light { display:none }
.flow-header[data-surface=light] .brand-on-dark { display:none }
.flow-header[data-surface=light] .brand-on-light { display:block }
.flow-nav { display:flex;align-items:center;gap:30px;font-size:11px;font-weight:450 }
.flow-nav>a { padding-block:12px }
.flow-nav>a:hover { text-decoration:underline;text-underline-offset:6px }
.flow-nav .nav-contact { display:flex;gap:21px;align-items:center;margin-left:6px;border-bottom:1px solid currentColor;padding-block:8px }
.nav-contact>span { font-size:20px;line-height:1 }
.flow-menu-toggle { display:none }
.flow-intro { padding-top:85px;padding-bottom:0 }
.word-river { overflow:hidden;margin-top:70px;padding-bottom:38px;color:#d8eee3;font-size:clamp(80px,12.5vw,190px);line-height:1.05;letter-spacing:-.065em;white-space:nowrap }
.word-river-inner { width:max-content;position:relative;left:3vw }
.word-river i { font-style:normal;color:#a3ddcd }
.flow-work { position:relative;padding-top:85px;padding-bottom:100px;background:#14b8a6;color:#063e35 }
.work-heading { display:grid;grid-template-columns:1.4fr 1fr;gap:80px;align-items:end;padding-bottom:38px }
.work-heading .section-number { color:#0c5044 }
.work-heading h2 { font-size:clamp(36px,4.5vw,66px);font-weight:600;letter-spacing:-.045em }
.work-heading h2 em { color:#0c5146 }
.work-heading>p { font-size:13px;line-height:1.9;max-width:390px;justify-self:end;padding-bottom:4px }
.work-edge { position:absolute;left:0;bottom:-1px;width:100%;height:50px;pointer-events:none }
.flow-work .portfolio-footnote { max-width:700px }
.portfolio-load-status { font-size:12px;margin-top:15px }
.flow-services { padding-top:85px;padding-bottom:120px }
.services-heading { display:grid;grid-template-columns:1.45fr 1fr;gap:80px;align-items:end;margin-bottom:65px }
.services-heading h2 { font-size:clamp(37px,4.5vw,66px) }
.services-heading em { color:#238c7b }
.services-heading>p { font-size:13px;line-height:1.9;max-width:340px;justify-self:end;padding-bottom:4px }
.services-layout { display:grid;grid-template-columns:42% 58%;align-items:center;gap:0 }
.service-film { height:515px;width:82%;max-width:425px;position:relative;margin:0 auto 0 0;transform:rotate(-4deg) }
.service-film>video { width:100%;height:100%;object-fit:cover;object-position:67% center;border-radius:45% 55% 49% 51% / 41% 40% 60% 59%;filter:saturate(.7) }
.media-caption { position:absolute;bottom:-28px;left:0;right:0;text-align:center;font-size:11px;letter-spacing:0;color:#527266 }
.services-list { padding-left:35px }
.service-row { display:grid;grid-template-columns:28px 1fr 27px;gap:24px;align-items:start;padding:26px 0 }
.service-row>span:first-child { font-size:8px;color:#327f70;padding-top:9px;letter-spacing:.06em }
.service-row>span:last-child { font-size:25px;line-height:1;padding-top:5px;color:#58a58e }
.service-row h3 { font-size:clamp(23px,2.15vw,32px);font-weight:550;letter-spacing:-.04em;line-height:1.2 }
.service-row p { font-size:12px;color:var(--muted);line-height:1.9;max-width:420px;margin-top:12px }
.film-bridge { height:190px;position:relative;background:linear-gradient(180deg,#fff,#ffffffa6 30%,transparent);pointer-events:none }
.film-window { position:relative;color:#fff }
.film-window .section-number { color:#b2e5d6 }
.film-window h2 em { color:#b1edda }
.flow-craft { min-height:800px;min-height:95svh;display:flex;align-items:center;padding-block:95px 150px;overflow:hidden }
.craft-grid { position:relative;display:grid;grid-template-columns:1fr .7fr;gap:50px;align-items:center }
.craft-grid h2 { font-size:clamp(48px,6.4vw,94px);line-height:1.08;max-width:900px }
.cinema-copy { font-size:14px;line-height:1.9;color:#e0eee6;max-width:395px;margin-top:32px }
.craft-grid .text-link { margin-top:25px }
.craft-word { position:absolute;bottom:-40px;right:-14px;font-size:clamp(90px,15vw,225px);line-height:1;letter-spacing:-.065em;color:#a6f1d41a;font-weight:550;white-space:nowrap;pointer-events:none }
.flow-process { min-height:950px;padding-top:115px;padding-bottom:180px }
.process-heading h2 { font-size:clamp(47px,5.8vw,85px);max-width:1000px }
.process-list { margin:70px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:40px }
.process-list li { min-width:0 }
.process-number { display:block;padding-bottom:24px;border-bottom:1px solid #a4e0cb55;font-size:45px;font-weight:500;letter-spacing:-.055em;line-height:1.1;color:#b1edda }
.process-list h3 { font-size:21px;line-height:1.3;margin-top:25px;font-weight:550 }
.process-list p { font-size:12px;line-height:1.9;max-width:250px;margin-top:13px;color:#e1eee5 }
.flow-about { padding-top:110px;padding-bottom:75px }
.about-grid { display:grid;grid-template-columns:45% 55%;align-items:center;gap:0 }
.about-figure { position:relative;padding-right:70px;transform:rotate(-3deg) }
.about-portrait { height:540px;overflow:hidden;border-radius:47% 53% 43% 57% / 48% 42% 58% 52%;background:#d8eee2 }
.about-portrait img { width:100%;height:100%;object-fit:cover;object-position:53% center }
.about-figure figcaption { display:flex;flex-direction:column;gap:5px;margin-top:27px;text-align:center }
.about-figure figcaption strong { font-size:17px;font-weight:600;letter-spacing:-.02em }
.about-figure figcaption>span { font-size:9px;color:#527265;letter-spacing:.03em }
.about-copy { padding:15px 0 15px 15px }
.about-copy h2 { font-size:clamp(36px,4.3vw,63px);margin-bottom:30px }
.about-copy em { color:#238c7b }
.about-copy>p:not(.section-number) { font-size:13px;line-height:1.95;max-width:555px;margin-top:18px;color:var(--muted) }
.about-copy .text-link { margin-top:25px }
.flow-faq { padding-top:60px;padding-bottom:110px }
.faq-grid { display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:start }
.faq-grid h2 { font-size:clamp(39px,4.3vw,65px) }
.faq-grid em { color:#238c7b }
.faq-grid .text-link { margin-top:28px }
.faq-list { padding-top:4px }
.faq-list details { margin-bottom:8px;border-bottom:1px solid #115e592b }
.faq-list summary { display:flex;align-items:center;justify-content:space-between;gap:24px;list-style:none;cursor:pointer;font-size:15px;font-weight:550;letter-spacing:-.015em;line-height:1.6;padding-block:18px;min-height:65px }
.faq-list summary::-webkit-details-marker { display:none }
.faq-list summary>span { font-size:24px;line-height:1;font-weight:300;color:#337f6c;flex-shrink:0;transition:transform .25s }
.faq-list details[open] summary>span { transform:rotate(45deg) }
.faq-list details>p { font-size:12px;line-height:1.9;max-width:495px;padding:0 25px 25px 0;color:var(--muted) }
.flow-contact { padding-top:90px;padding-bottom:120px;min-height:780px;display:flex;align-items:center }
.contact-grid { display:grid;grid-template-columns:1fr 1fr;gap:95px;align-items:center }
.contact-grid h2 { font-size:clamp(49px,6.2vw,89px);line-height:1.08 }
.contact-grid>div>p:not(.section-number) { font-size:13px;line-height:1.9;color:#e0eee6;max-width:340px;margin-top:27px }
.contact-form-panel { background:#fff;color:var(--ink);padding:37px 32px;border-radius:29px 7px 29px 7px;box-shadow:0 15px 60px #063c3926 }
.project-form { display:grid;gap:20px }
.form-pair { display:grid;grid-template-columns:1fr 1fr;gap:17px }
.project-form label { display:block;font-size:10px;font-weight:500;line-height:1.6 }
.project-form label>span { color:#2c8e79 }
.project-form input, .project-form textarea { display:block;width:100%;min-width:0;min-height:44px;margin-top:7px;padding:11px 12px;border:1px solid #115e5933;background:#f6faf7;color:#103f38;border-radius:4px;font-size:12px;font-weight:400;line-height:1.6;resize:vertical }
.project-form textarea { min-height:124px }
.project-form input::placeholder, .project-form textarea::placeholder { color:#627d70;opacity:1 }
.project-form .form-note { font-size:10px;font-weight:400;line-height:1.8;color:#527064 }
.project-form>.button { width:100%;font-size:12px;min-height:48px }
.inquiry-result { background:#e9f7ee;border:1px solid #89cbb4;padding:15px;font-size:11px;line-height:1.7 }
.inquiry-result strong { font-weight:600;display:block }
.inquiry-result button { display:inline-flex;gap:16px;align-items:center;border:0;border-bottom:1px solid currentColor;background:none;padding:6px 0;margin-top:5px;font-size:11px;min-height:38px }
.flow-footer { background:white;color:var(--ink);padding-top:80px;padding-bottom:85px }
.footer-top { display:flex;align-items:end;justify-content:space-between;gap:35px }
.footer-statement { font-size:clamp(26px,3vw,44px);line-height:1.14;font-weight:550;letter-spacing:-.035em;margin-top:23px }
.footer-statement em { color:#238c7b }
.footer-signature { display:block;margin-block:75px 45px }
.footer-signature>img { width:100%;height:auto;max-height:230px;object-fit:contain;object-position:left center }
.footer-bottom { border-top:1px solid #115e5933;padding-top:25px;display:flex;justify-content:space-between;align-items:start;gap:30px;font-size:9px;line-height:1.8;color:#527265 }
.footer-bottom nav { display:flex;align-items:start;gap:25px }
.footer-bottom button { border:0;background:none;padding:0;color:inherit;font-size:9px;line-height:1.8 }
.media-credits { max-width:270px }
.media-credits summary { cursor:pointer;list-style:none }
.media-credits summary::-webkit-details-marker { display:none }
.media-credits p { font-size:9px;line-height:1.9;margin-top:15px;letter-spacing:0 }
.media-credits a { text-decoration:underline;text-underline-offset:3px }
.legal-dialog { width:min(560px,calc(100vw - 36px));border:0;border-radius:15px;background:#fff;color:var(--ink);padding:30px;box-shadow:0 25px 90px #002d2977 }
.legal-dialog::backdrop { background:#052e28b3;backdrop-filter:blur(8px) }
.dialog-top { display:flex;justify-content:space-between;gap:25px;align-items:start }
.legal-dialog h2 { font-size:29px;line-height:1.2 }
.dialog-close { width:39px;height:39px;border:1px solid #115e5933;border-radius:50%;display:grid;place-items:center;background:white;font-size:25px;line-height:1;flex-shrink:0 }
.legal-dialog>p { font-size:14px;line-height:1.9;margin-top:25px }
.eyebrow { margin:0 }
.study-viewer-bottom .button { font-size:13px;gap:17px }

/* Clear hierarchy: one headline, one explanation and one primary action. */
.section-number { color:#327f70; margin-bottom:20px; font-size:13px; font-weight:500; line-height:1.6; letter-spacing:0; text-transform:none }
.flow-header[data-scrolled=true] { background:#0b4a45 }
.flow-header[data-surface=light] { background:#fff }
.flow-hero { position:relative; display:flex; align-items:center; min-height:clamp(740px,88svh,960px); padding-block:135px 155px; color:white; overflow:clip }
.hero-grid { display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); align-items:center; gap:clamp(38px,5vw,82px) }
.hero-copy { position:relative; min-width:0; max-width:560px }
.flow-hero h1 { font-size:clamp(62px,6.4vw,98px); font-weight:600; line-height:1.02; letter-spacing:-.055em }
.flow-hero h1>span { display:block }
.flow-hero h1>.hero-subline { max-width:530px; margin-top:22px; font-size:.66em; line-height:1.15; letter-spacing:-.04em }
.hero-subline>em { color:#a2eadb }
.hero-description { max-width:460px; margin-top:28px; color:#e2eee8; font-size:16px; line-height:1.8 }
.hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:28px; margin-top:30px }
.flow-hero .button { min-height:52px; font-size:14px }
.hero-secondary { display:inline-flex; align-items:center; gap:16px; min-height:44px; border-bottom:1px solid #ffffff6e; font-size:14px }
.hero-secondary>span { font-size:20px }
.intro-grid { display:grid; grid-template-columns:1.2fr 1fr; align-items:end; gap:clamp(45px,8vw,130px) }
.intro-grid h2 { max-width:800px; font-size:clamp(43px,5.7vw,85px) }
.intro-grid h2 em { color:#238c7b }
.intro-bottom { max-width:490px; padding-bottom:7px }
.intro-bottom>p { font-size:15px; line-height:1.85 }
.footer-statement { margin-top:0 }

@media(max-width:1100px) {
  .flow-nav { gap:21px;font-size:10px }
  .flow-brand>img { width:185px }
  .work-heading, .services-heading { gap:45px }
  .services-layout { grid-template-columns:40% 60% }
  .service-film { height:455px;width:86% }
  .services-list { padding-left:25px }
  .service-row { gap:15px;grid-template-columns:20px 1fr 23px }
  .service-row h3 { font-size:25px }
  .process-list { gap:26px }
  .process-list h3 { font-size:19px }
  .about-figure { padding-right:40px }
  .about-portrait { height:470px }
  .faq-grid { gap:60px }
  .contact-grid { gap:50px }
  .contact-form-panel { padding:30px 25px }
}
@media(max-width:800px) {
  .flow-header { min-height:80px }
  .flow-brand>img { width:170px }
  .flow-nav { gap:16px;font-size:9px }
  .flow-nav .nav-contact { gap:11px;margin-left:0 }
  .work-heading { grid-template-columns:1fr;gap:25px }
  .work-heading>p { justify-self:start;max-width:550px }
  .services-heading { grid-template-columns:1fr;gap:28px }
  .services-heading>p { justify-self:start;max-width:490px }
  .service-film { height:390px;width:85% }
  .services-list { padding-left:18px }
  .service-row { padding-block:23px;gap:12px;grid-template-columns:17px 1fr 20px }
  .service-row h3 { font-size:22px }
  .service-row p { font-size:11px }
  .craft-grid { grid-template-columns:1fr;gap:20px }
  .craft-grid h2 { font-size:68px }
  .cinema-copy { font-size:13px }
  .flow-craft { min-height:750px }
  .flow-process { padding-top:95px;min-height:1000px }
  .process-heading h2 { font-size:62px }
  .process-list { grid-template-columns:1fr 1fr;gap:36px 38px;margin-top:50px }
  .process-number { font-size:36px;padding-bottom:16px }
  .process-list h3 { font-size:20px;margin-top:21px }
  .process-list p { font-size:12px;max-width:280px }
  .about-grid { grid-template-columns:42% 58%;align-items:start }
  .about-figure { padding-right:30px;padding-top:25px }
  .about-portrait { height:370px }
  .about-copy { padding-left:8px }
  .about-copy h2 { font-size:39px }
  .about-copy>p:not(.section-number) { font-size:12px }
  .about-figure figcaption strong { font-size:15px }
  .about-figure figcaption>span { font-size:8px }
  .faq-grid { grid-template-columns:1fr;gap:36px }
  .faq-grid h2 { font-size:53px }
  .faq-list summary { font-size:15px }
  .contact-grid { grid-template-columns:1fr;gap:45px }
  .contact-grid h2 { font-size:71px }
  .contact-grid>div>p:not(.section-number) { max-width:450px }
  .contact-form-panel { max-width:650px;width:100%;padding:35px }
  .flow-contact { padding-block:65px 95px }
  .footer-bottom { flex-direction:column;gap:23px }
  .footer-bottom nav { flex-wrap:wrap;gap:24px }
  .media-credits { max-width:420px }
  .footer-signature { margin-top:60px }
  .intro-grid { grid-template-columns:1fr; gap:28px }
}
@media(max-width:640px) {
  :root { --gutter:24px }
  html { scroll-padding-top:80px }
  .flow-header { min-height:77px;padding-inline:24px }
  .flow-brand>img { width:178px }
  .flow-menu-toggle { display:flex;position:relative;z-index:2;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-width:42px;min-height:42px;border:1px solid #ffffff61;border-radius:4px;background:transparent;color:inherit }
  .flow-menu-toggle>span { height:1px;width:23px;background:currentColor;transition:transform .25s }
  .flow-header[data-surface=light] .flow-menu-toggle { border-color:#115e5955 }
  .flow-menu-toggle[aria-expanded=true]>span:first-child { transform:translateY(3.5px) rotate(45deg) }
  .flow-menu-toggle[aria-expanded=true]>span:last-child { transform:translateY(-3.5px) rotate(-45deg) }
  .flow-nav { position:absolute;left:0;right:0;top:0;display:flex;flex-direction:column;align-items:start;gap:13px;padding:107px 26px 35px;background:white;color:var(--teal);visibility:hidden;opacity:0;transform:translateY(-12px);transition:visibility .25s,opacity .25s,transform .25s;box-shadow:0 25px 40px #0c49341a;font-size:15px }
  .nav-open .flow-nav { visibility:visible;opacity:1;transform:none }
  .nav-open .flow-header { background:white;color:var(--teal) }
  .nav-open .brand-on-dark { display:none }
  .nav-open .brand-on-light { display:block }
  .nav-open .flow-menu-toggle { border-color:#115e5955 }
  .flow-nav>a { min-height:43px;padding-block:8px }
  .flow-nav .nav-contact { margin-top:12px;gap:28px }
  .film-control { min-height:39px;font-size:9px;right:16px;bottom:16px;padding:9px 12px;gap:7px }
  .film-icon { font-size:9px }
  .paper-flow:before { height:140px }
  .flow-intro { padding-top:40px }
  .word-river { margin-top:45px;font-size:77px;line-height:1.1;padding-bottom:37px;letter-spacing:-.065em }
  .word-river-inner { left:4vw }
  .flow-work { padding-top:50px;padding-bottom:72px }
  .work-heading { gap:23px;padding-bottom:28px }
  .work-heading h2 { font-size:clamp(33px,9.3vw,50px);line-height:1.14;letter-spacing:-.045em }
  .work-heading>p { font-size:12px;line-height:1.9;max-width:370px }
  .work-edge { height:27px }
  .flow-work .portfolio-controls { border-color:#07524640 }
  .flow-services { padding-top:50px;padding-bottom:67px }
  .services-heading { gap:24px;margin-bottom:40px }
  .services-heading h2 { font-size:clamp(32px,9.3vw,49px);line-height:1.15;letter-spacing:-.045em }
  .services-heading>p { font-size:12px;line-height:1.9;max-width:340px }
  .services-layout { display:flex;flex-direction:column;align-items:stretch }
  .service-film { height:355px;width:70%;max-width:290px;margin:5px 0 35px 8%;transform:rotate(-4deg) }
  .media-caption { font-size:11px;bottom:-23px;line-height:1.5 }
  .services-list { padding:0;margin-top:20px }
  .service-row { padding-block:23px;grid-template-columns:21px 1fr 22px;gap:14px }
  .service-row>span:first-child { font-size:8px;padding-top:7px }
  .service-row h3 { font-size:24px;line-height:1.23 }
  .service-row p { font-size:12px;line-height:1.85;margin-top:11px }
  .service-row>span:last-child { font-size:24px;padding-top:3px }
  .film-bridge { height:125px }
  .flow-craft { min-height:750px;min-height:100svh;padding-top:65px;padding-bottom:145px }
  .craft-grid h2 { font-size:clamp(37px,10.7vw,64px);line-height:1.14;letter-spacing:-.045em }
  .cinema-copy { font-size:12px;line-height:1.95;max-width:300px;margin-top:30px }
  .craft-grid .text-link { font-size:11px;margin-top:26px;gap:24px }
  .craft-word { font-size:115px;right:-10px;bottom:-100px;letter-spacing:-.075em }
  .flow-process { padding-top:66px;padding-bottom:160px;min-height:0 }
  .process-heading h2 { font-size:clamp(37px,10vw,60px);line-height:1.15 }
  .process-list { grid-template-columns:1fr 1fr;gap:32px 25px;margin-top:43px }
  .process-number { font-size:34px;padding-bottom:15px }
  .process-list h3 { font-size:19px;line-height:1.25;margin-top:20px }
  .process-list p { font-size:11px;line-height:1.9;max-width:220px;margin-top:12px }
  .flow-about { padding-top:55px;padding-bottom:40px }
  .about-grid { display:flex;flex-direction:column;gap:50px;align-items:stretch }
  .about-figure { padding:0;max-width:355px;width:88%;margin:0 0 0 4%;transform:rotate(-3deg) }
  .about-portrait { height:375px;border-radius:47% 53% 43% 57% / 48% 42% 58% 52% }
  .about-portrait img { object-position:53% center }
  .about-figure figcaption { gap:5px;margin-top:24px }
  .about-figure figcaption strong { font-size:17px }
  .about-figure figcaption>span { font-size:9px }
  .about-copy { padding:0 }
  .about-copy h2 { font-size:clamp(35px,9.8vw,54px);line-height:1.15;margin-bottom:27px }
  .about-copy>p:not(.section-number) { font-size:13px;line-height:1.95;max-width:370px;margin-top:17px }
  .about-copy .text-link { font-size:12px;margin-top:25px }
  .flow-faq { padding-top:32px;padding-bottom:66px }
  .faq-grid { gap:32px }
  .faq-grid h2 { font-size:42px;line-height:1.13 }
  .faq-grid .text-link { font-size:11px;margin-top:22px }
  .faq-list summary { font-size:14px;line-height:1.7;gap:22px;padding-block:17px;min-height:61px }
  .faq-list summary>span { font-size:25px }
  .faq-list details>p { font-size:12px;line-height:1.9;padding:0 16px 23px 0 }
  .flow-contact { padding-top:46px;padding-bottom:75px;min-height:0 }
  .contact-grid { gap:37px }
  .contact-grid h2 { font-size:clamp(48px,13vw,72px);line-height:1.08;letter-spacing:-.05em }
  .contact-grid>div>p:not(.section-number) { font-size:12px;line-height:1.9;margin-top:25px;max-width:310px }
  .contact-form-panel { padding:25px 21px;border-radius:23px 5px 23px 5px }
  .project-form { gap:18px }
  .form-pair { grid-template-columns:1fr;gap:18px }
  .project-form label { font-size:10px;line-height:1.7 }
  .project-form input, .project-form textarea { font-size:12px;min-height:46px;padding:11px 12px }
  .project-form textarea { min-height:118px }
  .project-form .form-note { font-size:10px;line-height:1.8 }
  .project-form>.button { font-size:11px;gap:17px;padding-inline:14px }
  .inquiry-result { font-size:11px;padding:13px }
  .flow-footer { padding-top:52px;padding-bottom:83px }
  .footer-top { align-items:start;gap:24px }
  .footer-statement { font-size:26px;line-height:1.17;margin-top:20px }
  .footer-top .text-link { font-size:9px;gap:9px;white-space:nowrap;padding-top:3px }
  .footer-top .text-link>span { font-size:20px }
  .footer-signature { margin:47px 0 31px }
  .footer-signature>img { width:100%;height:auto;max-height:none }
  .footer-bottom { font-size:8px;gap:20px;padding-top:22px }
  .footer-bottom nav { gap:22px;align-items:start;flex-wrap:wrap }
  .footer-bottom button { font-size:9px }
  .media-credits { max-width:none;width:100% }
  .media-credits summary { font-size:9px }
  .media-credits p { font-size:10px;max-width:340px;margin-top:13px }
  .legal-dialog { padding:25px }
  .legal-dialog h2 { font-size:27px }
  .legal-dialog>p { font-size:13px;line-height:1.9 }
  .dialog-close { height:36px;width:36px;font-size:23px }
  .flow-header { min-height:74px }
  .flow-brand>img { width:168px }
  .flow-menu-toggle { min-width:44px; min-height:44px }
  .flow-hero { display:block; min-height:0; padding-top:127px; padding-bottom:148px }
  .flow-hero h1 { font-size:clamp(43px,12vw,68px); line-height:1.04; letter-spacing:-.05em }
  .flow-hero h1>.hero-subline { max-width:490px; margin-top:22px; font-size:.77em; line-height:1.16 }
  .hero-description { max-width:450px; margin-top:26px; font-size:16px; line-height:1.75 }
  .hero-actions { align-items:stretch; flex-direction:column; gap:10px; max-width:360px; margin-top:28px }
  .flow-hero .button { width:100%; min-height:52px; padding:14px 19px; border-radius:6px; font-size:15px }
  .hero-secondary { align-self:flex-start; min-height:44px; font-size:14px; gap:15px }
  .section-number { margin-bottom:16px }
  .intro-grid { grid-template-columns:1fr; gap:28px }
  .intro-grid h2 { font-size:clamp(37px,10.4vw,59px); line-height:1.13; letter-spacing:-.045em }
  .intro-bottom { padding:0 }
  .intro-bottom>p { font-size:15px; line-height:1.8 }
  .work-heading>p, .services-heading>p, .service-row p, .about-copy>p:not(.section-number), .faq-list details>p, .contact-grid>div>p:not(.section-number) { font-size:14px; line-height:1.8 }
  .cinema-copy { font-size:15px; line-height:1.85 }
  .process-list p { font-size:13px; line-height:1.8 }
  .about-figure figcaption>span { font-size:12px }
  .footer-statement { margin-top:0 }
  .film-control { display:grid; place-items:center; width:44px; height:44px; min-height:44px; padding:0; gap:0; bottom:max(16px,env(safe-area-inset-bottom)) }
  .film-icon { font-size:14px }
  .film-label { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap }
  .project-form input,.project-form textarea { font-size:16px }
}
@media(max-width:350px) {
  .process-list { gap:30px 20px }
  .process-list h3 { font-size:17px }
  .about-portrait { height:335px }
  .footer-statement { font-size:23px }
  .footer-top { gap:17px }
  .work-heading h2 { font-size:31px }
  .services-heading h2 { font-size:30px }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto }
  .film-scene, .flow-header, .flow-menu-toggle>span, .flow-nav, .button, .text-link>span, .faq-list summary>span { transition:none }
  .film-scene video { transform:none }
  .button:hover, .text-link:hover>span { transform:none }
}

/* Trust: three concrete commitments, each with its own explanatory symbol. */
.flow-trust { position:relative; isolation:isolate; overflow:hidden; padding-block:80px 100px; background:linear-gradient(180deg,#fff 0%,#f3f9f5 19%,#edf7f1 74%,#fff 100%) }
.flow-trust::before { content:""; position:absolute; z-index:0; width:min(70vw,720px); height:430px; top:-120px; right:-160px; border-radius:50%; background:radial-gradient(ellipse,#d9f0e2 0%,#e6f5eb66 45%,transparent 70%); pointer-events:none }
.flow-trust>.wrap { position:relative; z-index:1 }
.trust-heading h2 { font-size:clamp(38px,4.4vw,64px); line-height:1.12; margin:0 }
.trust-heading em { color:#238c7b }
.trust-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin-top:45px }
.trust-grid article { min-width:0; padding:30px 28px 32px; background:#ffffffdb; border:1px solid #dcebe3a6; border-radius:24px; box-shadow:0 12px 30px #154f3c05 }
.trust-symbol { display:grid; place-items:center; width:74px; height:74px; margin-bottom:25px; border-radius:24px; background:#e1f2e9; color:#115e59 }
.trust-symbol svg { width:44px; height:44px; overflow:visible }
.trust-grid h3 { font-size:clamp(21px,1.9vw,27px); font-weight:550; line-height:1.3; letter-spacing:-.03em; margin:0 }
.trust-grid p { margin-top:14px; color:var(--muted); font-size:14px; line-height:1.85 }
@media(max-width:900px) {
  .flow-trust { padding-block:65px 80px }
  .trust-grid { grid-template-columns:1fr; gap:18px; margin-top:36px }
  .trust-grid article { display:grid; grid-template-columns:64px minmax(0,1fr); column-gap:24px; row-gap:10px; padding:26px 28px }
  .trust-symbol { grid-column:1; grid-row:1/3; width:64px; height:64px; border-radius:21px; margin:0 }
  .trust-symbol svg { width:38px; height:38px }
  .trust-grid h3 { grid-column:2; align-self:end; font-size:24px }
  .trust-grid p { grid-column:2; margin:0; max-width:570px }
}
@media(max-width:640px) {
  .flow-trust { padding-block:52px 65px }
  .flow-trust::before { width:400px; height:320px; top:-45px; right:-220px }
  .trust-heading h2 { font-size:clamp(35px,10vw,44px); line-height:1.15 }
  .trust-grid { gap:16px; margin-top:30px }
  .trust-grid article { grid-template-columns:52px minmax(0,1fr); column-gap:16px; row-gap:17px; padding:23px 22px 25px; border-radius:21px }
  .trust-symbol { grid-row:1; width:52px; height:52px; border-radius:18px }
  .trust-symbol svg { width:32px; height:32px }
  .trust-grid h3 { align-self:center; font-size:clamp(21px,5.7vw,24px); line-height:1.28 }
  .trust-grid p { grid-column:1/-1; max-width:none; font-size:14px; line-height:1.8 }
}

/* Agency work, shown as actual excerpts of the existing studies rather than devices. */
.hero-showcase { position:relative; isolation:isolate; width:100%; min-width:0; margin:20px 0 0 }
.hero-showcase::before { content:""; position:absolute; z-index:-1; inset:2% -8% 10%; background:radial-gradient(ellipse,#a7ecdc28,transparent 68%); border-radius:50%; pointer-events:none }
.hero-showcase-link { display:block; border-radius:14px }
.hero-showcase-link:focus-visible { outline-offset:14px }
.hero-study-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px; padding:12px 7px 20px }
.hero-study-window { position:relative; min-width:0; aspect-ratio:1.5; overflow:hidden; background:#f5f0e8; border:1px solid #f2f9efcc; border-radius:10px; box-shadow:0 23px 65px #032f2c4d; --hero-study-scale:.45 }
.hero-study-window--beauty { grid-column:1/-1; z-index:1; margin-bottom:-42px; transform:rotate(-2.5deg) }
.hero-study-window--fitness { z-index:2; aspect-ratio:1.47; background:#181916; transform:translate(-12px,8px) rotate(-3deg); --hero-study-scale:.22 }
.hero-study-window--food { z-index:3; aspect-ratio:1.53; background:#4d1f2a; transform:translate(13px,27px) rotate(3deg); --hero-study-scale:.22 }
.hero-study-canvas { position:absolute; top:0; left:0; width:1100px; transform:scale(var(--hero-study-scale)); transform-origin:top left; pointer-events:none; user-select:none }
.hero-study-canvas>.demo-page { width:1100px }
.hero-showcase figcaption { margin-top:32px; text-align:center; color:#d4eae1; font-size:12px; line-height:1.6; letter-spacing:0 }
@media(max-width:960px) {
  .flow-hero { min-height:0; padding-top:140px }
  .hero-grid { grid-template-columns:1fr; gap:46px }
  .hero-copy { max-width:720px }
  .flow-hero h1 { font-size:clamp(60px,9.2vw,84px) }
  .flow-hero h1>.hero-subline { max-width:620px; font-size:.66em }
  .hero-showcase { max-width:650px; margin:0 auto }
}
@media(max-width:640px) {
  .flow-hero { padding-top:127px; padding-bottom:148px }
  .hero-grid { gap:34px }
  .flow-hero h1 { font-size:clamp(43px,12vw,68px); line-height:1.04; letter-spacing:-.05em }
  .flow-hero h1>.hero-subline { max-width:490px; margin-top:22px; font-size:.77em; line-height:1.16 }
  .hero-showcase { max-width:450px }
  .hero-study-grid { gap:13px; padding:8px 5px 18px }
  .hero-study-window { border-radius:7px; box-shadow:0 16px 40px #032f2c40; --hero-study-scale:.30 }
  .hero-study-window--beauty { margin-bottom:-25px; transform:rotate(-2deg) }
  .hero-study-window--fitness { transform:translate(-5px,5px) rotate(-2.5deg); --hero-study-scale:.145 }
  .hero-study-window--food { transform:translate(6px,17px) rotate(3deg); --hero-study-scale:.145 }
  .hero-showcase figcaption { margin-top:21px; font-size:12px }
}

/* Connected scenes. All enhanced layouts are opt-in; the default remains a readable page. */
.film-stage { overflow:hidden }
.hero-showcase, .contact-grid { perspective:1400px }
.hero-study-grid { transform-style:preserve-3d }
.services-list { position:relative }
.cinema-ready .services-list::before { content:""; position:absolute; left:6px; top:30px; bottom:28px; width:1px; background:linear-gradient(#b6dfd0,#14b8a6); transform:scaleY(var(--service-progress,1)); transform-origin:top }
.faq-list details { position:relative }
.cinema-ready .faq-list details::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:#238c7b; transform:scaleX(var(--answer-line,1)); transform-origin:left; pointer-events:none }
.portfolio-camera { position:relative; perspective:1600px }
.portfolio-scene-nav { display:flex; justify-content:center; gap:10px; padding:0 0 12px }
.portfolio-scene-nav a { display:grid; place-items:center; min-height:44px; min-width:100px; padding:8px 20px; border:1px solid #07524640; border-radius:30px; font-size:13px; font-weight:550; color:#063e35 }
.portfolio-scene-nav a[aria-current=true] { background:#fff; border-color:#fff }
.is-immersive .portfolio-camera { overflow:clip; padding-bottom:18px }
.is-immersive .portfolio-grid { display:flex; width:max-content; gap:56px; padding-inline:var(--portfolio-inset,0); align-items:start; will-change:transform; transform-style:preserve-3d }
.is-immersive .portfolio-card { flex:0 0 auto; width:min(72vw,940px) }
.is-immersive .portfolio-preview, .is-immersive .portfolio-card--beauty .portfolio-preview { aspect-ratio:1.95 }
.is-immersive .portfolio-controls { padding:10px 0 14px }
.is-immersive .portfolio-caption { padding-top:12px }
.is-immersive .portfolio-footnote { margin-top:18px; font-size:12px }
.is-immersive .portfolio-frame { transition:box-shadow .3s }
@media(min-width:1100px) and (max-height:899px) {
  .is-immersive .portfolio-card { width:min(66vw,720px) }
}
.process-controls { position:relative; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; padding-bottom:17px; margin-bottom:35px }
.process-controls::before, .process-controls::after { content:""; position:absolute; bottom:0; left:0; right:0; height:2px; background:#c4e6d344 }
.process-controls::after { background:#9cebdc; transform:scaleX(var(--process-progress,0)); transform-origin:left }
.process-controls button { min-height:52px; display:flex; flex-direction:column; gap:7px; padding:5px 0; border:0; background:transparent; color:#c7ded1; font-size:20px; text-align:left }
.process-controls button span { font-size:12px; line-height:1.5 }
.process-controls button[aria-pressed=true] { color:#fff }
.is-storytelling .process-pin { display:grid; grid-template-columns:1.15fr 1fr; gap:clamp(45px,6vw,95px); align-items:center; min-height:min(620px,calc(100svh - 180px)) }
.is-storytelling .process-heading h2 { font-size:clamp(48px,5.1vw,74px); line-height:1.1 }
.is-storytelling .process-list { position:relative; display:block; margin:0; min-height:310px }
.is-storytelling .process-list li { position:absolute; inset:0; width:100% }
.is-storytelling .process-number { border:0; padding:0; font-size:120px; font-weight:400; line-height:1; color:#b1edda66 }
.is-storytelling .process-list h3 { font-size:34px; margin-top:16px }
.is-storytelling .process-list p { font-size:16px; line-height:1.8; max-width:430px; margin-top:17px }
@media(max-width:640px) {
  .cinema-ready .services-list::before { left:-12px }
  .process-list { grid-template-columns:1fr; gap:32px }
  .process-list li { position:relative; display:grid; grid-template-columns:46px minmax(0,1fr); gap:8px 20px }
  .process-list li:not(:last-child)::before { content:""; position:absolute; left:18px; top:49px; bottom:-22px; width:1px; background:#b1edda55 }
  .process-number { grid-column:1; grid-row:1/3; padding:0; border:0; font-size:30px }
  .process-list h3 { grid-column:2; font-size:23px; margin:0 }
  .process-list p { grid-column:2; max-width:none; font-size:14px; margin:0; line-height:1.8 }
}