.brand-service-page { background: #f5f2ee; }

.brand-hero {
  position: relative;
  min-height: min(920px, 100svh);
  overflow: hidden;
  padding: calc(var(--header-height) + var(--hero-space-top)) 0 var(--hero-space-bottom);
  background:
    radial-gradient(circle at 9% 32%, rgba(216, 164, 90, 0.2), transparent 31rem),
    radial-gradient(circle at 86% 14%, rgba(100, 167, 166, 0.2), transparent 28rem),
    linear-gradient(145deg, #f1ece5 0%, #e7e0d8 58%, #dfe5e1 100%);
  isolation: isolate;
}
.brand-hero::after {
  position: absolute;
  z-index: -2;
  inset: 0;
  background-image: linear-gradient(rgba(30, 31, 32, 0.034) 1px, transparent 1px), linear-gradient(90deg, rgba(30, 31, 32, 0.034) 1px, transparent 1px);
  background-size: 5.25rem 5.25rem;
  content: "";
  mask-image: linear-gradient(90deg, transparent, #000 25%, #000 78%, transparent);
}
.brand-hero-orbit { position: absolute; z-index: -1; inset: auto -13rem -22rem auto; width: 48rem; aspect-ratio: 1; border: 1px solid rgba(30, 91, 90, 0.13); border-radius: 50%; pointer-events: none; }
.brand-hero-orbit span, .brand-hero-orbit i { position: absolute; border: 1px solid rgba(30, 91, 90, 0.1); border-radius: inherit; inset: 5rem; }
.brand-hero-orbit i { inset: 11rem; }

.brand-breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem; margin-bottom: clamp(2.6rem, 5vw, 4.8rem); color: #62656a; font-size: var(--text-label); }
.brand-breadcrumbs a { border-bottom: 1px solid transparent; }
.brand-breadcrumbs a:hover { border-color: currentColor; color: var(--deep); }
.brand-breadcrumbs span[aria-hidden] { color: rgba(30, 31, 32, 0.32); }
.brand-hero-grid { display: grid; align-items: center; grid-template-columns: minmax(0, 0.88fr) minmax(30rem, 0.72fr); gap: clamp(3rem, 7vw, 8rem); }
.brand-hero-copy h1 { max-width: 14.75ch; margin: 0; font-size: clamp(2.95rem, 4.5vw, 5.1rem); font-weight: 420; letter-spacing: -0.045em; line-height: 1.07; }
.brand-hero-copy h1 em { color: var(--deep); }
.brand-hero-intro { max-width: 690px; margin: 1.45rem 0 0; color: #474c50; font-size: clamp(1.02rem, 1.32vw, 1.2rem); line-height: 1.75; }
.brand-hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2.1rem; }
.brand-hero-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 2.25rem 0 0; padding: 0; list-style: none; }
.brand-hero-tags li { padding: 0.52rem 0.82rem; border: 1px solid rgba(30, 31, 32, 0.14); border-radius: 999px; background: rgba(255, 255, 255, 0.34); color: #4f555a; font-size: var(--text-label); line-height: 1.2; white-space: nowrap; }

.brand-playground { position: relative; padding: clamp(1rem, 2vw, 1.45rem); border: 1px solid rgba(30, 31, 32, 0.13); border-radius: clamp(1.5rem, 3vw, 2.6rem); background: rgba(250, 248, 245, 0.7); box-shadow: 0 2.5rem 7rem rgba(37, 51, 50, 0.13); backdrop-filter: blur(16px); }
.brand-playground::before { position: absolute; z-index: -1; inset: 8% -5% -7% 10%; border-radius: inherit; background: rgba(30, 91, 90, 0.09); content: ""; transform: rotate(3deg); }
.brand-playground-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.2rem 0.25rem 1rem; }
.brand-playground-heading > span { color: var(--coal); font-size: var(--text-action); font-weight: 650; }
.brand-playground-heading p { margin: 0; color: #64696d; font-size: var(--text-label); text-align: right; }
.brand-specimen {
  --specimen-bg: #174947;
  --specimen-fg: #f7f2ea;
  --specimen-accent: #d9aa71;
  --specimen-soft: #9ecbbe;
  position: relative;
  display: grid;
  min-height: clamp(390px, 39vw, 535px);
  align-content: space-between;
  padding: clamp(1.35rem, 3vw, 2.7rem);
  overflow: hidden;
  border-radius: clamp(1.15rem, 2.4vw, 2rem);
  background: var(--specimen-bg);
  color: var(--specimen-fg);
  transition: border-radius 420ms cubic-bezier(0.22, 1, 0.36, 1), background 420ms ease, color 420ms ease;
}
.brand-specimen::before { position: absolute; top: -23%; right: -11%; width: 58%; aspect-ratio: 1; border: 1px solid color-mix(in srgb, var(--specimen-soft) 55%, transparent); border-radius: 50%; box-shadow: 0 0 0 4.6rem color-mix(in srgb, var(--specimen-soft) 8%, transparent), 0 0 0 9.2rem color-mix(in srgb, var(--specimen-soft) 4%, transparent); content: ""; transition: border-radius 420ms ease, transform 420ms ease; }
.brand-specimen-top, .brand-specimen-bottom { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand-specimen-mark { display: grid; width: 3.5rem; aspect-ratio: 1; place-items: center; border-radius: 50%; background: var(--specimen-accent); color: var(--specimen-bg); font-size: 1.45rem; font-weight: 700; transition: border-radius 420ms ease, transform 420ms ease; }
.brand-specimen-top i, .brand-specimen-bottom span { font-family: var(--font-mono); font-size: 0.72rem; font-style: normal; letter-spacing: 0.07em; }
.brand-specimen > strong { position: relative; z-index: 2; max-width: 7ch; font-size: clamp(3.15rem, 5.45vw, 5.8rem); font-weight: 500; letter-spacing: -0.07em; line-height: 0.86; transition: font-weight 420ms ease, letter-spacing 420ms ease, transform 420ms ease; }
.brand-specimen-shapes { position: absolute; right: 7%; bottom: 16%; display: grid; width: 36%; aspect-ratio: 1.2; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); }
.brand-specimen-shapes span { background: var(--specimen-soft); transition: border-radius 420ms ease, background 420ms ease, transform 420ms ease; }
.brand-specimen-shapes span:first-child { border-radius: 100% 0 0; }
.brand-specimen-shapes span:nth-child(2) { background: var(--specimen-accent); border-radius: 0 100% 0 0; }
.brand-specimen-shapes span:last-child { grid-column: 1 / -1; border-radius: 0 0 999px 999px; background: color-mix(in srgb, var(--specimen-fg) 18%, transparent); }
.brand-specimen-bottom i { width: clamp(3.5rem, 7vw, 7rem); height: 2px; background: var(--specimen-accent); }
.brand-specimen[data-tone="warm"] { --specimen-bg: #8c5f4f; --specimen-fg: #fff7eb; --specimen-accent: #efbc78; --specimen-soft: #d9a697; border-radius: 3.2rem 1rem 3.2rem 1rem; }
.brand-specimen[data-tone="warm"]::before { border-radius: 42% 58% 66% 34% / 55% 36% 64% 45%; transform: rotate(18deg); }
.brand-specimen[data-tone="warm"] .brand-specimen-mark { border-radius: 35% 65% 55% 45%; transform: rotate(-8deg); }
.brand-specimen[data-tone="warm"] > strong { font-weight: 420; letter-spacing: -0.055em; transform: translateX(0.25rem); }
.brand-specimen[data-tone="warm"] .brand-specimen-shapes span { border-radius: 48%; transform: rotate(7deg); }
.brand-specimen[data-tone="bold"] { --specimen-bg: #27233d; --specimen-fg: #f8f0e6; --specimen-accent: #ee744e; --specimen-soft: #9b92d1; border-radius: 0.35rem; }
.brand-specimen[data-tone="bold"]::before { border-radius: 0; transform: rotate(23deg) scale(0.9); }
.brand-specimen[data-tone="bold"] .brand-specimen-mark { border-radius: 0; transform: rotate(6deg); }
.brand-specimen[data-tone="bold"] > strong { font-weight: 700; letter-spacing: -0.085em; text-transform: uppercase; transform: rotate(-2deg); }
.brand-specimen[data-tone="bold"] .brand-specimen-shapes span { border-radius: 0; transform: rotate(-8deg); }
.brand-tone-controls { display: grid; margin-top: 0.75rem; grid-template-columns: repeat(3, 1fr); gap: 0.55rem; }
.brand-tone-controls button { display: flex; min-height: 3rem; align-items: center; justify-content: center; gap: 0.55rem; padding: 0.62rem 0.75rem; border: 1px solid rgba(30, 31, 32, 0.13); border-radius: 999px; background: rgba(255, 255, 255, 0.46); color: #4d5256; cursor: pointer; font-size: var(--text-action); font-weight: 600; transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease; }
.brand-tone-controls button:hover { transform: translateY(-2px); }
.brand-tone-controls button.is-active { border-color: #174947; background: #174947; color: var(--white); }
.brand-tone-controls button span { width: 0.65rem; aspect-ratio: 1; border-radius: 50%; background: #9ecbbe; }
.brand-tone-controls button:nth-child(2) span { background: #d9a697; }
.brand-tone-controls button:nth-child(3) span { border-radius: 0; background: #ee744e; }

.brand-recognition { padding: var(--section-space) 0 0; overflow: hidden; background: #faf8f5; }
.brand-recognition-intro { display: grid; align-items: start; grid-template-columns: minmax(0, 1.18fr) minmax(320px, 0.62fr); gap: clamp(3rem, 8vw, 8rem); }
.brand-recognition-intro h2 { max-width: 18ch; margin: 0; font-size: clamp(2.7rem, 4.2vw, 4.65rem); letter-spacing: -0.04em; line-height: 1.06; }
.brand-recognition-intro h2 em { color: var(--deep); }
.brand-recognition-intro > div { padding-top: 0.65rem; }
.brand-recognition-intro p { max-width: 560px; color: #555a5e; font-size: clamp(1rem, 1.2vw, 1.12rem); }
.brand-recognition-intro p + p { margin-top: 1.25rem; }
.brand-touchpoint-ribbon { margin-top: clamp(4rem, 8vw, 7rem); padding: 1.25rem 0; overflow: hidden; border-top: 1px solid rgba(30, 31, 32, 0.13); border-bottom: 1px solid rgba(30, 31, 32, 0.13); background: #e4ddd5; }
.brand-touchpoint-ribbon > div { display: flex; width: max-content; min-width: 100%; align-items: center; justify-content: space-around; gap: clamp(1.5rem, 3vw, 3rem); padding-inline: var(--page-padding); animation: brand-ribbon-drift 9s ease-in-out infinite alternate; }
.brand-touchpoint-ribbon span { display: inline-flex; align-items: center; gap: 0.72rem; white-space: nowrap; color: #404448; font-size: var(--text-action); font-weight: 600; }
.brand-touchpoint-ribbon span i { width: 0.72rem; aspect-ratio: 1; border-radius: 50%; background: var(--deep); }
.brand-touchpoint-ribbon span:nth-of-type(even) i { border-radius: 0.15rem; background: var(--deep); transform: rotate(45deg); }
.brand-touchpoint-ribbon b { color: rgba(30, 31, 32, 0.28); font-size: 1rem; font-weight: 400; }
@keyframes brand-ribbon-drift { from { transform: translateX(-1.1%); } to { transform: translateX(1.1%); } }
.brand-friction-list { display: grid; padding-top: clamp(4rem, 7vw, 6.5rem); padding-bottom: var(--section-space); grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 4.5rem); }
.brand-friction-list article { padding-top: 1.25rem; border-top: 1px solid rgba(30, 31, 32, 0.18); }
.brand-friction-list article > span { color: var(--deep); font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: 0.06em; text-transform: uppercase; }
.brand-friction-list h3 { max-width: 25ch; margin: 1.15rem 0 0.85rem; font-size: clamp(1.45rem, 1.8vw, 1.9rem); letter-spacing: -0.025em; line-height: 1.16; }
.brand-friction-list p { max-width: 440px; margin: 0; color: #62676b; font-size: var(--text-support); }

.brand-anatomy { position: relative; overflow: hidden; padding: var(--section-space) 0; background: #142f30; color: var(--white); isolation: isolate; }
.brand-anatomy-glow { position: absolute; z-index: -1; inset: 0; pointer-events: none; }
.brand-anatomy-glow span { position: absolute; top: -20rem; left: -14rem; width: 44rem; aspect-ratio: 1; border-radius: 50%; background: rgba(158, 203, 190, 0.1); filter: blur(1px); }
.brand-anatomy-glow span:last-child { top: auto; right: -13rem; bottom: -21rem; left: auto; width: 38rem; border: 1px solid rgba(255, 255, 255, 0.07); background: transparent; box-shadow: 0 0 0 6rem rgba(255, 255, 255, 0.018), 0 0 0 12rem rgba(255, 255, 255, 0.012); }
.brand-anatomy-heading { display: grid; align-items: end; grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.58fr); gap: clamp(3rem, 8vw, 8rem); }
.brand-anatomy-heading h2 { max-width: 20ch; margin: 0; font-size: clamp(2.65rem, 4.15vw, 4.5rem); letter-spacing: -0.04em; line-height: 1.06; }
.brand-anatomy-heading h2 em { color: #b7d8ce; }
.brand-anatomy-heading p { max-width: 540px; margin: 0 0 0.65rem; color: rgba(255, 255, 255, 0.72); font-size: clamp(1rem, 1.18vw, 1.1rem); }
.brand-anatomy-layout { display: grid; align-items: start; margin-top: clamp(3.5rem, 7vw, 6.5rem); grid-template-columns: minmax(500px, 0.95fr) minmax(520px, 1.05fr); gap: clamp(2.5rem, 5vw, 5rem); }
.brand-anatomy-board { position: sticky; top: 7rem; display: grid; min-height: 660px; padding: 1rem; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 2rem; background: rgba(255, 255, 255, 0.055); grid-template-columns: repeat(10, minmax(0, 1fr)); grid-template-rows: repeat(10, minmax(0, 1fr)); gap: 0.72rem; box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.16); }
.brand-board-grid { position: absolute; inset: 1rem; border-radius: 1.35rem; background-image: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px); background-size: 3rem 3rem; pointer-events: none; }
.brand-anatomy-board [data-anatomy-piece] { position: relative; z-index: 1; overflow: hidden; border-radius: 1.25rem; transition: opacity 260ms ease, filter 260ms ease, transform 320ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 260ms ease; }
.brand-anatomy-board[data-active-layer] [data-anatomy-piece] { opacity: 0.34; filter: saturate(0.5); }
.brand-anatomy-board[data-active-layer="direction"] [data-anatomy-piece="direction"],
.brand-anatomy-board[data-active-layer="logo"] [data-anatomy-piece="logo"],
.brand-anatomy-board[data-active-layer="color"] [data-anatomy-piece="color"],
.brand-anatomy-board[data-active-layer="imagery"] [data-anatomy-piece="imagery"],
.brand-anatomy-board[data-active-layer="templates"] [data-anatomy-piece="templates"] { z-index: 2; opacity: 1; filter: none; box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, 0.22); transform: scale(1.025); }
.brand-board-direction { display: flex; padding: 1.2rem; background: #e3d6cf; color: #272829; flex-direction: column; grid-area: 1 / 1 / 5 / 5; }
.brand-board-direction span { color: var(--deep); font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; }
.brand-board-direction strong { margin-top: auto; font-size: clamp(1.55rem, 2.55vw, 2.5rem); font-weight: 500; letter-spacing: -0.045em; line-height: 1; }
.brand-board-logo { display: grid; padding: 1.4rem; background: #9ecbbe; color: #123f3e; grid-area: 1 / 5 / 6 / 11; grid-template-columns: auto 1fr; grid-template-rows: 1fr auto; gap: 1rem; }
.brand-board-logo > span { display: grid; width: 4.2rem; height: 4.2rem; place-items: center; border-radius: 50%; background: #123f3e; color: #f8f4ee; font-size: 1.8rem; font-weight: 700; }
.brand-board-logo strong { align-self: center; font-size: clamp(2.55rem, 4.2vw, 4.35rem); font-weight: 650; letter-spacing: -0.06em; }
.brand-board-logo small { grid-column: 1 / -1; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; }
.brand-board-color { display: grid; align-items: end; padding: 1rem; background: #f1ece5; grid-area: 5 / 1 / 8 / 5; grid-template-columns: repeat(4, 1fr); gap: 0.4rem; }
.brand-board-color i { height: 75%; border-radius: 999px 999px 0 0; background: #174947; }
.brand-board-color i:nth-child(2) { height: 100%; background: #9ecbbe; }
.brand-board-color i:nth-child(3) { height: 62%; background: #d9aa71; }
.brand-board-color i:nth-child(4) { height: 86%; background: #9a604f; }
.brand-board-color span { grid-column: 1 / -1; color: #4c5155; font-family: var(--font-mono); font-size: 0.68rem; }
.brand-board-image { position: relative; display: grid; place-items: center; background: #9a604f; color: #fff; grid-area: 6 / 5 / 11 / 8; }
.brand-board-image > span { width: 66%; aspect-ratio: 1; border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 48% 52% 31% 69% / 53% 37% 63% 47%; transform: rotate(12deg); }
.brand-board-image i { position: absolute; width: 43%; aspect-ratio: 1; border-radius: 50%; background: #d9aa71; mix-blend-mode: screen; opacity: 0.72; transform: translate(28%, 25%); }
.brand-board-image strong { position: absolute; bottom: 1rem; font-family: var(--font-mono); font-size: 0.67rem; letter-spacing: 0.07em; }
.brand-board-template { display: flex; padding: 1.15rem; overflow: hidden; background: #e7b979; color: #262829; flex-direction: column; grid-area: 6 / 8 / 11 / 11; }
.brand-board-template small { font-family: var(--font-mono); font-size: 0.67rem; letter-spacing: 0.07em; }
.brand-board-template strong { position: relative; z-index: 1; margin-top: auto; font-size: clamp(1.35rem, 1.85vw, 1.9rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1.08; }
.brand-board-template i { position: absolute; top: 22%; right: -18%; width: 74%; aspect-ratio: 1; border: 1px solid rgba(38, 40, 41, 0.25); border-radius: 50%; box-shadow: 0 0 0 2rem rgba(38, 40, 41, 0.05), 0 0 0 4rem rgba(38, 40, 41, 0.03); }
.brand-anatomy-list { border-top: 1px solid rgba(255, 255, 255, 0.14); }
.brand-anatomy-list button { position: relative; display: grid; width: 100%; min-height: 8.5rem; padding: 1.3rem 3.3rem 1.3rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.14); background: transparent; color: rgba(255, 255, 255, 0.62); cursor: pointer; text-align: left; transition: color 200ms ease, padding 200ms ease; }
.brand-anatomy-list button:hover, .brand-anatomy-list button.is-active { color: var(--white); padding-left: 0.75rem; }
.brand-anatomy-list button > span { margin-bottom: 0.45rem; color: #a9d1c6; font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: 0.055em; text-transform: uppercase; }
.brand-anatomy-list button strong { max-width: none; font-size: clamp(1.08rem, 1.15vw, 1.25rem); font-weight: 520; letter-spacing: -0.02em; line-height: 1.24; white-space: nowrap; }
.brand-anatomy-list button p { max-height: 0; margin: 0; overflow: hidden; opacity: 0; font-size: var(--text-support); line-height: 1.6; transition: max-height 260ms ease, margin 260ms ease, opacity 220ms ease; }
.brand-anatomy-list button.is-active p { max-height: 7rem; margin-top: 0.75rem; opacity: 1; }
.brand-anatomy-list button > i { position: absolute; top: 1.5rem; right: 0.65rem; font-size: 1rem; font-style: normal; transition: transform 200ms ease; }
.brand-anatomy-list button.is-active > i { transform: rotate(45deg); }

.brand-offer { padding: var(--section-space) 0 0; overflow: hidden; background: #f4f1ed; }
.brand-offer-heading { display: grid; align-items: end; padding-bottom: clamp(3.5rem, 6vw, 5.5rem); grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.55fr); gap: clamp(3rem, 8vw, 8rem); }
.brand-offer-heading h2 { max-width: 20ch; margin: 0; font-size: clamp(2.65rem, 4.15vw, 4.5rem); letter-spacing: -0.04em; line-height: 1.06; }
.brand-offer-heading h2 em { color: var(--deep); }
.brand-offer-heading p { max-width: 540px; margin: 0 0 0.55rem; color: #5b6064; font-size: clamp(1rem, 1.18vw, 1.1rem); }
.brand-offer-columns { display: grid; width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.brand-offer-columns article { min-height: 610px; padding: clamp(2.2rem, 4.2vw, 4.6rem) clamp(1.4rem, 3.7vw, 4.2rem); border-top: 1px solid rgba(30, 31, 32, 0.12); }
.brand-offer-columns article:first-child { background: #e4ddd5; }
.brand-offer-columns article:nth-child(2) { background: #cbc7d7; }
.brand-offer-columns article:last-child { background: #c8d5cf; }
.brand-offer-columns article > span { color: #464b4f; font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: 0.06em; text-transform: uppercase; }
.brand-offer-columns h3 { max-width: 15ch; margin: clamp(2.5rem, 4vw, 4.5rem) 0 1.1rem; font-size: clamp(1.75rem, 2.55vw, 2.8rem); font-weight: 500; letter-spacing: -0.035em; line-height: 1.08; }
.brand-offer-columns article:last-child h3 { max-width: 11.5ch; }
.brand-offer-columns p { max-width: 510px; color: #4f5458; font-size: var(--text-support); }
.brand-offer-columns ul { display: grid; gap: 0; margin: 2.3rem 0 0; padding: 0; list-style: none; }
.brand-offer-columns li { padding: 0.8rem 0; border-top: 1px solid rgba(30, 31, 32, 0.13); font-size: var(--text-support); font-weight: 550; }
.brand-offer-columns li:last-child { border-bottom: 1px solid rgba(30, 31, 32, 0.13); }

.brand-materials { position: relative; padding: var(--section-space) 0; overflow: hidden; background: #123c3a; color: var(--white); isolation: isolate; }
.brand-materials::before { position: absolute; z-index: -1; top: -25rem; right: -18rem; width: 52rem; aspect-ratio: 1; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 50%; box-shadow: 0 0 0 6rem rgba(255, 255, 255, 0.015), 0 0 0 12rem rgba(255, 255, 255, 0.012); content: ""; }
.brand-materials-heading { display: grid; align-items: end; grid-template-columns: minmax(0, 1.14fr) minmax(320px, 0.6fr); gap: clamp(3rem, 8vw, 8rem); }
.brand-materials-heading h2 { max-width: 19ch; margin: 0; font-size: clamp(2.65rem, 4.15vw, 4.5rem); font-weight: 430; letter-spacing: -0.045em; line-height: 1.06; }
.brand-materials-heading h2 em { color: #e3b980; }
.brand-materials-heading p { max-width: 590px; margin: 0 0 0.5rem; color: rgba(255, 255, 255, 0.72); font-size: clamp(1rem, 1.18vw, 1.1rem); line-height: 1.72; }
.brand-materials-controls { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-top: clamp(3.2rem, 6vw, 5.5rem); }
.brand-materials-nav { display: flex; min-width: 0; flex-wrap: wrap; gap: 0.55rem; }
.brand-materials-nav button { min-height: 3rem; padding: 0.65rem 1rem; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 999px; background: transparent; color: rgba(255, 255, 255, 0.7); cursor: pointer; font-size: var(--text-action); font-weight: 570; white-space: nowrap; transition: border-color 180ms ease, background 180ms ease, color 180ms ease, transform 180ms ease; }
.brand-materials-nav button:hover { border-color: rgba(255, 255, 255, 0.5); color: var(--white); transform: translateY(-2px); }
.brand-materials-nav button.is-active { border-color: #f1e9df; background: #f1e9df; color: #123c3a; }
.brand-materials-paging { display: flex; flex: 0 0 auto; align-items: center; gap: 0.55rem; }
.brand-materials-paging > span { min-width: 4.8rem; color: rgba(255, 255, 255, 0.62); font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: 0.055em; }
.brand-materials-paging button { display: grid; width: 3rem; aspect-ratio: 1; place-items: center; border: 1px solid rgba(255, 255, 255, 0.23); border-radius: 50%; background: transparent; color: var(--white); cursor: pointer; font-size: 1.2rem; transition: border-color 180ms ease, background 180ms ease, transform 180ms ease, opacity 180ms ease; }
.brand-materials-paging button:hover:not(:disabled) { border-color: var(--white); background: rgba(255, 255, 255, 0.08); transform: translateY(-2px); }
.brand-materials-paging button:disabled { cursor: default; opacity: 0.25; }
.brand-materials-viewport { margin-top: 1.5rem; overflow-x: auto; overflow-y: hidden; overscroll-behavior-inline: contain; scroll-behavior: smooth; scroll-padding-inline-start: max(var(--page-padding), calc(50vw - 770px + var(--page-padding))); scroll-snap-type: x mandatory; scrollbar-width: none; }
.brand-materials-viewport::-webkit-scrollbar { display: none; }
.brand-materials-viewport:focus-visible { outline: 2px solid #e3b980; outline-offset: 5px; }
.brand-materials-track { display: flex; width: max-content; gap: clamp(1rem, 2vw, 2rem); padding-inline: max(var(--page-padding), calc(50vw - 770px + var(--page-padding))); }
.brand-material-panel { display: grid; flex: 0 0 min(1120px, calc(100vw - clamp(5rem, 12vw, 13rem))); min-height: 640px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: clamp(1.7rem, 3vw, 2.7rem); background: #e7dfd6; color: var(--coal); opacity: 0.62; scroll-snap-align: start; scroll-snap-stop: always; grid-template-columns: minmax(310px, 0.42fr) minmax(520px, 0.58fr); transition: opacity 300ms ease, transform 400ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 300ms ease; }
.brand-material-panel.is-active { opacity: 1; box-shadow: 0 2.5rem 6rem rgba(0, 0, 0, 0.2); }
.brand-material-panel:nth-child(2) { background: #dfb578; }
.brand-material-panel:nth-child(3) { background: #c7d7d0; }
.brand-material-panel:nth-child(4) { background: #cbc7d7; }
.brand-material-copy { position: relative; z-index: 3; display: flex; min-width: 0; padding: clamp(2.2rem, 4vw, 4.3rem); flex-direction: column; }
.brand-material-copy > span { color: #4c5552; font-family: var(--font-mono); font-size: var(--text-label); font-weight: 550; letter-spacing: 0.055em; text-transform: uppercase; }
.brand-material-copy h3 { max-width: 13ch; margin: clamp(2.5rem, 5vw, 5rem) 0 1.2rem; font-size: clamp(2.1rem, 3.2vw, 3.65rem); font-weight: 510; letter-spacing: -0.05em; line-height: 1.03; }
.brand-material-copy p { max-width: 510px; margin: 0; color: #4f5755; font-size: var(--text-support); line-height: 1.7; }
.brand-material-copy ul { display: grid; margin: auto 0 0; padding: 2rem 0 0; list-style: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
.brand-material-copy li { padding: 0.72rem 0; border-top: 1px solid rgba(30, 31, 32, 0.14); font-size: var(--text-action); font-weight: 570; }
.brand-material-copy li:nth-child(odd) { padding-right: 1rem; }
.brand-material-copy li:nth-child(even) { padding-left: 1rem; border-left: 1px solid rgba(30, 31, 32, 0.14); }
.brand-material-scene { position: relative; min-width: 0; overflow: hidden; background: rgba(255, 255, 255, 0.13); }
.brand-material-scene::before { position: absolute; inset: 0; background-image: linear-gradient(rgba(30, 31, 32, 0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(30, 31, 32, 0.055) 1px, transparent 1px); background-size: 3.7rem 3.7rem; content: ""; mask-image: linear-gradient(90deg, transparent, #000 18%); }
.brand-material-piece { --piece-transform: rotate(0deg); position: absolute; display: flex; overflow: hidden; padding: clamp(1rem, 2vw, 2rem); border: 1px solid rgba(30, 31, 32, 0.11); background: #f8f4ee; box-shadow: 0 1.8rem 4rem rgba(38, 45, 43, 0.2); flex-direction: column; transform: var(--piece-transform); transition: transform 480ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 300ms ease; }
.brand-material-panel:hover .brand-material-piece { transform: var(--piece-transform) translateY(-0.5rem); box-shadow: 0 2.2rem 5rem rgba(38, 45, 43, 0.25); }
.brand-material-piece > span, .brand-material-piece > small { position: relative; z-index: 2; font-family: var(--font-mono); font-size: max(var(--text-label), 0.875rem); letter-spacing: 0.05em; text-transform: uppercase; }
.brand-material-piece > small { margin-top: auto; letter-spacing: 0; text-transform: none; }
.brand-material-piece > strong { position: relative; z-index: 2; max-width: 9ch; margin-top: 1rem; font-size: clamp(1.25rem, 2.2vw, 2.5rem); font-weight: 570; letter-spacing: -0.045em; line-height: 1.02; }
.brand-material-piece > i { position: relative; z-index: 2; display: block; width: 100%; height: 1px; margin-top: 0.65rem; background: currentColor; opacity: 0.25; }
.brand-material-piece > b { position: absolute; display: block; border-radius: 50%; background: currentColor; opacity: 0.12; }
.brand-material-piece.is-offer { --piece-transform: rotate(-4deg); z-index: 3; top: 8%; left: 2%; width: 42%; height: 72%; color: #174947; }
.brand-material-piece.is-offer strong { margin-top: 20%; }
.brand-material-piece.is-deck { --piece-transform: rotate(3deg); z-index: 2; top: 18%; right: -4%; width: 64%; aspect-ratio: 1.5; background: #174947; color: #f5eee4; }
.brand-material-piece.is-deck b:first-of-type { right: -12%; bottom: -32%; width: 56%; aspect-ratio: 1; }
.brand-material-piece.is-deck b:last-of-type { right: 15%; bottom: 12%; width: 16%; aspect-ratio: 1; background: #e3b980; opacity: 1; }
.brand-material-piece.is-sheet { --piece-transform: rotate(-1deg); z-index: 4; right: 7%; bottom: -13%; width: 33%; height: 52%; background: #d8b17d; color: #252b29; }
.brand-material-piece.is-sheet strong { font-size: clamp(1.1rem, 1.6vw, 1.65rem); }
.brand-material-piece.is-poster { --piece-transform: rotate(-4deg); z-index: 2; top: 7%; left: 4%; width: 43%; height: 82%; background: #762f36; color: #f9eee0; }
.brand-material-piece.is-poster::before { position: absolute; right: -20%; bottom: -8%; width: 77%; aspect-ratio: 1; border: 1px solid #edc788; border-radius: 50%; box-shadow: 0 0 0 3rem rgba(237, 199, 136, 0.1); content: ""; }
.brand-material-piece.is-poster strong { max-width: 7ch; margin-top: 34%; font-size: clamp(1.8rem, 3vw, 3.35rem); }
.brand-material-piece.is-social { --piece-transform: rotate(5deg); z-index: 3; top: 11%; right: 1%; width: 43%; aspect-ratio: 0.82; background: #f3eadc; color: #762f36; }
.brand-material-piece.is-social strong { margin-top: 26%; }
.brand-material-piece.is-social b { right: -17%; bottom: -13%; width: 65%; aspect-ratio: 1; border-radius: 48% 52% 28% 72%; background: #d59d55; opacity: 0.72; }
.brand-material-piece.is-ticket { --piece-transform: rotate(-2deg); z-index: 4; right: 8%; bottom: 7%; width: 57%; height: 22%; justify-content: center; background: #173f3d; color: #f8ecdd; }
.brand-material-piece.is-ticket > strong { max-width: none; margin: 0.35rem 0 0; font-size: clamp(1.15rem, 1.8vw, 1.7rem); }
.brand-material-piece.is-ticket > i { position: absolute; top: 0; bottom: 0; left: 67%; width: 1px; height: auto; margin: 0; border-left: 1px dashed rgba(255, 255, 255, 0.5); background: none; }
.brand-material-piece.is-ticket > small { position: absolute; right: 8%; bottom: 50%; margin: 0; transform: translateY(50%); }
.brand-material-piece.is-brochure { --piece-transform: rotate(-3deg); z-index: 3; top: 8%; left: 2%; width: 48%; height: 84%; background: #f4efe7; color: #164846; }
.brand-material-piece.is-brochure::after { position: absolute; top: 0; right: 0; width: 34%; height: 100%; background: #a5c2b7; content: ""; }
.brand-material-piece.is-brochure strong { max-width: 7ch; margin-top: 42%; }
.brand-material-piece.is-sign { --piece-transform: rotate(2deg); z-index: 2; top: 12%; right: 2%; width: 48%; height: 31%; justify-content: center; background: #164846; color: #f5eee5; }
.brand-material-piece.is-sign > strong { margin: 0; color: #e3b980; font-size: clamp(2.2rem, 3.8vw, 4rem); }
.brand-material-piece.is-sign > span { margin-top: 0.4rem; }
.brand-material-piece.is-sign > small { position: absolute; right: 8%; bottom: 12%; }
.brand-material-piece.is-program { --piece-transform: rotate(4deg); z-index: 4; right: 7%; bottom: -5%; width: 42%; height: 57%; background: #d9aa71; color: #26312f; }
.brand-material-piece.is-program strong { margin-top: 18%; }
.brand-material-piece.is-template { --piece-transform: rotate(-3deg); z-index: 2; top: 9%; left: 2%; width: 57%; height: 75%; background: #f5f0e8; color: #4f3e61; }
.brand-material-piece.is-template strong { max-width: 8ch; margin-top: 18%; }
.brand-material-piece.is-template b { right: 10%; width: 22%; aspect-ratio: 1; border-radius: 0.5rem; background: #745c82; opacity: 0.85; }
.brand-material-piece.is-template b:first-of-type { top: 18%; }
.brand-material-piece.is-template b:nth-of-type(2) { top: 44%; background: #c99e69; }
.brand-material-piece.is-template b:last-of-type { top: 70%; background: #174947; }
.brand-material-piece.is-report { --piece-transform: rotate(4deg); z-index: 3; top: 15%; right: 1%; width: 40%; height: 67%; background: #174947; color: #f4ede5; }
.brand-material-piece.is-report strong { margin-top: 26%; }
.brand-material-piece.is-story { --piece-transform: rotate(-1deg); z-index: 4; right: 16%; bottom: -11%; width: 31%; height: 48%; background: #d2aa75; color: #2d3432; }
.brand-material-piece.is-story b { right: -20%; bottom: -10%; width: 85%; aspect-ratio: 1; background: #76596b; opacity: 0.75; }
.brand-materials-contact { display: grid; align-items: center; margin-top: clamp(3.5rem, 6vw, 5.5rem); padding-top: 2rem; border-top: 1px solid rgba(255, 255, 255, 0.18); grid-template-columns: minmax(0, 1fr) auto; gap: 2rem 4rem; }
.brand-materials-contact h3 { margin: 0; font-size: clamp(1.65rem, 2.4vw, 2.5rem); font-weight: 510; letter-spacing: -0.035em; line-height: 1.1; }
.brand-materials-contact p { max-width: 720px; margin: 0.65rem 0 0; color: rgba(255, 255, 255, 0.68); font-size: var(--text-support); }
.brand-materials-contact .button { border-color: #f1e9df; background: #f1e9df; color: #123c3a; }
.brand-materials-contact .button:hover { border-color: var(--white); background: var(--white); color: #123c3a; }

.brand-process { position: relative; padding: var(--section-space) 0; overflow: hidden; background: #faf8f5; }
.brand-process::before { position: absolute; top: 18%; right: -10rem; width: 29rem; aspect-ratio: 1; border: 1px solid rgba(30, 91, 90, 0.12); border-radius: 50%; box-shadow: 0 0 0 4rem rgba(30, 91, 90, 0.026), 0 0 0 8rem rgba(30, 91, 90, 0.018); content: ""; }
.brand-process-heading { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.55fr); gap: clamp(3rem, 8vw, 8rem); }
.brand-process-heading h2 { max-width: 21ch; margin: 0; font-size: clamp(2.65rem, 4.15vw, 4.5rem); letter-spacing: -0.04em; line-height: 1.06; }
.brand-process-heading h2 em { color: var(--deep); }
.brand-process-heading p { max-width: 540px; margin: 0.5rem 0 0; color: #5b6064; font-size: clamp(1rem, 1.18vw, 1.1rem); }
.brand-process-path { position: relative; display: grid; margin-top: clamp(4rem, 8vw, 8rem); grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(1.3rem, 3vw, 3rem); }
.brand-process-line { position: absolute; top: 0.68rem; right: 0; left: 0; height: 1px; background: linear-gradient(90deg, #9a604f, #d9aa71 45%, #174947); }
.brand-process-path article { position: relative; padding-top: 3rem; }
.brand-process-path article > span { position: absolute; z-index: 1; top: 0; left: 0; width: 1.4rem; aspect-ratio: 1; border: 4px solid #faf8f5; border-radius: 50%; background: #9a604f; box-shadow: 0 0 0 1px rgba(154, 96, 79, 0.35); }
.brand-process-path article:nth-of-type(2) > span, .brand-process-path article:nth-of-type(3) > span { background: #d9aa71; box-shadow: 0 0 0 1px rgba(217, 170, 113, 0.4); }
.brand-process-path article:nth-of-type(4) > span, .brand-process-path article:nth-of-type(5) > span { background: #174947; box-shadow: 0 0 0 1px rgba(23, 73, 71, 0.38); }
.brand-process-path strong { display: block; margin-bottom: 0.65rem; font-size: clamp(1.25rem, 1.55vw, 1.55rem); font-weight: 600; letter-spacing: -0.025em; }
.brand-process-path p { max-width: 260px; margin: 0; color: #62676b; font-size: var(--text-support); }

.brand-check { position: relative; padding: var(--section-space) 0; overflow: hidden; background: #dce5e0; isolation: isolate; }
.brand-check [hidden] { display: none !important; }
.brand-check::before { position: absolute; z-index: -2; inset: 0; background-image: linear-gradient(rgba(23, 73, 71, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(23, 73, 71, 0.045) 1px, transparent 1px); background-size: 5rem 5rem; content: ""; mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); }
.brand-check-background { position: absolute; z-index: -1; inset: 0; pointer-events: none; }
.brand-check-background span { position: absolute; top: -19rem; right: -13rem; width: 41rem; aspect-ratio: 1; border: 1px solid rgba(23, 73, 71, 0.11); border-radius: 50%; box-shadow: 0 0 0 5rem rgba(255, 255, 255, 0.07), 0 0 0 10rem rgba(23, 73, 71, 0.018); }
.brand-check-background span:nth-child(2) { top: auto; right: auto; bottom: -23rem; left: -14rem; width: 36rem; }
.brand-check-background i { position: absolute; top: 12%; left: 47%; width: 8rem; height: 1px; background: rgba(23, 73, 71, 0.18); transform: rotate(-31deg); }
.brand-check-heading { display: grid; align-items: end; grid-template-columns: minmax(0, 1.18fr) minmax(320px, 0.58fr); gap: clamp(3rem, 8vw, 8rem); }
.brand-check-heading h2 { max-width: 20ch; margin: 0; font-size: clamp(2.65rem, 4.15vw, 4.5rem); letter-spacing: -0.04em; line-height: 1.06; }
.brand-check-heading h2 em { color: var(--deep); }
.brand-check-heading > p { max-width: 560px; margin: 0 0 0.55rem; color: #4f5957; font-size: clamp(1rem, 1.18vw, 1.1rem); }
.brand-check-workbench { display: grid; min-height: 690px; margin-top: clamp(3.5rem, 7vw, 6rem); overflow: hidden; border: 1px solid rgba(23, 73, 71, 0.14); border-radius: clamp(1.6rem, 3vw, 2.6rem); background: #faf8f4; box-shadow: 0 2.5rem 7rem rgba(19, 50, 49, 0.14); grid-template-columns: minmax(310px, 0.42fr) minmax(0, 1fr); }
.brand-check-signals { display: flex; min-width: 0; padding: clamp(2rem, 3.5vw, 3.5rem); background: linear-gradient(155deg, #174947, #123635); color: var(--white); flex-direction: column; }
.brand-check-signals-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; padding-bottom: 1.2rem; }
.brand-check-signals-head span { color: #a9d1c6; font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: 0.06em; text-transform: uppercase; }
.brand-check-signals-head strong { font-size: var(--text-action); font-weight: 600; }
.brand-check-progress { height: 4px; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, 0.13); }
.brand-check-progress i { display: block; width: var(--check-progress, 0%); height: 100%; border-radius: inherit; background: #d9aa71; transition: width 350ms cubic-bezier(0.22, 1, 0.36, 1); }
.brand-check-signals ul { display: grid; margin: 2rem 0; padding: 0; border-top: 1px solid rgba(255, 255, 255, 0.14); list-style: none; }
.brand-check-signals li { --signal-width: 0%; padding: 1.05rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.brand-check-signals li > div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.brand-check-signals li strong { font-size: var(--text-action); font-weight: 600; }
.brand-check-signals li [data-signal-status] { color: rgba(255, 255, 255, 0.58); font-size: var(--text-label); white-space: nowrap; }
.brand-check-signals li > i { display: block; height: 3px; margin-top: 0.7rem; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, 0.1); }
.brand-check-signals li > i span { display: block; width: var(--signal-width); height: 100%; border-radius: inherit; background: rgba(255, 255, 255, 0.38); transition: width 300ms ease, background 220ms ease; }
.brand-check-signals li.is-priority > i span { background: #e7a587; }
.brand-check-signals li.is-uneven > i span { background: #d9aa71; }
.brand-check-signals li.is-strong > i span { background: #9ecbbe; }
.brand-check-signals li.is-priority [data-signal-status] { color: #f0b6a1; }
.brand-check-signals li.is-uneven [data-signal-status] { color: #e9c997; }
.brand-check-signals li.is-strong [data-signal-status] { color: #b8ddd2; }
.brand-check-signals > p { max-width: 300px; margin: auto 0 0; color: rgba(255, 255, 255, 0.57); font-size: var(--text-label); }
.brand-check-stage { display: grid; min-width: 0; align-items: center; padding: clamp(2rem, 5vw, 5rem); }
.brand-check-start { display: grid; max-width: 760px; justify-items: start; }
.brand-check-start > span, .brand-check-result > span { color: var(--deep); font-family: var(--font-mono); font-size: var(--text-label); font-weight: 500; letter-spacing: 0.065em; text-transform: uppercase; }
.brand-check-start h3 { max-width: 16ch; margin: 1.15rem 0 1.1rem; font-size: clamp(2.35rem, 3.8vw, 4.2rem); font-weight: 500; letter-spacing: -0.05em; line-height: 1.04; }
.brand-check-start > p { max-width: 650px; margin: 0; color: #59605f; font-size: var(--text-support); }
.brand-check-start ul { display: grid; gap: 0.55rem; margin: 1.8rem 0 2.1rem; padding: 0; list-style: none; }
.brand-check-start li { position: relative; padding-left: 1.5rem; color: #474e4d; font-size: var(--text-support); }
.brand-check-start li::before { position: absolute; top: 0.65em; left: 0; width: 0.7rem; height: 2px; background: var(--deep); content: ""; }
.brand-check-start noscript p { margin: 1rem 0 0; font-size: var(--text-support); }
.brand-check-start noscript a { border-bottom: 1px solid currentColor; color: var(--deep); }
.brand-check-question, .brand-check-result { width: 100%; max-width: 900px; }
.brand-check-question-meta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; color: var(--deep); font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: 0.055em; text-transform: uppercase; }
.brand-check-question-meta strong { color: #66706e; font-weight: 500; }
.brand-check-question h3 { max-width: 22ch; margin: 0; font-size: clamp(2rem, 3vw, 3.25rem); font-weight: 520; letter-spacing: -0.045em; line-height: 1.07; }
.brand-check-question > p { max-width: 700px; margin: 1.15rem 0 0; color: #606765; font-size: var(--text-support); }
.brand-check-answers { display: grid; margin-top: 2rem; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6rem; }
.brand-check-answers button { display: flex; min-height: 4rem; align-items: center; justify-content: center; gap: 0.65rem; padding: 0.8rem; border: 1px solid rgba(23, 73, 71, 0.15); border-radius: 999px; background: #f1efeb; color: #424947; cursor: pointer; transition: border-color 180ms ease, background 180ms ease, color 180ms ease, transform 180ms ease; }
.brand-check-answers button:hover { border-color: rgba(23, 73, 71, 0.34); background: var(--white); transform: translateY(-2px); }
.brand-check-answers button.is-selected { border-color: var(--deep); background: var(--deep); color: var(--white); }
.brand-check-answers button > span { width: 0.68rem; aspect-ratio: 1; border: 1px solid currentColor; border-radius: 50%; }
.brand-check-answers button.is-selected > span { border: 3px solid var(--white); background: #d9aa71; }
.brand-check-answers button strong { font-size: var(--text-action); font-weight: 650; white-space: nowrap; }
.brand-check-insight { margin-top: 1.2rem; padding: 1.1rem 1.2rem; border-left: 3px solid #d9aa71; border-radius: 0 1rem 1rem 0; background: #ebe7df; }
.brand-check-insight span { color: var(--deep); font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: 0.055em; text-transform: uppercase; }
.brand-check-insight p { margin: 0.45rem 0 0; color: #4f5654; font-size: var(--text-support); }
.brand-check-navigation { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.4rem; }
.brand-check-navigation button { display: inline-flex; min-height: 3rem; align-items: center; justify-content: center; gap: 0.55rem; padding: 0.65rem 1rem; border: 1px solid rgba(23, 73, 71, 0.18); border-radius: 999px; background: transparent; color: var(--deep); cursor: pointer; font-size: var(--text-action); font-weight: 650; transition: background 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease, opacity 180ms ease; }
.brand-check-navigation button:last-child { border-color: var(--deep); background: var(--deep); color: var(--white); }
.brand-check-navigation button:hover:not(:disabled) { transform: translateY(-2px); }
.brand-check-navigation button:first-child:hover:not(:disabled) { background: rgba(23, 73, 71, 0.07); }
.brand-check-navigation button:last-child:hover:not(:disabled) { border-color: var(--coal); background: var(--coal); }
.brand-check-navigation button:disabled { cursor: not-allowed; opacity: 0.3; }
.brand-check-result > h3 { max-width: 19ch; margin: 1rem 0 1.1rem; font-size: clamp(2.2rem, 3.55vw, 3.8rem); font-weight: 520; letter-spacing: -0.05em; line-height: 1.05; }
.brand-check-result > p { max-width: 760px; margin: 0; color: #59605f; font-size: var(--text-support); }
.brand-check-result-balance { display: grid; margin-top: 2rem; border-top: 1px solid rgba(23, 73, 71, 0.16); border-bottom: 1px solid rgba(23, 73, 71, 0.16); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.brand-check-result-balance > div { display: grid; gap: 0.25rem; padding: 1rem 1rem 1rem 0; }
.brand-check-result-balance > div + div { padding-left: 1.2rem; border-left: 1px solid rgba(23, 73, 71, 0.16); }
.brand-check-result-balance span, .brand-check-priorities > span { color: #68716f; font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: 0.05em; text-transform: uppercase; }
.brand-check-result-balance strong { color: var(--deep); font-size: clamp(1.15rem, 1.6vw, 1.5rem); font-weight: 600; }
.brand-check-priorities { margin-top: 1.7rem; }
.brand-check-priorities ol { display: grid; margin: 0.8rem 0 0; padding: 0; list-style: none; counter-reset: priority; }
.brand-check-priorities li { display: grid; min-height: 3.5rem; align-items: center; padding: 0.72rem 0; border-top: 1px solid rgba(23, 73, 71, 0.13); color: #434a48; font-size: var(--text-support); grid-template-columns: 2.2rem minmax(0, 1fr); counter-increment: priority; }
.brand-check-priorities li::before { color: #9a604f; font-family: var(--font-mono); font-size: var(--text-label); content: "0" counter(priority); }
.brand-check-priorities li:last-child { border-bottom: 1px solid rgba(23, 73, 71, 0.13); }
.brand-check-contact { display: grid; align-items: center; margin-top: 2rem; padding: 1.35rem; border-radius: 1.35rem; background: #e1ebe6; grid-template-columns: minmax(0, 1fr) auto; gap: 1.2rem 2rem; }
.brand-check-contact > div strong { display: block; font-size: clamp(1.25rem, 1.65vw, 1.55rem); font-weight: 600; letter-spacing: -0.025em; }
.brand-check-contact > div p { max-width: 560px; margin: 0.4rem 0 0; color: #59625f; font-size: var(--text-label); }
.brand-check-contact > a { width: fit-content; border-bottom: 1px solid currentColor; color: var(--deep); font-size: var(--text-action); font-weight: 650; grid-column: 2; }
.brand-check-result-tools { display: flex; min-height: 3rem; align-items: center; flex-wrap: wrap; gap: 1rem; margin-top: 1.2rem; }
.brand-check-result-tools button { padding: 0.6rem 0; border-bottom: 1px solid rgba(23, 73, 71, 0.4); background: transparent; color: var(--deep); cursor: pointer; font-size: var(--text-action); font-weight: 600; }
.brand-check-result-tools > span { color: #5d6663; font-size: var(--text-label); }
.contact-dialog.is-brand-test .contact-form textarea { min-height: 13rem; }

.brand-start { position: relative; overflow: hidden; padding: var(--section-space-feature) 0; background: #76596b; color: var(--white); isolation: isolate; }
.brand-start-background { position: absolute; z-index: -1; inset: 0; display: flex; align-items: center; justify-content: space-between; color: rgba(255, 255, 255, 0.035); font-size: clamp(8rem, 20vw, 22rem); font-weight: 700; letter-spacing: -0.1em; line-height: 0.8; pointer-events: none; transform: translateX(-4%); }
.brand-start-background span:nth-child(2) { transform: translateY(35%); }
.brand-start-inner { display: grid; align-items: start; grid-template-columns: minmax(0, 1.1fr) minmax(340px, 0.65fr); gap: clamp(3rem, 9vw, 9rem); }
.brand-start h2 { max-width: 20ch; margin: 0; font-size: clamp(2.65rem, 4.15vw, 4.5rem); letter-spacing: -0.04em; line-height: 1.06; }
.brand-start h2 + p { max-width: 720px; margin: 1.7rem 0 0; color: rgba(255, 255, 255, 0.76); font-size: clamp(1rem, 1.2vw, 1.12rem); }
.brand-start-choices { padding: 1.6rem 0 0; border-top: 1px solid rgba(255, 255, 255, 0.28); }
.brand-start-choices > span { color: #f0cf9f; font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: 0.06em; text-transform: uppercase; }
.brand-start-choices ul { display: grid; gap: 0.8rem; margin: 1.3rem 0 2rem; padding: 0; list-style: none; }
.brand-start-choices li { position: relative; padding-left: 1.4rem; font-size: var(--text-support); }
.brand-start-choices li::before { position: absolute; top: 0.72em; left: 0; width: 0.55rem; height: 1px; background: #f0cf9f; content: ""; }
.brand-start .button { border-color: #f2e6d8; background: #f2e6d8; color: #523d4a; }
.brand-start .button:hover { border-color: var(--white); background: var(--white); color: #523d4a; }

.brand-faq { padding: var(--section-space) 0; background: #f4f1ed; }
.brand-faq-layout { display: grid; align-items: start; grid-template-columns: minmax(340px, 0.72fr) minmax(0, 1.28fr); gap: clamp(3rem, 8vw, 8rem); }
.brand-faq-intro { position: sticky; top: 7rem; }
.brand-faq-intro h2 { max-width: 15ch; margin: 0; font-size: clamp(2.5rem, 3.7vw, 4rem); letter-spacing: -0.04em; line-height: 1.07; }
.brand-faq-intro h2 em { color: var(--deep); }
.brand-faq-intro p { max-width: 480px; margin: 1.5rem 0 0; color: #5c6165; font-size: var(--text-support); }
.brand-faq-list { border-top-color: rgba(30, 31, 32, 0.16); }

.brand-next { padding: clamp(3rem, 5vw, 5rem) 0; background: #e3ddd7; }
.brand-next-inner { display: grid; align-items: center; grid-template-columns: minmax(300px, 0.7fr) minmax(0, 1.3fr); gap: clamp(2.5rem, 7vw, 7rem); }
.brand-next-inner > div { display: grid; gap: 0.3rem; }
.brand-next-inner > div span { color: var(--deep); font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: 0.06em; text-transform: uppercase; }
.brand-next-inner > div strong { max-width: 470px; font-size: clamp(1.5rem, 2vw, 2.15rem); font-weight: 550; letter-spacing: -0.03em; line-height: 1.14; }
.brand-next nav { display: grid; border-top: 1px solid rgba(30, 31, 32, 0.15); }
.brand-next nav a { display: flex; min-height: 3.8rem; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid rgba(30, 31, 32, 0.15); color: #3f4448; font-size: var(--text-action); font-weight: 600; }
.brand-next nav a span { color: var(--deep); transition: transform 180ms ease; }
.brand-next nav a:hover span { transform: translate(0.2rem, -0.2rem); }

.brand-case-application { padding: var(--section-space-feature) 0; overflow: hidden; background: #ece7e0; }
.brand-case-heading { display: grid; align-items: end; grid-template-columns: minmax(0, .9fr) minmax(21rem, .48fr); gap: clamp(2.5rem, 8vw, 8rem); }
.brand-case-heading h2 { max-width: 17ch; margin: 0; font-size: var(--type-section-title); font-weight: 430; letter-spacing: -.045em; line-height: 1.04; }
.brand-case-heading h2 em { color: var(--deep); font-weight: 370; }
.brand-case-heading p { max-width: 37rem; margin: 0; color: #5a5f62; font-size: var(--text-support); line-height: 1.72; }

.brand-design-board { display: grid; margin-top: clamp(3rem, 6vw, 5.8rem); gap: .75rem; }
.brand-board { --board-bg: #173d3d; --board-text: #fff; --board-muted: rgba(255,255,255,.7); --board-line: rgba(255,255,255,.16); --board-accent: #9ecbbe; --board-surface: #254543; overflow: hidden; border: 1px solid var(--board-line); border-radius: clamp(1.2rem, 2.3vw, 2rem); background: var(--board-bg); color: var(--board-text); opacity: .84; transition: opacity 220ms ease, box-shadow 280ms ease, transform 280ms ease; }
.brand-board-hakon { --board-bg: #17231b; --board-text: #fff; --board-muted: rgba(255,255,255,.69); --board-line: rgba(255,255,255,.15); --board-accent: #57c73a; --board-surface: #253026; }
.brand-board-afia { --board-bg: #f0e3da; --board-text: #4a251c; --board-muted: rgba(74,37,28,.7); --board-line: rgba(74,37,28,.14); --board-accent: #9d4f3b; --board-surface: #f8f0e9; }
.brand-board-beauty { --board-bg: #edf0e8; --board-text: #172218; --board-muted: rgba(23,34,24,.67); --board-line: rgba(23,34,24,.14); --board-accent: #39b52a; --board-surface: #f7f7f2; }
.brand-board.is-active { box-shadow: 0 1.6rem 4.5rem rgba(30,31,32,.12); opacity: 1; transform: translateY(-.15rem); }

.brand-board-toggle { display: grid; width: 100%; min-height: 7rem; align-items: center; padding: clamp(1.15rem, 2.3vw, 1.75rem) clamp(1.2rem, 3vw, 2.3rem); border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; grid-template-columns: minmax(9rem, .27fr) minmax(18rem, .8fr) minmax(15rem, .45fr) 2.6rem; gap: clamp(1rem, 2.5vw, 2.4rem); }
.brand-board-toggle:focus-visible { outline: 3px solid var(--board-accent); outline-offset: -5px; }
.brand-board-name { color: var(--board-accent); font-family: var(--font-mono); font-size: var(--text-label); font-weight: 600; letter-spacing: .065em; text-transform: uppercase; }
.brand-board-toggle > strong { max-width: 35rem; font-size: clamp(1.25rem, 1.8vw, 1.75rem); font-weight: 520; letter-spacing: -.03em; line-height: 1.18; }
.brand-board-scope { color: var(--board-muted); font-size: var(--text-support); line-height: 1.55; }
.brand-board-toggle-icon { position: relative; display: block; width: 2.55rem; height: 2.55rem; border: 1px solid var(--board-line); border-radius: 50%; }
.brand-board-toggle-icon i { position: absolute; top: 50%; left: 50%; width: .85rem; height: 1px; background: currentColor; transform: translate(-50%,-50%); transition: transform 220ms ease; }
.brand-board-toggle-icon i:last-child { transform: translate(-50%,-50%) rotate(90deg); }
.brand-board.is-active .brand-board-toggle-icon i:last-child { transform: translate(-50%,-50%) rotate(0); }

.brand-board-reveal { display: grid; visibility: hidden; opacity: 0; grid-template-rows: 0fr; transition: grid-template-rows 430ms cubic-bezier(.2,.75,.25,1), opacity 250ms ease, visibility 430ms; }
.brand-board-reveal > div { min-height: 0; overflow: hidden; }
.brand-board.is-active .brand-board-reveal { visibility: visible; opacity: 1; grid-template-rows: 1fr; }
.brand-board-inner { display: grid; padding: 0 clamp(1.2rem, 3vw, 2.3rem) clamp(1.3rem, 3vw, 2.4rem); grid-template-columns: minmax(18rem, .66fr) minmax(0, 1.34fr); gap: clamp(1.3rem, 3.5vw, 3.5rem); }
.brand-board-system { display: flex; align-items: flex-start; padding: clamp(1.4rem, 3vw, 2.6rem); border: 1px solid var(--board-line); border-radius: 1.25rem; background: var(--board-surface); background: color-mix(in srgb, var(--board-surface) 78%, transparent); flex-direction: column; }
.brand-system-logo { display: grid; width: 100%; min-height: 9rem; padding: 1.15rem; place-items: center; border-radius: 1rem; background: rgba(255,255,255,.96); }
.brand-system-logo img { display: block; width: min(100%, 18rem); max-height: 7rem; object-fit: contain; }
.brand-system-logo-square img { width: 7.2rem; max-height: 7.2rem; }
.brand-system-logo-symbol { grid-template-columns: auto 1fr; justify-content: center; gap: .9rem; }
.brand-system-logo-symbol img { width: 4rem; max-height: 5rem; }
.brand-system-logo-symbol > strong { color: #111411; font-size: clamp(1.6rem, 2.7vw, 2.35rem); font-weight: 650; letter-spacing: -.05em; }
.brand-system-logo-symbol > strong span { color: #39b52a; }
.brand-board-palette { display: grid; width: 100%; margin: 1.2rem 0 0; padding: 0; list-style: none; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .45rem; }
.brand-board-palette li { display: grid; min-width: 0; grid-template-columns: 1.2rem minmax(0,1fr); gap: .12rem .45rem; }
.brand-board-palette i { width: 1.2rem; height: 1.2rem; border: 1px solid var(--board-line); border-radius: 50%; background: var(--swatch); grid-row: 1 / 3; }
.brand-board-palette span { overflow: hidden; font-size: var(--text-label); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.brand-board-palette code { color: var(--board-muted); font-family: var(--font-mono); font-size: var(--text-label); }
.brand-board-principle { width: 100%; margin-top: 1.7rem; padding-top: 1.35rem; border-top: 1px solid var(--board-line); }
.brand-board-principle > span { color: var(--board-accent); font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: .065em; text-transform: uppercase; }
.brand-board-principle > strong { display: block; margin-top: .5rem; font-family: var(--font-mono); font-size: clamp(.88rem, 1vw, 1rem); letter-spacing: .04em; }
.brand-board-principle p, .brand-board-summary { color: var(--board-muted); font-size: var(--text-support); line-height: 1.65; }
.brand-board-principle p { margin: .8rem 0 0; }
.brand-board-summary { margin: 1.3rem 0 0; }
.brand-board-link { display: inline-flex; align-items: center; gap: .55rem; margin-top: auto; padding-top: 1.6rem; border-bottom: 1px solid var(--board-accent); color: inherit; font-size: var(--text-action); font-weight: 650; }
.brand-board-link span { color: var(--board-accent); transition: transform 180ms ease; }
.brand-board-link:hover span { transform: translate(.18rem,-.18rem); }

.brand-board-applications { display: grid; width: 100%; height: clamp(30rem, 40vw, 36rem); min-height: 0; overflow: hidden; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); grid-template-rows: repeat(2,minmax(0,1fr)); gap: .75rem; }
.brand-board-media { position: relative; display: flex; min-width: 0; min-height: 0; align-items: center; justify-content: center; margin: 0; padding: 0; overflow: hidden; border: 1px solid var(--board-line); border-radius: 1.15rem; background: var(--board-surface); }
.brand-board-media-main { grid-row: 1 / -1; }
.brand-board-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.brand-board-media-guide img { padding: .75rem; object-fit: contain; object-position: center; }
.brand-board-media-poster img { height: auto; padding: 1rem; object-fit: contain; }
.brand-board-media-page { align-items: flex-start; background: #fff; }
.brand-board-media-page img { width: 100%; height: auto; object-fit: contain; object-position: top; }
.brand-board-media figcaption { position: absolute; right: .65rem; bottom: .65rem; z-index: 1; padding: .4rem .65rem; border-radius: 999px; background: rgba(17,20,17,.84); color: #fff; font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: .025em; }

@media (max-width: 1180px) {
  .brand-hero { min-height: auto; }
  .brand-hero-grid { grid-template-columns: minmax(0, 0.9fr) minmax(26rem, 0.72fr); gap: 3rem; }
  .brand-hero-copy h1 { font-size: clamp(2.9rem, 4.9vw, 4.6rem); }
  .brand-anatomy-layout { grid-template-columns: 1fr; gap: 2.5rem; }
  .brand-anatomy-board { position: relative; top: auto; min-height: 620px; }
  .brand-offer-columns article { min-height: 650px; }
  .brand-material-panel { flex-basis: min(1020px, calc(100vw - 6rem)); grid-template-columns: minmax(330px, 0.42fr) minmax(450px, 0.58fr); }
  .brand-check-workbench { grid-template-columns: minmax(280px, 0.36fr) minmax(0, 1fr); }
  .brand-check-stage { padding: clamp(2rem, 4vw, 3.5rem); }
  .brand-check-answers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brand-process-path { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem 2rem; }
  .brand-process-line { display: none; }
  .brand-process-path article { padding-top: 2.4rem; border-top: 1px solid rgba(30, 31, 32, 0.14); }
  .brand-process-path article > span { top: -0.72rem; }
}

@media (max-width: 900px) {
  .brand-hero { padding-top: calc(var(--header-height) + 2rem); }
  .brand-hero-grid, .brand-recognition-intro, .brand-anatomy-heading, .brand-offer-heading, .brand-materials-heading, .brand-process-heading, .brand-check-heading, .brand-start-inner, .brand-faq-layout, .brand-next-inner { grid-template-columns: 1fr; }
  .brand-hero-copy h1 { max-width: 17ch; }
  .brand-playground { max-width: 690px; }
  .brand-recognition-intro h2, .brand-anatomy-heading h2, .brand-offer-heading h2, .brand-materials-heading h2, .brand-process-heading h2, .brand-start h2 { max-width: 23ch; }
  .brand-friction-list { grid-template-columns: 1fr; gap: 2.7rem; }
  .brand-friction-list h3 { max-width: 23ch; }
  .brand-anatomy-layout { grid-template-columns: 1fr; }
  .brand-anatomy-board { position: relative; top: auto; min-height: 620px; }
  .brand-anatomy-list button { min-height: 7.6rem; }
  .brand-offer-columns { grid-template-columns: 1fr; }
  .brand-offer-columns article { min-height: auto; }
  .brand-offer-columns h3 { max-width: 18ch; margin-top: 3.4rem; }
  .brand-offer-columns article:last-child h3 { max-width: 18ch; }
  .brand-materials-controls { align-items: stretch; flex-direction: column; }
  .brand-materials-nav { padding-bottom: 0.4rem; overflow-x: auto; overflow-y: hidden; overscroll-behavior-inline: contain; flex-wrap: nowrap; scrollbar-width: none; }
  .brand-materials-nav::-webkit-scrollbar { display: none; }
  .brand-materials-paging { align-self: flex-end; }
  .brand-material-panel { flex-basis: min(760px, calc(100vw - var(--page-padding) - var(--page-padding))); min-height: 0; grid-template-columns: 1fr; }
  .brand-material-copy { min-height: 470px; }
  .brand-material-scene { min-height: 520px; }
  .brand-materials-contact { grid-template-columns: 1fr; }
  .brand-materials-contact .button { width: fit-content; }
  .brand-process-path { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brand-check-workbench { min-height: 0; grid-template-columns: 1fr; }
  .brand-check-signals { padding: 2rem; }
  .brand-check-signals ul { margin: 1.5rem 0 1rem; grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .brand-check-signals li { padding: 0.85rem 0.65rem; border-right: 1px solid rgba(255, 255, 255, 0.12); }
  .brand-check-signals li:last-child { border-right: 0; }
  .brand-check-signals li > div { align-items: flex-start; flex-direction: column; gap: 0.15rem; }
  .brand-check-signals li [data-signal-status] { white-space: normal; }
  .brand-check-signals > p { max-width: none; margin-top: 0.6rem; }
  .brand-check-stage { min-height: 650px; }
  .brand-faq-intro { position: relative; top: auto; }
}

@media (max-width: 620px) {
  .brand-hero { padding-top: calc(var(--header-height) + var(--hero-space-top)); padding-bottom: var(--hero-space-bottom); }
  .brand-breadcrumbs { margin-bottom: 2.5rem; font-size: var(--text-label); }
  .brand-hero-copy h1 { font-size: clamp(2.5rem, 10.5vw, 3.25rem); line-height: 1.08; }
  .brand-hero-intro { font-size: 1rem; }
  .brand-hero-actions { align-items: stretch; flex-direction: column; }
  .brand-hero-actions .button { width: 100%; }
  .brand-hero-tags { gap: 0.45rem; margin-top: 1.7rem; }
  .brand-hero-tags li { font-size: var(--text-label); }
  .brand-playground { padding: 0.7rem; border-radius: 1.4rem; }
  .brand-playground-heading { align-items: flex-start; flex-direction: column; gap: 0.2rem; padding: 0.3rem 0.25rem 0.85rem; }
  .brand-playground-heading p { text-align: left; }
  .brand-specimen { min-height: 390px; padding: 1.25rem; border-radius: 1rem; }
  .brand-specimen > strong { font-size: clamp(3rem, 15vw, 4.1rem); }
  .brand-specimen-shapes { right: 5%; bottom: 19%; width: 42%; }
  .brand-specimen-top i { max-width: 10rem; text-align: right; }
  .brand-tone-controls { grid-template-columns: 1fr; }
  .brand-tone-controls button { justify-content: flex-start; padding-inline: 1rem; }
  .brand-recognition { padding-top: var(--section-space); }
  .brand-recognition-intro h2, .brand-anatomy-heading h2, .brand-offer-heading h2, .brand-materials-heading h2, .brand-process-heading h2, .brand-check-heading h2, .brand-start h2, .brand-faq-intro h2 { font-size: clamp(2.2rem, 9vw, 2.95rem); line-height: 1.08; }
  .brand-touchpoint-ribbon > div { animation: none; }
  .brand-friction-list { padding-top: var(--block-space); padding-bottom: var(--section-space); }
  .brand-anatomy { padding-block: var(--section-space); }
  .brand-anatomy-layout { margin-top: 3rem; }
  .brand-anatomy-board { min-height: 465px; padding: 0.55rem; gap: 0.4rem; border-radius: 1.25rem; }
  .brand-board-grid { inset: 0.55rem; }
  .brand-anatomy-board [data-anatomy-piece] { border-radius: 0.8rem; }
  .brand-board-direction { padding: 0.75rem; }
  .brand-board-direction strong { font-size: 1.55rem; }
  .brand-board-logo { padding: 0.75rem; gap: 0.5rem; }
  .brand-board-logo > span { width: 2.5rem; height: 2.5rem; font-size: 1.1rem; }
  .brand-board-logo strong { font-size: 2.3rem; }
  .brand-board-logo small, .brand-board-color span, .brand-board-image strong, .brand-board-template small { font-size: 0.55rem; }
  .brand-board-color, .brand-board-template { padding: 0.7rem; }
  .brand-board-template strong { font-size: 1.2rem; }
  .brand-anatomy-list button { padding-right: 2.3rem; }
  .brand-anatomy-list button strong { white-space: normal; }
  .brand-anatomy-list button:hover, .brand-anatomy-list button.is-active { padding-left: 0; }
  .brand-offer { padding-top: var(--section-space); }
  .brand-offer-heading { padding-bottom: 3.2rem; }
  .brand-offer-columns article { padding: 3rem 1.25rem; }
  .brand-offer-columns h3 { margin-top: 2.4rem; font-size: clamp(1.8rem, 8vw, 2.45rem); }
  .brand-materials { padding-block: var(--section-space); }
  .brand-materials-controls { margin-top: 2.8rem; gap: 1rem; }
  .brand-materials-nav button { min-height: 2.8rem; }
  .brand-materials-paging { align-self: flex-start; }
  .brand-materials-paging button { width: 2.8rem; }
  .brand-materials-viewport { margin-top: 1rem; }
  .brand-materials-track { gap: 0.8rem; }
  .brand-material-panel { flex-basis: calc(100vw - var(--page-padding) - var(--page-padding)); border-radius: 1.3rem; }
  .brand-material-copy { min-height: 0; padding: 2rem 1.25rem 2.3rem; }
  .brand-material-copy h3 { max-width: 15ch; margin: 2.2rem 0 1rem; font-size: clamp(2rem, 9vw, 2.65rem); }
  .brand-material-copy ul { margin-top: 2rem; padding-top: 0; }
  .brand-material-copy li { font-size: var(--text-action); }
  .brand-material-scene { min-height: 390px; }
  .brand-material-piece { padding: 1rem; }
  .brand-material-piece > strong { font-size: clamp(1.1rem, 5.2vw, 1.55rem); }
  .brand-material-piece.is-offer { left: 1%; width: 45%; }
  .brand-material-piece.is-deck { right: -10%; width: 67%; }
  .brand-material-piece.is-sheet { right: 4%; width: 37%; }
  .brand-material-piece.is-poster { left: 2%; width: 46%; }
  .brand-material-piece.is-social { right: -2%; width: 46%; }
  .brand-material-piece.is-ticket { right: 5%; width: 62%; }
  .brand-material-piece.is-brochure { left: 1%; width: 51%; }
  .brand-material-piece.is-sign { right: -2%; width: 51%; }
  .brand-material-piece.is-program { right: 4%; width: 45%; }
  .brand-material-piece.is-template { left: 1%; width: 61%; }
  .brand-material-piece.is-report { right: -2%; width: 43%; }
  .brand-material-piece.is-story { right: 13%; width: 35%; }
  .brand-materials-contact { margin-top: 3.2rem; padding-top: 1.5rem; gap: 1.5rem; }
  .brand-materials-contact .button { width: 100%; }
  .brand-process { padding-block: var(--section-space); }
  .brand-process-heading h2 { max-width: 100%; font-size: clamp(2rem, 8.2vw, 2.55rem); overflow-wrap: anywhere; hyphens: auto; }
  .brand-process-path {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    margin-top: 3.5rem;
    margin-right: calc(var(--page-padding) * -1);
    padding: 0 var(--page-padding) 0.45rem 0;
    gap: 0.85rem;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .brand-process-path::-webkit-scrollbar { display: none; }
  .brand-process-line { display: none; }
  .brand-process-path article {
    min-height: 16rem;
    flex: 0 0 min(78vw, 19rem);
    padding: 3.4rem 1.2rem 1.2rem;
    border: 1px solid rgba(30, 31, 32, 0.14);
    border-radius: 1.2rem;
    background: rgba(255, 255, 255, 0.72);
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  .brand-process-path article > span { top: 1.15rem; left: 1.2rem; }
  .brand-process-path p { max-width: 480px; }
  .brand-check { padding-block: var(--section-space); }
  .brand-check-workbench { margin-top: 3rem; border-radius: 1.3rem; }
  .brand-check-signals { padding: 1.3rem; }
  .brand-check-signals-head { align-items: flex-start; flex-direction: column; gap: 0.2rem; }
  .brand-check-signals ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brand-check-signals li:nth-child(even) { border-right: 0; }
  .brand-check-signals li:last-child { border-right: 1px solid rgba(255, 255, 255, 0.12); }
  .brand-check-stage { min-height: 660px; padding: 2rem 1.15rem; }
  .brand-check-start h3 { font-size: clamp(2.1rem, 10vw, 2.8rem); }
  .brand-check-question h3 { font-size: clamp(1.8rem, 8vw, 2.45rem); }
  .brand-check-answers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brand-check-answers button { min-height: 3.6rem; padding-inline: 0.55rem; }
  .brand-check-navigation button { padding-inline: 0.75rem; }
  .brand-check-result > h3 { font-size: clamp(2rem, 9vw, 2.75rem); }
  .brand-check-result-balance { grid-template-columns: 1fr; }
  .brand-check-result-balance > div + div { padding-left: 0; border-top: 1px solid rgba(23, 73, 71, 0.16); border-left: 0; }
  .brand-check-contact { grid-template-columns: 1fr; }
  .brand-check-contact .button { width: 100%; }
  .brand-check-contact > a { grid-column: 1; }
  .brand-start { padding-block: var(--section-space-feature); }
  .brand-start-choices { padding-top: 1.3rem; }
  .brand-start .button { width: 100%; }
  .brand-faq { padding-block: var(--section-space); }
  .brand-next { padding-block: 3.5rem; }
}

@media (max-width: 900px) {
  .brand-case-heading { align-items: start; grid-template-columns: 1fr; gap: 1.4rem; }
  .brand-case-heading h2 { max-width: 19ch; }
  .brand-case-heading p { max-width: 42rem; }
  .brand-board-toggle { grid-template-columns: minmax(8rem,.3fr) minmax(0,1fr) 2.6rem; gap: 1rem 1.4rem; }
  .brand-board-scope { padding-top: .8rem; border-top: 1px solid var(--board-line); grid-column: 1 / 3; grid-row: 2; }
  .brand-board-toggle-icon { grid-column: 3; grid-row: 1 / 3; }
  .brand-board-inner { grid-template-columns: 1fr; }
  .brand-board-system { display: grid; align-items: start; grid-template-columns: minmax(13rem,.65fr) minmax(0,1fr); grid-template-rows: auto auto auto 1fr auto; gap: 0 1.5rem; }
  .brand-system-logo { grid-column: 1; grid-row: 1 / 4; }
  .brand-board-palette { grid-column: 1; grid-row: 4 / 6; }
  .brand-board-principle { margin-top: 0; padding-top: 0; border-top: 0; grid-column: 2; grid-row: 1; }
  .brand-board-summary { grid-column: 2; grid-row: 2; }
  .brand-board-link { grid-column: 2; grid-row: 5; }
  .brand-board-applications { height: 31rem; min-height: 0; }
}

@media (max-width: 620px) {
  .brand-case-application { padding-block: var(--section-space); }
  .brand-case-heading h2 { font-size: clamp(2.2rem,9vw,2.95rem); line-height: 1.08; }
  .brand-design-board { margin-top: 2.6rem; }
  .brand-board-toggle { min-height: 0; padding: 1.25rem; grid-template-columns: 1fr 2.5rem; gap: .55rem 1rem; }
  .brand-board-name { grid-column: 1; }
  .brand-board-toggle > strong { font-size: 1.2rem; grid-column: 1; grid-row: 2; }
  .brand-board-scope { padding-top: .75rem; grid-column: 1 / -1; grid-row: 3; }
  .brand-board-toggle-icon { align-self: start; grid-column: 2; grid-row: 1 / 3; }
  .brand-board-inner { padding-inline: .8rem; padding-bottom: .8rem; gap: .8rem; }
  .brand-board-system { display: flex; padding: 1rem; }
  .brand-system-logo { min-height: 7.4rem; grid-column: auto; grid-row: auto; }
  .brand-system-logo img { max-height: 5.5rem; }
  .brand-system-logo-square img { width: 5.5rem; }
  .brand-board-palette { grid-column: auto; grid-row: auto; }
  .brand-board-principle { margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--board-line); grid-column: auto; grid-row: auto; }
  .brand-board-summary, .brand-board-link { grid-column: auto; grid-row: auto; }
  .brand-board-applications { height: 32.75rem; min-height: 0; grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: 19rem 13rem; }
  .brand-board-media-main { grid-column: 1 / -1; grid-row: 1; }
  .brand-board-media { border-radius: .9rem; }
  .brand-board-media-poster img { padding: .5rem; }
  .brand-board-media figcaption { right: .4rem; bottom: .4rem; max-width: calc(100% - .8rem); overflow: hidden; font-size: var(--text-label); text-overflow: ellipsis; white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  .brand-touchpoint-ribbon > div { animation: none; }
  .brand-specimen, .brand-specimen::before, .brand-specimen-mark, .brand-specimen > strong, .brand-specimen-shapes span, .brand-anatomy-board [data-anatomy-piece], .brand-material-panel, .brand-material-piece, .brand-board, .brand-board-reveal, .brand-board-toggle-icon i { transition: none; }
  .brand-materials-viewport { scroll-behavior: auto; }
}