/* ==========================================================================
   Designz Hub 360 | case study pages
   Bootstrap 5.3 does ALL layout:  section > .container > .row > .col-*
   This file only adds the look (type, colour, cards, browser/phone frames).
   Per-project colours are CSS variables, set in the "Themes" block at the bottom.
   ========================================================================== */

.dh-work-list article {
    margin-bottom: 80px;
}

.dh-cs {
  /* Bootstrap overrides (scoped: they only affect the case-study content) */
  --bs-body-font-family: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --bs-body-bg: #f2f3f5;
  --bs-body-color: #17151f;
  --bs-body-color-rgb: 23, 21, 31;
  --bs-link-color: #2336d9;
  --bs-link-color-rgb: 35, 54, 217;
  --bs-link-hover-color: #17151f;
  --bs-link-hover-color-rgb: 23, 21, 31;

  /* Brand tokens */
  --dh-ink: #17151f;
  --dh-text: #33363f;
  --dh-muted: #4a4f5c;
  --dh-line: #c9cdd6;
  --dh-space: clamp(3rem, 8vw, 6rem); /* vertical rhythm for every section */

  /* Theme defaults (every project overrides these in its own .theme-* class) */
  --dh-accent: #2336d9;
  --dh-rule: var(--dh-accent);
  --dh-ink-accent: var(--dh-accent);
  --dh-panel: #17151f;
  --dh-tint: #ffffff;
  --dh-dark: #0b1024;
  --dh-bar: #eef0f3;
  --dh-dot: #c3c7cf;
  --dh-bar-ink: rgba(0, 0, 0, 0.55);
  --dh-logo-bg: #ffffff;
  --dh-logo-h: 6rem;
}

/* ---- Base (scoped to .dh-cs: the <body> on the static site, a wrapper in WordPress) ---- */
.dh-cs { font-family: var(--bs-body-font-family); font-size: 1rem; line-height: 1.5; color: var(--bs-body-color); background: var(--bs-body-bg); -webkit-font-smoothing: antialiased; overflow-x: clip; }
.dh-cs a:focus-visible, .dh-cs .btn:focus-visible { outline: 3px solid #2336d9; outline-offset: 3px; border-radius: 4px; }
.dh-cs img, .dh-cs video { max-width: 100%; height: auto; }
.dh-cs h1, .dh-cs h2, .dh-cs h3, .dh-cs h4, .dh-cs p, .dh-cs figure, .dh-cs blockquote, .dh-cs dl, .dh-cs dd { margin-bottom: 0; }
.dh-cs dt { font-weight: 400; }
.dh-cs dd { margin-left: 0; }

/* Bootstrap's container, tuned: 1200px max, generous side gutters */
.dh-cs .container { --bs-gutter-x: clamp(2.5rem, 6vw, 5rem); max-width: 1200px; }

/* Skip link */
.dh-skip { position: absolute; top: .5rem; left: .5rem; z-index: 2000; padding: .5rem 1rem; background: #fff; border-radius: .5rem; }

/* ---- Section rhythm ----------------------------------------------------- */
.dh-section {padding-block: var(--dh-space);}
.dh-section--white { background: #fff; }
.dh-section--tint  { background: var(--dh-tint); }
.dh-section--dark  { background: var(--dh-dark); color: #fff; }
.dh-section--ink   { background: var(--dh-ink); color: #fff; }
.dh-section--flush-bottom { padding-bottom: 1.5rem; }

/* ---- Type --------------------------------------------------------------- */
.dh-display { font-size: clamp(3rem, 9vw, 6rem); line-height: .94; font-weight: 800; letter-spacing: -.045em; margin: 0; }
.dh-display--work { font-size: clamp(2.5rem, 7vw, 5.25rem); line-height: .98; letter-spacing: -.035em; max-width: 60rem; }
.dh-h2 { font-size: clamp(2rem, 4.4vw, 2.75rem); line-height: 1.02; font-weight: 800; letter-spacing: -.03em; margin: 0; }
.dh-h2--cta { font-size: clamp(2rem, 5vw, 3.25rem); }
.dh-lead { font-size: clamp(1.125rem, 2vw, 1.375rem); line-height: 1.5; color: var(--dh-text); max-width: 46rem; margin: 0; }
.dh-body { font-size: clamp(1.0625rem, 1.6vw, 1.1875rem); line-height: 1.6; color: var(--dh-text); }
.dh-body p { margin: 0; }
.dh-eyebrow { font-size: 1rem; line-height: 1.5; font-weight: 700; color: var(--dh-ink-accent); }
.dh-note { font-size: .9375rem; color: var(--dh-muted); margin: 0; }
.dh-h3 { font-size: clamp(1.375rem, 2.4vw, 1.625rem); line-height: 1.15; font-weight: 800; letter-spacing: -.02em; color: var(--dh-accent); margin: 0; }
.dh-caption { margin-top: .875rem; font-size: 1rem; color: var(--dh-muted); }
.dh-section--dark .dh-lead, .dh-section--dark .dh-body { color: #c3c7d6; }

/* ---- Header ------------------------------------------------------------- */
.dh-header .navbar { padding-block: 1.5rem; --bs-navbar-nav-link-padding-x: 0; }
.dh-brand { font-size: 1.375rem; font-weight: 800; letter-spacing: -.02em; color: var(--dh-ink); }
.dh-header .nav-link { font-weight: 500; color: var(--dh-muted); }
.dh-header .nav-link:hover, .dh-header .nav-link.active { color: var(--dh-ink); }
.dh-header .navbar-toggler { border-color: var(--dh-line); }
@media (max-width: 767.98px) {
  .dh-header .navbar-collapse { padding-top: 1rem; }
  .dh-header .navbar-nav { gap: .25rem; margin-bottom: 1rem; }
}

/* ---- Buttons (Bootstrap .btn + brand tweaks) ----------------------------- */
.dh-btn { --bs-btn-border-radius: 999px; min-height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; padding-inline: 1.375rem; font-weight: 700; }
.dh-btn--lg { min-height: 3.5rem; padding-inline: 1.875rem; font-size: 1.0625rem; font-weight: 800; }
.dh-btn-brand { --bs-btn-bg: #2336d9; --bs-btn-border-color: #2336d9; --bs-btn-color: #fff; --bs-btn-hover-bg: #17151f; --bs-btn-hover-border-color: #17151f; --bs-btn-hover-color: #fff; --bs-btn-active-bg: #17151f; --bs-btn-active-color: #fff; min-height: 3rem; padding-inline: 1.5rem; font-size: 1rem; }
.dh-btn-trust { --bs-btn-color: #0b6b4a; --bs-btn-border-color: #00b67a; --bs-btn-hover-bg: #00b67a; --bs-btn-hover-border-color: #00b67a; --bs-btn-hover-color: #fff; --bs-btn-active-bg: #00b67a; --bs-btn-active-color: #fff; border-width: 1.5px; }
.dh-link-light { color: #fff; font-weight: 700; }
.dh-link-light:hover { color: #c9cbd3; }

/* ---- Hero --------------------------------------------------------------- */
.dh-hero {
    padding-top: 160px;
}
.dh-back {font-weight: 700;align-self: flex-start;background: var(--c2);padding: 8px 10px;color: var(--c3);border-radius: 4px;transition: all .5s;}
.dh-facts { margin-top: 1rem; padding-top: 1.5rem; border-top: 1px solid var(--dh-line); }
.dh-facts dt { font-size: .875rem; color: var(--dh-muted); }
.dh-facts dd { font-size: 1.0625rem; font-weight: 700; }

/* ---- Coloured showcase panel (logo + browser + phone) ------------------- */
.dh-panel { background: var(--dh-panel); border-radius: 2rem; padding: clamp(1rem, 5vw, 4rem); }
.dh-logo { display: inline-flex; align-items: center; justify-content: center; background: var(--dh-logo-bg); border-radius: 1.125rem; padding: .625rem 1rem; }
.dh-logo img { display: block; height: var(--dh-logo-h); width: auto; max-width: 100%; }
.dh-logo--box { width: 10.5rem; height: 4.75rem; padding: .5rem .75rem; border-radius: .875rem; border: 1px solid rgba(0,0,0,.08); }
.dh-logo--box img { height: auto; max-height: 100%; object-fit: contain; }
.dh-logo--square { padding: 0; background: none; }
.dh-logo--square img { height: 9.375rem; width: 9.375rem; border-radius: 1.375rem; box-shadow: 0 .875rem 1.875rem rgba(0,0,0,.35); }

/* Browser frame: three dots + address, drawn in CSS so the markup stays small */
.dh-browser { background: #fff; border-radius: .875rem; overflow: hidden; box-shadow: 0 2.5rem 5rem rgba(10, 15, 30, .35); }
.dh-browser--dark { background: #000; }
.dh-browser__bar { display: flex; align-items: center; gap: .4375rem; padding: .75rem 1rem; background: var(--dh-bar); min-height: 2.375rem; }
.dh-browser__bar::before { content: ""; flex: none; width: .625rem; height: .625rem; margin-right: 2.125rem; border-radius: 50%; background: var(--dh-dot); box-shadow: 1.0625rem 0 var(--dh-dot), 2.125rem 0 var(--dh-dot); }
.dh-browser__url { font-size: .75rem; color: var(--dh-bar-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dh-browser img { display: block; width: 100%; height: auto; }

/* Phone frame */
.dh-phone { background: #17151f; border-radius: 2rem; padding: .625rem; box-shadow: 0 1.875rem 3.75rem rgba(0, 0, 0, .35); max-width: 17.5rem; margin-inline: auto; }
.dh-phone img { display: block; width: 100%; height: auto; border-radius: 1.5rem; }
.dh-phone--video { max-width: 23.75rem; }
.dh-phone video { display: block; width: 100%; aspect-ratio: 9 / 16; border-radius: 1.5rem; background: #000; }

/* ---- Cards -------------------------------------------------------------- */
.dh-feature { border-top: 3px solid var(--dh-rule); padding-top: 1.25rem; height: 100%; }
.dh-feature h3 { font-size: 1.5rem; font-weight: 800; margin: 0 0 .625rem; }
.dh-feature p { font-size: 1.125rem; line-height: 1.6; color: var(--dh-text); margin: 0; }

.dh-card { background: #fff; border-radius: 1.25rem; padding: 2rem; height: 100%; display: flex; flex-direction: column; gap: .75rem; }
.dh-card p { font-size: 1.0625rem; line-height: 1.6; color: var(--dh-text); margin: 0; }
.dh-card--dark { background: var(--dh-dark-card, #161c36); border-top: 3px solid var(--dh-dark-rule, #3e63d6); border-radius: 1.125rem; padding: 1.75rem; gap: .625rem; }
.dh-card--dark h3 { font-size: 1.375rem; font-weight: 800; margin: 0; }
.dh-card--dark p { color: #c3c7d6; }

.dh-stat { background: #fff; border-radius: 1.25rem; padding: 1.75rem; height: 100%; }
.dh-stat__value { font-size: clamp(2.25rem, 5vw, 3rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; color: var(--dh-ink-accent); }
.dh-stat__text { margin-top: .5rem; font-size: 1rem; line-height: 1.5; color: var(--dh-text); }

/* ---- Screenshot figures -------------------------------------------------- */
.dh-shot { margin: 0; }
.dh-shot__frame { background: #fff; border-radius: .875rem; overflow: hidden; box-shadow: 0 1.25rem 3.125rem rgba(15, 20, 40, .14); }
.dh-shot__frame--dark { background: #000; }
.dh-shot__frame img { display: block; width: 100%; height: auto; }
.dh-shot .dh-phone { max-width: 17.5rem; margin-inline: 0; }

/* ---- Flow diagram (Infinite Acqua) -------------------------------------- */
.dh-flow-label { font-size: .9375rem; font-weight: 800; letter-spacing: .06em; color: #7fd8e6; margin-bottom: 1rem; }
.dh-flow__step { position: relative; height: 100%; background: #0e3b55; border-radius: .875rem; padding: 1.25rem; }
.dh-flow__step--final { background: #3e7a2a; }
.dh-flow__step strong { display: block; font-size: 1.0625rem; font-weight: 800; }
.dh-flow__step span { display: block; margin-top: .25rem; font-size: .875rem; line-height: 1.5; color: #bfd3de; }
.dh-flow__step--final span { color: #e0f4f8; }
/* arrow between steps, CSS only: points down on phones, right on md+ */
.dh-flow li:not(:last-child) .dh-flow__step::after { content: ""; position: absolute; left: 50%; bottom: -1.125rem; width: .875rem; height: .875rem; border-right: 2.5px solid #7fd8e6; border-bottom: 2.5px solid #7fd8e6; transform: translateX(-50%) rotate(45deg); }
@media (min-width: 768px) {
  .dh-flow li:not(:last-child) .dh-flow__step::after { left: auto; right: -1.0625rem; bottom: auto; top: 50%; transform: translateY(-50%) rotate(-45deg); }
}

/* ---- Search result mock + ranking table --------------------------------- */
.dh-serp { background: #fff; border-radius: 1.25rem; padding: 1.75rem 2rem; box-shadow: 0 1.25rem 2.5rem -1.5rem rgba(15, 20, 40, .25); }
.dh-serp__title { font-size: .875rem; font-weight: 700; color: var(--dh-ink-accent); padding-bottom: .5rem; }
.dh-serp__item { display: flex; flex-direction: column; gap: .25rem; padding: 1rem 0; border-top: 1px solid #eceef1; }
.dh-serp__url { font-size: .8125rem; color: #4d5156; }
.dh-serp__link { font-size: 1.1875rem; color: #1a0dab; }
.dh-serp__snippet { font-size: .875rem; line-height: 1.5; color: #4d5156; }
.dh-rank { width: 100%; border-collapse: collapse; }
.dh-rank td { padding: .75rem 0; border-top: 1px solid #eceef1; font-size: 1rem; }
.dh-rank td:last-child { text-align: right; font-weight: 800; color: var(--dh-muted); }
.dh-rank .is-top td:last-child { color: var(--dh-ink-accent); }
.dh-notes p + p { margin-top: 1rem; }
.dh-notes strong { color: var(--dh-ink); }

/* ---- Reviews ------------------------------------------------------------- */
.dh-video-quote { font-family: "Newsreader", Georgia, serif; font-style: italic; font-size: clamp(1.75rem, 4vw, 2.5rem); line-height: 1.25; color: var(--dh-ink); margin: 0; }
.dh-person { font-size: 1.125rem; font-weight: 800; display: block; }
.dh-review { background: #fff; border: 1px solid #e1e4ea; border-radius: 1.5rem; padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1.25rem, 4vw, 2.75rem); box-shadow: 0 1.5rem 3.125rem -1.5rem rgba(15, 20, 40, .25); }
.dh-review__quote { font-size: 1.125rem; line-height: 1.65; color: var(--dh-text); margin: 0; }
.dh-review__title { font-size: 1.75rem; font-weight: 800; margin: 0; }
.dh-review__foot { border-top: 1px solid #e1e4ea; padding-top: 1.25rem; }
.dh-avatar { flex: none; width: 2.75rem; height: 2.75rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; background: var(--dh-avatar-bg, #e7e4fb); color: var(--dh-avatar-ink, #17151f); }
.dh-stars { display: flex; gap: 3px; }
.dh-stars span { width: 1.625rem; height: 1.625rem; background: #00b67a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 2.5l2.9 6.6 7.1.6-5.4 4.7 1.6 7-6.2-3.7-6.2 3.7 1.6-7L2 9.7l7.1-.6z'/%3E%3C/svg%3E") center / 1.125rem no-repeat; }

/* ---- CTA + footer --------------------------------------------------------- */
.dh-cta {padding-block: clamp(3rem, 7vw, 5.5rem);display: none;}
.dh-cta p { font-size: 1.1875rem; line-height: 1.55; color: #c9cbd3; margin: 0; max-width: 40rem; }
.dh-footer { padding-block: 2rem; font-size: .875rem; color: var(--dh-muted); }
.dh-footer a { color: var(--dh-muted); }

/* ---- Work page ------------------------------------------------------------- */
.dh-work-list { --bs-gutter-y: clamp(3rem, 8vw, 6rem); } /* the tilted previews can poke out a little */
.dh-work-kicker { font-size: 1rem; font-weight: 500; color: var(--dh-muted); }
.dh-tags { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.dh-tags li { border: 1px solid var(--dh-line); border-radius: 999px; padding: .375rem .875rem; font-size: .875rem; color: var(--dh-text); }
.dh-work-title { font-size: clamp(2rem, 4vw, 2.875rem); line-height: 1.02; font-weight: 800; letter-spacing: -.03em; margin: 0; }
.dh-work-text { font-size: 1.125rem; line-height: 1.6; color: var(--dh-text); margin: 0; }
@media (min-width: 768px) {
  .dh-tilt { padding: 1rem .5rem 3rem; }
  .dh-tilt .dh-browser { border-radius: .75rem; box-shadow: 0 3.125rem 4.375rem -1.875rem rgba(15,20,40,.55), 0 1.5rem 2.5rem -.75rem rgba(15,20,40,.22), 0 2px 6px rgba(15,20,40,.08); transform: perspective(1800px) rotateY(10deg) rotateX(4deg); transform-origin: center; }
  .dh-tilt .dh-browser__bar { padding: .625rem .875rem; min-height: 0; }
}

/* ==========================================================================
   Themes: generated from data/case-studies.json by tools/build.py
   ========================================================================== */