/* ASU Morioka — Living Folio. Tokens and progressive motion adapted from cinematic-site. */
:root {
  --paper: #f4f1e9; --white: #fcfbf7; --ink: #203b33; --dim: #59645a;
  --forest: #173f36; --deep: #112e28; --line: #c9cdbf; --orange: #b64a2f; --gold: #c9a76f;
  --serif: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --en: "Cormorant Garamond", Georgia, var(--serif);
  --sans: "Hiragino Kaku Gothic ProN", "Yu Gothic", system-ui, sans-serif;
  --gutter: clamp(22px, 5.1vw, 88px); --space: clamp(88px, 10vw, 160px);
  --ease: cubic-bezier(.22, 1, .36, 1); --header: 92px;
}
*, *::before, *::after {box-sizing: border-box}
html {scroll-behavior: smooth; scroll-padding-top: calc(var(--header) + 20px); -webkit-text-size-adjust: 100%; background: var(--paper)}
body {margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.9 var(--sans); -webkit-font-smoothing: antialiased; line-break: strict; word-break: normal}
img {display: block; max-width: 100%; height: auto}
figure, h1, h2, h3, p, blockquote {margin: 0}
h1,h2,h3,blockquote {font-family: var(--serif); font-weight: 400; letter-spacing: -.045em; line-height: 1.5}
h2 {font-size: clamp(32px, 3.3vw, 54px)}
a {color: inherit; text-decoration: none}
button, input, textarea, select {font: inherit}
button, summary {cursor: pointer}
button {color: inherit}
button, a, summary, input, textarea, select {touch-action: manipulation}
:focus-visible {outline: 2px solid var(--orange); outline-offset: 6px}
[hidden] {display: none !important}
::selection {background: #cbd8bc; color: var(--deep)}
.wrap {width: min(calc(100% - var(--gutter) * 2), 1360px); margin-inline: auto}
.section {padding-block: var(--space); scroll-margin-top: 15px}
.en {font-family: var(--en); font-weight: 400; letter-spacing: .015em}
.phrase {display: inline-block; max-width: 100%; vertical-align: top}
.eyebrow {font-family: var(--en); font-size: 19px; line-height: 1.35; letter-spacing: .02em}
.eyebrow::before {content: ""; display: inline-block; vertical-align: middle; width: 28px; height: 1px; background: currentColor; margin-right: 12px}
.section-top {display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid var(--line); padding-top: 22px; margin-bottom: 70px}
.chapter {font-size: 16px; color: var(--dim)}
.skip {position: fixed; top: -100px; left: 20px; z-index: 200; background: var(--white); padding: 12px 22px}
.skip:focus {top: 10px}
.reading-progress {position: fixed; top: 0; left: 0; height: 2px; width: 100%; background: var(--orange); z-index: 110; transform: scaleX(0); transform-origin: left}
.site-header {height: var(--header); position: absolute; top: 0; inset-inline: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 12px var(--gutter); transition: background .3s, box-shadow .3s}
.site-header.is-fixed {position: fixed; height: 76px; background: var(--paper); box-shadow: 0 1px 0 var(--line)}
.brand {display: flex; align-items: center; gap: 13px; flex-shrink: 0}
.brand img {width: 49px; height: 49px; object-fit: contain}
.brand>span {font: 500 28px/1 var(--en); letter-spacing: .02em}
.brand small {display: block; margin-top: 9px; font: 400 9px/1.2 var(--serif); letter-spacing: .08em}
.desktop-nav {display: flex; gap: clamp(18px, 2.4vw, 38px); align-items: center; font: 400 13px/1.5 var(--serif)}
.desktop-nav a {padding-block: 15px; position: relative}
.desktop-nav a::after {content: ""; position: absolute; bottom: 8px; left: 0; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease)}
.desktop-nav a:hover::after {transform: scaleX(1)}
.nav-contact {border-left: 1px solid var(--line); padding-left: 25px}
.nav-contact span {margin-left: 18px}
.menu-toggle {display: none; width: 48px; height: 48px; border: 1px solid var(--line); border-radius: 50%; background: transparent; place-content: center; gap: 7px}
.menu-toggle span {width: 20px; height: 1px; background: var(--ink); transition: transform .25s}
.menu-toggle[aria-expanded="true"] span:first-child {transform: translateY(4px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:last-child {transform: translateY(-4px) rotate(-45deg)}
.mobile-nav {position: fixed; inset: 0; z-index: 99; background: var(--paper); padding: 130px var(--gutter) 40px; overflow: auto}
.mobile-nav a {display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); padding: 20px 0; font: 400 26px/1.5 var(--serif)}
.menu-caption {font-size: 22px; margin-bottom: 28px}
body.menu-open {overflow: hidden}

/* An open folio: the landscape and typography each have breathing room. */
.hero {position: relative; padding-top: var(--header); display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(330px, 1fr); min-height: min(960px, 100svh)}
.hero-landscape {position: relative; margin: 8px 0 0 20px; min-width: 0; min-height: 640px; isolation: isolate; overflow: hidden; border-radius: 2px 220px 2px 2px}
.hero-landscape .scene-fallback {position: absolute; inset: 0}
.hero-landscape img {width: 100%; height: 100%; object-fit: cover; object-position: 54% center}
[data-scene] canvas {position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; transition: opacity .5s}
[data-scene].scene-ready canvas {opacity: 1}
[data-scene].scene-ready .scene-fallback {visibility: hidden}
.hero-landscape::after {content: ""; position: absolute; inset: 55% 0 0; z-index: 2; pointer-events: none; background: linear-gradient(0deg, rgba(10,43,35,.62), transparent)}
.landscape-caption {position: absolute; left: 30px; bottom: 28px; right: 30px; z-index: 3; color: #fff; font-size: 17px; display: flex; justify-content: space-between; gap: 20px}
.scene-index {position: absolute; z-index: 2; top: 32px; left: 30px; font-size: 17px; color: #29463c}
.hero-editorial {display: flex; flex-direction: column; justify-content: center; padding: 55px clamp(28px, 4vw, 70px); position: relative; min-width: 0}
.hero-editorial>.eyebrow {line-height: 1.25; font-size: clamp(22px, 2.1vw, 34px); padding-left: 42px}
.hero-editorial>.eyebrow::before {position: absolute; margin-left: -42px; margin-top: 15px}
.hero h1 {font-size: clamp(42px, 4.35vw, 68px); line-height: 1.6; margin-top: 40px; letter-spacing: -.08em}
.hero h1>span {display: block; white-space: nowrap}
.hero h1 .reading {font-size: .45em; letter-spacing: -.12em; vertical-align: .22em}
.hero-bottom {margin-top: 48px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px}
.hero-bottom p {font-size: 14px; line-height: 2.1}
.round-link {display: grid; place-items: center; border: 1px solid #aeb7a8; width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0; transition: background .3s, color .3s; font-size: 23px}
.round-link:hover {background: var(--forest); color: var(--paper)}
.hero-foot {grid-column: 1/-1; display: flex; justify-content: space-between; gap: 20px; padding: 19px var(--gutter); font-size: 16px; min-width: 0}
.hero-foot span:last-child {font-size: 14px}

/* The cultural scene is decorative; the type never belongs to the canvas. */
.vision {position: relative; isolation: isolate; min-height: 940px; display: grid; place-items: center; background: var(--paper); overflow: clip}
.culture-stage {position: absolute; inset: 0; z-index: -1}
.culture-fallback {position: absolute; inset: 0; opacity: .82}
.culture-fallback img {position: absolute; width: 26%; height: 32%; object-fit: contain}
.culture-bank {left: -5%; top: 9%}.culture-horse {right: -3%; top: 12%}.culture-kettle {right: 1%; bottom: 4%}.culture-sansa {left: -5%; bottom: 5%}
.vision-copy {text-align: center; position: relative; padding-block: 75px}
.vision h2 {margin-top: 36px; font-size: clamp(35px, 3.8vw, 58px); line-height: 1.65}
.destination {font-size: 1.48em; letter-spacing: -.07em}
.destination em {font-style: normal; color: var(--orange)}
.vision-body {max-width: 530px; margin: 36px auto 0; line-height: 2.2; font-size: 16px}
.route-line {max-width: 485px; display: flex; gap: 12px; align-items: center; margin: 35px auto 0; font-size: 19px}
.route-line i {flex: 1; height: 1px; background: #b7bdac; position: relative}
.route-line i::after {content: ""; position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--orange); right: 0; top: -1.5px}

.about {padding-top: 25px}
.about-grid {display: grid; grid-template-columns: minmax(0, 1.23fr) minmax(0, 1fr); gap: clamp(35px, 6vw, 92px); align-items: center}
.about-image {position: relative; padding-bottom: 32px}
.about-image img {aspect-ratio: 1/1.04; width: 100%; height: auto; object-fit: cover; object-position: 62% center; border-radius: 180px 2px 2px 2px}
.about-image figcaption {position: absolute; bottom: 0; left: 0; font-style: italic; font-size: 20px}
.about-copy h2 {max-width: 12.5em; font-size: clamp(30px, 3vw, 48px)}
.about-copy p {margin-top: 35px; max-width: 480px; line-height: 2.1}
.text-link {font: 400 14px/1.6 var(--serif); display: inline-flex; align-items: center; justify-content: space-between; gap: 42px; padding-block: 14px; border-bottom: 1px solid var(--ink); min-height: 48px}
.text-link span {transition: transform .3s; font-family: var(--sans)}
.text-link:hover span {transform: translate(4px,-4px)}
.about-copy .text-link {margin-top: 30px}
.principles {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 90px; border-top: 1px solid var(--line); gap: 38px}
.principles>div {padding-top: 24px}
.principles .en {font-size: 21px; color: var(--orange)}
.principles h3 {font-size: clamp(20px, 1.75vw, 27px); margin: 22px 0 16px}
.principles p {font-size: 15px; color: var(--dim)}

.business {background: #e9edde}
.business-heading {display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 70px; align-items: end; margin-bottom: 80px}
.business-heading h2 {font-size: clamp(31px, 3.4vw, 54px)}
.business-heading p {max-width: 360px; margin-left: auto; color: #465645}
.service-list {border-top: 1px solid #a5af9d}
.service {border-bottom: 1px solid #a5af9d}
.service summary {display: grid; grid-template-columns: 55px minmax(0, 1fr) 50px; align-items: center; gap: 18px; padding: 32px 0; list-style: none}
.service summary::-webkit-details-marker {display: none}
.service-number {font-size: 24px; align-self: start; padding-top: 12px; color: #68725f}
.service-title {font-size: clamp(42px, 5.5vw, 82px); line-height: 1.08; letter-spacing: -.035em}
.service-title em {font-weight: 400}
.service-title small {display: block; font: 400 13px/1.7 var(--sans); letter-spacing: .05em; margin-top: 17px}
.service-plus {position: relative; width: 48px; height: 48px; border: 1px solid #acb6a3; border-radius: 50%; transition: background .3s, transform .4s var(--ease)}
.service-plus::before,.service-plus::after {content: ""; position: absolute; top: 23px; left: 15px; width: 16px; height: 1px; background: var(--ink)}
.service-plus::after {transform: rotate(90deg)}
.service[open] .service-plus {transform: rotate(45deg); background: var(--white)}
.service summary:hover .service-plus {background: var(--white)}
.service-content {display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 72px); padding: 20px 0 54px 73px; align-items: center}
.service-content figure img {width: 100%; height: auto; aspect-ratio: 1.4; object-fit: cover}
.service-intro {font-family: var(--serif); font-size: 25px; line-height: 1.75; margin-bottom: 24px}
.service-description>p:not(.service-intro) {font-size: 15px; line-height: 2.05}
.service-description ul {padding-left: 1.2em; margin-block: 20px; font-size: 14px; line-height: 2.1}
.service-description .text-link {margin-top: 10px}

.native {background: var(--deep); color: var(--paper)}
.native .section-top {border-color: #536b5b}.native .chapter {color: #c5ccbc}
.native-heading {display: grid; grid-template-columns: 1.45fr .55fr; gap: 60px; align-items: end; margin-bottom: 65px}
.native-heading h2 {font-size: clamp(30px, 3.2vw, 50px); line-height: 1.65}
.native-heading>p {color: #d2d8c9; font-size: 16px}
.workflow-tabs {display: flex; border-block: 1px solid #607364; margin-bottom: 34px}
.workflow-tabs button {flex: 1; background: none; border: 0; color: #c1caba; font: 400 18px/1.5 var(--serif); padding: 22px 12px; min-height: 62px; border-bottom: 3px solid transparent; transition: background .25s, color .25s}
.workflow-tabs .en {font-size: 23px; margin-right: 10px; color: #dabd87}
.workflow-tabs [aria-selected="true"] {color: var(--white); border-color: #d3b17b; background: rgba(227,234,211,.05)}
.workflow-tabs button:hover {background: rgba(227,234,211,.08)}
.workflow-panel {display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(35px, 5vw, 70px); align-items: center}
.workflow-panel figure {align-self: stretch; min-height: 360px; overflow: hidden}
.workflow-panel img {width: 100%; height: 100%; object-fit: cover}
.workflow-copy {padding-block: 20px}
.workflow-copy .eyebrow {color: #d5b680}
.workflow-copy h3 {font-size: clamp(27px, 3vw, 43px); margin: 25px 0 24px; line-height: 1.6}
.workflow-copy>p:not(.eyebrow) {font-size: 16px; color: #d2d8c9; line-height: 2}
.flow-steps {list-style: none; counter-reset: flow; padding: 0; margin: 26px 0; font-size: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px}
.flow-steps li {counter-increment: flow; border-top: 1px solid #4e695c; padding-top: 12px}
.flow-steps li::before {content: "0" counter(flow); font: 20px var(--en); display: inline-block; margin-right: 12px; color: #d5b680}
.demo-caption {font-size: 12px; color: #b2c1ae}
.native-note {margin-top: 35px; border-top: 1px solid #536b5b; padding-top: 20px; font-size: 13px; color: #bec9b6}

.case-heading {display: flex; justify-content: space-between; align-items: end; gap: 50px; margin-bottom: 80px}
.case-heading h2 {font-size: clamp(32px, 3.5vw, 55px)}
.case-heading>p {font-size: 14px; max-width: 300px; color: var(--dim)}
.case-grid {display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 90px 8vw}
.case-card:nth-child(even) {margin-top: 125px}
.case-card figure {overflow: hidden; background: #e8e3d6}
.case-card img {width: 100%; aspect-ratio: 1.32; object-fit: cover; transition: transform .8s var(--ease)}
.case-card:nth-child(even) img {aspect-ratio: 1.05}
.case-card:hover img {transform: scale(1.035)}
.case-meta {font-size: 20px; color: var(--orange); margin-top: 25px}
.case-card h3 {font-size: clamp(25px, 2.5vw, 38px); margin-top: 16px; line-height: 1.6}
.case-card p {font-size: 15px; color: var(--dim); max-width: 460px; margin-top: 18px}
.case-tag {display: inline-block; margin-top: 24px; border-top: 1px solid var(--line); padding-top: 12px; font-size: 12px; color: var(--dim)}

.leadership {background: #e8e6dd}
.leader-grid {display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); gap: clamp(50px, 10vw, 150px); align-items: center}
.portrait-composition {position: relative; padding: 22px 30px 52px 0}
.portrait {position: relative; z-index: 2; background: #eee9dc}
.portrait img {width: 100%; height: auto; aspect-ratio: .8; object-fit: cover}
.portrait-note {position: absolute; bottom: 0; right: -36px; z-index: 3; font-size: clamp(37px, 4.1vw, 64px); font-style: italic; letter-spacing: -.04em; line-height: 1}
.portrait-rule {position: absolute; inset: 0 0 22px 26px; border: 1px solid #a6ad9d}
.leader-copy blockquote {font-size: clamp(28px, 3.1vw, 48px); margin: 35px 0 30px; line-height: 1.65}
.leader-copy>p:not(.eyebrow) {color: var(--dim); font-size: 16px; line-height: 2.1}
.leader-sign {margin: 35px 0; display: flex; align-items: baseline; gap: 25px}
.leader-sign .en {font-size: 22px}
.leader-sign h2 {font-size: 36px; letter-spacing: .05em}
.company-facts {font-size: 13px; border-top: 1px solid #b9c0b0; padding-top: 8px}
.company-facts>div {display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 15px; padding-top: 12px}
.company-facts>div>span {color: var(--dim)}

.contact {position: relative; overflow: clip; isolation: isolate}
.contact-botanical {position: absolute; left: -7%; bottom: -12%; width: 57%; z-index: -1; opacity: .21; pointer-events: none; mix-blend-mode: multiply}
.contact-botanical img {width: 100%}
.contact-layout {display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); gap: clamp(50px, 8vw, 125px); align-items: start}
.contact-intro {position: sticky; top: 115px}
.contact-en {font-size: clamp(80px, 9vw, 145px); line-height: .84; letter-spacing: -.055em; margin: 42px 0 48px}
.contact-en em {color: var(--orange); font-weight: 400}
.contact h2 {font-size: clamp(26px, 2.4vw, 36px); max-width: 13em; line-height: 1.8}
.contact-intro>p:not(.eyebrow) {font-size: 15px; max-width: 420px; margin-top: 26px; line-height: 2}
.contact-intro .consultation-note {font-size: 13px !important; color: var(--dim)}
.contact-form {padding-top: 14px; min-width: 0}
.contact-grid {display: grid; grid-template-columns: 1fr 1fr; gap: 25px 24px}
.form-field {min-width: 0}.wide {grid-column: 1/-1}
.form-field label {display: block; font-size: 14px; margin-bottom: 9px}
.form-field label span {font-size: 11px; color: var(--orange); border: 1px solid #c6bba8; padding: 2px 6px; margin-left: 6px}
.form-field input,.form-field textarea,.form-field select {width: 100%; border: 1px solid #b9c2b1; border-radius: 0; background: rgba(255,255,255,.55); color: var(--ink); min-height: 52px; padding: 12px 15px; font-size: 16px; appearance: auto}
.form-field textarea {min-height: 150px; resize: vertical}
.form-field :is(input,textarea,select):focus {outline: 2px solid #6e856b; outline-offset: 2px}
.form-field textarea::placeholder {color: #6f7669}
.consent {display: flex; align-items: start; gap: 12px; padding: 25px 0; font-size: 13px; cursor: pointer}
.consent input {width: 20px; height: 20px; flex-shrink: 0; margin: 3px 0; accent-color: var(--forest)}
.submit-button {display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 15px; padding: 21px 28px; min-height: 66px; border: 1px solid var(--forest); color: var(--white); background: var(--forest); font-size: 15px; transition: background .3s}
.submit-button:hover {background: #275848}.submit-button:disabled {opacity: .6; cursor: wait}
.form-status {font-size: 14px; line-height: 1.8; color: var(--forest); padding-top: 12px}
.form-fallback {font-size: 12px; display: inline-block; padding-block: 14px; text-decoration: underline; text-underline-offset: 5px}
.site-footer {background: #dde3d1; padding: 44px 0 36px; overflow: clip}
.footer-top,.footer-bottom {display: flex; align-items: center; justify-content: space-between; gap: 25px}
.footer-word {font-size: clamp(80px, 17.7vw, 270px); line-height: 1; margin: 65px 0 35px; white-space: nowrap; letter-spacing: -.065em; color: #2b4d3d}
.footer-bottom {border-top: 1px solid #a9b69e; padding-top: 24px; font-size: 18px}
.footer-bottom small {font-size: 11px; font-family: var(--sans)}
.motion-toggle {position: fixed; z-index: 98; bottom: max(18px, env(safe-area-inset-bottom)); right: 20px; border: 1px solid #c0c8b8; color: var(--ink); background: var(--paper); box-shadow: 0 3px 16px #1631240d; display: flex; gap: 10px; align-items: center; justify-content: center; min-height: 44px; padding: 9px 15px; border-radius: 40px; font-size: 11px}
.motion-icon {font-size: 14px; min-width: 15px}
@media (min-width: 1600px) {.hero-landscape {min-height: 730px}.hero h1 {font-size: 76px}.hero-bottom p {font-size: 15px}}
@media (max-width: 1100px) {
  :root {--header: 82px; --gutter: 34px}
  .desktop-nav {display: none}.menu-toggle {display: grid}
  .hero {grid-template-columns: 1.35fr 1fr}.hero-landscape {min-height: 610px; border-top-right-radius: 150px}
  .hero-editorial {padding: 45px 28px}.hero h1 {font-size: clamp(33px,4.2vw,44px)}.hero-bottom {flex-wrap: wrap; margin-top: 30px}.hero-bottom p {font-size: 14px}.desktop-break {display: none}
  .vision-body {max-width: 450px}.vision {min-height: 830px}
  .business-heading,.native-heading {grid-template-columns: 1fr; gap: 30px}
  .business-heading>p,.native-heading>p {max-width: 660px; margin: 0}
  .business-heading h2 br {display: none}.business-heading h2 {max-width: 15em}
  .native-heading h2 {max-width: 21em}.native-heading h2 br {display: none}
  .service-content {padding-left: 0}.workflow-panel {gap: 30px}.workflow-panel figure {min-height: 360px}
  .case-heading {display: block}.case-heading>p {margin-top: 28px; max-width: 550px}
  .leader-grid {gap: 50px}.portrait-note {right: -8px}.contact-layout {gap: 50px}
}
@media (max-width: 700px) {
  :root {--header: 78px; --gutter: 24px; --space: 86px}
  body {font-size: 16px; line-height: 1.95}
  h2 {font-size: 30px}.section-top {margin-bottom: 38px; padding-top: 17px; align-items: start}
  .eyebrow {font-size: 18px}.chapter {font-size: 13px; max-width: 95px; text-align: right; line-height: 1.4}
  .site-header {padding-inline: 20px}.site-header.is-fixed {height: 68px}
  .brand {gap: 10px}.brand img {width: 43px; height: 43px}.brand>span {font-size: 25px}.brand small {font-size: 8px; margin-top: 7px}
  .menu-toggle {width: 44px; height: 44px}
  .hero {display: block; min-height: 0; padding-top: 0; background: #dce9e4}
  .hero-landscape {margin: 0; border-radius: 0; height: min(950px, 100svh); min-height: 740px}
  .hero-landscape img {object-position: center center}
  .scene-index {display: none}.landscape-caption {left: var(--gutter); right: var(--gutter); bottom: 20px; font-size: 13px}.landscape-caption span {display: none}
  .hero-editorial {position: absolute; top: 105px; bottom: 110px; left: 0; right: 0; display: block; padding: 10px var(--gutter); color: #193b32}
  .hero-editorial>.eyebrow {font-size: 19px; padding: 0; line-height: 1.25}.hero-editorial>.eyebrow br {display: none}.hero-editorial>.eyebrow::before {position: static; margin: 0 10px 0 0; width: 20px}
  .hero h1 {font-size: clamp(38px, 10.8vw, 52px); line-height: 1.4; margin-top: 20px; letter-spacing: -.065em}
  .hero h1>span {display: inline}.hero h1>span:first-child {display: block}.hero h1>span:last-child {display: block}.hero h1 .reading {font-size: .5em}
  .hero-bottom {position: absolute; bottom: 0; left: var(--gutter); right: var(--gutter); margin-top: 0; display: flex; flex-wrap: nowrap; max-width: none; align-items: center; color: #fff}
  .hero-bottom p {font-size: 14px; line-height: 1.9; max-width: 25em}.hero-bottom p br {display: none}
  .round-link {width: 44px; height: 44px; font-size: 19px; margin-top: 3px; border-color: #dbe3d5; background: rgba(22,49,40,.2)}
  .hero-foot {font-size: 13px; padding: 18px 24px; background: var(--paper)}.hero-foot span:last-child {display: none}
  .vision {min-height: 820px; padding: 0; overflow: clip}
  .vision-copy {padding-top: 180px; padding-bottom: 190px}.vision h2 {font-size: clamp(26px, 7.1vw, 34px); margin-top: 28px; line-height: 1.7}
  .destination {display: block; font-size: 1.38em; line-height: 1.5; margin-top: 8px; white-space: nowrap}
  .vision h2 br {display: none}.vision-body {font-size: 15px; line-height: 2; max-width: 340px; margin-top: 28px; padding-inline: 6px}
  .route-line {font-size: 17px; gap: 10px; margin-top: 24px}
  .culture-fallback img {width: 40%; height: 150px}.culture-bank {left: -3%; top: 10px}.culture-horse {right: -5%; top: 25px}.culture-kettle {bottom: 20px; right: 0}.culture-sansa {left: -6%; bottom: 10px}
  .about {padding-top: 20px}.about-grid {grid-template-columns: 1fr; gap: 40px}.about-image img {aspect-ratio: 1.2; border-top-left-radius: 100px}.about-image figcaption {font-size: 18px}
  .about-copy h2 {font-size: 31px; max-width: 11em}.about-copy p {font-size: 16px; margin-top: 25px}.about-copy .text-link {margin-top: 20px}
  .principles {grid-template-columns: 1fr; gap: 22px; margin-top: 50px}.principles>div {display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 8px 15px; border-bottom: 1px solid var(--line); padding: 0 0 22px}
  .principles>div:first-child {padding-top: 20px}.principles .en {font-size: 20px; grid-row: 1/3}.principles h3 {font-size: 19px; margin: 0}.principles p {font-size: 14px}.principles p br {display: none}
  .business-heading {margin-bottom: 45px; gap: 25px}.business-heading h2 {font-size: 30px; line-height: 1.65}.business-heading p {font-size: 16px}
  .service summary {grid-template-columns: 25px minmax(0, 1fr) 36px; gap: 10px; padding-block: 25px}.service-number {font-size: 18px; padding-top: 6px}.service-title {font-size: clamp(33px, 9.3vw, 45px)}.service-title small {font-size: 11px; margin-top: 10px}
  .service-plus {width: 36px; height: 36px}.service-plus::before,.service-plus::after {top: 17px; left: 10px; width: 14px}
  .service-content {grid-template-columns: 1fr; gap: 27px; padding: 0 0 35px}.service-content figure img {aspect-ratio: 1.4}.service-intro {font-size: 23px; margin-bottom: 18px}.service-description>p:not(.service-intro) {font-size: 16px}
  .service-description ul {font-size: 14px}.service-description .text-link {width: 100%; gap: 15px; font-size: 13px}
  .native-heading {gap: 25px; margin-bottom: 35px}.native-heading h2 {font-size: 27px; line-height: 1.8; letter-spacing: -.055em}.native-heading>p {font-size: 16px}
  .workflow-tabs {margin-bottom: 25px}.workflow-tabs button {font-size: 13px; padding: 16px 4px; min-height: 66px}.workflow-tabs .en {display: block; font-size: 18px; margin: 0; line-height: 1.2}
  .workflow-panel {grid-template-columns: 1fr; gap: 25px}.workflow-panel figure {min-height: 0; aspect-ratio: 1.5}.workflow-panel img {height: auto; aspect-ratio: 1.5}.workflow-copy {padding: 0}.workflow-copy h3 {font-size: 28px; margin-top: 20px; line-height: 1.65}.workflow-copy>p:not(.eyebrow) {font-size: 16px}
  .flow-steps {grid-template-columns: 1fr; gap: 7px}.flow-steps li {padding-top: 7px}.demo-caption {font-size: 12px}.native-note {font-size: 13px}
  .case-heading {margin-bottom: 40px}.case-heading h2 {font-size: 30px; line-height: 1.6}.case-heading>p {font-size: 14px; margin-top: 24px}
  .case-grid {grid-template-columns: 1fr; gap: 55px}.case-card:nth-child(even) {margin: 0}.case-card img,.case-card:nth-child(even) img {aspect-ratio: 1.4}.case-meta {font-size: 18px; margin-top: 18px}.case-card h3 {font-size: 25px; margin-top: 12px}.case-card p {font-size: 16px; margin-top: 16px}
  .leader-grid {grid-template-columns: 1fr; gap: 45px}.portrait-composition {max-width: 400px; margin-inline: auto; padding: 18px 25px 40px 0}.portrait-note {font-size: clamp(34px, 8.6vw, 42px); right: -5px}.leader-copy blockquote {font-size: 30px; margin-top: 24px}.leader-copy>p:not(.eyebrow) {font-size: 16px}.leader-sign h2 {font-size: 34px}.company-facts {font-size: 13px}
  .contact-layout {grid-template-columns: 1fr; gap: 42px}.contact-intro {position: static}.contact-en {font-size: clamp(82px, 23vw, 115px); margin: 32px 0 36px}.contact h2 {font-size: 28px; line-height: 1.7}.contact-intro>p:not(.eyebrow) {font-size: 16px}.contact-intro .consultation-note {font-size: 14px !important}
  .contact-botanical {width: 100%; left: 10%; bottom: auto; top: -30px; opacity: .1}.contact-grid {grid-template-columns: 1fr; gap: 21px}.wide {grid-column: auto}.contact-form {padding-top: 0}.consent {font-size: 13px}.submit-button {font-size: 14px; padding-inline: 19px}.form-fallback {font-size: 12px}
  .site-footer {padding-bottom: 85px}.footer-top {align-items: start; flex-direction: column; gap: 22px}.footer-top .text-link {font-size: 12px}.footer-word {font-size: 18vw; margin: 36px 0 28px}.footer-bottom {align-items: start; flex-direction: column; gap: 12px; font-size: 17px}.motion-toggle {right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); padding: 9px 12px; font-size: 10px}
}
@media (max-width: 374px) {
  :root {--gutter: 20px}.brand>span {font-size: 23px}.brand img {width: 39px; height: 39px}.hero-editorial {top: 100px}.hero h1 {font-size: 38px}.hero-editorial>.eyebrow {font-size: 18px}.hero-bottom p {font-size: 14px}
  .vision h2 {font-size: 24px}.about-copy h2,.case-heading h2,.business-heading h2 {font-size: 28px}.native-heading h2 {font-size: 25px}.section-top .chapter {display: none}.service-title {font-size: 33px}.principles>div {grid-template-columns: 80px minmax(0, 1fr)}.contact h2 {font-size: 25px}
}
@media (max-width: 980px) and (orientation: landscape) {.hero {min-height: 0}.hero-landscape {min-height: 510px}.hero h1 {font-size: 37px}.hero-editorial {padding-top: 20px}.contact-intro {position: static}}
@media (prefers-reduced-motion: reduce) {html {scroll-behavior: auto}*,*::before,*::after {animation: none !important; transition: none !important; scroll-behavior: auto !important}[data-reveal],.reveal-image {transform: none !important; opacity: 1 !important}}
body.motion-paused *,body.motion-paused *::before,body.motion-paused *::after {animation-play-state: paused !important; scroll-behavior: auto !important}
@media (max-width: 700px) {.motion-toggle {width:44px;height:44px;padding:0}.motion-label {position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%)}.hero-editorial>.eyebrow br::after {content:" "}}