/* ==========================================================================
   Global — design tokens + base + layout + typography roles + reveals.
   Loaded site-wide and as an editor style. Blocks CONSUME these vars; they
   must never redefine the palette (SITE-BLUEPRINT §6).

   DD Group values, measured from the Figma export (artwork/Website V1) via
   html-modules/assets/css/dd.css. Hex values were sampled from the PDF — swap
   for the brand guideline values if they differ.
   ========================================================================== */

:root{
  /* --- Brand colour --- */
  --brand:       #0074AA;  /* buttons, accent words, links, footer rule. Design sampled #0078B0; nudged 2% darker so 16–20px brand text on --grey-50 clears WCAG AA (4.68:1, was 4.43:1) */
  --brand-deep:  #005E8B;  /* button hover */
  --brand-rgb:   0, 116, 170;
  --navy:        #212C54;  /* headings, footer, gradient start */
  --navy-deep:   #1D355E;
  --ink:         #161616;  /* body copy */
  --ink-strong:  #212C54;  /* headings */
  --ink-muted:   #5B6178;  /* meta lines, placeholders */
  --black:       #000000;

  /* --- Accents --- */
  --accent:      #7CF0FF;  /* cyan highlight words on dark bands */
  --accent-2:    #91B7DB;  /* glass-card highlight edge */

  /* --- Surfaces --- */
  --white:       #ffffff;
  --grey-50:     #F4F4F4;  /* cards + section background */
  --grey-100:    #EEEEEE;  /* logo tile border */
  --hairline:    #E4E6EC;

  /* The signature gradient: navy (left) → brand blue (right) */
  --gradient:    linear-gradient(100deg, #1D355E 0%, #0F5A8B 52%, #0078B0 100%);

  /* --- Type --- */
  --font-display: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "DM Sans", "Helvetica Neue", Arial, sans-serif;

  /* Fluid type scale: 390px artboard → 1440px artboard (min → max).
     clamp(min, intercept + slope·vw, max): slope = (max−min)/(1440−390)·100. */
  --step-micro:   0.8125rem;                                        /* 13px */
  --step-small:   0.875rem;                                         /* 14px */
  --step-nav:     0.875rem;                                         /* 14px */
  --step-body:    clamp(1rem, 0.976rem + 0.095vw, 1.0625rem);       /* 16 → 17 */
  --step-eyebrow: 1rem;                                             /* 16px */
  --step-lead:    clamp(1.125rem, 1.08rem + 0.19vw, 1.25rem);       /* 18 → 20 */
  --step-h3:      clamp(1.3125rem, 1.196rem + 0.476vw, 1.625rem);   /* 21 → 26 */
  --step-h3-lg:   clamp(1.5rem, 1.31rem + 0.762vw, 2rem);           /* 24 → 32 */
  --step-h2:      clamp(1.625rem, 1.386rem + 0.952vw, 2.25rem);     /* 26 → 36 */
  --step-section: clamp(1.875rem, 1.542rem + 1.333vw, 2.75rem);     /* 30 → 44 */
  --step-h1:      clamp(1.875rem, 1.494rem + 1.524vw, 2.875rem);    /* 30 → 46 */
  --step-display: clamp(2.25rem, 1.774rem + 1.905vw, 3.5rem);       /* 36 → 56 */
  --step-stat:    clamp(2.125rem, 1.887rem + 0.952vw, 2.75rem);     /* 34 → 44 */

  /* --- Layout --- */
  --container:      1200px;                        /* 1120px content + 2 × 40px gutter; keep theme.json in step */
  --gutter:         clamp(20px, 4vw, 40px);
  --gutter-header:  clamp(20px, 4vw, 40px);
  --band-inset:     clamp(12px, 2.8vw, 40px);      /* rounded bands sit inside the viewport by this */
  --section-y:      clamp(48px, 5.5vw, 80px);
  --gap:            clamp(16px, 2.2vw, 32px);
  --radius:         12px;                          /* images */
  --radius-card:    24px;                          /* cards, tiles */
  --radius-band:    32px;                          /* gradient / footer bands */
  --radius-pill:    999px;
  --header-h:       74px;

  /* --- Motion --- */
  --ease:         cubic-bezier(0.22, 0.61, 0.36, 1);
  --speed:        220ms;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body.site-body{
  margin:0;
  font-family:var(--font-body);
  font-weight:400;
  font-size:var(--step-body);
  line-height:1.55;
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img,svg,video{max-width:100%;display:block} /* element selectors only, so any block class wins */
img,video{height:auto}
/* <picture> wrappers (theme_img) must be layout-invisible so absolute/100% imgs behave */
picture{display:contents}
a{color:inherit;text-decoration:none} /* low specificity on purpose: .btn etc. must win */
button{font-family:inherit}
.site-main{display:block}

:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:4px}
.surface-gradient :focus-visible,.surface-navy :focus-visible,.surface-brand :focus-visible{outline-color:var(--accent)}

.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
}
.skip-link:focus{
  position:fixed;top:12px;left:12px;z-index:100;width:auto;height:auto;margin:0;clip:auto;
  padding:10px 16px;background:var(--navy);color:var(--white);border-radius:var(--radius-pill);
}

/* --- Layout helpers ------------------------------------------------------ */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.module{padding-block:var(--section-y)}
.module--flush{padding-block:0}
.module--tight{padding-block:calc(var(--section-y) * .5)}

/* A rounded, inset full-width band (gradient bands, footer, homepage hero).
   Its inner .container still lines up with the page column. */
.band{margin-inline:var(--band-inset);border-radius:var(--radius-band);overflow:hidden}

/* Surface variants set background AND text colour together, so a block keeps
   its contrast wherever it is moved in the page order. Blocks expose a
   `surface` select field that maps straight onto these. */
.surface-white   {background:var(--white);   color:var(--ink)}
.surface-grey    {background:var(--grey-50); color:var(--ink)}
.surface-brand   {background:var(--brand);   color:var(--white)}
.surface-navy    {background:var(--navy);    color:var(--white)}
.surface-gradient{background:var(--gradient);color:var(--white)}
.surface-accent  {background:var(--accent);  color:var(--navy)}
.surface-dark    {background:var(--navy);    color:var(--white)}

.surface-brand :is(h1,h2,h3,h4,.h-display,.h-1,.h-section,.h-2,.h-3,.h-3-lg,.stat),
.surface-navy :is(h1,h2,h3,h4,.h-display,.h-1,.h-section,.h-2,.h-3,.h-3-lg,.stat),
.surface-dark :is(h1,h2,h3,h4,.h-display,.h-1,.h-section,.h-2,.h-3,.h-3-lg,.stat),
.surface-gradient :is(h1,h2,h3,h4,.h-display,.h-1,.h-section,.h-2,.h-3,.h-3-lg,.stat){color:inherit}

/* Faint DD mark that sits in the right of gradient bands */
.has-mark{position:relative;isolation:isolate}
.has-mark::after{
  content:"";position:absolute;inset:0;
  background:url("../images/dd-mark.png") no-repeat right -60px center / auto 118%;
  opacity:.11;pointer-events:none;z-index:0;
}
.has-mark>*{position:relative;z-index:1}

/* --- Typography roles ---------------------------------------------------- */
.h-display,.h-1,.h-section,.h-2,.h-3,.h-3-lg,.stat{
  margin:0;font-family:var(--font-display);color:var(--ink-strong);
  letter-spacing:-0.015em;line-height:1.12;font-weight:700;
}
.h-display{font-size:var(--step-display);line-height:1.08}
.h-1{font-size:var(--step-h1)}
.h-section{font-size:var(--step-section);line-height:1.1}
.h-section--bold{font-weight:700}
.h-2{font-size:var(--step-h2);font-weight:600;line-height:1.18}
.h-3-lg{font-size:var(--step-h3-lg);font-weight:600;line-height:1.2}
.h-3{font-size:var(--step-h3);font-weight:600;line-height:1.25}
.stat{font-size:var(--step-stat);line-height:1;letter-spacing:-0.02em}

/* The second colour in a heading: "Our <span class=accent>Companies.</span>" */
.accent{color:var(--brand)}
.surface-gradient .accent,.surface-navy .accent,.surface-brand .accent,.surface-dark .accent{color:var(--accent)}

.eyebrow{
  font-size:var(--step-eyebrow);font-weight:500;letter-spacing:0;
  margin:0 0 .75rem;color:var(--brand);
}
.surface-gradient .eyebrow,.surface-navy .eyebrow,.surface-dark .eyebrow{color:var(--accent)}
.surface-brand .eyebrow{color:var(--white)} /* cyan on solid brand is only 3.65:1 */
.eyebrow--sm{font-size:var(--step-micro);font-weight:400;margin:0 0 0.875rem}

.lead{font-size:var(--step-lead);line-height:1.5}
.lead--brand{color:var(--brand);font-weight:500}
.small{font-size:var(--step-small)}
.micro{font-size:var(--step-micro)}

/* Body copy inside modules (wysiwyg output) */
.copy>*{margin:0}
.copy>*+*{margin-top:1.25em}
.copy a{color:var(--brand);text-decoration:underline;text-underline-offset:2px}
.copy ul,.copy ol{padding-left:1.4em}
.copy li+li{margin-top:.35rem}
.surface-gradient .copy a,.surface-navy .copy a,.surface-brand .copy a{color:inherit}

/* Long-form reading column */
.prose{max-width:none}
.prose>*{margin:0}
.prose>*+*{margin-top:1.25em}
.prose a{color:var(--brand);text-decoration:underline;text-underline-offset:2px}
.prose{overflow-wrap:anywhere}
.prose h2{font-size:var(--step-h3-lg);font-weight:600;color:var(--ink-strong);margin-top:2.5rem}
.prose h3{font-size:var(--step-lead);font-weight:500;color:var(--brand);margin-top:1.75rem}
.prose h4{font-size:var(--step-body);font-weight:600;color:var(--ink-strong)}
.prose ul,.prose ol{padding-left:1.4em}
.prose li+li{margin-top:.35rem}
.prose li::marker{color:var(--navy)}
.prose hr{border:0;border-top:1px solid var(--hairline);margin:3rem 0}
.prose img{border-radius:var(--radius)}
.prose blockquote{margin:2rem 0;padding-left:1.25rem;border-left:3px solid var(--brand);font-size:var(--step-lead);color:var(--ink-strong)}
.prose table{display:block;width:100%;max-width:100%;overflow-x:auto;border-collapse:collapse;font-size:var(--step-small)}
.prose th,.prose td{padding:10px 14px;border:1px solid var(--grey-100);text-align:left;vertical-align:top;min-width:120px}
.prose th{background:var(--grey-50);font-weight:700}

/* Section heading row: heading left, optional action right */
.section-head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--gap);flex-wrap:wrap;
  margin-bottom:clamp(24px, 3vw, 40px);
}
.section-head--center{justify-content:center;text-align:center}

/* ==========================================================================
   Scroll reveals — driven by resources/js/animations.js
   Switched from Site Settings → Animations, printed on <html> as
   data-anim="fade-up | fade | zoom | off" and data-anim-speed="relaxed | standard | quick".
   Nothing below applies when data-anim is "off", so content is simply visible.

   Hooks blocks use:
     .reveal            the element fades (and rises / settles) when it enters the viewport
     .reveal-stagger    its direct children reveal one after another (80ms steps, set by JS)
     .reveal-delay-1…3  extra 120ms steps for a second element in the same view (hero photo)
     .media inside a revealing element  — the photo settles from a 4% zoom
     [data-count]       counts up (animations.js)
   ========================================================================== */
:root{
  --anim-distance:24px;
  --anim-duration:.7s;
  --anim-ease:cubic-bezier(.2,.7,.2,1);
}
html[data-anim-speed="relaxed"]{--anim-duration:1s}
html[data-anim-speed="quick"]{--anim-duration:.45s}

/* --- hidden state (only while animations are on) --- */
html[data-anim]:not([data-anim="off"]) .reveal,
html[data-anim]:not([data-anim="off"]) .reveal-stagger>*{
  opacity:0;
  transition:opacity var(--anim-duration) var(--anim-ease),transform var(--anim-duration) var(--anim-ease);
  will-change:opacity,transform;
}
html[data-anim="fade-up"] .reveal,
html[data-anim="fade-up"] .reveal-stagger>*{transform:translateY(var(--anim-distance))}
html[data-anim="zoom"] .reveal,
html[data-anim="zoom"] .reveal-stagger>*{transform:translateY(12px) scale(.97)}

/* --- revealed --- */
html[data-anim] .reveal.is-visible,
html[data-anim] .reveal-stagger.is-visible>*{opacity:1;transform:none}

/* Optional extra delays for a sibling that should follow (e.g. the hero photograph). */
html[data-anim]:not([data-anim="off"]) .reveal-delay-1{transition-delay:.12s}
html[data-anim]:not([data-anim="off"]) .reveal-delay-2{transition-delay:.24s}
html[data-anim]:not([data-anim="off"]) .reveal-delay-3{transition-delay:.36s}

/* Photos settle from a soft zoom as their block reveals (the .media wrapper clips it). */
html[data-anim]:not([data-anim="off"]) .reveal .media img,
html[data-anim]:not([data-anim="off"]) .reveal-stagger>* .media img,
html[data-anim]:not([data-anim="off"]) .media.reveal img{
  transform:scale(1.04);
  transition:transform calc(var(--anim-duration) * 1.6) var(--anim-ease);
}
html[data-anim] .reveal.is-visible .media img,
html[data-anim] .reveal-stagger.is-visible>* .media img,
html[data-anim] .media.reveal.is-visible img{transform:none}

/* Underline that grows in on nav links — decorative, no layout shift. */
html[data-anim]:not([data-anim="off"]) .navdrop__link{position:relative}
html[data-anim]:not([data-anim="off"]) .navdrop__link::after{
  content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;
  background:var(--brand);transform:scaleX(0);transform-origin:left;
  transition:transform var(--speed) var(--ease);
}
html[data-anim]:not([data-anim="off"]) .navdrop__link:hover::after,
html[data-anim]:not([data-anim="off"]) .navdrop__link.is-active::after{transform:scaleX(1)}

/* Buttons lift a touch on hover. */
html[data-anim]:not([data-anim="off"]) .btn:hover{transform:translateY(-2px)}
html[data-anim]:not([data-anim="off"]) .btn:active{transform:translateY(0)}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal,.reveal-stagger>*,.media img{opacity:1!important;transform:none!important;transition:none!important}
  .btn:hover{transform:none!important}
}
/* No-JS: reveals must never hide content when the script never runs. */
.no-js .reveal,.no-js .reveal-stagger>*{opacity:1;transform:none}
.no-js .media img{transform:none}