/* Cerro Verde Advisory — flattened design tokens */

/* --- tokens/fonts.css --- */
/* Cerro Verde Advisory — typefaces
   SOURCE OF TRUTH: Cerro_Verde_Style_Guide.docx declares Georgia as both the
   major (heading) and default run font, at 11pt / 1.375 line. Verdana is the companion
   sans for UI chrome — Matthew Carter designed both faces as a matched pair. Both ship on every mainstream
   OS, so both are declared via local() rather than hosted files. */
@font-face{font-family:"CV Serif";font-style:normal;font-weight:400;font-display:swap;src:local("Georgia"),local("Georgia Pro"),local("Times New Roman"),local("Tinos")}
@font-face{font-family:"CV Serif";font-style:italic;font-weight:400;font-display:swap;src:local("Georgia Italic"),local("Georgia-Italic"),local("Georgia Pro Italic"),local("Times New Roman Italic")}
@font-face{font-family:"CV Serif";font-style:normal;font-weight:700;font-display:swap;src:local("Georgia Bold"),local("Georgia-Bold"),local("Georgia Pro Bold"),local("Times New Roman Bold")}
@font-face{font-family:"CV Serif";font-style:italic;font-weight:700;font-display:swap;src:local("Georgia Bold Italic"),local("Georgia-BoldItalic"),local("Times New Roman Bold Italic")}

@font-face{font-family:"CV Sans";font-style:normal;font-weight:400;font-display:swap;src:local("Verdana"),local("Verdana Regular"),local("DejaVu Sans"),local("Bitstream Vera Sans")}
@font-face{font-family:"CV Sans";font-style:italic;font-weight:400;font-display:swap;src:local("Verdana Italic"),local("Verdana-Italic"),local("DejaVu Sans Oblique")}
@font-face{font-family:"CV Sans";font-style:normal;font-weight:700;font-display:swap;src:local("Verdana Bold"),local("Verdana-Bold"),local("DejaVu Sans Bold")}

/* --- tokens/colors.css --- */
/* Palette — verbatim from Colour Codes.xlsx. Do not add hues. */
:root{
  /* base ramp */
  --cv-charcoal:#1A1A1A;
  --cv-forest:#1F4A23;
  --cv-sage:#697761;
  --cv-slate:#757263;
  --cv-ash:#AAAAAA;
  --cv-linen:#E1D7C5;      /* matches the supplied logo artwork; PMS 9183 C is the print match */
  --cv-parchment:#F5F2EE;
  --cv-white:#FFFFFF;

  /* derived tints & shades — mixed from the base ramp only */
  --cv-sage-90:#7A8772;
  --cv-sage-70:#9AA58F;    /* matches docx theme accent4 */
  --cv-sage-40:#C4CBBD;
  --cv-sage-15:#EEF0EC;
  --cv-forest-dark:#143017;
  --cv-linen-60:#EDE7DC;
  --cv-linen-25:#F8F5F0;
  --cv-charcoal-70:#5C5C5C;
  --cv-charcoal-10:#E6E6E6;
  --cv-hairline:#DCD8D2;

  /* ── semantic aliases ───────────────────────────── */
  --cv-text-primary:var(--cv-charcoal);
  --cv-text-secondary:var(--cv-slate);
  --cv-text-muted:var(--cv-ash);
  --cv-text-accent:var(--cv-sage);
  --cv-text-inverse:var(--cv-white);
  --cv-text-on-sage:var(--cv-white);
  --cv-text-on-linen:var(--cv-charcoal);

  --cv-surface-page:var(--cv-white);
  --cv-surface-raised:var(--cv-white);
  --cv-surface-sunken:var(--cv-parchment);
  --cv-surface-tinted:var(--cv-linen-25);
  --cv-surface-warm:var(--cv-linen);
  --cv-surface-deep:var(--cv-sage);
  --cv-surface-ink:var(--cv-charcoal);
  --cv-surface-forest:var(--cv-forest);

  --cv-border-hairline:var(--cv-hairline);
  --cv-border-strong:var(--cv-slate);
  --cv-border-accent:var(--cv-sage);
  --cv-border-ink:var(--cv-charcoal);

  --cv-action-primary-bg:var(--cv-sage);
  --cv-action-primary-bg-hover:var(--cv-forest);
  --cv-action-primary-bg-active:var(--cv-forest-dark);
  --cv-action-primary-fg:var(--cv-white);
  --cv-action-secondary-fg:var(--cv-charcoal);
  --cv-action-secondary-border:var(--cv-charcoal);
  --cv-action-quiet-fg:var(--cv-sage);
  --cv-action-disabled-bg:var(--cv-charcoal-10);
  --cv-action-disabled-fg:var(--cv-ash);

  --cv-accent-warm:var(--cv-linen);

  --cv-focus-ring:var(--cv-sage);
  --cv-link:var(--cv-sage);               /* docx theme hlink */
  --cv-link-visited:#4A5240;              /* docx theme folHlink */

  /* status — derived from the brand ramp, no new hues introduced */
  --cv-status-positive:var(--cv-forest);
  --cv-status-attention:#8A6A3B;
  --cv-status-critical:#7A2E22;
  --cv-status-neutral:var(--cv-slate);
}

/* --- tokens/typography.css --- */
/* Type — Georgia ("CV Serif") is the brand voice. Verdana ("CV Sans") carries UI chrome only.
   Carter designed both for Microsoft in 1996; they share a skeleton and an x-height. */
:root{
  --cv-font-serif:"CV Serif",Georgia,"Times New Roman",serif;
  --cv-font-sans:"CV Sans",Verdana,Geneva,Tahoma,sans-serif;
  --cv-font-mono:"SFMono-Regular",Menlo,Consolas,monospace;

  --cv-font-body:var(--cv-font-serif);
  --cv-font-display:var(--cv-font-serif);
  --cv-font-ui:var(--cv-font-sans);
  --cv-font-numeric:var(--cv-font-sans);

  /* screen scale (px) */
  --cv-text-display-1:56px;
  --cv-text-display-2:44px;
  --cv-text-h1:36px;
  --cv-text-h2:28px;
  --cv-text-h3:22px;
  --cv-text-lead:20px;
  --cv-text-body-lg:18px;
  --cv-text-body:16px;
  --cv-text-body-sm:14px;
  --cv-text-label:13px;
  --cv-text-caption:12px;
  --cv-text-micro:11px;

  /* print scale (pt) — mirrors the Word styles exactly */
  --cv-doc-h1:28pt; /* @kind font */
  --cv-doc-h2:20pt; /* @kind font */
  --cv-doc-h3:11pt; /* @kind font */
  --cv-doc-numbered-h1:20pt; /* @kind font */
  --cv-doc-numbered-h2:16pt; /* @kind font */
  --cv-doc-lead:12pt; /* @kind font */
  --cv-doc-quote:14pt; /* @kind font */
  --cv-doc-body:11pt; /* @kind font */
  --cv-doc-bullet-sub:10pt; /* @kind font */
  --cv-doc-caption:9pt; /* @kind font */
  --cv-doc-footer:8pt; /* @kind font */

  --cv-leading-tight:1.15; /* @kind other */
  --cv-leading-snug:1.25; /* @kind other */   /* Word CV Bullet, w:line 300 */
  --cv-leading-body:1.375; /* @kind other */  /* Word docDefaults, w:line 330 */
  --cv-leading-lead:1.333; /* @kind other */  /* Word CV Intro Lead, w:line 320 */
  --cv-leading-loose:1.6; /* @kind other */

  --cv-tracking-tight:-0.01em; /* @kind other */
  --cv-tracking-normal:0; /* @kind other */
  --cv-tracking-label:0.12em; /* @kind other */   /* CV Heading 3 / CV Caption, all-caps */
  --cv-tracking-wordmark:0.22em; /* @kind other *//* logotype lockup */

  --cv-weight-regular:400; /* @kind font */
  --cv-weight-medium:700; /* @kind font */ /* Verdana has no 500 — UI labels use bold */
  --cv-weight-bold:700; /* @kind font */

  --cv-measure-prose:68ch; /* @kind spacing */
  --cv-measure-lead:56ch; /* @kind spacing */
}

/* --- tokens/spacing.css --- */
/* 4px base grid. Print equivalents follow the Word paragraph spacing (twips/20 = pt). */
:root{
  --cv-space-0:0;
  --cv-space-1:4px;
  --cv-space-2:8px;
  --cv-space-3:12px;
  --cv-space-4:16px;
  --cv-space-5:20px;
  --cv-space-6:24px;
  --cv-space-8:32px;
  --cv-space-10:40px;
  --cv-space-12:48px;
  --cv-space-16:64px;
  --cv-space-20:80px;
  --cv-space-24:96px;
  --cv-space-32:128px;

  /* document rhythm, straight from the .docx */
  --cv-doc-space-after-body:8pt; /* @kind spacing */     /* w:after 160 */
  --cv-doc-space-after-h1:12pt;      /* w:after 240 */
  --cv-doc-space-before-h2:18pt;     /* w:before 360 */
  --cv-doc-space-before-h3:14pt;     /* w:before 280 */
  --cv-doc-quote-indent:0.4in; /* @kind spacing */       /* w:ind left 576 */

  /* layout */
  --cv-container-max:1200px;
  --cv-container-prose:760px;
  --cv-gutter:24px;
  --cv-gutter-lg:48px;
  --cv-section-y:96px;
  --cv-section-y-sm:64px;
}

/* --- tokens/shape.css --- */
/* The mark is a hard-cut circle with square terminals. Corners stay near-square. */
:root{
  --cv-radius-none:0;
  --cv-radius-sm:2px;
  --cv-radius-md:4px;
  --cv-radius-pill:999px;
  --cv-radius-circle:50%;

  --cv-border-width-hairline:1px; /* @kind other */
  --cv-border-width-strong:2px; /* @kind other */
  --cv-border-width-rule:3px; /* @kind other */    /* pull-quote left rule, w:sz 18 = 2.25pt */

  --cv-radius-control:var(--cv-radius-sm);
  --cv-radius-card:var(--cv-radius-sm);
  --cv-radius-badge:var(--cv-radius-pill);
}

/* --- tokens/elevation.css --- */
/* Elevation is nearly flat: hairlines do the work, shadow is a last resort. */
:root{
  --cv-shadow-none:none;
  --cv-shadow-hairline:inset 0 0 0 1px var(--cv-hairline);
  --cv-shadow-sm:0 1px 2px rgba(26,26,26,0.05);
  --cv-shadow-md:0 8px 24px -14px rgba(26,26,26,0.22);
  --cv-shadow-lg:0 24px 60px -28px rgba(26,26,26,0.30);
  --cv-shadow-focus:0 0 0 2px var(--cv-white),0 0 0 4px var(--cv-sage);
  --cv-overlay-scrim:rgba(26,26,26,0.55);
  --cv-image-scrim:linear-gradient(180deg,rgba(26,26,26,0) 35%,rgba(26,26,26,0.62) 100%); /* @kind color */
}

/* --- tokens/motion.css --- */
/* Restrained: opacity and 1–2px position. No bounce, no spring, no scale-up. */
:root{
  --cv-duration-instant:80ms; /* @kind other */
  --cv-duration-fast:160ms; /* @kind other */
  --cv-duration-base:240ms; /* @kind other */
  --cv-duration-slow:420ms; /* @kind other */
  --cv-ease-standard:cubic-bezier(0.2,0.6,0.2,1); /* @kind other */
  --cv-ease-exit:cubic-bezier(0.4,0,1,1); /* @kind other */
  --cv-ease-enter:cubic-bezier(0,0,0.2,1); /* @kind other */
  --cv-transition-control:color var(--cv-duration-fast) var(--cv-ease-standard),background-color var(--cv-duration-fast) var(--cv-ease-standard),border-color var(--cv-duration-fast) var(--cv-ease-standard),box-shadow var(--cv-duration-fast) var(--cv-ease-standard); /* @kind other */
  --cv-lift-hover:-1px;
  --cv-press-shift:1px;
}

/* --- tokens/base.css --- */
/* Minimal global defaults. Components carry their own styling inline. */
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--cv-font-body);font-size:var(--cv-text-body);line-height:var(--cv-leading-body);color:var(--cv-text-primary);background:var(--cv-surface-page);-webkit-font-smoothing:antialiased}
a{color:var(--cv-link);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;transition:var(--cv-transition-control)}
a:hover{color:var(--cv-forest);text-decoration-color:var(--cv-sage)}
a:visited{color:var(--cv-link-visited)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none;box-shadow:var(--cv-shadow-focus)}
::selection{background:var(--cv-linen);color:var(--cv-charcoal)}
h1,h2,h3,h4,h5,h6{font-family:var(--cv-font-display);font-weight:var(--cv-weight-regular);line-height:var(--cv-leading-tight);margin:0}
p{margin:0 0 var(--cv-space-4)}
hr{border:0;border-top:1px solid var(--cv-border-hairline);margin:var(--cv-space-8) 0}
img{max-width:100%;display:block}

/* --- responsive.css --- */
/* Website kit — responsive layer.
   Section layouts are authored as inline React styles, so the stacking rules
   here need !important to win. Type and rhythm scale by re-declaring tokens. */

/* ---- Hero: one statement over the waves, at every width ----
   The section layouts are inline React styles, so these need !important to win.
   The statement panel is its own full-viewport screen; the supporting copy and
   buttons live below the fold on the same photograph. */
.cv-hero{min-height:100vh !important;min-height:100svh !important;align-items:flex-start !important}
.cv-hero>img{object-position:50% 55%}
.cv-hero-inner{display:flex !important;flex-direction:column;max-width:none !important;padding-top:0 !important;padding-bottom:var(--cv-space-20) !important}
.cv-hero-statement{position:relative;box-sizing:border-box;min-height:100vh;min-height:100svh;padding-top:84px;display:flex;align-items:center;container-type:inline-size}
/* The line is set to the panel's own width, so it fills the screen at any size.
   cqw (not vw) keeps it honest when a scrollbar is taking room. */
.cv-hero-statement h1{margin:0 !important;font-size:calc(100cqw / 13.4) !important;white-space:nowrap;letter-spacing:-0.02em !important;max-width:none}
.cv-hero-statement::after{content:'\2193';position:absolute;left:0;bottom:var(--cv-space-10);font-family:var(--cv-font-ui);font-size:18px;color:rgba(255,255,255,0.7);animation:cv-hero-cue 2.4s var(--cv-ease-standard) infinite}
.cv-hero-support{margin-top:var(--cv-space-12)}

/* ---- Tablet ---- */
@media (max-width:1024px){
  :root{--cv-gutter-lg:32px;--cv-section-y:72px;--cv-section-y-sm:52px;--cv-text-display-1:44px;--cv-text-display-2:34px;--cv-text-h1:30px}
  .cv-split{grid-template-columns:1fr !important;gap:var(--cv-space-10) !important}
  .cv-person{grid-template-columns:260px 1fr !important;gap:var(--cv-space-8) !important}
  .cv-footer-grid{grid-template-columns:1fr 1fr !important;gap:var(--cv-space-8) !important}
}

/* nav has no room for the inline links below ~1024px — "Who we work with" needs
   more room than the band 900–1024px can give it, so the drawer takes over there */
@media (max-width:1024px){
  .cv-nav-links{display:none !important}
  .cv-nav-toggle{display:inline-flex !important}
}

/* ---- Mobile ---- */
@media (max-width:760px){
  :root{--cv-gutter-lg:20px;--cv-section-y:56px;--cv-section-y-sm:40px;
    --cv-text-display-1:32px;--cv-text-display-2:26px;--cv-text-h1:25px;--cv-text-h2:21px;--cv-text-h3:18px;
    --cv-text-lead:17px;--cv-text-body-lg:16px}

  /* nav: drawer rules live in the 900px query above */

  /* hero: only the buttons need a mobile shape — the panel rules are shared above */
  .cv-hero>img{object-position:50% 60%}
  .cv-hero-inner{padding-bottom:var(--cv-space-16) !important}
  .cv-hero-statement::after{bottom:var(--cv-space-8)}
  .cv-hero-actions{flex-direction:column !important;align-items:stretch !important;gap:var(--cv-space-4) !important}
  .cv-hero-actions>*{width:100%}

  /* pull-quote carousel */
  .cv-quotes figure{min-height:420px !important}
  .cv-quotes blockquote{padding:var(--cv-space-10) var(--cv-gutter-lg) var(--cv-space-24) !important}
  .cv-quotes-controls{left:var(--cv-gutter-lg) !important;right:var(--cv-gutter-lg) !important;bottom:var(--cv-space-6) !important;justify-content:space-between !important}

  /* people */
  .cv-person{grid-template-columns:1fr !important;gap:var(--cv-space-6) !important}
  .cv-person>img{max-width:260px}

  /* numbered expertise list */
  .cv-numbered li{grid-template-columns:44px 1fr !important;gap:var(--cv-space-3) !important}

  /* any header/CTA row that reads as two columns on desktop */
  .cv-stack{flex-direction:column !important;align-items:flex-start !important;gap:var(--cv-space-6) !important}

  .cv-footer-grid{grid-template-columns:1fr !important;gap:var(--cv-space-8) !important}
  .cv-footer-legal{flex-direction:column !important;gap:var(--cv-space-2) !important}

  /* testimonial attribution sits under the quote, not beside it */
  .cv-quote-meta{border-left:none !important;border-top:3px solid var(--cv-sage) !important;padding-left:0 !important;padding-top:var(--cv-space-4) !important}
}

/* nav drawer — hidden above the mobile breakpoint */
.cv-nav-toggle{display:none}
.cv-nav-drawer{display:grid;gap:var(--cv-space-2);padding:var(--cv-space-5) var(--cv-gutter-lg) var(--cv-space-6);background:var(--cv-white);border-top:1px solid var(--cv-hairline);box-shadow:var(--cv-shadow-md)}
.cv-nav-drawer a{font-family:var(--cv-font-ui);font-size:var(--cv-text-body);font-weight:var(--cv-weight-medium);letter-spacing:var(--cv-tracking-label);text-transform:uppercase;text-decoration:none;color:var(--cv-charcoal);padding:var(--cv-space-3) 0;border-bottom:1px solid var(--cv-hairline)}
.cv-nav-drawer a:hover{color:var(--cv-sage)}

@keyframes cv-hero-cue{0%,100%{transform:translateY(0);opacity:.7}50%{transform:translateY(5px);opacity:1}}
@media (prefers-reduced-motion:reduce){.cv-hero-statement::after{animation:none}}