/* Strange DNA case study, part 1: tokens, hero, brief and the hotspot stage.
   Part 2 (case-strange-dna-2.css): catalogue, brand band, arched results, responsive.
   Shared pieces: case-study.css, case-contact.css.
   Signature: pulsing hotspots on the quote builder in .sd-spot open callouts
   (case-strange-dna.js). The page runs from dawn blush to burgundy dusk. */

:root {
  --accent: #b0123f;
  --sd-wine: #7a0a2a;
  --sd-oxblood: #3a0516;
  --sd-night: #22030d;
  --sd-blush: #f6e3e7;
  --sd-peach: #f2b8a0;
  --sd-neon: #ff3d6e;
  --sd-cream: #fff5f2;
  --sd-text: rgb(255 238 240 / 76%);
  --sd-line: rgb(255 200 210 / 18%);
  --cs-ink: #2a0b14;
  --cs-muted: #6a4a52;
  --cs-faint: #9a7a82;
  --cs-line: rgb(42 11 20 / 12%);
  --cs-bg: #fdf6f5;
  --cs-dark: var(--sd-oxblood);
  --cs-dot: var(--sd-wine);
  --cs-dot-dark: var(--sd-neon);
  --cf-dots: rgb(42 11 20 / 9%);
  --cf-glow: rgb(176 18 63 / 14%);
  --cf-btn: #2a0b14;
  --cf-btn-icon: #ff3d6e;
  --cf-btn-icon-fg: #fff;
  --cf-sent: #2a0b14;
  --cf-sent-fg: #f2b8a0;
}

a:hover { color: var(--accent); }
.sd-serif { font-family: var(--serif); font-style: italic; font-weight: 500; letter-spacing: -.02em; color: var(--accent); }
.sd-spot .sd-serif, .sd-send .sd-serif, .sd-cat .sd-serif, .sd-dusk .sd-serif, .sd-out .sd-serif { color: var(--sd-peach); }
.sd-spot, .sd-cat, .sd-dusk, .sd-out { color: var(--sd-cream); }
.sd-spot .cs-kicker, .sd-cat .cs-kicker, .sd-dusk .cs-kicker, .sd-out .cs-kicker { color: rgb(255 238 240 / 62%); }

/* ---------- hero: dawn sky on the left, the showcase on the right ---------- */
.sd-hero { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: min(100vh, 980px); overflow: hidden; padding: 0 0 0 var(--gutter); background: linear-gradient(180deg, #f1dce5, var(--sd-blush) 55%, #f9e8ea); }
/* max-width: none lets the negative margin widen the art to the hero's right edge (the global img/picture
   max-width: 100% would cap it at the column and leave a gap); the bottom fades into the next section.
   Focus sits right of centre so the quote screens stay whole when narrower windows crop the sides. */
.sd-hero__art { grid-column: 2; grid-row: 1; align-self: stretch; max-width: none; margin-left: -12%; }
.sd-hero__art img { display: block; width: 100%; max-width: none; height: 100%; object-fit: cover; object-position: 70% 60%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%), linear-gradient(180deg, #000 88%, transparent 100%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 22%), linear-gradient(180deg, #000 88%, transparent 100%); mask-composite: intersect; }
.sd-hero__copy { position: relative; z-index: 1; grid-column: 1; grid-row: 1; display: grid; align-content: center; gap: 24px; max-width: 560px; padding: clamp(128px, 11vw, 168px) 0 72px; }
.sd-logo { display: inline-flex; align-items: center; gap: 2px; justify-self: start; font-size: 22px; font-weight: 500; letter-spacing: .02em; color: var(--cs-ink); }
.sd-logo__bolt { width: 14px; height: 22px; background: var(--accent); clip-path: polygon(55% 0, 10% 58%, 45% 58%, 30% 100%, 90% 38%, 55% 38%, 75% 0); }
.sd-hero__title { font-weight: 600; font-size: clamp(38px, 4.4vw, 74px); line-height: 1.02; letter-spacing: -.04em; text-wrap: balance; color: var(--cs-ink); }
.sd-hero__title .sd-serif { font-weight: 500; }
.sd-hero__lead { margin: 0; font-size: 17px; line-height: 1.65; color: var(--cs-muted); }
.sd-spec { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 8px 0 0; border-top: 1px solid rgb(122 10 42 / 25%); }
.sd-spec > div { padding: 14px 16px 14px 0; border-bottom: 1px solid rgb(122 10 42 / 14%); }
.sd-spec dt { margin-bottom: 4px; font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--sd-wine); }
.sd-spec dd { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--cs-ink); }

/* ---------- brief + module index ---------- */
.sd-brief { background: linear-gradient(180deg, #f9e8ea, var(--cs-bg)); }
.sd-brief__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 112px); align-items: start; }
.sd-brief__copy { position: sticky; top: 120px; display: grid; gap: 22px; }
.sd-brief__copy .cs-kicker { margin: 0; }
.sd-brief__lead { max-width: 540px; margin: 0; font-size: 17px; line-height: 1.65; color: var(--cs-muted); }
.sd-index { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--cs-line); }
.sd-index li { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 16px; padding: 26px 0; border-bottom: 1px solid var(--cs-line); }
.sd-index__n { font-family: var(--serif); font-style: italic; font-size: 34px; line-height: 1; color: var(--accent); }
.sd-index h3 { margin: 0 0 6px; font-size: 21px; font-weight: 600; letter-spacing: -.01em; color: var(--cs-ink); }
.sd-index p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--cs-muted); }

/* ---------- signature: the hotspot stage ---------- */
.sd-spot { background: radial-gradient(70% 50% at 50% 0%, rgb(255 61 110 / 22%), transparent 70%), linear-gradient(180deg, var(--sd-wine), var(--sd-oxblood) 40%, var(--sd-night)); }
.sd-spot__head { display: grid; justify-items: center; gap: 18px; max-width: 900px; margin: 0 auto; text-align: center; }
.sd-spot__head .cs-kicker { margin: 0; }
.sd-spot__lead { max-width: 640px; margin: 0; font-size: 17px; line-height: 1.65; color: var(--sd-text); }
.sd-stage { position: relative; max-width: 1180px; margin: clamp(40px, 5vw, 72px) auto 0; }
.sd-stage__shot { position: relative; border-radius: 28px; overflow: hidden; box-shadow: 0 0 0 1px rgb(255 61 110 / 35%), 0 60px 140px -50px rgb(255 61 110 / 55%); }
.sd-stage__shot img { display: block; width: 100%; height: auto; }

.sd-dot { position: absolute; left: var(--x); top: var(--y); z-index: 2; display: grid; place-items: center; width: 36px; height: 36px; margin: -18px 0 0 -18px; padding: 0; border: 0; border-radius: 50%; background: var(--sd-neon); box-shadow: 0 0 0 4px rgb(255 255 255 / 85%), 0 6px 20px rgb(122 10 42 / 50%); cursor: pointer; transition: transform .3s var(--ease), background .3s; }
.sd-dot::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--sd-neon); animation: sd-pulse 2.2s ease-out infinite; pointer-events: none; }
.sd-dot::after { content: ""; width: 12px; height: 12px; background: linear-gradient(#fff, #fff) center / 12px 2px no-repeat, linear-gradient(#fff, #fff) center / 2px 12px no-repeat; transition: transform .3s var(--ease); }
.sd-dot:hover { transform: scale(1.1); }
.sd-dot:focus-visible { outline: 3px solid var(--sd-peach); outline-offset: 6px; }
.sd-dot[aria-expanded="true"] { background: var(--sd-wine); }
.sd-dot[aria-expanded="true"]::after { transform: rotate(45deg); }
.sd-dot[aria-expanded="true"]::before { animation: none; opacity: 0; }
@keyframes sd-pulse { from { transform: scale(1); opacity: .9; } to { transform: scale(2.1); opacity: 0; } }

/* Without the script every note is listed under the image. */
.sd-notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; margin: 32px 0 0; padding: 0; list-style: none; }
.sd-note { display: grid; gap: 8px; padding: 22px 24px; border-radius: 20px; background: var(--sd-cream); color: var(--cs-ink); box-shadow: 0 30px 70px -30px rgb(0 0 0 / 60%); }
.sd-note__n { margin: 0; font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--accent); }
.sd-note h3 { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.sd-note p:last-child { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--cs-muted); }
.sd-stage.is-live .sd-notes { display: block; margin: 0; }
.sd-stage.is-live .sd-note { position: absolute; left: var(--nx, 50%); top: var(--ny, 50%); z-index: 3; width: min(340px, 80%); opacity: 0; visibility: hidden; transform: translateY(10px) scale(.97); transition: opacity .35s, transform .45s var(--ease), visibility .35s; }
.sd-stage.is-live .sd-note.is-open { opacity: 1; visibility: visible; transform: none; }
.sd-note__close { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgb(122 10 42 / 8%); font: inherit; font-size: 18px; line-height: 1; color: var(--sd-wine); cursor: pointer; }
.sd-note__close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* the client logo (from the site logo set) on a white pill, readable on light and dark heroes */
.sd-brand { display: inline-flex; align-items: center; justify-self: start; margin: 0; padding: 10px 16px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px rgb(0 0 0 / 6%), 0 10px 24px -14px rgb(0 0 0 / 35%); }
.sd-brand img { display: block; width: auto; height: 30px; }