/* ==========================================================================
   Hartley Accountancy Ltd
   ========================================================================== */

:root {
  --navy:   #0b2a57;
  --navy-2: #163c73;
  --green:  #3f8b2f;
  --green-d:#2f6c24;
  --purple: #6f46b7;
  --blue:   #0e5ab8;
  --text:   #14213d;
  --muted:  #5b6472;
  --line:   #dfe5ec;
  --bg:     #f7f9fb;
  --white:  #fff;

  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --font-display: 'Source Serif 4', Georgia, 'Times New Roman', serif;
}

html { scroll-padding-top: 110px; }

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

img { max-width: 100%; height: auto; display: block; }

.container { width: min(1300px, 94%); margin-inline: auto; }
.narrow    { width: min(820px, 92%); }

/* Accessibility ----------------------------------------------------------- */

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--navy); color: #fff;
  padding: 12px 20px; font-weight: 700; text-decoration: none;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

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

.site-header {
  position: sticky; top: 0; z-index: 30;
  background: rgba(255, 255, 255, .98);
  border-bottom: 1px solid #eef1f4;
}

.nav-wrap { display: flex; align-items: center; gap: 28px; min-height: 86px; }

.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; }

.brand-mark {
  display: grid; place-items: center;
  width: 56px; height: 56px; flex-shrink: 0;
  background: var(--navy); color: #fff;
  font: 700 40px/1 var(--font-display);
  border-radius: 4px;
}

.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-text strong {
  font: 700 32px/1 var(--font-display);
  letter-spacing: 2px; color: var(--navy);
}
.brand-text small {
  font: 600 15px/1 var(--font-display);
  letter-spacing: 2.4px; margin-top: 6px; color: var(--muted);
}

.nav { margin-left: auto; display: flex; gap: 30px; }
.nav a {
  text-decoration: none; font-weight: 600;
  padding: 30px 0 26px; position: relative;
}
.nav a.active::after,
.nav a:hover::after {
  content: ""; position: absolute;
  left: 0; right: 0; bottom: 18px;
  height: 2px; background: var(--green);
}

.email-pill {
  background: var(--navy); color: #fff; text-decoration: none;
  padding: 13px 18px; border-radius: 5px; font-weight: 600;
  white-space: nowrap;
}
.email-pill:hover { background: var(--navy-2); }

.menu-btn {
  display: none; border: 0; background: none;
  font-size: 30px; cursor: pointer; color: var(--navy);
  padding: 6px 4px;
}

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

.btn {
  display: inline-flex; justify-content: center; align-items: center; gap: 8px;
  text-decoration: none; border-radius: 5px;
  padding: 9px 16px; font-weight: 700; font-size: 13.5px;
  border: 1px solid transparent; cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
/* Icons inside buttons inherit the label colour via currentColor, so they work
   on the green, outline, navy and purple variants without extra rules. */
.btn svg { width: 16px; height: 16px; flex: none; }

/* The compact desktop button is under the 44px minimum touch target, so
   restore it on touch devices only. */
@media (pointer: coarse) { .btn { min-height: 44px; } }

.btn-primary { background: var(--green);  color: #fff; }
.btn-primary:hover { background: var(--green-d); }
.btn-outline { border-color: var(--green); color: var(--green-d); background: #fff; }
.btn-outline:hover { background: #f2f8f0; }
.btn-dark    { background: var(--navy);   color: #fff; }
.btn-dark:hover { background: var(--navy-2); }
.btn-purple  { background: var(--purple); color: #fff; }
.btn-purple:hover { background: #5d3a9c; }

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

/* overflow-x guards the full-bleed photo below: without it the negative
   margin can push a horizontal scrollbar onto the page. */
.hero { background: linear-gradient(180deg, #fff 0%, var(--bg) 100%); overflow-x: hidden; }

/* No vertical padding on the grid itself: the photo column runs flush to the
   header above and the cards below, so the padding lives on .hero-copy. */
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: stretch;
  padding: 0;
}

.hero-copy {
  display: flex; flex-direction: column; justify-content: center;
  padding: 22px 0 24px;
  position: relative; z-index: 1;   /* keeps the copy above the pulled-left photo */
}

.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.15vw, 29px);
  line-height: 1.16;
  margin: 0 0 10px;
  color: var(--navy);
  max-width: 26ch;   /* two lines rather than three, so the cards sit higher */
}

.accent-line { width: 40px; height: 3px; background: var(--green); margin: 2px 0 11px; }

.hero p { font-size: 14px; max-width: 54ch; margin: 0 0 6px; color: #26344a; line-height: 1.45; }
.hero-lead { font-size: 14.5px !important; font-weight: 500; }

.hero-actions { display: flex; gap: 10px; margin-top: 13px; flex-wrap: wrap; }

/* Hero panel: the recurring obligations of a business year. Replace this
   block with <img class="hero-photo" src="..." alt="..."> to use a photograph. */
/* The photo is positioned, not in flow: an in-flow <img> contributes its own
   intrinsic height (1200x800 scaled to the column width, ~460px) to the grid
   row, which held the hero open regardless of how short the copy got. Absolute
   positioning removes it from row sizing, so the copy column sets the height
   and the photo fills whatever that turns out to be. */
.hero-visual { position: relative; overflow: hidden; min-height: 225px; }

.hero-panel {
  background: var(--navy);
  color: #fff;
  border-radius: 8px;
  padding: 34px 32px 28px;
  width: 100%;
  box-shadow: 0 18px 40px rgba(11, 42, 87, .16);
}

.panel-eyebrow {
  font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  font-weight: 700; color: #9fc6f5; margin: 0 0 20px;
}

.deadline-list { list-style: none; margin: 0; padding: 0; }
.deadline-list li {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px; padding: 13px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
}
.deadline-list li:last-child { border-bottom: 0; }

.d-name { font-weight: 600; font-size: 16px; }
.d-freq {
  font-size: 13px; color: #b9d4f2; text-align: right;
  white-space: nowrap; font-variant-numeric: tabular-nums;
}

.panel-foot {
  margin: 20px 0 0; padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .16);
  font-size: 14px; color: #cfe0f3;
}

.hero-photo {
  position: absolute; inset: 0;
  width: 100%;
  height: 100%;          /* overrides the global img { height: auto } */
  object-fit: cover;
  border-radius: 8px;
}

/* Full-bleed to the right edge of the viewport, matching the reference ad.
   Above the 620px breakpoint only — below it the photo is dropped entirely
   rather than stacked. The calc mirrors .container's own width rule
   (min(1180px, 92%)), so it lands exactly on the viewport edge at any width. */
@media (min-width: 621px) {
  /* The extra 24px absorbs scrollbar-width differences between browsers so the
     photo always lands flush; the overshoot is clipped by .hero's overflow-x.
     margin-left pulls the photo back across the grid gap toward the copy. */
  .hero-visual {
    margin-right: calc(-24px - max(3vw, (100vw - 1300px) / 2));
    margin-left: -150px;
  }
  /* Flush to the header above and the cards below — square, no radius. The mask
     dissolves the left edge into the hero background so there is no hard seam
     where the photo meets the wording. */
  .hero-photo {
    border-radius: 0;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 30%);
            mask-image: linear-gradient(to right, transparent 0, #000 30%);
  }
}

/* Same two-column format, tightened for the narrow end of its range. The copy
   column is only ~250-350px here, so the gap closes up and the heading steps
   down a size to keep a sane number of words per line.

   The photo runs the full width of the container instead of sitting in its own
   column: at these widths a half-width photo reads as a picture chopped off
   down the middle of the page. -100% is the copy column (percentage margins on
   a grid item resolve against its grid area) and the -28px clears the gap, so
   the image starts at the very left of the wording and still bleeds off the
   right edge. The copy column plus gap is ~49% of that span at every width in
   this range, which is what the mask stops below are pinned to. */
@media (min-width: 621px) and (max-width: 950px) {
  .hero-grid { gap: 28px; }
  .hero h1 { font-size: 22px; max-width: none; }
  .hero-copy { padding: 26px 0 28px; }

  .hero-visual { margin-left: calc(-100% - 28px); }

  /* Clear behind the start of the wording, ~half strength where the longest
     lines end, full strength only in the column the photo used to occupy. */
  .hero-photo {
    -webkit-mask-image: linear-gradient(to right, transparent 0, transparent 20%, #000 75%);
            mask-image: linear-gradient(to right, transparent 0, transparent 20%, #000 75%);
  }
}

/* Service cards ----------------------------------------------------------- */

.services-section { padding: 18px 0 8px; }

.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.service-card {
  /* Navy at low opacity rather than solid: four full-strength borders side by
     side reads as a table, not as cards. Firms up on hover. */
  border: 1px solid rgba(11, 42, 87, .22);
  border-radius: 8px;
  padding: 15px 18px 14px;
  display: flex; flex-direction: column;
  background: #fff;
  box-shadow: 0 1px 2px rgba(11, 42, 87, .05);
  transition: border-color .2s ease, box-shadow .2s ease;
}

.service-card:hover {
  border-color: var(--navy);
  box-shadow: 0 6px 18px rgba(11, 42, 87, .13);
}

.service-card h2 {
  color: var(--navy);
  font-family: var(--font-display);
  font-size: 15.5px; line-height: 1.24;
  margin: 10px 0 4px;
}
.service-card p { color: #26344a; margin: 0; font-size: 13.5px; line-height: 1.42; }

.service-card ul { list-style: none; padding: 0; margin: 9px 0 11px; }
.service-card li {
  margin: 4px 0; padding-left: 20px;
  position: relative; font-size: 13.5px; line-height: 1.38;
}
/* Filled green disc with a white tick, matching the reference ad. The check is
   an inline SVG data URI so it stays crisp at any zoom and needs no extra file. */
.service-card li::before {
  content: ""; position: absolute;
  left: 0; top: 2px; width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--green)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")
    center / 9px 9px no-repeat;
}
.service-card .btn { margin-top: auto; align-self: center; }

.icon {
  width: 32px; height: 32px; border-radius: 6px;
  display: grid; place-items: center; color: #fff;
}
.icon svg { width: 17px; height: 17px; }

.navy   { background: var(--navy); }
.green  { background: var(--green); }
.blue   { background: var(--blue); }
.purple { background: var(--purple); }

/* Service card deck (phones) ----------------------------------------------
   On a phone the four cards stacked end to end are the better part of three
   screens of scrolling. Below 620px script.js turns them into a swipeable
   deck instead: every card in one grid cell, fanned out behind the top one,
   flick left or right to send the front card to the back.

   .is-stack is added by script.js, and only while the media query matches, so
   with JavaScript off the cards stay a plain scrolling column. --i is each
   card's depth in the deck (0 = front), also set by script.js — every position
   below is derived from it, so re-dealing the deck is one property per card. */
@media (max-width: 620px) {
  /* Clips the card being thrown at the viewport edge. Without this the card
     mid-throw is a 300px-wide box sitting past the right edge of the document,
     and the page grows a horizontal scrollbar for the length of the animation.
     Clipping here rather than on the grid keeps the fan and the card shadows —
     which sit inside the container's own padding — untouched. */
  .services-section.has-stack { overflow: hidden; }

  .services-grid.is-stack {
    grid-template-columns: 1fr;
    gap: 0;
    /* The row sizes to the tallest card and stretches the rest to match, so
       the deck is one fixed size however the front card changes. */
    align-items: stretch;
    /* Top padding houses the fanned edges above the front card; the side
       padding is the room the tilt swings into. */
    padding: 46px 26px 6px;
    /* Vertical panning stays the browser's; horizontal movement is ours. */
    touch-action: pan-y;
    -webkit-user-select: none;
            user-select: none;
  }

  .services-grid.is-stack > .service-card {
    grid-area: 1 / 1;
    z-index: calc(50 - var(--i) * 10);
    /* Lifted and tilted a little further with each step back. The tilt is
       deliberately slight: these cards are ~420px tall, and rotating about the
       bottom edge swings the top corners sideways by roughly the height times
       the angle — past 3deg the back of the deck starts hanging off the side
       of the screen. The fan is carried by the 12px lift instead. */
    transform:
      translate(calc(var(--i) * -4px), calc(var(--i) * -12px))
      rotate(calc(var(--i) * -1deg));
    transform-origin: 50% 100%;
    box-shadow: 0 12px 28px rgba(11, 42, 87, .17);
    transition: transform .42s cubic-bezier(.22, .61, .36, 1),
                box-shadow .2s ease, opacity .25s ease;
    will-change: transform;
    /* Restated on the card itself, and the callout suppressed so a swipe that
       starts on "Learn more" is a swipe and not a long-press link menu. */
    touch-action: pan-y;
    -webkit-touch-callout: none;
  }

  .services-grid.is-stack > .service-card.is-top { cursor: grab; }
  .services-grid.is-stack > .service-card.is-top:active { cursor: grabbing; }

  /* The front card follows the finger: script.js writes an inline transform on
     every pointer move, so the easing has to be out of the way. */
  .services-grid.is-stack > .service-card.is-dragging {
    transition: box-shadow .2s ease;
    z-index: 60;
    box-shadow: 0 26px 50px rgba(11, 42, 87, .3);
  }

  /* Thrown off the screen, then silently re-dealt at the back. */
  .services-grid.is-stack > .service-card.is-flinging {
    transition: transform .3s cubic-bezier(.4, 0, 1, 1), opacity .3s ease;
    z-index: 60;
  }

  /* Applied for a single frame while the card is repositioned at the back, so
     it jumps there rather than sliding back across the deck. */
  .services-grid.is-stack > .service-card.is-resetting { transition: none; }

  .stack-controls {
    display: flex; align-items: center; justify-content: center; gap: 14px;
    margin: 18px 0 4px;
  }
  .stack-controls[hidden] { display: none; }

  .stack-btn {
    width: 40px; height: 40px; flex: none;
    display: grid; place-items: center;
    border: 1px solid rgba(11, 42, 87, .25);
    border-radius: 50%;
    background: #fff; color: var(--navy);
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease;
  }
  .stack-btn:hover { border-color: var(--navy); background: var(--bg); }
  .stack-btn svg { width: 17px; height: 17px; }

  .stack-dots { display: flex; align-items: center; gap: 9px; }

  /* The tappable target is the 22x40 button; the 9px disc inside is only the
     part you can see, so the dots stay small without being fiddly to hit. */
  .stack-dot-hit {
    width: 22px; height: 40px; padding: 0; border: 0; background: none;
    display: grid; place-items: center; cursor: pointer;
  }

  .stack-dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: rgba(11, 42, 87, .24);
    transition: background .2s ease, transform .2s ease;
  }
  .stack-dot-hit[aria-current="true"] .stack-dot {
    background: var(--green);
    transform: scale(1.35);
  }
}

/* Why choose -------------------------------------------------------------- */

.why { background: var(--bg); padding: 56px 0 60px; margin-top: 56px; }

.why h2 {
  text-align: center; color: var(--navy);
  font-family: var(--font-display);
  font-size: 32px; margin: 0 0 36px;
}

.why-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }

.why-item { text-align: center; padding: 8px 20px; }
.why-item + .why-item { border-left: 1px solid var(--line); }
.why-item h3 { font-size: 16px; margin: 12px 0 6px; color: var(--navy); }
.why-item p  { font-size: 14px; color: #26344a; margin: 0; }

/* Bare icons, no enclosing circle — the ad alternates navy and green across
   the row rather than tinting them all the same. */
.why-icon { display: inline-grid; place-items: center; color: var(--navy); }
.why-icon svg { width: 38px; height: 38px; stroke-width: 1.4; }

.why-item:nth-child(2) .why-icon,
.why-item:nth-child(5) .why-icon { color: var(--green); }

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

.cta-band { background: #fff; padding: 64px 0 72px; }
.cta-inner { text-align: center; }
.cta-inner h2 {
  font-family: var(--font-display); font-size: 30px;
  color: var(--navy); margin: 0 0 10px;
}
.cta-inner p { color: var(--muted); margin: 0 0 22px; }

/* Interior pages ---------------------------------------------------------- */

.page { min-height: 60vh; }

.page-hero { background: var(--bg); padding: 64px 0; border-bottom: 1px solid var(--line); }
.page-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 46px);
  color: var(--navy); margin: 0 0 10px;
}
.page-hero p { font-size: 19px; color: var(--muted); margin: 0; max-width: 60ch; }

.content-section { padding: 52px 0 64px; }
.content-section h2 {
  color: var(--navy); font-family: var(--font-display);
  font-size: 27px; margin: 40px 0 12px;
}
.content-section > h2:first-child { margin-top: 0; }
.content-section p { max-width: 72ch; }

.inline-cta { margin-top: 36px; }

/* About portrait ---------------------------------------------------------- */

/* Flex, not grid, so the copy simply takes the full width while the portrait
   block in about.html is still commented out. */
.about-intro { display: flex; flex-wrap: wrap; gap: 36px; align-items: flex-start; }
.about-intro-copy { flex: 1 1 340px; min-width: 0; }
.about-intro-copy > h2:first-child { margin-top: 0; }

.portrait-figure { flex: 0 0 250px; margin: 0; }

.portrait {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--line);
  box-shadow: 0 14px 32px rgba(11, 42, 87, .14);
}

.portrait-caption { margin: 14px 0 0; font-size: 15px; line-height: 1.45; color: var(--muted); }
.portrait-caption strong { display: block; color: var(--navy); font-size: 16px; margin-bottom: 2px; }

@media (max-width: 620px) {
  .about-intro { gap: 24px; }
  .portrait-figure { flex-basis: 100%; max-width: 250px; }
}

/* Services detail --------------------------------------------------------- */

.service-detail { padding: 8px 0 40px; margin-bottom: 40px; border-bottom: 1px solid var(--line); }
.service-detail:last-of-type { border-bottom: 0; }

.service-detail-head { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
.service-detail-head h2 { margin: 0; }

.icon-inline {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 6px;
  background: var(--bg); color: var(--navy);
  border: 1px solid var(--line); flex-shrink: 0;
}
.icon-inline svg { width: 22px; height: 22px; }

.lead { font-size: 17px; color: var(--muted); margin: 4px 0 0; }

.service-items {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 8px 44px; margin-top: 24px;
}
.service-item h3 { margin: 14px 0 4px; color: var(--navy-2); font-size: 17px; }
.service-item p  { margin: 0; color: #26344a; }

/* Contact ----------------------------------------------------------------- */

.contact-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 56px; }

.contact-details h2 { margin-top: 0; }

.detail-list { margin: 24px 0 0; }
.detail-list dt {
  font-weight: 700; color: var(--navy);
  font-size: 13px; letter-spacing: .04em; text-transform: uppercase;
  margin-top: 18px;
}
.detail-list dd { margin: 4px 0 0; }

.detail-note { color: var(--muted); font-size: 15px; margin-top: 28px; }

.contact-form { display: grid; gap: 18px; }
.contact-form label { display: grid; gap: 6px; font-weight: 600; font-size: 15px; }
.req { color: var(--green-d); }

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%; padding: 13px;
  border: 1px solid #cfd7e0; border-radius: 5px;
  font: inherit; font-weight: 400; background: #fff;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus { border-color: var(--green); }

.contact-form button { justify-self: start; }

.form-note { font-size: 13px; color: var(--muted); margin: 0; }

.form-error {
  background: #fdecec; border: 1px solid #e5b4b4; color: #8a1f1f;
  padding: 14px 16px; border-radius: 5px;
  margin-bottom: 20px; font-weight: 600;
}

/* Honeypot: hidden from people, visible to bots. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.cf-turnstile { margin: 2px 0; }

/* Legal pages ------------------------------------------------------------- */

.legal h2 { font-size: 23px; margin-top: 36px; }
.legal ul { max-width: 72ch; padding-left: 22px; }
.legal li { margin: 8px 0; }

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

.footer { background: var(--navy); color: #fff; padding: 52px 0 20px; margin-top: 0; }

.footer-top {
  display: grid; grid-template-columns: 2fr 1fr 1fr;
  gap: 40px; padding-bottom: 34px;
}

.footer .brand-mark { border: 1px solid rgba(255, 255, 255, .5); background: transparent; }
.footer .brand-text strong { color: #fff; }
.footer .brand-text small  { color: #b9d4f2; }

.footer-blurb { margin: 18px 0 0; color: #cfe0f3; max-width: 42ch; font-size: 15px; }

.footer-heading {
  font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  color: #9fc6f5; margin: 6px 0 14px; font-weight: 700;
}

.footer-list { list-style: none; margin: 0; padding: 0; }
.footer-list li { margin: 9px 0; font-size: 15px; color: #e4eefa; }
.footer-list a { color: #e4eefa; text-decoration: none; }
.footer-list a:hover { text-decoration: underline; }

.footer-legal {
  border-top: 1px solid rgba(255, 255, 255, .2);
  padding-top: 20px; font-size: 13px; color: #b9d4f2;
}
.footer-legal p { margin: 0 0 6px; max-width: 90ch; }

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .2);
  margin-top: 18px; padding-top: 16px;
  display: flex; justify-content: space-between; gap: 14px;
  font-size: 13px; color: #cfe0f3; flex-wrap: wrap;
}
.footer-bottom a { color: #fff; text-decoration: none; }
.footer-bottom a:hover { text-decoration: underline; }

/* Responsive -------------------------------------------------------------- */

@media (max-width: 1000px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .why-grid { grid-template-columns: repeat(3, 1fr); row-gap: 28px; }
  /* Dividers only make sense on the single 5-across row. */
  .why-item + .why-item { border-left: 0; }
  .footer-top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 950px) {
  .email-pill { display: none; }
  .menu-btn { display: block; margin-left: auto; }

  .nav {
    display: none; position: absolute;
    top: 86px; left: 0; right: 0;
    background: #fff; flex-direction: column;
    padding: 12px 4% 20px; gap: 0;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .08);
    border-bottom: 1px solid var(--line);
  }
  .nav.open { display: flex; }
  .nav a { padding: 12px 0; }
  .nav a.active::after, .nav a:hover::after { bottom: 6px; right: auto; width: 28px; }

  .contact-grid { grid-template-columns: 1fr; gap: 44px; }
  .service-items { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; }
}

@media (max-width: 620px) {
  .brand-mark { width: 44px; height: 44px; font-size: 30px; }
  .brand-text strong { font-size: 22px; }
  .brand-text small  { font-size: 11px; }

  .services-grid { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; gap: 30px; }

  /* Below this the two hero columns are too narrow to hold the photo without
     squeezing the copy, so it is dropped rather than stacked: the wording and
     the buttons are what matter on a phone, and stacking only pushed the
     service cards a screenful further down. */
  .hero-grid { grid-template-columns: 1fr; gap: 0; padding: 36px 0 40px; }
  .hero-copy { padding: 0; }          /* the grid supplies the padding here */
  .hero-visual { display: none; }
  .hero h1 { max-width: 20ch; }

  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }

  .hero-panel { padding: 26px 22px 22px; }
  .deadline-list li { flex-direction: column; gap: 2px; align-items: flex-start; }
  .d-freq { text-align: left; }
}