/* DampFix Scotland - public website.
   Static, no framework, no external requests.

   Palette logic: a deep cool petrol blue carries the institutional weight a
   council expects, and a warm rust-orange is used sparingly for actions and
   figures. Cool reads as the problem (water, cold, damp); warm reads as the
   answer (dry, warm, resolved). Because the warm colour appears only on things
   worth clicking, the eye goes where it should.

   Every colour pairing used for text has been measured against WCAG AA. */

:root {
  /* Structure */
  --brand:        #0a4257;   /* 10.9:1 against white */
  --brand-deep:   #06303f;   /* 14.0:1 - dark sections */
  --brand-mid:    #0e5c78;   /*  7.4:1 */
  --brand-wash:   #e9f2f6;
  --brand-line:   #b9d2dd;

  /* Action */
  --accent:       #c2410c;   /*  5.2:1 - highlights, figures */
  --accent-deep:  #9a3412;   /*  7.3:1 - buttons with white text */
  --accent-wash:  #fdf1ea;

  --ok:           #0f5c3a;
  --ok-wash:      #eaf5ef;

  --ink:      #141a1f;
  --ink-soft: #46545f;
  --line:     #d3dce2;
  --bg:       #ffffff;
  --panel:    #f5f8fa;

  --focus:  #ffbf47;
  --radius: 12px;
  --maxw:   70rem;

  /* An editorial serif for display sizes reads as considered rather than
     templated, and costs nothing: these are all system faces, so there is no
     external font request to slow the page or leak a visitor to a third party. */
  --font-display: ui-serif, Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* 8pt spacing scale, so rhythm is decided once rather than per component. */
  --s1: .5rem;  --s2: 1rem;   --s3: 1.5rem;  --s4: 2rem;
  --s5: 3rem;   --s6: 4rem;   --s7: 5.5rem;

  --shadow-sm: 0 1px 2px rgba(6, 48, 63, .06), 0 2px 8px rgba(6, 48, 63, .05);
  --shadow-md: 0 4px 12px rgba(6, 48, 63, .08), 0 16px 40px rgba(6, 48, 63, .09);
  --shadow-lg: 0 8px 24px rgba(6, 48, 63, .12), 0 32px 70px rgba(6, 48, 63, .16);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #eef4f7; --ink-soft: #b3c2cc; --line: #3d4a54;
    --bg: #0e1418; --panel: #161f26;
    --brand-wash: #12303d; --brand-line: #2c5468;
    --accent: #ff8a4c;          /* lifted so it stays readable on dark */
    --accent-wash: #34190f;
    --ok-wash: #10281d;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1.0625rem; line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 3px; }
img, svg { max-width: 100%; height: auto; }

a { color: var(--brand); text-underline-offset: .18em; text-decoration-thickness: .08em; }
a:hover { color: var(--accent-deep); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) a { color: #7fc9ec; }
  :root:not([data-theme="light"]) a:hover { color: var(--accent); }
}

.skip-link { position: absolute; left: -9999px; top: 0; background: var(--focus); color: #000;
  padding: 1rem 1.25rem; font-weight: 700; z-index: 100; }
.skip-link:focus { left: 0; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 1.25rem; }
.wrap--narrow { max-width: 46rem; }

/* ---------- Header ---------- */

.site-header { border-bottom: 1px solid var(--line); background: var(--bg); position: sticky; top: 0; z-index: 40; }
.site-header__inner { display: flex; align-items: center; gap: 1rem; padding: .8rem 0; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--ink); font-weight: 800; font-size: 1.15rem; }
.brand:hover { color: var(--ink); }
.brand__mark { width: 2.2rem; height: 2.2rem; flex: none; }
.brand__name { letter-spacing: -.02em; }
.brand__name span { color: var(--accent); }

.site-nav { margin-left: auto; }
.site-nav ul { display: flex; flex-wrap: wrap; gap: .1rem; list-style: none; margin: 0; padding: 0; }
.site-nav a {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: .35rem .7rem;
  text-decoration: none; color: var(--ink); border-radius: 6px; font-weight: 600; font-size: .96rem;
}
.site-nav a:hover { background: var(--brand-wash); color: var(--brand); }
.site-nav a[aria-current="page"] { color: var(--accent-deep); box-shadow: inset 0 -3px 0 var(--accent); border-radius: 0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .site-nav a[aria-current="page"] { color: var(--accent); } }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 3rem; padding: .8rem 1.6rem; border-radius: var(--radius);
  font-size: 1.05rem; font-weight: 700; text-decoration: none;
  border: 2px solid transparent; cursor: pointer;
  transition: background-color .15s ease, transform .12s ease;
}
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }
.btn:active { transform: translateY(1px); }

/* The single warm element on the page. It is the thing to click. */
.btn--primary { background: var(--accent-deep); color: #fff; box-shadow: 0 6px 18px rgba(154, 52, 18, .28); }
.btn--primary:hover { background: #7c2a0e; color: #fff; }
.btn--ghost { border-color: var(--brand); color: var(--brand); background: transparent; }
.btn--ghost:hover { background: var(--brand-wash); color: var(--brand); }
.btn--onbrand { background: #fff; color: var(--brand-deep); }
.btn--onbrand:hover { background: var(--brand-wash); color: var(--brand-deep); }
.btn--onbrand-accent { background: var(--accent); color: #fff; }
.btn--onbrand-accent:hover { background: #a83a0b; color: #fff; }

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.75rem 0 0; }

/* ---------- Hero ---------- */

.hero {
  background:
    radial-gradient(1100px 460px at 82% -12%, rgba(194, 65, 12, .22), transparent 62%),
    linear-gradient(160deg, var(--brand-deep) 0%, var(--brand) 62%, #0c516a 100%);
  color: #fff; position: relative; overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(160deg, rgba(0,0,0,.75), transparent 65%);
  -webkit-mask-image: linear-gradient(160deg, rgba(0,0,0,.75), transparent 65%);
}
.hero__inner { position: relative; z-index: 1; padding: 4.25rem 0 4rem; display: grid; grid-template-columns: 1.12fr .88fr; gap: 3.25rem; align-items: center; }
@media (max-width: 60rem) { .hero__inner { grid-template-columns: 1fr; gap: 2.25rem; padding: 2.75rem 0 2.5rem; } }

.hero h1 { color: #fff; }
.hero p.lede { font-size: 1.22rem; color: #d8e7ee; margin: 0 0 .5rem; max-width: 34rem; }
.hero .small { color: #b7cedb; }
.hero a:not(.btn) { color: #ffc9a8; }
/* The ghost button borrows the brand colour, which would vanish against the
   dark hero. On the hero it becomes a white outline instead. */
.hero .btn--ghost, .cta .btn--ghost, .panel-dark .btn--ghost {
  border-color: rgba(255, 255, 255, .65); color: #fff; background: transparent;
}
.hero .btn--ghost:hover, .cta .btn--ghost:hover, .panel-dark .btn--ghost:hover {
  background: rgba(255, 255, 255, .14); color: #fff; border-color: #fff;
}
.cta .section-lede, .panel-dark .section-lede { color: #cfe1ea; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--accent); color: #fff; font-weight: 700;
  font-size: .82rem; letter-spacing: .07em; text-transform: uppercase;
  padding: .4rem .85rem; border-radius: 999px; margin: 0 0 1.15rem;
}

h1 {
  font-family: var(--font-display);
  font-size: clamp(2.3rem, 5.2vw, 3.9rem);
  line-height: 1.06; margin: 0 0 var(--s2);
  letter-spacing: -.022em; font-weight: 600;
  text-wrap: balance;
}

/* ---------- Sections ---------- */

section { padding: var(--s6) 0; }
@media (min-width: 62rem) { section { padding: var(--s7) 0; } }
section.alt { background: var(--panel); border-block: 1px solid var(--line); }
h2 {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.1vw, 2.5rem); line-height: 1.14;
  margin: 0 0 .75rem; letter-spacing: -.018em; font-weight: 600; text-wrap: balance;
}
h3 { font-size: 1.12rem; margin: 0 0 .4rem; font-weight: 700; letter-spacing: -.005em; }
.section-lede { font-size: 1.18rem; line-height: 1.6; color: var(--ink-soft); max-width: 42rem; margin: 0 0 var(--s4); }

/* A small uppercase label above a heading. Cheap way to add editorial structure. */
.kicker {
  display: block; font-family: var(--font-sans); font-size: .78rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
  margin: 0 0 .65rem;
}
.cta .kicker, .panel-dark .kicker, .hero .kicker { color: #ffb08a; }

/* Icons: one family, sized by context, coloured by currentColor. */
.icon { width: 1.5rem; height: 1.5rem; flex: none; fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.icon--lg { width: 2rem; height: 2rem; stroke-width: 1.5; }

.icon-badge {
  display: inline-grid; place-items: center; width: 3rem; height: 3rem;
  border-radius: 12px; background: var(--brand-wash); color: var(--brand);
  margin: 0 0 var(--s2);
}
.icon-badge--accent { background: var(--accent-wash); color: var(--accent-deep); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icon-badge--accent { color: var(--accent); }
}

.grid { display: grid; gap: 1.5rem; }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }

.card {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.card:hover { border-color: var(--brand-line); box-shadow: 0 6px 20px rgba(10, 66, 87, .07); }
@media (prefers-reduced-motion: reduce) { .card { transition: none; } }
.card__icon { font-size: 1.95rem; line-height: 1; display: block; margin: 0 0 .65rem; }
.card p:last-child { margin-bottom: 0; }

/* ---------- Deadline figures ---------- */

.deadlines { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; margin: 2rem 0 0; }
.deadline { background: var(--bg); border: 1px solid var(--line); border-top: 5px solid var(--accent); border-radius: var(--radius); padding: 1.35rem; }
.deadline__n { font-size: 2.8rem; font-weight: 800; line-height: 1; color: var(--accent); letter-spacing: -.04em; }
.deadline__u { font-size: .95rem; font-weight: 700; color: var(--ink-soft); display: block; margin: .25rem 0 .55rem; }
.deadline__d { font-size: .98rem; margin: 0; }

/* ---------- Feature card on brand ---------- */

.countdown-card {
  background: rgba(255, 255, 255, .07); color: #fff; border-radius: var(--radius); padding: 1.9rem;
  border: 1px solid rgba(255, 255, 255, .22);
}
.countdown-card h2, .countdown-card h3 { color: #fff; margin-top: 0; }
.countdown-card p { color: #d5e6ee; }
.countdown-card ul { margin: 1rem 0 0; padding-left: 1.15rem; color: #eaf4f9; }
.countdown-card li { margin: .35rem 0; }
.countdown-card strong { color: #ffd0b3; }

/* ---------- Steps ---------- */

.steps { counter-reset: step; list-style: none; margin: 0; padding: 0; }
.steps > li { position: relative; padding: 0 0 1.9rem 3.6rem; counter-increment: step; }
.steps > li::before {
  content: counter(step); position: absolute; left: 0; top: 0;
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: var(--brand); color: #fff;
  display: grid; place-items: center; font-weight: 800; font-size: 1.02rem;
}
.steps > li::after { content: ""; position: absolute; left: 1.24rem; top: 2.5rem; bottom: 0; width: 2px; background: var(--line); }
.steps > li:last-child { padding-bottom: 0; }
.steps > li:last-child::after { display: none; }
.steps h3 { margin: .35rem 0 .3rem; }
.steps p { margin: 0; color: var(--ink-soft); }

/* ---------- Lists ---------- */

.ticks, .crosses { list-style: none; margin: 0; padding: 0; }
.ticks li, .crosses li { position: relative; padding: 0 0 .7rem 2rem; }
.ticks li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--ok); font-weight: 800; font-size: 1.1rem; }
.crosses li::before { content: "✕"; position: absolute; left: 0; top: 0; color: var(--accent); font-weight: 800; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ticks li::before { color: #4ec18d; } }

/* ---------- Callouts ---------- */

.callout { border-left: 6px solid var(--brand); background: var(--brand-wash); padding: 1.3rem 1.45rem; border-radius: var(--radius); margin: 1.75rem 0; }
.callout--warn { border-left-color: var(--accent); background: var(--accent-wash); }
.callout--ok { border-left-color: var(--ok); background: var(--ok-wash); }
.callout h3 { margin-top: 0; }
.callout p:last-child, .callout ul:last-child { margin-bottom: 0; }

/* ---------- Tables ---------- */

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); margin: 1.5rem 0; }
table { border-collapse: collapse; width: 100%; min-width: 34rem; background: var(--bg); }
th, td { text-align: left; padding: .85rem 1rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { background: var(--panel); font-size: .86rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); }
tbody tr:last-child td { border-bottom: 0; }

/* ---------- CTA band ---------- */

.cta {
  background:
    radial-gradient(900px 380px at 88% 0%, rgba(194, 65, 12, .26), transparent 60%),
    linear-gradient(160deg, var(--brand-deep), var(--brand));
  color: #fff; padding: 3.5rem 0;
}
.cta h2 { color: #fff; }
.cta p { color: #d5e6ee; font-size: 1.12rem; max-width: 42rem; }

/* ---------- FAQ ---------- */

details.faq { border: 1px solid var(--line); border-radius: var(--radius); margin: 0 0 .75rem; background: var(--bg); }
details.faq[open] { border-color: var(--brand-line); }
details.faq summary {
  cursor: pointer; padding: 1.05rem 1.3rem; font-weight: 700; min-height: 3rem;
  display: flex; align-items: center; list-style: none; gap: 1rem;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: "+"; margin-left: auto; font-size: 1.5rem; font-weight: 400; color: var(--accent); line-height: 1; }
details.faq[open] summary::after { content: "−"; }
details.faq summary:hover { color: var(--brand); }
details.faq .faq__body { padding: 0 1.3rem 1.3rem; }
details.faq .faq__body p:last-child { margin-bottom: 0; }

/* ---------- Footer ---------- */

.site-footer { background: var(--panel); border-top: 4px solid var(--brand); padding: 3rem 0 2rem; font-size: .97rem; }
.site-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; }
@media (max-width: 48rem) { .site-footer__grid { grid-template-columns: 1fr; } }
.site-footer h3 { font-size: .84rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); margin: 0 0 .5rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin: 0; }
.site-footer a { color: var(--ink); }
/* WCAG 2.2 target size: stacked footer links are not inline in a sentence, so
   they need to clear 24px rather than sitting at their 21px line height. */
.site-footer ul a { display: inline-block; padding: .35rem 0; min-height: 1.6rem; }
.legal { border-top: 1px solid var(--line); margin-top: 2rem; padding-top: 1.5rem; color: var(--ink-soft); font-size: .9rem; }
.legal p { margin: 0 0 .5rem; }

/* ---------- Bits ---------- */

.status-note { background: var(--brand-wash); border: 1px solid var(--brand-line); border-radius: var(--radius); padding: 1rem 1.25rem; font-size: .97rem; margin: 0 0 1.5rem; }
.small { font-size: .93rem; color: var(--ink-soft); }
.center { text-align: center; }
.mt0 { margin-top: 0; }
.mt-sm { margin-top: 1rem; }
.mt-md { margin-top: 1.25rem; }
.mt-lg { margin-top: 1.5rem; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media print {
  .site-header, .site-nav, .cta, .skip-link { display: none !important; }
  .hero { background: none !important; color: #000; }
  .hero h1, .hero p.lede { color: #000; }
  body { font-size: 11pt; color: #000; background: #fff; }
  .card, .table-wrap, .callout { break-inside: avoid; }
}

/* ===========================================================================
   Premium layout components
   Depth, asymmetry and a signature device, so the page does not read as a
   stack of identical cards.
   =========================================================================== */

/* --- Product visual in the hero ------------------------------------------ */

.mock {
  border-radius: 16px; overflow: hidden; background: #fff;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255, 255, 255, .18);
  transform: perspective(1400px) rotateY(-6deg) rotateX(2deg);
  transform-origin: left center;
}
@media (max-width: 60rem) { .mock { transform: none; } }
@media (prefers-reduced-motion: reduce) { .mock { transform: none; } }
.mock svg { display: block; width: 100%; height: auto; }

/* --- The 10 / 3 / 5 signature device ------------------------------------- */

.clockline { margin: var(--s4) 0 0; }
.clockline__track {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}
.clockline__step { background: var(--bg); padding: var(--s3); position: relative; }
.clockline__step::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--accent), rgba(194, 65, 12, .25));
}
.clockline__n {
  font-family: var(--font-display); font-size: 3.2rem; line-height: .95;
  font-weight: 600; letter-spacing: -.04em; color: var(--accent);
  display: block; margin: .3rem 0 .2rem;
}
.clockline__u { display: block; font-size: .84rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-soft); margin: 0 0 .6rem; }
.clockline__d { margin: 0; font-size: 1rem; color: var(--ink-soft); }
.clockline__from { font-size: .93rem; color: var(--ink-soft); margin: var(--s2) 0 0; }

/* --- Alternating feature rows -------------------------------------------- */

.feature { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); align-items: center; }
.feature + .feature { margin-top: var(--s6); }
.feature__media { order: 2; }
.feature--flip .feature__media { order: 0; }
@media (max-width: 58rem) {
  .feature { grid-template-columns: 1fr; gap: var(--s3); }
  .feature__media, .feature--flip .feature__media { order: 0; }
  .feature + .feature { margin-top: var(--s5); }
}
.feature h3 { font-family: var(--font-display); font-size: 1.65rem; font-weight: 600;
  letter-spacing: -.015em; line-height: 1.2; margin: 0 0 .6rem; }
.feature p { color: var(--ink-soft); font-size: 1.06rem; }

.frame {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); padding: var(--s3); box-shadow: var(--shadow-sm);
}
.frame svg { display: block; width: 100%; height: auto; }

/* --- Editorial list, replaces a third card grid --------------------------- */

.editorial { display: grid; gap: 0; }
.editorial > li { list-style: none; display: grid; grid-template-columns: 3.25rem 1fr;
  gap: var(--s3); padding: var(--s3) 0; border-top: 1px solid var(--line); align-items: start; }
.editorial > li:last-child { border-bottom: 1px solid var(--line); }
.editorial h3 { margin: 0 0 .3rem; }
.editorial p { margin: 0; color: var(--ink-soft); }
.editorial .icon-badge { margin: 0; width: 2.75rem; height: 2.75rem; }

/* --- Dark panel ----------------------------------------------------------- */

.panel-dark {
  background: linear-gradient(158deg, var(--brand-deep), var(--brand));
  color: #fff; border-radius: 18px; padding: var(--s5); box-shadow: var(--shadow-md);
}
.panel-dark h2, .panel-dark h3 { color: #fff; }
.panel-dark p, .panel-dark li { color: #d6e6ee; }
.panel-dark .crosses li::before { color: #ff9e6b; }
.panel-dark .ticks li::before { color: #62d6a0; }
.panel-dark a { color: #ffc9a8; }

/* --- Pull quote ----------------------------------------------------------- */

.pullquote {
  font-family: var(--font-display); font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  line-height: 1.35; letter-spacing: -.015em; font-weight: 600;
  border-left: 4px solid var(--accent); padding: .35rem 0 .35rem var(--s3);
  margin: var(--s4) 0; max-width: 40rem; text-wrap: balance;
}
.pullquote cite { display: block; font-family: var(--font-sans); font-size: .95rem;
  font-weight: 400; font-style: normal; color: var(--ink-soft); margin-top: var(--s2); letter-spacing: 0; }

/* --- Cards, lifted --------------------------------------------------------- */

.card { box-shadow: var(--shadow-sm); }
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .card:hover { transform: none; } }
.card h3 { font-size: 1.12rem; }

/* --- Hairline divider ------------------------------------------------------ */

.divider { border: 0; border-top: 1px solid var(--line); margin: var(--s5) 0; }

/* A link sitting alone in its own paragraph is a standalone control, not an
   inline link in a sentence, so WCAG 2.2 target size applies to it. */
p > a:only-child { display: inline-block; padding-block: .35rem; }