/* ============================================================
   First Site Studio - north-wales.css
   Styles for web-design-north-wales-coast.html only. Loaded after
   styles.css, so anything here wins over a shared rule of the
   same specificity. Nothing in this file is used by any other page.

   Direction: "the path in". The homepage draws the logo's steps
   side-on, solid, on a light page. This page takes the logo's
   other shape, the arc, and draws a line of treads rising round
   it on the navy band, as outlines, to the green marker. Below
   the hero the page is one calm reading column; the short sky
   rule marks each section, as the eyebrow rule does elsewhere.

   All colours come from the tokens in styles.css. Hex values
   appear only inside the hero SVG's attributes.
   ============================================================ */

/* ============================================================
   Hero - navy band
   (moved here from styles.css; only this page uses it)

   Contrast against the navy, all measured:
   white 17.85:1, slate light 12.02:1, pale sky eyebrow 14.63:1,
   sky blue "found and booked" 4.85:1 (large display type only).
   ============================================================ */
.page-hero-dark {
  position: relative;
  overflow: hidden;
  background: var(--navy);
  padding-block: 80px 88px;
}

/* The drawing sits against the right-hand edge of the band and
   the copy keeps clear of it. --nw-art is the drawing's width. */
.page-hero-dark {
  --nw-art: clamp(300px, 36vw, 460px);
}

.page-hero-dark .container > :not(.nw-path) {
  max-width: calc(100% - var(--nw-art) - 24px);
}

.page-hero-dark h1 {
  color: var(--white);
  font-size: clamp(2.4rem, 4.8vw, 3.6rem);
  line-height: 1.07;
  letter-spacing: -0.02em;
}

.page-hero-dark h1 .accent-dot {
  color: var(--blue);
}

.page-hero-dark .lead {
  color: var(--white);
  font-size: 1.25rem;
  line-height: 1.5;
  margin-top: 26px;
  max-width: 30em;
}

/* Same grey the footer and the How it works band use for
   secondary text on navy. A solid colour, not a faded white. */
.page-hero-dark .lead-sub {
  color: var(--slate-light);
  margin-top: 16px;
  max-width: 34em;
}

.page-hero-dark .hero-actions {
  margin-top: 36px;
}

/* The shared .btn-secondary is a dark outline with dark text, which
   would vanish here, so it inverts inside the band. */
.page-hero-dark .btn-secondary {
  color: var(--white);
  border-color: var(--white);
}

.page-hero-dark .btn-secondary:hover {
  background: var(--white);
  color: var(--navy);
}

/* Held dark on hover: white on the hover green is only 3.30:1 */
.page-hero-dark .btn-primary:hover {
  color: var(--navy);
}

/* ---- The arc drawing ----
   Anchored to the bottom right of the band. The arc carries on
   below the drawing and the band's overflow: hidden cuts it at
   the edge, so the path looks as if it comes up from the page
   below. */
.nw-path {
  position: absolute;
  right: max(24px, calc(50% - 536px));
  bottom: 0;
  width: var(--nw-art);
}

.nw-path svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* ---- The one animation: the path lights up in order ----
   Opacity only, staggered from the first tread to the green
   marker. Nothing moves and the SVG box never changes size, so
   there is no layout shift. */
.nw-path-part {
  opacity: 0;
  animation: nw-light 0.5s ease-out forwards;
}

.nw-path-part:nth-of-type(1) { animation-delay: 0.05s; }
.nw-path-part:nth-of-type(2) { animation-delay: 0.25s; }
.nw-path-part:nth-of-type(3) { animation-delay: 0.4s; }
.nw-path-part:nth-of-type(4) { animation-delay: 0.55s; }
.nw-path-part:nth-of-type(5) { animation-delay: 0.7s; }
.nw-path-part:nth-of-type(6) { animation-delay: 0.95s; }

@keyframes nw-light {
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nw-path-part {
    animation: none;
    opacity: 1;
  }
}

/* ============================================================
   Reading column
   Every block below the hero sits in the same 760px column as
   the long-form text, so the left edge never jumps.
   ============================================================ */
.case-body {
  padding-bottom: 0;
}

.features .container {
  max-width: 760px;
}

/* Section headings: the site's short sky rule above each one,
   then the heading at a size between body headings and the
   homepage's section headings. */
.case-body h2,
.features .section-heading {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  line-height: 1.15;
  margin-top: 96px;
  margin-bottom: 18px;
}

.case-body h2::before,
.features .section-heading::before {
  content: "";
  display: block;
  width: 28px;
  height: 3px;
  border-radius: 2px;
  background: var(--blue);
  margin-bottom: 18px;
}

/* First section straight after the hero */
.page-hero + .case-body {
  padding-top: 88px;
}

.page-hero + .case-body h2:first-child {
  margin-top: 0;
}

/* Its opening line, set as a lead so the page starts with a
   sentence rather than a paragraph */
.page-hero + .case-body h2 + p {
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.55;
  color: var(--navy);
}

/* ============================================================
   Who we work with - the shared icon list as one column
   The paragraphs are long, so the three rows stack with a mist
   hairline between them rather than sitting in a grid.
   ============================================================ */
.features {
  padding-block: 0;
}

.features .section-heading {
  margin-bottom: 8px;
}

.features .feature-grid {
  grid-template-columns: 1fr;
  gap: 0;
}

.features .feature-card {
  padding-block: 28px;
  border-bottom: 1px solid var(--border);
}

.features .feature-card:last-child {
  border-bottom: none;
}

/* ============================================================
   Testimonial - the shared speech bubble, at pull-quote size
   The words, attribution and numbers are untouched; this only
   changes how they sit. Navy on pale sky is 14.63:1.
   ============================================================ */
.case-quote-bubble {
  margin: 40px 0 24px;
  padding: 34px 38px 30px;
}

.case-quote-bubble p {
  color: var(--navy);
  font-style: normal;
  font-size: 1.2rem;
  line-height: 1.55;
  margin-bottom: 20px;
}

/* Attribution: navy in the heading face with the sky rule before
   it, the same device as the eyebrow */
.case-quote-bubble footer {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--navy);
}

.case-quote-bubble footer::before {
  content: "";
  flex-shrink: 0;
  width: 28px;
  height: 3px;
  border-radius: 2px;
  background: var(--blue);
}

/* ============================================================
   What it costs
   (moved here from styles.css; only this page uses it)

   No bordered box: the price is set at display size straight
   under the heading's sky rule, which already marks the section.
   The offer callout stays a pale sky panel.
   ============================================================ */
.cost-lockup {
  margin: 24px 0 32px;
}

/* Scoped through the parent so these beat .case-body p, which is a
   class plus an element and would otherwise put 16px under every
   line. */
.cost-lockup .cost-price {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(2rem, 4.4vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--navy);
  margin-bottom: 12px;
}

/* Deliberately at body size and full body colour. This states a
   requirement, not a footnote, so it must not read as small print.
   Weight and the heading face carry the step down from the price,
   never a smaller size or a grey. */
.cost-lockup .cost-required {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--text);
  margin-bottom: 8px;
}

.cost-lockup .cost-vat {
  font-size: 0.95rem;
  color: var(--slate);
  margin-bottom: 0;
}

/* Charcoal on pale sky 12.03:1 */
.case-body .cost-offer {
  margin: 8px 0 20px;
  padding: 20px 24px;
  background: var(--blue-tint);
  border-radius: var(--radius);
  color: var(--text);
}

/* ============================================================
   Common questions
   This page only; the blog posts keep the shared FAQ look.
   The chevron sits in a small pale sky disc, echoing the icon
   tiles. Deep sky on pale sky 5.49:1.
   ============================================================ */
.faq-q {
  font-size: 1.08rem;
  padding: 22px 4px;
}

.faq-chevron {
  width: 34px;
  height: 34px;
  padding: 7px;
  border-radius: 50%;
  background: var(--blue-tint);
  color: var(--blue-deep);
}

/* Last block before the contact section */
.case-body:last-of-type {
  padding-bottom: 16px;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 900px) {
  .page-hero-dark {
    padding-block: 56px 64px;
  }

  /* One column: the drawing drops below the buttons and still
     runs off the bottom of the band */
  .page-hero-dark .container > :not(.nw-path) {
    max-width: none;
  }

  .nw-path {
    position: static;
    width: min(100%, 250px);
    margin: 32px 0 -64px auto;
  }
}

@media (max-width: 720px) {
  .page-hero + .case-body {
    padding-top: 56px;
  }

  .case-body h2,
  .features .section-heading {
    margin-top: 72px;
  }

  .case-quote-bubble {
    padding: 26px 24px 24px;
  }

  .case-quote-bubble p {
    font-size: 1.1rem;
  }
}

/* ============================================================
   Where we work - service area map
   Boundaries are ONS open data, drawn inline as SVG and styled
   here with tokens rather than fills in the markup.

   Contrast, text against what sits behind it:
   white on lifted navy 10.35:1, on soft navy 14.63:1, on midnight
   navy 17.85:1. Pale sky at 75% opacity: 8.60:1 on midnight navy,
   7.43:1 on soft navy. No animation on the map.
   ============================================================ */
.area-map {
  margin: 32px 0 8px;
}

.area-map-panel {
  position: relative;
  overflow: hidden;
  background: var(--navy);
  border-radius: 24px;
}

.area-map-svg {
  display: block;
  width: 100%;
  height: auto;
}

.map-land {
  fill: var(--navy-soft);
}

/* Flintshire and Denbighshire, with midnight navy borders */
.map-ours {
  fill: var(--navy-lifted);
  stroke: var(--navy);
  stroke-width: 3;
  stroke-linejoin: round;
}

.map-counties text {
  fill: var(--white);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.16em;
  text-anchor: middle;
}

.map-context text {
  fill: var(--blue-tint);
  fill-opacity: 0.75;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-anchor: middle;
}

.map-estuary {
  fill: var(--blue-tint);
  fill-opacity: 0.75;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 13px;
}

.map-towns circle {
  fill: var(--white);
  stroke: var(--navy);
  stroke-width: 1.5;
}

.map-towns text {
  fill: var(--white);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
}

.map-base-halo {
  fill: var(--green);
  fill-opacity: 0.22;
}

.map-base-dot {
  fill: var(--green);
  stroke: var(--navy);
  stroke-width: 2;
}

.map-base text {
  fill: var(--white);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  text-anchor: middle;
}

/* Scoped through the figure so these beat .case-body p */
.area-map .area-map-note {
  margin: 14px 0 4px;
  font-size: 0.95rem;
  color: var(--text);
}

/* Slate on warm white 7.26:1 */
.area-map .area-map-source {
  margin-bottom: 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--slate);
}

/* Small screens: zoom in on the two counties and Chester so the
   labels that stay reach about 12px at 375px. The town dots and
   labels and the sea, Wirral, Liverpool and estuary labels are
   hidden, as at this size they would be too small to read. The
   panel shows the part of the drawing from Easting 290,000 to the
   right-hand edge, and from just above the coast to the bottom. */
@media (max-width: 700px) {
  .area-map-panel {
    aspect-ratio: 541 / 555;
  }

  .area-map-svg {
    position: absolute;
    top: 0;
    left: -31.6%;
    width: 131.6%;
    max-width: none;
    margin-top: -20.3%;
  }

  .map-towns,
  .map-context,
  .map-estuary {
    display: none;
  }

  .map-counties text {
    font-size: 20px;
    letter-spacing: 0.05em;
  }

  .map-base text {
    font-size: 20px;
  }
}