@charset "utf-8";
/* ==========================================================================
   康威环保 · 污水处理设备 PbootCMS 模板
   Editorial water-tech design system / 2026
   ========================================================================== */

/* 01. Tokens
   -------------------------------------------------------------------------- */
:root {
  --ink: #09251f;
  --ink-deep: #061914;
  --ink-soft: #123b30;
  --pine: #1b5745;
  --moss: #3b725c;
  --mint: #b9ddce;
  --mint-pale: #e6eee7;
  --lime: #d7f36a;
  --lime-deep: #c7e654;
  --paper: #f4f1e8;
  --paper-2: #ede9dd;
  --white: #fbf9f3;
  --line: #d7d2c4;
  --line-dark: rgba(244,241,232,.16);
  --muted: #64726a;
  --muted-light: rgba(244,241,232,.62);
  --danger: #a34734;
  --shell: 1320px;
  --header: 84px;
  --radius: 2px;
  --radius-lg: 4px;
  --shadow: 0 28px 80px rgba(8,33,26,.14);
  --shadow-soft: 0 12px 40px rgba(8,33,26,.08);
  --ease: cubic-bezier(.22,.61,.36,1);
  --sans: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", Arial, sans-serif;
  --serif: "Songti SC", "STSong", "Noto Serif SC", "Source Han Serif SC", "SimSun", Georgia, serif;
  --mono: "SFMono-Regular", "Roboto Mono", Consolas, "Liberation Mono", monospace;
}

/* 02. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header) + 20px); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.72;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.is-locked { overflow: hidden; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
h1, h2, h3, h4, h5, h6 { font-weight: 800; line-height: 1.16; letter-spacing: -.045em; text-wrap: balance; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; }
img { max-width: 100%; height: auto; border: 0; }
a { color: inherit; text-decoration: none; transition: color .25s var(--ease), background-color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease), opacity .25s var(--ease); }
a:hover { color: var(--pine); }
button, input, select, textarea { font: inherit; color: inherit; }
button { border: 0; background: none; cursor: pointer; }
button:disabled { opacity: .55; cursor: not-allowed; }
::selection { background: var(--lime); color: var(--ink-deep); }
:focus-visible { outline: 2px solid var(--lime-deep); outline-offset: 3px; }
#main { scroll-margin-top: calc(var(--header) + 10px); }
[hidden] { display: none !important; }

/* 03. Utilities
   -------------------------------------------------------------------------- */
.shell { width: min(calc(100% - 64px), var(--shell)); margin-inline: auto; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 16px; top: -100px; z-index: 9999; padding: 10px 18px; border-radius: 0 0 8px 8px; background: var(--ink); color: #fff; }
.skip-link:focus { top: 0; color: #fff; }
.icon { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.icon-flip { transform: rotate(180deg); }
.section { padding: 112px 0; }
.kicker { display: flex; align-items: center; gap: 12px; color: var(--muted); font-family: var(--mono); font-size: 10.5px; font-weight: 600; line-height: 1.3; letter-spacing: .14em; text-transform: uppercase; }
.kicker::before { content: ""; width: 26px; height: 1px; background: currentColor; opacity: .5; }
.kicker span { color: var(--pine); font-weight: 700; }
.kicker--light { color: rgba(244,241,232,.58); }
.kicker--light span { color: var(--lime); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 22px; border: 1px solid transparent; border-radius: 999px; font-size: 13.5px; font-weight: 750; line-height: 1.2; text-align: center; white-space: nowrap; }
.btn:hover { transform: translateY(-2px); }
.btn .icon { font-size: 15px; transition: transform .25s var(--ease); }
.btn:hover .icon { transform: translate(2px,-2px); }
.btn-lg { min-height: 56px; padding: 15px 28px; font-size: 14px; }
.btn-sm { min-height: 42px; padding: 9px 17px; font-size: 12.5px; }
.btn-lime { background: var(--lime); color: var(--ink-deep); }
.btn-lime:hover { background: #e4fa8f; color: var(--ink-deep); }
.btn-dark { background: var(--ink); color: var(--white); }
.btn-dark:hover { background: var(--pine); color: #fff; }
.btn-light { background: var(--white); color: var(--ink); }
.btn-light:hover { background: var(--lime); color: var(--ink); }
.btn-glass { color: var(--white); border-color: rgba(244,241,232,.38); background: rgba(244,241,232,.06); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.btn-glass:hover { color: var(--ink); background: var(--white); border-color: var(--white); }
.btn-ghost { color: var(--ink); border-color: var(--line); background: transparent; }
.btn-ghost:hover { color: var(--white); background: var(--ink); border-color: var(--ink); }
.text-link { display: inline-flex; align-items: center; gap: 9px; padding-bottom: 4px; border-bottom: 1px solid currentColor; color: var(--ink); font-size: 13px; font-weight: 750; line-height: 1.4; }
.text-link .icon { font-size: 14px; transition: transform .25s var(--ease); }
.text-link:hover { color: var(--pine); }
.text-link:hover .icon { transform: translate(2px,-2px); }
.circle-btn { display: inline-grid; place-items: center; width: 46px; height: 46px; border: 1px solid currentColor; border-radius: 50%; color: inherit; background: transparent; }
.circle-btn:hover { color: var(--ink); background: var(--lime); border-color: var(--lime); }
.circle-btn .icon { font-size: 17px; }
.icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; color: inherit; background: transparent; }
.icon-btn:hover { color: var(--ink); background: var(--lime); border-color: var(--lime); }
.icon-btn .icon { font-size: 19px; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; margin-bottom: 52px; }
.section-head h2, .scope-head h2, .process-head h2 { margin: 16px 0 0; font-size: clamp(32px, 4vw, 54px); line-height: 1.12; }
h2 em, h3 em { color: var(--pine); font-family: var(--serif); font-style: normal; font-weight: 500; letter-spacing: -.02em; }
.section-head-side { width: min(360px, 38%); flex: 0 0 auto; }
.section-head-side p { color: var(--muted); font-size: 14px; line-height: 1.8; margin-bottom: 18px; }
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* 04. Header
   -------------------------------------------------------------------------- */
.site-header { position: fixed; top: 0; left: 0; width: 100%; z-index: 200; color: var(--ink); border-bottom: 1px solid transparent; background: rgba(244,241,232,.96); transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease); }
.site-header.is-solid { background: rgba(247,244,236,.94); border-color: rgba(9,37,31,.1); box-shadow: 0 8px 32px rgba(9,37,31,.055); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.site-header.is-overlay { color: var(--white); background: transparent; border-color: rgba(255,255,255,.13); }
.site-header.is-overlay .brand-logo { filter: brightness(0) invert(1); }
.header-inner { display: flex; align-items: center; gap: 34px; min-height: var(--header); }
.brand { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 11px; color: inherit; }
.brand:hover { color: inherit; }
.brand-mark { display: block; width: 42px; height: 42px; }
.brand-mark svg { width: 100%; height: 100%; }
.brand-type { display: flex; flex-direction: column; gap: 1px; }
.brand-type strong { font-size: 18px; font-weight: 850; letter-spacing: .08em; line-height: 1.2; }
.brand-type small { color: currentColor; font-family: var(--mono); font-size: 7.5px; line-height: 1.2; letter-spacing: .17em; opacity: .58; }
.brand-logo { width: auto; height: 50px; max-width: 225px; object-fit: contain; }
.main-nav { margin-left: auto; }
.nav-list { display: flex; align-items: center; gap: 2px; }
.nav-item { position: relative; }
.nav-row { display: flex; align-items: center; }
.nav-link { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 52px; padding: 0 12px; color: inherit; font-size: 13.5px; font-weight: 650; line-height: 1.25; white-space: nowrap; }
.nav-link em { display: block; max-width: 94px; overflow: hidden; color: currentColor; font-family: var(--mono); font-size: 7px; font-style: normal; line-height: 1.4; letter-spacing: .08em; opacity: 0; text-transform: uppercase; transition: opacity .2s var(--ease); }
.nav-link::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 8px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.nav-link:hover em, .nav-link[aria-current] em { opacity: .46; }
.nav-link:hover::after, .nav-link[aria-current]::after { transform: scaleX(1); }
.nav-link[aria-current] { color: var(--lime-deep); }
.is-solid .nav-link[aria-current] { color: var(--pine); }
.sub-toggle { display: none; width: 30px; height: 38px; color: inherit; }
.sub-toggle .icon { margin: auto; font-size: 14px; transition: transform .25s var(--ease); }
.nav-drop { position: absolute; top: calc(100% - 2px); left: 50%; z-index: 20; width: min(620px, calc(100vw - 60px)); padding: 16px; border: 1px solid rgba(244,241,232,.12); background: var(--ink); color: var(--white); box-shadow: 0 28px 70px rgba(4,18,14,.28); opacity: 0; visibility: hidden; transform: translate(-50%, 10px); transition: opacity .22s var(--ease), visibility .22s var(--ease), transform .22s var(--ease); }
.nav-drop-inner { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 2px 15px; }
.nav-drop a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 11px; color: rgba(244,241,232,.7); font-size: 12.5px; line-height: 1.45; border-bottom: 1px solid rgba(244,241,232,.07); }
.nav-drop a:hover { color: var(--lime); }
.nav-drop .icon { font-size: 11px; opacity: 0; transform: translate(-4px,4px); transition: .2s var(--ease); }
.nav-drop a:hover .icon { opacity: 1; transform: none; }
.nav-item:hover > .nav-drop, .nav-item:focus-within > .nav-drop, .nav-item.is-open > .nav-drop { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.header-actions { display: flex; align-items: center; gap: 13px; flex: 0 0 auto; }
.header-actions .icon-btn { border-color: currentColor; opacity: .8; }
.header-actions .icon-btn:hover { opacity: 1; }
.head-phone { display: flex; flex-direction: column; align-items: flex-start; padding-right: 6px; line-height: 1.3; }
.head-phone span { font-family: var(--mono); font-size: 8.5px; letter-spacing: .1em; opacity: .55; }
.head-phone strong { font-size: 13px; font-weight: 800; letter-spacing: .02em; }
.head-cta { min-height: 44px; padding: 10px 18px; font-size: 12.5px; }
.menu-toggle { display: none; }
.nav-mobile-head, .nav-mobile-foot { display: none; }
.nav-overlay { position: fixed; inset: 0; z-index: 190; background: rgba(4,17,13,.62); opacity: 0; visibility: hidden; transition: opacity .28s var(--ease), visibility .28s var(--ease); }
.nav-overlay.is-open { opacity: 1; visibility: visible; }
.header-progress { position: absolute; left: 0; bottom: -1px; width: 100%; height: 1px; background: var(--lime); transform: scaleX(0); transform-origin: left; }
.nojs-nav { display: none; border-bottom: 1px solid var(--line); background: var(--white); }
.nojs-nav .shell { display: flex; flex-wrap: wrap; gap: 8px 20px; padding-block: 12px; }
.nojs-nav a { font-size: 13px; }

/* 05. Search layer
   -------------------------------------------------------------------------- */
.search-layer { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 28px; color: var(--white); background: radial-gradient(1000px 660px at 78% 18%, rgba(70,133,102,.4), transparent 62%), var(--ink-deep); opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s var(--ease); }
.search-layer.is-open { opacity: 1; visibility: visible; }
.search-close { position: absolute; top: 26px; right: 28px; color: var(--white); border-color: rgba(255,255,255,.25); }
.search-close:hover { color: var(--ink); background: var(--lime); border-color: var(--lime); }
.search-layer-inner { width: min(920px, 100%); }
.search-label { display: flex; align-items: center; gap: 12px; color: rgba(255,255,255,.48); font-family: var(--mono); font-size: 10px; letter-spacing: .18em; }
.search-label span { color: var(--lime); }
.search-layer h2 { margin: 16px 0 34px; color: var(--white); font-size: clamp(38px, 6vw, 70px); }
.search-form { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid rgba(255,255,255,.3); padding-bottom: 12px; }
.search-form input { flex: 1; min-width: 0; padding: 10px 0; border: 0; outline: none; color: var(--white); background: transparent; font-size: clamp(20px, 2.8vw, 32px); }
.search-form input::placeholder { color: rgba(255,255,255,.3); }
.search-form button { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; color: var(--ink); background: var(--lime); }
.search-form button:hover { background: #e8ffa0; }
.search-hot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 22px; }
.search-hot span { margin-right: 5px; color: rgba(255,255,255,.34); font-size: 11px; }
.search-hot button { padding: 6px 11px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; color: rgba(255,255,255,.58); font-size: 11px; }
.search-hot button:hover { color: var(--ink); background: var(--lime); border-color: var(--lime); }

/* 06. Hero
   -------------------------------------------------------------------------- */
.hero { position: relative; isolation: isolate; min-height: 100svh; overflow: hidden; color: var(--white); background: var(--ink-deep); }
.hero-media, .hero-fallback, .hero-slides, .hero-slide, .hero-slide img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-fallback, .hero-slide img { object-fit: cover; object-position: center 52%; }
.hero-slides { z-index: 1; }
.hero-slide { opacity: 0; transition: opacity 1.2s var(--ease); }
.hero-slide.is-active { opacity: 1; }
.hero-slide img { transform: scale(1.035); transition: transform 7s linear; }
.hero-slide.is-active img { transform: scale(1.075); }
.hero-shade { position: absolute; inset: 0; z-index: 2; background: linear-gradient(90deg, rgba(5,20,16,.92) 0%, rgba(5,20,16,.72) 45%, rgba(5,20,16,.26) 100%), linear-gradient(0deg, rgba(5,20,16,.88) 0%, rgba(5,20,16,.06) 40%, rgba(5,20,16,.44) 100%); }
.hero-grain { position: absolute; inset: 0; z-index: 3; opacity: .18; background-image: radial-gradient(rgba(255,255,255,.45) .5px, transparent .5px); background-size: 4px 4px; mix-blend-mode: soft-light; pointer-events: none; }
.hero-shell { position: relative; z-index: 4; display: flex; flex-direction: column; justify-content: space-between; min-height: 100svh; padding-top: calc(var(--header) + 26px); padding-bottom: 32px; }
.hero-topline { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 18px; border-bottom: 1px solid rgba(244,241,232,.2); }
.hero-place { display: flex; align-items: center; gap: 9px; color: rgba(244,241,232,.6); font-family: var(--mono); font-size: 10px; letter-spacing: .08em; }
.hero-place i { width: 5px; height: 5px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px rgba(215,243,106,.12); }
.hero-content { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(270px,.45fr); align-items: end; gap: 60px; padding: 46px 0 60px; }
.hero h1 { margin: 0; color: var(--white); font-size: clamp(58px, 8.7vw, 132px); font-weight: 900; line-height: .94; letter-spacing: -.07em; }
.hero-title-line { display: block; }
.hero-title-line--accent { color: var(--lime); white-space: nowrap; }
.hero-title-line--accent sup { display: inline-block; vertical-align: top; margin: 10px 0 0 10px; color: var(--lime); font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: .02em; }
.hero-intro { max-width: 370px; padding-bottom: 8px; }
.hero-intro > p { color: rgba(244,241,232,.75); font-size: 15px; line-height: 1.9; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.hero-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; padding-top: 24px; border-top: 1px solid rgba(244,241,232,.2); }
.hero-facts { display: flex; flex-wrap: wrap; gap: 38px; }
.hero-facts div { display: flex; flex-direction: column; gap: 3px; }
.hero-facts strong { color: var(--white); font-size: 28px; font-weight: 800; line-height: 1.1; letter-spacing: -.04em; }
.hero-facts strong em { margin-left: 3px; color: var(--lime); font-family: var(--sans); font-size: 11px; font-style: normal; font-weight: 500; letter-spacing: 0; }
.hero-facts span { color: rgba(244,241,232,.48); font-size: 10.5px; }
.hero-controls { display: flex; align-items: center; gap: 20px; }
.hero-count { display: flex; align-items: baseline; gap: 5px; color: rgba(244,241,232,.4); font-family: var(--mono); font-size: 10px; }
.hero-count b { color: var(--white); font-size: 16px; font-weight: 500; }
.hero-count i { font-style: normal; opacity: .5; }
.hero-arrows { display: flex; gap: 8px; }
.hero-arrows .circle-btn { width: 40px; height: 40px; font-size: 12px; }
.hero-scroll { display: flex; align-items: center; gap: 10px; color: rgba(244,241,232,.55); font-family: var(--mono); font-size: 9px; letter-spacing: .12em; }
.hero-scroll i { width: 42px; height: 1px; background: rgba(244,241,232,.3); }
.hero-scroll .icon { font-size: 13px; color: var(--lime); }
.hero-scroll:hover { color: var(--white); }
.hero-side-note { position: absolute; z-index: 4; right: -46px; top: 42%; color: rgba(244,241,232,.27); font-family: var(--mono); font-size: 8.5px; letter-spacing: .2em; writing-mode: vertical-rl; white-space: nowrap; }
.hero.is-single [data-hero-controls] { display: none; }

/* 07. Scenario strip
   -------------------------------------------------------------------------- */
.scenario-strip { display: flex; align-items: stretch; min-height: 58px; color: var(--ink); background: var(--lime); overflow: hidden; }
.scenario-label { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; padding: 0 30px 0 max(32px, calc((100vw - var(--shell))/2)); background: var(--ink); color: var(--white); }
.scenario-label span { color: var(--lime); font-family: var(--mono); font-size: 8px; letter-spacing: .12em; }
.scenario-label b { font-size: 12px; font-weight: 750; letter-spacing: .08em; }
.marquee { flex: 1; display: flex; align-items: center; overflow: hidden; }
.marquee-track { display: flex; align-items: center; gap: 22px; width: max-content; animation: marquee 36s linear infinite; }
.marquee-track span { font-family: var(--sans); font-size: 13px; font-weight: 650; letter-spacing: .03em; white-space: nowrap; }
.marquee-track i { width: 5px; height: 5px; border-radius: 50%; background: var(--ink); opacity: .5; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* 08. Home about
   -------------------------------------------------------------------------- */
.home-about { position: relative; overflow: hidden; }
.home-about::before { content: "02"; position: absolute; right: -60px; top: 40px; color: transparent; font-family: var(--sans); font-size: 430px; font-weight: 900; line-height: 1; letter-spacing: -.08em; -webkit-text-stroke: 1px rgba(9,37,31,.07); pointer-events: none; }
.home-about-grid { position: relative; display: grid; grid-template-columns: .93fr 1.07fr; gap: clamp(50px, 8vw, 120px); align-items: center; }
.home-about-visual { position: relative; min-height: 660px; }
.about-photo { position: relative; overflow: hidden; background: var(--paper-2); }
.about-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.about-photo:hover img { transform: scale(1.025); }
.about-photo--main { width: 72%; height: 610px; }
.about-photo--main figcaption { position: absolute; left: 16px; bottom: 16px; display: flex; gap: 8px; align-items: center; padding: 7px 11px; background: rgba(6,25,20,.72); color: rgba(255,255,255,.8); font-family: var(--mono); font-size: 8.5px; letter-spacing: .06em; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.about-photo--main figcaption span { color: var(--lime); }
.about-photo--sub { position: absolute; right: 0; bottom: 10px; width: 48%; height: 310px; border: 10px solid var(--paper); box-shadow: var(--shadow-soft); }
.about-seal { position: absolute; left: 61%; top: -28px; width: 112px; height: 112px; color: var(--ink); transform: rotate(9deg); }
.about-seal svg { width: 100%; height: 100%; }
.about-seal text { font-family: var(--mono); font-size: 7.2px; letter-spacing: 2.1px; fill: currentColor; }
.home-about-copy { position: relative; z-index: 2; max-width: 640px; }
.about-heading-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 30px; margin-bottom: 24px; }
.vertical-note { color: var(--muted); font-family: var(--mono); font-size: 8.5px; letter-spacing: .12em; writing-mode: vertical-rl; white-space: nowrap; opacity: .65; }
.home-about-copy h2 { font-size: clamp(34px, 4.5vw, 59px); line-height: 1.16; }
.home-about-copy h2 em { display: inline; color: var(--pine); }
.home-about-copy .lead { margin-top: 28px; color: var(--ink); font-size: 17px; font-weight: 600; line-height: 1.8; }
.home-about-copy > p:not(.lead):not(.kicker) { margin-top: 15px; color: var(--muted); font-size: 14.5px; line-height: 1.9; }
.about-numbers { display: grid; grid-template-columns: repeat(3,1fr); margin: 34px 0 28px; padding: 23px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.about-numbers div { padding-right: 18px; border-right: 1px solid var(--line); }
.about-numbers div:not(:first-child) { padding-left: 22px; }
.about-numbers div:last-child { border-right: 0; }
.about-numbers strong { display: block; font-size: 35px; font-weight: 800; line-height: 1; letter-spacing: -.06em; }
.about-numbers sup { color: var(--pine); font-size: 15px; font-weight: 600; vertical-align: top; }
.about-numbers span { display: block; margin-top: 8px; color: var(--muted); font-size: 10.5px; }

/* 09. Scope
   -------------------------------------------------------------------------- */
.scope-home { background: var(--mint-pale); border-top: 1px solid rgba(9,37,31,.08); border-bottom: 1px solid rgba(9,37,31,.08); }
.scope-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 60px; margin-bottom: 48px; }
.scope-head-side { width: min(380px, 35%); }
.scope-head-side p { color: var(--muted); font-size: 14px; line-height: 1.85; margin-bottom: 18px; }
.scope-grid { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid rgba(9,37,31,.2); border-left: 1px solid rgba(9,37,31,.16); counter-reset: scope; }
.scope-item { position: relative; display: grid; grid-template-columns: 34px 1fr 20px; grid-template-areas: "no name arrow" "no desc arrow"; column-gap: 10px; align-items: start; min-height: 112px; padding: 21px 20px; border-right: 1px solid rgba(9,37,31,.16); border-bottom: 1px solid rgba(9,37,31,.16); background: rgba(251,249,243,.28); counter-increment: scope; transition: background-color .3s var(--ease), color .3s var(--ease); }
.scope-item:hover { color: var(--ink); background: var(--lime); }
.scope-no { grid-area: no; color: var(--moss); font-family: var(--mono); font-size: 9px; font-weight: 600; line-height: 1.6; letter-spacing: .06em; }
.scope-no::before { content: counter(scope, decimal-leading-zero); }
.scope-name { grid-area: name; font-size: 14.5px; font-weight: 750; line-height: 1.5; letter-spacing: -.015em; }
.scope-desc { grid-area: desc; margin-top: 5px; color: var(--muted); font-size: 11.5px; line-height: 1.6; }
.scope-item:hover .scope-desc, .scope-item:hover .scope-no { color: rgba(9,37,31,.66); }
.scope-item .icon { grid-area: arrow; width: 16px; height: 16px; margin-top: 3px; color: var(--pine); opacity: .35; transition: opacity .2s var(--ease), transform .2s var(--ease); }
.scope-item:hover .icon { opacity: 1; transform: translate(2px,-2px); }
.scope-foot { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-top: 32px; }
.scope-foot p { color: var(--muted); font-size: 13px; line-height: 1.7; }

/* 10. Products
   -------------------------------------------------------------------------- */
.products-home { background: var(--white); }
.product-grid { display: grid; gap: 26px; }
.product-grid--home { grid-template-columns: repeat(4, minmax(0,1fr)); }
.product-card { min-width: 0; }
.product-media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-2); }
.product-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease), filter .5s var(--ease); }
.product-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 58%, rgba(6,25,20,.42) 100%); opacity: .7; pointer-events: none; }
.product-card:hover .product-media img { transform: scale(1.045); }
.product-cat { position: absolute; z-index: 2; left: 14px; top: 14px; padding: 5px 9px; color: var(--ink); background: rgba(251,249,243,.9); font-size: 10px; font-weight: 700; letter-spacing: .02em; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.product-open { position: absolute; z-index: 2; right: 14px; bottom: 14px; display: grid; place-items: center; width: 34px; height: 34px; color: var(--ink); background: var(--lime); border-radius: 50%; transform: scale(.86); opacity: 0; transition: .25s var(--ease); }
.product-open .icon { font-size: 14px; }
.product-card:hover .product-open { opacity: 1; transform: none; }
.product-body { padding: 17px 2px 0; border-top: 1px solid transparent; }
.product-body h3 { font-size: 15.5px; font-weight: 750; line-height: 1.5; letter-spacing: -.02em; }
.product-body h3 a:hover { color: var(--pine); }
.product-body p { margin-top: 8px; color: var(--muted); font-size: 12px; line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* 11. Process
   -------------------------------------------------------------------------- */
.process-section { position: relative; overflow: hidden; padding: 116px 0 0; color: var(--white); background: var(--ink); }
.process-section::before { content: ""; position: absolute; top: -40%; right: -12%; width: 820px; height: 820px; border: 1px solid rgba(244,241,232,.1); border-radius: 50%; box-shadow: 0 0 0 90px rgba(244,241,232,.025), 0 0 0 180px rgba(244,241,232,.018); pointer-events: none; }
.process-head { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 60px; margin-bottom: 62px; }
.process-head h2 { color: var(--white); }
.process-head h2 em { color: var(--lime); }
.process-head > p { width: min(360px, 32%); color: rgba(244,241,232,.56); font-size: 13.5px; line-height: 1.9; }
.process-rail { position: relative; display: grid; grid-template-columns: repeat(5,1fr); border-top: 1px solid rgba(244,241,232,.24); }
.process-step { position: relative; min-height: 285px; padding: 29px 22px 34px 0; border-right: 1px solid rgba(244,241,232,.12); }
.process-step:not(:first-child) { padding-left: 24px; }
.process-step:last-child { border-right: 0; padding-right: 0; }
.process-no { color: rgba(244,241,232,.35); font-family: var(--mono); font-size: 9px; letter-spacing: .1em; }
.process-icon { display: grid; place-items: center; width: 44px; height: 44px; margin: 27px 0 25px; border: 1px solid rgba(244,241,232,.27); border-radius: 50%; color: var(--lime); transition: background-color .3s var(--ease), color .3s var(--ease); }
.process-icon .icon { font-size: 19px; }
.process-step:hover .process-icon { color: var(--ink); background: var(--lime); border-color: var(--lime); }
.process-step h3 { color: var(--white); font-size: 18px; font-weight: 750; letter-spacing: -.01em; }
.process-step p { margin-top: 11px; color: rgba(244,241,232,.52); font-size: 12px; line-height: 1.8; }
.process-en { position: absolute; left: 24px; bottom: 29px; color: rgba(244,241,232,.25); font-family: var(--mono); font-size: 7.5px; letter-spacing: .12em; }
.process-step:first-child .process-en { left: 0; }
.process-bottom { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-top: 30px; padding: 25px 0 100px; border-top: 1px solid rgba(244,241,232,.12); }
.process-bottom p { color: rgba(244,241,232,.38); font-size: 11.5px; line-height: 1.7; }
.process-bottom p span { color: var(--lime); margin-right: 6px; }

/* 12. Cases
   -------------------------------------------------------------------------- */
.cases-home { background: var(--paper); }
.case-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 28px; }
.case-card { min-width: 0; }
.case-media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-2); }
.case-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(6,25,20,.56)); pointer-events: none; }
.case-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .85s var(--ease); }
.case-card:hover .case-media img { transform: scale(1.04); }
.case-index { position: absolute; z-index: 2; left: 16px; bottom: 14px; color: rgba(255,255,255,.8); font-family: var(--mono); font-size: 8.5px; letter-spacing: .1em; }
.case-copy { padding-top: 17px; }
.case-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 10px; }
.case-meta span { color: var(--pine); font-weight: 650; }
.case-meta time { font-family: var(--mono); font-size: 9.5px; }
.case-copy h3 { margin-top: 10px; font-size: 19px; font-weight: 750; line-height: 1.45; }
.case-copy h3 a:hover { color: var(--pine); }
.case-copy p { margin-top: 8px; color: var(--muted); font-size: 12px; line-height: 1.75; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* 13. Journal
   -------------------------------------------------------------------------- */
.journal-home { background: var(--white); border-top: 1px solid rgba(9,37,31,.08); }
.journal-grid { display: grid; grid-template-columns: .68fr 1.32fr; gap: clamp(60px, 9vw, 140px); align-items: start; }
.journal-intro { position: sticky; top: calc(var(--header) + 45px); }
.journal-intro h2 { margin: 18px 0 22px; font-size: clamp(34px, 4.4vw, 55px); line-height: 1.14; }
.journal-intro > p:not(.kicker) { max-width: 370px; color: var(--muted); font-size: 14px; line-height: 1.9; margin-bottom: 25px; }
.journal-mark { margin-top: 80px; color: transparent; font-size: 72px; font-weight: 900; line-height: 1; letter-spacing: -.08em; -webkit-text-stroke: 1px rgba(9,37,31,.12); }
.journal-list { border-top: 1px solid var(--ink); }
.journal-item { border-bottom: 1px solid var(--line); }
.journal-link { position: relative; display: grid; grid-template-columns: 68px minmax(0,1fr) 96px 22px; align-items: center; gap: 23px; padding: 26px 0; }
.journal-date { display: flex; flex-direction: column; gap: 2px; color: var(--ink); font-family: var(--mono); font-size: 18px; font-weight: 500; line-height: 1.1; }
.journal-date span { color: var(--muted); font-size: 9px; letter-spacing: .05em; }
.journal-meta { margin-bottom: 7px; color: var(--pine); font-size: 10px; font-weight: 650; }
.journal-copy h3 { font-size: 18px; font-weight: 750; line-height: 1.48; letter-spacing: -.015em; transition: color .2s var(--ease); }
.journal-copy p { margin-top: 7px; color: var(--muted); font-size: 11.5px; line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.journal-thumb { width: 96px; height: 76px; overflow: hidden; background: var(--paper-2); }
.journal-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.journal-arrow { display: grid; place-items: center; width: 22px; height: 22px; color: var(--muted); opacity: .5; transition: .2s var(--ease); }
.journal-arrow .icon { font-size: 15px; }
.journal-link:hover .journal-copy h3 { color: var(--pine); }
.journal-link:hover .journal-thumb img { transform: scale(1.06); }
.journal-link:hover .journal-arrow { color: var(--ink); opacity: 1; transform: translate(2px,-2px); }

/* 14. CTA + footer
   -------------------------------------------------------------------------- */
.site-cta { padding: 0 0 40px; background: var(--white); }
.cta-card { position: relative; isolation: isolate; display: flex; align-items: flex-end; justify-content: space-between; gap: 50px; overflow: hidden; padding: 62px 64px; color: var(--white); background: var(--ink); }
.cta-card::before { content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(700px 400px at 84% 20%, rgba(112,178,143,.27), transparent 70%), linear-gradient(115deg, rgba(6,25,20,0), rgba(6,25,20,.25)); }
.cta-copy { position: relative; z-index: 2; max-width: 670px; }
.cta-copy h2 { margin: 15px 0 17px; color: var(--white); font-size: clamp(36px, 4.8vw, 61px); line-height: 1.1; }
.cta-copy h2 em { color: var(--lime); font-family: var(--serif); }
.cta-copy > p:not(.kicker) { max-width: 480px; color: rgba(244,241,232,.56); font-size: 13px; line-height: 1.85; }
.cta-actions { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; flex: 0 0 auto; }
.quick-phone { display: flex; align-items: center; gap: 22px; padding-bottom: 10px; border-bottom: 1px solid rgba(244,241,232,.26); color: var(--white); }
.quick-phone span { display: flex; flex-direction: column; gap: 2px; }
.quick-phone small { color: rgba(244,241,232,.44); font-family: var(--mono); font-size: 8px; letter-spacing: .1em; }
.quick-phone strong { font-size: 25px; font-weight: 750; letter-spacing: -.02em; }
.quick-phone .icon { font-size: 19px; color: var(--lime); }
.quick-phone:hover { color: var(--lime); }
.cta-wave { position: absolute; z-index: 1; right: -65px; bottom: -75px; width: 560px; height: 420px; color: var(--lime); pointer-events: none; }
.site-footer { position: relative; overflow: hidden; padding: 75px 0 0; color: rgba(244,241,232,.64); background: var(--ink-deep); }
.footer-main { display: grid; grid-template-columns: 1.48fr .7fr .86fr 1.16fr; gap: 55px; padding-bottom: 66px; }
.footer-brand-link { display: inline-flex; align-items: center; gap: 12px; color: var(--white); }
.footer-brand-link .brand-mark { color: var(--white); }
.footer-brand-link .brand-type strong { font-size: 20px; }
.footer-brand-link .brand-type small { color: var(--white); opacity: .42; }
.footer-tagline { margin: 27px 0 15px; color: var(--white); font-family: var(--serif); font-size: 25px; font-weight: 500; line-height: 1.45; letter-spacing: .01em; }
.footer-desc { max-width: 330px; color: rgba(244,241,232,.4); font-size: 11.5px; line-height: 1.9; }
.footer-phone { display: flex; flex-direction: column; gap: 3px; margin-top: 27px; color: var(--white); }
.footer-phone small { color: rgba(244,241,232,.34); font-family: var(--mono); font-size: 8.5px; letter-spacing: .08em; }
.footer-phone strong { font-size: 24px; font-weight: 650; letter-spacing: .01em; }
.footer-phone:hover { color: var(--lime); }
.footer-col h3 { display: flex; align-items: center; gap: 9px; margin: 4px 0 22px; color: var(--white); font-size: 12px; font-weight: 650; letter-spacing: .04em; }
.footer-col h3 span { color: var(--lime); font-family: var(--mono); font-size: 8px; font-weight: 500; opacity: .75; }
.footer-links { display: flex; flex-direction: column; gap: 9px; }
.footer-links a { color: rgba(244,241,232,.47); font-size: 12px; line-height: 1.5; width: fit-content; }
.footer-links a:hover { color: var(--lime); }
.footer-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; color: var(--lime) !important; }
.footer-more .icon { font-size: 12px; }
.footer-contact ul { display: flex; flex-direction: column; gap: 12px; }
.footer-contact li { display: flex; align-items: flex-start; gap: 9px; color: rgba(244,241,232,.48); font-size: 11.5px; line-height: 1.65; }
.footer-contact li .icon { width: 14px; height: 14px; margin-top: 3px; color: var(--lime); opacity: .7; }
.footer-contact li a:hover { color: var(--lime); }
.footer-qr { display: flex; align-items: center; gap: 10px; margin-top: 24px; }
.footer-qr img { width: 66px; height: 66px; object-fit: contain; padding: 4px; background: #fff; }
.footer-qr span { color: rgba(244,241,232,.35); font-size: 9px; line-height: 1.5; }
.footer-word { overflow: hidden; margin: 0 0 -2.8vw; padding: 0 20px; color: rgba(244,241,232,.045); font-size: 20vw; font-weight: 900; line-height: .78; letter-spacing: -.075em; white-space: nowrap; pointer-events: none; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 26px; padding: 22px 0 26px; border-top: 1px solid rgba(244,241,232,.1); }
.footer-bottom p { color: rgba(244,241,232,.29); font-size: 10px; }
.footer-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; color: rgba(244,241,232,.26); font-size: 10px; }
.footer-legal a { color: rgba(244,241,232,.32); }
.footer-legal a:hover { color: var(--lime); }
.mobile-dock { display: none; }
.back-top { position: fixed; right: 24px; bottom: 27px; z-index: 120; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(9,37,31,.22); border-radius: 50%; color: var(--ink); background: rgba(251,249,243,.92); box-shadow: var(--shadow-soft); opacity: 0; visibility: hidden; transform: translateY(10px); transition: .25s var(--ease); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.back-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.back-top:hover { background: var(--lime); border-color: var(--lime); }
.back-top .icon { font-size: 16px; }

/* 15. Shared inner-page components
   -------------------------------------------------------------------------- */
.page-hero { position: relative; isolation: isolate; overflow: hidden; padding: calc(var(--header) + 58px) 0 66px; color: var(--white); background: var(--ink); }
.page-hero::before { content: ""; position: absolute; z-index: -1; inset: 0; background-image: linear-gradient(rgba(244,241,232,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(244,241,232,.06) 1px, transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(110deg, rgba(0,0,0,.9), transparent 72%); }
.page-hero::after { content: ""; position: absolute; z-index: -1; right: -140px; top: -220px; width: 660px; height: 660px; border: 1px solid rgba(215,243,106,.13); border-radius: 50%; box-shadow: 0 0 0 90px rgba(215,243,106,.025), 0 0 0 180px rgba(215,243,106,.018); }
.page-hero-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 28px; border-bottom: 1px solid rgba(244,241,232,.16); }
.page-hero .crumbs { color: rgba(244,241,232,.42); }
.page-hero .crumbs a { color: rgba(244,241,232,.55); }
.page-hero .crumbs a:hover { color: var(--lime); }
.page-hero .crumb-sep { color: rgba(244,241,232,.2); }
.hero-page-mark { color: rgba(244,241,232,.3); font-family: var(--mono); font-size: 9px; letter-spacing: .14em; }
.page-hero-grid { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 50px; padding-top: 56px; }
.page-hero h1 { margin: 17px 0 20px; color: var(--white); font-size: clamp(52px, 7vw, 92px); line-height: 1.04; letter-spacing: -.065em; }
.page-hero-lead { max-width: 610px; color: rgba(244,241,232,.6); font-size: 15px; line-height: 1.9; }
.page-hero-mark { color: transparent; font-family: var(--sans); font-size: clamp(120px, 18vw, 260px); font-weight: 900; line-height: .72; letter-spacing: -.09em; -webkit-text-stroke: 1px rgba(244,241,232,.16); }
.page-hero-aside { min-width: 190px; padding-bottom: 7px; text-align: right; }
.page-hero-aside span { display: block; color: var(--lime); font-family: var(--mono); font-size: 9px; letter-spacing: .16em; }
.page-hero-aside b { display: block; margin-top: 7px; color: rgba(244,241,232,.5); font-size: 11px; font-weight: 400; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--muted); font-size: 10px; line-height: 1.7; }
.crumbs a:hover { color: var(--pine); }
.crumb-sep { color: var(--line); }
.crumbs [aria-current] { color: var(--ink); }
.crumbs .icon { font-size: 10px; }
.page-hero + .section, .page-hero + .catalog-section { padding-top: 72px; }
.section--white { background: var(--white); }
.section--soft { background: var(--mint-pale); }
.detail-top { padding: calc(var(--header) + 34px) 0 0; background: var(--white); }
.detail-top .crumbs { color: var(--muted); }
.detail-kicker { margin-top: 13px; color: var(--muted); font-family: var(--mono); font-size: 9px; letter-spacing: .14em; }
.detail-kicker span { color: var(--pine); }
.empty-state { padding: 60px 0 80px; text-align: center; }
.empty-mark { display: block; color: var(--line); font-family: var(--serif); font-size: 68px; line-height: 1; }
.empty-state h2 { margin: 18px 0 8px; font-size: 28px; }
.empty-state p { margin-bottom: 22px; color: var(--muted); font-size: 13px; }

/* Rich text */
.rich-content { color: var(--ink); font-size: 14.5px; line-height: 1.95; }
.rich-content > *:first-child { margin-top: 0; }
.rich-content h1, .rich-content h2, .rich-content h3, .rich-content h4 { margin: 34px 0 14px; color: var(--ink); line-height: 1.35; letter-spacing: -.025em; }
.rich-content h1 { font-size: 30px; }
.rich-content h2 { padding-top: 17px; border-top: 1px solid var(--line); font-size: 24px; }
.rich-content h3 { font-size: 19px; }
.rich-content p { margin: 13px 0; }
.rich-content a { color: var(--pine); text-decoration: underline; text-underline-offset: 4px; }
.rich-content ul, .rich-content ol { margin: 16px 0; padding-left: 21px; }
.rich-content ul { list-style: disc; }
.rich-content ol { list-style: decimal; }
.rich-content li { margin: 6px 0; padding-left: 3px; }
.rich-content li::marker { color: var(--pine); }
.rich-content blockquote { margin: 26px 0; padding: 21px 25px; border-left: 2px solid var(--lime-deep); background: var(--mint-pale); color: var(--ink-soft); font-family: var(--serif); font-size: 18px; line-height: 1.8; }
.rich-content blockquote p { margin: 0; }
.rich-content img { margin: 20px 0; }
.rich-content table { width: 100%; margin: 22px 0; border-collapse: collapse; font-size: 13px; }
.rich-content th, .rich-content td { padding: 11px 13px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.rich-content th { background: var(--mint-pale); font-weight: 750; }
.rich-content hr { margin: 34px 0; border: 0; border-top: 1px solid var(--line); }
.rich-content strong { font-weight: 750; }

/* Form */
.project-form { display: flex; flex-direction: column; gap: 18px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.form-field--full { grid-column: 1 / -1; }
.form-field label { color: var(--ink); font-size: 11.5px; font-weight: 700; letter-spacing: .01em; }
.form-field label em { color: var(--pine); font-style: normal; }
.form-field input, .form-field textarea, .form-field select { width: 100%; border: 1px solid var(--line); border-radius: 0; background: rgba(255,255,255,.55); color: var(--ink); font-size: 13.5px; outline: none; transition: border-color .2s var(--ease), background-color .2s var(--ease); }
.form-field input { height: 50px; padding: 0 14px; }
.form-field textarea { min-height: 132px; padding: 13px 14px; resize: vertical; line-height: 1.7; }
.form-field input::placeholder, .form-field textarea::placeholder { color: #9b9f96; }
.form-field input:focus, .form-field textarea:focus { border-color: var(--ink); background: #fff; }
.code-row { display: flex; align-items: stretch; gap: 10px; }
.code-row input { flex: 1; }
.form-code { width: 128px; height: 50px; border: 1px solid var(--line); object-fit: cover; cursor: pointer; }
.form-consent { display: flex; align-items: flex-start; gap: 9px; color: var(--muted); font-size: 10.5px; line-height: 1.6; cursor: pointer; }
.form-consent input { width: 14px; height: 14px; margin: 2px 0 0; accent-color: var(--ink); flex: 0 0 auto; }
.form-submit { width: 100%; margin-top: 2px; }
.form-note { color: var(--muted); font-size: 10px; line-height: 1.6; }
.form-privacy { margin-top: 8px; color: rgba(244,241,232,.34); font-size: 9.5px; line-height: 1.6; }
.form-status { display: none; padding: 10px 13px; font-size: 12px; line-height: 1.6; }
.form-status.is-success, .form-status.is-error { display: block; }
.form-status.is-success { color: var(--pine); background: rgba(27,87,69,.1); }
.form-status.is-error { color: var(--danger); background: rgba(163,71,52,.09); }

/* Pager */
.pager { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin-top: 54px; padding-top: 24px; border-top: 1px solid var(--line); }
.pager-links { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.pager-link, .pager-links .page-num, .pager-links .page-num-current { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 35px; height: 35px; padding: 0 9px; border: 1px solid var(--line); color: var(--muted); font-size: 10.5px; line-height: 1; }
.pager-link:hover { color: var(--white); background: var(--ink); border-color: var(--ink); }
.pager-link .icon { font-size: 10px; }
.pager-links .page-num-current { color: var(--ink); background: var(--lime); border-color: var(--lime); font-weight: 750; }
.pager-info { color: var(--muted); font-family: var(--mono); font-size: 9px; white-space: nowrap; }

/* 16. About page
   -------------------------------------------------------------------------- */
.about-hero { position: relative; isolation: isolate; display: flex; min-height: 760px; overflow: hidden; color: var(--white); background: var(--ink-deep); }
.about-hero-media { position: absolute; inset: 0; z-index: -2; }
.about-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 50%; opacity: .76; }
.about-hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,20,16,.94) 0%, rgba(5,20,16,.75) 46%, rgba(5,20,16,.2) 100%), linear-gradient(0deg, rgba(5,20,16,.92) 0%, transparent 50%); }
.about-hero-shell { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; min-height: 760px; padding-top: calc(var(--header) + 26px); padding-bottom: 46px; }
.about-hero-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 24px; border-bottom: 1px solid rgba(244,241,232,.18); }
.about-hero .crumbs { color: rgba(244,241,232,.42); }
.about-hero .crumbs a { color: rgba(244,241,232,.52); }
.about-hero .crumbs a:hover { color: var(--lime); }
.about-hero .crumb-sep { color: rgba(244,241,232,.2); }
.about-hero-top .hero-page-mark { color: rgba(244,241,232,.32); }
.about-hero-copy { max-width: 820px; padding: 66px 0 56px; }
.about-hero-copy h1 { margin: 18px 0 26px; color: var(--white); font-size: clamp(70px, 10vw, 138px); line-height: .96; letter-spacing: -.075em; }
.about-hero-lead { max-width: 590px; color: rgba(244,241,232,.68); font-size: 16px; line-height: 1.95; }
.about-hero-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 36px; padding-top: 25px; border-top: 1px solid rgba(244,241,232,.18); }
.about-hero-bottom > p { color: rgba(244,241,232,.44); font-family: var(--mono); font-size: 9px; letter-spacing: .1em; }
.about-hero-data { display: flex; gap: 48px; }
.about-hero-data div { display: flex; flex-direction: column; gap: 3px; }
.about-hero-data strong { color: var(--white); font-size: 27px; font-weight: 750; line-height: 1.1; letter-spacing: -.03em; }
.about-hero-data strong em { margin-left: 2px; color: var(--lime); font-family: var(--sans); font-size: 10px; font-style: normal; font-weight: 500; }
.about-hero-data span { color: rgba(244,241,232,.43); font-size: 9.5px; }
.about-hero-word { position: absolute; z-index: -1; right: -26px; bottom: 10px; color: rgba(244,241,232,.06); font-size: clamp(130px, 20vw, 300px); font-weight: 900; line-height: .7; letter-spacing: -.06em; pointer-events: none; }
.about-statement { background: var(--paper); }
.about-statement-grid { display: grid; grid-template-columns: .64fr 1.36fr; gap: clamp(55px, 9vw, 140px); align-items: start; }
.about-statement-aside { position: sticky; top: calc(var(--header) + 45px); }
.about-statement-aside h2 { margin: 17px 0 25px; font-size: clamp(37px, 5.2vw, 64px); line-height: 1.1; }
.about-statement-aside h2 em { color: var(--pine); }
.aside-note { max-width: 290px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; line-height: 1.85; }
.statement-lead { color: var(--ink); font-size: clamp(20px, 2.15vw, 29px); font-weight: 550; line-height: 1.7; letter-spacing: -.025em; }
.about-rich { margin-top: 30px; padding-top: 8px; border-top: 1px solid var(--line); }
.about-principles { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 42px; padding-top: 27px; border-top: 1px solid var(--ink); }
.about-principles > div { position: relative; }
.about-principles span { display: block; margin-bottom: 19px; color: var(--pine); font-family: var(--mono); font-size: 9px; }
.about-principles strong { display: block; font-size: 15px; font-weight: 750; }
.about-principles p { margin-top: 8px; color: var(--muted); font-size: 11.5px; line-height: 1.75; }
.about-stats-band { padding: 46px 0 35px; color: var(--white); background: var(--pine); }
.about-stats-grid { display: grid; grid-template-columns: repeat(4,1fr); }
.about-stat { display: flex; flex-direction: column; min-height: 130px; padding: 7px 32px; border-right: 1px solid rgba(244,241,232,.18); }
.about-stat:first-child { padding-left: 0; }
.about-stat:last-child { border-right: 0; }
.about-stat strong { color: var(--white); font-size: clamp(42px, 4.7vw, 64px); font-weight: 750; line-height: 1; letter-spacing: -.06em; }
.about-stat sup { color: var(--lime); font-size: 18px; font-weight: 500; vertical-align: top; }
.about-stat > span { margin-top: 15px; color: rgba(244,241,232,.8); font-size: 11px; }
.about-stat small { margin-top: 3px; color: rgba(244,241,232,.28); font-family: var(--mono); font-size: 7.5px; letter-spacing: .08em; }
.about-stats-note { margin-top: 18px; color: rgba(244,241,232,.32); font-size: 9.5px; }
.about-story { background: var(--white); }
.about-story-grid { display: grid; grid-template-columns: .84fr 1.16fr; gap: clamp(50px, 8vw, 120px); align-items: stretch; }
.about-story-media { position: relative; min-height: 560px; overflow: hidden; background: var(--paper-2); }
.about-story-media img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.about-story-media figcaption { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 18px 20px; color: rgba(255,255,255,.7); background: linear-gradient(0deg, rgba(5,20,16,.82), transparent); font-size: 10px; }
.about-story-media figcaption span { color: var(--lime); font-family: var(--mono); font-size: 8px; letter-spacing: .1em; }
.timeline { display: flex; flex-direction: column; justify-content: center; }
.timeline li { display: grid; grid-template-columns: 96px 1fr; gap: 24px; padding: 28px 0; border-top: 1px solid var(--line); }
.timeline li:last-child { border-bottom: 1px solid var(--line); }
.timeline-year { color: var(--pine); font-family: var(--mono); font-size: 22px; line-height: 1.2; letter-spacing: -.02em; }
.timeline h3 { font-size: 16px; font-weight: 750; }
.timeline p { margin-top: 8px; color: var(--muted); font-size: 12.5px; line-height: 1.8; }
.scope-page { position: relative; overflow: hidden; padding: 104px 0; color: var(--white); background: var(--ink); }
.scope-page::before { content: ""; position: absolute; right: -220px; top: -180px; width: 720px; height: 720px; border: 1px solid rgba(244,241,232,.08); border-radius: 50%; box-shadow: 0 0 0 100px rgba(244,241,232,.02), 0 0 0 200px rgba(244,241,232,.014); }
.scope-page-head { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 55px; margin-bottom: 45px; }
.scope-page-head h2 { margin-top: 15px; color: var(--white); font-size: clamp(38px, 5vw, 62px); }
.scope-page-head > p { width: min(400px, 38%); color: rgba(244,241,232,.5); font-size: 12.5px; line-height: 1.9; }
.scope-catalog { position: relative; display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid rgba(244,241,232,.22); border-left: 1px solid rgba(244,241,232,.13); }
.scope-catalog article { display: flex; gap: 15px; min-height: 135px; padding: 23px 21px; border-right: 1px solid rgba(244,241,232,.13); border-bottom: 1px solid rgba(244,241,232,.13); transition: background-color .25s var(--ease); }
.scope-catalog article:hover { background: rgba(244,241,232,.055); }
.scope-catalog article > span { flex: 0 0 auto; color: var(--lime); font-family: var(--mono); font-size: 9px; line-height: 1.8; opacity: .7; }
.scope-catalog h3 { color: var(--white); font-size: 14px; font-weight: 750; line-height: 1.5; }
.scope-catalog p { margin-top: 8px; color: rgba(244,241,232,.42); font-size: 11px; line-height: 1.7; }
.scope-page-actions { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin-top: 30px; }
.scope-page-actions p { color: rgba(244,241,232,.4); font-size: 11.5px; }
.capability-section { background: var(--paper); }
.capability-grid { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--ink); }
.capability-grid article { min-height: 285px; padding: 22px 24px 22px 0; border-right: 1px solid var(--line); }
.capability-grid article:not(:first-child) { padding-left: 24px; }
.capability-grid article:last-child { border-right: 0; padding-right: 0; }
.cap-no { color: var(--muted); font-family: var(--mono); font-size: 8.5px; letter-spacing: .09em; }
.cap-icon { display: grid; place-items: center; width: 44px; height: 44px; margin: 32px 0 27px; border: 1px solid var(--line); border-radius: 50%; color: var(--pine); }
.cap-icon .icon { font-size: 18px; }
.capability-grid h3 { font-size: 18px; font-weight: 750; }
.capability-grid p { margin-top: 11px; color: var(--muted); font-size: 12px; line-height: 1.8; }
.about-quote-section { display: grid; grid-template-columns: 1fr 1fr; min-height: 480px; }
.about-quote-media { min-height: 420px; overflow: hidden; }
.about-quote-media img { width: 100%; height: 100%; object-fit: cover; }
.about-quote-copy { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 65px clamp(32px, 7vw, 110px); color: var(--white); background: var(--ink-soft); }
.quote-icon { width: 29px; height: 29px; margin-bottom: 28px; color: var(--lime); opacity: .8; }
.about-quote-copy blockquote { color: var(--white); font-family: var(--serif); font-size: clamp(25px, 3vw, 38px); font-weight: 500; line-height: 1.6; letter-spacing: .01em; }
.about-quote-copy > p { margin-top: 24px; color: rgba(244,241,232,.45); font-size: 11px; letter-spacing: .08em; }
.quote-sign { margin-top: 50px; color: rgba(244,241,232,.22); font-family: var(--mono); font-size: 8px; letter-spacing: .14em; }

/* 17. Contact page
   -------------------------------------------------------------------------- */
.contact-hero { position: relative; overflow: hidden; padding: calc(var(--header) + 42px) 0 100px; background: var(--paper); }
.contact-hero::before { content: "CONTACT"; position: absolute; left: -12px; bottom: -40px; color: transparent; font-size: clamp(100px, 18vw, 280px); font-weight: 900; line-height: .8; letter-spacing: -.07em; -webkit-text-stroke: 1px rgba(9,37,31,.06); pointer-events: none; }
.contact-hero-top { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 25px; border-bottom: 1px solid var(--line); }
.contact-hero-top .hero-page-mark { color: var(--muted); opacity: .6; }
.contact-hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(50px, 8vw, 120px); align-items: center; padding: 52px 0 56px; }
.contact-hero-copy h1 { margin: 17px 0 24px; font-size: clamp(67px, 9.5vw, 130px); line-height: .94; letter-spacing: -.075em; }
.contact-hero-lead { max-width: 560px; color: var(--muted); font-size: 15.5px; line-height: 1.95; }
.contact-direct { margin-top: 40px; padding-top: 23px; border-top: 1px solid var(--ink); }
.contact-direct-phone { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 0 17px; color: var(--ink); }
.contact-direct-phone span { display: block; color: var(--muted); font-family: var(--mono); font-size: 8.5px; letter-spacing: .1em; }
.contact-direct-phone strong { display: block; margin-top: 3px; font-size: clamp(28px, 3.2vw, 41px); font-weight: 650; line-height: 1.15; letter-spacing: -.035em; }
.contact-direct-phone .icon { width: 30px; height: 30px; padding: 7px; border: 1px solid var(--ink); border-radius: 50%; transition: .25s var(--ease); }
.contact-direct-phone:hover { color: var(--pine); }
.contact-direct-phone:hover .icon { color: var(--ink); background: var(--lime); border-color: var(--lime); transform: translate(2px,-2px); }
.contact-direct dl { display: flex; gap: 45px; padding-top: 14px; border-top: 1px solid var(--line); }
.contact-direct dt { color: var(--muted); font-size: 9.5px; }
.contact-direct dd { margin-top: 3px; color: var(--ink); font-size: 12.5px; }
.contact-direct dd a:hover { color: var(--pine); }
.contact-hero-visual { position: relative; padding: 16px 18px 18px 0; }
.contact-hero-visual figure { position: relative; z-index: 2; aspect-ratio: 4 / 4.8; overflow: hidden; background: var(--paper-2); }
.contact-hero-visual figure img { width: 100%; height: 100%; object-fit: cover; }
.contact-hero-visual figcaption { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; gap: 15px; padding: 16px; color: rgba(255,255,255,.8); background: linear-gradient(0deg, rgba(5,20,16,.8), transparent); font-size: 10px; }
.contact-hero-visual figcaption span { color: var(--lime); font-family: var(--mono); font-size: 8px; }
.contact-hero-accent { position: absolute; z-index: 1; top: 0; right: 0; width: 55%; height: 48%; background: var(--lime); }
.contact-hero-note { position: absolute; z-index: 3; left: -50px; bottom: 48px; width: 220px; padding: 19px 21px; background: var(--ink); color: var(--white); }
.contact-hero-note span { color: var(--lime); font-family: var(--mono); font-size: 8px; letter-spacing: .1em; }
.contact-hero-note p { margin-top: 8px; color: rgba(244,241,232,.75); font-size: 12.5px; line-height: 1.7; }
.contact-hero-bottom { display: flex; align-items: center; justify-content: space-between; gap: 25px; padding-top: 17px; border-top: 1px solid var(--line); }
.contact-hero-bottom > p { color: var(--muted); font-family: var(--mono); font-size: 8.5px; letter-spacing: .07em; }
.contact-hero-loc { display: flex; align-items: center; gap: 8px; max-width: 48%; color: var(--muted); font-size: 10px; text-align: right; }
.contact-hero-loc i { flex: 0 0 auto; width: 5px; height: 5px; border-radius: 50%; background: var(--pine); }
.contact-channels { position: relative; z-index: 3; background: var(--white); }
.contact-channel-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; padding: 56px 0 68px; }
.contact-channel { position: relative; display: flex; flex-direction: column; min-height: 265px; padding: 27px 27px 24px; border: 1px solid var(--line); background: var(--paper); }
.contact-channel--lime { background: var(--lime); border-color: var(--lime); }
.contact-channel--dark { background: var(--ink); border-color: var(--ink); color: var(--white); }
.channel-no { color: var(--muted); font-family: var(--mono); font-size: 8.5px; letter-spacing: .08em; }
.contact-channel--lime .channel-no { color: rgba(9,37,31,.52); }
.contact-channel--dark .channel-no { color: rgba(244,241,232,.38); }
.channel-icon { display: grid; place-items: center; width: 38px; height: 38px; margin-top: 31px; border: 1px solid currentColor; border-radius: 50%; opacity: .65; }
.channel-icon .icon { font-size: 16px; }
.contact-channel h2 { margin-top: 20px; font-size: 18px; font-weight: 750; }
.contact-channel p { margin-top: 7px; color: var(--muted); font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.contact-channel--lime p { color: var(--ink); font-weight: 650; }
.contact-channel--dark p { color: rgba(244,241,232,.62); }
.channel-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 22px; color: var(--muted); border-top: 1px solid var(--line); font-size: 10px; }
.contact-channel--lime .channel-link { color: rgba(9,37,31,.65); border-color: rgba(9,37,31,.18); }
.contact-channel--dark .channel-link { color: rgba(244,241,232,.43); border-color: rgba(244,241,232,.15); }
.contact-channel .channel-link .icon { font-size: 14px; transition: transform .25s var(--ease); }
.contact-channel:hover .channel-link .icon { transform: translate(2px,-2px); }
.contact-form-section { position: relative; overflow: hidden; padding: 102px 0; color: var(--white); background: var(--ink); }
.contact-form-section::before { content: ""; position: absolute; left: -280px; bottom: -360px; width: 850px; height: 850px; border: 1px solid rgba(215,243,106,.1); border-radius: 50%; box-shadow: 0 0 0 100px rgba(215,243,106,.022), 0 0 0 200px rgba(215,243,106,.016); }
.contact-form-grid { position: relative; display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(55px, 9vw, 125px); align-items: start; }
.contact-form-intro h2 { margin: 17px 0 24px; color: var(--white); font-size: clamp(53px, 7vw, 91px); line-height: 1.02; letter-spacing: -.065em; }
.contact-form-intro h2 em { color: var(--lime); }
.contact-form-lead { max-width: 420px; color: rgba(244,241,232,.55); font-size: 13.5px; line-height: 1.9; }
.consult-list { margin-top: 38px; border-top: 1px solid rgba(244,241,232,.18); }
.consult-list li { display: flex; gap: 17px; padding: 16px 0; border-bottom: 1px solid rgba(244,241,232,.11); }
.consult-list li > span { color: var(--lime); font-family: var(--mono); font-size: 8.5px; line-height: 1.8; opacity: .65; }
.consult-list strong { display: block; color: var(--white); font-size: 13px; font-weight: 700; }
.consult-list p { margin-top: 4px; color: rgba(244,241,232,.4); font-size: 10.5px; line-height: 1.65; }
.contact-response { display: flex; align-items: center; gap: 11px; margin-top: 30px; padding: 14px 0; border-top: 1px solid rgba(244,241,232,.18); border-bottom: 1px solid rgba(244,241,232,.11); }
.response-dot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 5px rgba(215,243,106,.1); }
.contact-response p { color: rgba(244,241,232,.4); font-size: 10px; line-height: 1.6; }
.contact-response strong { color: var(--white); font-size: 11px; font-weight: 650; }
.contact-qr-small { display: flex; align-items: center; gap: 7px; margin-left: auto; }
.contact-qr-small img { width: 48px; height: 48px; background: #fff; padding: 3px; object-fit: contain; }
.contact-qr-small span { color: rgba(244,241,232,.32); font-size: 8px; line-height: 1.45; }
.contact-rich:empty { display: none; }
.contact-rich { margin-top: 28px; color: rgba(244,241,232,.48); font-size: 11.5px; line-height: 1.8; }
.contact-rich h2, .contact-rich h3 { color: var(--white); }
.contact-form-card { padding: 37px 38px 33px; color: var(--ink); background: var(--paper); box-shadow: 0 28px 80px rgba(0,0,0,.18); }
.form-card-head { margin-bottom: 26px; padding-bottom: 21px; border-bottom: 1px solid var(--line); }
.form-card-head > span { color: var(--pine); font-family: var(--mono); font-size: 8.5px; letter-spacing: .1em; }
.form-card-head h2 { margin-top: 8px; font-size: 29px; line-height: 1.2; }
.form-card-head p { margin-top: 8px; color: var(--muted); font-size: 11.5px; line-height: 1.7; }
.contact-form-card .form-field input, .contact-form-card .form-field textarea { background: rgba(255,255,255,.7); }
.contact-form-card .form-submit { margin-top: 4px; }
.visit-section { padding: 110px 0; background: var(--white); }
.visit-grid { display: grid; grid-template-columns: .86fr 1.14fr; gap: clamp(50px, 8vw, 110px); align-items: center; }
.visit-copy h2 { margin: 16px 0 23px; font-size: clamp(34px, 4.4vw, 55px); line-height: 1.12; }
.visit-copy h2 em { color: var(--pine); }
.visit-lead { max-width: 420px; color: var(--muted); font-size: 13px; line-height: 1.9; }
.visit-address { margin-top: 35px; padding: 20px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
.visit-address > span { color: var(--muted); font-family: var(--mono); font-size: 8px; letter-spacing: .1em; }
.visit-address p { margin-top: 9px; font-size: 15px; font-weight: 650; line-height: 1.65; }
.visit-address a { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; color: var(--pine); font-size: 10.5px; }
.visit-address a .icon { font-size: 12px; }
.visit-meta { display: flex; gap: 38px; margin-top: 23px; }
.visit-meta div { display: flex; flex-direction: column; gap: 3px; }
.visit-meta span { color: var(--muted); font-size: 9px; }
.visit-meta strong { font-size: 11.5px; font-weight: 650; }
.visit-map { position: relative; min-height: 520px; overflow: hidden; background: var(--mint-pale); }
.map-art { width: 100%; height: 100%; min-height: 520px; object-fit: cover; }
.map-label { position: absolute; z-index: 2; left: 20px; top: 18px; color: var(--ink); font-family: var(--mono); font-size: 8.5px; letter-spacing: .1em; }
.map-card { position: absolute; z-index: 3; right: 22px; bottom: 44px; width: 218px; padding: 18px 19px; background: var(--ink); color: var(--white); }
.map-card > span { color: var(--lime); font-family: var(--mono); font-size: 8px; letter-spacing: .1em; }
.map-card p { margin-top: 7px; color: rgba(244,241,232,.55); font-size: 9.5px; line-height: 1.55; }
.map-card a { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; padding-top: 11px; border-top: 1px solid rgba(244,241,232,.2); color: var(--white); font-size: 10px; }
.map-card a .icon { font-size: 13px; color: var(--lime); }
.map-note { position: absolute; z-index: 2; left: 20px; bottom: 15px; color: var(--muted); font-size: 8.5px; }
.faq-section { padding: 105px 0; background: var(--paper); }
.faq-grid { display: grid; grid-template-columns: .66fr 1.34fr; gap: clamp(50px, 8vw, 120px); align-items: start; }
.faq-intro h2 { margin: 17px 0 22px; font-size: clamp(34px, 4.3vw, 53px); line-height: 1.13; }
.faq-intro > p:not(.kicker) { max-width: 330px; color: var(--muted); font-size: 12.5px; line-height: 1.9; margin-bottom: 25px; }
.faq-list { border-top: 1px solid var(--ink); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { display: flex; align-items: center; gap: 18px; padding: 21px 0; cursor: pointer; list-style: none; font-size: 14px; font-weight: 650; line-height: 1.55; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary span { flex: 0 0 auto; color: var(--muted); font-family: var(--mono); font-size: 8.5px; }
.faq-list summary i { position: relative; flex: 0 0 auto; width: 16px; height: 16px; margin-left: auto; }
.faq-list summary i::before, .faq-list summary i::after { content: ""; position: absolute; left: 2px; top: 7px; width: 12px; height: 1px; background: var(--ink); transition: transform .25s var(--ease); }
.faq-list summary i::after { transform: rotate(90deg); }
.faq-list details[open] summary i::after { transform: rotate(0); }
.faq-answer { padding: 0 42px 22px; }
.faq-answer p { color: var(--muted); font-size: 12px; line-height: 1.85; }

/* 18. Product catalog
   -------------------------------------------------------------------------- */
.catalog-section { padding: 80px 0 108px; background: var(--white); }
.catalog-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 60px; margin-bottom: 38px; }
.catalog-head h2 { margin-top: 15px; font-size: clamp(34px, 4.4vw, 55px); line-height: 1.12; }
.catalog-head h2 em { color: var(--pine); }
.catalog-head > p { width: min(370px, 36%); color: var(--muted); font-size: 12.5px; line-height: 1.9; }
.category-board { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--ink); border-left: 1px solid var(--line); }
.category-item { display: grid; grid-template-columns: 1fr 17px; grid-template-areas: "name icon" "small icon"; align-items: center; min-height: 74px; padding: 14px 16px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--ink); }
.category-item span { grid-area: name; font-size: 12.5px; font-weight: 650; line-height: 1.5; }
.category-item small { grid-area: small; color: var(--muted); font-family: var(--mono); font-size: 7px; letter-spacing: .08em; opacity: .52; }
.category-item .icon { grid-area: icon; font-size: 14px; color: var(--muted); opacity: .4; transition: .2s var(--ease); }
.category-item:hover { background: var(--mint-pale); }
.category-item:hover .icon { opacity: 1; transform: translate(2px,-2px); }
.category-item.is-active { color: var(--ink); background: var(--lime); }
.category-item.is-active small { color: rgba(9,37,31,.6); opacity: 1; }
.category-item.is-active .icon { color: var(--ink); opacity: 1; }
.category-item--help { background: var(--ink); color: var(--white); }
.category-item--help small { color: var(--lime); opacity: .8; }
.category-item--help .icon { color: var(--lime); opacity: 1; }
.category-item--help:hover { background: var(--pine); color: var(--white); }
.catalog-bar { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin-top: 44px; margin-bottom: 28px; padding-bottom: 15px; border-bottom: 1px solid var(--line); }
.catalog-bar p { color: var(--ink); font-size: 11.5px; font-weight: 650; }
.catalog-bar p span { color: var(--muted); font-weight: 400; }
.catalog-count { color: var(--muted); font-family: var(--mono); font-size: 8px; letter-spacing: .08em; }
.product-grid--catalog { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 44px 26px; }
.product-card--catalog .product-media { aspect-ratio: 4 / 3; }
.product-card--catalog .product-body p { -webkit-line-clamp: 2; }
.product-detail-link { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; color: var(--pine); font-size: 10.5px; font-weight: 650; }
.product-detail-link .icon { font-size: 12px; transition: transform .2s var(--ease); }
.product-detail-link:hover .icon { transform: translateX(3px); }
.catalog-help { padding: 72px 0; color: var(--white); background: var(--ink); }
.catalog-help-inner { display: grid; grid-template-columns: 1.2fr .9fr auto; align-items: center; gap: 50px; }
.catalog-help h2 { margin-top: 13px; color: var(--white); font-size: clamp(28px, 3.2vw, 42px); line-height: 1.2; }
.catalog-help-inner > p { color: rgba(244,241,232,.5); font-size: 11.5px; line-height: 1.9; }
.catalog-help .btn { white-space: nowrap; }

/* 19. Product detail
   -------------------------------------------------------------------------- */
.product-detail-section { background: var(--white); }
.pdp { display: grid; grid-template-columns: 1.06fr .94fr; gap: clamp(44px, 6vw, 86px); align-items: start; padding: 52px 0 100px; }
.pdp-gallery { min-width: 0; }
.pdp-main { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: linear-gradient(145deg, #e8eee6, #f2eee3); }
.pdp-main > img { width: 100%; height: 100%; object-fit: cover; transition: opacity .25s var(--ease); }
.pdp-label { position: absolute; left: 20px; top: 18px; color: var(--muted); font-family: var(--mono); font-size: 8px; letter-spacing: .1em; }
.pdp-name { position: absolute; left: 20px; bottom: 16px; color: rgba(9,37,31,.3); font-family: var(--mono); font-size: 8px; letter-spacing: .1em; }
.pdp-thumbs { display: flex; gap: 8px; margin-top: 9px; }
.pdp-thumb { width: 78px; height: 62px; padding: 0; border: 1px solid var(--line); background: var(--paper); overflow: hidden; }
.pdp-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 5px; }
.pdp-thumb.is-active, .pdp-thumb:hover { border-color: var(--ink); }
.pdp-info { padding-top: 5px; }
.pdp-title-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 13px; border-bottom: 1px solid var(--line); }
.pdp-cat { color: var(--pine); font-size: 10.5px; font-weight: 700; }
.pdp-model { color: var(--muted); font-family: var(--mono); font-size: 8px; letter-spacing: .06em; }
.pdp-info h1 { margin: 25px 0 14px; font-size: clamp(35px, 4vw, 50px); line-height: 1.18; text-wrap: balance; }
.pdp-sub { color: var(--muted); font-size: 13px; line-height: 1.8; }
.pdp-meta { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 17px; color: var(--muted); font-family: var(--mono); font-size: 9px; }
.pdp-meta span { display: flex; align-items: center; gap: 6px; }
.pdp-meta .icon { font-size: 12px; color: var(--pine); }
.pdp-desc { margin-top: 25px; color: var(--muted); font-size: 13px; line-height: 1.9; }
.pdp-points { margin-top: 26px; border-top: 1px solid var(--line); }
.pdp-points li { display: flex; gap: 13px; padding: 11px 0; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 12px; line-height: 1.7; }
.pdp-points li span { color: var(--pine); font-family: var(--mono); font-size: 8px; line-height: 2; opacity: .65; }
.pdp-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.pdp-tip { display: flex; align-items: flex-start; gap: 8px; margin-top: 20px; color: var(--muted); font-size: 10px; line-height: 1.7; }
.pdp-tip i { flex: 0 0 auto; width: 5px; height: 5px; margin-top: 6px; border-radius: 50%; background: var(--lime-deep); }
.pdp-band { color: var(--white); background: var(--ink); }
.pdp-band-grid { display: grid; grid-template-columns: .8fr repeat(3,1fr); }
.pdp-band-grid > * { padding: 36px 27px; border-right: 1px solid rgba(244,241,232,.12); }
.pdp-band-grid > *:first-child { padding-left: 0; }
.pdp-band-grid > *:last-child { border-right: 0; padding-right: 0; }
.pdp-band-title span { color: var(--lime); font-family: var(--mono); font-size: 8px; letter-spacing: .1em; }
.pdp-band-title p { margin-top: 11px; color: var(--white); font-family: var(--serif); font-size: 22px; line-height: 1.5; }
.pdp-band-grid article > span { color: rgba(244,241,232,.3); font-family: var(--mono); font-size: 8px; }
.pdp-band-grid h3 { margin-top: 20px; color: var(--white); font-size: 15px; font-weight: 700; }
.pdp-band-grid article p { margin-top: 8px; color: rgba(244,241,232,.4); font-size: 10.5px; line-height: 1.75; }
.pdp-content-section { background: var(--paper); }
.pdp-content-grid { display: grid; grid-template-columns: minmax(0,1fr) 330px; gap: clamp(50px, 8vw, 120px); align-items: start; }
.detail-heading .kicker { margin-bottom: 17px; }
.detail-heading h2 { font-size: clamp(33px, 4vw, 48px); line-height: 1.18; }
.detail-heading h2 em { color: var(--pine); }
.pdp-content-main .rich-content { margin-top: 38px; }
.pdp-aside { position: sticky; top: calc(var(--header) + 25px); display: flex; flex-direction: column; gap: 18px; }
.pdp-aside-card { padding: 28px 26px; color: var(--white); background: var(--ink); }
.aside-label { color: var(--muted); font-family: var(--mono); font-size: 8px; letter-spacing: .1em; }
.pdp-aside-card .aside-label { color: var(--lime); }
.pdp-aside-card h2 { margin: 12px 0 13px; color: var(--white); font-size: 27px; line-height: 1.2; }
.pdp-aside-card p:not(.aside-label) { color: rgba(244,241,232,.46); font-size: 11px; line-height: 1.8; margin-bottom: 20px; }
.pdp-aside-card .btn { width: 100%; }
.aside-text-link { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 15px; padding-top: 14px; border-top: 1px solid rgba(244,241,232,.16); color: rgba(244,241,232,.7); font-size: 10px; }
.aside-text-link .icon { color: var(--lime); font-size: 13px; }
.pdp-aside-nav { padding: 25px 24px; border: 1px solid var(--line); background: rgba(251,249,243,.5); }
.pdp-aside-nav h3 { margin: 8px 0 12px; font-size: 15px; }
.pdp-aside-nav nav { border-top: 1px solid var(--line); }
.pdp-aside-nav nav a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 10.5px; line-height: 1.5; }
.pdp-aside-nav nav a:hover { color: var(--pine); }
.pdp-aside-nav .icon { font-size: 11px; opacity: .35; }
.related-section .product-grid { grid-template-columns: repeat(4,1fr); }
.prev-next-wrap { background: var(--white); padding: 8px 0 55px; }
.prev-next { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
.prev-next p { min-width: 0; color: var(--muted); font-size: 11.5px; line-height: 1.7; }
.prev-next p + p { text-align: right; }
.prev-next p > span { display: block; margin-bottom: 4px; color: var(--muted); font-family: var(--mono); font-size: 8px; letter-spacing: .08em; }
.prev-next a { color: var(--ink); }
.prev-next a:hover { color: var(--pine); }

/* 20. News archive & article
   -------------------------------------------------------------------------- */
.news-archive-section, .case-archive-section { background: var(--white); }
.filter-bar { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 30px; border-bottom: 1px solid var(--ink); }
.filter-item { display: inline-flex; align-items: center; min-height: 35px; padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 11px; line-height: 1.3; }
.filter-item:hover { color: var(--ink); border-color: var(--ink); }
.filter-item.is-active { color: var(--ink); background: var(--lime); border-color: var(--lime); }
.news-archive { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 44px 30px; margin-top: 38px; }
.archive-card { min-width: 0; }
.archive-card:first-child { grid-column: 1 / -1; }
.archive-link { display: block; }
.archive-card:first-child .archive-link { display: grid; grid-template-columns: 1.12fr .88fr; gap: 40px; align-items: stretch; }
.archive-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--paper-2); }
.archive-card:first-child .archive-media { aspect-ratio: 16 / 9; }
.archive-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.archive-link:hover .archive-media img { transform: scale(1.035); }
.archive-index { position: absolute; left: 15px; bottom: 13px; color: rgba(255,255,255,.78); font-family: var(--mono); font-size: 8px; letter-spacing: .1em; }
.archive-card:nth-child(n+2) .archive-index { display: none; }
.archive-body { position: relative; padding-top: 16px; }
.archive-card:first-child .archive-body { display: flex; flex-direction: column; justify-content: center; padding: 0; }
.archive-meta { display: flex; align-items: center; justify-content: space-between; gap: 15px; color: var(--muted); font-family: var(--mono); font-size: 8.5px; }
.archive-meta span { color: var(--pine); font-family: var(--sans); font-size: 9.5px; font-weight: 650; }
.archive-body h2 { margin: 11px 0 8px; font-size: 19px; line-height: 1.48; letter-spacing: -.02em; }
.archive-card:first-child .archive-body h2 { font-size: clamp(26px, 3vw, 36px); line-height: 1.35; }
.archive-body > p { color: var(--muted); font-size: 11.5px; line-height: 1.8; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.archive-card:first-child .archive-body > p { -webkit-line-clamp: 4; font-size: 12.5px; }
.archive-more { display: inline-flex; align-items: center; gap: 7px; margin-top: 15px; color: var(--ink); font-size: 10.5px; font-weight: 650; }
.archive-more .icon { font-size: 12px; transition: transform .2s var(--ease); }
.archive-link:hover .archive-more .icon { transform: translate(2px,-2px); }
.archive-link:hover h2 { color: var(--pine); }
.article-section { padding: 0 0 90px; background: var(--white); }
.article-head { max-width: 900px; padding: 50px 0 42px; }
.article-cat { display: inline-flex; padding: 5px 10px; color: var(--pine); background: var(--mint-pale); font-size: 9.5px; font-weight: 650; }
.article-head h1 { margin: 18px 0 20px; font-size: clamp(36px, 4.6vw, 57px); line-height: 1.24; }
.article-lead { max-width: 760px; color: var(--muted); font-family: var(--serif); font-size: 18px; line-height: 1.8; }
.article-meta { display: flex; flex-wrap: wrap; gap: 21px; margin-top: 25px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font-family: var(--mono); font-size: 8.5px; }
.article-layout { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: clamp(50px, 7vw, 100px); align-items: start; }
.article-main { min-width: 0; }
.article-cover { aspect-ratio: 16 / 8.5; overflow: hidden; margin-bottom: 38px; background: var(--paper-2); }
.article-cover img { width: 100%; height: 100%; object-fit: cover; }
.article-content { max-width: 760px; font-size: 15px; line-height: 2.05; }
.article-content h2 { font-size: 28px; }
.article-footer { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--ink); }
.article-tags { display: flex; align-items: center; gap: 10px; color: var(--muted); font-family: var(--mono); font-size: 8px; }
.article-tags b { color: var(--pine); font-family: var(--sans); font-size: 10px; }
.article-aside { position: sticky; top: calc(var(--header) + 28px); display: flex; flex-direction: column; gap: 18px; }
.article-side-card { padding: 26px 24px; border: 1px solid var(--line); background: var(--paper); }
.article-side-card:first-child { color: var(--white); background: var(--ink); border-color: var(--ink); }
.article-side-card:first-child .aside-label { color: var(--lime); }
.article-side-card h2 { margin: 11px 0 11px; font-size: 24px; line-height: 1.28; }
.article-side-card:first-child h2 { color: var(--white); }
.article-side-card p:not(.aside-label) { color: var(--muted); font-size: 10.5px; line-height: 1.8; }
.article-side-card:first-child p:not(.aside-label) { color: rgba(244,241,232,.44); }
.article-side-card .btn { width: 100%; margin-top: 18px; }
.aside-news { margin-top: 8px; border-top: 1px solid var(--line); }
.aside-news li { padding: 11px 0; border-bottom: 1px solid var(--line); }
.aside-news a { display: block; font-size: 11.5px; line-height: 1.6; }
.aside-news a:hover { color: var(--pine); }
.aside-news time { display: block; margin-top: 4px; color: var(--muted); font-family: var(--mono); font-size: 8px; }
.article-section > .shell > .prev-next-wrap { padding-top: 7px; }
.article-section .prev-next-wrap { background: none; }

/* 21. Case archive & detail
   -------------------------------------------------------------------------- */
.case-archive-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 42px 30px; margin-top: 38px; }
.case-archive-card { min-width: 0; }
.case-archive-media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-2); }
.case-archive-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.case-archive-card:hover .case-archive-media img { transform: scale(1.035); }
.case-archive-index { position: absolute; left: 15px; top: 14px; color: rgba(255,255,255,.8); font-family: var(--mono); font-size: 8px; letter-spacing: .1em; }
.case-archive-open { position: absolute; right: 15px; bottom: 14px; display: grid; place-items: center; width: 38px; height: 38px; color: var(--ink); background: var(--lime); border-radius: 50%; transform: scale(.9); opacity: .9; transition: .2s var(--ease); }
.case-archive-open .icon { font-size: 15px; }
.case-archive-card:hover .case-archive-open { transform: scale(1); }
.case-archive-copy { padding-top: 17px; }
.case-archive-copy h2 { margin: 10px 0 7px; font-size: 21px; line-height: 1.45; }
.case-archive-copy h2 a:hover { color: var(--pine); }
.case-archive-copy > p { color: var(--muted); font-size: 11.5px; line-height: 1.75; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.case-detail-hero { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: 690px; overflow: hidden; color: var(--white); background: var(--ink); }
.case-detail-hero > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.case-detail-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(5,20,16,.95) 0%, rgba(5,20,16,.56) 55%, rgba(5,20,16,.72) 100%); }
.case-detail-shell { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 690px; padding-top: calc(var(--header) + 25px); padding-bottom: 47px; }
.case-detail-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 23px; border-bottom: 1px solid rgba(244,241,232,.18); }
.case-detail-top .crumbs { color: rgba(244,241,232,.4); }
.case-detail-top .crumbs a { color: rgba(244,241,232,.52); }
.case-detail-top .crumbs a:hover { color: var(--lime); }
.case-detail-top .crumb-sep { color: rgba(244,241,232,.18); }
.case-detail-top .hero-page-mark { color: rgba(244,241,232,.3); }
.case-detail-copy { max-width: 1000px; padding-top: 130px; }
.case-detail-copy h1 { margin: 16px 0 21px; color: var(--white); font-size: clamp(38px, 4.6vw, 62px); line-height: 1.22; }
.case-detail-meta { display: flex; flex-wrap: wrap; gap: 20px; color: rgba(244,241,232,.68); font-family: var(--mono); font-size: 9px; }
.case-detail-meta span { position: relative; padding-left: 11px; }
.case-detail-meta span::before { content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 3px; border-radius: 50%; background: var(--lime); }
.case-detail-body { background: var(--white); }
.case-detail-grid { display: grid; grid-template-columns: minmax(0,1fr) 330px; gap: clamp(50px, 8vw, 110px); align-items: start; }
.case-detail-main .rich-content { margin-top: 36px; }
.case-detail-aside { display: flex; flex-direction: column; gap: 18px; }
.case-facts { padding: 26px 24px; border: 1px solid var(--line); background: var(--paper); }
.case-facts dl { margin-top: 15px; }
.case-facts dl div { padding: 10px 0; border-top: 1px solid var(--line); }
.case-facts dt { color: var(--muted); font-size: 9px; }
.case-facts dd { margin-top: 3px; font-size: 11.5px; line-height: 1.6; }
.case-facts-note { margin-top: 13px; color: var(--muted); font-size: 8.5px; line-height: 1.6; opacity: .7; }
.case-side-cta { padding: 27px 24px; color: var(--white); background: var(--ink); }
.case-side-cta .aside-label { color: var(--lime); }
.case-side-cta h2 { margin: 11px 0 12px; color: var(--white); font-size: 25px; line-height: 1.3; }
.case-side-cta p:not(.aside-label) { color: rgba(244,241,232,.44); font-size: 10.5px; line-height: 1.8; margin-bottom: 18px; }
.case-side-cta .btn { width: 100%; }
.case-detail-body .prev-next-wrap { background: none; }

/* 22. Message
   -------------------------------------------------------------------------- */
.message-hero h1 { font-size: clamp(52px, 7vw, 90px); }
.message-section { padding: 85px 0 110px; background: var(--paper); }
.message-grid { display: grid; grid-template-columns: .86fr 1.14fr; gap: clamp(55px, 9vw, 130px); align-items: start; }
.message-copy h2 { margin: 16px 0 20px; font-size: clamp(36px, 4.5vw, 55px); line-height: 1.15; }
.message-copy h2 em { color: var(--pine); }
.message-copy > p:not(.kicker) { max-width: 410px; color: var(--muted); font-size: 13px; line-height: 1.9; }
.consult-list--light { margin-top: 31px; border-top: 1px solid var(--ink); }
.consult-list--light li { border-bottom-color: var(--line); }
.consult-list--light li > span { color: var(--pine); }
.consult-list--light strong { color: var(--ink); }
.consult-list--light p { color: var(--muted); }
.message-contact { margin-top: 28px; padding-top: 19px; border-top: 1px solid var(--line); }
.message-contact p { color: var(--muted); font-size: 10px; }
.message-contact a { display: inline-flex; align-items: center; gap: 9px; margin-top: 7px; color: var(--ink); font-size: 23px; font-weight: 650; letter-spacing: -.02em; }
.message-contact .icon { color: var(--pine); font-size: 17px; }
.message-form-card { padding: 35px 37px 31px; background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-soft); }
.message-form-card .form-card-head { border-bottom-color: var(--line); }

/* 23. Search
   -------------------------------------------------------------------------- */
.search-hero h1 { font-size: clamp(56px, 7.5vw, 100px); }
.search-section { background: var(--white); }
.search-shell { max-width: 980px; }
.search-page-form { display: flex; gap: 10px; padding-bottom: 16px; border-bottom: 1px solid var(--ink); }
.search-page-form input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: clamp(18px, 2.2vw, 28px); padding: 10px 0; }
.search-page-form input::placeholder { color: var(--muted); opacity: .55; }
.search-page-form button { flex: 0 0 auto; }
.search-results { margin-top: 12px; }
.search-result { border-bottom: 1px solid var(--line); }
.search-result a { display: block; padding: 25px 0; }
.search-result-meta { display: flex; align-items: center; gap: 14px; color: var(--muted); font-family: var(--mono); font-size: 8.5px; }
.search-result-meta span { color: var(--pine); font-family: var(--sans); font-size: 9.5px; font-weight: 650; }
.search-result h2 { margin: 8px 0 7px; font-size: 20px; line-height: 1.45; }
.search-result p { color: var(--muted); font-size: 11.5px; line-height: 1.8; max-width: 780px; }
.search-result-more { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; color: var(--pine); font-size: 10px; }
.search-result-more .icon { font-size: 12px; }
.search-result a:hover h2 { color: var(--pine); }
.search-result mark { color: var(--ink); background: var(--lime); padding: 0 2px; }
.search-section .empty-state { padding-top: 65px; }

/* 24. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1240px) {
  .shell { width: min(calc(100% - 48px), var(--shell)); }
  .header-inner { gap: 22px; }
  .nav-link { padding-inline: 9px; font-size: 12.5px; }
  .head-phone { display: none; }
  .hero-side-note { display: none; }
  .hero h1 { font-size: clamp(58px, 8.2vw, 110px); }
  .home-about-grid { gap: 60px; }
  .home-about-visual { min-height: 600px; }
  .about-photo--main { height: 550px; }
  .about-photo--sub { height: 270px; }
  .footer-main { grid-template-columns: 1.3fr .65fr .85fr 1fr; gap: 35px; }
  .product-grid--home { gap: 20px; }
  .pdp-content-grid, .article-layout, .case-detail-grid { grid-template-columns: minmax(0,1fr) 290px; gap: 50px; }
  .contact-form-grid { gap: 55px; }
}

@media (max-width: 1120px) {
  :root { --header: 76px; }
  .menu-toggle { display: inline-grid; }
  .head-search { display: none; }
  .header-actions .head-cta { display: none; }
  .main-nav { position: fixed; z-index: 210; top: 0; right: 0; bottom: 0; display: none; width: 100%; margin: 0; padding: 0 28px 30px; overflow-y: auto; background: var(--ink); color: var(--white); }
  .main-nav.is-open { display: block; animation: navSlide .35s var(--ease); }
@keyframes navSlide { from { transform: translateX(100%); } to { transform: none; } }
  .nav-mobile-head { display: flex; align-items: center; justify-content: space-between; min-height: 82px; border-bottom: 1px solid rgba(244,241,232,.13); }
  .brand--mobile { color: var(--white); }
  .brand--mobile .brand-mark { color: var(--white); width: 36px; height: 36px; }
  .brand--mobile .brand-type strong { font-size: 16px; }
  .nav-close { color: var(--white); border-color: rgba(244,241,232,.2); }
  .nav-close:hover { color: var(--ink); }
  .nav-list { display: block; margin-top: 20px; }
  .nav-item { border-bottom: 1px solid rgba(244,241,232,.1); }
  .nav-row { display: flex; align-items: stretch; justify-content: space-between; }
  .nav-link { flex: 1; min-height: 60px; padding: 11px 0; color: var(--white); font-size: 18px; font-weight: 600; }
  .nav-link em { display: inline; margin-top: 4px; color: rgba(244,241,232,.32); font-family: var(--mono); font-size: 8px; letter-spacing: .11em; opacity: 1; }
  .nav-link::after { display: none; }
  .nav-link[aria-current], .is-solid .nav-link[aria-current] { color: var(--lime); }
  .sub-toggle { display: block; width: 46px; color: rgba(244,241,232,.5); }
  .nav-item.is-open .sub-toggle .icon { transform: rotate(45deg); }
  .nav-drop { position: static; width: 100%; padding: 0 0 12px; border: 0; background: transparent; color: var(--white); box-shadow: none; opacity: 1; visibility: visible; transform: none; display: none; }
  .nav-item.is-open > .nav-drop { display: block; }
  .nav-drop-inner { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 12px; }
  .nav-drop a { padding: 9px 0; border-bottom-color: rgba(244,241,232,.07); color: rgba(244,241,232,.54); font-size: 12px; }
  .nav-drop .icon { display: none; }
  .nav-mobile-foot { display: block; margin-top: 28px; padding-top: 23px; border-top: 1px solid rgba(244,241,232,.13); }
  .nav-mobile-label { color: var(--lime); font-family: var(--mono); font-size: 8px; letter-spacing: .11em; }
  .nav-mobile-phone { display: block; margin: 7px 0 10px; color: var(--white); font-size: 27px; font-weight: 650; letter-spacing: -.02em; }
  .nav-mobile-foot > p:not(.nav-mobile-label) { color: rgba(244,241,232,.38); font-size: 11px; line-height: 1.7; }
  .nav-mobile-foot .btn { width: 100%; margin-top: 18px; }
  .nav-overlay.is-open { opacity: 1; visibility: visible; }
  .header-inner { justify-content: space-between; }
  .brand { margin-right: auto; }
  .header-actions { gap: 10px; }
  .head-cta { display: none; }
  .menu-toggle { border-color: currentColor; }
  .hero-content { grid-template-columns: 1fr; gap: 33px; }
  .hero-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 35px; max-width: none; }
  .hero-intro > p { max-width: 430px; }
  .hero-actions { margin-top: 0; flex: 0 0 auto; }
  .home-about-grid { grid-template-columns: .92fr 1.08fr; gap: 45px; }
  .home-about-visual { min-height: 540px; }
  .about-photo--main { height: 500px; }
  .about-photo--sub { height: 235px; }
  .about-seal { width: 95px; height: 95px; left: 59%; }
  .scope-grid { grid-template-columns: repeat(2,1fr); }
  .product-grid--home { grid-template-columns: repeat(2,1fr); gap: 34px 22px; }
  .product-media { aspect-ratio: 4 / 3.2; }
  .product-grid--catalog { grid-template-columns: repeat(2,1fr); }
  .process-step { padding-right: 16px; }
  .process-step:not(:first-child) { padding-left: 17px; }
  .process-en { left: 17px; font-size: 7px; }
  .case-grid { gap: 20px; }
  .journal-grid { grid-template-columns: .73fr 1.27fr; gap: 50px; }
  .section { padding: 92px 0; }
  .cta-card { padding: 48px 44px; }
  .cta-copy h2 { font-size: clamp(34px, 4.4vw, 52px); }
  .footer-main { grid-template-columns: 1.3fr .7fr 1fr; }
  .footer-contact { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 20px; padding-top: 28px; border-top: 1px solid rgba(244,241,232,.11); }
  .footer-contact h3 { grid-column: 1 / -1; margin-bottom: 0; }
  .footer-contact ul { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 30px; }
  .footer-qr { margin-top: 0; }
  .about-statement-grid { grid-template-columns: .7fr 1.3fr; gap: 55px; }
  .about-story-grid { gap: 50px; }
  .about-story-media { min-height: 480px; }
  .scope-catalog { grid-template-columns: repeat(2,1fr); }
  .capability-grid { grid-template-columns: repeat(2,1fr); }
  .capability-grid article { min-height: auto; padding-bottom: 32px; }
  .capability-grid article:nth-child(2) { border-right: 0; }
  .capability-grid article:nth-child(n+3) { padding-top: 32px; border-top: 1px solid var(--line); }
  .contact-hero-grid { gap: 55px; }
  .contact-channel-grid { gap: 12px; }
  .contact-channel { padding: 23px 21px; min-height: 255px; }
  .contact-form-grid { grid-template-columns: .9fr 1.1fr; gap: 45px; }
  .contact-form-card { padding: 30px 28px; }
  .faq-grid { gap: 50px; }
  .catalog-head > p, .section-head-side { width: min(340px, 34%); }
  .pdp { gap: 45px; }
  .pdp-content-grid, .article-layout, .case-detail-grid { grid-template-columns: minmax(0,1fr) 270px; gap: 38px; }
  .article-content { font-size: 14px; }
}

@media (max-width: 900px) {
  .shell { width: calc(100% - 40px); }
  .section { padding: 78px 0; }
  .section-head, .scope-head, .process-head { align-items: flex-start; flex-direction: column; gap: 25px; margin-bottom: 36px; }
  .section-head-side, .scope-head-side, .process-head > p { width: min(520px, 100%); }
  .section-head h2, .scope-head h2, .process-head h2 { font-size: clamp(32px, 5.2vw, 44px); }
  .hero { min-height: 780px; }
  .hero-shell { min-height: 780px; padding-top: calc(var(--header) + 24px); }
  .hero-content { padding: 40px 0 40px; }
  .hero h1 { font-size: clamp(58px, 12vw, 100px); }
  .hero-title-line--accent { font-size: .88em; }
  .hero-intro { display: block; }
  .hero-intro > p { max-width: 500px; }
  .hero-actions { margin-top: 22px; }
  .hero-bottom { flex-wrap: wrap; gap: 20px; }
  .hero-scroll { display: none; }
  .hero-controls { margin-left: auto; }
  .hero-topline .kicker { font-size: 8.5px; }
  .hero-place { display: none; }
  .scenario-label { padding-left: 20px; padding-right: 20px; }
  .home-about-grid, .about-statement-grid, .journal-grid, .contact-form-grid, .visit-grid, .faq-grid, .message-grid, .about-story-grid, .contact-hero-grid { grid-template-columns: 1fr; }
  .home-about-visual { width: min(620px, 100%); min-height: 570px; margin-bottom: 10px; }
  .home-about-copy { max-width: 680px; }
  .home-about::before { font-size: 300px; top: 20px; }
  .about-heading-row .vertical-note { display: none; }
  .about-numbers { max-width: 550px; }
  .scope-grid { grid-template-columns: 1fr 1fr; }
  .scope-foot { align-items: flex-start; flex-direction: column; gap: 18px; }
  .process-rail { grid-template-columns: 1fr; border-top: 1px solid rgba(244,241,232,.24); }
  .process-step, .process-step:not(:first-child), .process-step:last-child { display: grid; grid-template-columns: 46px 1fr; grid-template-areas: "no icon" "no title" "no desc" "no en"; min-height: 0; padding: 22px 0; border-right: 0; border-bottom: 1px solid rgba(244,241,232,.13); }
  .process-no { grid-area: no; padding-top: 6px; }
  .process-icon { grid-area: icon; margin: 0 0 15px; width: 38px; height: 38px; }
  .process-step h3 { grid-area: title; }
  .process-step p { grid-area: desc; max-width: 560px; }
  .process-en { position: static; grid-area: en; margin-top: 13px; }
  .process-step:first-child .process-en { left: auto; }
  .process-bottom { align-items: flex-start; flex-direction: column; padding-bottom: 78px; }
  .case-grid { grid-template-columns: 1fr 1fr; }
  .case-grid .case-card:last-child { grid-column: 1 / -1; max-width: calc(50% - 10px); }
  .journal-intro { position: static; }
  .journal-mark { display: none; }
  .journal-intro > p:not(.kicker) { max-width: 520px; }
  .journal-list { margin-top: 10px; }
  .cta-card { flex-direction: column; align-items: flex-start; padding: 42px 33px; gap: 32px; }
  .cta-actions { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .cta-wave { width: 430px; opacity: .5; }
  .footer-main { grid-template-columns: 1fr 1fr; gap: 40px 30px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-tagline br { display: none; }
  .footer-contact { grid-column: 1 / -1; }
  .about-hero, .about-hero-shell { min-height: 660px; }
  .about-hero-copy { padding: 55px 0 40px; }
  .about-hero-bottom { align-items: flex-start; flex-direction: column; gap: 22px; }
  .about-hero-data { gap: 35px; }
  .about-hero-word { display: none; }
  .about-statement-aside { position: static; }
  .about-statement-aside .aside-note { max-width: 520px; }
  .about-stats-grid { grid-template-columns: 1fr 1fr; gap: 28px 0; }
  .about-stat { min-height: auto; padding: 0 24px; }
  .about-stat:nth-child(2) { border-right: 0; }
  .about-stat:nth-child(3) { padding-left: 0; }
  .about-story-media { width: 100%; min-height: 0; aspect-ratio: 16/9; }
  .about-story-media img { position: static; width: 100%; height: 100%; }
  .timeline { margin-top: 15px; }
  .scope-page-head { align-items: flex-start; flex-direction: column; gap: 22px; }
  .scope-page-head > p { width: min(520px, 100%); }
  .scope-catalog { grid-template-columns: 1fr 1fr; }
  .about-quote-section { grid-template-columns: 1fr; }
  .about-quote-media { min-height: 320px; }
  .about-quote-copy { padding: 55px 30px; }
  .contact-hero { padding-bottom: 70px; }
  .contact-hero-grid { padding-top: 35px; }
  .contact-hero-copy h1 { font-size: clamp(62px, 14vw, 110px); }
  .contact-hero-visual { width: min(560px, 100%); margin-top: 25px; }
  .contact-hero-note { left: auto; right: 18px; bottom: 32px; }
  .contact-hero-bottom { align-items: flex-start; flex-direction: column; gap: 11px; }
  .contact-hero-loc { max-width: 100%; text-align: left; }
  .contact-channel-grid { grid-template-columns: 1fr; padding-top: 35px; }
  .contact-channel { min-height: 225px; }
  .contact-form-intro h2 { font-size: clamp(50px, 9vw, 78px); }
  .contact-form-card { padding: 30px 25px; }
  .contact-response { flex-wrap: wrap; }
  .contact-qr-small { margin-left: 0; }
  .visit-map { min-height: 420px; }
  .map-art { min-height: 420px; }
  .faq-intro h2 { margin-bottom: 17px; }
  .faq-intro > p:not(.kicker) { max-width: 560px; }
  .catalog-head { flex-direction: column; align-items: flex-start; gap: 18px; }
  .catalog-head > p { width: min(540px,100%); }
  .category-board { grid-template-columns: repeat(3,1fr); }
  .catalog-help-inner { grid-template-columns: 1fr auto; gap: 25px; }
  .catalog-help-inner > p { grid-column: 1; grid-row: 2; max-width: 520px; }
  .catalog-help .btn { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .pdp { grid-template-columns: 1fr; gap: 35px; padding-bottom: 75px; }
  .pdp-main { max-width: 640px; }
  .pdp-info { max-width: 700px; }
  .pdp-band-grid { grid-template-columns: 1fr 1fr; }
  .pdp-band-grid > * { padding: 25px 22px; }
  .pdp-band-grid > *:nth-child(2) { border-right: 0; padding-left: 0; }
  .pdp-band-grid > *:nth-child(3) { padding-left: 0; }
  .pdp-band-grid > *:nth-child(4) { border-right: 0; }
  .pdp-band-title { grid-column: 1 / -1; border-right: 0 !important; border-bottom: 1px solid rgba(244,241,232,.12); padding-left: 0 !important; }
  .pdp-content-grid, .article-layout, .case-detail-grid { grid-template-columns: 1fr; gap: 42px; }
  .pdp-aside, .article-aside { position: static; display: grid; grid-template-columns: 1fr 1fr; }
  .pdp-aside-card, .pdp-aside-nav { height: 100%; }
  .related-section .product-grid { grid-template-columns: repeat(2,1fr); }
  .news-archive { grid-template-columns: 1fr; }
  .news-archive .archive-card:first-child { grid-column: auto; }
  .archive-card:first-child .archive-link { display: block; }
  .archive-card:first-child .archive-body { padding-top: 16px; }
  .archive-body h2, .archive-card:first-child .archive-body h2 { font-size: 21px; }
  .article-head { padding-top: 35px; }
  .article-side-card { padding: 24px 22px; }
  .article-section { padding-bottom: 75px; }
  .case-archive-grid { grid-template-columns: 1fr; }
  .case-detail-hero, .case-detail-shell { min-height: 580px; }
  .case-detail-copy { padding-top: 90px; }
  .case-detail-aside { display: grid; grid-template-columns: 1fr 1fr; }
  .message-grid { gap: 40px; }
  .message-form-card { max-width: 680px; }
  .message-copy h2 { max-width: 600px; }
  .message-copy > p:not(.kicker) { max-width: 560px; }
  .search-page-form { flex-wrap: wrap; }
  .search-page-form input { flex-basis: calc(100% - 100px); }
}

@media (max-width: 640px) {
  :root { --header: 68px; }
  body { font-size: 15px; line-height: 1.68; }
  .shell { width: calc(100% - 32px); }
  .section { padding: 62px 0; }
  .site-header { min-height: 68px; }
  .header-inner { min-height: 68px; gap: 12px; }
  .brand { gap: 8px; }
  .brand-mark { width: 34px; height: 34px; }
  .brand-type strong { font-size: 16px; }
  .brand-type small { font-size: 6.5px; letter-spacing: .12em; }
  .brand-logo { height: 39px; max-width: 170px; }
  .header-actions { gap: 5px; }
  .header-actions .icon-btn { width: 38px; height: 38px; }
  .menu-toggle { border-color: transparent; }
  .hero { min-height: 700px; }
  .hero-shell { min-height: 700px; padding-top: calc(var(--header) + 20px); padding-bottom: 22px; }
  .hero-topline { padding-bottom: 13px; }
  .hero-topline .kicker { font-size: 7.5px; letter-spacing: .1em; }
  .hero-topline .kicker::before { width: 14px; }
  .hero-content { padding: 36px 0 31px; gap: 27px; }
  .hero h1 { font-size: clamp(50px, 16vw, 78px); line-height: 1; }
  .hero-title-line--accent sup { margin-top: 3px; margin-left: 6px; font-size: 8px; }
  .hero-intro > p { font-size: 12.5px; line-height: 1.8; }
  .hero-actions { display: flex; flex-direction: column; width: 100%; gap: 8px; }
  .hero-actions .btn { width: 100%; }
  .hero-bottom { align-items: flex-end; padding-top: 17px; }
  .hero-facts { gap: 19px; }
  .hero-facts strong { font-size: 21px; }
  .hero-facts span { font-size: 8.5px; }
  .hero-controls { display: none; }
  .hero-shade { background: linear-gradient(90deg, rgba(5,20,16,.92), rgba(5,20,16,.56)), linear-gradient(0deg, rgba(5,20,16,.9), transparent 60%, rgba(5,20,16,.3)); }
  .scenario-strip { min-height: 50px; }
  .scenario-label { padding: 0 14px; gap: 8px; }
  .scenario-label span { display: none; }
  .scenario-label b { font-size: 10px; }
  .marquee-track { gap: 14px; }
  .marquee-track span { font-size: 11px; }
  .home-about-visual { min-height: 470px; }
  .about-photo--main { width: 80%; height: 420px; }
  .about-photo--sub { width: 52%; height: 185px; border-width: 6px; bottom: 0; }
  .about-seal { width: 78px; height: 78px; left: 65%; top: -15px; }
  .home-about-copy h2 { font-size: clamp(31px, 9vw, 41px); }
  .home-about-copy .lead { margin-top: 22px; font-size: 15px; }
  .home-about-copy > p:not(.lead):not(.kicker) { font-size: 12.5px; }
  .about-numbers { margin: 26px 0 22px; padding: 18px 0; }
  .about-numbers strong { font-size: 27px; }
  .about-numbers span { font-size: 8.5px; }
  .about-numbers div { padding-right: 10px; }
  .about-numbers div:not(:first-child) { padding-left: 13px; }
  .kicker { font-size: 8.5px; gap: 9px; }
  .kicker::before { width: 17px; }
  .section-head h2, .scope-head h2, .process-head h2 { font-size: clamp(28px, 8.8vw, 38px); }
  .scope-grid { grid-template-columns: 1fr; }
  .scope-item { min-height: 96px; padding: 16px 14px; }
  .scope-name { font-size: 13px; }
  .scope-desc { font-size: 10.5px; }
  .product-grid--home { grid-template-columns: 1fr 1fr; gap: 26px 12px; }
  .product-media { aspect-ratio: 4 / 3.2; }
  .product-cat { left: 8px; top: 8px; padding: 4px 6px; font-size: 8px; }
  .product-open { display: none; }
  .product-body { padding-top: 11px; }
  .product-body h3 { font-size: 12.5px; }
  .product-body p { font-size: 10px; line-height: 1.6; margin-top: 5px; }
  .process-section { padding: 72px 0 0; }
  .process-head { margin-bottom: 35px; }
  .process-bottom { padding-bottom: 62px; }
  .case-grid { grid-template-columns: 1fr; }
  .case-grid .case-card:last-child { grid-column: auto; max-width: none; }
  .case-copy h3 { font-size: 17px; }
  .journal-home { padding-bottom: 70px; }
  .journal-link { grid-template-columns: 53px minmax(0,1fr) 18px; gap: 13px; padding: 20px 0; }
  .journal-thumb { display: none; }
  .journal-copy h3 { font-size: 15.5px; }
  .journal-copy p { font-size: 10.5px; -webkit-line-clamp: 2; }
  .journal-date { font-size: 14px; }
  .cta-card { padding: 35px 22px; }
  .site-cta { padding-bottom: 26px; }
  .cta-copy h2 { font-size: clamp(30px, 9vw, 39px); }
  .cta-copy > p:not(.kicker) { font-size: 11.5px; }
  .cta-actions { width: 100%; align-items: stretch; }
  .quick-phone { justify-content: space-between; }
  .quick-phone strong { font-size: 22px; }
  .cta-actions .btn { width: 100%; }
  .site-footer { padding-top: 55px; }
  .footer-main { grid-template-columns: 1fr 1fr; gap: 35px 24px; padding-bottom: 45px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-tagline { font-size: 22px; }
  .footer-desc { font-size: 10.5px; }
  .footer-phone { margin-top: 20px; }
  .footer-phone strong { font-size: 22px; }
  .footer-col h3 { margin-bottom: 15px; font-size: 11px; }
  .footer-links { gap: 7px; }
  .footer-links a { font-size: 10.5px; }
  .footer-col:nth-child(3) { display: none; }
  .footer-contact { grid-template-columns: 1fr; padding-top: 22px; gap: 17px; }
  .footer-contact ul { grid-template-columns: 1fr; }
  .footer-qr { display: none; }
  .footer-word { font-size: 28vw; margin-bottom: -1.5vw; }
  .footer-bottom { align-items: flex-start; flex-direction: column; gap: 12px; padding: 18px 0 calc(24px + env(safe-area-inset-bottom)); }
  .footer-bottom p, .footer-legal { font-size: 9px; }
  .footer-legal { gap: 7px; }
  .mobile-dock { position: fixed; z-index: 150; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(4,1fr); padding-bottom: env(safe-area-inset-bottom); border-top: 1px solid rgba(244,241,232,.1); background: rgba(6,25,20,.96); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
  .mobile-dock a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 55px; color: rgba(244,241,232,.52); font-size: 8.5px; }
  .mobile-dock .icon { font-size: 17px; }
  .mobile-dock .dock-tel { color: var(--lime); }
  .mobile-dock a:hover { color: var(--white); }
  .back-top { bottom: calc(68px + env(safe-area-inset-bottom)); right: 13px; width: 38px; height: 38px; }
  body { padding-bottom: 55px; }
  .page-hero { padding: calc(var(--header) + 30px) 0 42px; }
  .page-hero-top { padding-bottom: 17px; }
  .page-hero-grid { grid-template-columns: 1fr; gap: 20px; padding-top: 29px; }
  .page-hero h1 { font-size: clamp(44px, 14vw, 65px); margin: 13px 0 14px; }
  .page-hero-lead { font-size: 12.5px; }
  .page-hero-mark { display: none; }
  .page-hero-aside { display: none; }
  .hero-page-mark { font-size: 7px; }
  .detail-top { padding-top: calc(var(--header) + 25px); }
  .detail-kicker { font-size: 7.5px; }
  .project-form .form-grid { grid-template-columns: 1fr; gap: 12px; }
  .form-field--full { grid-column: auto; }
  .form-field input { height: 46px; }
  .form-field textarea { min-height: 118px; }
  .form-code { width: 105px; height: 46px; }
  .form-card-head h2 { font-size: 25px; }
  .about-hero, .about-hero-shell { min-height: 600px; }
  .about-hero-shell { padding-top: calc(var(--header) + 18px); padding-bottom: 28px; }
  .about-hero-copy { padding: 45px 0 32px; }
  .about-hero-copy h1 { font-size: clamp(58px, 18vw, 85px); margin: 13px 0 18px; }
  .about-hero-lead { font-size: 13px; line-height: 1.8; }
  .about-hero-bottom > p { display: none; }
  .about-hero-data { gap: 20px; width: 100%; justify-content: space-between; }
  .about-hero-data strong { font-size: 20px; }
  .about-hero-data span { font-size: 8px; }
  .about-statement-grid { gap: 35px; }
  .about-statement-aside h2 { font-size: clamp(32px, 10vw, 44px); }
  .statement-lead { font-size: 17px; }
  .about-rich { font-size: 13px; }
  .about-principles { grid-template-columns: 1fr; gap: 19px; padding-top: 22px; margin-top: 30px; }
  .about-principles > div { display: grid; grid-template-columns: 26px 1fr; column-gap: 8px; }
  .about-principles span { grid-row: 1 / span 2; margin: 0; padding-top: 3px; }
  .about-principles p { grid-column: 2; }
  .about-stats-band { padding-top: 35px; }
  .about-stats-grid { gap: 25px 0; }
  .about-stat { padding-right: 13px; }
  .about-stat:nth-child(3) { padding-left: 0; }
  .about-stat:nth-child(4) { padding-right: 0; }
  .about-stat strong { font-size: 39px; }
  .about-stat > span { font-size: 9.5px; margin-top: 9px; }
  .about-stat small { display: none; }
  .about-stats-note { margin-top: 12px; font-size: 8px; }
  .timeline li { grid-template-columns: 54px 1fr; gap: 15px; padding: 20px 0; }
  .timeline-year { font-size: 16px; }
  .timeline h3 { font-size: 14px; }
  .timeline p { font-size: 11px; }
  .scope-page { padding: 67px 0; }
  .scope-catalog { grid-template-columns: 1fr; }
  .scope-catalog article { min-height: 0; padding: 17px 15px; }
  .scope-catalog h3 { font-size: 13px; }
  .scope-catalog p { font-size: 10px; }
  .scope-page-actions { align-items: flex-start; flex-direction: column; }
  .capability-grid { grid-template-columns: 1fr; }
  .capability-grid article, .capability-grid article:not(:first-child) { min-height: 0; padding: 23px 0; border-right: 0; border-top: 1px solid var(--line); }
  .capability-grid article:nth-child(2) { border-top: 1px solid var(--line); }
  .capability-grid article:first-child { border-top: 0; }
  .cap-icon { margin: 19px 0 15px; }
  .about-quote-media { min-height: 230px; }
  .about-quote-copy { padding: 40px 22px; }
  .about-quote-copy blockquote { font-size: 23px; }
  .quote-sign { margin-top: 30px; }
  .contact-hero { padding: calc(var(--header) + 24px) 0 45px; }
  .contact-hero-top { padding-bottom: 17px; }
  .contact-hero-grid { padding-top: 25px; gap: 32px; }
  .contact-hero-copy h1 { font-size: clamp(56px, 17vw, 90px); margin: 13px 0 16px; }
  .contact-hero-lead { font-size: 12.5px; }
  .contact-direct { margin-top: 26px; padding-top: 17px; }
  .contact-direct-phone strong { font-size: 26px; }
  .contact-direct dl { gap: 20px; }
  .contact-direct dd { font-size: 11px; }
  .contact-hero-visual { padding: 10px 10px 10px 0; }
  .contact-hero-visual figure { aspect-ratio: 4 / 3.7; }
  .contact-hero-note { left: 12px; right: auto; bottom: 22px; width: 190px; padding: 14px 15px; }
  .contact-hero-note p { font-size: 11px; }
  .contact-hero-bottom { padding-top: 13px; }
  .contact-hero-bottom > p { font-size: 7.5px; }
  .contact-channel-grid { padding: 28px 0 40px; gap: 10px; }
  .contact-channel { min-height: 0; padding: 20px 18px; }
  .channel-icon { margin-top: 20px; }
  .contact-channel h2 { margin-top: 14px; font-size: 16px; }
  .channel-link { margin-top: 18px; padding-top: 15px; }
  .contact-form-section { padding: 65px 0; }
  .contact-form-grid { gap: 36px; }
  .contact-form-intro h2 { font-size: clamp(47px, 14vw, 67px); }
  .consult-list { margin-top: 27px; }
  .contact-response { margin-top: 22px; }
  .contact-form-card { padding: 24px 18px 22px; }
  .visit-section { padding: 65px 0; }
  .visit-grid { gap: 33px; }
  .visit-copy h2 { font-size: clamp(31px, 9vw, 42px); }
  .visit-meta { flex-direction: column; gap: 13px; }
  .visit-map { min-height: 330px; }
  .map-art { min-height: 330px; }
  .map-card { right: 10px; bottom: 37px; width: 185px; padding: 13px 14px; }
  .map-note { left: 12px; bottom: 10px; font-size: 7px; }
  .faq-section { padding: 65px 0; }
  .faq-intro h2 { font-size: clamp(31px, 9vw, 42px); }
  .faq-list summary { gap: 11px; padding: 17px 0; font-size: 12.5px; }
  .faq-answer { padding: 0 27px 18px 27px; }
  .faq-answer p { font-size: 11px; }
  .catalog-section { padding: 55px 0 65px; }
  .catalog-head h2 { font-size: clamp(30px, 9vw, 40px); }
  .category-board { grid-template-columns: 1fr 1fr; }
  .category-item { min-height: 65px; padding: 10px 10px; grid-template-columns: 1fr 13px; }
  .category-item span { font-size: 10.5px; }
  .category-item small { font-size: 6px; }
  .catalog-bar { margin-top: 30px; align-items: flex-start; flex-direction: column; gap: 4px; }
  .catalog-bar p { font-size: 10.5px; }
  .catalog-bar p span { display: block; margin-top: 2px; }
  .catalog-count { font-size: 7px; }
  .product-grid--catalog { grid-template-columns: 1fr 1fr; gap: 26px 11px; }
  .product-card--catalog .product-media { aspect-ratio: 4 / 3.2; }
  .product-card--catalog .product-body h3 { font-size: 12px; }
  .product-detail-link { margin-top: 7px; font-size: 9px; }
  .catalog-help { padding: 45px 0; }
  .catalog-help-inner { grid-template-columns: 1fr; gap: 15px; }
  .catalog-help-inner > p { grid-column: auto; grid-row: auto; font-size: 10.5px; }
  .catalog-help .btn { grid-column: auto; grid-row: auto; justify-self: start; }
  .catalog-help h2 { font-size: 26px; }
  .pdp { padding: 32px 0 58px; gap: 27px; }
  .pdp-main { aspect-ratio: 4 / 3; }
  .pdp-main > img { padding: 4%; }
  .pdp-thumbs { display: none; }
  .pdp-title-row { padding-bottom: 10px; }
  .pdp-info h1 { font-size: 31px; margin: 18px 0 11px; }
  .pdp-desc { margin-top: 19px; font-size: 12px; }
  .pdp-actions .btn { flex: 1; padding-inline: 12px; font-size: 11.5px; }
  .pdp-band-grid { grid-template-columns: 1fr 1fr; }
  .pdp-band-title { padding: 23px 0 !important; }
  .pdp-band-title p { font-size: 18px; }
  .pdp-band-grid > * { padding: 21px 14px; }
  .pdp-band-grid article:nth-child(2) { padding-left: 0; }
  .pdp-content-main .detail-heading h2 { font-size: 30px; }
  .pdp-aside, .article-aside, .case-detail-aside { grid-template-columns: 1fr; }
  .pdp-aside-nav { display: none; }
  .related-section .product-grid { grid-template-columns: 1fr 1fr; gap: 24px 12px; }
  .prev-next-wrap { padding-bottom: 40px; }
  .prev-next { grid-template-columns: 1fr; gap: 13px; }
  .prev-next p + p { text-align: left; padding-top: 12px; border-top: 1px solid var(--line); }
  .filter-bar { gap: 5px; padding-bottom: 20px; }
  .filter-item { min-height: 31px; padding: 5px 10px; font-size: 9.5px; }
  .news-archive, .case-archive-grid { gap: 30px; margin-top: 26px; }
  .archive-body h2, .archive-card:first-child .archive-body h2 { font-size: 17px; }
  .archive-body > p, .case-archive-copy > p { font-size: 10.5px; }
  .case-archive-media { aspect-ratio: 4 / 3.1; }
  .case-archive-copy h2 { font-size: 17px; }
  .article-head { padding: 32px 0 30px; }
  .article-head h1 { font-size: clamp(29px, 8.5vw, 39px); margin: 13px 0 14px; }
  .article-lead { font-size: 14px; }
  .article-meta { gap: 12px; margin-top: 18px; }
  .article-cover { margin-bottom: 26px; }
  .article-content { font-size: 13px; line-height: 1.95; }
  .article-content h2 { font-size: 22px; }
  .article-footer { align-items: flex-start; flex-direction: column; margin-top: 30px; }
  .article-side-card h2 { font-size: 21px; }
  .case-detail-hero, .case-detail-shell { min-height: 530px; }
  .case-detail-shell { padding-top: calc(var(--header) + 18px); padding-bottom: 30px; }
  .case-detail-copy { padding-top: 100px; }
  .case-detail-copy h1 { font-size: clamp(30px, 9vw, 42px); }
  .case-detail-meta { gap: 11px; font-size: 7.5px; }
  .case-detail-body { padding-top: 55px; }
  .case-facts { padding: 22px 19px; }
  .case-side-cta { padding: 23px 20px; }
  .message-section { padding: 55px 0 75px; }
  .message-copy h2 { font-size: clamp(33px, 9.5vw, 44px); }
  .message-form-card { padding: 25px 18px 22px; }
  .message-contact a { font-size: 21px; }
  .search-section { padding-bottom: 65px; }
  .search-page-form { gap: 5px; padding-bottom: 9px; }
  .search-page-form input { flex-basis: calc(100% - 80px); font-size: 16px; }
  .search-page-form button { min-height: 41px; padding: 9px 14px; font-size: 11px; }
  .search-result h2 { font-size: 16px; }
  .search-result p { font-size: 10.5px; }
  .pager { align-items: flex-start; flex-direction: column; margin-top: 35px; }
  .pager-info { font-size: 8px; }
  .rich-content { font-size: 13px; }
  .rich-content h2 { font-size: 21px; }
  .rich-content h3 { font-size: 17px; }
  .rich-content table { display: block; overflow-x: auto; max-width: 100%; }
  .page-hero + .section, .page-hero + .catalog-section { padding-top: 50px; }
}

@media (max-width: 380px) {
  .brand-type strong { font-size: 14px; }
  .brand-type small { font-size: 6px; }
  .hero h1 { font-size: 46px; }
  .hero-facts { gap: 13px; }
  .hero-facts strong { font-size: 18px; }
  .about-hero-data strong { font-size: 18px; }
  .product-grid--home { grid-template-columns: 1fr; }
  .product-body h3 { font-size: 14px; }
  .category-item span { font-size: 9.5px; }
  .contact-direct-phone strong { font-size: 22px; }
  .cta-actions { gap: 10px; }
}

/* 25. Overflow & off-canvas safety */
html { overflow-x: clip; }
@supports not (overflow-x: clip) { html { overflow-x: hidden; } }

/* 26. Business scope page */
.btn-on-dark { color: var(--white); border-color: rgba(244,241,232,.32); }
.btn-on-dark:hover { color: var(--ink); background: var(--white); border-color: var(--white); }
.scope-page-action-links { display: flex; flex-wrap: wrap; gap: 9px; }
.scope-detail-intro { background: var(--paper); }
.scope-detail-grid { display: grid; grid-template-columns: .66fr 1.34fr; gap: clamp(55px, 8vw, 120px); align-items: start; }
.scope-detail-aside { position: sticky; top: calc(var(--header) + 45px); }
.scope-detail-aside h2 { margin: 16px 0 20px; font-size: clamp(35px, 4.5vw, 55px); line-height: 1.15; }
.scope-detail-aside h2 em { color: var(--pine); white-space: nowrap; }
.scope-detail-aside > p:not(.kicker) { max-width: 360px; color: var(--muted); font-size: 12.5px; line-height: 1.9; margin-bottom: 24px; }
.scope-path { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.scope-path-line { position: absolute; left: 9px; top: 10px; bottom: 260px; width: 1px; background: var(--line); }
.scope-path-step { position: relative; padding: 0 0 29px 32px; border-top: 1px solid var(--ink); }
.scope-path-step:nth-of-type(even) { margin-top: 54px; }
.scope-path-step span { display: block; margin: 15px 0 24px; color: var(--pine); font-family: var(--mono); font-size: 9px; }
.scope-path-step span::before { content: ""; position: absolute; left: 5px; top: 19px; width: 9px; height: 9px; border-radius: 50%; background: var(--lime); border: 1px solid var(--ink); }
.scope-path-step strong { display: block; font-size: 17px; font-weight: 750; letter-spacing: -.02em; }
.scope-path-step p { margin-top: 7px; color: var(--muted); font-size: 11px; line-height: 1.7; }
.scope-path-media { grid-column: 1 / -1; aspect-ratio: 16 / 7.4; margin-top: 18px; overflow: hidden; background: var(--paper-2); }
.scope-path-media img { width: 100%; height: 100%; object-fit: cover; }
.scope-detail-section { position: relative; overflow: hidden; padding: 102px 0; color: var(--white); background: var(--ink); }
.scope-detail-section::before { content: "SCOPE"; position: absolute; right: -20px; top: 20px; color: rgba(244,241,232,.025); font-size: clamp(150px, 23vw, 340px); font-weight: 900; line-height: .8; letter-spacing: -.08em; pointer-events: none; }
.scope-detail-head { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 50px; margin-bottom: 46px; }
.scope-detail-head h2 { margin-top: 15px; color: var(--white); font-size: clamp(38px, 5vw, 62px); }
.scope-detail-head > p { width: min(390px, 35%); color: rgba(244,241,232,.45); font-size: 12px; line-height: 1.9; }
.scope-matrix { position: relative; display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid rgba(244,241,232,.25); border-left: 1px solid rgba(244,241,232,.13); counter-reset: scope; }
.scope-matrix-item { display: grid; grid-template-columns: 30px minmax(0,1fr) 17px; gap: 10px; align-items: start; min-height: 145px; padding: 23px 20px; border-right: 1px solid rgba(244,241,232,.13); border-bottom: 1px solid rgba(244,241,232,.13); counter-increment: scope; transition: background-color .25s var(--ease); }
.scope-matrix-item:hover { background: rgba(244,241,232,.055); }
.scope-matrix-index { color: var(--lime); font-family: var(--mono); font-size: 9px; line-height: 1.9; opacity: .72; }
.scope-matrix-index::before { content: counter(scope, decimal-leading-zero); }
.scope-matrix-item h2 { color: var(--white); font-size: 15px; font-weight: 700; line-height: 1.5; letter-spacing: -.01em; }
.scope-matrix-item p { margin-top: 8px; color: rgba(244,241,232,.4); font-size: 10.5px; line-height: 1.75; }
.scope-matrix-item > .icon { margin-top: 2px; color: var(--lime); font-size: 14px; opacity: .35; transition: .2s var(--ease); }
.scope-matrix-item:hover > .icon { opacity: 1; transform: translate(2px,-2px); }
.scope-matrix-foot { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-top: 30px; }
.scope-matrix-foot p { color: rgba(244,241,232,.38); font-size: 11px; line-height: 1.7; }
.scope-detail-method { background: var(--white); }
.method-rail { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--ink); }
.method-rail article { min-height: 225px; padding: 20px 24px 20px 0; border-right: 1px solid var(--line); }
.method-rail article:not(:first-child) { padding-left: 24px; }
.method-rail article:last-child { border-right: 0; padding-right: 0; }
.method-rail span { color: var(--pine); font-family: var(--mono); font-size: 9px; }
.method-rail h3 { margin-top: 40px; font-size: 17px; font-weight: 750; }
.method-rail p { margin-top: 10px; color: var(--muted); font-size: 11.5px; line-height: 1.8; }
@media (max-width: 900px) {
  .scope-detail-grid { grid-template-columns: 1fr; gap: 40px; }
  .scope-detail-aside { position: static; }
  .scope-matrix { grid-template-columns: 1fr 1fr; }
  .scope-detail-head { align-items: flex-start; flex-direction: column; gap: 20px; }
  .scope-detail-head > p { width: min(480px,100%); }
  .method-rail { grid-template-columns: 1fr 1fr; }
  .method-rail article:nth-child(2) { border-right: 0; }
  .method-rail article:nth-child(n+3) { border-top: 1px solid var(--line); }
  .method-rail h3 { margin-top: 22px; }
}
@media (max-width: 640px) {
  .scope-detail-intro { padding-top: 55px; }
  .scope-detail-aside h2 { font-size: clamp(31px, 9vw, 41px); }
  .scope-path { grid-template-columns: 1fr; gap: 0; }
  .scope-path-step:nth-of-type(even) { margin-top: 0; }
  .scope-path-step { padding: 0 0 24px 29px; }
  .scope-path-step span { margin: 12px 0 15px; }
  .scope-path-step span::before { top: 16px; }
  .scope-path-media { aspect-ratio: 16 / 9; margin-top: 8px; }
  .scope-detail-section { padding: 64px 0; }
  .scope-detail-head h2 { font-size: 36px; }
  .scope-matrix { grid-template-columns: 1fr; }
  .scope-matrix-item { min-height: 0; padding: 18px 14px; }
  .scope-matrix-foot { align-items: flex-start; flex-direction: column; gap: 18px; }
  .method-rail { grid-template-columns: 1fr; }
  .method-rail article, .method-rail article:not(:first-child) { min-height: 0; padding: 20px 0; border-right: 0; border-top: 1px solid var(--line); }
  .method-rail article:first-child { border-top: 0; }
  .method-rail h3 { margin-top: 14px; }
  .scope-page-action-links { display: flex; flex-direction: column; align-items: stretch; }
}

/* 27. Progressive enhancement */
.no-js .nojs-nav { display: block; }
.no-js .menu-toggle { display: none; }
.hero, .hero-shell { min-height: 100vh; min-height: 100svh; }
@media (max-width: 900px) {
  .hero, .hero-shell { min-height: 780px; }
}
@media (max-width: 640px) {
  .hero, .hero-shell { min-height: 700px; }
}

/* 28. Readability refinements */
:root { --muted: #526158; }
.kicker { color: #526158; }
.vertical-note { opacity: .9; }
.brand-type small { opacity: .7; }
.nav-link em { opacity: .62; }
.head-phone span { opacity: .72; }
.hero-place { color: rgba(244,241,232,.75); }
.hero-facts span { color: rgba(244,241,232,.68); }
.page-hero .crumbs [aria-current],
.about-hero .crumbs [aria-current],
.case-detail-top .crumbs [aria-current] { color: rgba(244,241,232,.84); }
.page-hero .crumbs, .page-hero .crumbs a { color: rgba(244,241,232,.7); }
.about-hero .crumbs, .about-hero .crumbs a { color: rgba(244,241,232,.7); }
.case-detail-top .crumbs, .case-detail-top .crumbs a { color: rgba(244,241,232,.7); }
.hero-page-mark { color: rgba(244,241,232,.58); }
.about-hero-top .hero-page-mark { color: rgba(244,241,232,.58); }
.about-hero-bottom > p { color: rgba(244,241,232,.6); }
.about-hero-data span { color: rgba(244,241,232,.65); }
.process-no { color: rgba(244,241,232,.58); }
.process-step p { color: rgba(244,241,232,.7); }
.process-en { color: rgba(244,241,232,.52); }
.process-bottom p { color: rgba(244,241,232,.62); }
.cta-copy > p:not(.kicker) { color: rgba(244,241,232,.68); }
.about-stat > span { color: rgba(244,241,232,.86); }
.about-stat small { color: rgba(244,241,232,.6); }
.about-stats-note { color: rgba(244,241,232,.6); }
.scope-catalog p { color: rgba(244,241,232,.65); }
.scope-page-actions p { color: rgba(244,241,232,.65); }
.scope-detail-head > p { color: rgba(244,241,232,.66); }
.scope-matrix-item p { color: rgba(244,241,232,.64); }
.scope-matrix-foot p { color: rgba(244,241,232,.64); }
.scope-page-head > p { color: rgba(244,241,232,.65); }
.article-side-card:first-child p:not(.aside-label) { color: rgba(244,241,232,.66); }
.article-side-card .aside-news a, .pdp-aside-card p:not(.aside-label) { color: rgba(244,241,232,.65); }
.pdp-band article p { color: rgba(244,241,232,.64); }
.pdp-band-title span { color: var(--lime); }
.case-side-cta p:not(.aside-label) { color: rgba(244,241,232,.64); }
.contact-form-lead { color: rgba(244,241,232,.7); }
.consult-list p { color: rgba(244,241,232,.62); }
.contact-response p { color: rgba(244,241,232,.62); }
.contact-qr-small span { color: rgba(244,241,232,.58); }
.form-privacy { color: rgba(244,241,232,.58); }
.footer-desc { color: rgba(244,241,232,.58); }
.footer-phone small { color: rgba(244,241,232,.58); }
.footer-links a { color: rgba(244,241,232,.64); }
.footer-contact li { color: rgba(244,241,232,.62); }
.footer-qr span { color: rgba(244,241,232,.58); }
.footer-bottom p { color: rgba(244,241,232,.5); }
.footer-legal, .footer-legal a { color: rgba(244,241,232,.5); }
.category-item small { opacity: .78; }
.category-item.is-active small { color: rgba(9,37,31,.8); }
.channel-no { color: rgba(9,37,31,.65); }
.contact-channel--dark .channel-no { color: rgba(244,241,232,.62); }
.contact-direct-phone span { color: #526158; }
.contact-direct dt { color: #526158; }
.contact-channel--lime .channel-no { color: rgba(9,37,31,.72); }
.contact-channel p { color: #526158; }
.contact-channel--dark p { color: rgba(244,241,232,.68); }
.contact-channel--dark .channel-link { color: rgba(244,241,232,.62); }
.about-quote-copy > p { color: rgba(244,241,232,.65); }
.quote-sign { color: rgba(244,241,232,.52); }
.profile, .aside-note { color: #526158; }

/* 29. Final contrast pass */
.kicker.kicker--light { color: rgba(244,241,232,.68); }
.kicker.kicker--light span { color: var(--lime); }
.footer-brand-link .brand-type small { color: rgba(244,241,232,.74); opacity: 1; }
.footer-word::before { content: attr(data-word); }
.footer-word { color: transparent; }
.category-item small { color: #526158; opacity: 1; }
.category-item.is-active small { color: rgba(9,37,31,.8); }
.pdp-points li span { color: #1b5745; opacity: 1; }
.pdp-band-grid article > span { color: rgba(244,241,232,.62); }
.about-stat small { color: rgba(244,241,232,.78); }
.about-stats-note { color: rgba(244,241,232,.75); }
.quote-sign { color: rgba(244,241,232,.7); }
.contact-hero-top .hero-page-mark { color: var(--muted); opacity: 1; }
.hero-page-mark { color: rgba(244,241,232,.65); }
.case-detail-top .hero-page-mark { color: rgba(244,241,232,.65); }
.case-facts-note { color: var(--muted); opacity: 1; }
.consult-list--light li > span { color: #1b5745; opacity: 1; }
.contact-channel--lime .channel-no { color: rgba(9,37,31,.78); }
.article-side-card .aside-label { color: var(--muted); }
.article-side-card:first-child .aside-label { color: var(--lime); }
.about-hero-copy .kicker.kicker--light { color: rgba(244,241,232,.72); }
.about-hero-copy .kicker.kicker--light span { color: var(--lime); }
.scope-detail-head .kicker.kicker--light, .catalog-help .kicker.kicker--light, .process-head .kicker.kicker--light, .contact-form-intro .kicker.kicker--light, .case-detail-copy .kicker.kicker--light, .scope-page-head .kicker.kicker--light { color: rgba(244,241,232,.7); }
.scope-detail-head .kicker.kicker--light span, .catalog-help .kicker.kicker--light span, .process-head .kicker.kicker--light span, .contact-form-intro .kicker.kicker--light span, .case-detail-copy .kicker.kicker--light span, .scope-page-head .kicker.kicker--light span { color: var(--lime); }
.category-item--help small { color: var(--lime); opacity: .9; }
.category-item--help:hover { background: var(--pine); }
.footer-word::before { display: block; color: rgba(244,241,232,.055); }
.no-js .site-header { position: relative; }

/* 30. Brand logo & favicon integration */
.site-header.is-overlay .brand-logo { filter: none; }
.brand-logo { width: auto; height: 56px; max-width: 260px; object-fit: contain; }
.brand-logo--light { display: none; }
.site-header.is-overlay .brand-logo--dark { display: none; }
.site-header.is-overlay .brand-logo--light { display: block; }
.site-header.is-overlay .brand-logo--uploaded { filter: brightness(0) invert(1); }
.brand--mobile { margin-right: 0; }
.brand--mobile .brand-logo { height: 46px; max-width: 220px; }
.brand--mobile .brand-logo--uploaded { filter: brightness(0) invert(1); }
.footer-logo { width: auto; height: 56px; max-width: 240px; object-fit: contain; }
.footer-logo--uploaded { filter: brightness(0) invert(1); }
.footer-company-name { margin-top: 13px; color: rgba(244,241,232,.62); font-size: 11px; line-height: 1.6; letter-spacing: .02em; }
.footer-tagline { margin-top: 20px; }
.footer-word { font-size: 17vw; }
@media (max-width: 1120px) {
  .brand--mobile .brand-logo { height: 44px; max-width: 205px; }
}
@media (max-width: 640px) {
  .brand-logo { height: 44px; max-width: 190px; }
  .brand-type { display: none; }
  .footer-logo { height: 49px; max-width: 200px; }
  .footer-word { font-size: 21vw; }
}
@media (max-width: 380px) {
  .brand-logo { height: 40px; max-width: 170px; }
}

/* 30.1 深色背景下的上传 logo
   原来对上传 logo 整图反白（brightness(0) invert(1)），会把彩色小图标压成一整块纯白，
   看起来像“图标空白”；滚动后头部变浅色、反白取消，图标才出现。
   这里改为保留原色，并垫一层浅色底板保证深底上的可读性。 */
.site-header.is-overlay .brand-logo--uploaded,
.brand--mobile .brand-logo--uploaded,
.footer-logo--uploaded {
  filter: none;
  background-color: var(--paper);
  border-radius: 9px;
  box-shadow: 0 0 0 7px var(--paper);
}