/* JADRANKO DRAŽENOVIĆ — Security Risk Advisory.
   Ported from Handoffs/JADRANKO DRAŽENOVIĆ · Drazenovic Website.dc.html (six 1440 px
   pages + one 390 px mobile frame) and the Nav / Footer artboards.

   ─────────────────────────────────────────────────────────────────────────────
   THIS FILE NAMES NO COLOUR.

   Every brand value arrives as a custom property, written into a <style> in the
   head by `buildJdPaletteCss()` from `content.ts`. A test fails the build on a
   brand hex literal appearing here. One place to change a colour, and no way for
   a component to quietly invent a fifth one — the Sea & Stay rule, kept because
   this palette is only four colours and the whole design depends on gold staying
   scarce.

   Three exceptions, all deliberate: `transparent` and `currentColor` are roles
   rather than colours, and the @media print block at the foot uses neutral greys
   (#000/#333/#999) because a printed page has no brand ground to sit on and navy
   ink on paper is a toner bill, not a design decision.
   ─────────────────────────────────────────────────────────────────────────────

   INK IS INHERITED, NOT SET PER COMPONENT.

   A band declares `--ink-head`, `--ink-body`, `--ink-meta`, `--ink-rule` and the
   components read them. `.jd-band--navy p` and `.jd-svc p` are both (0,1,1):
   they tie on specificity and source order decides, which is how three sections
   of another site in this studio shipped body copy the same colour as the band
   behind it — invisible, and invisible in the diff too. Custom properties
   inherit, so the question never arises here.
   ─────────────────────────────────────────────────────────────────────────────

   Made by sorich.hr (https://sorich.hr/#top) */

/* ══════════════════════════════════════════════════════════════════════════
   1 · RESET + ROOT
   ══════════════════════════════════════════════════════════════════════════ */

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

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

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    /* The DELAY has to go too. Without this the hero's four `jd-rise-*` steps still wait
       0.05–0.34s before appearing — the motion is gone but the staggered blank hero is
       not, which is most of what the preference is asking to be spared. */
    animation-delay: 0.001ms !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  background: var(--jd-white);
  color: var(--jd-ink);
  font-family: var(--jd-sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg {
  max-width: 100%;
}

img {
  height: auto;
}

h1,
h2,
h3,
h4,
p,
figure,
blockquote {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

/* The focus ring is GROUND-AWARE, like the ink.

   `--jd-gold` is the brand's attention colour and reads beautifully on navy — but on white
   it measures 2.42:1 and on the form panel 2.30:1, and WCAG 2.4.11 wants a focus indicator
   at 3:1 against what is behind it. A single gold ring is therefore invisible in exactly
   the place a keyboard user needs it most: the contact form.

   So the ring reads `--ink-focus`, which each band sets alongside its inks — gold on the
   dark bands, `--jd-gold-ink` (5.0:1 on white, 4.6:1 on the panel) on the light ones. */
:where(a, button, summary, input, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--ink-focus, var(--jd-gold));
  outline-offset: 3px;
}

/* ══════════════════════════════════════════════════════════════════════════
   2 · THE RAMP

   The design does NOT have one heading size. H1 runs 54 → 66 px and H2 runs
   30 → 46 px depending on the section's job, so every heading carries its own
   `--h` and a single `--jd-scale` shrinks the whole system together. One
   clamp() coefficient for every H2 would flatten a deliberate 30→46 spread into
   one number — the mistake Ivan Inox's type pass made and had to undo.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --jd-sans: Jost, "Segoe UI", system-ui, -apple-system, sans-serif;
  --jd-serif: "Bodoni Moda", "Didot", "Times New Roman", Georgia, serif;

  --jd-scale: 1;
  /* 130 px at 1440, per the handoff. Ramps down with the scale below. */
  --jd-gut: 130px;
  --jd-max: 1180px;
  --jd-band-y: 104px;

  --jd-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Default ink roles = the white ground. Bands override. */
  --ink-head: var(--jd-navy);
  --ink-body: var(--jd-ink);
  --ink-soft: var(--jd-ink-soft);
  --ink-meta: var(--jd-ink-meta);
  --ink-rule: var(--jd-rule);
  --ink-gold: var(--jd-gold-ink);
  --ink-focus: var(--jd-gold-ink);
}

@media (max-width: 1180px) {
  :root {
    --jd-scale: 0.9;
    --jd-gut: 88px;
    --jd-band-y: 88px;
  }
}

@media (max-width: 900px) {
  :root {
    --jd-scale: 0.82;
    --jd-gut: 56px;
    --jd-band-y: 76px;
  }
}

@media (max-width: 640px) {
  :root {
    --jd-scale: 0.74;
    --jd-gut: 26px;
    --jd-band-y: 62px;
  }
}

@media (max-width: 420px) {
  :root {
    --jd-scale: 0.68;
    --jd-gut: 22px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   3 · LAYOUT
   ══════════════════════════════════════════════════════════════════════════ */

.jd-band {
  position: relative;
  padding: var(--jd-band-y) var(--jd-gut);
  overflow: hidden;
}

/* Tighter top when the band continues the one above it (the stat bar under the
   hero, the countries band under the Experience hero). */
.jd-band--joined {
  padding-top: 0;
}

.jd-in {
  position: relative;
  max-width: var(--jd-max);
  margin: 0 auto;
  /* A query container so `cqw` units inside resolve against the CONTENT width and
     not against some narrower ancestor. Only this element and the hero column are
     containers; making a generic stack one is what rendered another site's section
     headings at 31 px where the design said 46.
     ⚠ NOTE: nothing in this stylesheet currently uses a `cq` unit or an `@container`
     query, so this declaration buys nothing today. It is kept rather than deleted
     because `container-type` also applies layout/style containment, and removing it
     is a rendering change, not a cleanup — measure before you touch it. */
  container-type: inline-size;
}

.jd-band--paper {
  background: var(--jd-white);
  --ink-head: var(--jd-navy);
  --ink-body: var(--jd-ink);
  --ink-soft: var(--jd-ink-soft);
  --ink-meta: var(--jd-ink-meta);
  --ink-rule: var(--jd-rule);
  --ink-gold: var(--jd-gold-ink);
  --ink-focus: var(--jd-gold-ink);
}

.jd-band--navy {
  background: var(--jd-navy);
  --ink-head: var(--jd-white);
  --ink-body: var(--jd-on-navy);
  --ink-soft: var(--jd-on-navy);
  --ink-meta: var(--jd-steel);
  --ink-rule: var(--jd-hair-navy);
  --ink-gold: var(--jd-gold);
  --ink-focus: var(--jd-gold);
}

/* The band that opens a page. Same radial the handoff draws on the Home hero;
   the interior page heroes are flat navy and use `--navy` instead. */
.jd-band--hero {
  background: radial-gradient(
    118% 132% at 84% 24%,
    var(--jd-navy-lift) 0%,
    var(--jd-navy-mid) 34%,
    var(--jd-navy) 64%,
    var(--jd-navy-shade) 100%
  );
  --ink-head: var(--jd-white);
  --ink-body: var(--jd-on-navy);
  --ink-soft: var(--jd-on-navy);
  --ink-meta: var(--jd-steel);
  --ink-rule: var(--jd-hair-navy);
  --ink-gold: var(--jd-gold);
  --ink-focus: var(--jd-gold);
}

/* A gold hairline where one navy band follows another. */
.jd-band--rule {
  border-top: 1px solid var(--jd-hair-gold);
}

/* ══════════════════════════════════════════════════════════════════════════
   4 · TYPE
   ══════════════════════════════════════════════════════════════════════════ */

.jd-h1,
.jd-h2,
.jd-h3,
.jd-display {
  font-family: var(--jd-serif);
  font-weight: 400;
  color: var(--ink-head);
  text-wrap: pretty;
  letter-spacing: 0.004em;
}

.jd-h1 {
  font-size: calc(var(--h, 54px) * var(--jd-scale));
  line-height: 1.1;
}

.jd-h2 {
  font-size: calc(var(--h, 42px) * var(--jd-scale));
  line-height: 1.16;
}

.jd-h3 {
  font-size: calc(var(--h, 23px) * var(--jd-scale));
  line-height: 1.32;
}

/* Serif lines that are not headings: the CTA bands, the footer slogan. */
.jd-display {
  font-size: calc(var(--h, 34px) * var(--jd-scale));
  line-height: 1.28;
}

.jd-eyebrow {
  font: 500 max(10px, calc(11px * var(--jd-scale))) / 1 var(--jd-sans);
  letter-spacing: 0.3em;
  color: var(--ink-gold);
  text-transform: uppercase;
}

/* The pillar / section label variant — slightly tighter tracking in the design. */
.jd-eyebrow--tight {
  letter-spacing: 0.26em;
}

.jd-lead {
  font: 300 max(14px, calc(17px * var(--jd-scale))) / 1.8 var(--jd-sans);
  color: var(--ink-body);
  text-wrap: pretty;
}

.jd-lead--hero {
  --lead: 18px;
  font-size: calc(var(--lead) * var(--jd-scale));
  line-height: 1.75;
}

.jd-body {
  font: 300 max(14px, calc(15.5px * var(--jd-scale))) / 1.8 var(--jd-sans);
  color: var(--ink-body);
  text-wrap: pretty;
}

.jd-body--16 {
  font-size: max(14px, calc(16px * var(--jd-scale)));
}

.jd-body--17 {
  font-size: max(14px, calc(17px * var(--jd-scale)));
  line-height: 1.85;
}

/* Small letterspaced labels. Never `--jd-steel` on paper: that is 3.09:1 and
   these run at 10.5–13.5 px. `--ink-meta` is the per-ground token that passes. */
.jd-meta {
  font: 500 max(10px, calc(10.5px * var(--jd-scale))) / 1.6 var(--jd-sans);
  letter-spacing: 0.2em;
  color: var(--ink-meta);
  text-transform: uppercase;
}

.jd-note {
  font: 300 max(14px, calc(14px * var(--jd-scale))) / 1.6 var(--jd-sans);
  color: var(--ink-meta);
}

/* ══════════════════════════════════════════════════════════════════════════
   5 · LINKS + BUTTONS
   ══════════════════════════════════════════════════════════════════════════ */

.jd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--jd-gold);
  /* Navy on gold measures 6.59:1 — the label never rides on the band behind it. */
  color: var(--jd-navy);
  font: 500 max(12px, calc(12.5px * var(--jd-scale))) / 1 var(--jd-sans);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 19px 32px;
  border: 1px solid var(--jd-gold);
  border-radius: var(--jd-r);
  cursor: pointer;
  box-shadow: 0 12px 30px -18px var(--jd-gold-glow);
  transition:
    background-color 0.32s var(--jd-ease),
    transform 0.45s var(--jd-ease),
    box-shadow 0.45s var(--jd-ease);
}

.jd-btn:hover {
  background: var(--jd-gold-lift);
  border-color: var(--jd-gold-lift);
  transform: translateY(-2px);
  box-shadow: 0 20px 38px -18px var(--jd-gold-glow);
}

.jd-btn--ghost {
  background: transparent;
  border: 1px solid var(--jd-hair-steel);
  color: var(--jd-on-navy-soft);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: none;
  padding: 18px 30px;
  box-shadow: none;
}

.jd-btn--ghost:hover {
  background: var(--jd-gold-wash);
  border-color: var(--jd-gold);
  color: var(--jd-white);
  box-shadow: none;
}

/* The ghost on a PAPER ground — the design only ever draws it on navy, but the
   contact rows need the same idea in ink. */
/* On the form's own ground (--jd-paper-soft) the generic --ink-rule border all but
   disappears, and this button is the visitor's second real choice of channel.
   `--jd-field-rule` measured 1.44:1 there — a hairline, not a boundary. `--jd-gold-ink` is
   4.6:1 on that panel and ties the secondary channel to the brand's own accent family. */
.jd-form .jd-btn--quiet {
  border-color: var(--jd-gold-ink);
}

.jd-btn--quiet {
  background: transparent;
  border: 1px solid var(--ink-rule);
  color: var(--ink-head);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
  box-shadow: none;
}

.jd-btn--quiet:hover {
  border-color: var(--jd-gold);
  background: transparent;
  color: var(--ink-head);
  transform: translateX(6px);
}

.jd-btn--block {
  width: 100%;
}

/* The underlined "Read the full story →" link. */
.jd-more {
  display: inline-block;
  font: 500 max(12px, calc(12.5px * var(--jd-scale))) / 1 var(--jd-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-gold);
  border-bottom: 1px solid var(--jd-gold-line);
  padding-bottom: 5px;
  transition:
    color 0.32s var(--jd-ease),
    border-color 0.32s var(--jd-ease);
}

.jd-more:hover {
  border-bottom-color: var(--jd-gold);
}

.jd-more--sm {
  font-size: max(10px, calc(11.5px * var(--jd-scale)));
  letter-spacing: 0.16em;
  border-bottom: 0;
  padding-bottom: 0;
}

.jd-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* ══════════════════════════════════════════════════════════════════════════
   6 · WATERMARK

   The only decoration on a dark band: the brand mark at 5.5 % — low enough that
   it never competes with the headline it sits behind. `aria-hidden`.

   The handoff's contour/compass texture used to sit here too and was removed on
   2026-08-19 (Ante: "jd logo is best and only it"). Do not reintroduce a second
   faint layer: the two competed at the same opacity in the same corner of the
   hero, and two watermarks read as noise where one reads as a watermark.
   ══════════════════════════════════════════════════════════════════════════ */

.jd-watermark {
  position: absolute;
  pointer-events: none;
  user-select: none;
}

.jd-watermark {
  top: 50%;
  right: 4%;
  height: 78%;
  width: auto;
  max-width: 42%;
  max-height: 78%;
  object-fit: contain;
  opacity: 0.055;
  transform: translateY(-50%);
}

.jd-watermark--hero {
  right: -46px;
  height: 86%;
  max-width: 52%;
  max-height: 86%;
}

@media (max-width: 900px) {
  /* Below the tablet break the mark starts overlapping the copy rather than
     sitting behind its right margin. The mobile frame in the handoff keeps it,
     but pulled to the edge and smaller. */
  .jd-watermark {
    right: -8%;
    width: 46%;
    height: auto;
    max-width: 46%;
    max-height: none;
    opacity: 0.05;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   7 · NAV
   ══════════════════════════════════════════════════════════════════════════ */

.jd-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--jd-gold);
  color: var(--jd-navy);
  padding: 14px 22px;
  font: 500 12px/1 var(--jd-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.jd-skip:focus {
  left: 0;
}

.jd-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  min-height: 86px;
  padding: 0 var(--jd-gut);
  background: var(--jd-navy);
  /* The nav paints a dark ground but never joined the band token system, so its focus
     ring fell back to the light-ground gold ink and measured 3.32:1 against navy —
     under the 3:1 floor once antialiasing is accounted for, and visibly muddy. Every
     other dark surface declares its ink roles; this one has to as well. */
  --ink-focus: var(--jd-gold);
  border-bottom: 1px solid var(--jd-hair-steel-soft);
  font-family: var(--jd-sans);
  position: relative;
  z-index: 20;
}

.jd-nav-brand {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: none;
  transition: opacity 0.32s var(--jd-ease);
}

.jd-nav-brand:hover {
  opacity: 0.82;
}

.jd-nav-brand img {
  display: block;
  width: 30px;
  height: 30px;
}

.jd-nav-brand span {
  font: 400 13px/1 var(--jd-sans);
  letter-spacing: 0.2em;
  color: var(--jd-white);
  white-space: nowrap;
}

.jd-nav-links {
  display: flex;
  align-items: center;
  gap: 34px;
}

.jd-nav-links a {
  font: 400 12.5px/1 var(--jd-sans);
  letter-spacing: 0.13em;
  color: var(--jd-on-navy-soft);
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 0.32s var(--jd-ease);
}

.jd-nav-links a:hover {
  color: var(--jd-white);
}

.jd-nav-links a[aria-current="page"] {
  color: var(--jd-white);
}

/* The active underline is a real element in the handoff, so it can sit 8 px below
   the cap line rather than wherever `text-decoration` would land it. */
.jd-nav-links a[aria-current="page"]::after {
  content: "";
  display: block;
  height: 1px;
  background: var(--jd-gold);
  margin-top: 8px;
}

.jd-nav-end {
  display: flex;
  align-items: center;
  gap: 24px;
  flex: none;
}

.jd-nav-lang {
  display: flex;
  align-items: center;
  gap: 9px;
  font: 400 11px/1 var(--jd-sans);
  letter-spacing: 0.16em;
  color: var(--jd-steel);
}

/* 44px of height, so the chip is a real touch target rather than an 11px word. The
   padding is vertical only — a horizontal pad would push the nav back over the 320px
   floor the block above exists to hold. */
.jd-nav-lang a,
.jd-nav-lang [aria-current="true"] {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  position: relative;
}

/* 44px tall was only half the target: the chip is an 11px word, so it was 18px WIDE —
   under the 24x24 minimum. Same trick as the burger: widen the hit area with a
   pseudo-element rather than the box, because horizontal padding here is exactly what
   the 320px floor cannot afford. 18 + 2x4 = 26px of target, and the 9px gap keeps
   adjacent chips from overlapping. */
.jd-nav-lang a::before {
  content: "";
  position: absolute;
  inset: 0 -4px;
}

.jd-nav-lang a {
  color: var(--jd-steel);
  transition: color 0.32s var(--jd-ease);
}

.jd-nav-lang a:hover {
  color: var(--jd-white);
}

.jd-nav-lang [aria-current="true"] {
  color: var(--jd-white);
}

.jd-nav-lang i {
  display: block;
  width: 1px;
  height: 11px;
  background: var(--jd-hair-steel);
}

.jd-nav-cta {
  padding: 15px 26px;
  font-size: 12px;
  box-shadow: 0 10px 26px -16px var(--jd-gold-glow);
}

/* Burger — a real <button> toggling `[hidden]` on the panel, so the nav works
   with the keyboard and screen readers for free. */
.jd-burger {
  display: none;
  flex-direction: column;
  gap: 4px;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
}

/* A 44x44 touch target without a 44x44 BOX. Widening the element itself would cost
   10px of nav width, and the 320px floor further down has none to give — so the hit
   area is extended by a transparent pseudo-element instead, and the three bars keep
   their 34px footprint. The button is the ONLY navigation control below 1081px, so a
   tap a few px off it must not land on nothing. */
.jd-burger {
  position: relative;
}

.jd-burger::before {
  content: "";
  position: absolute;
  inset: -5px;
}

.jd-burger span {
  display: block;
  width: 20px;
  height: 1px;
  background: var(--jd-on-navy-soft);
  transition:
    transform 0.24s var(--jd-ease),
    opacity 0.18s var(--jd-ease);
}

/* The control has to say which state it is in — open and closed were pixel-identical.
   Bars 1 and 3 close into an X, the middle one goes. Driven off the "aria-expanded"
   attribute, so the visual state and the state a screen reader announces cannot drift
   apart. The bars sit 5px either side of centre (1px tall, 4px gap), hence the 5px
   translate. The global prefers-reduced-motion block at the top of this file already
   neutralises the transition. */
html.jd-js .jd-burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(5px) rotate(45deg);
}

html.jd-js .jd-burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

html.jd-js .jd-burger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-5px) rotate(-45deg);
}

.jd-navpanel {
  display: none;
}

/* THE DEAD ZONE — and why the burger threshold is 1239, not 1080.

   It re-opened the day the Gallery page was added: a SEVENTH nav label pushed the row
   requirement to about 1158px while the burger still only took over at 1080, so every
   viewport from 1081 to 1158 pushed the whole document sideways again, on every page in
   both languages. Tightening bought ~90px last time and there is no second helping of it
   without hurting legibility, so the threshold moved instead. 1239 keeps ~80px of slack
   over the requirement and still sits below every common laptop width (1280, 1366, 1440,
   1536), so no real desktop loses its link row.

   Only the NAV block moved. The contact and footer blocks further down stay at 1080 —
   they are unrelated layout, and dragging them along would restack a two-column footer
   160px early.

   ⚠ AN EIGHTH NAV ITEM RE-OPENS THIS. Measure, do not assume.

   The original note follows.

   The six English nav labels plus the brand lockup, the language chip and the
   gold CTA need about 1231px at the 130px gutter. The burger only took over at
   1080px, so every viewport from 1081 to about 1230 rendered a nav that did not
   fit and pushed the whole document sideways — 9px at 1180, 31px at 1200, on
   EVERY page, in both languages. It survived the first screenshot pass because
   1440 and 390 both look perfect; nothing between them was ever opened.
   (The harness now measures 1280 and 1200 explicitly, for this reason.)

   Tightening the tracking and the gaps below 1400px buys back roughly 90px,
   which brings the requirement under the 1081px burger threshold and closes the
   zone. The alternative — moving the burger up to 1280 — would have hidden a
   perfectly good navigation on every 1280x800 laptop. */
@media (max-width: 1400px) {
  .jd-nav-links {
    gap: 22px;
  }

  .jd-nav-links a {
    letter-spacing: 0.09em;
  }

  .jd-nav-brand span {
    letter-spacing: 0.16em;
  }

  .jd-nav-end {
    gap: 18px;
  }

  .jd-nav-cta {
    padding: 15px 20px;
  }
}

@media (max-width: 1239px) {
  .jd-nav-links,
  .jd-nav-cta {
    display: none;
  }

  /* THE PANEL IS A FLEX CHILD OF .jd-nav, and .jd-nav is a nowrap row.
     Without these two lines the panel does not drop below the bar — it becomes a
     THIRD ITEM IN THE ROW and is pushed off the right edge of the screen. At 390px
     it landed at x=399: the header silently grew to 409px of empty navy and the
     menu was never visible. The button looked dead. It is not enough to toggle
     `display` on the panel; the row has to be allowed to wrap and the panel has to
     claim the whole second line. `row-gap: 0` because the row `gap: 40px` would
     otherwise open a 40px navy band between the bar and the panel. */
  .jd-nav {
    flex-wrap: wrap;
    row-gap: 0;
  }

  /* …and THIS is the other half of that. `min-height: 86px` sits on the flex
     CONTAINER, so it only ever governed a single-line row. The moment the panel
     wraps onto line 2 the container is content-driven, line 1 collapses to its own
     content height — 44px, set by the language chip — and the whole lockup jumps
     20.5px UP as the menu opens. That is the "screen moves" the client described.
     The floor has to be on the LINE, not the container.
     85, not 86: `box-sizing: border-box` is global here and .jd-nav's own 1px
     bottom border lives inside its 86px, so 86 would grow the closed bar to 87. */
  .jd-nav-brand,
  .jd-nav-end {
    min-height: 85px;
  }

  /* ── the menu is OPEN by default, and script CLOSES it ────────────────────
     This is inverted on purpose. The burger cannot work without site.js, so any
     stylesheet that hides the menu by default is betting the whole navigation on
     one file arriving and running. It loses that bet in more ways than "the user
     turned JavaScript off": the file 404s, a proxy strips it, an in-app or
     document preview (Drive, Gmail, WhatsApp) sandboxes it — or it simply has not
     arrived yet, because the tag is `defer` and a tap during that window lands on
     a rendered, inert control and is swallowed.
     So: no script means the links are on screen and the dead control is not.
     site.js stamps `jd-js` on <html> as its LAST act, which is what flips this to
     the interactive behaviour. Do not "simplify" it back. */
  .jd-burger {
    display: none;
  }

  html.jd-js .jd-burger {
    display: flex;
  }

  .jd-navpanel {
    display: block;
    width: 100%;
    /* No background, no bottom border, no radius: the panel sits INSIDE .jd-nav,
       which already paints the navy and already draws the header's bottom
       hairline. Repeating them drew a second hairline 1px from the first and a
       rounded rectangle that was invisible against its own colour. */
    padding: 8px 0 28px;
    position: relative;
    z-index: 19;
    /* A landscape phone, or a portrait one at 200% zoom, is ~305px of usable
       height. The panel is ~382px, so its WhatsApp button fell below the fold
       with nothing to say it was there. */
    max-height: calc(100vh - 85px);
    max-height: calc(100dvh - 85px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* The panel carries `hidden` in the markup and the inline safety CSS closes it
     with `[hidden]{display:none!important}`, so the scripted case needs no rule at
     all here. This is the UNSCRIPTED one, and it needs `!important` to get past
     that safety rule: with scripting off the burger cannot work, so the menu is
     shown open instead and the dead control is hidden above.
     `html:not(.jd-js)` — nav-inline.js stamps that class synchronously from the
     <head>, before first paint, which is why this never flashes on a normal load. */
  html:not(.jd-js) .jd-navpanel[hidden] {
    display: block !important;
  }

  /* `:not(.jd-btn)` is load-bearing. `.jd-navpanel a` is (0,2,0) and `.jd-btn` is
     (0,1,0), so without it this rule captured the panel's WhatsApp button and
     overrode FOUR of its properties: the gold button rendered its label in the
     panel-link grey — 1.63:1, which reads as disabled — flush left, unpadded,
     with a hairline through its top edge. */
  .jd-navpanel a:not(.jd-btn) {
    display: block;
    padding: 16px 0;
    border-top: 1px solid var(--jd-hair-steel-soft);
    font: 400 13px/1 var(--jd-sans);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--jd-on-navy-soft);
  }

  .jd-navpanel a[aria-current="page"]:not(.jd-btn) {
    color: var(--jd-gold);
  }

  .jd-navpanel .jd-btn {
    margin-top: 22px;
    width: 100%;
  }
}

@media (max-width: 560px) {
  .jd-nav-brand span {
    font-size: 10.5px;
    letter-spacing: 0.16em;
  }

  .jd-nav-brand img {
    width: 24px;
    height: 24px;
  }
}

/* THE 320px FLOOR.

   `.jd-nav-brand span` is `white-space: nowrap`, so "JADRANKO DRAŽENOVIĆ" set at 10.5px
   with 0.16em tracking is an unbreakable ~196px block. Add the mark, the gaps, the
   language chip and the burger and the nav needs about 359px — so every viewport below
   that (iPhone SE landscape-in-split-view, Galaxy Fold closed, and any browser at 200%
   zoom on a 720px screen) scrolled sideways on ALL 14 pages AND pushed the burger — the
   only navigation on mobile — off the right edge. WCAG 1.4.10 puts the floor at 320px.

   The brand mark alone carries the identity at that width; the wordmark is in the page. */
@media (max-width: 380px) {
  .jd-nav {
    gap: 12px;
    padding-left: 16px;
    padding-right: 16px;
  }

  .jd-nav-brand span {
    display: none;
  }

  .jd-nav-end {
    gap: 12px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   8 · HERO
   ══════════════════════════════════════════════════════════════════════════ */

.jd-hero {
  padding: 132px var(--jd-gut) 138px;
}

.jd-hero-col {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
  container-type: inline-size;
}

.jd-hero-col .jd-lead {
  max-width: 700px;
}

/* The Home hero's H1, at its desktop size.

   ⚠ This lives HERE and not in a `style="--h:66px"` on the element, and that is the whole
   point of the class existing. An inline declaration beats every stylesheet rule regardless
   of specificity OR media query, so with the size inline the two mobile overrides below
   were dead code: the H1 shipped at 44.88px on a 390px phone, which is the exact number the
   ladder was written to fix ("about 45 px ... ate the fold"). The About/Services heroes
   carry no inline size and DID follow the ladder — they were the control that showed the
   mechanism worked and only this one heading escaped it.

   Never put a `--h` back on this element. */
.jd-hero .jd-hero-h1 {
  --h: 66px;
}

.jd-hero--page {
  padding: 100px var(--jd-gut) 104px;
}

.jd-hero--page .jd-hero-col {
  max-width: var(--jd-max);
  gap: 26px;
}

@media (max-width: 900px) {
  .jd-hero {
    padding: 92px var(--jd-gut) 96px;
  }

  /* The Home hero H1 is the one heading with its own mobile ladder. The handoff's
     390 px frame sets it at 34 px against the desktop's 66 px — a 0.52 ratio the
     global --jd-scale (0.68 at that width) does not come near, because the scale
     also has to keep body copy readable. Left to the scale alone it rendered about
     45 px on a phone and ate the fold. These --h values times the scale at each
     step land on 47 / 37 / 34 px. */
  .jd-hero .jd-hero-h1 {
    --h: 58px;
  }

  .jd-hero--page {
    padding: 76px var(--jd-gut) 80px;
  }
}

@media (max-width: 640px) {
  .jd-hero {
    padding: 62px var(--jd-gut) 66px;
  }

  .jd-hero .jd-hero-h1 {
    --h: 50px;
  }

  .jd-hero--page {
    padding: 56px var(--jd-gut) 58px;
  }

  /* The mobile frame in the handoff runs both hero buttons full width. */
  .jd-hero-col .jd-actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .jd-hero-col .jd-actions .jd-btn {
    width: 100%;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   9 · STAT BAR
   ══════════════════════════════════════════════════════════════════════════ */

.jd-stats {
  border-top: 1px solid var(--jd-gold-line);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.jd-stat {
  padding: 40px 40px 0;
  border-left: 1px solid var(--jd-gold-faint);
}

.jd-stat:first-child {
  padding-left: 0;
  border-left: 0;
}

.jd-stat:last-child {
  padding-right: 0;
}

.jd-stat b {
  display: block;
  font: 400 calc(46px * var(--jd-scale)) / 1 var(--jd-serif);
  color: var(--jd-white);
}

.jd-stat span {
  display: block;
  padding-top: 14px;
  font: 300 max(14px, calc(14px * var(--jd-scale))) / 1.6 var(--jd-sans);
  color: var(--jd-steel);
  text-wrap: pretty;
}

@media (max-width: 900px) {
  .jd-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .jd-stat {
    padding: 32px 28px 0;
  }

  .jd-stat:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }
}

@media (max-width: 640px) {
  /* The mobile frame turns the grid into rows: a fixed 100 px figure column and
     the label beside it, divided by gold hairlines. */
  .jd-stats {
    grid-template-columns: 1fr;
  }

  .jd-stat {
    display: flex;
    align-items: baseline;
    gap: 18px;
    padding: 24px 0;
    border-left: 0;
    border-bottom: 1px solid var(--jd-gold-faint);
  }

  .jd-stat:last-child {
    border-bottom: 0;
  }

  .jd-stat b {
    flex: none;
    width: 100px;
    white-space: nowrap;
    font-size: calc(30px * var(--jd-scale));
  }

  .jd-stat span {
    padding-top: 0;
    font-size: max(12px, calc(12.5px * var(--jd-scale)));
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   10 · SPLIT (heading left, body right)
   ══════════════════════════════════════════════════════════════════════════ */

.jd-split {
  display: flex;
  gap: 110px;
  align-items: flex-start;
}

.jd-split > :first-child {
  flex: none;
  width: 440px;
}

.jd-split > :last-child {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 26px;
}

.jd-split--narrow > :first-child {
  width: 400px;
}

@media (max-width: 1180px) {
  .jd-split {
    gap: 64px;
  }

  .jd-split > :first-child,
  .jd-split--narrow > :first-child {
    width: 360px;
  }
}

@media (max-width: 900px) {
  .jd-split {
    flex-direction: column;
    gap: 32px;
  }

  .jd-split > :first-child,
  .jd-split--narrow > :first-child {
    width: 100%;
  }
}

/* Pillar heading block — eyebrow + h2 left, one-line intro right. */
.jd-secthead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 60px;
  padding-bottom: 52px;
}

.jd-secthead > div {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.jd-secthead p {
  margin: 0;
  max-width: 460px;
  font: 300 max(14px, calc(16px * var(--jd-scale))) / 1.8 var(--jd-sans);
  color: var(--ink-soft);
  text-wrap: pretty;
}

@media (max-width: 900px) {
  .jd-secthead {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    padding-bottom: 40px;
  }

  .jd-secthead p {
    max-width: none;
  }
}

/* "Where." — heading with a rule running off to the right. */
.jd-rulehead {
  display: flex;
  align-items: baseline;
  gap: 26px;
  padding-bottom: 30px;
}

.jd-rulehead i {
  flex: 1;
  height: 1px;
  background: var(--jd-hair-navy);
}

/* ══════════════════════════════════════════════════════════════════════════
   11 · GRIDS

   `auto-fit` + `minmax(min(Npx, 100%), 1fr)` rather than a per-breakpoint
   column count: the card decks here run 2, 3, 5, 6 and 7 across and hand-writing
   five reflow ladders is how one of them ends up forgotten at 900 px.
   ══════════════════════════════════════════════════════════════════════════ */

.jd-grid {
  display: grid;
  gap: var(--gap, 34px);
  grid-template-columns: repeat(auto-fit, minmax(min(var(--col, 280px), 100%), 1fr));
}

/* Some of these grids are real lists — the seven countries, the six industries, the five
   certifications — and ship as <ul>/<li> so a screen reader announces "list, 7 items"
   instead of reading seven unrelated fragments. `display:grid` on a <ul> keeps the layout
   identical; only the marker and the UA padding have to go. */
ul.jd-grid {
  margin: 0;
  padding: 0;
  list-style: none;
}

.jd-grid--2 {
  --col: 420px;
  --gap: 52px 60px;
}

.jd-grid--3 {
  --col: 280px;
}

.jd-grid--tiles {
  --col: 150px;
  --gap: 12px;
}

.jd-grid--cards {
  --col: 200px;
  --gap: 20px;
}

.jd-grid--wide {
  --col: 300px;
  --gap: 22px;
}

.jd-grid--pairs {
  --col: 380px;
  --gap: 44px 60px;
}

/* ══════════════════════════════════════════════════════════════════════════
   12 · CARDS
   ══════════════════════════════════════════════════════════════════════════ */

/* Home — the three pillars. Gold rule on top, icon, label, blurb, link. */
.jd-pillar {
  border-top: 1px solid var(--jd-gold-line);
  padding-top: 34px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  transition:
    border-color 0.4s var(--jd-ease),
    transform 0.45s var(--jd-ease);
}

.jd-pillar:hover {
  border-top-color: var(--jd-gold);
  transform: translateY(-5px);
}

.jd-pillar svg {
  display: block;
  fill: none;
  stroke: var(--jd-gold);
  stroke-width: 1.1;
}

.jd-pillar b {
  font: 500 max(12px, calc(12px * var(--jd-scale))) / 1 var(--jd-sans);
  letter-spacing: 0.24em;
  color: var(--ink-head);
}

.jd-pillar p {
  flex: 1;
}

/* Services — one of the twelve blocks. */
.jd-svc {
  display: flex;
  flex-direction: column;
  gap: 18px;
  border-top: 1px solid var(--jd-svc-rule, var(--ink-head));
  padding-top: 26px;
  transition:
    border-color 0.4s var(--jd-ease),
    transform 0.45s var(--jd-ease);
}

.jd-band--navy .jd-svc {
  --jd-svc-rule: var(--jd-gold-line);
}

.jd-svc:hover {
  border-top-color: var(--jd-gold);
  transform: translateY(-4px);
}

.jd-svc p {
  flex: 1;
}

.jd-svc .jd-deliverable {
  border-top: 1px solid var(--ink-rule);
  padding-top: 14px;
  font: 500 max(10px, calc(10.5px * var(--jd-scale))) / 1.6 var(--jd-sans);
  letter-spacing: 0.18em;
  color: var(--ink-meta);
}

/* A bordered tile: the industries, the countries, the certification strip. */
.jd-tile {
  border: 1px solid var(--jd-tile-rule, var(--ink-rule));
  border-radius: var(--jd-r);
  padding: 34px 30px;
  font: 300 max(14px, calc(17px * var(--jd-scale))) / 1.5 var(--jd-sans);
  color: var(--ink-head);
  text-wrap: pretty;
  transition:
    border-color 0.4s var(--jd-ease),
    background-color 0.4s var(--jd-ease),
    transform 0.45s var(--jd-ease),
    box-shadow 0.5s var(--jd-ease);
}

.jd-band--navy .jd-tile {
  --jd-tile-rule: var(--jd-hair-steel-mid);
}

.jd-tile:hover {
  border-color: var(--jd-gold);
  transform: translateY(-4px);
}

.jd-band--navy .jd-tile:hover {
  background: var(--jd-white-wash);
}

.jd-band--paper .jd-tile:hover {
  box-shadow: 0 22px 40px -30px var(--jd-navy-glow);
}

.jd-tile--sm {
  /* A denser tile takes a smaller corner, or the radius eats the padding. */
  border-radius: var(--jd-r-sm);
  padding: 24px 16px;
  font-size: max(12px, calc(13px * var(--jd-scale)));
  font-weight: 400;
}

.jd-tile--cert {
  border-radius: var(--jd-r-sm);
  padding: 26px 22px;
  font: 400 max(12px, calc(13.5px * var(--jd-scale))) / 1.6 var(--jd-sans);
}

.jd-tile--cert span {
  color: var(--ink-meta);
}

/* About — the five training cards carry a detail paragraph too. */
.jd-cert {
  border: 1px solid var(--ink-rule);
  border-radius: var(--jd-r);
  padding: 30px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition:
    border-color 0.4s var(--jd-ease),
    transform 0.45s var(--jd-ease),
    box-shadow 0.5s var(--jd-ease);
}

.jd-cert:hover {
  border-color: var(--jd-gold);
  transform: translateY(-4px);
  box-shadow: 0 24px 44px -32px var(--jd-navy-glow);
}

.jd-cert h3 {
  font-size: max(14px, calc(17px * var(--jd-scale)));
  line-height: 1.35;
}

.jd-cert h3 span {
  display: block;
  font: 500 max(10px, calc(10px * var(--jd-scale))) / 1.6 var(--jd-sans);
  letter-spacing: 0.2em;
  color: var(--ink-gold);
  text-transform: uppercase;
}

.jd-cert p {
  font-size: max(12px, calc(13.5px * var(--jd-scale)));
  line-height: 1.7;
  color: var(--ink-soft);
}

/* Experience — the three "How the work is done" columns, and About's principles. */
.jd-topline {
  border-top: 1px solid var(--jd-gold-line);
  padding-top: 28px;
}

.jd-topline h3 {
  --h: 22px;
}

.jd-topline p {
  margin-top: 14px;
}

/* ══════════════════════════════════════════════════════════════════════════
   13 · FIELD RECORD (Home §1.5)
   ══════════════════════════════════════════════════════════════════════════ */

.jd-field {
  display: flex;
  flex-direction: column;
}

.jd-field-row {
  display: flex;
  gap: 70px;
  align-items: flex-start;
  padding: 32px 0;
  border-top: 1px solid var(--ink-rule);
  transition:
    border-color 0.4s var(--jd-ease),
    transform 0.45s var(--jd-ease);
}

.jd-field-row:last-child {
  border-bottom: 1px solid var(--ink-rule);
}

.jd-field-row:hover {
  border-top-color: var(--jd-gold);
  transform: translateX(8px);
}

.jd-field-row > b {
  flex: none;
  width: 290px;
  font: 500 max(10px, calc(11.5px * var(--jd-scale))) / 1.7 var(--jd-sans);
  letter-spacing: 0.2em;
  color: var(--ink-head);
}

.jd-field-row > b span {
  display: block;
  color: var(--ink-gold);
}

.jd-field-row p {
  font-size: max(14px, calc(16px * var(--jd-scale)));
}

@media (max-width: 900px) {
  .jd-field-row {
    flex-direction: column;
    gap: 14px;
  }

  .jd-field-row > b {
    width: 100%;
  }

  .jd-field-row:hover {
    transform: none;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   14 · TIMELINE (Experience §3.3)
   ══════════════════════════════════════════════════════════════════════════ */

.jd-tl {
  display: flex;
  flex-direction: column;
}

.jd-tl-row {
  display: flex;
  align-items: stretch;
}

.jd-tl-when {
  flex: none;
  width: 250px;
  padding: 0 42px 0 0;
  text-align: right;
}

.jd-tl-when b,
.jd-tl-when span {
  display: block;
  font: 500 max(10px, calc(11px * var(--jd-scale))) / 1.6 var(--jd-sans);
  letter-spacing: 0.18em;
}

.jd-tl-when b {
  color: var(--ink-gold);
}

.jd-tl-when span {
  padding-top: 6px;
  color: var(--ink-head);
}

.jd-tl-line {
  flex: none;
  width: 1px;
  background: var(--jd-gold-faint-2);
  position: relative;
}

.jd-tl-line i {
  position: absolute;
  top: 2px;
  left: -4px;
  width: 9px;
  height: 9px;
  background: var(--jd-gold);
}

/* The last row's line stops at its node instead of running to the band's floor. */
.jd-tl-row:last-child .jd-tl-line::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 1px;
  height: 46px;
  background: var(--jd-white);
}

.jd-tl-what {
  flex: 1;
  padding: 0 0 46px 42px;
}

.jd-tl-row:last-child .jd-tl-what {
  padding-bottom: 0;
}

.jd-tl-what h3 {
  --h: 21px;
  line-height: 1.35;
}

.jd-tl-what p {
  margin-top: 10px;
}

@media (max-width: 900px) {
  /* The label column stops being a column: the years and place move above the
     role, and the gold line runs down the left of the whole row. */
  .jd-tl-row {
    flex-direction: column;
    position: relative;
    padding-left: 26px;
    border-left: 1px solid var(--jd-gold-faint-2);
  }

  .jd-tl-row::before {
    content: "";
    position: absolute;
    top: 2px;
    left: -4px;
    width: 9px;
    height: 9px;
    background: var(--jd-gold);
  }

  .jd-tl-line {
    display: none;
  }

  .jd-tl-when {
    width: 100%;
    padding: 0 0 12px;
    text-align: left;
  }

  .jd-tl-when b,
  .jd-tl-when span {
    display: inline;
  }

  .jd-tl-when span::before {
    content: " · ";
  }

  .jd-tl-what {
    padding: 0 0 40px;
  }

  .jd-tl-row:last-child {
    border-left-color: transparent;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   15 · QUOTES
   ══════════════════════════════════════════════════════════════════════════ */

/* Home — three bordered cards on navy. */
.jd-quote {
  border: 1px solid var(--jd-hair-steel-mid);
  border-radius: var(--jd-r);
  padding: 40px 34px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  transition:
    border-color 0.4s var(--jd-ease),
    background-color 0.4s var(--jd-ease),
    transform 0.45s var(--jd-ease);
}

.jd-quote:hover {
  border-color: var(--jd-gold);
  background: var(--jd-white-wash);
  transform: translateY(-5px);
}

.jd-quote > i {
  font: 400 calc(46px * var(--jd-scale)) / 0.6 var(--jd-serif);
  color: var(--jd-gold);
  font-style: normal;
}

.jd-quote blockquote {
  flex: 1;
  font: italic 400 calc(20px * var(--jd-scale)) / 1.55 var(--jd-serif);
  color: var(--jd-white);
  text-wrap: pretty;
}

.jd-quote cite {
  font: 400 max(12px, calc(12.5px * var(--jd-scale))) / 1.6 var(--jd-sans);
  letter-spacing: 0.05em;
  color: var(--jd-steel);
  font-style: normal;
}

/* References — five full-width rows with a gold spine. */
.jd-qrow {
  display: flex;
  gap: 44px;
  align-items: flex-start;
  border-left: 2px solid var(--jd-gold);
  padding: 8px 0 8px 44px;
  transition: transform 0.45s var(--jd-ease);
}

.jd-qrow:hover {
  transform: translateX(8px);
}

.jd-qrow blockquote {
  flex: 1;
  font: italic 400 calc(30px * var(--jd-scale)) / 1.45 var(--jd-serif);
  color: var(--ink-head);
  text-wrap: pretty;
}

.jd-qrow cite {
  flex: none;
  width: 270px;
  padding-top: 12px;
  font: 400 max(12px, calc(12.5px * var(--jd-scale))) / 1.7 var(--jd-sans);
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  font-style: normal;
  text-wrap: pretty;
}

.jd-qrow cite span {
  display: block;
  font: 500 max(10px, calc(10.5px * var(--jd-scale))) / 1.7 var(--jd-sans);
  letter-spacing: 0.2em;
  color: var(--ink-gold);
  text-transform: uppercase;
}

.jd-qrows {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (max-width: 900px) {
  .jd-qrow {
    flex-direction: column;
    gap: 18px;
    padding-left: 26px;
  }

  .jd-qrow cite {
    width: 100%;
    padding-top: 0;
  }

  .jd-qrow:hover {
    transform: none;
  }
}

/* The line under the Home quote deck. */
.jd-notebar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  padding-top: 40px;
  margin-top: 40px;
  border-top: 1px solid var(--jd-hair-steel-soft2);
}

.jd-notebar > span {
  font: 500 max(10px, calc(11px * var(--jd-scale))) / 1.5 var(--jd-sans);
  letter-spacing: 0.22em;
  color: var(--ink-meta);
}

@media (max-width: 640px) {
  .jd-notebar {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   16 · STEPS (Home §1.7)
   ══════════════════════════════════════════════════════════════════════════ */

.jd-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 44px;
  border-top: 1px solid var(--jd-gold);
}

.jd-step {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.jd-step i {
  width: 9px;
  height: 9px;
  background: var(--jd-gold);
  margin-top: -5px;
}

.jd-step b {
  font: 500 max(10px, calc(11.5px * var(--jd-scale))) / 1 var(--jd-sans);
  letter-spacing: 0.2em;
  color: var(--ink-gold);
  padding-top: 12px;
}

.jd-step h3 {
  --h: 20px;
}

.jd-step p {
  font-size: max(14px, calc(15px * var(--jd-scale)));
  line-height: 1.75;
  color: var(--ink-soft);
}

/* ══════════════════════════════════════════════════════════════════════════
   17 · ABOUT
   ══════════════════════════════════════════════════════════════════════════ */

.jd-about {
  display: flex;
  gap: 80px;
  align-items: flex-start;
}

.jd-about-story {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.jd-about-side {
  flex: none;
  width: 400px;
}

.jd-portrait {
  position: relative;
  background: var(--jd-navy);
  aspect-ratio: 4 / 5;
  /* Rounded at the TOP only: the facts card sits flush underneath and the two read
     as one navy object, so the corners that matter are the outer four. `overflow`
     is what clips the photograph itself to the curve. */
  border-radius: var(--jd-r-lg) var(--jd-r-lg) 0 0;
  overflow: hidden;
}

.jd-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  /* The source is already monochrome; `luminosity` lets the navy behind it tint
     the whole frame so the one photograph on the site belongs to the palette
     rather than sitting on top of it. */
  mix-blend-mode: luminosity;
}

.jd-portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    var(--jd-scrim-0) 0%,
    var(--jd-scrim-1) 55%,
    var(--jd-scrim-2) 100%
  );
}

.jd-facts {
  background: var(--jd-navy);
  border-radius: 0 0 var(--jd-r-lg) var(--jd-r-lg);
  padding: 34px 32px;
  display: flex;
  flex-direction: column;
}

.jd-facts > b {
  padding-bottom: 16px;
  font: 500 max(10px, calc(10.5px * var(--jd-scale))) / 1 var(--jd-sans);
  letter-spacing: 0.24em;
  color: var(--jd-gold);
}

.jd-facts > span {
  padding: 15px 0;
  border-top: 1px solid var(--jd-hair-steel-soft2);
  font: 300 max(14px, calc(15px * var(--jd-scale))) / 1.6 var(--jd-sans);
  color: var(--jd-white);
}

.jd-facts > span:last-child {
  padding-bottom: 0;
}

@media (max-width: 900px) {
  .jd-about {
    flex-direction: column;
    gap: 40px;
  }

  .jd-about-side {
    width: 100%;
    max-width: 460px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   18 · CTA BANDS
   ══════════════════════════════════════════════════════════════════════════ */

.jd-cta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 70px;
}

.jd-cta .jd-display {
  max-width: 700px;
}

.jd-cta .jd-actions {
  flex: none;
}

.jd-cta--centre {
  flex-direction: column;
  align-items: center;
  gap: 34px;
  text-align: center;
}

.jd-cta--centre .jd-display {
  --h: 46px;
  line-height: 1.2;
  max-width: 820px;
}

@media (max-width: 900px) {
  .jd-cta {
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
  }
}

@media (max-width: 640px) {
  .jd-cta .jd-actions,
  .jd-cta--centre .jd-actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .jd-cta .jd-btn {
    width: 100%;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   19 · CONTACT + FORM
   ══════════════════════════════════════════════════════════════════════════ */

.jd-contact {
  display: flex;
  gap: 100px;
  align-items: flex-start;
}

.jd-channels {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.jd-channels > .jd-meta {
  letter-spacing: 0.26em;
  font-size: max(10px, calc(11px * var(--jd-scale)));
}

/* The big gold WhatsApp block — two lines, the number in navy on the gold. */
.jd-wa {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  background: var(--jd-gold);
  color: var(--jd-navy);
  border-radius: var(--jd-r);
  padding: 30px 34px;
  margin-top: 26px;
  box-shadow: 0 14px 34px -20px var(--jd-gold-glow);
  transition:
    background-color 0.32s var(--jd-ease),
    transform 0.45s var(--jd-ease),
    box-shadow 0.45s var(--jd-ease);
}

.jd-wa:hover {
  background: var(--jd-gold-lift);
  transform: translateY(-2px);
  box-shadow: 0 22px 44px -20px var(--jd-gold-glow);
}

.jd-wa b {
  font: 500 max(12px, calc(13px * var(--jd-scale))) / 1 var(--jd-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.jd-wa span {
  font: 300 max(14px, calc(15px * var(--jd-scale))) / 1.5 var(--jd-sans);
  /* Deep bronze on the gold fill — 5.0:1. The handoff's `#3A2E14` is 8.4:1 but
     reads as a second ink; this keeps one family and still clears AA. */
  color: var(--jd-on-gold);
}

.jd-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  width: 100%;
  border: 1px solid var(--ink-rule);
  border-radius: var(--jd-r);
  padding: 26px 34px;
  margin-top: 14px;
  color: var(--ink-head);
  font: 400 max(14px, calc(16px * var(--jd-scale))) / 1.4 var(--jd-sans);
  transition:
    border-color 0.4s var(--jd-ease),
    transform 0.45s var(--jd-ease);
}

.jd-row:hover {
  border-color: var(--jd-gold);
  transform: translateX(6px);
}

.jd-row i {
  color: var(--ink-gold);
  font-style: normal;
  flex: none;
}

.jd-channels > p {
  margin-top: 34px;
  font: 300 max(14px, calc(16px * var(--jd-scale))) / 1.8 var(--jd-sans);
  color: var(--ink-soft);
  text-wrap: pretty;
}

.jd-form {
  flex: none;
  width: 520px;
  background: var(--jd-paper-soft);
  border-radius: var(--jd-r-lg);
  padding: 44px 44px 48px;
}

.jd-form h2 {
  --h: 26px;
  line-height: 1.25;
}

.jd-form-fields {
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding-top: 32px;
}

.jd-form label {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.jd-form label > span {
  font: 500 max(10px, calc(10.5px * var(--jd-scale))) / 1 var(--jd-sans);
  letter-spacing: 0.2em;
  color: var(--ink-meta);
}

.jd-form input,
.jd-form textarea {
  border: 0;
  border-bottom: 1px solid var(--jd-field-rule);
  background: transparent;
  padding: 8px 0;
  /* 16px, never smaller: iOS Safari zooms the whole page when a field under 16px takes
     focus, and the page never zooms back out. */
  font: 300 16px/1.5 var(--jd-sans);
  color: var(--jd-navy);
  border-radius: 0;
}

/* ⚠ These fields used to carry `outline: none`, which at (0,2,1) outranked the global
   `:focus-visible` rule at (0,1,1) and left the four contact fields with no focus
   indicator at all — the gold underline below is a nice touch but it is a 1px border
   change, not an indicator. Never re-add `outline: none` here. */
.jd-form input:focus-visible,
.jd-form textarea:focus-visible {
  outline: 2px solid var(--ink-focus, var(--jd-gold-ink));
  outline-offset: 3px;
}

.jd-form textarea {
  line-height: 1.6;
  resize: vertical;
  min-height: 92px;
}

.jd-form input:focus,
.jd-form textarea:focus {
  border-bottom-color: var(--jd-gold);
}

.jd-form-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 6px;
}

.jd-form-hint {
  font: 300 max(12px, calc(13px * var(--jd-scale))) / 1.7 var(--jd-sans);
  color: var(--ink-meta);
  text-wrap: pretty;
}

/* The inline validation message. Hidden until `site.js` fills it, and it must
   still be `display:none` when hidden even though nothing here sets `display`
   on it — kept explicit so a later `display`-setting class cannot break it
   silently the way it can on the nav panel. */
.jd-form-err[hidden] {
  display: none;
}

.jd-form-err {
  font: 400 max(12px, calc(13px * var(--jd-scale))) / 1.6 var(--jd-sans);
  color: var(--jd-alert);
}

@media (max-width: 1080px) {
  .jd-contact {
    gap: 56px;
  }

  .jd-form {
    width: 440px;
  }
}

@media (max-width: 900px) {
  .jd-contact {
    flex-direction: column;
    gap: 44px;
  }

  .jd-form {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .jd-form {
    padding: 30px 24px 34px;
  }

  .jd-row {
    padding: 22px 24px;
    font-size: max(14px, calc(15px * var(--jd-scale)));
  }

  .jd-row:hover {
    transform: none;
  }

  .jd-wa {
    padding: 24px 24px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   20 · FAQ

   <details>/<summary>. No JavaScript: the open/close behaviour, the keyboard
   handling and the screen-reader semantics are all native, and the content is
   in the DOM for a crawler whether it is open or not.
   ══════════════════════════════════════════════════════════════════════════ */

.jd-faq {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--ink-rule);
}

.jd-faq details {
  border-bottom: 1px solid var(--ink-rule);
}

.jd-faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  padding: 26px 0;
  cursor: pointer;
  list-style: none;
  font: 400 calc(21px * var(--jd-scale)) / 1.35 var(--jd-serif);
  color: var(--ink-head);
  transition: color 0.32s var(--jd-ease);
}

.jd-faq summary::-webkit-details-marker {
  display: none;
}

.jd-faq summary:hover {
  color: var(--ink-gold);
}

.jd-faq summary i {
  flex: none;
  color: var(--jd-gold);
  font: 300 calc(22px * var(--jd-scale)) / 1 var(--jd-sans);
  font-style: normal;
}

.jd-faq details[open] summary i::before {
  content: "−";
}

.jd-faq summary i::before {
  content: "+";
}

.jd-faq p {
  padding: 0 200px 30px 0;
  font: 300 max(14px, calc(16px * var(--jd-scale))) / 1.85 var(--jd-sans);
  color: var(--ink-body);
  text-wrap: pretty;
}

@media (max-width: 900px) {
  .jd-faq p {
    padding-right: 0;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   21 · PRIVACY
   ══════════════════════════════════════════════════════════════════════════ */

.jd-prose {
  display: flex;
  flex-direction: column;
  gap: 44px;
  max-width: 760px;
}

.jd-prose section {
  border-top: 1px solid var(--ink-rule);
  padding-top: 24px;
}

.jd-prose h2 {
  --h: 24px;
}

.jd-prose p {
  margin-top: 12px;
  font-size: max(14px, calc(16px * var(--jd-scale)));
  line-height: 1.85;
}

/* ══════════════════════════════════════════════════════════════════════════
   22 · FOOTER
   ══════════════════════════════════════════════════════════════════════════ */

.jd-footer {
  background: var(--jd-navy-deep);
  padding: 74px var(--jd-gut) 40px;
  font-family: var(--jd-sans);
  /* Same reason as .jd-nav above: a dark ground with no focus ink measured 3.66:1. */
  --ink-focus: var(--jd-gold);
}

.jd-footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 80px;
  max-width: var(--jd-max);
  margin: 0 auto;
  padding-bottom: 52px;
  border-bottom: 1px solid var(--jd-hair-steel-soft);
}

.jd-footer-brand {
  max-width: 430px;
}

.jd-footer-lockup {
  display: flex;
  align-items: center;
  gap: 16px;
}

.jd-footer-lockup img {
  display: block;
  width: 34px;
  height: 34px;
}

.jd-footer-lockup span {
  font: 400 12.5px/1.5 var(--jd-sans);
  letter-spacing: 0.2em;
  color: var(--jd-white);
}

.jd-footer-lockup span span {
  color: var(--jd-steel);
  letter-spacing: 0.24em;
  font-size: 10.5px;
}

.jd-footer-slogan {
  padding-top: 26px;
  font: 400 calc(21px * var(--jd-scale)) / 1.4 var(--jd-serif);
  color: var(--jd-gold);
  text-wrap: pretty;
}

.jd-footer-cols {
  display: flex;
  gap: 76px;
}

.jd-footer-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.jd-footer-col > b {
  font: 500 10.5px/1 var(--jd-sans);
  letter-spacing: 0.24em;
  color: var(--jd-ink-footer);
}

.jd-footer-col a,
.jd-footer-col span {
  font: 300 15px/1.4 var(--jd-sans);
  color: var(--jd-on-navy-soft);
  transition: color 0.32s var(--jd-ease);
}

.jd-footer-col a:first-of-type {
  color: var(--jd-white);
}

.jd-footer-col a:hover {
  color: var(--jd-gold);
}

.jd-footer-col > span {
  font-size: 14px;
  line-height: 1.6;
  color: var(--jd-steel);
  max-width: 230px;
}

.jd-footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  max-width: var(--jd-max);
  margin: 0 auto;
  padding-top: 26px;
  font: 300 12px/1.6 var(--jd-sans);
  color: var(--jd-ink-footer);
  letter-spacing: 0.04em;
  flex-wrap: wrap;
}

.jd-footer-bottom a {
  color: var(--jd-ink-footer);
  transition: color 0.32s var(--jd-ease);
}

.jd-footer-bottom a:hover {
  color: var(--jd-on-navy-soft);
}

@media (max-width: 1080px) {
  .jd-footer-top {
    flex-direction: column;
    gap: 44px;
  }

  .jd-footer-cols {
    gap: 56px;
    flex-wrap: wrap;
  }
}

@media (max-width: 640px) {
  .jd-footer {
    padding-top: 56px;
  }

  .jd-footer-bottom {
    gap: 12px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   23 · ENTRANCE

   The handoff animates the hero in four steps. Kept, because the first thing
   this page has to do is feel considered — but every one is `both`-filled and
   the reduced-motion block at the top of this file kills all of them.
   ══════════════════════════════════════════════════════════════════════════ */

@keyframes jdRise {
  from {
    opacity: 0.001;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.jd-rise {
  animation: jdRise 0.85s var(--jd-ease) both;
}

.jd-rise-1 {
  animation-delay: 0.05s;
}

.jd-rise-2 {
  animation-delay: 0.14s;
}

.jd-rise-3 {
  animation-delay: 0.24s;
}

.jd-rise-4 {
  animation-delay: 0.34s;
}

/* ══════════════════════════════════════════════════════════════════════════
   24 · PRINT

   Somebody WILL print the Experience page to take into a meeting — it is a CV.
   Navy bands become paper, the nav and the CTAs go, and the timeline keeps its
   spine.
   ══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
   13b · GALLERY
   ══════════════════════════════════════════════════════════════════════════ */

/* A MASONRY, because nothing is cropped. The client sent these as his own record and
   asked for them unedited, so portrait and landscape sit side by side and the column
   layout is what lets them do that without letterboxing or a centre crop. CSS columns
   rather than grid: it needs no per-item height, which is the one number a stylesheet
   cannot know about an uncropped set. */
.jd-shots {
  column-count: 3;
  column-gap: 26px;
}

.jd-shot {
  /* Nothing may be split across a column boundary. */
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin: 0 0 26px;
}

.jd-shot-link {
  display: block;
  border-radius: var(--jd-r);
}

.jd-shot picture {
  display: block;
  overflow: hidden;
  border-radius: var(--jd-r);
  background: var(--jd-paper-soft);
}

/* FULL COLOUR, ALWAYS. There was a grayscale() filter here — it unified a decade of
   mismatched phone white balance — and it is gone: Ante, 2026-08-21, "remove this gray or
   black and white filter and full color always". These are the client's photographs, not
   art direction, and the studio does not restyle them. */
.jd-shot img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.5s var(--jd-ease);
}

.jd-shot:hover img,
.jd-shot-link:focus-visible img {
  transform: scale(1.03);
}

.jd-shot figcaption {
  margin-top: 12px;
  font: 500 max(10px, calc(11px * var(--jd-scale))) / 1.5 var(--jd-sans);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-meta);
}

/* The note carries the page's actual argument — that the people are missing on
   purpose — so it is set as running text, not as a caption. */
.jd-shots-note {
  max-width: 62ch;
  margin: 54px auto 0;
  padding-top: 26px;
  border-top: 1px solid var(--ink-rule);
  font: 300 max(14px, calc(15px * var(--jd-scale))) / 1.75 var(--jd-sans);
  color: var(--ink-soft);
  text-align: center;
}

@media (max-width: 900px) {
  .jd-shots {
    column-count: 2;
    column-gap: 20px;
  }

  .jd-shot {
    margin-bottom: 20px;
  }
}

@media (max-width: 560px) {
  .jd-shots {
    column-count: 1;
  }
}

/* A photograph printed as a grey slab helps nobody, and this page is eleven of them. */
@media print {
  .jd-shots {
    display: none;
  }
}

/* ── the photograph viewer ─────────────────────────────────────────────────
   Opened by site.js. Without script the grid's anchors open the file directly, so
   none of this is load-bearing — which is why it can afford to be `hidden` in the
   markup and styled only for the case where a script is there to reveal it. */
.jd-lb[hidden] {
  display: none;
}

/* While the viewer is open the page furniture goes. Set by site.js; without script the
   viewer never opens, so this never applies. */
html.jd-lb-open .jd-fab,
html.jd-lb-open .jd-nav {
  visibility: hidden;
}

.jd-lb {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 56px);
  /* 0.94 was not enough: 6% of a white band still reads as a legible page behind the
     photograph, and the hero heading was plainly visible through it. A viewer should
     leave nothing to look at but the picture. */
  background: rgba(6, 17, 33, 0.985);
}

/* ZOOM APPLIES TO THE PHOTOGRAPH, NEVER TO THE PAGE (product standard §8).
   Two fingers scale the image; the site behind does not move. That is the whole reason
   the gesture is hand-rolled instead of left to the browser, whose pinch scales the
   visual viewport — the page — which is exactly what must not happen here. */
.jd-lb-figure {
  margin: 0;
  max-width: min(1400px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  /* The script owns every gesture inside this box. Without this the browser claims the
     pinch and the horizontal drag before a listener ever sees them. */
  touch-action: none;
}

/* The grid is full colour and so is this — nothing is treated anywhere. */
.jd-lb-figure img {
  display: block;
  max-width: 100%;
  /* Room for the caption under a landscape frame on a short screen. */
  max-height: calc(100vh - 190px);
  max-height: calc(100dvh - 190px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--jd-r);
  transform-origin: center center;
  will-change: transform;
  -webkit-user-select: none;
  user-select: none;
}

/* The caption would drift away from its photograph as it scales, so it steps aside. */
.jd-lb.is-zoomed .jd-lb-figure figcaption,
.jd-lb.is-zoomed .jd-lb-bar {
  opacity: 0;
  pointer-events: none;
}

.jd-lb.is-zoomed .jd-lb-figure img {
  border-radius: 0;
}

.jd-lb-figure figcaption {
  font: 500 max(11px, calc(12px * var(--jd-scale))) / 1.5 var(--jd-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--jd-on-navy-soft);
  text-align: center;
  transition: opacity 0.3s var(--jd-ease);
}

.jd-lb-figure figcaption[hidden] {
  display: none;
}

/* ── the cue bar ───────────────────────────────────────────────────────────
   Controls and instruction in one strip at the foot of the screen. It fades two
   seconds after it appears so it stops covering the photograph, and comes back on a
   move, on a tap in the middle of the screen, or on keyboard focus. */
.jd-lb-bar {
  position: absolute;
  left: 50%;
  bottom: clamp(14px, 4vw, 30px);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 8px;
  gap: clamp(8px, 3vw, 18px);
  max-width: calc(100% - 24px);
  padding: 8px 10px;
  border-radius: var(--jd-r-lg);
  background: rgba(6, 17, 33, 0.72);
  transition: opacity 0.45s var(--jd-ease);
}

.jd-lb-bar[data-faded] {
  opacity: 0;
  pointer-events: none;
}

/* Keyboard arrival always wins over the timer: a control you tabbed to must be visible. */
.jd-lb-bar:focus-within {
  opacity: 1;
  pointer-events: auto;
}

/* The instruction takes a LINE OF ITS OWN, above the controls. Sharing the row with two
   44px buttons and the counter left it about 200px on a 390px screen, and it wrapped to
   one word per line — a nine-line bar half the height of the photograph. */
.jd-lb-hint {
  flex-basis: 100%;
  order: -1;
  font: 400 max(10px, calc(11px * var(--jd-scale))) / 1.4 var(--jd-sans);
  letter-spacing: 0.08em;
  color: var(--jd-on-navy-soft);
  text-align: center;
  white-space: nowrap;
}

.jd-lb-count {
  font: 500 max(10px, calc(11px * var(--jd-scale))) / 1 var(--jd-sans);
  letter-spacing: 0.12em;
  color: var(--jd-gold);
  white-space: nowrap;
}

.jd-lb-close,
.jd-lb-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: var(--jd-r);
  background: rgba(244, 246, 248, 0.1);
  color: var(--jd-white);
  cursor: pointer;
  --ink-focus: var(--jd-gold);
  transition: background 0.24s var(--jd-ease);
}

.jd-lb-close:hover,
.jd-lb-nav:hover {
  background: rgba(244, 246, 248, 0.2);
}

.jd-lb-close svg,
.jd-lb-nav svg {
  width: 22px;
  height: 22px;
}

/* Close is the one control that never fades: on a phone there is no Escape key, and a
   visitor who cannot find the way out of a full-screen photograph is stuck in it. */
.jd-lb-close {
  position: absolute;
  top: clamp(12px, 3vw, 28px);
  right: clamp(12px, 3vw, 28px);
}

/* On a POINTER screen there is no swipe and no tap zone, so the arrows leave the bar and
   take up their usual stations at the edges, and the swipe instruction goes away. */
@media (min-width: 641px) {
  /* ⚠ The bar has to drop its transform FIRST. A transformed element is the containing
     block for its fixed descendants — the same trap that once had the whole viewer
     anchored to a band — so while the bar still carried translateX(-50%) the arrows
     below stationed themselves against the BAR and sat 634px in from the edge, which is
     exactly where the check found them. */
  .jd-lb-bar {
    left: 0;
    right: 0;
    transform: none;
    justify-content: center;
    background: none;
  }

  .jd-lb-nav {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
  }

  .jd-lb-prev {
    left: clamp(8px, 2vw, 28px);
  }

  .jd-lb-next {
    right: clamp(8px, 2vw, 28px);
  }

  .jd-lb-hint {
    display: none;
  }
}

@media (max-width: 640px) {
  .jd-lb-close,
  .jd-lb-nav {
    width: 44px;
    height: 44px;
  }

  .jd-lb-nav svg {
    width: 20px;
    height: 20px;
  }

  .jd-lb-figure img {
    max-height: calc(100dvh - 210px);
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   14 · THE FLOATING QUICK-CONTACT PAIR
   ══════════════════════════════════════════════════════════════════════════ */

/* The header is not sticky, so once you scroll past it there is no way to reach him
   without scrolling back. These two sit above the page instead.

   ALWAYS VISIBLE, on Ante's instruction (2026-08-20): the first version faded them out
   whenever one of the page's own WhatsApp buttons was on screen, which meant they were
   absent exactly when the page first loaded — "they should be always available on the
   screen for fast actions". They are still not emitted on the Contact page, which IS
   the call to action. See quickContact() in the builder. */
.jd-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* BOTH buttons are gold with a navy glyph, and that is the whole point.
   The first pair gave the phone a NAVY ground to make it the secondary of the two —
   which meant it vanished completely wherever it floated over a navy band, and this
   page is navy for the whole hero, the stat bar, the closing bands and the footer.
   A fixed element floats over every ground the page has, so it has to be legible
   against all of them: gold reads on navy, and the navy ring plus the shadow give it
   an edge on paper. Hierarchy between the two is not worth an invisible button. */
.jd-fab-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  /* A rounded square, not a circle: 12px on a 54px button is 22.2%, which is the
     icon tile's own 21.9% corner. The mark has always been a rounded square, so
     the floating pair reads as the brand rather than as a generic app FAB. */
  border-radius: var(--jd-r);
  background: var(--jd-gold);
  color: var(--jd-navy);
  /* No border — Ante, 2026-08-20. On navy the gold fill carries the edge at 6.64:1. On
     paper it is 2.49:1, under the 3:1 SC 1.4.11 asks of a UI boundary, so the SHADOW is
     what separates it there; it is deliberately tighter and darker than a decorative one
     for that reason. Do not lighten it without putting the border back. */
  border: 0;
  /* The gold ground needs a DARK focus ring; the gold one would be invisible on it. */
  --ink-focus: var(--jd-navy);
  box-shadow:
    0 1px 2px rgba(6, 17, 33, 0.45),
    0 8px 22px rgba(6, 17, 33, 0.32);
  transition:
    transform 0.24s var(--jd-ease),
    background 0.24s var(--jd-ease);
}

/* 26 on a 54 button, both glyphs filled and both drawn to the full 24 grid, so the two
   read as the same size. The stroked handset that was here before was optically half
   the weight of the WhatsApp mark beside it. */
.jd-fab-btn svg {
  width: 26px;
  height: 26px;
  display: block;
}

.jd-fab-btn:hover {
  transform: translateY(-2px);
}

@media (max-width: 640px) {
  .jd-fab {
    right: 16px;
    bottom: 16px;
  }
}

@media print {
  .jd-nav,
  .jd-navpanel,
  .jd-burger,
  .jd-skip,
  .jd-actions,
  .jd-fab,
  .jd-form,
  .jd-watermark {
    display: none !important;
  }

  .jd-band,
  .jd-band--navy,
  .jd-band--hero,
  .jd-footer {
    background: none !important;
    padding: 18px 0 !important;
    --ink-head: #000;
    --ink-body: #000;
    --ink-soft: #000;
    --ink-meta: #333;
    --ink-rule: #999;
    --ink-gold: #000;
    --ink-focus: #000;
  }

  /* ⚠ The footer's colours do NOT come from the band tokens — they are named directly on
     the components (and `.jd-footer{color:#FFFFFF}` is also in the inlined safety CSS,
     which no stylesheet rule of lower weight can undo). Resetting the tokens above
     therefore left the entire footer white-on-white when printed: the WhatsApp number and
     the first Site link vanished completely, and everything else went pale grey.
     Somebody WILL print the Experience page — it is a CV. */
  .jd-footer,
  .jd-footer *,
  .jd-stat b,
  .jd-stat span,
  .jd-quote blockquote,
  .jd-quote cite,
  .jd-facts > b,
  .jd-facts > span,
  .jd-footer-lockup span,
  .jd-footer-lockup span span,
  .jd-footer-slogan,
  .jd-footer-col > b,
  .jd-footer-col a,
  .jd-footer-col span,
  .jd-footer-bottom,
  .jd-footer-bottom a {
    color: #000 !important;
  }

  .jd-facts,
  .jd-portrait {
    background: none !important;
  }

  /* Square on paper. A radius is a screen affordance — printed, a rounded
     outlined box reads as a field to fill in rather than as a card. */
  .jd-btn,
  .jd-tile,
  .jd-cert,
  .jd-quote,
  .jd-form,
  .jd-facts,
  .jd-portrait,
  .jd-row,
  .jd-wa {
    border-radius: 0 !important;
  }

  .jd-faq details {
    /* A closed accordion prints as a list of questions with no answers. */
    display: block;
  }

  .jd-faq p {
    display: block !important;
    padding-right: 0;
  }
}