/* ==========================================================================
   Digital Approach — Design System
   Tokens, primitives and section blocks. Built to the DA design spec.
   ========================================================================== */

:root{
  /* Brand */
  --da-navy:#0d2b46;
  --da-navy-deep:#042b46;
  --da-lime:#b7d433;
  --da-lime-deep:#a8c421;
  --da-amber:#ffb718;
  --da-orange:#ef6c01;
  --da-purple:#702077;

  /* Roles */
  --da-ink:#0d2b46;
  --da-body:#48596a;
  --da-muted:#6d7d8b;
  --da-bg:#ffffff;
  --da-bg-alt:#f5f7f8;
  --da-border:#e2e7ea;
  --da-on-dark:#e8eef3;
  --da-on-dark-muted:#a8b8c6;

  /* Type scale */
  --fs-h1:clamp(2.35rem,1.55rem + 2.7vw,4.2rem);
  --fs-h2:clamp(1.85rem,1.35rem + 1.85vw,3.05rem);
  --fs-h3:clamp(1.3rem,1.12rem + .65vw,1.8rem);
  --fs-body:clamp(1.04rem,1rem + .18vw,1.16rem);
  --fs-lead:clamp(1.12rem,1.03rem + .38vw,1.32rem);
  --fs-eyebrow:.795rem;
  --fs-figure:clamp(2.5rem,1.7rem + 2.6vw,4rem);

  /* Rhythm */
  --sp-section:clamp(3.4rem,2.1rem + 4.2vw,7rem);
  --sp-gap:clamp(1.6rem,1.1rem + 1.6vw,3rem);
  --wrap:1280px;
  --wrap-text:720px;
  --radius:3px;
}

/* ---------- Primitives ---------- */
.da-sec{ padding:var(--sp-section) 0; background:var(--da-bg); }
.da-sec--alt{ background:var(--da-bg-alt); }
.da-sec--dark{ background:var(--da-navy); color:var(--da-on-dark); }
.da-sec--brand{ background:var(--da-lime); color:var(--da-navy); }
.da-sec--tight{ padding-block:clamp(2.2rem,1.4rem + 2.4vw,3.6rem); }

.da-wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(1.15rem,4vw,2.5rem); }
.da-measure{ max-width:var(--wrap-text); }
.da-center{ text-align:center; }
.da-center .da-measure{ margin-inline:auto; }

.da-eyebrow{
  display:block;
  font-family:'radikalbold',"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:var(--fs-eyebrow);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--da-lime-deep);
  margin:0 0 .95rem;
  line-height:1.3;
}
.da-sec--dark .da-eyebrow{ color:var(--da-lime); }
.da-sec--brand .da-eyebrow{ color:var(--da-navy); opacity:.75; }

.da-h1,.da-h2,.da-h3{
  font-family:'radikalbold',"Helvetica Neue",Helvetica,Arial,sans-serif;
  color:var(--da-ink);
  margin:0 0 1rem;
  line-height:1.1;
  letter-spacing:-.015em;
  text-transform:none;
}
.da-h1{ font-size:var(--fs-h1); }
.da-h2{ font-size:var(--fs-h2); }
.da-h3{ font-size:var(--fs-h3); line-height:1.25; }
.da-sec--dark .da-h1,.da-sec--dark .da-h2,.da-sec--dark .da-h3{ color:#fff; }

.da-lead{ font-size:var(--fs-lead); line-height:1.55; color:var(--da-body); margin:0 0 1.15rem; }
.da-sec--dark .da-lead{ color:var(--da-on-dark); }
.da-rt{ font-size:var(--fs-body); line-height:1.68; color:var(--da-body); }
.da-rt > :last-child{ margin-bottom:0; }
.da-rt p{ margin:0 0 1.05em; }
.da-rt h3{ font-family:'radikalbold',sans-serif; color:var(--da-ink); font-size:var(--fs-h3); margin:1.7em 0 .6em; }
.da-rt ul,.da-rt ol{ margin:0 0 1.15em; padding-left:1.25em; }
.da-rt li{ margin-bottom:.5em; }
.da-rt a{ color:var(--da-navy); text-decoration:underline; text-underline-offset:2px; }
.da-rt a:hover{ color:var(--da-orange); }
.da-sec--dark .da-rt{ color:var(--da-on-dark); }
.da-sec--dark .da-rt h3,.da-sec--dark .da-rt a{ color:#fff; }

/* ---------- Buttons ---------- */
.da-btn{
  display:inline-flex; align-items:center; gap:.6rem;
  min-height:50px; padding:0 1.7rem;
  font-family:'radikalbold',"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:.95rem; letter-spacing:.02em;
  border-radius:var(--radius); border:2px solid transparent;
  text-decoration:none; cursor:pointer;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease;
}
.da-btn--primary{ background:var(--da-lime); color:var(--da-navy); border-color:var(--da-lime); }
.da-btn--primary:hover{ background:var(--da-lime-deep); border-color:var(--da-lime-deep); color:var(--da-navy); }
.da-btn--outline{ background:transparent; color:var(--da-navy); border-color:var(--da-navy); }
.da-btn--outline:hover{ background:var(--da-navy); color:#fff; }
.da-sec--dark .da-btn--outline{ color:#fff; border-color:rgba(255,255,255,.5); }
.da-sec--dark .da-btn--outline:hover{ background:#fff; color:var(--da-navy); border-color:#fff; }
.da-actions{ display:flex; flex-wrap:wrap; gap:.85rem; margin-top:1.9rem; }
.da-center .da-actions{ justify-content:center; }

/* ---------- Hero: large editorial, asymmetric ---------- */
.da-hero{ padding:clamp(3.4rem,2rem + 5vw,6.5rem) 0 clamp(3rem,2rem + 3.5vw,5rem); background:var(--da-navy); color:var(--da-on-dark); position:relative; overflow:hidden; }
.da-hero__grid{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:var(--sp-gap); align-items:center; }
.da-hero__grid--solo{ grid-template-columns:minmax(0,1fr); max-width:920px; }
.da-hero .da-h1{ color:#fff; margin-bottom:1.15rem; }
.da-hero .da-lead{ color:var(--da-on-dark); max-width:38em; }
.da-hero__media img{ width:100%; height:auto; border-radius:var(--radius); display:block; }
@media(max-width:900px){ .da-hero__grid{ grid-template-columns:1fr; } }

/* ---------- Stats band: large numerals ---------- */
.da-stats__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:var(--sp-gap); }
.da-stat__figure{
  display:block; font-family:'radikalbold',sans-serif;
  font-size:var(--fs-figure); line-height:1; letter-spacing:-.03em;
  color:var(--da-ink); margin-bottom:.55rem;
}
.da-sec--dark .da-stat__figure{ color:var(--da-lime); }
.da-stat__label{ font-size:.98rem; line-height:1.45; color:var(--da-muted); max-width:17em; margin:0; }
.da-sec--dark .da-stat__label{ color:var(--da-on-dark-muted); }

/* ---------- Feature grid (asymmetric-capable) ---------- */
.da-grid{ display:grid; gap:clamp(1rem,.6rem + 1.2vw,1.6rem); margin-top:var(--sp-gap); }
.da-grid--3{ grid-template-columns:repeat(auto-fit,minmax(265px,1fr)); }
.da-grid--4{ grid-template-columns:repeat(auto-fit,minmax(225px,1fr)); }
.da-grid--2{ grid-template-columns:repeat(auto-fit,minmax(330px,1fr)); }
.da-card{
  background:var(--da-bg); border:1px solid var(--da-border);
  border-radius:var(--radius); padding:clamp(1.5rem,1.1rem + 1vw,2.1rem);
  display:flex; flex-direction:column;
}
.da-sec--alt .da-card{ background:#fff; }
.da-sec--dark .da-card{ background:rgba(255,255,255,.045); border-color:rgba(255,255,255,.14); }
.da-card__num{
  font-family:'radikalbold',sans-serif; font-size:.85rem; letter-spacing:.14em;
  color:var(--da-lime-deep); margin-bottom:.9rem; display:block;
}
.da-card__title{ font-family:'radikalbold',sans-serif; font-size:1.16rem; color:var(--da-ink); margin:0 0 .6rem; line-height:1.3; }
.da-sec--dark .da-card__title{ color:#fff; }
.da-card__text{ font-size:1rem; line-height:1.6; color:var(--da-body); margin:0; }
.da-sec--dark .da-card__text{ color:var(--da-on-dark-muted); }
.da-card__text ul{ margin:.2rem 0 0; padding-left:1.15em; }
.da-card__text li{ margin-bottom:.42em; }
.da-card__link{ margin-top:1rem; font-family:'radikalbold',sans-serif; font-size:.93rem; color:var(--da-navy); text-decoration:none; display:inline-flex; gap:.4rem; }
.da-card__link:hover{ color:var(--da-orange); }
.da-card__link::after{ content:"\2192"; }

/* ---------- Split: content + offset visual ---------- */
.da-split{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:var(--sp-gap); align-items:center; }
.da-split--wide-text{ grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); }
.da-split__media img{ width:100%; height:auto; display:block; border-radius:var(--radius); border:1px solid var(--da-border); }
.da-split--flip .da-split__body{ order:2; }
@media(max-width:820px){
  .da-split,.da-split--wide-text{ grid-template-columns:1fr; }
  .da-split--flip .da-split__body{ order:0; }
}

/* ---------- Statement ---------- */
.da-statement{ text-align:center; }
.da-statement p{
  font-family:'radikalbold',sans-serif;
  font-size:clamp(1.5rem,1.1rem + 1.7vw,2.5rem);
  line-height:1.28; margin:0 auto; max-width:19em; letter-spacing:-.01em;
}
.da-sec--brand .da-statement p{ color:var(--da-navy); }
.da-sec--dark .da-statement p{ color:#fff; }

/* ---------- Process: horizontal steps ---------- */
.da-steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:clamp(1.2rem,.8rem + 1.4vw,2.2rem); margin-top:var(--sp-gap); counter-reset:dastep; }
.da-step{ position:relative; padding-top:1.6rem; border-top:2px solid var(--da-border); }
.da-sec--dark .da-step{ border-top-color:rgba(255,255,255,.2); }
.da-step::before{
  counter-increment:dastep; content:counter(dastep,decimal-leading-zero);
  position:absolute; top:-1.05rem; left:0;
  background:var(--da-bg); padding-right:.7rem;
  font-family:'radikalbold',sans-serif; font-size:.9rem; letter-spacing:.1em; color:var(--da-lime-deep);
}
.da-sec--alt .da-step::before{ background:var(--da-bg-alt); }
.da-sec--dark .da-step::before{ background:var(--da-navy); color:var(--da-lime); }
.da-step h3{ font-family:'radikalbold',sans-serif; font-size:1.08rem; color:var(--da-ink); margin:0 0 .5rem; line-height:1.3; }
.da-sec--dark .da-step h3{ color:#fff; }
.da-step p{ font-size:.98rem; line-height:1.58; color:var(--da-body); margin:0; }
.da-sec--dark .da-step p{ color:var(--da-on-dark-muted); }

/* ---------- Case study feature ---------- */
.da-case{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:var(--sp-gap); align-items:center; }
.da-case__media img{ width:100%; height:auto; display:block; border-radius:var(--radius); }
.da-case__meta{ font-family:'radikalbold',sans-serif; font-size:.8rem; letter-spacing:.15em; text-transform:uppercase; color:var(--da-lime-deep); margin:0 0 .8rem; }
.da-case__results{ display:flex; flex-wrap:wrap; gap:1.8rem; margin:1.6rem 0 0; padding:1.4rem 0 0; border-top:1px solid var(--da-border); list-style:none; }
.da-sec--dark .da-case__results{ border-top-color:rgba(255,255,255,.18); }
.da-case__results li{ margin:0; }
.da-case__results b{ display:block; font-family:'radikalbold',sans-serif; font-size:1.75rem; line-height:1; color:var(--da-ink); margin-bottom:.3rem; }
.da-sec--dark .da-case__results b{ color:var(--da-lime); }
.da-case__results span{ font-size:.87rem; color:var(--da-muted); }
@media(max-width:860px){ .da-case{ grid-template-columns:1fr; } }

/* ---------- Testimonial ---------- */
.da-quote{ max-width:900px; margin-inline:auto; text-align:center; }
.da-quote blockquote{
  font-family:'radikallight',"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:clamp(1.3rem,1rem + 1.25vw,2rem); line-height:1.42;
  margin:0 0 1.6rem; color:var(--da-ink);
}
.da-sec--dark .da-quote blockquote{ color:#fff; }
.da-quote cite{ font-style:normal; font-family:'radikalbold',sans-serif; font-size:.98rem; color:var(--da-muted); }
.da-sec--dark .da-quote cite{ color:var(--da-on-dark-muted); }

/* ---------- FAQ accordion ---------- */
.da-faq{ max-width:820px; margin-top:var(--sp-gap); }
.da-faq details{ border-bottom:1px solid var(--da-border); }
.da-faq summary{
  cursor:pointer; list-style:none; padding:1.25rem 2.4rem 1.25rem 0; position:relative;
  font-family:'radikalbold',sans-serif; font-size:1.06rem; color:var(--da-ink); line-height:1.4;
}
.da-faq summary::-webkit-details-marker{ display:none; }
.da-faq summary::after{ content:"+"; position:absolute; right:.4rem; top:1.05rem; font-size:1.5rem; color:var(--da-lime-deep); line-height:1; }
.da-faq details[open] summary::after{ content:"\2013"; }
.da-faq__a{ padding:0 0 1.4rem; font-size:var(--fs-body); line-height:1.68; color:var(--da-body); }
.da-faq__a > :last-child{ margin-bottom:0; }

/* ---------- Logo strip ---------- */
.da-logos{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:clamp(1.6rem,1rem + 2.6vw,3.6rem); margin-top:1.6rem; }
.da-logos img{ height:38px; width:auto; opacity:.62; filter:grayscale(1); transition:opacity .2s ease,filter .2s ease; }
.da-logos img:hover{ opacity:1; filter:none; }

/* ---------- Gallery ---------- */
.da-gallery{ display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:clamp(.9rem,.6rem + .9vw,1.4rem); margin-top:var(--sp-gap); }
.da-gallery img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; display:block; border-radius:var(--radius); border:1px solid var(--da-border); }

/* ---------- CTA panel ---------- */
.da-cta{ text-align:center; }
.da-cta .da-h2{ max-width:16em; margin-inline:auto; }
.da-cta .da-lead{ max-width:34em; margin-inline:auto; }

/* ---------- Fixes: solo (image-less) splits, hero dark context ---------- */
.da-split--solo{ grid-template-columns:minmax(0,1fr) !important; max-width:840px; }
.da-case.da-split--solo{ grid-template-columns:minmax(0,1fr) !important; max-width:900px; }

/* The hero is a dark surface but not .da-sec--dark — give it the same treatment */
.da-hero .da-eyebrow{ color:var(--da-lime); }
.da-hero .da-btn--outline{ background:transparent; color:#fff; border-color:rgba(255,255,255,.55); }
.da-hero .da-btn--outline:hover{ background:#fff; color:var(--da-navy); border-color:#fff; }
.da-hero .da-rt{ color:var(--da-on-dark); }

/* Steps: allow up to 5 across before wrapping (avoids an orphaned final step) */
.da-steps{ grid-template-columns:repeat(auto-fit,minmax(178px,1fr)); }
@media(max-width:1100px){ .da-steps{ grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); } }

/* ---------- Balance fixes ----------
   Constrained blocks were left-aligned inside the 1280px wrap, leaving a large
   dead gap on the right while full-width grids filled it. Centre the solo
   blocks so every section reads as deliberately composed.                    */
.da-split--solo,
.da-case.da-split--solo{ margin-inline:auto; }

/* Hero: keep the editorial left alignment, but use more of the container */
.da-hero__grid--solo{ max-width:1080px; }
.da-hero__grid--solo .da-lead{ max-width:34em; }

/* CTA panel is centred text — its buttons must centre too */
.da-cta .da-actions{ justify-content:center; }

/* Any centred section centres its buttons */
.da-statement .da-actions{ justify-content:center; }

/* FAQ: heading and accordion share one centred column so they align */
.da-sec--faq .da-measure{ max-width:820px; margin-inline:auto; }
.da-sec--faq .da-faq{ margin-inline:auto; }

/* Solo hero (no visual): centre the column rather than stranding it left */
.da-hero__grid--solo{ margin-inline:auto; text-align:center; }
.da-hero__grid--solo .da-lead{ margin-inline:auto; }
.da-hero__grid--solo .da-actions{ justify-content:center; }

/* ---------- Icons ---------- */
.da-icon{ width:100%; height:100%; display:block; }
.da-card__icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; margin-bottom:1.15rem;
  color:var(--da-navy);
  background:rgba(183,212,51,.22);
  border-radius:var(--radius);
  padding:11px;
  flex:0 0 auto;
}
.da-sec--dark .da-card__icon{ color:var(--da-lime); background:rgba(183,212,51,.14); }
.da-sec--brand .da-card__icon{ color:var(--da-navy); background:rgba(13,43,70,.12); }
.da-step__icon{
  display:block; width:26px; height:26px; margin-bottom:.75rem;
  color:var(--da-lime-deep);
}
.da-sec--dark .da-step__icon{ color:var(--da-lime); }


/* Icon tiles: larger glyph, stronger tint */
.da-card__icon{
  width:54px; height:54px; padding:13px;
  background:rgba(183,212,51,.34);
  margin-bottom:1.3rem;
}
.da-icon{ stroke-width:1.75; }
.da-step__icon{ width:30px; height:30px; }

/* Column choice must be honoured on desktop — auto-fit was overriding it
   (a "Three" grid was rendering four across, leaving an orphaned row). */
@media(min-width:1000px){
  .da-grid--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .da-grid--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .da-grid--4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media(min-width:700px) and (max-width:999px){
  .da-grid--3,.da-grid--4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* ==========================================================================
   Brand triangle motifs — the identity device, used as section punctuation.
   Applied automatically so sections carry the brand without per-page setup.
   ========================================================================== */
.da-sec, .da-hero{ position:relative; overflow:hidden; }
.da-sec > .da-wrap, .da-hero > .da-wrap{ position:relative; z-index:1; }

.da-sec::after,
.da-hero::after{
  content:""; position:absolute; pointer-events:none;
  background-repeat:no-repeat; background-size:contain;
}

/* Light sections: small motif, bottom right */
.da-sec:not(.da-sec--dark):not(.da-sec--brand)::after{
  right:0; bottom:0;
  width:clamp(84px,10vw,168px); aspect-ratio:3/2;
  background-image:url('../img/BottomRightTriangles.png');
  background-position:right bottom;
  opacity:.85;
}
/* Light-grey sections: alternate motif, top right, so the rhythm varies */
.da-sec--alt::after{
  right:0; top:0; bottom:auto;
  width:clamp(76px,9vw,150px); aspect-ratio:1;
  background-image:url('../img/BottomRightTriangles2.png');
  background-position:right top;
  opacity:.8;
}
/* Dark sections: larger, softened so it reads as texture not clutter */
.da-sec--dark::after{
  right:0; bottom:0;
  width:clamp(96px,12vw,210px); aspect-ratio:1;
  background-image:url('../img/BottomRightTriangles2.png');
  background-position:right bottom;
  opacity:.5;
}
/* Brand lime sections keep it clean */
.da-sec--brand::after{ content:none; }

/* Hero: the identity used at scale, as on the original homepage */
.da-hero::after{
  right:0; top:0;
  width:clamp(150px,26vw,430px); aspect-ratio:1;
  background-image:url('../img/BottomRightTriangles2.png');
  background-position:right top;
  opacity:.75;
}

/* Mobile: keep motifs, but small and out of the way of the text */
@media(max-width:720px){
  .da-sec::after{ width:64px !important; opacity:.5 !important; }
  .da-sec--alt::after{ width:58px !important; }
  .da-hero::after{ width:104px; opacity:.5; }
}

/* Mobile hero: move the motif clear of the eyebrow/heading rather than
   sitting behind the first line of text. */
@media(max-width:720px){
  .da-hero::after{
    top:auto; bottom:0; right:0;
    width:92px; opacity:.45;
    background-position:right bottom;
  }
  .da-hero{ padding-top:2.6rem; }
  .da-hero .da-lead{ font-size:1.02rem; }
}