@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/BeVietnamPro-400-vietnamese.woff2") format("woff2"); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/BeVietnamPro-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/BeVietnamPro-500-vietnamese.woff2") format("woff2"); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/BeVietnamPro-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/BeVietnamPro-600-vietnamese.woff2") format("woff2"); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/BeVietnamPro-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/BeVietnamPro-700-vietnamese.woff2") format("woff2"); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/BeVietnamPro-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/BeVietnamPro-800-vietnamese.woff2") format("woff2"); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/BeVietnamPro-800-latin.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Lora"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/Lora-500-vietnamese.woff2") format("woff2"); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: "Lora"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/Lora-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Lora"; font-style: italic; font-weight: 500; font-display: swap; src: url("../fonts/Lora-500-italic-vietnamese.woff2") format("woff2"); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: "Lora"; font-style: italic; font-weight: 500; font-display: swap; src: url("../fonts/Lora-500-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root {
  --color-warm-ivory: #faf8f3;
  --color-hoi-an-sand: #f2eee5;
  --color-dark-ink: #2e302b;
  --color-muted: #686b62;
  --color-forest-green: #285a4c;
  --color-terracotta: #9c4d35;
  --color-heritage-gold: #d8b979;
  --color-line: rgba(46, 48, 43, .18);
  --color-gold-soft: rgba(216, 185, 121, .22);
  --color-terracotta-soft: rgba(156, 77, 53, .09);
  --section-shadow: 0 24px 70px rgba(46, 48, 43, .08);
  --font-sans: "Be Vietnam Pro", "Avenir Next", Avenir, "Segoe UI", sans-serif;
  --font-serif: "Lora", Georgia, "Times New Roman", serif;
}
*,*::before,*::after { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: 92px; }
body { margin: 0; background: var(--color-warm-ivory); color: var(--color-dark-ink); font: 400 17px/1.7 var(--font-sans); -webkit-font-smoothing: antialiased; }
body,button,input,select,textarea { font-family: var(--font-sans); }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button,input,select,textarea { font-size: inherit; }
:focus-visible { outline: 3px solid #b37744; outline-offset: 3px; }
h1,h2,h3,p,figure { margin-top: 0; }
h1,h2,h3 { font-weight: 600; letter-spacing: -.04em; line-height: 1.16; }
h1 { font-size: clamp(42px, 6vw, 72px); }
h2 { font-size: clamp(34px, 4.5vw, 54px); }
h3 { font-size: clamp(22px, 2vw, 28px); }
h1 em,h2 em { color: var(--color-terracotta); font-family: var(--font-serif); font-weight: 500; letter-spacing: -.045em; }
.container { width: min(1160px, calc(100% - 48px)); margin-inline: auto; }
.section { position: relative; padding-block: clamp(76px, 9vw, 124px); }
.section-sand { background: linear-gradient(180deg, var(--color-hoi-an-sand) 0%, #f4f0e8 78%, #f8f5ef 100%); }
.skip-link { position: fixed; z-index: 100; top: 8px; left: 8px; padding: 10px 14px; transform: translateY(-150%); background: white; color: var(--color-dark-ink); }
.skip-link:focus { transform: translateY(0); }
.site-header { position: sticky; z-index: 30; top: 0; border-bottom: 1px solid rgba(46,48,43,.1); background: rgba(250,248,243,.96); backdrop-filter: blur(12px); }
.site-header--static { position:relative; top:auto; }
body.admin-bar .site-header:not(.site-header--static) { top:32px; }
.header-inner { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 11px; flex: none; color: var(--color-forest-green); }
.brand-mark { width: 38px; height: 38px; }
.brand-mark svg { width: 100%; height: 100%; }
.brand-copy { display: grid; line-height: 1.25; }
.brand-copy strong { font-size: 12px; font-weight: 700; }
.brand-copy span { margin-top: 3px; font-size: 11px; font-weight: 600; letter-spacing: .16em; }
.primary-nav { display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); }
.primary-nav>a:not(.button) { color: #50544c; font-size: 14px; font-weight: 500; white-space: nowrap; }
.primary-nav>a:not(.button):hover,.text-link:hover { color: var(--color-terracotta); }
.brand-image { display: block; width: auto; max-width: 190px; max-height: 52px; object-fit: contain; }
.menu-toggle { display: none; }
.button { min-height: 54px; display: inline-flex; align-items: center; justify-content: center; gap: 14px; padding: 0 22px; border: 1px solid transparent; border-radius: 5px; font-size: 15px; font-weight: 600; line-height: 1.25; cursor: pointer; transition: background-color .2s ease,color .2s ease,transform .2s cubic-bezier(.22,1,.36,1); }
.button-primary { background: var(--color-forest-green); color: white; }
.button-primary:hover { background: #1e463b; }
.button-small { min-height: 44px; padding-inline: 16px; font-size: 14px; }
.text-link { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; }
.hero { overflow: hidden; padding-block: clamp(42px, 6vw, 76px) clamp(72px, 8vw, 108px); background: radial-gradient(circle at 88% 8%, rgba(216,185,121,.2), transparent 29%), radial-gradient(circle at 8% 92%, rgba(40,90,76,.08), transparent 33%); }
.hero::before { position: absolute; inset: 0 48% 0 0; opacity: .42; background-image: url("../images/pattern-hoi-an-lattice.svg?v=1"); background-position: 7% 18%; background-repeat: repeat; background-size: 360px 360px; mask-image: linear-gradient(to right, black, transparent 92%); content: ""; pointer-events: none; }
.hero-grid { position: relative; z-index: 1; }
.hero-grid { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); align-items: center; gap: clamp(38px, 7vw, 88px); }
.hero-copy { max-width: 640px; }
.eyebrow { margin-bottom: 20px; color: var(--color-terracotta); font-size: 13px; font-weight: 600; line-height: 1.5; }
.hero h1 { max-width: 690px; margin-bottom: 24px; }
.hero-lead { max-width: 610px; margin-bottom: 14px; color: #50544c; font-size: 18px; line-height: 1.72; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 20px 26px; }
.story-photo,.audience-photo { margin: 0; }
.hero-motion { position: relative; min-width: 0; overflow: hidden; padding: 25px 27px 20px; border: 1px solid rgba(40,90,76,.19); background: radial-gradient(circle at 100% 0, rgba(216,185,121,.24), transparent 36%), linear-gradient(145deg, rgba(255,255,255,.96), rgba(246,242,232,.94)); box-shadow: 0 22px 70px rgba(46,48,43,.1); }
.hero-motion::after { position: absolute; top: 0; right: 0; width: 84px; height: 84px; border-top: 1px solid rgba(156,77,53,.35); border-right: 1px solid rgba(156,77,53,.35); content: ""; }
.motion-heading,.motion-content,.motion-outcome { position: relative; z-index: 1; }
.motion-heading { min-height: 25px; display: flex; align-items: center; gap: 10px; padding-bottom: 18px; border-bottom: 1px solid rgba(46,48,43,.13); color: #676b62; font-size: 11px; font-weight: 700; letter-spacing: .1em; }
.motion-live-dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--color-terracotta); box-shadow: 0 0 0 4px rgba(156,77,53,.1); }
.motion-location { margin-left: auto; color: var(--color-forest-green); font-size: 10px; letter-spacing: .08em; }
.motion-content { display: grid; grid-template-columns: 20px minmax(0,1fr); gap: 12px; margin: 25px 0 20px; }
.motion-route { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: space-around; }
.motion-route::before { position: absolute; top: 14px; bottom: 14px; left: calc(50% - .5px); border-left: 1px dashed rgba(40,90,76,.3); content: ""; }
.motion-route i { position: relative; z-index: 1; width: 8px; height: 8px; border: 1px solid rgba(40,90,76,.35); border-radius: 50%; background: #faf8f3; }
.motion-runner { position: absolute; z-index: 2; top: 8px; left: 50%; width: 8px; height: 8px; transform: translateX(-50%); border-radius: 50%; background: var(--color-terracotta); box-shadow: 0 0 0 5px rgba(156,77,53,.12); animation: route-travel 10.5s cubic-bezier(.22,1,.36,1) infinite; }
.motion-steps { display: grid; grid-template-rows: repeat(3,1fr); gap: 9px; }
.motion-step { min-width: 0; min-height: 66px; display: grid; grid-template-columns: 29px minmax(0,1fr) auto; align-items: center; gap: 11px; padding: 9px 12px; border: 1px solid rgba(46,48,43,.11); background: rgba(255,255,255,.66); opacity: .65; animation: route-step-focus 10.5s cubic-bezier(.22,1,.36,1) infinite; }
.motion-step:nth-child(2) { animation-delay: 3.5s; }
.motion-step:nth-child(3) { animation-delay: 7s; }
.motion-step-no { color: var(--color-terracotta); font-family: var(--font-serif); font-size: 15px; }
.motion-step>div { display: grid; gap: 4px; min-width: 0; }
.motion-step-label { color: #6b7067; font-size: 12px; }
.motion-step strong { color: var(--color-dark-ink); font-size: 14px; font-weight: 600; line-height: 1.4; }
.motion-channel { padding: 5px 7px; border: 1px solid rgba(40,90,76,.17); color: var(--color-forest-green); font-size: 9px; font-weight: 700; letter-spacing: .08em; white-space: nowrap; }
.motion-outcome { display: flex; align-items: center; gap: 11px; min-height: 65px; padding: 12px 14px; border-left: 2px solid var(--color-terracotta); background: rgba(156,77,53,.07); }
.motion-outcome-icon { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border: 1px solid rgba(156,77,53,.27); border-radius: 50%; color: var(--color-terracotta); font-size: 15px; }
.motion-outcome>span:nth-child(2) { display: grid; gap: 2px; }
.motion-outcome strong { color: #733d2d; font-size: 14px; font-weight: 600; }
.motion-outcome small { color: #686b62; font-size: 12px; line-height: 1.45; }
.motion-map-mark { width: 17px; height: 17px; flex: none; margin-left: auto; border: 1px solid rgba(40,90,76,.3); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); }
@keyframes route-travel { 0%,10% { top: calc(16.6% - 4px); opacity: 1; } 32%,43% { top: calc(50% - 4px); opacity: 1; } 65%,78% { top: calc(83.3% - 4px); opacity: 1; } 94% { opacity: .2; } 100% { top: calc(16.6% - 4px); opacity: 1; } }
@keyframes route-step-focus { 0%,31%,100% { transform: translateX(0); border-color: rgba(46,48,43,.11); background: rgba(255,255,255,.66); opacity: .65; } 5%,27% { transform: translateX(2px); border-color: rgba(156,77,53,.34); background: rgba(255,255,255,.94); opacity: 1; } }
.hero-motion.is-motion-paused .motion-runner,.hero-motion.is-motion-paused .motion-step { animation-play-state: paused; }
.section-heading { margin-bottom: 42px; }
.heading-split,.process-intro { display: grid; grid-template-columns: 1.1fr .9fr; align-items: end; gap: 48px; }
.section-heading h2,.story-copy h2,.process-intro h2,.faq-heading h2 { max-width: 630px; margin-bottom: 0; }
.section-intro { margin: 0; color: var(--color-muted); font-size: 17px; line-height: 1.72; }
.pain-section { overflow: hidden; }
.pain-section::before { position: absolute; top: 0; bottom: 0; left: 0; width: min(36vw,480px); opacity: .28; background: url("../images/pattern-hoi-an-lattice.svg?v=1") repeat 40% 20% / 320px 320px; mask-image: linear-gradient(to right, black, transparent 90%); content: ""; pointer-events: none; }
.pain-section::after { position: absolute; right: -12%; bottom: -150px; width: 520px; height: 300px; border-radius: 50%; background: radial-gradient(ellipse, rgba(156,77,53,.1), transparent 67%); content: ""; pointer-events: none; }
.story-layout { position: relative; z-index: 1; display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: clamp(42px, 8vw, 110px); }
.story-photo img { width: 100%; height: 610px; object-fit: cover; object-position: 40% center; }
.story-photo figcaption { padding-top: 12px; color: #72746c; font-size: 13px; }
.story-copy h2 { margin-bottom: 18px; }
.story-copy .section-intro { max-width: 540px; margin-bottom: 28px; }
.concern-list { margin: 0; padding: 0; list-style: none; }
.concern-list li { padding: 17px 0; border-top: 1px solid var(--color-line); font-size: 17px; }
.concern-list li:last-child { border-bottom: 1px solid var(--color-line); }
.proof-section { background: var(--color-forest-green); color: white; }
.proof-layout { display: grid; grid-template-columns: .85fr 1.15fr; align-items: start; gap: clamp(44px, 8vw, 110px); }
.proof-copy .eyebrow { color: var(--color-heritage-gold); }
.proof-copy h2 { max-width: 560px; margin-bottom: 20px; }
.proof-copy h2 em { color: #f0cf91; }
.proof-copy .section-intro { max-width: 530px; color: rgba(255,255,255,.76); }
.proof-flow { margin: 0; padding: 0; border-top: 1px solid rgba(255,255,255,.22); list-style: none; counter-reset: proof-step; }
.proof-flow li { min-height: 86px; display: grid; grid-template-columns: minmax(100px,.55fr) minmax(0,1fr); align-items: center; gap: 24px; padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,.22); }
.proof-flow span { color: #f0cf91; font-size: 14px; font-weight: 600; }
.proof-flow strong { font-size: 17px; font-weight: 500; line-height: 1.55; }
.combo-section { overflow: hidden; background: linear-gradient(180deg, #faf8f3 0%, #fffdf8 54%, #f6f1e8 100%); }
.combo-pattern { position: absolute; top: 0; right: 0; width: min(58vw, 820px); height: 100%; opacity: .44; background-image: url("../images/pattern-hoi-an-lattice.svg?v=1"), radial-gradient(circle at 76% 28%, rgba(216,185,121,.22), transparent 34%); background-position: 100% 12%, center; background-repeat: repeat, no-repeat; background-size: 360px 360px, cover; mask-image: linear-gradient(to left, black, transparent); pointer-events: none; }
.combo-section .container { position: relative; z-index: 1; }
.combo-heading { display: grid; grid-template-columns: 1.12fr .88fr; align-items: end; gap: 52px; }
.combo-heading h2 { max-width: 720px; margin-bottom: 0; }
.combo-heading .section-intro { max-width: 470px; justify-self: end; }
.card-list-region { min-width: 0; }
.card-slider-controls { display: none; }
.combo-grid { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); }
.combo-item { position: relative; min-width: 0; min-height: 348px; display: flex; flex-direction: column; padding: 30px 30px 31px; background: rgba(255,255,255,.5); }
.combo-item+.combo-item { border-left: 1px solid var(--color-line); }
.combo-number { color: var(--color-terracotta); font-family: var(--font-serif); font-size: 14px; }
.combo-icon { width: 54px; height: 54px; display: grid; place-items: center; margin: 50px 0 24px; border: 1px solid rgba(40,90,76,.24); border-radius: 50%; color: var(--color-forest-green); background: rgba(255,255,255,.58); }
.combo-icon svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; }
.combo-item h3 { margin-bottom: 11px; font-size: 25px; }
.combo-item p { max-width: 290px; margin: auto 0 0; color: var(--color-muted); font-size: 16px; line-height: 1.65; }
.combo-item::after { position: absolute; right: 30px; bottom: 24px; width: 26px; height: 26px; border-right: 1px solid rgba(40,90,76,.16); border-bottom: 1px solid rgba(40,90,76,.16); content: ""; }
.combo-item:nth-child(2)::after { right: 24px; bottom: 30px; transform: rotate(90deg); }
.combo-item:nth-child(3)::after { right: 31px; bottom: 24px; transform: rotate(180deg); }
.combo-support { position: relative; }
.combo-support::before { position: absolute; top: -16px; left: 0; width: min(44%, 480px); border-top: 1px dashed rgba(40,90,76,.24); content: ""; }
.combo-support { display: grid; grid-template-columns: repeat(3,1fr); align-items: start; gap: 28px; margin-top: 30px; }
.combo-support p { display: grid; gap: 6px; margin: 0; }
.combo-support p span { color: var(--color-terracotta); font-size: 13px; font-weight: 600; }
.combo-support p strong { max-width: 300px; font-size: 15px; font-weight: 500; line-height: 1.6; }
.combo-support .text-link { grid-column: 1 / -1; justify-self: start; }
.audiences-section { overflow: hidden; background: radial-gradient(circle at 0 35%, rgba(40,90,76,.065), transparent 28%), var(--color-warm-ivory); }
.audiences-section .section-heading { margin-bottom: 52px; }
.audience-grid { display: grid; grid-template-columns: 1.08fr 1fr 1fr; align-items: stretch; gap: clamp(18px, 2.3vw, 32px); }
.audience-item { min-width: 0; display: flex; flex-direction: column; border: 1px solid rgba(46,48,43,.13); background: rgba(255,255,255,.5); box-shadow: 0 18px 50px rgba(46,48,43,.055); }
.audience-photo { overflow: hidden; background: #e5dfd2; }
.audience-photo img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .6s ease; }
.audience-workshop .audience-photo img { aspect-ratio: 1 / 1; }
.audience-workshop .audience-photo img { object-position: 50% 48%; }
.audience-tour .audience-photo img { object-position: 52% center; }
.audience-restaurant .audience-photo img { object-position: center; }
.audience-item:hover .audience-photo img { transform: scale(1.025); }
.audience-content { flex: 1; display: flex; flex-direction: column; padding: 23px 24px 25px; }
.audience-index { display: block; margin-bottom: 17px; color: var(--color-terracotta); font-family: var(--font-serif); font-size: 13px; }
.audience-content h3 { margin-bottom: 10px; }
.audience-content p { margin-bottom: 24px; color: var(--color-muted); font-size: 16px; line-height: 1.65; }
.audience-content .text-link { margin-top: auto; }
.text-link-green { color: var(--color-forest-green); }
.motion-ready .reveal-item { opacity: 0; transform: translateY(18px); transition: opacity .58s cubic-bezier(.22,1,.36,1),transform .58s cubic-bezier(.22,1,.36,1); transition-delay: var(--reveal-delay,0ms); }
.motion-ready .reveal-item.is-visible { opacity: 1; transform: translateY(0); }
.process-section { overflow: hidden; }
.process-section::before { position: absolute; top: -160px; left: 12%; width: 720px; height: 320px; border-radius: 50%; background: radial-gradient(ellipse, rgba(216,185,121,.2), transparent 68%); content: ""; pointer-events: none; }
.process-section .container { position: relative; z-index: 1; }
.process-intro { margin-bottom: 52px; }
.process-intro h2 { max-width: 590px; }
.process-intro .section-intro { max-width: 490px; padding-bottom: 3px; }
.process-steps { display: grid; grid-template-columns: repeat(4,1fr); margin: 0; padding: 0; border-top: 1px solid var(--color-line); list-style: none; }
.process-steps li { min-height: 184px; padding: 23px 22px 20px 0; border-bottom: 1px solid var(--color-line); }
.process-steps li+li { padding-left: 22px; border-left: 1px solid var(--color-line); }
.step-no { display: block; margin-bottom: 34px; color: var(--color-terracotta); font-family: var(--font-serif); font-size: 18px; }
.process-steps h3 { margin-bottom: 9px; font-size: 21px; }
.process-steps p { max-width: 235px; margin-bottom: 0; color: var(--color-muted); font-size: 15px; line-height: 1.6; }
.cost-ownership { display: grid; grid-template-columns: .78fr 1.22fr; gap: 42px; margin-top: 38px; padding: 30px; border: 1px solid rgba(40,90,76,.18); background: rgba(255,255,255,.58); }
.cost-ownership h3 { max-width: 420px; margin-bottom: 0; font-size: 25px; }
.cost-ownership ul { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 28px; margin: 0; padding: 0; list-style: none; }
.cost-ownership li { color: var(--color-muted); font-size: 15px; line-height: 1.65; }
.cost-ownership li strong { display: block; color: var(--color-dark-ink); font-weight: 600; }
.process-cta { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--color-line); }
.process-cta p { margin: 0; font-size: 17px; font-weight: 500; }
.faq-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(40px, 8vw, 104px); }
.faq-heading h2 { margin-bottom: 16px; }
.faq-heading .section-intro { margin-bottom: 23px; }
.faq-list { border-top: 1px solid var(--color-line); }
.faq-item { border-bottom: 1px solid var(--color-line); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 0; font-size: 17px; font-weight: 600; line-height: 1.5; cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary i { position: relative; width: 18px; height: 18px; flex: none; }
.faq-item summary i::before,.faq-item summary i::after { position: absolute; top: 8px; left: 2px; width: 14px; height: 1.5px; background: var(--color-terracotta); content: ""; }
.faq-item summary i::after { transform: rotate(90deg); transition: transform .2s ease; }
.faq-item[open] summary i::after { transform: rotate(0); }
.faq-answer { padding: 0 30px 18px 0; color: var(--color-muted); font-size: 16px; line-height: 1.7; }
.faq-answer p { margin-bottom: 0; }
.faq-item[open] .faq-answer { animation: faq-answer-in .32s cubic-bezier(.22,1,.36,1) both; }
@keyframes faq-answer-in { from { opacity: 0; transform: translateY(-7px); } to { opacity: 1; transform: translateY(0); } }
.consultation-section { background: var(--color-dark-ink); color: white; }
.consultation-wrap { display: grid; grid-template-columns: .9fr 1.1fr; align-items: start; gap: clamp(38px, 7vw, 84px); }
.eyebrow-light { color: var(--color-heritage-gold); }
.consultation-copy { padding-top: 8px; }
.consultation-copy h2 { max-width: 560px; margin-bottom: 18px; font-size: clamp(36px, 4.5vw, 54px); }
.consultation-copy>p:not(.eyebrow) { max-width: 520px; color: rgba(255,255,255,.77); font-size: 17px; }
.consultation-points { display: grid; gap: 11px; margin-top: 24px; }
.consultation-points span { display: flex; align-items: center; gap: 11px; color: rgba(255,255,255,.88); font-size: 15px; }
.consultation-points i { width: 18px; height: 18px; border: 1px solid rgba(216,185,121,.7); border-radius: 50%; }
.consultation-form { padding: clamp(22px, 3vw, 36px); background: var(--color-warm-ivory); color: var(--color-dark-ink); }
.form-heading { margin-bottom: 22px; }
.form-kicker { color: var(--color-terracotta); font-size: 13px; font-weight: 600; }
.form-heading h3 { margin: 6px 0; font-size: 25px; }
.form-heading p { margin: 0; color: var(--color-muted); font-size: 14px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-field { display: grid; align-content: start; gap: 7px; }
.form-field-full { grid-column: 1 / -1; }
.form-field label { font-size: 15px; font-weight: 500; }
.form-field label>span:first-child { color: var(--color-terracotta); }
.form-field label .optional { margin-left: 5px; color: var(--color-muted); font-size: 13px; font-weight: 400; }
.form-field input,.form-field select,.form-field textarea { width: 100%; min-height: 48px; padding: 11px 12px; border: 1px solid #d5d3ca; border-radius: 4px; background: white; color: var(--color-dark-ink); font-size: 16px; outline: none; }
.form-field textarea { min-height: 88px; resize: vertical; }
.form-field input:focus,.form-field select:focus,.form-field textarea:focus { border-color: var(--color-forest-green); box-shadow: 0 0 0 3px rgba(40,90,76,.14); }
.form-field [aria-invalid="true"] { border-color: #a33b2a; }
.field-error { min-height: 0; color: #9d3327; font-size: 13px; line-height: 1.4; }
.field-error:not(:empty) { min-height: 17px; }
.field-help { color: var(--color-muted); font-size: 13px; line-height: 1.45; }
.form-submit { width: 100%; margin-top: 14px; }
.form-notice { margin: 14px 0 0 !important; padding: 12px 14px; border-left: 3px solid var(--color-terracotta); background: rgba(156,77,53,.08); color: #5c382d !important; font-size: 14px !important; line-height: 1.55; }
.form-status { margin-top: 10px; color: #565a51; font-size: 14px; line-height: 1.55; }
.form-status:empty { display: none; }
.form-status.is-error { color: #9d3327; }
.site-footer { padding: 64px 0 0; background: #242923; color: rgba(255,255,255,.78); }
.footer-main { display: grid; grid-template-columns: 1.3fr .8fr .9fr 1fr; gap: 34px; padding-bottom: 46px; }
.brand-footer { color: var(--color-heritage-gold); }
.footer-brand-column>p { max-width: 340px; margin: 18px 0; color: rgba(255,255,255,.68); font-size: 14px; }
.footer-local { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.footer-local i { width: 7px; height: 7px; border-radius: 50%; background: var(--color-heritage-gold); }
.footer-nav-column { display: grid; align-content: start; justify-items: start; gap: 11px; }
.footer-nav-column h2,.footer-note-column h2 { margin: 0 0 7px; color: var(--color-heritage-gold); font-size: 14px; font-weight: 600; letter-spacing: .02em; }
.footer-nav-column a { font-size: 14px; }
.footer-nav-column a:hover { color: white; }
.footer-contact-pending { color: rgba(255,255,255,.62); font-size: 13px; line-height: 1.6; }
.footer-note-column { align-self: start; padding: 20px; border: 1px solid rgba(255,255,255,.18); }
.footer-note-icon { width: 30px; display: block; margin-bottom: 12px; color: var(--color-heritage-gold); }
.footer-note-icon svg { fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.footer-note-column p { margin: 0; color: rgba(255,255,255,.68); font-size: 14px; }
.footer-bottom { min-height: 64px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; border-top: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.62); font-size: 13px; }
.mobile-contact-bar { display: none; }

@media (hover: hover) and (pointer: fine) {
  .button:hover { transform: translateY(-2px); }
}
@media (max-width: 1023px) {
  .card-list-region { width: calc(100% + 24px); overflow: hidden; }
  .card-slider-track { display: flex; gap: 20px; overflow-x: auto; padding: 1px 24px 25px 1px; border: 0; scroll-padding-inline: 1px 24px; scroll-snap-type: inline mandatory; scrollbar-width: none; overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; }
  .card-slider-track::-webkit-scrollbar { display: none; }
  .card-slider-track>* { min-width: 0; flex: 0 0 min(43.5%,420px); scroll-snap-align: start; scroll-snap-stop: always; }
  .combo-item,.combo-item+.combo-item { border: 1px solid var(--color-line); }
  .audience-item { box-shadow: 0 13px 36px rgba(46,48,43,.07); }
  .audience-photo img,.audience-workshop .audience-photo img,.audience-tour .audience-photo img,.audience-restaurant .audience-photo img { aspect-ratio: 4 / 3; }
  .audience-item.is-active .audience-photo img { transform: scale(1.015); }
  .card-slider-controls { width: calc(100% - 24px); display: flex; align-items: center; justify-content: space-between; margin-top: 2px; }
  .card-slider-controls button { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid rgba(40,90,76,.22); border-radius: 50%; background: rgba(255,255,255,.82); color: var(--color-forest-green); font-size: 20px; cursor: pointer; transition: transform .2s cubic-bezier(.22,1,.36,1),background-color .2s ease,border-color .2s ease; }
  .card-slider-controls button:active { transform: scale(.94); }
  .card-slider-status { display: inline-flex; align-items: center; gap: 10px; color: var(--color-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
  .card-slider-status strong { color: var(--color-dark-ink); font-size: 15px; }
  .card-slider-status i { width: 46px; height: 1px; background: var(--color-line); }
}
@media (max-width: 900px) {
  .container { width: min(100% - 40px, 720px); }
  .header-inner { min-height: 72px; }
  .menu-toggle { width: 42px; height: 42px; display: grid; align-content: center; justify-items: center; gap: 6px; border: 1px solid var(--color-line); background: transparent; color: var(--color-dark-ink); }
  .menu-toggle span { width: 18px; height: 1.5px; background: currentColor; transition: transform .22s cubic-bezier(.22,1,.36,1),opacity .18s ease; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
  .primary-nav { position: absolute; top: calc(100% + 1px); right: 0; left: 0; display: grid; align-items: stretch; padding: 12px 20px 20px; border-bottom: 1px solid var(--color-line); background: var(--color-warm-ivory); box-shadow: 0 18px 35px rgba(46,48,43,.08); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-9px); transition: opacity .2s ease,transform .24s cubic-bezier(.22,1,.36,1),visibility .2s; }
  .primary-nav.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
  body.menu-open { overflow: hidden; }
  .primary-nav>a:not(.button) { padding: 10px 0; font-size: 16px; }
  .nav-cta { justify-self: start; margin-top: 5px; }
  .hero-grid { grid-template-columns: 1fr; gap: 26px; }
  .hero-copy { max-width: 700px; }
  .hero-motion { width: 100%; max-width: 620px; justify-self: center; }
  .story-layout { grid-template-columns: .85fr 1.15fr; gap: 36px; }
  .story-photo img { height: 500px; }
  .proof-layout { grid-template-columns: 1fr; gap: 34px; }
  .proof-copy { max-width: 700px; }
  .combo-heading { grid-template-columns: 1fr; align-items: start; gap: 20px; }
  .combo-heading .section-intro { max-width: 650px; justify-self: start; }
  .combo-item { min-height: 330px; padding-inline: 22px; }
  .combo-support { grid-template-columns: 1fr 1fr; }
  .combo-support .text-link { grid-column: 1 / -1; }
  .audience-grid { gap: 20px; }
  .audience-restaurant { display: flex; }
  .audience-restaurant .audience-photo img { height: auto; aspect-ratio: 4 / 3; }
  .audience-content p { min-height: 0; }
  .process-steps { grid-template-columns: 1fr 1fr; }
  .process-steps li:nth-child(3) { padding-left: 0; border-left: 0; }
  .cost-ownership { grid-template-columns: 1fr; gap: 24px; }
  .process-steps h3 { font-size: 19px; }
  .footer-main { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  html { scroll-padding-top: 76px; }
  body { font-size: 16px; }
  .container { width: calc(100% - 40px); }
  .section { padding-block: 68px; }
  h1 { font-size: clamp(40px, 10.5vw, 48px); }
  h2 { font-size: clamp(34px, 8.5vw, 42px); }
  .hero { padding-top: 32px; padding-bottom: 24px; }
  .hero::before { inset: 0 12% 35% 0; }
  .hero h1 { margin-bottom: 18px; }
  .eyebrow { margin-bottom: 15px; font-size: 12px; }
  .hero-lead { font-size: 17px; }
  .hero-actions { align-items: center; gap: 17px 22px; }
  .hero-motion { min-height: 0; padding: 18px 14px 14px; }
  .motion-heading { gap: 8px; padding-bottom: 15px; font-size: 10px; letter-spacing: .075em; }
  .motion-location { display: none; }
  .motion-content { grid-template-columns: 16px minmax(0,1fr); gap: 8px; margin-block: 16px; }
  .motion-route { min-height: 0; }
  .motion-steps { gap: 8px; }
  .motion-step { min-height: 54px; grid-template-columns: 23px minmax(0,1fr); gap: 8px; padding: 7px 9px; }
  .motion-step strong { font-size: 14px; line-height: 1.35; }
  .motion-step-label { font-size: 12px; }
  .motion-channel { display: none; }
  .motion-outcome { gap: 9px; padding-inline: 10px; }
  .motion-outcome strong { font-size: 14px; }
  .motion-outcome small { font-size: 12px; }
  .heading-split,.process-intro,.story-layout,.faq-layout,.consultation-wrap { grid-template-columns: 1fr; gap: 26px; }
  .section-heading { margin-bottom: 30px; }
  .section-intro { font-size: 16px; }
  .story-layout { gap: 34px; }
  .story-photo img { height: 370px; }
  .concern-list li { font-size: 16px; }
  .proof-flow li { grid-template-columns: 94px minmax(0,1fr); gap: 16px; }
  .combo-heading { margin-bottom: 30px; }
  .card-list-region { width: calc(100% + 20px); }
  .card-slider-track { gap: 14px; padding-right: 20px; scroll-padding-right: 20px; }
  .card-slider-track>* { flex-basis: calc(100% - 28px); }
  .card-slider-controls { width: calc(100% - 20px); margin-top: 0; }
  .combo-item { min-height: 0; padding: 24px; border: 1px solid var(--color-line); background: rgba(255,255,255,.65); }
  .combo-item+.combo-item { border-left: 1px solid var(--color-line); }
  .combo-item::after { right: 24px; bottom: 20px; }
  .combo-support::before { top: -13px; width: 100%; }
  .combo-icon { margin: 30px 0 22px; }
  .combo-support { grid-template-columns: 1fr; gap: 20px; margin-top: 28px; }
  .combo-support .text-link { grid-column: auto; margin-top: 4px; }
  .audiences-section .section-heading { margin-bottom: 32px; }
  .audience-grid { gap: 14px; }
  .audience-restaurant { grid-column: auto; display: flex; }
  .audience-photo img,.audience-workshop .audience-photo img,.audience-tour .audience-photo img,.audience-restaurant .audience-photo img { height: auto; aspect-ratio: 4 / 3; }
  .audience-content { padding: 20px 20px 22px; }
  .audience-content p { min-height: 0; margin-bottom: 13px; font-size: 16px; }
  .audience-content .text-link { margin-top: 8px; }
  .process-intro { margin-bottom: 32px; }
  .process-steps { display: block; border-top: 0; }
  .process-steps li { position: relative; min-height: 0; padding: 5px 0 28px 56px; border-bottom: 0; }
  .process-steps li+li { padding-left: 56px; border-left: 0; }
  .process-steps li:nth-child(3) { padding-left: 56px; }
  .process-steps li:not(:last-child)::after { position: absolute; top: 31px; bottom: 3px; left: 17px; border-left: 1px dashed rgba(40,90,76,.32); content: ""; }
  .process-steps h3 { font-size: 18px; }
  .process-steps p { font-size: 14px; }
  .step-no { position: absolute; top: 0; left: 0; width: 35px; height: 35px; display: grid; place-items: center; margin: 0; border: 1px solid rgba(40,90,76,.24); border-radius: 50%; background: var(--color-warm-ivory); font-size: 14px; }
  .cost-ownership { margin-top: 26px; padding: 22px 20px; }
  .cost-ownership h3 { font-size: 22px; }
  .cost-ownership ul { grid-template-columns: 1fr; gap: 16px; }
  .process-cta { align-items: flex-start; flex-direction: column; margin-top: 25px; }
  .faq-layout { gap: 30px; }
  .faq-item summary { padding: 17px 0; font-size: 16px; }
  .faq-answer { font-size: 15px; }
  .consultation-wrap { gap: 34px; }
  .consultation-copy h2 { font-size: 40px; }
  .consultation-copy>p:not(.eyebrow) { font-size: 16px; }
  .form-grid { grid-template-columns: 1fr; gap: 13px; }
  .form-field-full { grid-column: auto; }
  .consultation-form { padding: 22px 18px; }
  .footer-main { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .footer-brand-column { grid-column: 1 / -1; }
  .footer-note-column { grid-column: 1 / -1; }
  .footer-bottom { justify-content: flex-start; padding-block: 15px; }
  .mobile-contact-bar { position: fixed; z-index: 40; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: 1fr; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(46,48,43,.12); background: rgba(250,248,243,.97); box-shadow: 0 -8px 24px rgba(46,48,43,.08); backdrop-filter: blur(12px); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(110%); transition: opacity .2s ease,transform .34s cubic-bezier(.22,1,.36,1),visibility .34s; }
  body.show-mobile-cta:not(.is-form-editing) .mobile-contact-bar { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
  body { padding-bottom: 76px; }
  .mobile-action { min-height: 46px; display: flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid rgba(40,90,76,.16); border-radius: 4px; background: white; color: var(--color-forest-green); font-size: 14px; font-weight: 600; }
  .mobile-action-primary { border-color: var(--color-forest-green); background: var(--color-forest-green); color: white; }
}

/* Business pages share the homepage palette while keeping long-form content calm and readable. */
.inner-page { min-height: 60vh; }
.page-hero { position: relative; overflow: hidden; padding: 20px 0 clamp(68px, 9vw, 112px); background: radial-gradient(circle at 88% 18%, rgba(216,185,121,.22), transparent 28%), linear-gradient(180deg,#faf8f3,#fffdf8); }
.page-hero::after { position:absolute; inset:0 0 0 auto; width:36%; opacity:.23; background:url("../images/pattern-hoi-an-lattice.svg?v=1") repeat 30% 20% / 340px; mask-image:linear-gradient(to left,#000,transparent); content:""; pointer-events:none; }
.page-hero .container { position:relative; z-index:1; }
.breadcrumbs { display:flex; flex-wrap:wrap; align-items:center; gap:10px; color:var(--color-muted); font-size:13px; }
.breadcrumbs a { color:inherit; text-decoration:none; }
.breadcrumbs a:hover { color:var(--color-forest-green); text-decoration:underline; }
.page-hero-copy { max-width:820px; padding-top:clamp(42px,7vw,86px); }
.page-hero-image { max-width:820px; margin:36px 0 0; }
.page-hero-image img { display:block; width:100%; height:auto; border-radius:6px; box-shadow:0 24px 70px rgba(46,48,43,.12); }
.page-hero-image figcaption { padding-top:8px; color:var(--color-muted); font-size:13px; }
.page-hero-copy .eyebrow { margin-bottom:18px; }
.page-hero h1 { max-width:780px; margin:0 0 22px; font-family:var(--font-display,"Lora",serif); font-size:clamp(42px,7vw,78px); line-height:1.05; letter-spacing:-.045em; }
.page-deck { max-width:700px; margin:0; color:#50544c; font-size:clamp(17px,2vw,20px); line-height:1.75; }
.page-hero-actions { margin-top:30px; }
.page-section { position:relative; padding-block:clamp(62px,8vw,100px); }
.page-section:nth-of-type(even),.page-section-sand { background:linear-gradient(180deg,#f4f0e8,#faf8f3); }
.page-section-forest { background:var(--color-forest-green); color:#fff; }
.page-section .container { max-width:1000px; }
.page-section h2,.page-faq h2,.page-contact h2 { max-width:800px; margin:0 0 18px; font-family:var(--font-display,"Lora",serif); font-size:clamp(30px,4.4vw,48px); line-height:1.16; letter-spacing:-.025em; }
.page-section .section-intro { max-width:760px; margin:0 0 28px; font-size:18px; line-height:1.72; }
.page-section-body { max-width:780px; color:var(--color-muted); font-size:17px; line-height:1.8; }
.page-section-body p { margin:0 0 16px; }
.page-section-forest .page-section-body,.page-section-forest .section-intro { color:rgba(255,255,255,.78); }
.page-points { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px 26px; padding:0; margin:28px 0 0; list-style:none; }
.page-points li { position:relative; padding:4px 0 4px 28px; color:#41463f; line-height:1.65; }
.page-points li::before { position:absolute; top:.68em; left:2px; width:10px; height:10px; border:2px solid #bd7518; border-radius:50%; content:""; }
.page-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:32px; }
.page-card { min-height:190px; padding:26px; border:1px solid rgba(40,90,76,.13); background:rgba(255,255,255,.85); box-shadow:0 14px 44px rgba(46,48,43,.055); }
.page-card-mark { display:block; width:30px; height:3px; margin-bottom:20px; background:#bd7518; }
.page-card h3 { margin:0 0 12px; font-size:20px; line-height:1.35; }
.page-card p { margin:0; color:var(--color-muted); line-height:1.7; }
.page-section-forest .page-card { color:var(--color-dark-ink); }
.page-section-forest .page-card p { color:#50544c; }
.page-section:not(.page-section-forest) .eyebrow,.page-faq .eyebrow { color:#93412b; }
.page-section-forest .eyebrow { color:#f1c97c; }
.page-card small { display:block; margin-top:12px; color:#765331; font-size:13px; }
.page-section-image { max-width:780px; margin:26px 0; }
.page-section-image img { display:block; width:100%; height:auto; border-radius:4px; }
.page-hero-image img.ha01-no-image,
.page-section-image img.ha01-no-image,
.story-feature img.ha01-no-image,
.audience-feature img.ha01-no-image { object-fit:contain; background:#f2efe8; }
.ha01-no-image { color:transparent; }
.mockup-screen img.ha01-no-image { object-fit:contain; background:#f2efe8; }
.page-section-image figcaption { padding-top:8px; color:var(--color-muted); font-size:13px; }
.page-inline-cta { margin:30px 0 0; }
.button-outline { border:1px solid currentColor; background:transparent; color:var(--color-forest-green); }
.page-faq { padding-block:clamp(62px,8vw,96px); background:#f4f0e8; }
.page-faq .container { max-width:900px; }
.page-faq-list { margin-top:28px; border-top:1px solid rgba(44,55,47,.18); }
.page-faq-item { padding:20px 0; border-bottom:1px solid rgba(44,55,47,.18); }
.page-faq-item summary { cursor:pointer; font-weight:700; line-height:1.55; }
.page-faq-item summary:focus-visible { outline:2px solid #bd7518; outline-offset:5px; }
.page-faq-item div { max-width:760px; padding-top:12px; color:var(--color-muted); line-height:1.75; }
.page-contact { background:var(--color-dark-ink); color:#fff; }
.contact-layout { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(32px,7vw,84px); align-items:start; }
.contact-layout>div>p:not(.eyebrow) { color:rgba(255,255,255,.76); line-height:1.75; }
.page-consultation-form { display:grid; gap:18px; padding:clamp(22px,4vw,38px); border-radius:8px; background:#fff; color:#232721; }
.page-consultation-form .form-field { display:grid; gap:8px; }
.page-consultation-form label { font-size:14px; font-weight:600; }
.page-consultation-form input,.page-consultation-form textarea { width:100%; min-height:48px; padding:12px 14px; border:1px solid #d7d8d2; border-radius:4px; font:inherit; }
.page-consultation-form textarea { resize:vertical; }
.page-consultation-form input:focus,.page-consultation-form textarea:focus { outline:2px solid #bd7518; outline-offset:1px; }
.page-consultation-form .form-notice,.privacy-note { padding:13px; background:#f5f1e9; color:#555950; font-size:13px; line-height:1.6; }
.privacy-note { margin:0; }
.privacy-note a { color:var(--color-forest-green); }
.page-consultation-form small { color:#62675f; line-height:1.5; }
.page-consultation-form .field-error { color:#a63227; }
.neutral-status,.privacy-pending { max-width:760px; padding:32px; border-left:3px solid #bd7518; background:#f6f2e9; }
.neutral-status p,.privacy-pending p { color:var(--color-muted); line-height:1.75; }
.expansion-content { max-width:850px !important; color:var(--color-muted); font-size:17px; line-height:1.8; }
.expansion-content h2 { margin:36px 0 12px; color:var(--color-dark-ink); font-family:var(--font-display,"Lora",serif); font-size:30px; }
.expansion-content img { max-width:100%; height:auto; }
@media (max-width:760px) { .contact-layout { grid-template-columns:1fr; } .page-cards { grid-template-columns:1fr; } .page-card { min-height:0; } }
@media (max-width:520px) { .page-points { grid-template-columns:1fr; gap:10px; } .breadcrumbs { font-size:12px; } .page-hero-copy { padding-top:42px; } .page-hero h1 { font-size:clamp(38px,12vw,54px); } .page-section .section-intro { font-size:16px; } }
@media (max-width: 430px) {
  .hero-actions { align-items: flex-start; }
  .hero-actions .button { width: 100%; }
  .motion-outcome small,.motion-map-mark { display: none; }
  .motion-outcome { min-height: 54px; }
}

/* WordPress primary navigation */
.primary-panel { display:flex; align-items:center; gap:clamp(18px,2.2vw,32px); }
.primary-panel-head,.primary-scrim { display:none; }
.primary-nav { display:flex; align-items:center; gap:clamp(14px,1.7vw,24px); padding:0; margin:0; list-style:none; }
.primary-nav li { position:relative; display:flex; align-items:center; gap:4px; }
.primary-nav .menu-link { display:inline-flex; align-items:center; min-height:44px; color:#50544c; font-size:14px; font-weight:500; }
.primary-nav .menu-item-has-children > .menu-link { padding-right:0; }
.primary-nav .menu-link:hover,.primary-nav .current-menu-item > .menu-link,.primary-nav .current-menu-ancestor > .menu-link { color:var(--color-terracotta); }
.submenu-toggle { width:30px; height:34px; display:inline-grid; place-items:center; padding:0; border:0; border-radius:4px; background:transparent; color:var(--color-dark-ink); cursor:pointer; }
.submenu-toggle:hover,.submenu-toggle:focus-visible { background:rgba(40,90,76,.08); }
.submenu-chevron { width:8px; height:8px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:translateY(-2px) rotate(45deg); transition:transform .18s ease; }
.submenu-toggle[aria-expanded="true"] .submenu-chevron { transform:translateY(2px) rotate(225deg); }
.sub-menu { position:absolute; z-index:40; top:calc(100% - 1px); left:0; min-width:248px; max-width:min(340px,calc(100vw - 32px)); display:grid; gap:2px; padding:9px; margin:0; border:1px solid var(--color-line); background:var(--color-warm-ivory); box-shadow:0 18px 42px rgba(32,41,35,.14); list-style:none; }
.sub-menu li { display:flex; width:100%; }
.sub-menu .menu-link { flex:1; min-width:0; padding:9px 11px; border-radius:4px; white-space:normal; line-height:1.45; }
.sub-menu .menu-link:hover,.sub-menu .current-menu-item > .menu-link { background:rgba(40,90,76,.07); }
.sub-menu .submenu-toggle { flex:none; width:38px; height:42px; }
.sub-menu .sub-menu { top:-10px; left:calc(100% - 1px); }
.sub-menu .submenu-is-open > .sub-menu { display:grid; }
html.has-js .primary-nav .sub-menu { display:none; }
html.has-js .primary-nav .submenu-is-open > .sub-menu { display:grid; }
.menu-item-submenu-left > .sub-menu { right:calc(100% - 1px); left:auto; }
.sub-menu-level-4,.sub-menu-level-5,.sub-menu-level-6 { max-height:min(70vh,520px); overflow-y:auto; }
.primary-panel .nav-cta { flex:none; }
.menu-toggle,.menu-close { cursor:pointer; }
.menu-toggle,.menu-close,.submenu-toggle { -webkit-tap-highlight-color:transparent; }

@media (max-width:1100px) and (min-width:901px) {
  .header-inner { gap:16px; }
  .brand { gap:8px; }
  .brand-image { max-width:150px; }
  .primary-panel { gap:14px; }
  .primary-nav { gap:12px; }
  .primary-nav .menu-link { font-size:13px; }
}

@media (max-width:900px) {
  .header-inner--fallback { flex-wrap:wrap; }
  body.admin-bar .primary-panel,body.admin-bar .primary-scrim { top:118px; }
  body.admin-bar .site-header:not(.site-header--static) { top:46px; }
  .header-inner { min-height:72px; }
  html.has-js .menu-toggle { width:44px; height:44px; display:grid; flex:none; align-content:center; justify-items:center; gap:6px; border:1px solid var(--color-line); background:transparent; color:var(--color-dark-ink); }
  html.has-js .menu-toggle span { width:19px; height:1.5px; background:currentColor; transition:transform .2s ease; }
  html.has-js .menu-toggle[aria-expanded="true"] span:first-child { transform:translateY(3.75px) rotate(45deg); }
  html.has-js .menu-toggle[aria-expanded="true"] span:last-child { transform:translateY(-3.75px) rotate(-45deg); }
  .primary-panel { position:fixed; z-index:52; top:72px; right:0; bottom:0; width:min(440px,100vw); height:calc(100vh - 72px); height:calc(100dvh - 72px); display:flex; flex-direction:column; align-items:stretch; gap:0; padding:0 20px max(24px,env(safe-area-inset-bottom)); overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; background:var(--color-warm-ivory); box-shadow:-18px 0 45px rgba(32,41,35,.13); transform:translateX(105%); visibility:hidden; transition:transform .24s cubic-bezier(.22,1,.36,1),visibility .24s; }
  body.admin-bar .primary-panel { height:calc(100vh - 118px); height:calc(100dvh - 118px); }
  .primary-panel.is-open { transform:translateX(0); visibility:visible; }
  .primary-panel--fallback { position:static; order:3; flex:0 0 100%; width:100%; height:auto; padding:0 20px; overflow:visible; transform:none; visibility:visible; box-shadow:none; }
  .primary-panel--fallback .primary-panel-head { display:none; }
  .primary-panel-head { min-height:64px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--color-line); color:var(--color-dark-ink); font-size:15px; font-weight:700; }
  .menu-close { width:44px; height:44px; display:grid; place-items:center; border:1px solid var(--color-line); background:transparent; color:var(--color-dark-ink); font-size:30px; line-height:1; }
  .primary-nav-wrap { width:100%; }
  /* Reset the legacy compact-nav popover rules: the mobile drawer owns its visibility. */
  .primary-nav { position:static; inset:auto; display:grid; gap:0; padding:8px 0; border:0; background:transparent; box-shadow:none; opacity:1; visibility:visible; pointer-events:auto; transform:none; transition:none; }
  .primary-nav li { display:grid; grid-template-columns:minmax(0,1fr) 44px; align-items:center; gap:0; border-bottom:1px solid rgba(46,48,43,.1); }
  .primary-nav .menu-link { min-height:52px; padding:10px 4px; font-size:16px; line-height:1.4; white-space:normal; }
  .primary-nav > .menu-item-has-children > .menu-link { font-weight:600; }
  .submenu-toggle,.sub-menu .submenu-toggle { width:44px; height:44px; justify-self:end; }
  .primary-nav .sub-menu,.primary-nav .sub-menu .sub-menu { position:static; grid-column:1/-1; min-width:0; width:100%; max-width:none; gap:0; padding:0 0 8px 12px; border:0; border-left:2px solid var(--color-heritage-gold); background:transparent; box-shadow:none; overflow:visible; }
  html.has-js .primary-nav .sub-menu { display:none; }
  html.has-js .primary-nav .submenu-is-open > .sub-menu { display:grid; }
  .primary-nav .sub-menu li { grid-template-columns:minmax(0,1fr) 44px; border:0; }
  .primary-nav .sub-menu .menu-link { min-height:48px; padding:8px 10px; font-size:15px; font-weight:400; }
  .primary-panel .nav-cta { width:100%; min-height:50px; justify-content:center; margin:12px 0 8px; }
  .primary-scrim { position:fixed; z-index:51; inset:72px 0 0; display:block; border:0; background:rgba(21,29,25,.38); opacity:0; visibility:hidden; transition:opacity .2s ease,visibility .2s; }
  .primary-scrim.is-visible { opacity:1; visibility:visible; }
  body.menu-open { overflow:hidden; }
  body.menu-open .mobile-contact-bar { visibility:hidden; pointer-events:none; }
}

@media (max-width:520px) {
  .primary-panel { padding-right:16px; padding-left:16px; }
  .primary-panel--fallback { padding-right:16px; padding-left:16px; }
}

@media (max-width:900px) {
  html:not(.has-js) .header-inner { flex-wrap:wrap; }
  html:not(.has-js) .primary-panel { position:static; order:3; flex:0 0 100%; width:100%; padding:0 20px; overflow:visible; transform:none; visibility:visible; box-shadow:none; }
  html:not(.has-js) .primary-panel-head { display:none; }
  html:not(.has-js) .primary-nav { position:static; display:grid; opacity:1; visibility:visible; pointer-events:auto; transform:none; }
  html:not(.has-js) .primary-nav .sub-menu { position:static; display:grid; }
}

@media (prefers-reduced-motion:reduce) {
  .primary-panel,.primary-scrim,.submenu-chevron,.menu-toggle span { transition:none !important; }
}
@media (max-width: 380px) {
  .container { width: calc(100% - 32px); }
  .brand-mark { width: 33px; height: 33px; }
  .brand-copy strong { font-size: 11px; }
  .brand-copy span { font-size: 10px; }
  .hero-motion { padding-inline: 14px; }
  .motion-heading { font-size: 9px; }
  .process-steps li,.process-steps li+li { padding-right: 0; padding-left: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .motion-runner { display: none; }
  .motion-step { transform: none !important; opacity: 1 !important; animation: none !important; }
  .motion-ready .reveal-item { opacity: 1 !important; transform: none !important; }
}

/* Local Editorial Commerce — visual direction 2026-10 */
:root {
  --color-warm-ivory: #f8f4eb;
  --color-hoi-an-sand: #ece5d6;
  --color-dark-ink: #202923;
  --color-muted: #62685f;
  --color-forest-green: #174d3d;
  --color-terracotta: #b54f32;
  --color-heritage-gold: #e2bd72;
  --color-line: rgba(32,41,35,.18);
}
body { background: var(--color-warm-ivory); }
h1,h2,h3 { letter-spacing: -.048em; }
h1 em,h2 em { font-size: .94em; }
.section { padding-block: clamp(84px, 9vw, 132px); }
.site-header { background: rgba(248,244,235,.94); }
.header-inner { min-height: 78px; }
.brand-mark {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-family: var(--font-serif);
  font-size: 14px;
  font-style: italic;
}
.brand-copy strong { font-size: 11px; letter-spacing: .02em; }
.brand-copy span { font-size: 10px; letter-spacing: .2em; }
.button { border-radius: 999px; }
.button-primary { box-shadow: 0 8px 24px rgba(23,77,61,.16); }
.editorial-hero {
  min-height: calc(100svh - 78px);
  display: grid;
  align-items: center;
  padding-block: clamp(34px,5vw,64px);
  background: var(--color-warm-ivory);
}
.editorial-hero::before {
  inset: auto auto -18% -8%;
  width: 520px;
  height: 520px;
  opacity: .16;
  mask-image: radial-gradient(circle,black 12%,transparent 68%);
}
.editorial-hero .hero-grid { grid-template-columns: minmax(0,.82fr) minmax(420px,1.18fr); gap: clamp(40px,6vw,92px); }
.editorial-hero .hero-copy { padding-block: 30px; }
.editorial-hero .eyebrow { margin-bottom: 28px; color: var(--color-forest-green); }
.editorial-hero h1 { max-width: 610px; margin-bottom: 25px; font-size: clamp(50px,6.2vw,82px); line-height: 1.02; }
.editorial-hero .hero-lead { max-width: 560px; margin-bottom: 30px; font-size: 18px; }
.hero-visual { position: relative; margin: 0; padding: 0 0 28px 28px; }
.hero-visual::before { position: absolute; z-index: -1; inset: 28px 28px 0 0; background: var(--color-heritage-gold); content: ""; }
.hero-visual picture { display: block; overflow: hidden; }
.hero-visual img { width: 100%; height: min(68vh,680px); min-height: 520px; object-fit: cover; object-position: 52% center; }
.hero-visual figcaption { display: flex; justify-content: space-between; gap: 18px; margin-top: 11px; color: #77776f; font-size: 12px; }
.hero-channel-note {
  position: absolute;
  right: -22px;
  bottom: 68px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px 17px;
  background: #fffdf7;
  box-shadow: 0 18px 45px rgba(32,41,35,.16);
  color: var(--color-forest-green);
  font-size: 12px;
  font-weight: 600;
}
.hero-channel-note i { width: 12px; height: 1px; background: var(--color-terracotta); }
.hero-channel-note span { animation: editorial-channel-pulse 6s ease-in-out infinite; }
.hero-channel-note span:nth-of-type(2) { animation-delay: 1s; }
.hero-channel-note span:nth-of-type(3) { animation-delay: 2s; }
@keyframes editorial-channel-pulse { 0%,55%,100% { opacity: .56; } 12%,38% { opacity: 1; } }

.story-section { overflow: hidden; background: var(--color-forest-green); color: white; }
.story-section::after { position: absolute; top: 0; right: 0; width: 35%; height: 100%; opacity: .08; background: url("../images/pattern-hoi-an-lattice.svg?v=1") repeat / 420px; content: ""; }
.story-editorial { position: relative; z-index: 1; display: grid; grid-template-columns: 1.12fr .88fr; gap: 52px 72px; }
.story-heading { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0,1.15fr) minmax(280px,.65fr); align-items: end; gap: 64px; }
.story-heading .eyebrow { grid-column: 1 / -1; margin-bottom: -28px; color: var(--color-heritage-gold); }
.story-heading h2 { max-width: 760px; margin: 0; font-size: clamp(42px,5vw,66px); }
.story-heading h2 em { color: #f1c97c; }
.story-heading .section-intro { color: rgba(255,255,255,.72); }
.story-feature { margin: 0; }
.story-feature img { width: 100%; height: 520px; object-fit: cover; object-position: center; }
.story-feature figcaption { margin-top: 11px; color: rgba(255,255,255,.76); font-size: 12px; }
.story-problem { align-self: end; padding: 30px 32px; border: 1px solid rgba(255,255,255,.18); }
.story-label { display: block; margin-bottom: 22px; color: var(--color-heritage-gold); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.story-section .concern-list li { border-color: rgba(255,255,255,.18); color: rgba(255,255,255,.88); }
.story-solution { grid-column: 1 / -1; display: grid; grid-template-columns: .36fr .64fr; gap: 56px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.24); }
.story-solution .story-label { margin: 20px 0 0; }
.story-solution .proof-flow { border-top: 0; }
.story-solution .proof-flow li { grid-template-columns: 128px minmax(0,1fr); }

.combo-section { background: #f8f4eb; }
.combo-heading { align-items: start; }
.touchpoint-rail { margin-top: 12px; }
.combo-grid { border: 0; gap: 0; }
.combo-item { min-height: 290px; padding: 28px 30px 31px; border-top: 2px solid var(--color-forest-green); border-bottom: 1px solid var(--color-line); background: transparent; }
.combo-item + .combo-item { border-left: 0; margin-left: 28px; }
.combo-item:nth-child(2) { border-top-color: var(--color-terracotta); }
.combo-item:nth-child(3) { border-top-color: var(--color-heritage-gold); }
.combo-icon { width: 48px; height: 48px; margin: 38px 0 22px; background: transparent; }
.combo-item p { margin-top: 12px; }
.combo-item::after { display: none; }
.combo-support { margin-top: 42px; padding: 32px; background: var(--color-dark-ink); color: white; }
.combo-support::before { display: none; }
.combo-support p span { color: var(--color-heritage-gold); }
.combo-support p strong { color: rgba(255,255,255,.82); }
.combo-support .text-link { color: white; }

.audiences-section { background: #efe8da; }
.audience-editorial { display: grid; grid-template-columns: minmax(0,1.12fr) minmax(360px,.88fr); gap: clamp(38px,6vw,78px); }
.audience-feature { display: grid; grid-template-columns: minmax(240px,.9fr) minmax(260px,1.1fr); align-items: center; background: #fffdf7; }
.audience-feature figure { height: 100%; min-height: 540px; margin: 0; overflow: hidden; }
.audience-feature img { width: 100%; height: 100%; object-fit: cover; }
.audience-feature > div { padding: clamp(28px,4vw,52px); }
.audience-feature h3 { margin: 0 0 14px; font-size: clamp(30px,3vw,42px); }
.audience-feature p { margin-bottom: 28px; color: var(--color-muted); font-size: 16px; }
.audience-secondary { display: grid; align-content: stretch; }
.audience-row { display: grid; grid-template-columns: 44px 1fr; gap: 22px; padding: 28px 0; border-top: 1px solid rgba(32,41,35,.2); }
.audience-row > span { color: var(--color-terracotta); font-family: var(--font-serif); font-style: italic; }
.audience-row > div { position: relative; padding-right: 52px; }
.audience-row p { margin-bottom: 7px; color: var(--color-terracotta); font-size: 12px; }
.audience-row h3 { margin-bottom: 9px; font-size: 25px; }
.audience-row small { display: block; color: var(--color-muted); font-size: 14px; line-height: 1.6; }
.audience-row a { position: absolute; top: 16px; right: 2px; width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--color-forest-green); border-radius: 50%; color: var(--color-forest-green); }
.audience-note { align-self: end; padding: 24px; border-left: 3px solid var(--color-terracotta); background: rgba(255,253,247,.58); }
.audience-note span { color: var(--color-terracotta); font-size: 12px; font-weight: 600; }
.audience-note p { margin: 8px 0 0; font-size: 14px; line-height: 1.65; }

.process-section::before { left: auto; right: 4%; opacity: .75; }
.process-steps { border-top-width: 2px; }
.step-no { font-style: italic; }
.cost-ownership { padding: clamp(28px,4vw,48px); border: 0; background: #fffdf7; box-shadow: 0 18px 50px rgba(32,41,35,.07); }
.faq-section { background: #fffdf7; }
.consultation-section { background: #193d32; }
.consultation-form { box-shadow: 0 24px 80px rgba(0,0,0,.2); }
.site-footer { background: #17251f; }

@media (max-width: 1023px) {
  .editorial-hero .hero-grid { grid-template-columns: .92fr 1.08fr; gap: 36px; }
  .editorial-hero h1 { font-size: clamp(48px,7vw,66px); }
  .hero-visual img { min-height: 500px; }
  .story-editorial { gap: 42px 38px; }
  .story-heading { gap: 38px; }
  .story-feature img { height: 470px; }
  .combo-grid { display: grid; overflow: visible; padding: 0; }
  .combo-item,.combo-item + .combo-item { flex: none; margin-left: 0; border-right: 0; border-bottom: 1px solid var(--color-line); }
  .audience-editorial { grid-template-columns: 1fr; }
  .audience-feature { grid-template-columns: 1fr 1fr; }
  .audience-feature figure { min-height: 460px; }
}

@media (max-width: 900px) {
  .editorial-hero { min-height: auto; }
  .editorial-hero .hero-grid { grid-template-columns: 1fr; }
  .editorial-hero .hero-copy { max-width: 680px; }
  .hero-visual { width: calc(100% - 20px); margin-left: auto; }
  .hero-visual img { height: 610px; }
  .story-editorial { grid-template-columns: 1fr; }
  .story-heading { grid-template-columns: 1fr; gap: 22px; }
  .story-heading .eyebrow { margin-bottom: 0; }
  .story-feature,.story-problem,.story-solution { grid-column: 1; }
  .story-solution { grid-template-columns: 1fr; gap: 12px; }
  .story-solution .story-label { margin-bottom: 8px; }
  .combo-support { grid-template-columns: 1fr; }
  .combo-support .text-link { grid-column: auto; }
}

@media (max-width: 640px) {
  .section { padding-block: 76px; }
  .editorial-hero { padding-top: 28px; padding-bottom: 70px; }
  .editorial-hero::before { display: none; }
  .editorial-hero h1 { font-size: clamp(44px,13vw,58px); }
  .editorial-hero .hero-lead { font-size: 16px; }
  .hero-visual { width: calc(100% - 12px); padding: 0 0 18px 18px; }
  .hero-visual::before { inset: 18px 18px 0 0; }
  .hero-visual img { height: 440px; min-height: 0; }
  .hero-channel-note { right: -8px; bottom: 54px; gap: 6px; padding: 11px 12px; font-size: 10px; }
  .story-heading h2 { font-size: 40px; }
  .story-feature img { height: 340px; }
  .story-problem { padding: 24px 20px; }
  .story-solution .proof-flow li { grid-template-columns: 92px minmax(0,1fr); gap: 14px; }
  .combo-grid { grid-template-columns: 1fr; }
  .combo-item { min-height: 0; padding: 24px 0 28px; background: transparent; }
  .combo-item + .combo-item { border-left: 0; }
  .combo-icon { margin: 28px 0 18px; }
  .combo-support { padding: 24px 20px; }
  .audience-feature { grid-template-columns: 1fr; }
  .audience-feature figure { min-height: 0; height: 410px; }
  .audience-feature > div { padding: 28px 22px 32px; }
  .audience-row { grid-template-columns: 34px 1fr; gap: 12px; }
  .mobile-contact-bar { right: 14px; bottom: 14px; left: auto; width: auto; display: block; padding: 0; border: 0; background: transparent; box-shadow: none; backdrop-filter: none; }
  .mobile-action { min-height: 46px; padding-inline: 18px; border-radius: 999px; box-shadow: 0 10px 30px rgba(23,77,61,.22); }
  body { padding-bottom: 0; }
}

@media (max-width: 380px) {
  .brand-mark { width: 36px; height: 36px; }
  .hero-channel-note { right: -6px; }
}

/* Device mockup: keep the original hero visual available as an ACF option. */
.hero-mockup { position: relative; min-width: 0; width: 100%; margin: 0; }
.hero-mockup img { display: block; width: 100%; height: auto; filter: drop-shadow(0 22px 28px rgba(46,48,43,.13)); }
@media (max-width: 900px) {
  .hero-mockup { width: min(100%, 700px); margin-inline: auto; }
}
@media (max-width: 640px) {
  .editorial-hero .hero-grid { gap: 16px; }
  .hero-mockup { width: 100%; }
}

/* Editable screen images inside lightweight, responsive device frames. */
.hero-mockup--frames { aspect-ratio: 1.35; isolation: isolate; }
.mockup-device { position: absolute; filter: drop-shadow(0 18px 18px rgba(30,36,32,.18)); }
.mockup-laptop { width: 88%; right: 0; top: 15%; transform: none; }
.mockup-laptop-lid { position: relative; padding: 1.6% 1.6% 2.1%; border: 1px solid #bac1ca; border-radius: 14px 14px 5px 5px; background: #111316; box-shadow: inset 0 0 0 1px #6e7681; }
.hero-mockup--frames .mockup-screen { overflow: hidden; background: #f8f5ed; }
.mockup-laptop .mockup-screen { aspect-ratio: 2560 / 1664; border-radius: 9px 9px 2px 2px; }
.hero-mockup--frames .mockup-screen img { width: 100%; height: 100%; object-fit: cover; object-position: center top; filter: none; }
/* MacBook Air M4: flat aluminium body, thin bezel and camera notch. */
.mockup-camera { position: absolute; z-index: 1; top: 2.25%; left: 42%; width: 16%; height: 5.4%; border-radius: 0 0 6px 6px; background: #111316; }
.mockup-camera::after { position: absolute; top: 30%; left: calc(50% - 2px); width: 4px; height: 4px; border-radius: 50%; background: #192c42; box-shadow: inset 0 0 0 1px #303740; content: ''; }
.mockup-laptop-base { position: relative; height: 10px; margin-inline: -3%; border: 1px solid #939ba7; border-radius: 2px 2px 8px 8px; background: linear-gradient(#e1e5ea 0%,#b7bec8 48%,#8c96a3 80%,#616b77 100%); box-shadow: 0 3px 4px rgba(24,31,38,.16); }
.mockup-laptop-base::before { position: absolute; top: -1px; left: 42%; width: 16%; height: 4px; border-radius: 0 0 5px 5px; background: linear-gradient(#8d96a2,#bdc4ce); content: ''; }
.mockup-phone { z-index: 2; width: 29%; left: 1%; top: 28%; padding: 1.2%; border: 1px solid #a2a4a8; border-radius: 26px; background: #121519; box-shadow: inset 0 0 0 2px #5a5e64; transform: rotate(-8deg); }
.mockup-phone .mockup-screen { aspect-ratio: 390 / 844; border-radius: 20px; }
.mockup-phone-island { position: absolute; top: 3%; left: 31%; width: 38%; height: 4%; border-radius: 20px; background: #111418; }
.mockup-phone-home { position: absolute; bottom: 2.8%; left: 35%; width: 30%; height: 3px; border-radius: 4px; background: #16191b; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .hero-mockup:hover .mockup-laptop { animation: mockup-laptop-sway 1.1s ease-in-out; }
  .hero-mockup:hover .mockup-phone { animation: mockup-phone-sway 1.1s ease-in-out .08s; }
  .hero-mockup:not(.hero-mockup--frames):hover > img { animation: mockup-image-sway 1.1s ease-in-out; }
}
@keyframes mockup-laptop-sway { 0%,100% { transform: translateY(0); } 30% { transform: translateY(-4px); } 65% { transform: translateY(-1px); } }
@keyframes mockup-phone-sway { 0%,100% { transform: rotate(-8deg); } 30% { transform: translateY(-5px) rotate(-10deg); } 65% { transform: translateY(-2px) rotate(-7deg); } }
@keyframes mockup-image-sway { 0%,100% { transform: rotate(0); } 30% { transform: translateY(-4px) rotate(-1deg); } 65% { transform: rotate(.7deg); } }
@media (max-width: 640px) {
  .mockup-laptop-lid { border-radius: 9px 9px 3px 3px; }
  .mockup-laptop-base { height: 8px; }
  .mockup-phone { border-radius: 18px; }
  .mockup-phone .mockup-screen { border-radius: 13px; }
}