/* CCV design system - generated by scripts/build-ds-css.php.
   Do not edit: change the layer in asset/ccv/css/ds/ and rebuild. */

/* ===== ds/10-tokens.css ===== */
/* ==========================================================================
   CCV-PHASE-14A — Design tokens
   The single source of truth for the public site's visual language.

   Namespace `--ccv-*` is carried over from Phase 1E so existing components
   keep working while pages migrate. Tokens are semantic: components name a
   role (`--ccv-surface`), never a raw value, so a palette change happens here
   and nowhere else.

   Palette read from the owner-approved mockups: warm off-white ground,
   near-black ink, one muted gold used as an accent and nothing more. No blue
   or purple: the only non-neutral hues are the gold and the two state colours.
   ========================================================================== */

:root {
  /* ---------- Colour: ground and surface ------------------------------- */
  --ccv-color-bg: #faf8f4;          /* warm off-white page ground */
  --ccv-color-bg-muted: #f2efe8;    /* alternating section band */
  --ccv-color-bg-dark: #1c1d1f;     /* dark editorial section, footer */
  --ccv-color-bg-dark-soft: #26282b;/* raised block inside a dark section */
  --ccv-color-surface: #ffffff;     /* cards, panels */
  --ccv-color-surface-muted: #f7f5f0;

  /* ---------- Colour: ink ---------------------------------------------- */
  --ccv-color-text: #1a1b1d;
  --ccv-color-text-muted: #6a655e;  /* warm grey, not a cold slate */
  --ccv-color-text-subtle: #767065;  /* 4.63:1 on the page ground - AA for small text */
  --ccv-color-text-inverse: #f6f4f0;
  --ccv-color-text-inverse-muted: #a9a49c;

  /* ---------- Colour: accent -------------------------------------------
     Gold is an accent. It belongs on the primary CTA, the active nav
     underline, eyebrows, icon strokes and rules - not on backgrounds of
     whole sections and not on body text. */
  --ccv-color-accent: #c8a055;
  --ccv-color-accent-hover: #b08b42;
  --ccv-color-accent-soft: #f0e6d2; /* tint for icon wells and chips */
  --ccv-color-accent-ink: #7d6122;  /* accent used as text on light ground */

  /* ---------- Colour: structure ----------------------------------------- */
  --ccv-color-border: #e6e0d6;      /* warm hairline */
  --ccv-color-border-strong: #cfc7b8;
  --ccv-color-border-dark: #3a3d41; /* hairline on a dark ground */
  --ccv-color-focus: #1a56b8;       /* only for the focus ring */
  --ccv-color-overlay: rgba(20, 21, 23, 0.55);
  --ccv-color-overlay-soft: rgba(20, 21, 23, 0.28);

  /* ---------- Colour: state --------------------------------------------- */
  --ccv-color-danger: #b42318;
  --ccv-color-danger-bg: #fef3f2;
  --ccv-color-success: #05713f;
  --ccv-color-success-bg: #ecfdf3;

  /* ---------- Typography: families ---------------------------------------
     A system stack: zero font requests, no layout shift, full Vietnamese
     diacritic coverage on every target platform. The mockups' exact typeface
     can be dropped in by redefining these two tokens once a licence exists -
     nothing else in the system needs to change. See CCV_DESIGN_SYSTEM.md. */
  --ccv-font-display: "Segoe UI", -apple-system, BlinkMacSystemFont, "Inter",
                      "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --ccv-font-body: "Segoe UI", -apple-system, BlinkMacSystemFont, "Inter",
                   "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --ccv-font-mono: "IBM Plex Mono", "Cascadia Mono", Consolas, monospace;

  /* ---------- Typography: fluid scale -----------------------------------
     clamp() pairs a readable mobile size with the large editorial scale the
     mockups use on desktop, without a cascade of breakpoint overrides. */
  --ccv-text-display: clamp(2.5rem, 1.6rem + 3.8vw, 4.5rem);
  --ccv-text-h1: clamp(2rem, 1.35rem + 2.7vw, 3.25rem);
  --ccv-text-h2: clamp(1.625rem, 1.2rem + 1.8vw, 2.5rem);
  --ccv-text-h3: clamp(1.25rem, 1.05rem + 0.85vw, 1.75rem);
  --ccv-text-h4: clamp(1.0625rem, 0.98rem + 0.4vw, 1.25rem);
  --ccv-text-lead: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --ccv-text-body: 1rem;
  --ccv-text-sm: 0.9375rem;
  --ccv-text-xs: 0.8125rem;
  --ccv-text-eyebrow: 0.75rem;

  /* ---------- Typography: weight, height, tracking ----------------------- */
  --ccv-weight-regular: 400;
  --ccv-weight-medium: 500;
  --ccv-weight-semibold: 600;
  --ccv-weight-bold: 700;

  --ccv-leading-tight: 1.12;
  --ccv-leading-snug: 1.25;
  --ccv-leading-normal: 1.5;
  --ccv-leading-relaxed: 1.7;

  --ccv-tracking-tight: -0.02em;
  --ccv-tracking-normal: 0;
  --ccv-tracking-wide: 0.08em;
  --ccv-tracking-eyebrow: 0.14em;

  /* ---------- Spacing scale ---------------------------------------------
     A 4px base. The approved design leans on generous vertical rhythm, so
     the section steps are deliberately large. */
  --ccv-space-1: 0.25rem;
  --ccv-space-2: 0.5rem;
  --ccv-space-3: 0.75rem;
  --ccv-space-4: 1rem;
  --ccv-space-5: 1.5rem;
  --ccv-space-6: 2rem;
  --ccv-space-7: 2.5rem;
  --ccv-space-8: 3rem;
  --ccv-space-9: 4rem;
  --ccv-space-10: 5rem;
  --ccv-space-11: 6.5rem;
  --ccv-space-12: 8rem;

  /* Section rhythm, fluid so mobile does not inherit desktop's air. */
  --ccv-section-y: clamp(3rem, 2rem + 4.5vw, 6.5rem);
  --ccv-section-y-tight: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
  --ccv-section-y-loose: clamp(4rem, 2.5rem + 6vw, 8rem);

  /* ---------- Containers -------------------------------------------------
     The mockups are centred editorial compositions, not edge-to-edge. */
  --ccv-container-wide: 82.5rem;    /* 1320px - hero, full grids */
  --ccv-container: 75rem;           /* 1200px - the default */
  --ccv-container-narrow: 60rem;    /* 960px  - lead-in copy, forms */
  --ccv-container-reading: 44rem;   /* 704px  - article body measure */
  --ccv-gutter: 1.25rem;            /* mobile */

  /* ---------- Grid -------------------------------------------------------- */
  --ccv-grid-gap: var(--ccv-space-5);
  --ccv-grid-gap-lg: var(--ccv-space-6);

  /* ---------- Radius ------------------------------------------------------
     Restrained. Exhibition architecture reads square; large pills would make
     it look like a consumer SaaS product. */
  --ccv-radius-xs: 2px;
  --ccv-radius-sm: 4px;
  --ccv-radius: 6px;
  --ccv-radius-lg: 10px;
  --ccv-radius-pill: 999px;

  /* ---------- Border ------------------------------------------------------ */
  --ccv-border-hairline: 1px;
  --ccv-border-thick: 2px;

  /* ---------- Shadow ------------------------------------------------------
     Barely there. Depth comes from the hairline and the ground, not glow. */
  --ccv-shadow-xs: 0 1px 2px rgba(26, 27, 29, 0.05);
  --ccv-shadow-sm: 0 2px 8px rgba(26, 27, 29, 0.06);
  --ccv-shadow-md: 0 8px 24px rgba(26, 27, 29, 0.08);
  --ccv-shadow-lg: 0 18px 48px rgba(26, 27, 29, 0.12);

  /* ---------- Image ratios ------------------------------------------------ */
  --ccv-ratio-wide: 16 / 9;
  --ccv-ratio-landscape: 3 / 2;
  --ccv-ratio-card: 4 / 3;
  --ccv-ratio-square: 1 / 1;
  --ccv-ratio-portrait: 3 / 4;
  --ccv-ratio-hero: 21 / 9;

  /* ---------- Z-index ----------------------------------------------------- */
  --ccv-z-base: 0;
  --ccv-z-raised: 10;
  --ccv-z-sticky: 100;
  --ccv-z-dropdown: 200;
  --ccv-z-overlay: 300;
  --ccv-z-modal: 400;
  --ccv-z-skiplink: 500;

  /* ---------- Motion -------------------------------------------------------
     Short and unshowy. Section 23: restraint, and reduced-motion respected
     in 20-base.css. */
  --ccv-ease: cubic-bezier(0.2, 0.6, 0.3, 1);
  --ccv-duration-fast: 120ms;
  --ccv-duration: 200ms;
  --ccv-duration-slow: 360ms;
  --ccv-transition: var(--ccv-duration) var(--ccv-ease);

  /* ---------- Shell ------------------------------------------------------- */
  --ccv-header-h: 4.75rem;
}

@media (min-width: 48rem) {
  :root {
    --ccv-gutter: 2rem;
  }
}

@media (min-width: 75rem) {
  :root {
    --ccv-gutter: 2.5rem;
    --ccv-header-h: 5.25rem;
  }
}

/* Breakpoints are documented here for reference; CSS custom properties
   cannot be used in media queries, so the values are repeated literally.
   sm 30rem/480px · md 48rem/768px · lg 64rem/1024px · xl 75rem/1200px
   · 2xl 90rem/1440px                                                     */

/* ===== ds/20-base.css ===== */
/* ==========================================================================
   CCV-PHASE-14A — Base and reset

   Scoped deliberately. Section 27 requires that the public frontend and the
   admin cannot contaminate each other, so element selectors here are confined
   to `.ccv-ds` (set on <body>) except for the three that must be global to
   work at all: box-sizing, the root scroll behaviour and the reduced-motion
   guard.
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* Section 23 / 33: honour the OS setting rather than overriding it. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.ccv-ds {
  margin: 0;
  background: var(--ccv-color-bg);
  color: var(--ccv-color-text);
  font-family: var(--ccv-font-body);
  font-size: var(--ccv-text-body);
  line-height: var(--ccv-leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Base element resets are wrapped in :where(), which contributes zero
   specificity. A reset must never out-rank a component: `.ccv-ds a { color:
   inherit }` at (0,1,1) beat `.ccv-btn { color: … }` at (0,1,0) and silently
   painted every button's label the inherited ink. With :where() the element
   selector alone decides, so any class rule wins. */
:where(.ccv-ds) h1,
:where(.ccv-ds) h2,
:where(.ccv-ds) h3,
:where(.ccv-ds) h4,
:where(.ccv-ds) h5,
:where(.ccv-ds) h6 {
  margin: 0;
  font-family: var(--ccv-font-display);
  font-weight: var(--ccv-weight-semibold);
  line-height: var(--ccv-leading-tight);
  letter-spacing: var(--ccv-tracking-tight);
  color: var(--ccv-color-text);
  text-wrap: balance;
}

:where(.ccv-ds) p,
:where(.ccv-ds) ul,
:where(.ccv-ds) ol,
:where(.ccv-ds) figure,
:where(.ccv-ds) blockquote,
:where(.ccv-ds) dl {
  margin: 0;
}

:where(.ccv-ds) a {
  color: inherit;
  text-decoration: none;
}

:where(.ccv-ds) img,
:where(.ccv-ds) picture,
:where(.ccv-ds) video,
:where(.ccv-ds) svg {
  display: block;
  max-width: 100%;
}

/* Transitional containment (section 27). The Phase 1E sheet carries
   `.ccv-root img, .ccv-root video { height: auto }` at specificity (0,1,1),
   which out-specifies any single-class design-system rule that needs to size
   an image - a header logo, for instance. <body> carries both classes while
   pages migrate, so the two sheets act on the same subtree.

   Component rules that must set an image height therefore qualify themselves
   with `.ccv-ds` to reach (0,2,0); see `.ccv-ds .ccv-header__logo` in
   60-shell.css. Rules at (0,1,1) or above - `.ccv-media > img` below - already
   win on source order, because this sheet loads last.

   Both accommodations disappear when the legacy bundle is retired. */
.ccv-ds .ccv-media > img,
.ccv-ds .ccv-media > video {
  height: 100%;
}

:where(.ccv-ds) button,
:where(.ccv-ds) input,
:where(.ccv-ds) select,
:where(.ccv-ds) textarea {
  font: inherit;
  color: inherit;
}

:where(.ccv-ds) hr {
  border: 0;
  border-top: var(--ccv-border-hairline) solid var(--ccv-color-border);
  margin: 0;
}

/* ---------- Focus -----------------------------------------------------------
   Section 22: a visible focus ring is non-negotiable. `:focus-visible` keeps
   it off mouse clicks, so it costs the visual design nothing. */
.ccv-ds :focus-visible {
  outline: 2px solid var(--ccv-color-focus);
  outline-offset: 2px;
  border-radius: var(--ccv-radius-xs);
}

.ccv-ds ::selection {
  background: var(--ccv-color-accent-soft);
  color: var(--ccv-color-text);
}

/* ---------- Skip link -------------------------------------------------------
   Present for keyboard users, out of the way for everyone else. */
.ccv-skip-link {
  position: absolute;
  left: var(--ccv-space-4);
  top: var(--ccv-space-4);
  z-index: var(--ccv-z-skiplink);
  transform: translateY(-200%);
  padding: var(--ccv-space-3) var(--ccv-space-5);
  background: var(--ccv-color-text);
  color: var(--ccv-color-text-inverse);
  border-radius: var(--ccv-radius-sm);
  font-size: var(--ccv-text-sm);
  font-weight: var(--ccv-weight-medium);
  transition: transform var(--ccv-transition);
}

.ccv-skip-link:focus {
  transform: translateY(0);
}

/* Screen-reader-only, for labels that must exist but must not be seen. */
.ccv-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===== ds/30-layout.css ===== */
/* ==========================================================================
   CCV-PHASE-14A — Containers, sections, grids

   Section 6/7/8: shared layout primitives so pages stop inventing one-off
   widths and gaps. Everything here is composable and page-agnostic.
   ========================================================================== */

/* ---------- Containers ---------------------------------------------------- */
.ccv-container,
.ccv-container--wide,
.ccv-container--narrow,
.ccv-container--reading {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--ccv-gutter);
}

.ccv-container { max-width: var(--ccv-container); }
.ccv-container--wide { max-width: var(--ccv-container-wide); }
.ccv-container--narrow { max-width: var(--ccv-container-narrow); }
.ccv-container--reading { max-width: var(--ccv-container-reading); }

/* A full-bleed child inside a container, for edge-to-edge media. */
.ccv-bleed {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

/* ---------- Section ------------------------------------------------------- */
.ccv-section {
  padding-block: var(--ccv-section-y);
}

.ccv-section--tight { padding-block: var(--ccv-section-y-tight); }
.ccv-section--loose { padding-block: var(--ccv-section-y-loose); }
.ccv-section--flush-top { padding-block-start: 0; }
.ccv-section--flush-bottom { padding-block-end: 0; }

.ccv-section--muted { background: var(--ccv-color-bg-muted); }
.ccv-section--surface { background: var(--ccv-color-surface); }

/* Dark editorial band. Sets inverse ink for everything inside so nested
   components do not each need a `--dark` variant. */
.ccv-section--dark {
  background: var(--ccv-color-bg-dark);
  color: var(--ccv-color-text-inverse);
}

.ccv-section--dark h1,
.ccv-section--dark h2,
.ccv-section--dark h3,
.ccv-section--dark h4 {
  color: var(--ccv-color-text-inverse);
}

.ccv-section--dark .ccv-section__desc,
.ccv-section--dark .ccv-text-muted {
  color: var(--ccv-color-text-inverse-muted);
}

.ccv-section--dark .ccv-eyebrow {
  color: var(--ccv-color-accent);
}

/* ---------- Section header ------------------------------------------------ */
.ccv-section__head {
  display: flex;
  flex-direction: column;
  gap: var(--ccv-space-4);
  max-width: var(--ccv-container-narrow);
  margin-block-end: var(--ccv-space-8);
}

/* Title left, action right - the pattern the mockups use above card grids. */
.ccv-section__head--split {
  max-width: none;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--ccv-space-6);
  flex-wrap: wrap;
}

.ccv-section__head--center {
  text-align: center;
  align-items: center;
  margin-inline: auto;
}

.ccv-section__titles {
  display: flex;
  flex-direction: column;
  gap: var(--ccv-space-3);
}

.ccv-section__desc {
  font-size: var(--ccv-text-lead);
  line-height: var(--ccv-leading-relaxed);
  color: var(--ccv-color-text-muted);
  max-width: 46rem;
  text-wrap: pretty;
}

/* ---------- Split (two-column editorial) ---------------------------------- */
.ccv-split {
  display: grid;
  gap: var(--ccv-space-8);
  align-items: center;
}

@media (min-width: 64rem) {
  .ccv-split {
    grid-template-columns: 1fr 1fr;
    gap: var(--ccv-space-10);
  }
  .ccv-split--media-first > :first-child { order: 2; }
  .ccv-split--media-first > :last-child { order: 1; }
  .ccv-split--wide-text { grid-template-columns: 1.15fr 0.85fr; }
  .ccv-split--wide-media { grid-template-columns: 0.85fr 1.15fr; }
  .ccv-split--top { align-items: start; }
}

/* ---------- Grids ---------------------------------------------------------
   `auto-fit` with a floor means one set of rules covers every breakpoint and
   a grid never leaves a single stranded card on a wide screen. */
.ccv-grid {
  display: grid;
  gap: var(--ccv-grid-gap);
}

.ccv-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.ccv-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.ccv-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr)); }
.ccv-grid--gap-lg { gap: var(--ccv-grid-gap-lg); }

/* Fixed-column variants for grids that must not reflow, e.g. a stats row. */
@media (min-width: 48rem) {
  .ccv-grid--fixed-2 { grid-template-columns: repeat(2, 1fr); }
  .ccv-grid--fixed-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 64rem) {
  .ccv-grid--fixed-3 { grid-template-columns: repeat(3, 1fr); }
  .ccv-grid--fixed-4 { grid-template-columns: repeat(4, 1fr); }
  .ccv-grid--fixed-5 { grid-template-columns: repeat(5, 1fr); }
}

/* Article + rail, the layout the article-detail mockup uses. */
.ccv-grid--rail { grid-template-columns: 1fr; }

@media (min-width: 64rem) {
  .ccv-grid--rail {
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: var(--ccv-space-9);
    align-items: start;
  }
}

/* ---------- Stack ---------------------------------------------------------
   Vertical rhythm without margin collapsing surprises. */
.ccv-stack { display: flex; flex-direction: column; }
.ccv-stack--2 { gap: var(--ccv-space-2); }
.ccv-stack--3 { gap: var(--ccv-space-3); }
.ccv-stack--4 { gap: var(--ccv-space-4); }
.ccv-stack--5 { gap: var(--ccv-space-5); }
.ccv-stack--6 { gap: var(--ccv-space-6); }
.ccv-stack--8 { gap: var(--ccv-space-8); }

/* ---------- Cluster (inline group that wraps) ----------------------------- */
.ccv-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ccv-space-4);
}

.ccv-cluster--tight { gap: var(--ccv-space-2); }
.ccv-cluster--between { justify-content: space-between; }

/* ===== ds/40-type.css ===== */
/* ==========================================================================
   CCV-PHASE-14A — Typography

   Section 4/5. Classes carry the scale so a heading's visual size and its
   semantic level stay independent: a page can open with an <h1> that looks
   like a display line, or a card <h3> that looks like body-large, without
   breaking the heading order screen readers rely on.
   ========================================================================== */

.ccv-display {
  font-family: var(--ccv-font-display);
  font-size: var(--ccv-text-display);
  font-weight: var(--ccv-weight-bold);
  line-height: var(--ccv-leading-tight);
  letter-spacing: var(--ccv-tracking-tight);
  text-wrap: balance;
}

.ccv-h1 {
  font-family: var(--ccv-font-display);
  font-size: var(--ccv-text-h1);
  font-weight: var(--ccv-weight-bold);
  line-height: var(--ccv-leading-tight);
  letter-spacing: var(--ccv-tracking-tight);
  text-wrap: balance;
}

.ccv-h2 {
  font-family: var(--ccv-font-display);
  font-size: var(--ccv-text-h2);
  font-weight: var(--ccv-weight-semibold);
  line-height: var(--ccv-leading-snug);
  letter-spacing: var(--ccv-tracking-tight);
  text-wrap: balance;
}

.ccv-h3 {
  font-family: var(--ccv-font-display);
  font-size: var(--ccv-text-h3);
  font-weight: var(--ccv-weight-semibold);
  line-height: var(--ccv-leading-snug);
}

.ccv-h4 {
  font-family: var(--ccv-font-display);
  font-size: var(--ccv-text-h4);
  font-weight: var(--ccv-weight-semibold);
  line-height: var(--ccv-leading-snug);
}

.ccv-lead {
  font-size: var(--ccv-text-lead);
  line-height: var(--ccv-leading-relaxed);
  color: var(--ccv-color-text-muted);
  text-wrap: pretty;
}

.ccv-body { font-size: var(--ccv-text-body); line-height: var(--ccv-leading-relaxed); }
.ccv-body-sm { font-size: var(--ccv-text-sm); line-height: var(--ccv-leading-normal); }
.ccv-caption { font-size: var(--ccv-text-xs); line-height: var(--ccv-leading-normal); color: var(--ccv-color-text-subtle); }

/* Eyebrow: the small gold-caps label above a section title in the mockups. */
.ccv-eyebrow {
  display: inline-block;
  font-size: var(--ccv-text-eyebrow);
  font-weight: var(--ccv-weight-semibold);
  letter-spacing: var(--ccv-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ccv-color-accent-ink);
}

.ccv-eyebrow--plain { color: var(--ccv-color-text-subtle); }

/* Metadata line: date · author · reading time. */
.ccv-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ccv-space-2) var(--ccv-space-4);
  font-size: var(--ccv-text-xs);
  color: var(--ccv-color-text-subtle);
}

.ccv-meta__item {
  display: inline-flex;
  align-items: center;
  gap: var(--ccv-space-2);
}

.ccv-text-muted { color: var(--ccv-color-text-muted); }
.ccv-text-accent { color: var(--ccv-color-accent-ink); }
.ccv-text-inverse { color: var(--ccv-color-text-inverse); }

/* Clamp helpers for card copy, so a long Vietnamese title cannot blow out a
   grid row. Section 29 - VI strings run longer than EN. */
.ccv-clamp-1,
.ccv-clamp-2,
.ccv-clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ccv-clamp-1 { -webkit-line-clamp: 1; line-clamp: 1; }
.ccv-clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }
.ccv-clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; }

/* ---------- Prose ---------------------------------------------------------
   For CMS body HTML, which arrives as bare <p>/<ul>/<h2> without classes.
   Scoped to `.ccv-prose` so it cannot leak into the shell. */
.ccv-prose {
  font-size: var(--ccv-text-body);
  line-height: var(--ccv-leading-relaxed);
  color: var(--ccv-color-text);
}

.ccv-prose > * + * { margin-block-start: var(--ccv-space-5); }

.ccv-prose h2 {
  font-size: var(--ccv-text-h3);
  margin-block-start: var(--ccv-space-8);
}

.ccv-prose h3 {
  font-size: var(--ccv-text-h4);
  margin-block-start: var(--ccv-space-6);
}

.ccv-prose ul,
.ccv-prose ol {
  padding-inline-start: var(--ccv-space-6);
}

.ccv-prose li + li { margin-block-start: var(--ccv-space-2); }

.ccv-prose a {
  color: var(--ccv-color-text);
  text-decoration: underline;
  text-decoration-color: var(--ccv-color-accent);
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

.ccv-prose a:hover { color: var(--ccv-color-accent-ink); }

.ccv-prose img,
.ccv-prose figure img {
  width: 100%;
  height: auto;
  border-radius: var(--ccv-radius);
}

.ccv-prose figure { margin-block: var(--ccv-space-6); }

.ccv-prose figcaption {
  margin-block-start: var(--ccv-space-3);
  font-size: var(--ccv-text-xs);
  color: var(--ccv-color-text-subtle);
  text-align: center;
}

.ccv-prose blockquote {
  padding-inline-start: var(--ccv-space-5);
  border-inline-start: var(--ccv-border-thick) solid var(--ccv-color-accent);
  font-size: var(--ccv-text-lead);
  line-height: var(--ccv-leading-relaxed);
  color: var(--ccv-color-text-muted);
}

/* A wide table or code block must scroll inside its own box rather than
   forcing the page to scroll sideways. */
.ccv-prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ccv-text-sm);
}

.ccv-prose th,
.ccv-prose td {
  padding: var(--ccv-space-3);
  border-block-end: var(--ccv-border-hairline) solid var(--ccv-color-border);
  text-align: start;
}

.ccv-prose__scroll { overflow-x: auto; }

/* ===== ds/50-components.css ===== */
/* ==========================================================================
   CCV-PHASE-14A — Components

   Section 10-13, 20, 21. Every component is page-agnostic (section 26): no
   selector here is qualified by a page class, so a card behaves the same on
   the homepage and in a listing.
   ========================================================================== */

/* ==========================================================================
   Buttons — section 10
   Compact and square-ish. The mockups' CTA is a solid gold block with an
   arrow; secondary actions are outlined, never a second filled colour.
   ========================================================================== */
.ccv-btn {
  --_bg: transparent;
  --_fg: var(--ccv-color-text);
  --_border: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ccv-space-2);
  padding: 0.75rem 1.375rem;
  border: var(--ccv-border-hairline) solid var(--_border);
  border-radius: var(--ccv-radius-sm);
  background: var(--_bg);
  color: var(--_fg);
  font-family: var(--ccv-font-body);
  font-size: var(--ccv-text-sm);
  font-weight: var(--ccv-weight-semibold);
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: background var(--ccv-transition), border-color var(--ccv-transition),
              color var(--ccv-transition);
}

.ccv-btn__icon {
  flex: 0 0 auto;
  transition: transform var(--ccv-transition);
}

.ccv-btn:hover .ccv-btn__icon { transform: translateX(3px); }

/* Dark ink on the gold, not white. The mockups show a white label, but white
   on #c8a055 measures 2.44:1 - well under the 4.5:1 AA needs, and the gold
   cannot be darkened enough to carry white without leaving the approved
   palette. The same gold with the page's ink measures 7.07:1 and keeps the
   button exactly the colour the mockups specify. Flagged for owner review in
   CCV_DESIGN_SYSTEM.md. */
.ccv-btn--primary {
  --_bg: var(--ccv-color-accent);
  --_fg: var(--ccv-color-text);
  --_border: var(--ccv-color-accent);
}
.ccv-btn--primary:hover {
  --_bg: var(--ccv-color-accent-hover);
  --_border: var(--ccv-color-accent-hover);
}

.ccv-btn--dark {
  --_bg: var(--ccv-color-text);
  --_fg: var(--ccv-color-text-inverse);
  --_border: var(--ccv-color-text);
}
.ccv-btn--dark:hover { --_bg: #33353a; --_border: #33353a; }

.ccv-btn--outline {
  --_fg: var(--ccv-color-text);
  --_border: var(--ccv-color-border-strong);
}
.ccv-btn--outline:hover { --_border: var(--ccv-color-text); }

/* On a dark ground. */
.ccv-btn--light {
  --_bg: var(--ccv-color-surface);
  --_fg: var(--ccv-color-text);
  --_border: var(--ccv-color-surface);
}
.ccv-btn--light:hover { --_bg: #ece8e0; --_border: #ece8e0; }

.ccv-btn--outline-light {
  --_fg: var(--ccv-color-text-inverse);
  --_border: rgba(246, 244, 240, 0.4);
}
.ccv-btn--outline-light:hover { --_border: var(--ccv-color-text-inverse); }

.ccv-btn--ghost { --_fg: var(--ccv-color-text); }
.ccv-btn--ghost:hover { --_bg: var(--ccv-color-bg-muted); }

.ccv-btn--sm { padding: 0.55rem 1rem; font-size: var(--ccv-text-xs); }
.ccv-btn--lg { padding: 0.9375rem 1.75rem; font-size: var(--ccv-text-body); }
.ccv-btn--block { width: 100%; }

.ccv-btn[disabled],
.ccv-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ==========================================================================
   Arrow link — section 11
   One treatment for every "View project / Read more / See all" in the site,
   so the arrow language cannot drift page to page.
   ========================================================================== */
.ccv-link {
  display: inline-flex;
  align-items: center;
  gap: var(--ccv-space-2);
  font-size: var(--ccv-text-sm);
  font-weight: var(--ccv-weight-semibold);
  color: var(--ccv-color-accent-ink);
  transition: color var(--ccv-transition), gap var(--ccv-transition);
}

.ccv-link__icon { transition: transform var(--ccv-transition); }
.ccv-link:hover { color: var(--ccv-color-accent-hover); }
.ccv-link:hover .ccv-link__icon { transform: translateX(3px); }

.ccv-link--back:hover .ccv-link__icon { transform: translateX(-3px); }
.ccv-link--quiet { color: var(--ccv-color-text); }
.ccv-link--quiet:hover { color: var(--ccv-color-accent-ink); }
.ccv-link--inverse { color: var(--ccv-color-text-inverse); }
.ccv-link--inverse:hover { color: var(--ccv-color-accent); }

/* ==========================================================================
   Media — section 13
   The frame owns the aspect ratio and the image fills it, so a mixed-size
   CMS library cannot distort a grid or shift layout while loading.
   ========================================================================== */
.ccv-media {
  position: relative;
  overflow: hidden;
  background: var(--ccv-color-bg-muted);
  aspect-ratio: var(--ccv-ratio-landscape);
  border-radius: var(--ccv-radius);
}

.ccv-media > img,
.ccv-media > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.ccv-media--wide { aspect-ratio: var(--ccv-ratio-wide); }
.ccv-media--card { aspect-ratio: var(--ccv-ratio-card); }
.ccv-media--square { aspect-ratio: var(--ccv-ratio-square); }
.ccv-media--portrait { aspect-ratio: var(--ccv-ratio-portrait); }
.ccv-media--hero { aspect-ratio: var(--ccv-ratio-hero); }
.ccv-media--free { aspect-ratio: auto; }
.ccv-media--flat { border-radius: 0; }

/* `contain` for artwork and design renders that must not be cropped. */
.ccv-media--contain > img { object-fit: contain; }

.ccv-media__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 21, 23, 0) 35%, rgba(20, 21, 23, 0.72) 100%);
}

.ccv-media__caption {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  padding: var(--ccv-space-4);
  color: var(--ccv-color-text-inverse);
  font-size: var(--ccv-text-sm);
}

/* ==========================================================================
   Card — section 12
   One anatomy: media · eyebrow/meta · title · description · action. The
   variants below change surface and emphasis, not structure.
   ========================================================================== */
.ccv-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--ccv-color-surface);
  border: var(--ccv-border-hairline) solid var(--ccv-color-border);
  border-radius: var(--ccv-radius);
  overflow: hidden;
  transition: border-color var(--ccv-transition), box-shadow var(--ccv-transition),
              transform var(--ccv-transition);
}

.ccv-card:hover {
  border-color: var(--ccv-color-border-strong);
  box-shadow: var(--ccv-shadow-md);
}

.ccv-card .ccv-media { border-radius: 0; }

.ccv-card__media {
  position: relative;
  overflow: hidden;
}

.ccv-card__media img { transition: transform var(--ccv-duration-slow) var(--ccv-ease); }
.ccv-card:hover .ccv-card__media img { transform: scale(1.04); }

.ccv-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--ccv-space-3);
  padding: var(--ccv-space-5);
  flex: 1 1 auto;
}

.ccv-card__title {
  font-family: var(--ccv-font-display);
  font-size: var(--ccv-text-h4);
  font-weight: var(--ccv-weight-semibold);
  line-height: var(--ccv-leading-snug);
}

.ccv-card__desc {
  font-size: var(--ccv-text-sm);
  line-height: var(--ccv-leading-relaxed);
  color: var(--ccv-color-text-muted);
}

.ccv-card__foot {
  margin-block-start: auto;
  padding-block-start: var(--ccv-space-3);
}

/* The whole card is clickable, but only the title is a real link, so the
   accessible name stays meaningful and there is one tab stop, not three. */
.ccv-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.ccv-card--flat { border-color: transparent; background: transparent; }
.ccv-card--flat:hover { box-shadow: none; }

.ccv-card--dark {
  background: var(--ccv-color-bg-dark-soft);
  border-color: var(--ccv-color-border-dark);
  color: var(--ccv-color-text-inverse);
}
.ccv-card--dark .ccv-card__title { color: var(--ccv-color-text-inverse); }
.ccv-card--dark .ccv-card__desc { color: var(--ccv-color-text-inverse-muted); }

/* Icon-led card, for services and capability. */
.ccv-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--ccv-radius);
  background: var(--ccv-color-accent-soft);
  color: var(--ccv-color-accent-ink);
}

.ccv-card--dark .ccv-card__icon {
  background: rgba(200, 160, 85, 0.16);
  color: var(--ccv-color-accent);
}

/* Chip / tag, used for a category label on a card or hero. */
.ccv-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--ccv-space-2);
  padding: 0.3rem 0.7rem;
  border: var(--ccv-border-hairline) solid var(--ccv-color-border);
  border-radius: var(--ccv-radius-pill);
  background: var(--ccv-color-surface);
  font-size: var(--ccv-text-xs);
  font-weight: var(--ccv-weight-medium);
  color: var(--ccv-color-text-muted);
  transition: border-color var(--ccv-transition), color var(--ccv-transition),
              background var(--ccv-transition);
}

.ccv-chip:hover { border-color: var(--ccv-color-border-strong); color: var(--ccv-color-text); }

.ccv-chip.is-active,
.ccv-chip--selected {
  background: var(--ccv-color-text);
  border-color: var(--ccv-color-text);
  color: var(--ccv-color-text-inverse);
}

/* ==========================================================================
   Stats — the numeric strip in the homepage mockup
   ========================================================================== */
.ccv-stat { display: flex; flex-direction: column; gap: var(--ccv-space-1); }

.ccv-stat__value {
  font-family: var(--ccv-font-display);
  font-size: var(--ccv-text-h2);
  font-weight: var(--ccv-weight-bold);
  line-height: 1;
  color: var(--ccv-color-accent-ink);
}

.ccv-stat__label { font-size: var(--ccv-text-sm); color: var(--ccv-color-text-muted); }
.ccv-section--dark .ccv-stat__value { color: var(--ccv-color-accent); }

/* ==========================================================================
   Breadcrumb — section 20
   Subtle by design: it orients, it does not compete with the H1.
   ========================================================================== */
.ccv-breadcrumb { font-size: var(--ccv-text-xs); color: var(--ccv-color-text-subtle); }

.ccv-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ccv-space-2);
  list-style: none;
  padding: 0;
  margin: 0;
}

.ccv-breadcrumb__item { display: inline-flex; align-items: center; gap: var(--ccv-space-2); }

.ccv-breadcrumb__item + .ccv-breadcrumb__item::before {
  content: "/";
  color: var(--ccv-color-border-strong);
}

.ccv-breadcrumb a { transition: color var(--ccv-transition); }
.ccv-breadcrumb a:hover { color: var(--ccv-color-accent-ink); }
.ccv-breadcrumb [aria-current="page"] { color: var(--ccv-color-text); }

/* ==========================================================================
   Forms — section 21 (styles only; the contact page is a later ticket)
   ========================================================================== */
.ccv-field { display: flex; flex-direction: column; gap: var(--ccv-space-2); }

.ccv-label {
  font-size: var(--ccv-text-sm);
  font-weight: var(--ccv-weight-medium);
  color: var(--ccv-color-text);
}

.ccv-label__req { color: var(--ccv-color-danger); }

.ccv-input,
.ccv-textarea,
.ccv-select {
  width: 100%;
  padding: 0.7rem 0.875rem;
  background: var(--ccv-color-surface);
  border: var(--ccv-border-hairline) solid var(--ccv-color-border-strong);
  border-radius: var(--ccv-radius-sm);
  font-size: var(--ccv-text-sm);
  color: var(--ccv-color-text);
  transition: border-color var(--ccv-transition), box-shadow var(--ccv-transition);
}

.ccv-input::placeholder,
.ccv-textarea::placeholder { color: var(--ccv-color-text-subtle); }

.ccv-input:hover,
.ccv-textarea:hover,
.ccv-select:hover { border-color: var(--ccv-color-text-subtle); }

.ccv-input:focus,
.ccv-textarea:focus,
.ccv-select:focus {
  outline: none;
  border-color: var(--ccv-color-accent);
  box-shadow: 0 0 0 3px rgba(200, 160, 85, 0.18);
}

.ccv-textarea { min-height: 8rem; resize: vertical; }

.ccv-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236a655e' stroke-width='1.5' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  padding-inline-end: 2.25rem;
}

.ccv-check {
  display: flex;
  align-items: flex-start;
  gap: var(--ccv-space-3);
  font-size: var(--ccv-text-sm);
  color: var(--ccv-color-text-muted);
}

.ccv-check input {
  margin-block-start: 0.15rem;
  width: 1rem;
  height: 1rem;
  accent-color: var(--ccv-color-accent);
  flex: 0 0 auto;
}

.ccv-help { font-size: var(--ccv-text-xs); color: var(--ccv-color-text-subtle); }
.ccv-error { font-size: var(--ccv-text-xs); color: var(--ccv-color-danger); }

.ccv-field--invalid .ccv-input,
.ccv-field--invalid .ccv-textarea,
.ccv-field--invalid .ccv-select { border-color: var(--ccv-color-danger); }

.ccv-notice {
  padding: var(--ccv-space-4) var(--ccv-space-5);
  border: var(--ccv-border-hairline) solid transparent;
  border-radius: var(--ccv-radius-sm);
  font-size: var(--ccv-text-sm);
}

.ccv-notice--error {
  background: var(--ccv-color-danger-bg);
  border-color: rgba(180, 35, 24, 0.25);
  color: var(--ccv-color-danger);
}

.ccv-notice--success {
  background: var(--ccv-color-success-bg);
  border-color: rgba(5, 113, 63, 0.25);
  color: var(--ccv-color-success);
}

/* ==========================================================================
   Pagination
   ========================================================================== */
.ccv-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--ccv-space-2);
}

.ccv-pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding-inline: var(--ccv-space-3);
  border: var(--ccv-border-hairline) solid var(--ccv-color-border);
  border-radius: var(--ccv-radius-sm);
  font-size: var(--ccv-text-sm);
  color: var(--ccv-color-text-muted);
  transition: border-color var(--ccv-transition), color var(--ccv-transition),
              background var(--ccv-transition);
}

.ccv-pagination__link:hover { border-color: var(--ccv-color-text); color: var(--ccv-color-text); }

.ccv-pagination__link.is-active {
  background: var(--ccv-color-text);
  border-color: var(--ccv-color-text);
  color: var(--ccv-color-text-inverse);
}

/* ===== ds/60-shell.css ===== */
/* ==========================================================================
   CCV-PHASE-14A — Global shell: header, footer, CTA band

   Section 14-19. The header is the piece the owner called out specifically:
   larger clearer logo, more prominent navigation, every item at one weight
   and colour, a polished active state, gold used selectively, and a CTA that
   is strong without being oversized.
   ========================================================================== */

/* ==========================================================================
   Header
   ========================================================================== */
.ccv-header {
  position: sticky;
  top: 0;
  z-index: var(--ccv-z-sticky);
  background: rgba(250, 248, 244, 0.92);
  backdrop-filter: saturate(1.4) blur(12px);
  border-block-end: var(--ccv-border-hairline) solid transparent;
  transition: border-color var(--ccv-transition), background var(--ccv-transition);
}

/* The hairline appears only once the page has moved, so a hero that runs
   under the header is not cut by a line at rest. Toggled by ccv-enhance.js. */
.ccv-header.is-stuck {
  border-block-end-color: var(--ccv-color-border);
  background: rgba(250, 248, 244, 0.97);
}

.ccv-header__inner {
  max-width: var(--ccv-container-wide);
  margin-inline: auto;
  padding-inline: var(--ccv-gutter);
  min-height: var(--ccv-header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ccv-space-5);
}

/* ---------- Brand --------------------------------------------------------- */
.ccv-header__brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.ccv-ds .ccv-header__logo {
  width: auto;
  height: 3rem;            /* owner: larger and clearer than the legacy mark */
  object-fit: contain;
}

@media (min-width: 75rem) {
  .ccv-ds .ccv-header__logo { height: 3.5rem; }
}

.ccv-header__brand-text {
  font-family: var(--ccv-font-display);
  font-size: var(--ccv-text-h4);
  font-weight: var(--ccv-weight-bold);
  letter-spacing: var(--ccv-tracking-tight);
}

/* ---------- Navigation ---------------------------------------------------- */
.ccv-header__nav { display: contents; }

.ccv-nav-list {
  display: none;
  align-items: center;
  gap: var(--ccv-space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 64rem) {
  .ccv-nav-list { display: flex; }
}

.ccv-nav-item { position: relative; }

/* One weight, one colour for every item - links and dropdown buttons alike. */
.ccv-nav-link {
  display: inline-flex;
  align-items: center;
  gap: var(--ccv-space-2);
  padding: 0.5rem 0.75rem;
  border: 0;
  background: none;
  font-family: var(--ccv-font-body);
  font-size: var(--ccv-text-sm);
  font-weight: var(--ccv-weight-medium);
  line-height: 1.4;
  color: var(--ccv-color-text);
  cursor: pointer;
  position: relative;
  transition: color var(--ccv-transition);
}

.ccv-nav-link:hover { color: var(--ccv-color-accent-ink); }

/* Active state: a short gold rule under the label. */
.ccv-nav-link::after {
  content: "";
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.1rem;
  height: 2px;
  border-radius: 2px;
  background: var(--ccv-color-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--ccv-transition);
}

.ccv-nav-link.is-active { color: var(--ccv-color-text); }
.ccv-nav-link.is-active::after { transform: scaleX(1); }

.ccv-nav-caret {
  width: 0.6rem;
  height: 0.6rem;
  transition: transform var(--ccv-transition);
  color: var(--ccv-color-text-subtle);
}

.ccv-nav-item.is-open > .ccv-nav-link .ccv-nav-caret { transform: rotate(180deg); }

/* ---------- Dropdown ------------------------------------------------------ */
.ccv-nav-sub {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  z-index: var(--ccv-z-dropdown);
  min-width: 14rem;
  padding: var(--ccv-space-2);
  margin: 0;
  list-style: none;
  background: var(--ccv-color-surface);
  border: var(--ccv-border-hairline) solid var(--ccv-color-border);
  border-radius: var(--ccv-radius);
  box-shadow: var(--ccv-shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--ccv-transition), transform var(--ccv-transition),
              visibility var(--ccv-transition);
}

/* Opens on hover for pointers and on click/keyboard via `.is-open`, so the
   menu is reachable without a mouse (section 16). */
@media (min-width: 64rem) {
  .ccv-nav-item:hover > .ccv-nav-sub,
  .ccv-nav-item:focus-within > .ccv-nav-sub,
  .ccv-nav-item.is-open > .ccv-nav-sub {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

.ccv-nav-sublink {
  display: block;
  padding: 0.55rem 0.75rem;
  border-radius: var(--ccv-radius-sm);
  font-size: var(--ccv-text-sm);
  color: var(--ccv-color-text-muted);
  white-space: nowrap;
  transition: background var(--ccv-transition), color var(--ccv-transition);
}

.ccv-nav-sublink:hover { background: var(--ccv-color-bg-muted); color: var(--ccv-color-text); }

.ccv-nav-sublink.is-active {
  color: var(--ccv-color-text);
  font-weight: var(--ccv-weight-semibold);
}

/* ---------- Tools: language switch + CTA ---------------------------------- */
.ccv-header__tools {
  display: flex;
  align-items: center;
  gap: var(--ccv-space-4);
  flex: 0 0 auto;
}

.ccv-lang {
  display: inline-flex;
  align-items: center;
  gap: var(--ccv-space-2);
  font-size: var(--ccv-text-xs);
  font-weight: var(--ccv-weight-semibold);
  letter-spacing: 0.04em;
}

.ccv-lang__link {
  color: var(--ccv-color-text-subtle);
  transition: color var(--ccv-transition);
}

.ccv-lang__link:hover { color: var(--ccv-color-text); }
.ccv-lang__link.is-active { color: var(--ccv-color-accent-ink); }
.ccv-lang__sep { color: var(--ccv-color-border-strong); }

.ccv-header__cta { display: none; }

@media (min-width: 64rem) {
  .ccv-header__cta { display: inline-flex; }
}

/* ---------- Mobile toggle -------------------------------------------------- */
.ccv-header__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: var(--ccv-border-hairline) solid var(--ccv-color-border);
  border-radius: var(--ccv-radius-sm);
  background: transparent;
  color: var(--ccv-color-text);
  cursor: pointer;
}

@media (min-width: 64rem) {
  .ccv-header__toggle { display: none; }
}

.ccv-header__toggle-bars,
.ccv-header__toggle-bars::before,
.ccv-header__toggle-bars::after {
  display: block;
  width: 1.125rem;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--ccv-transition), opacity var(--ccv-transition);
}

.ccv-header__toggle-bars::before,
.ccv-header__toggle-bars::after {
  content: "";
  position: relative;
}

.ccv-header__toggle-bars::before { top: -6px; }
.ccv-header__toggle-bars::after { top: 4px; }

.ccv-header__toggle[aria-expanded="true"] .ccv-header__toggle-bars { background: transparent; }
.ccv-header__toggle[aria-expanded="true"] .ccv-header__toggle-bars::before { transform: translateY(6px) rotate(45deg); }
.ccv-header__toggle[aria-expanded="true"] .ccv-header__toggle-bars::after { transform: translateY(-4px) rotate(-45deg); }

/* ---------- Mobile panel --------------------------------------------------- */
.ccv-mobile-nav {
  display: none;
  border-block-start: var(--ccv-border-hairline) solid var(--ccv-color-border);
  background: var(--ccv-color-bg);
  max-height: calc(100dvh - var(--ccv-header-h));
  overflow-y: auto;
}

.ccv-mobile-nav.is-open { display: block; }

@media (min-width: 64rem) {
  .ccv-mobile-nav,
  .ccv-mobile-nav.is-open { display: none; }
}

.ccv-mobile-nav__inner {
  padding: var(--ccv-space-5) var(--ccv-gutter) var(--ccv-space-8);
  display: flex;
  flex-direction: column;
  gap: var(--ccv-space-2);
}

.ccv-mobile-nav__list { list-style: none; margin: 0; padding: 0; }

.ccv-mobile-nav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ccv-space-3);
  width: 100%;
  padding: 0.875rem 0;
  border: 0;
  background: none;
  border-block-end: var(--ccv-border-hairline) solid var(--ccv-color-border);
  font-family: var(--ccv-font-body);
  font-size: var(--ccv-text-body);
  font-weight: var(--ccv-weight-medium);
  color: var(--ccv-color-text);
  text-align: start;
  cursor: pointer;
}

.ccv-mobile-nav__link.is-active { color: var(--ccv-color-accent-ink); }

.ccv-mobile-nav__sub {
  list-style: none;
  margin: 0;
  padding: 0 0 var(--ccv-space-3) var(--ccv-space-4);
  display: none;
}

.ccv-mobile-nav__item.is-open > .ccv-mobile-nav__sub { display: block; }

.ccv-mobile-nav__sublink {
  display: block;
  padding: 0.625rem 0;
  font-size: var(--ccv-text-sm);
  color: var(--ccv-color-text-muted);
}

.ccv-mobile-nav__sublink.is-active { color: var(--ccv-color-text); font-weight: var(--ccv-weight-semibold); }

.ccv-mobile-nav__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ccv-space-4);
  padding-block-start: var(--ccv-space-5);
}

/* ==========================================================================
   CTA band — section 19
   One markup block, reused by every page that needs a consultation prompt.
   ========================================================================== */
.ccv-cta {
  position: relative;
  overflow: hidden;
  background: var(--ccv-color-bg-dark);
  color: var(--ccv-color-text-inverse);
  border-radius: var(--ccv-radius-lg);
  padding: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
}

.ccv-cta__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ccv-space-6);
}

.ccv-cta__copy { display: flex; flex-direction: column; gap: var(--ccv-space-3); max-width: 42rem; }
.ccv-cta__title { font-size: var(--ccv-text-h3); color: var(--ccv-color-text-inverse); }
.ccv-cta__desc { color: var(--ccv-color-text-inverse-muted); font-size: var(--ccv-text-sm); line-height: var(--ccv-leading-relaxed); }

/* A single faint gold arc, the restrained echo of the brand motif in the
   mockups. Decorative only, so it is hidden from assistive technology. */
.ccv-cta__flourish {
  position: absolute;
  inset-block: 0;
  inset-inline-end: -4rem;
  width: 26rem;
  opacity: 0.14;
  color: var(--ccv-color-accent);
  pointer-events: none;
}

/* The same mark is also used as a rule under a centred section heading, where
   the CTA band's absolute, over-wide placement would push it out of the
   viewport. There it becomes an ordinary centred flourish. */
.ccv-section__head .ccv-cta__flourish {
  position: static;
  inset: auto;
  display: block;
  width: min(16rem, 55%);
  height: auto;
  margin: var(--ccv-space-4) auto 0;
  opacity: 0.35;
}

.ccv-cta--flush { border-radius: 0; }

/* ==========================================================================
   Footer — section 18
   Substantial without being cluttered: a brand column, three link columns,
   a contact column, then a thin legal rule.
   ========================================================================== */
.ccv-footer {
  background: var(--ccv-color-bg-dark);
  color: var(--ccv-color-text-inverse-muted);
  font-size: var(--ccv-text-sm);
}

.ccv-footer__inner {
  max-width: var(--ccv-container-wide);
  margin-inline: auto;
  padding: var(--ccv-space-10) var(--ccv-gutter) var(--ccv-space-6);
}

.ccv-footer__grid {
  display: grid;
  gap: var(--ccv-space-8);
  grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
  .ccv-footer__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 64rem) {
  .ccv-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: var(--ccv-space-9); }
}

.ccv-footer__brand { display: flex; flex-direction: column; gap: var(--ccv-space-4); }

.ccv-ds .ccv-footer__logo { height: 2.5rem; width: auto; object-fit: contain; }

.ccv-footer__about { line-height: var(--ccv-leading-relaxed); max-width: 26rem; }

.ccv-footer__title {
  font-family: var(--ccv-font-display);
  font-size: var(--ccv-text-xs);
  font-weight: var(--ccv-weight-semibold);
  letter-spacing: var(--ccv-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ccv-color-text-inverse);
  margin-block-end: var(--ccv-space-4);
}

.ccv-footer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--ccv-space-3); }

.ccv-footer__link { transition: color var(--ccv-transition); }
.ccv-footer__link:hover { color: var(--ccv-color-accent); }

.ccv-footer__contact { display: flex; flex-direction: column; gap: var(--ccv-space-4); }

.ccv-footer__contact-item {
  display: flex;
  align-items: flex-start;
  gap: var(--ccv-space-3);
  line-height: var(--ccv-leading-normal);
}

.ccv-footer__contact-icon { flex: 0 0 auto; margin-block-start: 0.15rem; color: var(--ccv-color-accent); }

.ccv-footer__social { display: flex; gap: var(--ccv-space-3); }

.ccv-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: var(--ccv-border-hairline) solid var(--ccv-color-border-dark);
  border-radius: var(--ccv-radius-pill);
  color: var(--ccv-color-text-inverse-muted);
  transition: border-color var(--ccv-transition), color var(--ccv-transition),
              background var(--ccv-transition);
}

.ccv-footer__social-link:hover {
  border-color: var(--ccv-color-accent);
  background: var(--ccv-color-accent);
  color: var(--ccv-color-text);
}

.ccv-footer__legal {
  margin-block-start: var(--ccv-space-8);
  padding-block-start: var(--ccv-space-5);
  border-block-start: var(--ccv-border-hairline) solid var(--ccv-color-border-dark);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ccv-space-4);
  font-size: var(--ccv-text-xs);
}

.ccv-footer__legal-links { display: flex; flex-wrap: wrap; gap: var(--ccv-space-5); }

/* ---------- Back to top ---------------------------------------------------- */
.ccv-to-top {
  position: fixed;
  inset-inline-end: var(--ccv-space-5);
  inset-block-end: var(--ccv-space-5);
  z-index: var(--ccv-z-raised);
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--ccv-radius-pill);
  background: var(--ccv-color-accent);
  color: var(--ccv-color-text);
  box-shadow: var(--ccv-shadow-md);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--ccv-transition), transform var(--ccv-transition),
              visibility var(--ccv-transition), background var(--ccv-transition);
}

.ccv-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.ccv-to-top:hover { background: var(--ccv-color-accent-hover); }

/* ===== ds/70-page-home.css ===== */
/* ==========================================================================
   CCV-PHASE-14B-R1 — Homepage composition

   Page-scoped by the `ccv-home-` prefix. The 14A component classes do the
   ordinary work (buttons, cards, media frames, grids); this layer supplies
   only the compositions the homepage mockup needs and no other page has:
   the full-bleed hero, the metrics panel, the image-backed service cards, the
   industry band and the dark capability band.

   Section 11 of the ticket asks for deliberate alternation rather than a page
   of near-identical white bands, so each section here declares its own ground.
   ========================================================================== */

/* ==========================================================================
   1. HERO
   Full-bleed, image-dominant, tall. The mockup's hero is the page's single
   strongest element; the previous build read as a small content banner.
   ========================================================================== */
.ccv-home-hero {
  position: relative;
  isolation: isolate;
  /* The CMS banner assets are 1600x427. A 44rem hero would upscale them 1.65x
     and read soft, so the hero is sized to hold the mockup's presence while
     keeping the upscale near 1.3x. Larger source art (≈1920x1080) would let
     this grow - flagged in the phase report. */
  min-height: clamp(26rem, 19rem + 26vh, 36rem);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--ccv-color-bg-dark);
  /* Sits under the sticky header, which is why the header hairline only
     appears once the page scrolls. */
  margin-block-start: calc(var(--ccv-header-h) * -1);
  padding-block-start: var(--ccv-header-h);
}

.ccv-home-hero__slides {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.ccv-home-hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--ccv-duration-slow) var(--ccv-ease);
}

.ccv-home-hero__slide.is-active { opacity: 1; }

.ccv-home-hero__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Two stops: a strong wash from the left for the copy, and a floor gradient so
   the caption and controls stay legible over a bright booth photo. */
.ccv-home-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(14, 15, 16, 0.88) 0%, rgba(14, 15, 16, 0.62) 34%, rgba(14, 15, 16, 0.12) 66%, rgba(14, 15, 16, 0) 100%),
    linear-gradient(180deg, rgba(14, 15, 16, 0.5) 0%, rgba(14, 15, 16, 0.06) 38%, rgba(14, 15, 16, 0.72) 100%);
}

.ccv-home-hero__inner {
  position: relative;
  width: 100%;
  max-width: var(--ccv-container-wide);
  margin-inline: auto;
  padding: var(--ccv-space-10) var(--ccv-gutter) var(--ccv-space-8);
}

.ccv-home-hero__copy {
  max-width: 46rem;
  display: flex;
  flex-direction: column;
  gap: var(--ccv-space-5);
  color: var(--ccv-color-text-inverse);
}

.ccv-home-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--ccv-space-2);
  font-size: var(--ccv-text-eyebrow);
  font-weight: var(--ccv-weight-semibold);
  letter-spacing: var(--ccv-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ccv-color-accent);
}

.ccv-home-hero__title {
  font-family: var(--ccv-font-display);
  font-size: clamp(2.25rem, 1.2rem + 4.4vw, 4rem);
  font-weight: var(--ccv-weight-bold);
  line-height: 1.06;
  letter-spacing: var(--ccv-tracking-tight);
  color: var(--ccv-color-text-inverse);
  margin: 0;
  text-wrap: balance;
}

/* The gold second line from the mockup. */
.ccv-home-hero__title em {
  display: block;
  font-style: normal;
  color: var(--ccv-color-accent);
}

.ccv-home-hero__lead {
  font-size: clamp(1rem, 0.94rem + 0.35vw, 1.1875rem);
  line-height: var(--ccv-leading-normal);
  color: rgba(246, 244, 240, 0.86);
  max-width: 36rem;
  margin: 0;
}

/* ---------- Value markers -------------------------------------------------- */
.ccv-home-hero__values {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ccv-space-4) var(--ccv-space-6);
  padding: 0;
  margin: var(--ccv-space-1) 0 0;
  list-style: none;
}

.ccv-home-hero__value {
  display: inline-flex;
  align-items: center;
  gap: var(--ccv-space-2);
  font-size: var(--ccv-text-sm);
  font-weight: var(--ccv-weight-medium);
  color: rgba(246, 244, 240, 0.94);
}

.ccv-home-hero__value svg { color: var(--ccv-color-accent); }

/* Phase 15B: each slide has its own headline, sub-headline and buttons, so
   the copy is wrapped per slide and only the active set is shown. The wrapper
   carries the gap the two elements used to get from `.ccv-home-hero__copy`. */
.ccv-home-hero__copyset {
  display: flex;
  flex-direction: column;
  gap: var(--ccv-space-5);
}

.ccv-home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ccv-space-4);
  margin-block-start: var(--ccv-space-2);
}

/* A `display` declaration beats the user agent's `[hidden] { display: none }`,
   so an explicit rule is required or every slide's buttons stay on screen at
   once — which is exactly what happened here. */
.ccv-home-hero__copyset[hidden],
.ccv-home-hero__actions[hidden] { display: none; }

/* ---------- Caption + controls --------------------------------------------- */
.ccv-home-hero__foot {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--ccv-space-5);
  margin-block-start: var(--ccv-space-9);
  flex-wrap: wrap;
}

.ccv-home-hero__caption {
  margin-inline-start: auto;
  text-align: end;
  color: rgba(246, 244, 240, 0.92);
  font-size: var(--ccv-text-sm);
  line-height: var(--ccv-leading-snug);
  max-width: 22rem;
}

.ccv-home-hero__caption b {
  display: block;
  font-weight: var(--ccv-weight-semibold);
}

.ccv-home-hero__caption span { color: rgba(246, 244, 240, 0.66); }

.ccv-home-hero__controls {
  display: flex;
  align-items: center;
  gap: var(--ccv-space-3);
}

.ccv-home-hero__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid rgba(246, 244, 240, 0.35);
  border-radius: var(--ccv-radius-pill);
  background: rgba(14, 15, 16, 0.35);
  color: var(--ccv-color-text-inverse);
  cursor: pointer;
  transition: border-color var(--ccv-transition), background var(--ccv-transition);
}

.ccv-home-hero__arrow:hover {
  border-color: var(--ccv-color-accent);
  background: rgba(200, 160, 85, 0.25);
}

.ccv-home-hero__dots {
  display: flex;
  align-items: center;
  gap: var(--ccv-space-2);
  padding: 0;
  margin: 0;
  list-style: none;
}

.ccv-home-hero__dot {
  width: 0.5rem;
  height: 0.5rem;
  padding: 0;
  border: 0;
  border-radius: var(--ccv-radius-pill);
  background: rgba(246, 244, 240, 0.4);
  cursor: pointer;
  transition: width var(--ccv-transition), background var(--ccv-transition);
}

.ccv-home-hero__dot.is-active {
  width: 1.5rem;
  background: var(--ccv-color-accent);
}

@media (max-width: 47.99rem) {
  .ccv-home-hero__caption { margin-inline-start: 0; text-align: start; }
  .ccv-home-hero__foot { margin-block-start: var(--ccv-space-7); }
  .ccv-home-hero__actions .ccv-btn { flex: 1 1 12rem; }
}

/* ==========================================================================
   2. ABOUT — copy left, metrics panel right
   ========================================================================== */
.ccv-home-about { background: var(--ccv-color-bg); }

.ccv-home-about__grid {
  display: grid;
  gap: var(--ccv-space-8);
  align-items: center;
}

@media (min-width: 64rem) {
  .ccv-home-about__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--ccv-space-10);
  }
}

.ccv-home-metrics {
  position: relative;
  background: var(--ccv-color-surface);
  border: var(--ccv-border-hairline) solid var(--ccv-color-border);
  border-radius: var(--ccv-radius-lg);
  box-shadow: var(--ccv-shadow-sm);
  padding: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--ccv-space-7) var(--ccv-space-6);
}

.ccv-home-metric {
  display: flex;
  flex-direction: column;
  gap: var(--ccv-space-2);
}

.ccv-home-metric__icon { color: var(--ccv-color-accent); }

.ccv-home-metric__value {
  font-family: var(--ccv-font-display);
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.375rem);
  font-weight: var(--ccv-weight-bold);
  line-height: 1;
  letter-spacing: var(--ccv-tracking-tight);
}

.ccv-home-metric__label {
  font-size: var(--ccv-text-sm);
  color: var(--ccv-color-text-muted);
  line-height: var(--ccv-leading-snug);
}

/* A hairline cross between the four cells, as in the mockup. */
@media (min-width: 30rem) {
  .ccv-home-metric:nth-child(odd) {
    padding-inline-end: var(--ccv-space-6);
    border-inline-end: var(--ccv-border-hairline) solid var(--ccv-color-border);
  }
  .ccv-home-metric:nth-child(n + 3) {
    padding-block-start: var(--ccv-space-7);
    border-block-start: var(--ccv-border-hairline) solid var(--ccv-color-border);
    margin-block-start: calc(var(--ccv-space-7) * -1);
  }
}

@media (max-width: 29.99rem) {
  .ccv-home-metrics { grid-template-columns: 1fr; }
}

/* ==========================================================================
   3. SERVICES — five image-backed cards
   ========================================================================== */
.ccv-home-services { background: var(--ccv-color-surface); }

.ccv-home-services__grid {
  display: grid;
  gap: var(--ccv-space-5);
  grid-template-columns: 1fr;
}

@media (min-width: 40rem) { .ccv-home-services__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .ccv-home-services__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 80rem) { .ccv-home-services__grid { grid-template-columns: repeat(5, 1fr); } }

.ccv-home-service {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 22rem;
  background: var(--ccv-color-bg);
  border: var(--ccv-border-hairline) solid var(--ccv-color-border);
  border-radius: var(--ccv-radius);
  overflow: hidden;
  transition: border-color var(--ccv-transition), box-shadow var(--ccv-transition);
}

.ccv-home-service:hover {
  border-color: var(--ccv-color-border-strong);
  box-shadow: var(--ccv-shadow-md);
}

.ccv-home-service__body {
  display: flex;
  flex-direction: column;
  gap: var(--ccv-space-3);
  padding: var(--ccv-space-5) var(--ccv-space-5) var(--ccv-space-4);
}

.ccv-home-service__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--ccv-radius);
  background: var(--ccv-color-accent-soft);
  color: var(--ccv-color-accent-ink);
}

.ccv-home-service__title {
  font-family: var(--ccv-font-display);
  font-size: var(--ccv-text-h4);
  font-weight: var(--ccv-weight-semibold);
  line-height: var(--ccv-leading-snug);
}

.ccv-home-service__desc {
  font-size: var(--ccv-text-sm);
  line-height: var(--ccv-leading-normal);
  color: var(--ccv-color-text-muted);
}

/* The supporting photograph anchors the card, as in the mockup. */
.ccv-home-service__media {
  margin-block-start: auto;
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--ccv-color-bg-muted);
}

.ccv-home-service__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--ccv-duration-slow) var(--ccv-ease);
}

.ccv-home-service:hover .ccv-home-service__media img { transform: scale(1.05); }

.ccv-home-service__go {
  position: absolute;
  inset-inline-end: var(--ccv-space-4);
  inset-block-end: var(--ccv-space-4);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--ccv-radius-pill);
  background: var(--ccv-color-surface);
  color: var(--ccv-color-text);
  box-shadow: var(--ccv-shadow-sm);
  transition: background var(--ccv-transition), color var(--ccv-transition),
              transform var(--ccv-transition);
}

.ccv-home-service:hover .ccv-home-service__go {
  background: var(--ccv-color-accent);
  transform: translateX(3px);
}

.ccv-home-service__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }

/* ==========================================================================
   4. INDUSTRY SOLUTION — large visual band
   ========================================================================== */
.ccv-home-industry {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--ccv-color-bg-muted);
}

.ccv-home-industry__grid {
  display: grid;
  gap: var(--ccv-space-8);
  align-items: center;
}

@media (min-width: 64rem) {
  .ccv-home-industry__grid {
    grid-template-columns: 0.9fr 1.1fr;
    gap: var(--ccv-space-10);
  }
}

.ccv-home-industry__copy {
  display: flex;
  flex-direction: column;
  gap: var(--ccv-space-5);
}

/* The booth image is a large object, as in the mockup, rather than a
   full-bleed wash. The CMS serves this art at 500px; presenting it at panel
   size instead of stretching it across the viewport keeps it sharp. */
.ccv-home-industry__figure {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--ccv-radius-lg);
  overflow: hidden;
  background: var(--ccv-color-surface);
  box-shadow: var(--ccv-shadow-lg);
}

.ccv-home-industry__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The benefit strip that sits across the foot of the band. */
.ccv-home-benefits {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ccv-space-1);
  margin-block-start: var(--ccv-space-9);
  background: var(--ccv-color-surface);
  border: var(--ccv-border-hairline) solid var(--ccv-color-border);
  border-radius: var(--ccv-radius-lg);
  box-shadow: var(--ccv-shadow-sm);
  overflow: hidden;
}

@media (min-width: 48rem) { .ccv-home-benefits { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .ccv-home-benefits { grid-template-columns: repeat(4, 1fr); } }

.ccv-home-benefit {
  display: flex;
  align-items: center;
  gap: var(--ccv-space-4);
  padding: var(--ccv-space-5);
}

@media (min-width: 64rem) {
  .ccv-home-benefit + .ccv-home-benefit {
    border-inline-start: var(--ccv-border-hairline) solid var(--ccv-color-border);
  }
}

.ccv-home-benefit__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 auto;
  border-radius: var(--ccv-radius);
  background: var(--ccv-color-accent-soft);
  color: var(--ccv-color-accent-ink);
}

.ccv-home-benefit__title {
  font-size: var(--ccv-text-sm);
  font-weight: var(--ccv-weight-semibold);
  line-height: var(--ccv-leading-snug);
}

.ccv-home-benefit__desc {
  font-size: var(--ccv-text-xs);
  color: var(--ccv-color-text-muted);
}

/* ==========================================================================
   5. FEATURED PROJECTS — four large cards
   ========================================================================== */
.ccv-home-projects { background: var(--ccv-color-surface); }

.ccv-home-projects__grid {
  display: grid;
  gap: var(--ccv-space-5);
  grid-template-columns: 1fr;
}

@media (min-width: 40rem) { .ccv-home-projects__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 75rem) { .ccv-home-projects__grid { grid-template-columns: repeat(4, 1fr); } }

/* Grid children stretch, so every card is the same height as the tallest.
   The pieces inside then have to be predictable too, or the titles and the
   arrows sit at different heights from card to card. */
.ccv-home-project {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.ccv-home-project__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--ccv-radius);
  background: var(--ccv-color-bg-muted);
}

.ccv-home-project__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--ccv-duration-slow) var(--ccv-ease);
}

.ccv-home-project:hover .ccv-home-project__media img { transform: scale(1.05); }

.ccv-home-project__body {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ccv-space-4);
  padding-block-start: var(--ccv-space-4);
  flex: 1 1 auto;
}

/* Two lines, always. The clamp cuts a long project name; the matching
   min-height reserves the second line for a short one, so all four titles
   occupy the same band and the category sits on one baseline across the row. */
.ccv-home-project__title {
  font-family: var(--ccv-font-display);
  font-size: 1rem;
  font-weight: var(--ccv-weight-semibold);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  min-height: calc(1rem * 1.35 * 2);
}

@media (min-width: 75rem) {
  .ccv-home-project__title { font-size: 1.0625rem; min-height: calc(1.0625rem * 1.35 * 2); }
}

.ccv-home-project__cat {
  display: block;
  margin-block-start: var(--ccv-space-2);
  font-size: var(--ccv-text-xs);
  color: var(--ccv-color-text-subtle);
}

.ccv-home-project__go {
  flex: 0 0 auto;
  color: var(--ccv-color-text-subtle);
  transition: color var(--ccv-transition), transform var(--ccv-transition);
}

.ccv-home-project:hover .ccv-home-project__go {
  color: var(--ccv-color-accent-ink);
  transform: translateX(3px);
}

.ccv-home-project__link::after { content: ""; position: absolute; inset: 0; }

/* ==========================================================================
   6. CAPABILITY — dark immersive band
   ========================================================================== */
.ccv-home-capability {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--ccv-color-bg-dark);
  color: var(--ccv-color-text-inverse);
}

.ccv-home-capability__bg { position: absolute; inset: 0; z-index: -2; }

/* Desaturated and softened. Some CMS project photos carry a large "Special
   Booth" caption baked into the artwork; at full fidelity that reads as
   content behind the heading rather than as texture. Blur plus grayscale
   turns it back into a backdrop, whichever project happens to be newest. */
.ccv-home-capability__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) blur(14px) brightness(0.5);
  transform: scale(1.12); /* hides the blur's soft edge */
}

.ccv-home-capability__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(18, 19, 20, 0.97) 0%, rgba(18, 19, 20, 0.93) 50%, rgba(18, 19, 20, 0.98) 100%);
}

/* The band paints its own dark ground rather than using .ccv-section--dark,
   because that modifier also sets a flat background and would cover the photo.
   The inverse ink rules therefore have to be restated here: without them the
   heading inherits `:where(.ccv-ds) h2`'s dark colour and disappears. */
.ccv-home-capability h2,
.ccv-home-capability h3,
.ccv-home-capability .ccv-h2 {
  color: var(--ccv-color-text-inverse);
}

.ccv-home-capability .ccv-section__desc {
  color: var(--ccv-color-text-inverse-muted);
}

.ccv-home-capability .ccv-eyebrow {
  color: var(--ccv-color-accent);
}

.ccv-home-capability__grid {
  display: grid;
  gap: var(--ccv-space-5);
  grid-template-columns: 1fr;
}

@media (min-width: 40rem) { .ccv-home-capability__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .ccv-home-capability__grid { grid-template-columns: repeat(4, 1fr); } }

/* Dark-glass card, as in the mockup. */
.ccv-home-cap-card {
  display: flex;
  flex-direction: column;
  gap: var(--ccv-space-3);
  padding: var(--ccv-space-6) var(--ccv-space-5);
  min-height: 12rem;
  background: rgba(255, 255, 255, 0.045);
  border: var(--ccv-border-hairline) solid rgba(246, 244, 240, 0.16);
  border-radius: var(--ccv-radius);
  backdrop-filter: blur(2px);
  transition: border-color var(--ccv-transition), background var(--ccv-transition);
}

.ccv-home-cap-card:hover {
  border-color: rgba(200, 160, 85, 0.6);
  background: rgba(255, 255, 255, 0.07);
}

.ccv-home-cap-card__icon { color: var(--ccv-color-accent); }

.ccv-home-cap-card__title {
  font-family: var(--ccv-font-display);
  font-size: var(--ccv-text-h4);
  font-weight: var(--ccv-weight-semibold);
  color: var(--ccv-color-text-inverse);
}

.ccv-home-cap-card__desc {
  font-size: var(--ccv-text-sm);
  line-height: var(--ccv-leading-normal);
  color: var(--ccv-color-text-inverse-muted);
}

/* ==========================================================================
   7. NEWS — three large editorial cards
   ========================================================================== */
.ccv-home-news { background: var(--ccv-color-bg); }

.ccv-home-news__grid {
  display: grid;
  gap: var(--ccv-space-5);
  grid-template-columns: 1fr;
}

@media (min-width: 40rem) { .ccv-home-news__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .ccv-home-news__grid { grid-template-columns: repeat(3, 1fr); } }

.ccv-home-news .ccv-card__media { aspect-ratio: 16 / 10; }

/* The card is already a flex column that stretches to the row height, so the
   "Đọc thêm" foot lines up once the two variable blocks above it are fixed:
   the title to two lines and the excerpt to three. */
.ccv-home-news .ccv-card__title {
  font-size: 1.0625rem;
  line-height: 1.35;
  min-height: calc(1.0625rem * 1.35 * 2);
}

.ccv-home-news .ccv-card__desc {
  min-height: calc(var(--ccv-text-sm) * var(--ccv-leading-relaxed) * 3);
}

@media (min-width: 64rem) {
  .ccv-home-news .ccv-card__title {
    font-size: 1.125rem;
    min-height: calc(1.125rem * 1.35 * 2);
  }
}

/* ===== ds/80-page-services.css ===== */
/* ==========================================================================
   CCV-PHASE-14C — Services hub composition

   Page-scoped by the `ccv-svc-` prefix. The 14A components do the ordinary
   work; this layer supplies the four compositions the approved Services
   mockup needs: the integrated hero, the five-card service row, the process
   band and the project row.
   ========================================================================== */

/* ==========================================================================
   1. HERO — one integrated composition, not a 50/50 card
   ========================================================================== */
.ccv-svc-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--ccv-color-bg);
  margin-block-start: calc(var(--ccv-header-h) * -1);
  padding-block: calc(var(--ccv-header-h) + var(--ccv-space-7)) var(--ccv-space-9);
  min-height: clamp(26rem, 19rem + 24vh, 36rem);
  display: flex;
  align-items: center;
}

/* The booth photograph bleeds off the right edge and stays dominant. */
.ccv-svc-hero__media {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: 72%;
  z-index: -2;
}

.ccv-svc-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* A light wash, not a dark scrim: the mockup's hero is bright, and the copy
   sits on the page ground rather than on the photograph. */
.ccv-svc-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* A long fade. A short one made the photograph appear to start at a
     vertical seam rather than emerging out of the page ground. */
  background: linear-gradient(
    90deg,
    var(--ccv-color-bg) 0%,
    var(--ccv-color-bg) 26%,
    rgba(250, 248, 244, 0.94) 38%,
    rgba(250, 248, 244, 0.62) 52%,
    rgba(250, 248, 244, 0.18) 68%,
    rgba(250, 248, 244, 0) 82%
  );
}

@media (max-width: 63.99rem) {
  .ccv-svc-hero__media { width: 100%; opacity: 0.5; }
  .ccv-svc-hero__scrim {
    background: linear-gradient(180deg, rgba(250, 248, 244, 0.9) 0%, rgba(250, 248, 244, 0.82) 55%, var(--ccv-color-bg) 100%);
  }
}

.ccv-svc-hero__inner {
  position: relative;
  width: 100%;
  max-width: var(--ccv-container-wide);
  margin-inline: auto;
  padding-inline: var(--ccv-gutter);
}

.ccv-svc-hero__copy {
  max-width: 34rem;
  display: flex;
  flex-direction: column;
  gap: var(--ccv-space-5);
}

.ccv-svc-hero__title {
  font-family: var(--ccv-font-display);
  font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4rem);
  font-weight: var(--ccv-weight-bold);
  line-height: 1.05;
  letter-spacing: var(--ccv-tracking-tight);
  margin: 0;
}

.ccv-svc-hero__lead {
  font-size: var(--ccv-text-lead);
  line-height: var(--ccv-leading-relaxed);
  color: var(--ccv-color-text-muted);
  margin: 0;
}

.ccv-svc-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ccv-space-4);
}

/* ---------- Value markers -------------------------------------------------- */
.ccv-svc-hero__values {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ccv-space-4) var(--ccv-space-7);
  list-style: none;
  margin: var(--ccv-space-4) 0 0;
  padding: 0;
}

.ccv-svc-hero__value {
  display: inline-flex;
  align-items: center;
  gap: var(--ccv-space-2);
  font-size: var(--ccv-text-sm);
  color: var(--ccv-color-text-muted);
}

.ccv-svc-hero__value svg { color: var(--ccv-color-accent); flex: 0 0 auto; }

/* The brand line-art, kept faint. Decorative, so it is aria-hidden. */
.ccv-svc-hero__flourish {
  position: absolute;
  inset-block-start: 18%;
  inset-inline-end: 3%;
  width: 12rem;
  color: var(--ccv-color-accent);
  opacity: 0.5;
  pointer-events: none;
  z-index: 1;
}

@media (max-width: 63.99rem) { .ccv-svc-hero__flourish { display: none; } }

/* ==========================================================================
   2. SERVICE CARDS — five, equal height, image-anchored
   ========================================================================== */
.ccv-svc-cards {
  display: grid;
  gap: var(--ccv-space-5);
  grid-template-columns: 1fr;
}

@media (min-width: 40rem) { .ccv-svc-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .ccv-svc-cards { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 80rem) { .ccv-svc-cards { grid-template-columns: repeat(5, 1fr); } }

.ccv-svc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--ccv-color-surface);
  border: var(--ccv-border-hairline) solid var(--ccv-color-border);
  border-radius: var(--ccv-radius);
  box-shadow: var(--ccv-shadow-xs);
  overflow: hidden;
  transition: border-color var(--ccv-transition), box-shadow var(--ccv-transition);
}

.ccv-svc-card:hover {
  border-color: var(--ccv-color-border-strong);
  box-shadow: var(--ccv-shadow-md);
}

.ccv-svc-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--ccv-space-3);
  padding: var(--ccv-space-6) var(--ccv-space-5) var(--ccv-space-5);
}

.ccv-svc-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--ccv-radius);
  background: var(--ccv-color-accent-soft);
  color: var(--ccv-color-accent-ink);
}

/* Two reserved lines, so the blurb and the link line up across all five. */
.ccv-svc-card__title {
  font-family: var(--ccv-font-display);
  font-size: 1.0625rem;
  font-weight: var(--ccv-weight-semibold);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  min-height: calc(1.0625rem * 1.35 * 2);
}

.ccv-svc-card__desc {
  font-size: var(--ccv-text-sm);
  line-height: var(--ccv-leading-normal);
  color: var(--ccv-color-text-muted);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  min-height: calc(var(--ccv-text-sm) * var(--ccv-leading-normal) * 3);
}

.ccv-svc-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--ccv-space-2);
  font-size: var(--ccv-text-sm);
  font-weight: var(--ccv-weight-semibold);
  color: var(--ccv-color-accent-ink);
  transition: color var(--ccv-transition);
}

.ccv-svc-card__link svg { transition: transform var(--ccv-transition); }
.ccv-svc-card:hover .ccv-svc-card__link { color: var(--ccv-color-accent-hover); }
.ccv-svc-card:hover .ccv-svc-card__link svg { transform: translateX(3px); }
.ccv-svc-card__link::after { content: ""; position: absolute; inset: 0; }

/* The supporting image anchors the card, as in the mockup. */
.ccv-svc-card__media {
  margin-block-start: auto;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--ccv-color-bg-muted);
}

.ccv-svc-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--ccv-duration-slow) var(--ccv-ease);
}

.ccv-svc-card:hover .ccv-svc-card__media img { transform: scale(1.05); }

/* ==========================================================================
   3. PROCESS — four stages, connected
   ========================================================================== */
.ccv-svc-process {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--ccv-color-bg-muted);
}

.ccv-svc-process__bg { position: absolute; inset: 0; z-index: -2; }

/* Desaturated, softened and dimmed. Section 13: the drawing is texture behind
   the steps, not something the reader should try to look at. Several project
   photographs carry large baked-in captions, so without this the backdrop
   competes with the headings whichever record happens to be newest. */
.ccv-svc-process__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  filter: grayscale(1) blur(6px) contrast(0.7);
  transform: scale(1.08);
}

/* A heavy light wash: the drawing is texture, and the steps must stay legible
   over whichever project photo happens to be newest. */
.ccv-svc-process__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    90deg,
    rgba(242, 239, 232, 0.99) 0%,
    rgba(242, 239, 232, 0.97) 45%,
    rgba(242, 239, 232, 0.93) 70%,
    rgba(242, 239, 232, 0.9) 100%
  );
}

.ccv-svc-steps {
  display: grid;
  gap: var(--ccv-space-4);
  grid-template-columns: 1fr;
  align-items: stretch;
}

@media (min-width: 48rem) { .ccv-svc-steps { grid-template-columns: repeat(2, 1fr); } }

/* On desktop the arrows become real grid tracks, so the flow reads
   01 -> 02 -> 03 -> 04 rather than four unconnected boxes. */
@media (min-width: 64rem) {
  .ccv-svc-steps {
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
    gap: var(--ccv-space-3);
    align-items: center;
  }
}

.ccv-svc-step {
  display: flex;
  flex-direction: column;
  gap: var(--ccv-space-3);
  height: 100%;
  padding: var(--ccv-space-5);
  background: var(--ccv-color-surface);
  border: var(--ccv-border-hairline) solid var(--ccv-color-border);
  border-radius: var(--ccv-radius);
  box-shadow: var(--ccv-shadow-xs);
}

.ccv-svc-step__head {
  display: flex;
  align-items: center;
  gap: var(--ccv-space-3);
}

.ccv-svc-step__num {
  font-family: var(--ccv-font-display);
  font-size: 1.25rem;
  font-weight: var(--ccv-weight-bold);
  line-height: 1;
  color: var(--ccv-color-text-subtle);
  font-variant-numeric: tabular-nums;
}

.ccv-svc-step__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  flex: 0 0 auto;
  border-radius: var(--ccv-radius-sm);
  background: var(--ccv-color-accent-soft);
  color: var(--ccv-color-accent-ink);
}

.ccv-svc-step__title {
  font-family: var(--ccv-font-display);
  font-size: var(--ccv-text-h4);
  font-weight: var(--ccv-weight-semibold);
  line-height: var(--ccv-leading-snug);
}

.ccv-svc-step__desc {
  font-size: var(--ccv-text-sm);
  line-height: var(--ccv-leading-normal);
  color: var(--ccv-color-text-muted);
}

.ccv-svc-step__arrow {
  display: none;
  color: var(--ccv-color-border-strong);
}

@media (min-width: 64rem) {
  .ccv-svc-step__arrow { display: flex; align-items: center; justify-content: center; }
}

/* ==========================================================================
   4. PROJECTS — three, image-dominant, circular gold action
   ========================================================================== */
.ccv-svc-projects { background: var(--ccv-color-bg); }

.ccv-svc-projects__grid {
  display: grid;
  gap: var(--ccv-space-5);
  grid-template-columns: 1fr;
}

@media (min-width: 48rem) { .ccv-svc-projects__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .ccv-svc-projects__grid { grid-template-columns: repeat(3, 1fr); } }

.ccv-svc-project {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--ccv-color-surface);
  border: var(--ccv-border-hairline) solid var(--ccv-color-border);
  border-radius: var(--ccv-radius);
  overflow: hidden;
  transition: border-color var(--ccv-transition), box-shadow var(--ccv-transition);
}

.ccv-svc-project:hover {
  border-color: var(--ccv-color-border-strong);
  box-shadow: var(--ccv-shadow-md);
}

/* 4:3 rather than 16:10. Several project photographs are portrait-ish
   collages with a pale band at the top; the wider crop favoured that band and
   the card read as empty. */
.ccv-svc-project__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--ccv-color-bg-muted);
}

.ccv-svc-project__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--ccv-duration-slow) var(--ccv-ease);
}

.ccv-svc-project:hover .ccv-svc-project__media img { transform: scale(1.05); }

.ccv-svc-project__body {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ccv-space-4);
  padding: var(--ccv-space-5);
  flex: 1 1 auto;
}

.ccv-svc-project__title {
  font-family: var(--ccv-font-display);
  font-size: 1.0625rem;
  font-weight: var(--ccv-weight-semibold);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  min-height: calc(1.0625rem * 1.35 * 2);
}

.ccv-svc-project__meta {
  display: block;
  margin-block-start: var(--ccv-space-2);
  font-size: var(--ccv-text-xs);
  color: var(--ccv-color-text-subtle);
}

/* The small circular gold action from the mockup. */
.ccv-svc-project__go {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--ccv-radius-pill);
  border: var(--ccv-border-hairline) solid var(--ccv-color-accent);
  color: var(--ccv-color-accent-ink);
  transition: background var(--ccv-transition), color var(--ccv-transition),
              transform var(--ccv-transition);
}

.ccv-svc-project:hover .ccv-svc-project__go {
  background: var(--ccv-color-accent);
  color: var(--ccv-color-text);
  transform: translateX(2px);
}

.ccv-svc-project__link::after { content: ""; position: absolute; inset: 0; }

/* ===== ds/90-page-service-detail.css ===== */
/* ==========================================================================
   CCV-PHASE-14C-R2 — Service detail composition

   Page-scoped by the `ccv-sd-` prefix. Shares the 14A components and the 14C
   `ccv-svc-*` step/card patterns where they already fit; this layer adds only
   what a service-detail page needs: the hero with its script motif, the stats
   panel, the six-step process, the filtered portfolio and the FAQ.
   ========================================================================== */

/* ==========================================================================
   1. HERO
   ========================================================================== */
.ccv-sd-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--ccv-color-bg);
  margin-block-start: calc(var(--ccv-header-h) * -1);
  padding-block: calc(var(--ccv-header-h) + var(--ccv-space-7)) var(--ccv-space-9);
  min-height: clamp(24rem, 18rem + 22vh, 34rem);
  display: flex;
  align-items: center;
}

.ccv-sd-hero__media {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: 66%;
  z-index: -2;
}

.ccv-sd-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ccv-sd-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    90deg,
    var(--ccv-color-bg) 0%,
    var(--ccv-color-bg) 28%,
    rgba(250, 248, 244, 0.92) 40%,
    rgba(250, 248, 244, 0.55) 55%,
    rgba(250, 248, 244, 0.12) 70%,
    rgba(250, 248, 244, 0) 84%
  );
}

@media (max-width: 63.99rem) {
  .ccv-sd-hero__media { width: 100%; opacity: 0.45; }
  .ccv-sd-hero__scrim {
    background: linear-gradient(180deg, rgba(250, 248, 244, 0.92) 0%, rgba(250, 248, 244, 0.84) 55%, var(--ccv-color-bg) 100%);
  }
}

.ccv-sd-hero__inner {
  position: relative;
  width: 100%;
  max-width: var(--ccv-container-wide);
  margin-inline: auto;
  padding-inline: var(--ccv-gutter);
}

.ccv-sd-hero__copy {
  max-width: 36rem;
  display: flex;
  flex-direction: column;
  gap: var(--ccv-space-5);
  margin-block-start: var(--ccv-space-5);
}

.ccv-sd-hero__title {
  font-family: var(--ccv-font-display);
  font-size: clamp(2.125rem, 1.4rem + 3vw, 3.5rem);
  font-weight: var(--ccv-weight-bold);
  line-height: 1.06;
  letter-spacing: var(--ccv-tracking-tight);
  margin: 0;
}

/* Second line in gold, as the mockup's hero does. */
.ccv-sd-hero__title em {
  display: block;
  font-style: normal;
  color: var(--ccv-color-accent);
}

.ccv-sd-hero__lead {
  font-size: var(--ccv-text-lead);
  line-height: var(--ccv-leading-relaxed);
  color: var(--ccv-color-text-muted);
  margin: 0;
}

.ccv-sd-hero__actions { display: flex; flex-wrap: wrap; gap: var(--ccv-space-4); }

.ccv-sd-hero__values {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ccv-space-4) var(--ccv-space-7);
  list-style: none;
  margin: var(--ccv-space-3) 0 0;
  padding: 0;
}

.ccv-sd-hero__value {
  display: inline-flex;
  align-items: center;
  gap: var(--ccv-space-2);
  font-size: var(--ccv-text-sm);
  color: var(--ccv-color-text-muted);
}

.ccv-sd-hero__value svg { color: var(--ccv-color-accent); flex: 0 0 auto; }

/* The gold script motif from the mockup's right margin. Decorative. */
.ccv-sd-motif {
  position: absolute;
  inset-block-start: 22%;
  inset-inline-end: 2.5%;
  width: 11rem;
  color: var(--ccv-color-accent);
  opacity: 0.55;
  pointer-events: none;
  z-index: 1;
}

@media (max-width: 63.99rem) { .ccv-sd-motif { display: none; } }

/* ==========================================================================
   2. OVERVIEW — copy left, stats panel right
   ========================================================================== */
.ccv-sd-overview__grid {
  display: grid;
  gap: var(--ccv-space-8);
  align-items: start;
}

@media (min-width: 64rem) {
  .ccv-sd-overview__grid {
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--ccv-space-10);
  }
}

/* The overview's right column: stats panel above, one photograph below, so
   the column has weight without a wall of type. */
.ccv-sd-overview__figure {
  margin: var(--ccv-space-6) 0 0;
}

.ccv-sd-overview__figure img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--ccv-radius-lg);
}

.ccv-sd-overview__figure figcaption {
  margin-top: var(--ccv-space-3);
  font-size: var(--ccv-text-xs);
  letter-spacing: 0.01em;
  color: var(--ccv-color-text-subtle);
  /* One line only, so the figure never changes the column's rhythm. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  overflow: hidden;
}

.ccv-sd-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ccv-space-4);
}

.ccv-sd-point {
  display: flex;
  align-items: flex-start;
  gap: var(--ccv-space-3);
  font-size: var(--ccv-text-sm);
  line-height: var(--ccv-leading-relaxed);
  color: var(--ccv-color-text-muted);
}

.ccv-sd-point svg { color: var(--ccv-color-accent); flex: 0 0 auto; margin-block-start: 0.3em; }

.ccv-sd-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--ccv-space-6);
  padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  background: var(--ccv-color-surface);
  border: var(--ccv-border-hairline) solid var(--ccv-color-border);
  border-radius: var(--ccv-radius-lg);
  box-shadow: var(--ccv-shadow-sm);
}

.ccv-sd-stat { display: flex; flex-direction: column; gap: var(--ccv-space-2); }
.ccv-sd-stat__icon { color: var(--ccv-color-accent); }

.ccv-sd-stat__value {
  font-family: var(--ccv-font-display);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  font-weight: var(--ccv-weight-bold);
  line-height: 1;
}

.ccv-sd-stat__label {
  font-size: var(--ccv-text-sm);
  color: var(--ccv-color-text-muted);
  line-height: var(--ccv-leading-snug);
}

/* A pull-quote for the strongest line of the legacy copy. */
.ccv-sd-quote {
  margin-block-start: var(--ccv-space-6);
  padding: var(--ccv-space-5) var(--ccv-space-6);
  border-inline-start: 3px solid var(--ccv-color-accent);
  background: var(--ccv-color-surface-muted);
  border-radius: 0 var(--ccv-radius) var(--ccv-radius) 0;
  font-size: var(--ccv-text-lead);
  line-height: var(--ccv-leading-relaxed);
  color: var(--ccv-color-text);
}

/* ==========================================================================
   3. SIX-STEP PROCESS
   ========================================================================== */
.ccv-sd-process { position: relative; background: var(--ccv-color-bg-muted); }

.ccv-sd-steps {
  position: relative;
  display: grid;
  gap: var(--ccv-space-4);
  grid-template-columns: 1fr;
  list-style: none;
  margin: 0;
  padding: 0;
  /* Every card the same height in every row, so the six read as one sequence
     rather than ragged bands. */
  grid-auto-rows: 1fr;
}

@media (min-width: 30rem) { .ccv-sd-steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 48rem) { .ccv-sd-steps { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 78rem) { .ccv-sd-steps { grid-template-columns: repeat(6, 1fr); } }

.ccv-sd-step {
  position: relative;
  height: 100%;
  /* The badge stands above the card and dips into its top edge, leaving a
     clear band for the rule that joins one step to the next. */
  padding-block-start: 2.5rem;
}

/* That rule, drawn badge-to-badge and only where all six sit in one row. */
@media (min-width: 78rem) {
  .ccv-sd-step:not(:last-child)::after {
    content: "";
    position: absolute;
    inset-block-start: 1.75rem;
    inset-inline-start: calc(var(--ccv-space-5) + 3.5rem + var(--ccv-space-2));
    inset-inline-end: calc(var(--ccv-space-2) - var(--ccv-space-4) - var(--ccv-space-5));
    border-block-start: 1px dashed var(--ccv-color-border-strong);
  }
}

.ccv-sd-step__badge {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: var(--ccv-space-5);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--ccv-radius-pill);
  background: var(--ccv-color-surface);
  border: 1px solid var(--ccv-color-accent);
  color: var(--ccv-color-accent-ink);
}

.ccv-sd-step__card {
  display: flex;
  flex-direction: column;
  gap: var(--ccv-space-2);
  height: 100%;
  padding: calc(1rem + var(--ccv-space-5)) var(--ccv-space-5) var(--ccv-space-6);
  background: var(--ccv-color-surface);
  border: var(--ccv-border-hairline) solid var(--ccv-color-border);
  border-radius: var(--ccv-radius);
  box-shadow: var(--ccv-shadow-xs);
}

.ccv-sd-step__num {
  font-family: var(--ccv-font-display);
  font-size: var(--ccv-text-h4);
  font-weight: var(--ccv-weight-bold);
  line-height: 1;
  color: var(--ccv-color-accent-ink);
  font-variant-numeric: tabular-nums;
}

/* Two reserved lines for the title and three for the description: at six
   columns the measure is narrow, and without them the cards' text would start
   and end at six different heights. */
.ccv-sd-step__title {
  margin: 0;
  font-family: var(--ccv-font-display);
  font-size: var(--ccv-text-body);
  font-weight: var(--ccv-weight-semibold);
  line-height: var(--ccv-leading-snug);
  min-height: calc(var(--ccv-text-body) * 1.25 * 2);
}

.ccv-sd-step__desc {
  margin: 0;
  font-size: var(--ccv-text-xs);
  line-height: var(--ccv-leading-relaxed);
  color: var(--ccv-color-text-muted);
}

/* ==========================================================================
   4. PORTFOLIO — filters + grid
   ========================================================================== */
.ccv-sd-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ccv-space-2);
  margin-block-end: var(--ccv-space-6);
}

.ccv-sd-grid {
  display: grid;
  gap: var(--ccv-space-5);
  grid-template-columns: 1fr;
  /* Owner review, phase 14B: every card the same width and height, in every
     row - not just within a row. */
  grid-auto-rows: 1fr;
}

@media (min-width: 40rem) { .ccv-sd-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .ccv-sd-grid { grid-template-columns: repeat(3, 1fr); } }

.ccv-sd-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--ccv-color-surface);
  border: var(--ccv-border-hairline) solid var(--ccv-color-border);
  border-radius: var(--ccv-radius);
  overflow: hidden;
  transition: border-color var(--ccv-transition), box-shadow var(--ccv-transition);
}

.ccv-sd-card:hover {
  border-color: var(--ccv-color-border-strong);
  box-shadow: var(--ccv-shadow-md);
}

.ccv-sd-card__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--ccv-color-bg-muted);
}

.ccv-sd-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--ccv-duration-slow) var(--ccv-ease);
}

.ccv-sd-card:hover .ccv-sd-card__media img { transform: scale(1.05); }

.ccv-sd-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--ccv-space-2);
  padding: var(--ccv-space-5);
  flex: 1 1 auto;
}

/* Two reserved lines so every card in a row ends at the same height. */
.ccv-sd-card__title {
  font-family: var(--ccv-font-display);
  font-size: 1rem;
  font-weight: var(--ccv-weight-semibold);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  min-height: calc(1rem * 1.35 * 2);
}

/* One reserved line, whether or not this record carries a year or a show, so
   a card with no metadata still ends level with its neighbours. */
.ccv-sd-card__meta {
  font-size: var(--ccv-text-xs);
  line-height: 1.4;
  color: var(--ccv-color-text-subtle);
  min-height: calc(var(--ccv-text-xs) * 1.4);
}
.ccv-sd-card__link::after { content: ""; position: absolute; inset: 0; }

.ccv-sd-empty {
  padding: var(--ccv-space-8);
  text-align: center;
  color: var(--ccv-color-text-muted);
  border: var(--ccv-border-hairline) dashed var(--ccv-color-border-strong);
  border-radius: var(--ccv-radius);
}

/* ==========================================================================
   5. WHY CHOOSE — three supported claims
   ========================================================================== */
.ccv-sd-why { background: var(--ccv-color-surface); }

.ccv-sd-why__grid {
  display: grid;
  gap: var(--ccv-space-5);
  grid-template-columns: 1fr;
  grid-auto-rows: 1fr;
}

@media (min-width: 48rem) { .ccv-sd-why__grid { grid-template-columns: repeat(3, 1fr); } }

.ccv-sd-why__item {
  display: flex;
  flex-direction: column;
  gap: var(--ccv-space-3);
  height: 100%;
  padding: var(--ccv-space-6);
  background: var(--ccv-color-bg);
  border: var(--ccv-border-hairline) solid var(--ccv-color-border);
  border-radius: var(--ccv-radius);
}

.ccv-sd-why__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--ccv-radius);
  background: var(--ccv-color-accent-soft);
  color: var(--ccv-color-accent-ink);
}

.ccv-sd-why__title {
  font-family: var(--ccv-font-display);
  font-size: var(--ccv-text-h4);
  font-weight: var(--ccv-weight-semibold);
}

.ccv-sd-why__desc {
  font-size: var(--ccv-text-sm);
  line-height: var(--ccv-leading-relaxed);
  color: var(--ccv-color-text-muted);
  /* Even edges, as in the preserved-copy cards below. */
  text-align: justify;
  text-justify: inter-word;
  overflow-wrap: break-word;
}

@media (max-width: 39.99rem) {
  .ccv-sd-why__desc { text-align: start; }
}

/* ==========================================================================
   6. FAQ — native <details>, so it renders and works with no JavaScript
   ========================================================================== */
/* Heading on one side, questions on the other: at wide widths a single narrow
   column of accordions leaves half the section empty. */
.ccv-sd-faq {
  display: grid;
  gap: var(--ccv-space-7);
  align-items: start;
}

@media (min-width: 64rem) {
  .ccv-sd-faq {
    grid-template-columns: 0.8fr 1.2fr;
    gap: var(--ccv-space-10);
  }

  .ccv-sd-faq__aside { position: sticky; top: calc(var(--ccv-header-h) + var(--ccv-space-6)); }
}

.ccv-sd-faq__list {
  display: flex;
  flex-direction: column;
  gap: var(--ccv-space-3);
}

.ccv-sd-faq__item {
  background: var(--ccv-color-surface);
  border: var(--ccv-border-hairline) solid var(--ccv-color-border);
  border-radius: var(--ccv-radius);
  overflow: hidden;
}

.ccv-sd-faq__item[open] { border-color: var(--ccv-color-border-strong); }

.ccv-sd-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ccv-space-4);
  padding: var(--ccv-space-5);
  cursor: pointer;
  font-family: var(--ccv-font-display);
  font-size: var(--ccv-text-h4);
  font-weight: var(--ccv-weight-semibold);
  line-height: var(--ccv-leading-snug);
  list-style: none;
}

/* Hide the native disclosure triangle in both engines. */
.ccv-sd-faq__q::-webkit-details-marker { display: none; }
.ccv-sd-faq__q::marker { content: ""; }

.ccv-sd-faq__q:hover { color: var(--ccv-color-accent-ink); }

.ccv-sd-faq__sign {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--ccv-radius-pill);
  background: var(--ccv-color-accent-soft);
  color: var(--ccv-color-accent-ink);
  transition: transform var(--ccv-transition);
}

.ccv-sd-faq__item[open] .ccv-sd-faq__sign { transform: rotate(180deg); }

.ccv-sd-faq__a {
  padding: 0 var(--ccv-space-5) var(--ccv-space-5);
  font-size: var(--ccv-text-sm);
  line-height: var(--ccv-leading-relaxed);
  color: var(--ccv-color-text-muted);
}

/* ==========================================================================
   7. RELATED CONSTRUCTION
   ========================================================================== */
.ccv-sd-related { background: var(--ccv-color-bg-muted); }

.ccv-sd-related__grid {
  display: grid;
  gap: var(--ccv-space-5);
  grid-template-columns: 1fr;
  grid-auto-rows: 1fr;
}

@media (min-width: 40rem) { .ccv-sd-related__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .ccv-sd-related__grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------------------------------------------------------------------------
 * Legacy service copy (ticket section 7)
 *
 * The category body the CMS already holds, word for word, laid out as equal
 * cards with justified body text - the even edge the owner asked for, and the
 * same "every block the same size" rule the rest of the page follows. The copy
 * supplies every heading here; the section adds none of its own.
 * ------------------------------------------------------------------------ */
.ccv-sd-detail {
  background: var(--ccv-color-bg-muted);
  border-top: 1px solid var(--ccv-color-border);
  border-bottom: 1px solid var(--ccv-color-border);
}

.ccv-sd-detail__grid {
  display: grid;
  gap: var(--ccv-space-5);
  grid-template-columns: 1fr;
  /* Equal height in every row, however unevenly the stored copy is split. */
  grid-auto-rows: 1fr;
}

@media (min-width: 60rem) {
  .ccv-sd-detail__grid { grid-template-columns: repeat(2, 1fr); }
}

.ccv-sd-detail__card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--ccv-space-7);
  background: var(--ccv-color-surface);
  border: var(--ccv-border-hairline) solid var(--ccv-color-border);
  border-radius: var(--ccv-radius-lg);
  box-shadow: var(--ccv-shadow-xs);
}

.ccv-sd-detail__head {
  display: flex;
  align-items: baseline;
  gap: var(--ccv-space-3);
  padding-block-end: var(--ccv-space-5);
  margin-block-end: var(--ccv-space-6);
  border-block-end: 1px solid var(--ccv-color-border);
}

.ccv-sd-detail__index {
  flex: none;
  font-family: var(--ccv-font-display);
  font-size: var(--ccv-text-eyebrow);
  letter-spacing: 0.14em;
  color: var(--ccv-color-accent-ink);
}

.ccv-sd-detail__heading {
  margin: 0;
  font-family: var(--ccv-font-display);
  font-size: var(--ccv-text-h4);
  font-weight: var(--ccv-weight-bold);
  line-height: 1.3;
  text-wrap: balance;
  /* Two reserved lines: a one-line and a two-line heading otherwise put the
     rule below them - and the copy that follows - at different heights. */
  min-height: calc(var(--ccv-text-h4) * 1.3 * 2);
}

.ccv-sd-detail__body {
  display: flex;
  flex-direction: column;
  gap: var(--ccv-space-5);
}

.ccv-sd-detail__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ccv-space-4);
}

.ccv-sd-detail__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--ccv-space-3);
  align-items: start;
}

.ccv-sd-detail__item > .ccv-icon {
  margin-block-start: 0.35em;
  color: var(--ccv-color-accent-ink);
}

/* Justified body copy: an even edge on both sides. Only the multi-line copy
   gets it - a justified single line would stretch into gaps. */
.ccv-sd-detail__item > span,
.ccv-sd-detail__para {
  font-size: var(--ccv-text-sm);
  line-height: var(--ccv-leading-relaxed);
  color: var(--ccv-color-text-muted);
  text-align: justify;
  text-justify: inter-word;
  /* Vietnamese does not hyphenate; without this a long term can push past the
     card edge instead of wrapping. */
  overflow-wrap: break-word;
  hyphens: none;
}

.ccv-sd-detail__para { margin: 0; }

/* On a phone the measure is too narrow to justify: the same setting that
   gives an even edge on a wide card opens rivers of white space here. */
@media (max-width: 39.99rem) {
  .ccv-sd-detail__item > span,
  .ccv-sd-detail__para,
  .ccv-sd-detail__closing {
    text-align: start;
  }
}

/* The editor bolded and italicised the opening term of each item; that is the
   item's label, so give it the page's own emphasis rather than the WYSIWYG's. */
.ccv-sd-detail__item strong,
.ccv-sd-detail__item em,
.ccv-sd-detail__para strong,
.ccv-sd-detail__para em {
  font-style: normal;
  font-weight: var(--ccv-weight-semibold);
  color: var(--ccv-color-text);
}

/* The editor's centred sign-off, kept as a quiet closing note rather than a
   second display heading competing with the CTA below it. */
.ccv-sd-detail__close {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ccv-space-4);
  max-width: 46rem;
  margin: var(--ccv-space-8) auto 0;
  padding-block-start: var(--ccv-space-8);
  border-block-start: 1px solid var(--ccv-color-border);
  text-align: center;
}

.ccv-sd-detail__statement {
  margin: 0;
  max-width: 34rem;
  font-family: var(--ccv-font-display);
  font-size: var(--ccv-text-h4);
  line-height: 1.35;
  color: var(--ccv-color-text);
}

.ccv-sd-detail__closing {
  margin: 0;
  font-size: var(--ccv-text-sm);
  line-height: var(--ccv-leading-relaxed);
  color: var(--ccv-color-text-muted);
  /* Even edges here too; the last line still centres under them. */
  text-align: justify;
  text-align-last: center;
  text-justify: inter-word;
  overflow-wrap: break-word;
}

.ccv-sd-detail__closing strong {
  font-weight: 400;
}

/* --- the offer panel that closes the design page (owner review 2026-09-11) - */
.ccv-sd-offer {
  display: grid;
  margin-block-start: var(--ccv-space-8);
  overflow: hidden;
  background: var(--ccv-color-surface);
  border: var(--ccv-border-hairline) solid var(--ccv-color-border);
  border-radius: var(--ccv-radius-lg);
  box-shadow: var(--ccv-shadow-sm);
}
@media (min-width: 64rem) {
  .ccv-sd-offer { grid-template-columns: 0.95fr 1.05fr; }
  .ccv-sd-offer--text { grid-template-columns: 1fr; }
}
.ccv-sd-offer__media { position: relative; margin: 0; min-height: 18rem; background: var(--ccv-color-bg-muted); }
.ccv-sd-offer__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ccv-sd-offer__cap {
  position: absolute; inset-inline: 0; inset-block-end: 0;
  padding: var(--ccv-space-6) var(--ccv-space-5) var(--ccv-space-4);
  background: linear-gradient(180deg, rgba(16, 16, 18, 0) 0%, rgba(16, 16, 18, 0.78) 100%);
  color: #fff; font-size: var(--ccv-text-xs); line-height: var(--ccv-leading-snug);
}
.ccv-sd-offer__body {
  display: flex; flex-direction: column; gap: var(--ccv-space-5);
  padding: var(--ccv-space-8) var(--ccv-space-7);
}
.ccv-sd-offer__title {
  margin: 0;
  font-family: var(--ccv-font-display);
  font-size: var(--ccv-text-h3);
  font-weight: var(--ccv-weight-semibold);
  line-height: var(--ccv-leading-snug);
  color: var(--ccv-color-text);
}
.ccv-sd-offer__list { display: grid; gap: var(--ccv-space-3); margin: 0; padding: 0; list-style: none; }
@media (min-width: 40rem) { .ccv-sd-offer__list { grid-template-columns: repeat(3, 1fr); } }
.ccv-sd-offer__item {
  display: flex; flex-direction: column; gap: var(--ccv-space-2);
  padding: var(--ccv-space-4);
  background: var(--ccv-color-bg-muted);
  border-radius: var(--ccv-radius);
}
.ccv-sd-offer__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem;
  border-radius: var(--ccv-radius);
  border: 1px solid var(--ccv-color-accent);
  color: var(--ccv-color-accent-ink);
  background: var(--ccv-color-surface);
}
.ccv-sd-offer__name { font-size: var(--ccv-text-sm); font-weight: var(--ccv-weight-semibold); color: var(--ccv-color-text); }
.ccv-sd-offer__desc { font-size: var(--ccv-text-xs); line-height: var(--ccv-leading-relaxed); color: var(--ccv-color-text-muted); }
.ccv-sd-offer__text {
  margin: 0;
  font-size: var(--ccv-text-sm);
  line-height: var(--ccv-leading-relaxed);
  color: var(--ccv-color-text-muted);
}
/* The legacy closing wraps the whole paragraph in <strong>; a bold block of
   body copy reads as shouting, so it is set at normal weight here. */
.ccv-sd-offer__text strong, .ccv-sd-offer__text b { font-weight: inherit; }
.ccv-sd-offer__actions { display: flex; flex-wrap: wrap; gap: var(--ccv-space-3); margin-block-start: var(--ccv-space-2); }

/* ===== ds/95-page-projects.css ===== */
/* ==========================================================================
   CCV-PHASE-14D-R1 — Construction images / Hình ảnh thi công

   Page-scoped by the `ccv-pj-` prefix. Reuses the 14A components and the
   14C-R2 card patterns where they already fit; this layer adds the hero with
   its construction photograph, the capability split with its metric panel,
   the enlarged main gallery, the library grid and the field-control strip.

   Sections here follow the owner-approved mockup's order and proportions.
   ========================================================================== */

/* ==========================================================================
   1. HERO — copy left, construction photograph right
   ========================================================================== */
.ccv-pj-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--ccv-color-bg);
  margin-block-start: calc(var(--ccv-header-h) * -1);
  padding-block: calc(var(--ccv-header-h) + var(--ccv-space-6)) var(--ccv-space-9);
  min-height: clamp(26rem, 20rem + 22vh, 36rem);
  display: flex;
  align-items: center;
}

.ccv-pj-hero__media {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: 58%;
  z-index: -2;
}

.ccv-pj-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The available on-site photography is shot wide; favouring the upper part
     keeps the booth rather than the exhibition-hall floor in frame. */
  object-position: 50% 40%;
}

.ccv-pj-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    90deg,
    var(--ccv-color-bg) 0%,
    var(--ccv-color-bg) 30%,
    rgba(250, 248, 244, 0.94) 42%,
    rgba(250, 248, 244, 0.6) 56%,
    rgba(250, 248, 244, 0.14) 72%,
    rgba(250, 248, 244, 0) 86%
  );
}

@media (max-width: 63.99rem) {
  .ccv-pj-hero__media { width: 100%; opacity: 0.4; }
  .ccv-pj-hero__scrim {
    background: linear-gradient(180deg, rgba(250, 248, 244, 0.93) 0%, rgba(250, 248, 244, 0.86) 55%, var(--ccv-color-bg) 100%);
  }
}

/* The approved brand line-art, held to the hero's right edge behind the
   photograph's soft side. Decorative only. */
.ccv-pj-motif {
  position: absolute;
  inset-block-start: 12%;
  inset-inline-end: 2%;
  width: min(24rem, 30%);
  color: var(--ccv-color-accent);
  opacity: 0.28;
  pointer-events: none;
  z-index: -1;
}

@media (max-width: 63.99rem) { .ccv-pj-motif { display: none; } }

.ccv-pj-hero__inner {
  position: relative;
  width: 100%;
  max-width: var(--ccv-container-wide);
  margin-inline: auto;
  padding-inline: var(--ccv-gutter);
}

.ccv-pj-hero__copy {
  max-width: 34rem;
  display: flex;
  flex-direction: column;
  gap: var(--ccv-space-5);
  margin-block-start: var(--ccv-space-4);
}

.ccv-pj-hero__title {
  font-family: var(--ccv-font-display);
  font-size: clamp(2.125rem, 1.35rem + 3.2vw, 3.5rem);
  font-weight: var(--ccv-weight-bold);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0;
}

/* The mockup's gold second line. */
.ccv-pj-hero__title em {
  display: block;
  font-style: normal;
  color: var(--ccv-color-accent-ink);
}

.ccv-pj-hero__lead {
  margin: 0;
  font-size: var(--ccv-text-lead);
  line-height: var(--ccv-leading-relaxed);
  color: var(--ccv-color-text-muted);
  max-width: 30rem;
}

.ccv-pj-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ccv-space-3);
}

.ccv-pj-hero__values {
  list-style: none;
  margin: var(--ccv-space-2) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--ccv-space-3) var(--ccv-space-6);
}

.ccv-pj-hero__value {
  display: inline-flex;
  align-items: center;
  gap: var(--ccv-space-2);
  font-size: var(--ccv-text-sm);
  color: var(--ccv-color-text);
}

.ccv-pj-hero__value .ccv-icon { color: var(--ccv-color-accent-ink); }

/* ==========================================================================
   2. CAPABILITY — copy left, metric panel right
   ========================================================================== */
.ccv-pj-cap__grid {
  display: grid;
  gap: var(--ccv-space-8);
  align-items: center;
}

@media (min-width: 64rem) {
  .ccv-pj-cap__grid {
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--ccv-space-10);
  }
}

.ccv-pj-cap__body {
  font-size: var(--ccv-text-lead);
  line-height: var(--ccv-leading-relaxed);
  color: var(--ccv-color-text-muted);
  margin: var(--ccv-space-4) 0 var(--ccv-space-6);
  max-width: 34rem;
}

.ccv-pj-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ccv-space-4);
  max-width: 34rem;
}

.ccv-pj-point {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--ccv-space-3);
  align-items: start;
  font-size: var(--ccv-text-sm);
  line-height: var(--ccv-leading-relaxed);
  color: var(--ccv-color-text-muted);
}

.ccv-pj-point .ccv-icon {
  margin-block-start: 0.3em;
  color: var(--ccv-color-accent-ink);
}

/* The 2x2 metric panel. Deliberately large: the mockup gives it half the
   band's width, not the weight of four dashboard counters. */
.ccv-pj-metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--ccv-space-5);
  padding: var(--ccv-space-7);
  background: var(--ccv-color-surface);
  border: var(--ccv-border-hairline) solid var(--ccv-color-border);
  border-radius: var(--ccv-radius-lg);
  box-shadow: var(--ccv-shadow-sm);
}

.ccv-pj-metric {
  display: flex;
  flex-direction: column;
  gap: var(--ccv-space-2);
  padding: var(--ccv-space-4);
}

.ccv-pj-metric__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-block-end: var(--ccv-space-2);
  border-radius: var(--ccv-radius-pill);
  border: 1px solid var(--ccv-color-accent);
  color: var(--ccv-color-accent-ink);
}

.ccv-pj-metric__value {
  font-family: var(--ccv-font-display);
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  font-weight: var(--ccv-weight-bold);
  line-height: 1;
  color: var(--ccv-color-text);
  font-variant-numeric: tabular-nums;
}

.ccv-pj-metric__label {
  font-size: var(--ccv-text-sm);
  line-height: var(--ccv-leading-snug);
  color: var(--ccv-color-text-subtle);
}

@media (max-width: 29.99rem) {
  .ccv-pj-metrics { padding: var(--ccv-space-5); gap: var(--ccv-space-3); }
  .ccv-pj-metric { padding: var(--ccv-space-2); }
}

/* ==========================================================================
   3. MAIN GALLERY — the page's dominant visual
   ========================================================================== */
.ccv-pj-gallery { background: var(--ccv-color-bg-muted); }

.ccv-pj-gallery__stage { margin-block-start: var(--ccv-space-7); }

/* The shared igallery component, enlarged for this page. The frame keeps a
   wide cinematic ratio so the main image reads as a section, not a thumbnail. */
.ccv-pj-gallery .ccv-igallery__frame { border-radius: var(--ccv-radius-lg); overflow: hidden; }
.ccv-pj-gallery .ccv-igallery__stage { aspect-ratio: 16 / 9; }

@media (max-width: 47.99rem) {
  .ccv-pj-gallery .ccv-igallery__stage { aspect-ratio: 4 / 3; }
}

.ccv-pj-gallery__note {
  margin: var(--ccv-space-5) 0 0;
  font-size: var(--ccv-text-sm);
  color: var(--ccv-color-text-subtle);
}

.ccv-pj-gallery__note a { color: var(--ccv-color-accent-ink); }

/* ==========================================================================
   4. LIBRARY — filters, grid, pagination
   ========================================================================== */
.ccv-pj-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ccv-space-2);
  margin-block: var(--ccv-space-6) var(--ccv-space-7);
}

.ccv-pj-filters__group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ccv-space-2);
}

.ccv-pj-filters__legend {
  font-size: var(--ccv-text-eyebrow);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ccv-color-text-subtle);
  margin-inline-end: var(--ccv-space-1);
}

@media (max-width: 47.99rem) {
  /* Chips scroll rather than wrap into four ragged rows on a phone. */
  .ccv-pj-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-block-end: var(--ccv-space-2);
    scrollbar-width: thin;
  }
  .ccv-pj-filters__group { flex-wrap: nowrap; }
  .ccv-pj-filters .ccv-chip { white-space: nowrap; }
}

.ccv-pj-grid {
  display: grid;
  gap: var(--ccv-space-5);
  grid-template-columns: 1fr;
  /* Owner review, phase 14B: equal cards in every row, not just within one. */
  grid-auto-rows: 1fr;
}

@media (min-width: 40rem) { .ccv-pj-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .ccv-pj-grid { grid-template-columns: repeat(3, 1fr); } }

.ccv-pj-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--ccv-color-surface);
  border: var(--ccv-border-hairline) solid var(--ccv-color-border);
  border-radius: var(--ccv-radius);
  overflow: hidden;
  transition: border-color var(--ccv-transition), box-shadow var(--ccv-transition), transform var(--ccv-transition);
}

.ccv-pj-card:hover {
  border-color: var(--ccv-color-border-strong);
  box-shadow: var(--ccv-shadow-md);
  transform: translateY(-2px);
}

/* The image dominates: a 4:3 crop is roughly two thirds of the card. */
.ccv-pj-card__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--ccv-color-bg-muted);
}

.ccv-pj-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--ccv-duration-slow) var(--ccv-ease);
}

.ccv-pj-card:hover .ccv-pj-card__media img { transform: scale(1.04); }

/* Records with no photograph keep the card's shape rather than collapsing it. */
.ccv-pj-card__media--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ccv-color-text-subtle);
}

.ccv-pj-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--ccv-space-2);
  padding: var(--ccv-space-5);
  flex: 1 1 auto;
}

/* Two reserved title lines and one meta line, so every card in the grid ends
   level whatever its record carries. */
.ccv-pj-card__title {
  margin: 0;
  font-family: var(--ccv-font-display);
  font-size: 1rem;
  font-weight: var(--ccv-weight-semibold);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  min-height: calc(1rem * 1.35 * 2);
}

.ccv-pj-card__meta {
  font-size: var(--ccv-text-xs);
  line-height: 1.4;
  color: var(--ccv-color-text-subtle);
  min-height: calc(var(--ccv-text-xs) * 1.4);
}

.ccv-pj-card__link { color: inherit; text-decoration: none; }
.ccv-pj-card__link::after { content: ""; position: absolute; inset: 0; }
.ccv-pj-card__link:hover { color: var(--ccv-color-accent-ink); }

.ccv-pj-empty {
  padding: var(--ccv-space-8);
  text-align: center;
  color: var(--ccv-color-text-muted);
  border: var(--ccv-border-hairline) dashed var(--ccv-color-border-strong);
  border-radius: var(--ccv-radius);
}

/* ==========================================================================
   5. FIELD CONTROL — the closing strip
   ========================================================================== */
.ccv-pj-field {
  position: relative;
  overflow: hidden;
  background: var(--ccv-color-bg-muted);
  border-block-start: 1px solid var(--ccv-color-border);
}

.ccv-pj-field__grid {
  position: relative;
  display: grid;
  gap: var(--ccv-space-5);
  align-items: start;
}

@media (min-width: 60rem) {
  .ccv-pj-field__grid { grid-template-columns: auto 1fr; gap: var(--ccv-space-7); }
}

.ccv-pj-field__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: var(--ccv-radius-pill);
  border: 1px solid var(--ccv-color-accent);
  color: var(--ccv-color-accent-ink);
  flex: none;
}

.ccv-pj-field__title {
  margin: 0 0 var(--ccv-space-3);
  font-family: var(--ccv-font-display);
  font-size: var(--ccv-text-h3);
  font-weight: var(--ccv-weight-bold);
  line-height: var(--ccv-leading-snug);
}

.ccv-pj-field__body {
  margin: 0 0 var(--ccv-space-5);
  max-width: 46rem;
  font-size: var(--ccv-text-sm);
  line-height: var(--ccv-leading-relaxed);
  color: var(--ccv-color-text-muted);
  text-align: justify;
  text-justify: inter-word;
  overflow-wrap: break-word;
}

@media (max-width: 39.99rem) {
  .ccv-pj-field__body { text-align: start; }
}

.ccv-pj-field__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ccv-space-3) var(--ccv-space-6);
}

/* The technical booth line-art the mockup carries at the right. Decorative
   branding, not a technical document: no dimensions, no annotations. */
.ccv-pj-blueprint {
  position: absolute;
  inset-block-end: -1rem;
  inset-inline-end: 0;
  width: min(22rem, 34%);
  color: var(--ccv-color-accent);
  opacity: 0.22;
  pointer-events: none;
}

@media (max-width: 63.99rem) { .ccv-pj-blueprint { display: none; } }

/* ==========================================================================
   6. GALLERY CAPTION — shared component, styled here for both hubs
   ========================================================================== */
.ccv-igallery__caption {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: var(--ccv-space-7) var(--ccv-space-5) var(--ccv-space-4);
  /* A gradient rather than a flat bar, so a bright image stays readable
     without a hard edge across it. */
  background: linear-gradient(180deg, rgba(16, 16, 18, 0) 0%, rgba(16, 16, 18, 0.72) 60%, rgba(16, 16, 18, 0.86) 100%);
  color: #fff;
  pointer-events: none;
}

.ccv-igallery__caption-title {
  font-family: var(--ccv-font-display);
  font-size: var(--ccv-text-h4);
  font-weight: var(--ccv-weight-semibold);
  line-height: var(--ccv-leading-snug);
  /* One line: a caption is a label, not an excerpt. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  overflow: hidden;
}

.ccv-igallery__caption-meta {
  font-size: var(--ccv-text-xs);
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.82);
}

@media (max-width: 39.99rem) {
  .ccv-igallery__caption { padding: var(--ccv-space-6) var(--ccv-space-4) var(--ccv-space-3); }
}

/* ===== ds/96-page-capability.css ===== */
/* ==========================================================================
   CCV-PHASE-14E-R1 — Capability / Năng lực

   Page-scoped by the `ccv-cp-` prefix. (`ccv-cap-` is already taken by the
   legacy capability grid this page replaces.) The six-step process reuses the
   `ccv-sd-step*` component from 14C-R2 rather than cloning it — that layer is
   now shared by the service-detail and capability pages.

   Section order follows the owner-approved mockup: hero, metric strip, team,
   workshop, process, coverage, why-choose, evidence projects.
   ========================================================================== */

/* ==========================================================================
   1. HERO — copy left, project photograph right
   ========================================================================== */
.ccv-cp-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--ccv-color-bg);
  margin-block-start: calc(var(--ccv-header-h) * -1);
  /* The metric strip is pulled up into this padding, so the hero reserves
     room for it below the buttons rather than letting it land on them. */
  padding-block: calc(var(--ccv-header-h) + var(--ccv-space-6))
                 calc(var(--ccv-space-9) + 4.5rem);
  min-height: clamp(28rem, 21rem + 22vh, 38rem);
  display: flex;
  align-items: center;
}

.ccv-cp-hero__media {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: 56%;
  z-index: -2;
}

.ccv-cp-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ccv-cp-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    90deg,
    var(--ccv-color-bg) 0%,
    var(--ccv-color-bg) 30%,
    rgba(250, 248, 244, 0.94) 42%,
    rgba(250, 248, 244, 0.58) 56%,
    rgba(250, 248, 244, 0.12) 74%,
    rgba(250, 248, 244, 0) 88%
  );
}

@media (max-width: 63.99rem) {
  .ccv-cp-hero__media { width: 100%; opacity: 0.4; }
  .ccv-cp-hero__scrim {
    background: linear-gradient(180deg, rgba(250, 248, 244, 0.93) 0%, rgba(250, 248, 244, 0.86) 55%, var(--ccv-color-bg) 100%);
  }
}

.ccv-cp-hero__inner {
  position: relative;
  width: 100%;
  max-width: var(--ccv-container-wide);
  margin-inline: auto;
  padding-inline: var(--ccv-gutter);
}

.ccv-cp-hero__copy {
  max-width: 34rem;
  display: flex;
  flex-direction: column;
  gap: var(--ccv-space-5);
  margin-block-start: var(--ccv-space-4);
}

.ccv-cp-hero__title {
  margin: 0;
  font-family: var(--ccv-font-display);
  font-size: clamp(2.125rem, 1.35rem + 3.2vw, 3.5rem);
  font-weight: var(--ccv-weight-bold);
  line-height: 1.05;
  letter-spacing: -0.015em;
}

.ccv-cp-hero__title em {
  display: block;
  font-style: normal;
  color: var(--ccv-color-accent-ink);
}

.ccv-cp-hero__lead {
  margin: 0;
  max-width: 31rem;
  font-size: var(--ccv-text-lead);
  line-height: var(--ccv-leading-relaxed);
  color: var(--ccv-color-text-muted);
}

.ccv-cp-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ccv-space-3);
}

/* The mockup's caption plate over the foot of the hero photograph. It names
   the actual project, so it only renders when a real record supplies one. */
.ccv-cp-hero__plate {
  position: absolute;
  /* Clear of the strip that overlaps the hero's foot. */
  inset-block-end: calc(4.5rem + var(--ccv-space-5));
  inset-inline-end: var(--ccv-gutter);
  z-index: 1;
  max-width: 20rem;
  padding: var(--ccv-space-4) var(--ccv-space-5);
  border-radius: var(--ccv-radius);
  background: rgba(16, 16, 18, 0.82);
  color: #fff;
}

.ccv-cp-hero__plate-title {
  display: block;
  font-family: var(--ccv-font-display);
  font-size: var(--ccv-text-sm);
  font-weight: var(--ccv-weight-semibold);
  line-height: var(--ccv-leading-snug);
  /* Two lines: a plate, not a paragraph. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.ccv-cp-hero__plate-meta {
  display: block;
  margin-block-start: 0.2rem;
  font-size: var(--ccv-text-xs);
  color: rgba(255, 255, 255, 0.78);
}

@media (max-width: 63.99rem) { .ccv-cp-hero__plate { display: none; } }

/* ==========================================================================
   2. METRIC STRIP — bridges hero into the team section
   ========================================================================== */
@media (max-width: 55.99rem) {
  .ccv-cp-hero { padding-block-end: calc(var(--ccv-space-9) + 2rem); }
  .ccv-cp-metrics-band { margin-block-start: -2rem; }
}

.ccv-cp-metrics-band {
  position: relative;
  z-index: 2;
  margin-block-start: -4.5rem;
  padding-block-end: var(--ccv-space-9);
}

.ccv-cp-metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  overflow: hidden;
  background: var(--ccv-color-border);
  border: var(--ccv-border-hairline) solid var(--ccv-color-border);
  border-radius: var(--ccv-radius-lg);
  box-shadow: var(--ccv-shadow-md);
}

@media (min-width: 56rem) { .ccv-cp-metrics { grid-template-columns: repeat(4, 1fr); } }

.ccv-cp-metric {
  display: flex;
  align-items: center;
  gap: var(--ccv-space-4);
  padding: var(--ccv-space-6) var(--ccv-space-5);
  background: var(--ccv-color-surface);
}

.ccv-cp-metric__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  flex: none;
  border-radius: var(--ccv-radius-pill);
  border: 1px solid var(--ccv-color-accent);
  color: var(--ccv-color-accent-ink);
}

.ccv-cp-metric__value {
  display: block;
  font-family: var(--ccv-font-display);
  font-size: clamp(1.25rem, 1rem + 0.9vw, 1.75rem);
  font-weight: var(--ccv-weight-bold);
  line-height: 1.1;
  color: var(--ccv-color-text);
  font-variant-numeric: tabular-nums;
}

.ccv-cp-metric__label {
  display: block;
  margin-block-start: 0.15rem;
  font-size: var(--ccv-text-xs);
  line-height: var(--ccv-leading-snug);
  color: var(--ccv-color-text-subtle);
}

/* ==========================================================================
   3. TEAM
   ========================================================================== */
.ccv-cp-split {
  display: grid;
  gap: var(--ccv-space-8);
  align-items: start;
}

@media (min-width: 64rem) {
  .ccv-cp-split { grid-template-columns: 1.05fr 0.95fr; gap: var(--ccv-space-10); }
}

.ccv-cp-body {
  margin: var(--ccv-space-4) 0 var(--ccv-space-6);
  max-width: 34rem;
  font-size: var(--ccv-text-lead);
  line-height: var(--ccv-leading-relaxed);
  color: var(--ccv-color-text-muted);
}

.ccv-cp-points {
  list-style: none;
  margin: 0 0 var(--ccv-space-7);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ccv-space-4);
  max-width: 34rem;
}

.ccv-cp-point {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--ccv-space-3);
  align-items: start;
  font-size: var(--ccv-text-sm);
  line-height: var(--ccv-leading-relaxed);
  color: var(--ccv-color-text-muted);
}

.ccv-cp-point .ccv-icon {
  margin-block-start: 0.3em;
  color: var(--ccv-color-accent-ink);
}

/* Role cards stand where the mockup shows staff-count cards. The counts have
   no source in the CMS, so the cards name the disciplines the company's own
   copy describes and carry no invented numbers. */
.ccv-cp-roles {
  display: grid;
  gap: var(--ccv-space-4);
}

@media (min-width: 30rem) { .ccv-cp-roles { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 64rem) { .ccv-cp-roles { grid-template-columns: 1fr; } }

.ccv-cp-role {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--ccv-space-4);
  align-items: start;
  padding: var(--ccv-space-5);
  background: var(--ccv-color-surface);
  border: var(--ccv-border-hairline) solid var(--ccv-color-border);
  border-radius: var(--ccv-radius);
  box-shadow: var(--ccv-shadow-xs);
}

@media (min-width: 30rem) and (max-width: 63.99rem) {
  .ccv-cp-role { grid-template-columns: 1fr; }
}

.ccv-cp-role__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  border-radius: var(--ccv-radius-pill);
  border: 1px solid var(--ccv-color-accent);
  color: var(--ccv-color-accent-ink);
}

.ccv-cp-role__title {
  margin: 0 0 0.2rem;
  font-family: var(--ccv-font-display);
  font-size: var(--ccv-text-h4);
  font-weight: var(--ccv-weight-semibold);
  line-height: var(--ccv-leading-snug);
}

.ccv-cp-role__note {
  margin: 0;
  font-size: var(--ccv-text-xs);
  line-height: var(--ccv-leading-relaxed);
  color: var(--ccv-color-text-subtle);
}

/* ==========================================================================
   4. WORKSHOP / PRODUCTION
   ========================================================================== */
.ccv-cp-workshop { background: var(--ccv-color-bg-muted); }

.ccv-cp-places {
  display: grid;
  gap: var(--ccv-space-5);
  grid-template-columns: 1fr;
  grid-auto-rows: 1fr;
  margin-block-start: var(--ccv-space-7);
}

@media (min-width: 40rem) { .ccv-cp-places { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .ccv-cp-places { grid-template-columns: repeat(3, 1fr); } }

.ccv-cp-place {
  display: flex;
  flex-direction: column;
  gap: var(--ccv-space-3);
  height: 100%;
  padding: var(--ccv-space-6);
  background: var(--ccv-color-surface);
  border: var(--ccv-border-hairline) solid var(--ccv-color-border);
  border-radius: var(--ccv-radius-lg);
  box-shadow: var(--ccv-shadow-xs);
}

.ccv-cp-place__kind {
  font-size: var(--ccv-text-eyebrow);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ccv-color-accent-ink);
}

.ccv-cp-place__addr {
  margin: 0;
  font-size: var(--ccv-text-sm);
  line-height: var(--ccv-leading-relaxed);
  color: var(--ccv-color-text);
}

.ccv-cp-place__note {
  margin: auto 0 0;
  font-size: var(--ccv-text-xs);
  color: var(--ccv-color-text-subtle);
}

/* An honest note where the mockup shows workshop photography the CMS does not
   hold. Quiet, not an error state. */
.ccv-cp-note {
  margin: var(--ccv-space-6) 0 0;
  padding: var(--ccv-space-4) var(--ccv-space-5);
  border-inline-start: 3px solid var(--ccv-color-accent);
  background: var(--ccv-color-surface);
  border-radius: 0 var(--ccv-radius) var(--ccv-radius) 0;
  font-size: var(--ccv-text-xs);
  line-height: var(--ccv-leading-relaxed);
  color: var(--ccv-color-text-subtle);
  max-width: 46rem;
}

/* ==========================================================================
   5. COVERAGE — verified locations only
   ========================================================================== */
.ccv-cp-coverage__grid {
  display: grid;
  gap: var(--ccv-space-8);
  align-items: center;
}

@media (min-width: 64rem) {
  .ccv-cp-coverage__grid { grid-template-columns: 0.75fr 1.25fr; gap: var(--ccv-space-10); }
}

/* A coverage diagram, not a map: two markers on an axis, each one backed by a
   published address. Deliberately abstract — an inaccurate country outline
   would misrepresent where the company actually operates. */
.ccv-cp-axis {
  position: relative;
  margin: 0 auto;
  padding: var(--ccv-space-6) 0;
  min-height: 18rem;
  max-width: 16rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.ccv-cp-axis__line {
  position: absolute;
  inset-block: var(--ccv-space-7);
  inset-inline-start: 0.45rem;
  width: 1px;
  border-inline-start: 1px dashed var(--ccv-color-border-strong);
}

.ccv-cp-axis__node {
  position: relative;
  display: block;
  padding-inline-start: var(--ccv-space-6);
}

.ccv-cp-axis__dot {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.3rem;
  width: 0.95rem;
  height: 0.95rem;
  border-radius: var(--ccv-radius-pill);
  background: var(--ccv-color-accent-ink);
  box-shadow: 0 0 0 5px rgba(200, 160, 85, 0.22);
}

.ccv-cp-axis__label {
  display: block;
  font-family: var(--ccv-font-display);
  font-size: var(--ccv-text-h4);
  font-weight: var(--ccv-weight-semibold);
  line-height: var(--ccv-leading-snug);
  color: var(--ccv-color-text);
}

.ccv-cp-axis__sub {
  display: block;
  margin-block-start: 0.15rem;
  font-size: var(--ccv-text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ccv-color-accent-ink);
}

@media (max-width: 63.99rem) {
  .ccv-cp-axis { min-height: 0; max-width: none; }
  .ccv-cp-axis__node--n { margin-block-end: var(--ccv-space-7); }
}

.ccv-cp-locations {
  display: grid;
  gap: var(--ccv-space-5);
  grid-template-columns: 1fr;
  grid-auto-rows: 1fr;
}

@media (min-width: 40rem) { .ccv-cp-locations { grid-template-columns: repeat(2, 1fr); } }

.ccv-cp-location {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--ccv-color-surface);
  border: var(--ccv-border-hairline) solid var(--ccv-color-border);
  border-radius: var(--ccv-radius);
  box-shadow: var(--ccv-shadow-xs);
}

.ccv-cp-location__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--ccv-color-bg-muted);
}

.ccv-cp-location__media img { width: 100%; height: 100%; object-fit: cover; }

.ccv-cp-location__body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: var(--ccv-space-5);
  flex: 1 1 auto;
}

.ccv-cp-location__name {
  margin: 0;
  font-family: var(--ccv-font-display);
  font-size: var(--ccv-text-h4);
  font-weight: var(--ccv-weight-semibold);
}

.ccv-cp-location__note {
  margin: 0;
  font-size: var(--ccv-text-xs);
  line-height: var(--ccv-leading-relaxed);
  color: var(--ccv-color-text-subtle);
}

/* ==========================================================================
   6. WHY CHOOSE — compact six-item strip
   ========================================================================== */
.ccv-cp-why { background: var(--ccv-color-bg-muted); }

.ccv-cp-why__grid {
  display: grid;
  gap: var(--ccv-space-4);
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  margin-block-start: var(--ccv-space-7);
}

@media (min-width: 48rem) { .ccv-cp-why__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 72rem) { .ccv-cp-why__grid { grid-template-columns: repeat(6, 1fr); } }

.ccv-cp-why__item {
  display: flex;
  flex-direction: column;
  gap: var(--ccv-space-2);
  height: 100%;
  padding: var(--ccv-space-5);
  text-align: center;
  align-items: center;
  background: var(--ccv-color-surface);
  border: var(--ccv-border-hairline) solid var(--ccv-color-border);
  border-radius: var(--ccv-radius);
}

.ccv-cp-why__icon { color: var(--ccv-color-accent-ink); }

.ccv-cp-why__title {
  margin: var(--ccv-space-1) 0 0;
  font-family: var(--ccv-font-display);
  font-size: var(--ccv-text-body);
  font-weight: var(--ccv-weight-semibold);
  line-height: var(--ccv-leading-snug);
  /* Two reserved lines so the six read as one strip. */
  min-height: calc(var(--ccv-text-body) * 1.25 * 2);
}

.ccv-cp-why__note {
  margin: 0;
  font-size: var(--ccv-text-xs);
  line-height: var(--ccv-leading-relaxed);
  color: var(--ccv-color-text-subtle);
}

/* ===== ds/97-page-about.css ===== */
/* ==========================================================================
   CCV-PHASE-14E-R2 — About / Về chúng tôi

   Page-scoped by the `ccv-ab-` prefix. The metric strip, why-choose strip and
   project cards are the components built for the capability and construction
   pages (`ccv-cp-metrics`, `ccv-cp-why`, `ccv-pj-card`); those layers are
   shared, not cloned. This layer adds only what this page needs: the
   full-bleed hero, the brand-story split with its media collage, the four
   mission pillars and the workshop/team split.
   ========================================================================== */

/* ==========================================================================
   1. HERO — full-bleed image, copy over a scrim
   ========================================================================== */
.ccv-ab-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-block-start: calc(var(--ccv-header-h) * -1);
  padding-block: calc(var(--ccv-header-h) + var(--ccv-space-8)) var(--ccv-space-9);
  min-height: clamp(30rem, 22rem + 26vh, 42rem);
  display: flex;
  align-items: flex-end;
  background: var(--ccv-color-bg-dark);
}

.ccv-ab-hero__media { position: absolute; inset: 0; z-index: -2; }

.ccv-ab-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Dark from the left so the copy holds against a busy exhibition floor, and
   from the bottom so the caption plate stays legible. */
.ccv-ab-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(16, 16, 18, 0.94) 0%, rgba(16, 16, 18, 0.88) 38%, rgba(16, 16, 18, 0.6) 60%, rgba(16, 16, 18, 0.3) 100%),
    linear-gradient(180deg, rgba(16, 16, 18, 0.45) 0%, rgba(16, 16, 18, 0) 40%);
}

.ccv-ab-hero__inner {
  position: relative;
  width: 100%;
  max-width: var(--ccv-container-wide);
  margin-inline: auto;
  padding-inline: var(--ccv-gutter);
}

.ccv-ab-hero__copy {
  max-width: 38rem;
  display: flex;
  flex-direction: column;
  gap: var(--ccv-space-4);
  color: #fff;
}

.ccv-ab-hero__title {
  margin: 0;
  /* The base heading rule sets dark ink and out-ranks the inherited white on
     .ccv-ab-hero__copy, so state it here. */
  color: #fff;
  font-family: var(--ccv-font-display);
  font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4rem);
  font-weight: var(--ccv-weight-bold);
  line-height: 1.02;
  letter-spacing: -0.02em;
}

.ccv-ab-hero__stand {
  margin: 0;
  font-size: var(--ccv-text-lead);
  line-height: var(--ccv-leading-relaxed);
  color: rgba(255, 255, 255, 0.92);
  max-width: 32rem;
}

.ccv-ab-hero__intro {
  margin: 0;
  font-size: var(--ccv-text-sm);
  line-height: var(--ccv-leading-relaxed);
  color: rgba(255, 255, 255, 0.74);
  max-width: 34rem;
}

.ccv-ab-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ccv-space-3);
  margin-block-start: var(--ccv-space-3);
}

/* The hero breadcrumb sits on dark ground. */
.ccv-ab-hero .ccv-breadcrumb,
.ccv-ab-hero .ccv-breadcrumb a,
.ccv-ab-hero .ccv-breadcrumb span {
  color: rgba(255, 255, 255, 0.72);
}

.ccv-ab-hero .ccv-breadcrumb a:hover { color: #fff; }

.ccv-ab-hero__plate {
  position: absolute;
  inset-block-end: var(--ccv-space-8);
  inset-inline-end: var(--ccv-gutter);
  max-width: 18rem;
  padding: var(--ccv-space-4) var(--ccv-space-5);
  border-radius: var(--ccv-radius);
  background: rgba(16, 16, 18, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
}

.ccv-ab-hero__plate-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  font-family: var(--ccv-font-display);
  font-size: var(--ccv-text-sm);
  font-weight: var(--ccv-weight-semibold);
  line-height: var(--ccv-leading-snug);
}

.ccv-ab-hero__plate-meta {
  display: block;
  margin-block-start: 0.2rem;
  font-size: var(--ccv-text-xs);
  color: rgba(255, 255, 255, 0.74);
}

@media (max-width: 63.99rem) {
  .ccv-ab-hero__plate { display: none; }
  .ccv-ab-hero__scrim {
    background: linear-gradient(180deg, rgba(16, 16, 18, 0.62) 0%, rgba(16, 16, 18, 0.86) 60%, rgba(16, 16, 18, 0.94) 100%);
  }
}

/* ==========================================================================
   2. BRAND STORY — copy left, evidence collage right
   ========================================================================== */
.ccv-ab-story__grid {
  display: grid;
  gap: var(--ccv-space-8);
  align-items: start;
}

@media (min-width: 64rem) {
  .ccv-ab-story__grid { grid-template-columns: 1fr 1fr; gap: var(--ccv-space-10); }
}

.ccv-ab-prose {
  display: flex;
  flex-direction: column;
  gap: var(--ccv-space-4);
  max-width: 34rem;
  margin-block: var(--ccv-space-5) var(--ccv-space-6);
}

.ccv-ab-prose p {
  margin: 0;
  font-size: var(--ccv-text-sm);
  line-height: var(--ccv-leading-relaxed);
  color: var(--ccv-color-text-muted);
  text-align: justify;
  text-justify: inter-word;
  overflow-wrap: break-word;
}

@media (max-width: 39.99rem) {
  .ccv-ab-prose p { text-align: start; }
}

.ccv-ab-prose p:first-child {
  font-size: var(--ccv-text-lead);
  color: var(--ccv-color-text);
}

/* One tall frame and two stacked beside it — the mockup's collage, built from
   whatever number of real images the records actually supply. */
.ccv-ab-collage {
  display: grid;
  gap: var(--ccv-space-3);
  grid-template-columns: 1fr;
}

/* One wide frame across the top, then pairs. An odd last one takes the
   full width, so no hole is left. From 64rem the collage stretches to the
   height of the story beside it, so the two columns end together. */
@media (min-width: 40rem) {
  .ccv-ab-collage { grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(10rem, 1fr); }
  .ccv-ab-collage > .ccv-ab-collage__item:first-child { grid-column: span 2; }
  .ccv-ab-collage > .ccv-ab-collage__item:last-child:nth-child(even) { grid-column: span 2; }
  .ccv-ab-collage > .ccv-ab-collage__item:nth-child(n + 6) { display: none; }
}
@media (min-width: 64rem) {
  .ccv-ab-collage { align-self: stretch; grid-auto-rows: minmax(9rem, 1fr); }
  .ccv-ab-collage > .ccv-ab-collage__item:first-child { grid-row: span 2; }
}

.ccv-ab-collage__item {
  position: relative;
  overflow: hidden;
  border-radius: var(--ccv-radius);
  background: var(--ccv-color-bg-muted);
  aspect-ratio: 4 / 3;
}

@media (min-width: 40rem) {
  .ccv-ab-collage .ccv-ab-collage__item { aspect-ratio: auto; }
}

.ccv-ab-collage__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ccv-ab-collage__cap {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  padding: var(--ccv-space-6) var(--ccv-space-4) var(--ccv-space-3);
  background: linear-gradient(180deg, rgba(16, 16, 18, 0) 0%, rgba(16, 16, 18, 0.78) 100%);
  color: #fff;
  font-size: var(--ccv-text-xs);
  line-height: var(--ccv-leading-snug);
  /* One line: a label, not a caption paragraph. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* The brand's own script mark, held behind the story column. Decorative. */
.ccv-ab-mark {
  position: absolute;
  inset-block-start: 10%;
  inset-inline-start: -2rem;
  width: min(16rem, 22%);
  color: var(--ccv-color-accent);
  opacity: 0.2;
  pointer-events: none;
  z-index: 0;
}

@media (max-width: 74.99rem) { .ccv-ab-mark { display: none; } }

/* ==========================================================================
   3. MISSION / VISION / VALUES / COMMITMENT
   ========================================================================== */
.ccv-ab-pillars { background: var(--ccv-color-bg-muted); }

.ccv-ab-pillars__grid {
  display: grid;
  gap: var(--ccv-space-5);
  grid-template-columns: 1fr;
  grid-auto-rows: 1fr;
  margin-block-start: var(--ccv-space-7);
}

@media (min-width: 40rem) { .ccv-ab-pillars__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .ccv-ab-pillars__grid { grid-template-columns: repeat(4, 1fr); } }

.ccv-ab-pillar {
  display: flex;
  flex-direction: column;
  gap: var(--ccv-space-3);
  height: 100%;
  padding: var(--ccv-space-6);
  background: var(--ccv-color-surface);
  border: var(--ccv-border-hairline) solid var(--ccv-color-border);
  border-radius: var(--ccv-radius-lg);
  box-shadow: var(--ccv-shadow-xs);
}

.ccv-ab-pillar__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--ccv-radius-pill);
  border: 1px solid var(--ccv-color-accent);
  color: var(--ccv-color-accent-ink);
}

.ccv-ab-pillar__title {
  margin: 0;
  font-family: var(--ccv-font-display);
  font-size: var(--ccv-text-h4);
  font-weight: var(--ccv-weight-semibold);
  line-height: var(--ccv-leading-snug);
}

.ccv-ab-pillar__body {
  margin: 0;
  font-size: var(--ccv-text-sm);
  line-height: var(--ccv-leading-relaxed);
  color: var(--ccv-color-text-muted);
}

/* ==========================================================================
   4. WORKSHOP AND TEAM
   ========================================================================== */
/* Top-aligned: the photo column is taller than the list, and centring left
   a gap above the heading. */
.ccv-ab-team__grid {
  display: grid;
  gap: var(--ccv-space-8);
  align-items: start;
}

@media (min-width: 64rem) {
  .ccv-ab-team__grid { grid-template-columns: 1fr 1.1fr; gap: var(--ccv-space-10); }
}

.ccv-ab-checks {
  list-style: none;
  margin: var(--ccv-space-6) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ccv-space-4);
  max-width: 34rem;
}

.ccv-ab-check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--ccv-space-3);
  align-items: start;
  font-size: var(--ccv-text-sm);
  line-height: var(--ccv-leading-relaxed);
  color: var(--ccv-color-text-muted);
}

.ccv-ab-check .ccv-icon {
  margin-block-start: 0.3em;
  color: var(--ccv-color-accent-ink);
}

/* A visible, quiet statement where the mockup shows workshop photography the
   CMS does not hold. Not an error state. */
.ccv-ab-gap {
  margin: var(--ccv-space-6) 0 0;
  padding: var(--ccv-space-4) var(--ccv-space-5);
  border-inline-start: 3px solid var(--ccv-color-accent);
  background: var(--ccv-color-surface);
  border-radius: 0 var(--ccv-radius) var(--ccv-radius) 0;
  font-size: var(--ccv-text-xs);
  line-height: var(--ccv-leading-relaxed);
  color: var(--ccv-color-text-subtle);
  max-width: 44rem;
}

/* ==========================================================================
   5. FEATURED PROJECTS — a wider strip than the three-card grid
   ========================================================================== */
.ccv-ab-projects__grid {
  display: grid;
  gap: var(--ccv-space-4);
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  margin-block-start: var(--ccv-space-7);
}

@media (min-width: 48rem) { .ccv-ab-projects__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 76rem) { .ccv-ab-projects__grid { grid-template-columns: repeat(6, 1fr); } }

/* At six across the card body has to be tighter than the projects hub's. */
.ccv-ab-projects__grid .ccv-pj-card__body { padding: var(--ccv-space-4); }
.ccv-ab-projects__grid .ccv-pj-card__title { font-size: var(--ccv-text-sm); }
.ccv-ab-projects__grid .ccv-pj-card__title { min-height: calc(var(--ccv-text-sm) * 1.35 * 2); }

/* Workshop and team: two construction photographs under the installation shot. */
.ccv-ab-team__more {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ccv-space-3);
  margin-block-start: var(--ccv-space-3);
}

/* "Năng lực đã kiểm chứng": label, capability chips, and the way to the page. */
.ccv-ab-proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ccv-space-4) var(--ccv-space-5);
  margin-block-start: var(--ccv-space-7);
  padding: var(--ccv-space-5) var(--ccv-space-6);
  background: var(--ccv-color-surface);
  border: var(--ccv-border-hairline) solid var(--ccv-color-border);
  border-radius: var(--ccv-radius-lg);
  box-shadow: var(--ccv-shadow-xs);
}
.ccv-ab-proof__label {
  display: inline-flex;
  align-items: center;
  gap: var(--ccv-space-2);
  font-size: var(--ccv-text-sm);
  font-weight: var(--ccv-weight-semibold);
  color: var(--ccv-color-text);
}
.ccv-ab-proof__label .ccv-icon { color: var(--ccv-color-accent-ink); }
.ccv-ab-proof__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ccv-space-2);
  flex: 1 1 24rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ccv-ab-proof__chip {
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--ccv-color-border);
  border-radius: var(--ccv-radius-pill);
  background: var(--ccv-color-bg-muted);
  font-size: var(--ccv-text-xs);
  color: var(--ccv-color-text);
}
.ccv-ab-proof__link { flex: none; }

/* ===== ds/98-page-contact.css ===== */
/* ==========================================================================
   CCV-PHASE-14E-R3 — Contact / Liên hệ

   Page-scoped by the `ccv-ct-` prefix. The hero follows the About page's
   full-bleed pattern, the trust strip reuses `ccv-cp-why`, and the closing CTA
   is the shared component. This layer adds the consultation panel, the form
   controls, the contact and location cards, the quick-consult block and the
   FAQ row.
   ========================================================================== */

/* ==========================================================================
   1. HERO
   ========================================================================== */
.ccv-ct-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-block-start: calc(var(--ccv-header-h) * -1);
  padding-block: calc(var(--ccv-header-h) + var(--ccv-space-7)) var(--ccv-space-8);
  min-height: clamp(22rem, 17rem + 18vh, 30rem);
  display: flex;
  align-items: center;
  background: var(--ccv-color-bg-dark);
}

.ccv-ct-hero__media { position: absolute; inset: 0; z-index: -2; }

.ccv-ct-hero__media img { width: 100%; height: 100%; object-fit: cover; }

.ccv-ct-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg,
    rgba(16, 16, 18, 0.93) 0%, rgba(16, 16, 18, 0.86) 34%,
    rgba(16, 16, 18, 0.55) 58%, rgba(16, 16, 18, 0.25) 100%);
}

@media (max-width: 63.99rem) {
  /* Section 46: keep the booth visible on a phone, don't hide it. */
  .ccv-ct-hero__scrim {
    background: linear-gradient(180deg, rgba(16, 16, 18, 0.58) 0%, rgba(16, 16, 18, 0.88) 55%, rgba(16, 16, 18, 0.94) 100%);
  }
}

.ccv-ct-hero__inner {
  position: relative;
  width: 100%;
  max-width: var(--ccv-container-wide);
  margin-inline: auto;
  padding-inline: var(--ccv-gutter);
}

.ccv-ct-hero__copy {
  max-width: 34rem;
  display: flex;
  flex-direction: column;
  gap: var(--ccv-space-4);
  color: #fff;
}

.ccv-ct-hero__title {
  margin: 0;
  /* The base heading rule sets dark ink; state white here so it wins. */
  color: #fff;
  font-family: var(--ccv-font-display);
  font-size: clamp(2.25rem, 1.5rem + 3vw, 3.5rem);
  font-weight: var(--ccv-weight-bold);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.ccv-ct-hero__stand {
  margin: 0;
  font-size: var(--ccv-text-lead);
  line-height: var(--ccv-leading-relaxed);
  color: rgba(255, 255, 255, 0.92);
  max-width: 26rem;
}

.ccv-ct-hero__intro {
  margin: 0;
  font-size: var(--ccv-text-sm);
  line-height: var(--ccv-leading-relaxed);
  color: rgba(255, 255, 255, 0.74);
  max-width: 30rem;
}

.ccv-ct-hero .ccv-breadcrumb,
.ccv-ct-hero .ccv-breadcrumb a,
.ccv-ct-hero .ccv-breadcrumb span { color: rgba(255, 255, 255, 0.72); }

.ccv-ct-hero .ccv-breadcrumb a:hover { color: #fff; }

/* ==========================================================================
   2. CONSULTATION — form left, contact column right
   ========================================================================== */
.ccv-ct-main__grid {
  display: grid;
  gap: var(--ccv-space-6);
  align-items: start;
}

@media (min-width: 68rem) {
  .ccv-ct-main__grid { grid-template-columns: 1.15fr 0.85fr; gap: var(--ccv-space-7); }
}

.ccv-ct-panel {
  padding: var(--ccv-space-7);
  background: var(--ccv-color-surface);
  border: var(--ccv-border-hairline) solid var(--ccv-color-border);
  border-radius: var(--ccv-radius-lg);
  box-shadow: var(--ccv-shadow-sm);
}

@media (max-width: 39.99rem) {
  .ccv-ct-panel { padding: var(--ccv-space-5); }
}

.ccv-ct-panel__lead {
  margin: var(--ccv-space-3) 0 var(--ccv-space-6);
  font-size: var(--ccv-text-sm);
  line-height: var(--ccv-leading-relaxed);
  color: var(--ccv-color-text-muted);
}

/* ==========================================================================
   3. FORM
   ========================================================================== */
.ccv-ct-form { display: flex; flex-direction: column; gap: var(--ccv-space-5); }

.ccv-ct-row {
  display: grid;
  gap: var(--ccv-space-5);
  grid-template-columns: 1fr;
}

@media (min-width: 40rem) { .ccv-ct-row--2 { grid-template-columns: 1fr 1fr; } }

.ccv-ct-field { display: flex; flex-direction: column; gap: var(--ccv-space-2); }

.ccv-ct-label {
  font-size: var(--ccv-text-sm);
  font-weight: var(--ccv-weight-semibold);
  color: var(--ccv-color-text);
}

.ccv-ct-label__req { color: #b3261e; margin-inline-start: 0.15rem; }

.ccv-ct-label__opt {
  font-weight: 400;
  color: var(--ccv-color-text-subtle);
}

.ccv-ct-input,
.ccv-ct-select,
.ccv-ct-textarea {
  width: 100%;
  /* 16px minimum: anything smaller makes iOS zoom the page on focus. */
  font-size: 1rem;
  font-family: inherit;
  line-height: 1.5;
  color: var(--ccv-color-text);
  background: var(--ccv-color-bg);
  border: 1px solid var(--ccv-color-border-strong);
  border-radius: var(--ccv-radius-sm);
  padding: 0.75rem 0.9rem;
  transition: border-color var(--ccv-transition), box-shadow var(--ccv-transition);
}

.ccv-ct-textarea {
  min-height: 9rem;
  resize: vertical;
}

.ccv-ct-input::placeholder,
.ccv-ct-textarea::placeholder { color: var(--ccv-color-text-subtle); }

.ccv-ct-input:focus-visible,
.ccv-ct-select:focus-visible,
.ccv-ct-textarea:focus-visible {
  outline: none;
  border-color: var(--ccv-color-accent-ink);
  box-shadow: 0 0 0 3px rgba(200, 160, 85, 0.28);
}

.ccv-ct-select {
  appearance: none;
  /* Room for the chevron drawn by the wrapper. */
  padding-inline-end: 2.4rem;
}

.ccv-ct-select-wrap { position: relative; }

.ccv-ct-select-wrap::after {
  content: "";
  position: absolute;
  inset-inline-end: 1rem;
  inset-block-start: 50%;
  width: 0.5rem;
  height: 0.5rem;
  margin-block-start: -0.35rem;
  border-inline-end: 1.5px solid var(--ccv-color-text-subtle);
  border-block-end: 1.5px solid var(--ccv-color-text-subtle);
  transform: rotate(45deg);
  pointer-events: none;
}

/* Invalid state, set by the server on redisplay and by the browser on submit. */
.ccv-ct-input[aria-invalid="true"],
.ccv-ct-textarea[aria-invalid="true"],
.ccv-ct-select[aria-invalid="true"] {
  border-color: #b3261e;
  background: #fdf5f5;
}

.ccv-ct-error {
  font-size: var(--ccv-text-xs);
  color: #b3261e;
}

.ccv-ct-alert {
  display: flex;
  gap: var(--ccv-space-3);
  align-items: flex-start;
  padding: var(--ccv-space-4) var(--ccv-space-5);
  border-radius: var(--ccv-radius);
  font-size: var(--ccv-text-sm);
  line-height: var(--ccv-leading-relaxed);
  margin-block-end: var(--ccv-space-5);
}

.ccv-ct-alert--error {
  background: #fdf3f2;
  border: 1px solid #f0c9c5;
  color: #7d1d16;
}

.ccv-ct-alert--ok {
  background: #f1f7f1;
  border: 1px solid #cbe3cb;
  color: #1e4d24;
}

.ccv-ct-alert__icon { flex: none; margin-block-start: 0.15em; }

.ccv-ct-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ccv-space-4) var(--ccv-space-6);
  margin-block-start: var(--ccv-space-2);
}

.ccv-ct-privacy {
  display: flex;
  align-items: center;
  gap: var(--ccv-space-2);
  font-size: var(--ccv-text-xs);
  color: var(--ccv-color-text-subtle);
}

.ccv-ct-privacy .ccv-icon { color: var(--ccv-color-accent-ink); flex: none; }

@media (max-width: 39.99rem) {
  /* Section 44: a full-width primary action on a phone. */
  .ccv-ct-actions .ccv-btn { width: 100%; justify-content: center; }
}

/* The honeypot: present for bots, gone for people and for screen readers. */
.ccv-ct-hp {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ==========================================================================
   4. CONTACT COLUMN — channels, locations, quick consult
   ========================================================================== */
.ccv-ct-aside { display: flex; flex-direction: column; gap: var(--ccv-space-5); }

.ccv-ct-card {
  padding: var(--ccv-space-6);
  background: var(--ccv-color-surface);
  border: var(--ccv-border-hairline) solid var(--ccv-color-border);
  border-radius: var(--ccv-radius-lg);
  box-shadow: var(--ccv-shadow-xs);
}

.ccv-ct-card__head {
  display: flex;
  align-items: center;
  gap: var(--ccv-space-3);
  margin-block-end: var(--ccv-space-5);
}

.ccv-ct-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  border-radius: var(--ccv-radius-pill);
  border: 1px solid var(--ccv-color-accent);
  color: var(--ccv-color-accent-ink);
}

.ccv-ct-card__title {
  margin: 0;
  font-family: var(--ccv-font-display);
  font-size: var(--ccv-text-h4);
  font-weight: var(--ccv-weight-semibold);
}

.ccv-ct-channels { display: flex; flex-direction: column; gap: var(--ccv-space-5); }

.ccv-ct-channel {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--ccv-space-4);
  align-items: start;
}

.ccv-ct-channel__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  border-radius: var(--ccv-radius-pill);
  background: var(--ccv-color-accent-soft);
  color: var(--ccv-color-accent-ink);
}

.ccv-ct-channel__value {
  display: block;
  font-family: var(--ccv-font-display);
  font-size: var(--ccv-text-h4);
  font-weight: var(--ccv-weight-semibold);
  color: var(--ccv-color-accent-ink);
  overflow-wrap: anywhere;
}

.ccv-ct-channel__value:hover { text-decoration: underline; }

.ccv-ct-channel__note {
  display: block;
  margin-block-start: 0.15rem;
  font-size: var(--ccv-text-xs);
  color: var(--ccv-color-text-subtle);
}

.ccv-ct-places { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--ccv-space-4); }

.ccv-ct-place {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--ccv-space-3);
  align-items: start;
  font-size: var(--ccv-text-sm);
  line-height: var(--ccv-leading-relaxed);
  color: var(--ccv-color-text-muted);
}

.ccv-ct-place .ccv-icon { margin-block-start: 0.3em; color: var(--ccv-color-accent-ink); }

/* The map loads only when it scrolls into view; see loading="lazy". */
.ccv-ct-map {
  position: relative;
  margin-block-start: var(--ccv-space-5);
  border-radius: var(--ccv-radius);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--ccv-color-bg-muted);
}

.ccv-ct-map iframe { width: 100%; height: 100%; border: 0; display: block; }

.ccv-ct-map__link {
  position: absolute;
  inset-block-start: var(--ccv-space-3);
  inset-inline-start: var(--ccv-space-3);
  padding: 0.35rem 0.7rem;
  border-radius: var(--ccv-radius-sm);
  background: var(--ccv-color-surface);
  border: 1px solid var(--ccv-color-border-strong);
  font-size: var(--ccv-text-xs);
  color: var(--ccv-color-accent-ink);
  box-shadow: var(--ccv-shadow-xs);
}

/* Quick consult: a brand-toned block, no stock support photography. */
.ccv-ct-quick {
  position: relative;
  overflow: hidden;
  padding: var(--ccv-space-6);
  border-radius: var(--ccv-radius-lg);
  background: var(--ccv-color-bg-dark);
  color: #fff;
}

.ccv-ct-quick__title {
  margin: 0 0 var(--ccv-space-2);
  font-family: var(--ccv-font-display);
  font-size: var(--ccv-text-h4);
  font-weight: var(--ccv-weight-semibold);
  color: #fff;
}

.ccv-ct-quick__body {
  margin: 0 0 var(--ccv-space-5);
  font-size: var(--ccv-text-sm);
  line-height: var(--ccv-leading-relaxed);
  color: rgba(255, 255, 255, 0.76);
  max-width: 24rem;
}

.ccv-ct-quick__flourish {
  position: absolute;
  inset-block-end: -2rem;
  inset-inline-end: -2rem;
  width: 13rem;
  color: var(--ccv-color-accent);
  opacity: 0.22;
  pointer-events: none;
}

/* ==========================================================================
   5. FAQ ROW
   ========================================================================== */
.ccv-ct-faq { background: var(--ccv-color-bg-muted); }

.ccv-ct-faq__grid {
  display: grid;
  gap: var(--ccv-space-5);
  grid-template-columns: 1fr;
  grid-auto-rows: 1fr;
  margin-block-start: var(--ccv-space-7);
}

@media (min-width: 48rem) { .ccv-ct-faq__grid { grid-template-columns: repeat(3, 1fr); } }

.ccv-ct-faq__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--ccv-space-4);
  align-items: start;
  height: 100%;
  padding: var(--ccv-space-5) var(--ccv-space-6);
  background: var(--ccv-color-surface);
  border: var(--ccv-border-hairline) solid var(--ccv-color-border);
  border-radius: var(--ccv-radius);
}

.ccv-ct-faq__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  border-radius: var(--ccv-radius-pill);
  border: 1px solid var(--ccv-color-accent);
  color: var(--ccv-color-accent-ink);
}

.ccv-ct-faq__q {
  margin: 0 0 0.35rem;
  font-family: var(--ccv-font-display);
  font-size: var(--ccv-text-body);
  font-weight: var(--ccv-weight-semibold);
  line-height: var(--ccv-leading-snug);
}

.ccv-ct-faq__a {
  margin: 0;
  font-size: var(--ccv-text-xs);
  line-height: var(--ccv-leading-relaxed);
  color: var(--ccv-color-text-subtle);
}

/* ===== ds/99-page-editorial.css ===== */
/* ==========================================================================
   CCV-PHASE-14F-R1 — Editorial listings: Cẩm nang / Sự kiện · Knowledge / Events

   One system, two densities. Page-scoped by the `ccv-ed-` prefix; the value
   strip reuses `ccv-cp-why` and the closing CTA is the shared component.

   The two pages differ only by variant class on the grid:
     .ccv-ed-grid--editorial  3 columns, larger cards  (Cẩm nang / Knowledge)
     .ccv-ed-grid--event      4 columns, denser cards  (Sự kiện / Events)
   ========================================================================== */

/* ==========================================================================
   1. HERO — dark, image-led, with the brand line-art
   ========================================================================== */
.ccv-ed-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-block-start: calc(var(--ccv-header-h) * -1);
  padding-block: calc(var(--ccv-header-h) + var(--ccv-space-7)) var(--ccv-space-8);
  min-height: clamp(19rem, 15rem + 14vh, 26rem);
  display: flex;
  align-items: center;
  background: var(--ccv-color-bg-dark);
}

.ccv-ed-hero__media { position: absolute; inset: 0; z-index: -2; }
.ccv-ed-hero__media img { width: 100%; height: 100%; object-fit: cover; }

.ccv-ed-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg,
    rgba(16, 16, 18, 0.92) 0%, rgba(16, 16, 18, 0.84) 38%,
    rgba(16, 16, 18, 0.5) 62%, rgba(16, 16, 18, 0.22) 100%);
}

@media (max-width: 63.99rem) {
  .ccv-ed-hero__scrim {
    background: linear-gradient(180deg, rgba(16, 16, 18, 0.6) 0%, rgba(16, 16, 18, 0.88) 60%, rgba(16, 16, 18, 0.94) 100%);
  }
}

.ccv-ed-hero__inner {
  position: relative;
  width: 100%;
  max-width: var(--ccv-container-wide);
  margin-inline: auto;
  padding-inline: var(--ccv-gutter);
}

.ccv-ed-hero__copy {
  max-width: 36rem;
  display: flex;
  flex-direction: column;
  gap: var(--ccv-space-4);
  color: #fff;
}

.ccv-ed-hero__title {
  margin: 0;
  /* The base heading rule sets dark ink; state white so it wins here. */
  color: #fff;
  font-family: var(--ccv-font-display);
  font-size: clamp(2.25rem, 1.5rem + 3vw, 3.5rem);
  font-weight: var(--ccv-weight-bold);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

/* The mockup's gold second word. */
.ccv-ed-hero__title em {
  font-style: normal;
  color: var(--ccv-color-accent);
}

.ccv-ed-hero__lead {
  margin: 0;
  max-width: 34rem;
  font-size: var(--ccv-text-lead);
  line-height: var(--ccv-leading-relaxed);
  color: rgba(255, 255, 255, 0.86);
}

.ccv-ed-hero__count {
  display: inline-flex;
  align-items: center;
  gap: var(--ccv-space-2);
  font-size: var(--ccv-text-sm);
  color: rgba(255, 255, 255, 0.8);
}

.ccv-ed-hero__count .ccv-icon { color: var(--ccv-color-accent); }

.ccv-ed-hero .ccv-breadcrumb,
.ccv-ed-hero .ccv-breadcrumb a,
.ccv-ed-hero .ccv-breadcrumb span { color: rgba(255, 255, 255, 0.7); }

.ccv-ed-hero .ccv-breadcrumb a:hover { color: #fff; }

/* Brand line-art at the hero's right, behind nothing readable. */
.ccv-ed-hero__mark {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: 4%;
  transform: translateY(-50%);
  width: min(22rem, 26%);
  color: var(--ccv-color-accent);
  opacity: 0.4;
  pointer-events: none;
}

@media (max-width: 74.99rem) { .ccv-ed-hero__mark { display: none; } }

/* ==========================================================================
   2. TABS + SEARCH
   ========================================================================== */
.ccv-ed-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ccv-space-4);
  margin-block-end: var(--ccv-space-7);
}

.ccv-ed-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ccv-space-2);
}

@media (max-width: 47.99rem) {
  /* Section 42: scroll rather than clip. */
  .ccv-ed-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-block-end: var(--ccv-space-2);
    scrollbar-width: thin;
    max-width: 100%;
  }
  .ccv-ed-tabs .ccv-chip { white-space: nowrap; }
}

/* The approved listings show the active category in gold rather than the
   design system's dark fill. Scoped to these tabs, so the chips on the
   project hubs keep the treatment already reviewed there. */
.ccv-ed-tabs .ccv-chip--selected {
  background: var(--ccv-color-accent);
  border-color: var(--ccv-color-accent);
  /* Dark ink on gold: 7.07:1. White on this gold is 2.44:1 and fails AA —
     the Phase 14A contrast decision, unchanged. */
  color: var(--ccv-color-text);
}

.ccv-ed-tabs .ccv-chip--selected:hover { color: var(--ccv-color-text); }

.ccv-ed-search { position: relative; flex: 0 1 22rem; }

@media (max-width: 47.99rem) {
  .ccv-ed-search { flex: 1 1 100%; }
}

.ccv-ed-search__input {
  width: 100%;
  /* 16px minimum, or iOS zooms the page on focus. */
  font-size: 1rem;
  font-family: inherit;
  line-height: 1.5;
  color: var(--ccv-color-text);
  background: var(--ccv-color-surface);
  border: 1px solid var(--ccv-color-border-strong);
  border-radius: var(--ccv-radius-pill);
  padding: 0.65rem 2.6rem 0.65rem 2.8rem;
  transition: border-color var(--ccv-transition), box-shadow var(--ccv-transition);
}

.ccv-ed-search__input::placeholder { color: var(--ccv-color-text-subtle); }

.ccv-ed-search__input:focus-visible {
  outline: none;
  border-color: var(--ccv-color-accent-ink);
  box-shadow: 0 0 0 3px rgba(200, 160, 85, 0.28);
}

.ccv-ed-search__icon {
  position: absolute;
  inset-inline-start: 1rem;
  inset-block-start: 50%;
  transform: translateY(-50%);
  color: var(--ccv-color-text-subtle);
  pointer-events: none;
}

.ccv-ed-search__clear {
  position: absolute;
  inset-inline-end: 0.6rem;
  inset-block-start: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--ccv-radius-pill);
  border: 0;
  background: var(--ccv-color-bg-muted);
  color: var(--ccv-color-text-muted);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}

.ccv-ed-search__clear:hover { color: var(--ccv-color-text); }

/* A line above the grid saying what the reader is looking at. */
.ccv-ed-result {
  margin: calc(var(--ccv-space-5) * -1) 0 var(--ccv-space-6);
  font-size: var(--ccv-text-sm);
  color: var(--ccv-color-text-subtle);
}

.ccv-ed-result strong { color: var(--ccv-color-text); font-weight: var(--ccv-weight-semibold); }

/* ==========================================================================
   3. GRID AND CARDS
   ========================================================================== */
.ccv-ed-grid {
  display: grid;
  gap: var(--ccv-space-5);
  grid-template-columns: 1fr;
  /* Equal cards in every row, not just within one. */
  grid-auto-rows: 1fr;
}

/* Cẩm nang / Knowledge — larger editorial cards, three across. */
@media (min-width: 40rem) { .ccv-ed-grid--editorial { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .ccv-ed-grid--editorial { grid-template-columns: repeat(3, 1fr); } }

/* Sự kiện / Events — denser, four across where there is room. */
@media (min-width: 36rem) { .ccv-ed-grid--event { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 56rem) { .ccv-ed-grid--event { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 78rem) { .ccv-ed-grid--event { grid-template-columns: repeat(4, 1fr); } }

.ccv-ed-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--ccv-color-surface);
  border: var(--ccv-border-hairline) solid var(--ccv-color-border);
  border-radius: var(--ccv-radius);
  overflow: hidden;
  transition: border-color var(--ccv-transition), box-shadow var(--ccv-transition), transform var(--ccv-transition);
}

.ccv-ed-card:hover {
  border-color: var(--ccv-color-border-strong);
  box-shadow: var(--ccv-shadow-md);
  transform: translateY(-2px);
}

.ccv-ed-card__media {
  overflow: hidden;
  background: var(--ccv-color-bg-muted);
  aspect-ratio: 16 / 10;
}

/* An event poster is artwork, not a photograph: contain it so the dates and
   the show name are not cropped away. */
.ccv-ed-grid--event .ccv-ed-card__media { aspect-ratio: 16 / 9; }

.ccv-ed-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--ccv-duration-slow) var(--ccv-ease);
}

.ccv-ed-card:hover .ccv-ed-card__media img { transform: scale(1.04); }

.ccv-ed-card__media--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ccv-color-text-subtle);
}

.ccv-ed-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--ccv-space-3);
  padding: var(--ccv-space-5);
  flex: 1 1 auto;
}

.ccv-ed-card__meta {
  display: flex;
  align-items: center;
  gap: var(--ccv-space-3);
  font-size: var(--ccv-text-xs);
  color: var(--ccv-color-text-subtle);
}

.ccv-ed-card__cat { color: var(--ccv-color-accent-ink); font-weight: var(--ccv-weight-semibold); }

.ccv-ed-card__sep { color: var(--ccv-color-border-strong); }

/* Two reserved title lines and three excerpt lines, so every card in the row
   ends level whatever its record carries. */
.ccv-ed-card__title {
  margin: 0;
  font-family: var(--ccv-font-display);
  font-size: var(--ccv-text-h4);
  font-weight: var(--ccv-weight-semibold);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  min-height: calc(var(--ccv-text-h4) * 1.35 * 2);
}

.ccv-ed-card__excerpt {
  margin: 0;
  font-size: var(--ccv-text-sm);
  line-height: var(--ccv-leading-relaxed);
  color: var(--ccv-color-text-muted);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  min-height: calc(var(--ccv-text-sm) * 1.7 * 3);
}

.ccv-ed-grid--event .ccv-ed-card__title { font-size: var(--ccv-text-body); min-height: calc(var(--ccv-text-body) * 1.35 * 2); }
.ccv-ed-grid--event .ccv-ed-card__excerpt { -webkit-line-clamp: 2; line-clamp: 2; min-height: calc(var(--ccv-text-sm) * 1.7 * 2); }

/* "Đọc thêm" and the gold circular arrow, pinned to the card's foot. */
.ccv-ed-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ccv-space-3);
  margin-block-start: auto;
  padding-block-start: var(--ccv-space-4);
  border-block-start: 1px solid var(--ccv-color-border);
}

.ccv-ed-card__more {
  display: inline-flex;
  align-items: center;
  gap: var(--ccv-space-2);
  font-size: var(--ccv-text-sm);
  font-weight: var(--ccv-weight-semibold);
  color: var(--ccv-color-text);
}

.ccv-ed-card__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex: none;
  border-radius: var(--ccv-radius-pill);
  background: var(--ccv-color-accent-soft);
  color: var(--ccv-color-accent-ink);
  transition: background var(--ccv-transition), color var(--ccv-transition);
}

.ccv-ed-card:hover .ccv-ed-card__arrow {
  background: var(--ccv-color-accent);
  color: var(--ccv-color-text);
}

.ccv-ed-card__link { color: inherit; text-decoration: none; }
.ccv-ed-card__link::after { content: ""; position: absolute; inset: 0; }
.ccv-ed-card__link:hover { color: var(--ccv-color-accent-ink); }

/* ==========================================================================
   4. NO RESULTS
   ========================================================================== */
.ccv-ed-empty {
  padding: var(--ccv-space-9) var(--ccv-space-6);
  text-align: center;
  border: var(--ccv-border-hairline) dashed var(--ccv-color-border-strong);
  border-radius: var(--ccv-radius-lg);
  background: var(--ccv-color-surface);
}

.ccv-ed-empty__title {
  margin: 0 0 var(--ccv-space-2);
  font-family: var(--ccv-font-display);
  font-size: var(--ccv-text-h3);
  font-weight: var(--ccv-weight-semibold);
}

.ccv-ed-empty__body {
  margin: 0 auto var(--ccv-space-6);
  max-width: 32rem;
  font-size: var(--ccv-text-sm);
  line-height: var(--ccv-leading-relaxed);
  color: var(--ccv-color-text-muted);
}

.ccv-ed-empty__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ccv-space-3);
  justify-content: center;
}

/* ==========================================================================
   5. VALUE STRIP
   ========================================================================== */
.ccv-ed-value {
  position: relative;
  overflow: hidden;
  background: var(--ccv-color-bg-muted);
  border-block: 1px solid var(--ccv-color-border);
}

.ccv-ed-value__head {
  display: grid;
  gap: var(--ccv-space-5);
  align-items: end;
}

@media (min-width: 64rem) {
  .ccv-ed-value__head { grid-template-columns: 1.1fr 0.9fr; gap: var(--ccv-space-10); }
}

.ccv-ed-value__desc {
  margin: 0;
  font-size: var(--ccv-text-sm);
  line-height: var(--ccv-leading-relaxed);
  color: var(--ccv-color-text-muted);
}

.ccv-ed-value__grid {
  display: grid;
  gap: var(--ccv-space-4);
  grid-template-columns: 1fr;
  grid-auto-rows: 1fr;
  margin-block-start: var(--ccv-space-7);
}

@media (min-width: 40rem) { .ccv-ed-value__grid { grid-template-columns: repeat(3, 1fr); } }

.ccv-ed-value__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--ccv-space-4);
  align-items: start;
  height: 100%;
  padding: var(--ccv-space-5);
  background: var(--ccv-color-surface);
  border: var(--ccv-border-hairline) solid var(--ccv-color-border);
  border-radius: var(--ccv-radius);
}

.ccv-ed-value__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  border-radius: var(--ccv-radius-pill);
  background: var(--ccv-color-accent-soft);
  color: var(--ccv-color-accent-ink);
}

.ccv-ed-value__title {
  margin: 0 0 0.25rem;
  font-family: var(--ccv-font-display);
  font-size: var(--ccv-text-body);
  font-weight: var(--ccv-weight-semibold);
  line-height: var(--ccv-leading-snug);
}

.ccv-ed-value__note {
  margin: 0;
  font-size: var(--ccv-text-xs);
  line-height: var(--ccv-leading-relaxed);
  color: var(--ccv-color-text-subtle);
}

.ccv-ed-value__mark {
  position: absolute;
  inset-block-end: -2rem;
  inset-inline-end: -1rem;
  width: min(18rem, 24%);
  color: var(--ccv-color-accent);
  opacity: 0.16;
  pointer-events: none;
}

@media (max-width: 74.99rem) { .ccv-ed-value__mark { display: none; } }

/* The editorial CTAs carry a small label above the heading (sections 28, 29). */
.ccv-cta__eyebrow {
  display: block;
  margin-block-end: var(--ccv-space-3);
  color: var(--ccv-color-accent);
}

/* ===== ds/100-page-article.css ===== */
/* ==========================================================================
   CCV-PHASE-14F-R2 — Editorial article detail: Sự kiện / Cẩm nang

   Page-scoped by the `ccv-ar-` prefix. Used only by the editorial detail
   template; project and booth-design detail keep the case-study template
   untouched (ticket sections 2, 52).

   Body content comes from the frozen Phase 13 corpus, so everything under
   `.ccv-ar-body` styles legacy CMS markup by element rather than by class.
   ========================================================================== */

/* ==========================================================================
   1. HEADER
   ========================================================================== */
.ccv-ar-head {
  position: relative;
  overflow: hidden;
  padding-block: var(--ccv-space-7) var(--ccv-space-6);
  background: var(--ccv-color-bg);
}

/* Wider than the reading measure. Vietnamese editorial titles are long — the
   ITE HCMC 2026 headline is 85 characters — and at 46rem they stacked into
   four tall lines with the right half of the header empty. 58rem stops short
   of the brand mark, which starts around 62rem. */
.ccv-ar-head__inner { position: relative; max-width: 58rem; }

.ccv-ar-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.85rem;
  border-radius: var(--ccv-radius-pill);
  background: var(--ccv-color-accent-soft);
  border: 1px solid var(--ccv-color-accent);
  color: var(--ccv-color-accent-ink);
  font-size: var(--ccv-text-xs);
  font-weight: var(--ccv-weight-semibold);
  letter-spacing: 0.04em;
}

.ccv-ar-title {
  margin: var(--ccv-space-4) 0 0;
  font-family: var(--ccv-font-display);
  /* Smaller than a hero headline: this sits above a long body, and at 3rem a
     long title dominated the whole first screen. */
  font-size: clamp(1.625rem, 1.1rem + 1.9vw, 2.375rem);
  font-weight: var(--ccv-weight-bold);
  line-height: 1.18;
  letter-spacing: -0.015em;
  /* No clamp: an editorial headline is not truncated (section 5). */
  text-wrap: balance;
}

.ccv-ar-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ccv-space-3) var(--ccv-space-6);
  margin-block-start: var(--ccv-space-5);
  font-size: var(--ccv-text-sm);
  color: var(--ccv-color-text-subtle);
}

.ccv-ar-meta__item { display: inline-flex; align-items: center; gap: var(--ccv-space-2); }
.ccv-ar-meta__item .ccv-icon { color: var(--ccv-color-accent-ink); flex: none; }

/* The deck is prose, so it keeps the reading measure even though the title
   above it is allowed to run wider. */
.ccv-ar-deck {
  max-width: 46rem;
  margin: var(--ccv-space-5) 0 0;
  font-size: var(--ccv-text-lead);
  line-height: var(--ccv-leading-relaxed);
  color: var(--ccv-color-text-muted);
}

/* The brand script mark at the header's right, as in the approved mockup. */
.ccv-ar-head__mark {
  position: absolute;
  inset-block-start: 8%;
  inset-inline-end: -2rem;
  width: min(20rem, 30%);
  color: var(--ccv-color-accent);
  opacity: 0.34;
  pointer-events: none;
}

@media (max-width: 74.99rem) { .ccv-ar-head__mark { display: none; } }

/* ==========================================================================
   2. LAYOUT — reading column left, sticky sidebar right
   ========================================================================== */
.ccv-ar-layout {
  display: grid;
  gap: var(--ccv-space-8);
  align-items: start;
}

@media (min-width: 68rem) {
  /* The reading column is capped, not stretched to the monitor (section 11). */
  .ccv-ar-layout { grid-template-columns: minmax(0, 1fr) 21rem; gap: var(--ccv-space-9); }
}

.ccv-ar-main { min-width: 0; max-width: 46rem; }

.ccv-ar-side { display: flex; flex-direction: column; gap: var(--ccv-space-5); }

@media (min-width: 68rem) {
  .ccv-ar-side {
    position: sticky;
    /* Clear of the sticky header, and never taller than the viewport, so it
       cannot overlap the footer (section 13). */
    top: calc(var(--ccv-header-h) + var(--ccv-space-5));
    max-height: calc(100vh - var(--ccv-header-h) - var(--ccv-space-8));
    overflow-y: auto;
    scrollbar-width: thin;
  }
}

/* ==========================================================================
   3. FEATURED IMAGE
   ========================================================================== */
.ccv-ar-hero {
  margin: 0 0 var(--ccv-space-7);
  border-radius: var(--ccv-radius-lg);
  overflow: hidden;
  background: var(--ccv-color-bg-muted);
}

/* The box stays 16:9 so the space is reserved before the image loads, but the
   image is contained rather than cropped: an event poster is mostly type, and
   `cover` cut the venue line off the bottom of it (section 43). A 16:9 photo
   fills the box either way, and the muted panel behind a portrait poster is
   the honest cost of showing all of it. */
.ccv-ar-hero img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
}

.ccv-ar-hero figcaption {
  padding: var(--ccv-space-3) var(--ccv-space-4);
  font-size: var(--ccv-text-xs);
  line-height: var(--ccv-leading-relaxed);
  color: var(--ccv-color-text-subtle);
  text-align: center;
  background: var(--ccv-color-bg-muted);
}

/* ==========================================================================
   4. TABLE OF CONTENTS
   ========================================================================== */
.ccv-ar-toc {
  padding: var(--ccv-space-5) var(--ccv-space-6);
  background: var(--ccv-color-surface);
  border: var(--ccv-border-hairline) solid var(--ccv-color-border);
  border-radius: var(--ccv-radius-lg);
  box-shadow: var(--ccv-shadow-xs);
}

.ccv-ar-toc__head {
  display: flex;
  align-items: center;
  gap: var(--ccv-space-3);
  margin-block-end: var(--ccv-space-4);
}

.ccv-ar-toc__title {
  margin: 0;
  font-family: var(--ccv-font-display);
  font-size: var(--ccv-text-h4);
  font-weight: var(--ccv-weight-semibold);
}

.ccv-ar-toc__head .ccv-icon { color: var(--ccv-color-accent-ink); flex: none; }

.ccv-ar-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: ccv-toc;
  display: flex;
  flex-direction: column;
  gap: var(--ccv-space-1);
}

.ccv-ar-toc__item { counter-increment: ccv-toc; }
.ccv-ar-toc__item--sub { padding-inline-start: var(--ccv-space-5); }

.ccv-ar-toc__link {
  display: flex;
  gap: var(--ccv-space-2);
  padding: 0.35rem 0;
  font-size: var(--ccv-text-sm);
  line-height: var(--ccv-leading-snug);
  color: var(--ccv-color-text-muted);
  text-decoration: none;
}

/* The legacy WYSIWYG marked some paragraphs of prose as headings, so a stored
   H2 can be 200 characters long. Those still belong in the list — the section
   is real and anchored — but a whole sentence is not a usable label, so the
   entry is clamped to two lines. The full text stays in the link's title. */
.ccv-ar-toc__link > span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.ccv-ar-toc__link::before {
  content: counter(ccv-toc) ".";
  flex: none;
  color: var(--ccv-color-accent-ink);
  font-variant-numeric: tabular-nums;
}

.ccv-ar-toc__item--sub .ccv-ar-toc__link::before { content: "–"; }

.ccv-ar-toc__link:hover { color: var(--ccv-color-accent-ink); }

/* Set by the reading-position script; degrades to nothing without it. */
.ccv-ar-toc__link.is-current {
  color: var(--ccv-color-text);
  font-weight: var(--ccv-weight-semibold);
}

/* On a phone the contents collapse rather than pushing the article down. */
.ccv-ar-toc--inline { margin-block-end: var(--ccv-space-7); }

.ccv-ar-toc--inline > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ccv-space-3);
  cursor: pointer;
  list-style: none;
  font-family: var(--ccv-font-display);
  font-size: var(--ccv-text-h4);
  font-weight: var(--ccv-weight-semibold);
}

.ccv-ar-toc--inline > summary::-webkit-details-marker { display: none; }
.ccv-ar-toc--inline > summary::marker { content: ""; }
.ccv-ar-toc--inline[open] > summary { margin-block-end: var(--ccv-space-4); }
.ccv-ar-toc--inline .ccv-ar-toc__sign { transition: transform var(--ccv-transition); }
.ccv-ar-toc--inline[open] .ccv-ar-toc__sign { transform: rotate(180deg); }

@media (min-width: 68rem) { .ccv-ar-toc--inline { display: none; } }
@media (max-width: 67.99rem) { .ccv-ar-side .ccv-ar-toc { display: none; } }

/* Anchor targets clear the sticky header. */
.ccv-ar-body :is(h2, h3, h4)[id] { scroll-margin-top: calc(var(--ccv-header-h) + var(--ccv-space-5)); }

/* ==========================================================================
   5. BODY TYPOGRAPHY — legacy CMS markup, styled by element
   ========================================================================== */
.ccv-ar-body {
  font-size: var(--ccv-text-body);
  line-height: var(--ccv-leading-relaxed);
  color: var(--ccv-color-text-muted);
}

.ccv-ar-body > * + * { margin-block-start: var(--ccv-space-5); }

.ccv-ar-body p { margin: 0; }

.ccv-ar-body h2 {
  margin-block-start: var(--ccv-space-9);
  font-family: var(--ccv-font-display);
  font-size: var(--ccv-text-h3);
  font-weight: var(--ccv-weight-bold);
  line-height: var(--ccv-leading-snug);
  color: var(--ccv-color-text);
}

.ccv-ar-body h3 {
  margin-block-start: var(--ccv-space-7);
  font-family: var(--ccv-font-display);
  font-size: var(--ccv-text-h4);
  font-weight: var(--ccv-weight-semibold);
  line-height: var(--ccv-leading-snug);
  color: var(--ccv-color-text);
}

.ccv-ar-body h4 {
  margin-block-start: var(--ccv-space-6);
  font-size: var(--ccv-text-body);
  font-weight: var(--ccv-weight-semibold);
  color: var(--ccv-color-text);
}

.ccv-ar-body :is(strong, b) { color: var(--ccv-color-text); font-weight: var(--ccv-weight-semibold); }

.ccv-ar-body a {
  color: var(--ccv-color-accent-ink);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
}

.ccv-ar-body a:hover { text-decoration-thickness: 2px; }

.ccv-ar-body :is(ul, ol) {
  margin: 0;
  padding-inline-start: var(--ccv-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--ccv-space-3);
}

.ccv-ar-body li { padding-inline-start: var(--ccv-space-1); }
.ccv-ar-body li::marker { color: var(--ccv-color-accent-ink); }

.ccv-ar-body blockquote {
  margin: 0;
  padding: var(--ccv-space-5) var(--ccv-space-6);
  border-inline-start: 3px solid var(--ccv-color-accent);
  background: var(--ccv-color-bg-muted);
  border-radius: 0 var(--ccv-radius) var(--ccv-radius) 0;
  font-family: var(--ccv-font-display);
  font-size: var(--ccv-text-lead);
  line-height: 1.5;
  color: var(--ccv-color-text);
}

.ccv-ar-body blockquote p { margin: 0; }

.ccv-ar-body :is(img) {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--ccv-radius);
  background: var(--ccv-color-bg-muted);
}

.ccv-ar-body img[data-ccv-zoom] { cursor: zoom-in; }

.ccv-ar-body figure { margin: 0; }

.ccv-ar-body figcaption {
  margin-block-start: var(--ccv-space-3);
  font-size: var(--ccv-text-xs);
  line-height: var(--ccv-leading-relaxed);
  color: var(--ccv-color-text-subtle);
  text-align: center;
}

.ccv-ar-body hr {
  border: 0;
  border-block-start: 1px solid var(--ccv-color-border);
  margin-block: var(--ccv-space-7);
}

/* The single closing CTA (section 29). A child of the layout grid, spanning
   both tracks: the sidebar has finished long before the end of a long article,
   so a CTA confined to the reading column left an empty half beside it. */
.ccv-ar-cta {
  grid-column: 1 / -1;
  margin-block-start: var(--ccv-space-9);
}

/* Tables: a scrolling region on a phone, never a broken layout. */
.ccv-ar-table {
  overflow-x: auto;
  border: var(--ccv-border-hairline) solid var(--ccv-color-border);
  border-radius: var(--ccv-radius);
}

.ccv-ar-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ccv-text-sm);
}

.ccv-ar-table :is(th, td) {
  padding: var(--ccv-space-3) var(--ccv-space-4);
  text-align: start;
  border-block-end: 1px solid var(--ccv-color-border);
  vertical-align: top;
}

.ccv-ar-table th {
  background: var(--ccv-color-bg-muted);
  color: var(--ccv-color-text);
  font-weight: var(--ccv-weight-semibold);
  white-space: nowrap;
}

.ccv-ar-table tr:last-child :is(th, td) { border-block-end: 0; }

.ccv-ar-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--ccv-radius);
  overflow: hidden;
  background: var(--ccv-color-bg-muted);
}

.ccv-ar-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ==========================================================================
   6. SIDEBAR CARDS
   ========================================================================== */
.ccv-ar-card {
  padding: var(--ccv-space-6);
  background: var(--ccv-color-surface);
  border: var(--ccv-border-hairline) solid var(--ccv-color-border);
  border-radius: var(--ccv-radius-lg);
  box-shadow: var(--ccv-shadow-xs);
}

.ccv-ar-card__head {
  display: flex;
  align-items: center;
  gap: var(--ccv-space-3);
  margin-block-end: var(--ccv-space-4);
}

.ccv-ar-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  border-radius: var(--ccv-radius-pill);
  border: 1px solid var(--ccv-color-accent);
  color: var(--ccv-color-accent-ink);
}

.ccv-ar-card__title {
  margin: 0;
  font-family: var(--ccv-font-display);
  font-size: var(--ccv-text-h4);
  font-weight: var(--ccv-weight-semibold);
}

.ccv-ar-card__body {
  margin: 0 0 var(--ccv-space-5);
  font-size: var(--ccv-text-sm);
  line-height: var(--ccv-leading-relaxed);
  color: var(--ccv-color-text-muted);
}

.ccv-ar-channel {
  display: flex;
  align-items: center;
  gap: var(--ccv-space-3);
  margin-block-end: var(--ccv-space-4);
  font-family: var(--ccv-font-display);
  font-size: var(--ccv-text-body);
  font-weight: var(--ccv-weight-semibold);
  color: var(--ccv-color-accent-ink);
  overflow-wrap: anywhere;
}

.ccv-ar-channel__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
  border-radius: var(--ccv-radius-pill);
  background: var(--ccv-color-accent-soft);
}

.ccv-ar-channel:hover { text-decoration: underline; }

/* Compact related list in the sidebar. */
.ccv-ar-mini { display: flex; flex-direction: column; gap: var(--ccv-space-4); }

.ccv-ar-mini__item {
  position: relative;
  display: grid;
  grid-template-columns: 5.25rem 1fr;
  gap: var(--ccv-space-3);
  align-items: start;
}

.ccv-ar-mini__media {
  aspect-ratio: 4 / 3;
  border-radius: var(--ccv-radius-sm);
  overflow: hidden;
  background: var(--ccv-color-bg-muted);
}

.ccv-ar-mini__media img { width: 100%; height: 100%; object-fit: cover; }

.ccv-ar-mini__title {
  margin: 0;
  font-size: var(--ccv-text-sm);
  font-weight: var(--ccv-weight-semibold);
  line-height: 1.35;
  color: var(--ccv-color-text);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.ccv-ar-mini__date {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-block-start: 0.3rem;
  font-size: var(--ccv-text-xs);
  color: var(--ccv-color-text-subtle);
}

.ccv-ar-mini__link { color: inherit; text-decoration: none; }
.ccv-ar-mini__link::after { content: ""; position: absolute; inset: 0; }
.ccv-ar-mini__item:hover .ccv-ar-mini__title { color: var(--ccv-color-accent-ink); }

/* ==========================================================================
   7. LIGHTBOX for body images
   ========================================================================== */
.ccv-ar-zoom {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ccv-space-6);
  background: rgba(12, 12, 14, 0.9);
}

.ccv-ar-zoom img {
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--ccv-radius);
  object-fit: contain;
}

.ccv-ar-zoom__close {
  position: absolute;
  inset-block-start: var(--ccv-space-5);
  inset-inline-end: var(--ccv-space-5);
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--ccv-radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.ccv-ar-zoom__close:hover { background: rgba(0, 0, 0, 0.7); }

@media (prefers-reduced-motion: reduce) {
  .ccv-ar-zoom { transition: none; }
}