/* =========================================
   ALLFROPIX WEBSITE 3.0 — SHARED STYLING
   Checkpoint: 04 October 2026, 21:18 Irish time

   CONTENTS
   01. Colours and adjustable settings
   02. Basic page defaults
   03. Shared header and navigation
   04. Buttons
   05. Homepage hero
   06. Temporary animation placeholder
   07. Tablet and mobile layouts
   08. Accessibility
   ========================================= */


/* =========================================
   01. COLOURS AND ADJUSTABLE SETTINGS
   Change these values to update the whole site.
   ========================================= */
/* Load DM Sans from our own website. */
@font-face {
  font-family: "DM Sans";
  src: url("assets/fonts/DMSans-VariableFont_opsz,wght.ttf")
    format("truetype");
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
}
   :root {
  --page-background: #fafaf8;
  --surface: #ffffff;
  --soft-blue: #eaf1f5;
  --navy: #14314d;
  --body-text: #535e68;
  --muted-text: #64717c;
  --accent: #b86b4b;
  --border: #cbd8e2;

--heading-font: Georgia, "Times New Roman", serif;
  --body-font: "DM Sans", Arial, sans-serif;

  /* Maximum content width and space at each side */
  --content-width: 1250px;
  --page-gutter: clamp(22px, 5vw, 70px);

  /* Small corner rounding keeps the card treatment light */
  --card-radius: 6px;
}


/* =========================================
   02. BASIC PAGE DEFAULTS
   ========================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--page-background);
  color: var(--body-text);
  font-family: var(--body-font);
  font-size: 16px;
  line-height: 1.65;
}

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

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

.container {
  width: min(
    var(--content-width),
    calc(100% - var(--page-gutter) * 2)
  );
  margin-inline: auto;
}

h1,
h2,
h3 {
  color: var(--navy);
  font-family: var(--heading-font);
  font-weight: 400;
}


/* =========================================
   03. SHARED HEADER AND NAVIGATION
   ========================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--page-background);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  min-height: 96px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.brand {
  flex-shrink: 0;
}

.brand-logo {
  width: 210px;
}

.main-navigation {
  display: flex;
  align-items: center;
  gap: 30px;
  color: var(--navy);
  font-size: 14px;
  font-weight: 600;
}

.main-navigation > a:not(.button) {
  padding-block: 8px;
  border-bottom: 1px solid transparent;
}

.main-navigation > a:hover,
.main-navigation > a[aria-current="page"] {
  border-bottom-color: var(--navy);
}


/* =========================================
   04. BUTTONS
   Primary = navy fill.
   Outline = light background with navy border.
   ========================================= */
.button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 13px 20px;
  border: 1px solid var(--navy);
  border-radius: 4px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  transition:
    background-color 180ms ease,
    color 180ms ease;
}

.button-primary {
  background: var(--navy);
  color: var(--surface);
}

.button-primary:hover {
  background: #244a6a;
}

.button-outline {
  background: transparent;
  color: var(--navy);
}

.button-outline:hover {
  background: var(--soft-blue);
}


/* =========================================
   05. HOMEPAGE HERO
   Adjust padding for more or less space above/below.
   Adjust gap for space between text and animation.
   ========================================= */
.hero {
  /* Space above the hero, then below it */
  padding-block: 100px 82px;
}

.hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 60px;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 24px;
  color: var(--navy);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

/* The short terracotta line is a small brand accent */
.eyebrow::before {
  width: 22px;
  height: 2px;
  flex-shrink: 0;
  background: var(--accent);
  content: "";
}

/* Fuller heading with three balanced lines on desktop */
.hero h1 {
  margin: 0;
  max-width: 590px;
font-size: clamp(44px, 5vw, 72px);
  line-height: 1.18;
  letter-spacing: -0.045em;
}

.hero-heading-line {
  display: block;
}

.hero h1 em {
  color: #58788b;
}

.hero-introduction {
  margin: 26px 0 12px;
  font-size: 20px;
  line-height: 1.5;
}

.hero-description {
  max-width: 470px;
  margin: 0;
  font-size: 15px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.availability {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 24px 0 0;
  color: var(--muted-text);
  font-size: 12px;
}

.availability-dot {
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #58788b;
}


/* =========================================
   06. TEMPORARY ANIMATION PLACEHOLDER
   We will replace this with our laptop animation.
   ========================================= */
.hero-visual {
  min-width: 0;
}

.animation-placeholder {
  min-height: 440px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px;
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  background: linear-gradient(135deg, #edf4f7, #e2edf2);
}

.placeholder-label {
  color: var(--navy);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.placeholder-screen {
  width: 80%;
  aspect-ratio: 16 / 10;
  display: grid;
  gap: 12px;
  margin-top: 32px;
  padding: 24px;
  border: 8px solid var(--navy);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 12px 24px rgb(20 49 77 / 8%);
}

.placeholder-screen span {
  border-radius: 2px;
  background: var(--soft-blue);
}

.animation-placeholder p {
  margin: 24px 0 0;
  font-size: 12px;
}


/* =========================================
   07. TABLET AND MOBILE LAYOUTS
   These rules apply only below the stated widths.
   ========================================= */
@media (max-width: 1000px) {
  .header-inner {
    gap: 20px;
  }

  .brand-logo {
    width: 155px;
  }

  .main-navigation {
    gap: 18px;
  }

  .navigation-button {
    max-width: 190px;
  }

  .hero-layout {
    gap: 32px;
  }

  .animation-placeholder {
    min-height: 360px;
    padding: 20px;
  }
}

@media (max-width: 760px) {
  .header-inner {
    flex-direction: column;
    gap: 12px;
    padding-block: 16px;
  }

  /* Temporary mobile navigation; a menu button comes next */
  .main-navigation {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 22px;
  }

  .navigation-button {
    max-width: none;
    min-height: 40px;
    padding: 9px 14px;
    font-size: 12px;
  }

  .hero {
    padding-block: 44px 56px;
  }

  .hero-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .hero h1 {
    max-width: 540px;
    font-size: clamp(46px, 9vw, 64px);
  }

  .hero-introduction {
    font-size: 18px;
  }

  .animation-placeholder {
    min-height: 320px;
  }
}


/* =========================================
   08. ACCESSIBILITY
   Visible keyboard focus and skip-to-content link.
   ========================================= */
a:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 5px;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 200;
  padding: 12px 18px;
  background: var(--navy);
  color: white;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .button {
    transition: none;
  }
}
/* =========================================
   09. HOMEPAGE — PURPOSE AND SERVICE CARDS
   Added: 04 October 2026, 21:54 Irish time
   ========================================= */


/* PURPOSE BAND
   Padding controls the space above and below.
   Gap controls the distance between the columns. */
.purpose-section {
  padding-block: 100px;
  background: var(--soft-blue);
}

.purpose-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  align-items: center;
  gap: 70px;
}

.purpose-section .eyebrow {
  margin-bottom: 16px;
}

.purpose-section h2 {
  max-width: 580px;
  margin: 0;
  font-size: clamp(28px, 2.7vw, 38px);
  line-height: 1.3;
  letter-spacing: -0.035em;
}

.purpose-description {
  padding-left: 44px;
  border-left: 1px solid #9aafbe;
}

.purpose-description p {
  margin: 0 0 18px;
  font-size: 15px;
}


/* SHARED TEXT LINKS
   Used for small links underneath descriptions. */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--navy);
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.text-link:hover {
  color: #386482;
}


/* SERVICES SECTION — HEADING AND SPACING */
.services-overview {
  padding-block: 90px 100px;
}

.section-heading {
  margin-bottom: 30px;
}

.section-heading .eyebrow {
  margin-bottom: 16px;
}

.section-heading h2 {
  max-width: 1000px;
  margin: 0;
  font-size: clamp(28px, 2.7vw, 38px);
  line-height: 1.3;
  letter-spacing: -0.035em;
}

.section-heading > p:last-child {
  margin: 12px 0 0;
  font-size: 15px;
}


/* SERVICE CARDS
   Three equal columns on desktop.
   Light borders and a small shadow keep them subtle. */
.service-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.service-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  background: var(--soft-blue);
  box-shadow: -3px -3px 10px rgb(20 49 77 / 3%);
}

.service-card h3 {
  margin: 20px 0 12px;
  font-size: 23px;
  line-height: 1.35;
  letter-spacing: -0.035em;
}

.service-card > p {
  margin: 0 0 22px;
  font-size: 15px;
}

/* Push links to the bottom so all three line up */
.service-card .text-link {
  margin-top: auto;
}


/* ICONS
   SVG icons stay sharp at any screen size.
   Change width/height here to resize their white tiles. */
.service-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 5px;
  background: var(--surface);
  color: var(--navy);
}

.service-icon svg {
  width: 29px;
  height: 29px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.service-status {
  margin-bottom: 18px;
  padding: 5px 10px;
  border-radius: 20px;
  background: #dae6ed;
  color: var(--navy);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}


/* SMALLER SCREENS
   Stack the purpose columns and service cards. */
@media (max-width: 760px) {
  .purpose-section {
    padding-block: 36px;
  }

  .purpose-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .purpose-description {
    padding: 24px 0 0;
    border-left: 0;
    border-top: 1px solid var(--border);
  }

  .services-overview {
    padding-block: 42px;
  }

  .service-card-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .service-card {
    padding: 26px;
  }
}
/* =========================================================
   10. SEE WHAT WE'RE BUILDING
   Adjust padding-block for space above and below this section.
   Adjust gap for the space between the text and visual.
========================================================= */

.concept-section {
  padding-block: 100px;
  background: var(--soft-blue);
}

.concept-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 70px;
}

.concept-content h2 {
  margin: 0;
  max-width: 540px;
  font-size: clamp(28px, 2.7vw, 38px);
  line-height: 1.3;
  letter-spacing: -0.035em;
}

.concept-description {
  max-width: 480px;
  margin: 24px 0 28px;
  font-size: 15px;
}

.concept-visual {
  min-width: 0;
}

/* Temporary visual area; the animation will replace this. */
.orbit-placeholder {
  min-height: 400px;
  display: grid;
  place-items: center;
  padding: 30px;
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  background: rgba(255, 255, 255, 0.5);
}

.orbit-placeholder-label {
  color: var(--muted-text);
  font-size: 13px;
  text-align: center;
}

.concept-caption {
  margin: 16px 0 0;
  color: var(--muted-text);
  font-size: 12px;
  text-align: center;
}

/* Stack the text and visual on smaller screens. */
@media (max-width: 760px) {
  .concept-section {
    padding-block: 56px;
  }

  .concept-layout {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .orbit-placeholder {
    min-height: 300px;
  }
}
/* =========================================================
   TEXT SIZE ADJUSTMENT
   Slightly increases text throughout the website.
   105% means 5% larger than its existing size.
========================================================= */

body {
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4, p, a, button, input, select, textarea, label {
  zoom: 1.05;
}
/* =========================================================
   HERO PROPORTIONS — DESKTOP
   Wider overall layout with equal left and right margins.
   Animation space matches the full text block's height.
========================================================= */

@media (min-width: 761px) {
  .hero-layout {
    width: min(
      1320px,
      calc(100% - var(--page-gutter) * 2)
    );
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    align-items: stretch;
    gap: 44px;
  }

  .hero-visual {
    position: relative;
  }

  .hero-visual .animation-placeholder {
    position: absolute;
    inset: 0;
    min-height: 0;
  }
}
/* Starter Presence: a compact list of service inclusions. */
.starter-features {
  display: grid;
  gap: 10px;
  margin: 24px 0 28px;
  padding: 0;
  list-style: none;
}

.starter-features li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 15px;
}

.starter-features li::before {
  content: "✓";
  color: var(--accent);
  font-weight: 700;
}
/* ==================================================
   11. OUR PROCESS
   Six compact steps in one row on desktop.
   Three columns on tablet; two on mobile.
   These steps explain the process and are not links.
   ================================================== */

.process-section {
  padding-block: 80px;
  background: var(--page-background);
}

/* Remove the large card treatment from each step. */
.process-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 24px;
  margin: 36px 0 0;
  padding: 0;
  list-style: none;
}

.process-card {
  position: relative;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-align: center;
}

/* Small numbered circles mark the order of the steps. */
.process-number {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin: 0 auto 18px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: #f5eee9;
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
}

/* Short connecting lines between the desktop steps. */
.process-card:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 18px;
  left: calc(50% + 28px);
  width: calc(100% - 32px);
  height: 1px;
  background: var(--border);
}

.process-card h3 {
  margin: 0 0 10px;
  font-family: var(--body-font);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
}

.process-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
}

/* Tablet: remove connectors when the steps wrap. */
@media (max-width: 1000px) {
  .process-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px 24px;
  }

  .process-card::after {
    display: none;
  }
}

/* Mobile: two steps per row. */
@media (max-width: 600px) {
  .process-section {
    padding-block: 56px;
  }

  .process-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px 20px;
  }
}
/* =========================================================
   12. WHY WORK WITH ALLFROPIX?
   Left: introduction. Right: two-by-two benefit cards.

   padding-block = space above and below the section.
   gap in .why-layout = space between the two columns.
   padding in .why-card = space inside each card.
========================================================= */

.why-section {
  padding-block: 100px;
  background: var(--soft-blue);
}

.why-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: 70px;
}

.why-introduction h2 {
  margin: 0;
  font-size: clamp(28px, 2.7vw, 38px);
  line-height: 1.3;
  letter-spacing: -0.035em;
}

.why-introduction > p:last-child {
  max-width: 430px;
  margin: 24px 0 0;
  font-size: 15px;
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.why-card {
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  background: var(--surface);
  box-shadow: -3px -3px 10px rgba(20, 49, 77, 0.03);
}

.why-card h3 {
  margin: 0 0 14px;
  font-size: 22px;
  line-height: 1.35;
  letter-spacing: -0.025em;
}

.why-card p {
  margin: 0;
  font-size: 15px;
}

/* Tablet: introduction above the two-column card grid. */
@media (max-width: 1000px) {
  .why-layout {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

/* Mobile: stack all four cards and reduce section spacing. */
@media (max-width: 760px) {
  .why-section {
    padding-block: 56px;
  }

  .why-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .why-card {
    padding: 26px;
  }
}
/* ==================================================
   12A. PORTFOLIO / DESIGN CONCEPTS
   Three device groups on desktop; stacked on mobile.
   Asset positioning and animation will be added later.
   ================================================== */

.portfolio-section {
  padding-block: 90px;
  background: var(--page-background);
}

.portfolio-heading {
  margin-bottom: 48px;
  text-align: center;
}

.portfolio-heading .eyebrow {
  justify-content: center;
}

.portfolio-heading h2 {
  margin: 0;
  font-size: clamp(28px, 2.7vw, 38px);
  line-height: 1.3;
  letter-spacing: -0.035em;
}

/* Equal columns give each device group its own space. */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 36px;
}

.portfolio-item {
  min-width: 0;
  text-align: center;
}

/* Device stage: each group stays within its own column. */
.portfolio-device-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  isolation: isolate;
}

/* Preserve image proportions; position devices independently. */
.portfolio-device-stage img {
  position: absolute;
  display: block;
  height: auto;
}

/* All three laptops share the same size and baseline. */
.portfolio-laptop {
  z-index: 2;
  left: 0;
  bottom: 0;
  width: 88%;
}

/* Phone and tablet appear in front of their laptops. */
.portfolio-phone {
  z-index: 3;
  right: 0;
  bottom: 0;
  width: 23%;
}

.portfolio-tablet {
  z-index: 3;
  right: 0;
  bottom: 0;
  width: 32%;
}

/* Larger monitor, raised behind the electronics laptop. */
.portfolio-monitor {
  z-index: 1;
 right: -12%; /* Move the monitor right, revealing its stand. */
 bottom: 12%; /* Lower the monitor slightly. */
  width: 85%;
}

.portfolio-item h3 {
  margin: 24px 0 10px;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.3;
}

.portfolio-category {
  margin: 0;
  color: var(--muted-text);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.portfolio-note {
  margin: 36px 0 0;
  color: var(--muted-text);
  font-size: 12px;
  text-align: center;
}

/* Mobile: keep each laptop and companion device together. */
@media (max-width: 760px) {
  .portfolio-section {
    padding-block: 56px;
  }

  .portfolio-heading {
    margin-bottom: 32px;
  }

  .portfolio-grid {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .portfolio-item {
    width: 100%;
    max-width: 480px;
    margin-inline: auto;
  }
}
/* ==================================================
   13. BUILT TO GROW — CLOSING INVITATION
   Text on the left; consultation button on the right.
   Adjust panel padding here to change its inner spacing.
   ================================================== */

/* Full-width mountain background for the closing section. */
.growth-section {
  padding-block: 100px;
  background-color: #eaf1f5;
  background-image: url("assets/built-to-grow-background.webp");
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
}

/* Keep the text and button layout; remove the box treatment. */
.growth-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 48px;
  padding: 48px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.growth-copy h2 {
  max-width: 680px;
  margin: 0;
  font-size: clamp(28px, 2.7vw, 38px);
  line-height: 1.3;
  letter-spacing: -0.035em;
}

.growth-description {
  max-width: 660px;
  margin: 22px 0 0;
  font-size: 16px;
}

.growth-action {
  text-align: center;
}

.growth-note {
  margin: 12px 0 0;
  color: var(--muted-text);
  font-size: 12px;
}

/* Stack the button below the text when space is limited. */
@media (max-width: 1000px) {
  .growth-panel {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .growth-action {
    justify-self: start;
    text-align: left;
  }
}

/* Mobile: reduce outer and inner spacing. */
@media (max-width: 600px) {
  .growth-section {
    padding-block: 56px;
  }

 .growth-panel {
  padding: 28px 0px;
}
}
/* ==================================================
   14. SHARED FOOTER
   Four columns on desktop, two on tablet, one on mobile.
   ================================================== */

.site-footer {
  padding: 72px 0 24px;
  background: var(--navy);
  color: #eaf1f5;
}

/* The brand and email columns have more room for text. */
.footer-layout {
  display: grid;
  grid-template-columns: 1.5fr 0.7fr 0.9fr 1.2fr;
  align-items: start;
  gap: 44px;
}

.footer-layout > * {
  min-width: 0;
}

.footer-logo {
  display: block;
  /* Blend away the logo's black background on the navy footer. */
mix-blend-mode: screen;
  width: 230px;
  max-width: 100%;
  height: auto;
}

.footer-description {
  max-width: 310px;
  margin: 24px 0 0;
  color: #d3dfe8;
  font-size: 15px;
  line-height: 1.7;
}

/* Small terracotta accents for location and email. */
.footer-location {
  margin: 16px 0 0;
  color: #e4b49a;
  font-size: 14px;
  font-weight: 700;
}

/* Footer headings use the readable body font. */
.footer-column h2 {
  margin: 8px 0 22px;
  color: #ffffff;
  font-family: var(--body-font);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.footer-links {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-links a,
.footer-email {
  color: #eaf1f5;
  font-size: 14px;
  text-decoration: none;
}

.footer-contact p {
  margin: 0 0 20px;
  color: #d3dfe8;
  font-size: 14px;
  line-height: 1.7;
}

.footer-email {
  color: #e4b49a;
  font-weight: 700;
  overflow-wrap: anywhere;
}

/* Hover and keyboard focus keep links easy to identify. */
.footer-links a:hover,
.footer-email:hover {
  text-decoration: underline;
  text-underline-offset: 5px;
}

.site-footer a:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 6px;
}

/* Divider separates the copyright from the main content. */
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-top: 56px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.footer-bottom p {
  margin: 0;
  color: #d3dfe8;
  font-size: 12px;
}

/* Tablet: arrange the four columns into two rows. */
@media (max-width: 1000px) {
  .footer-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;
  }
}

/* Mobile: stack all columns and the bottom row. */
@media (max-width: 600px) {
  .site-footer {
    padding-top: 48px;
  }

  .footer-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .footer-logo {
    width: 200px;
  }

  .footer-column h2 {
    margin-top: 0;
    margin-bottom: 16px;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-top: 36px;
  }
}
/* ======================================================
   SERVICES PAGE — OPENING
   Shared colours, fonts and buttons match the homepage.
   ====================================================== */

/* Match the homepage hero's top and bottom spacing. */
.services-hero {
  padding-block: 100px 82px;
}

.services-hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 60px;
}

.services-hero h1 {
  margin: 0;
  max-width: 620px;
  font-size: clamp(42px, 4.5vw, 66px);
  line-height: 1.12;
  letter-spacing: -0.035em;
}

.services-hero h1 em {
  color: #58788b;
}

.services-hero-description {
  max-width: 540px;
  margin: 26px 0;
  font-size: 18px;
  line-height: 1.65;
}

/* Temporary visual space; replaced when assets are ready. */
.services-hero-visual {
  display: grid;
  place-items: center;
  min-height: 420px;
  padding: 30px;
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  background: var(--soft-blue);
}

.services-hero-visual p {
  color: var(--muted-text);
  font-size: 13px;
  text-align: center;
}

.services-details {
  padding-block: 80px;
  background: var(--page-background);
  scroll-margin-top: 120px;
}

@media (max-width: 760px) {
  .services-hero {
    padding-block: 60px;
  }

  .services-hero-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .services-hero-visual {
    min-height: 300px;
  }

  .services-details {
    padding-block: 56px;
  }
}
/* ======================================================
   SERVICES PAGE — OUR APPROACH
   Pale-blue band with two text columns and a fine divider.
   ====================================================== */

.services-approach {
  padding-block: 64px;
  background: var(--soft-blue);
}

.services-approach-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  align-items: center;
  gap: 60px;
}

.services-approach h2 {
  margin: 0;
  font-size: clamp(28px, 2.7vw, 38px);
  line-height: 1.3;
  letter-spacing: -0.035em;
}

.services-approach p:not(.eyebrow) {
  max-width: 620px;
  margin: 18px 0 0;
  font-size: 16px;
  line-height: 1.65;
}

.services-approach-support {
  padding-left: 44px;
  border-left: 1px solid var(--border);
}

.services-approach-support p:not(.eyebrow) {
  margin: 0;
}

@media (max-width: 760px) {
  .services-approach {
    padding-block: 48px;
  }

  .services-approach-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .services-approach-support {
    padding: 24px 0 0;
    border-left: 0;
    border-top: 1px solid var(--border);
  }
}
/* Match the homepage hero width.
   Other services sections keep their existing container width. */
@media (min-width: 761px) {
  .services-hero > .services-hero-layout {
    width: min(
      1320px,
      calc(100% - var(--page-gutter) * 2)
    );
    margin-inline: auto;
  }
}
/* ======================================================
   SERVICES PAGE — EXPANDABLE SERVICE LIST
   Native details/summary elements work without JavaScript.
   Open panels and hover states use our soft-blue palette.
   ====================================================== */

.services-list-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  align-items: end;
  gap: 60px;
  margin-bottom: 32px;
}

.services-list-heading h2 {
  margin: 0;
  font-size: clamp(28px, 2.7vw, 38px);
  line-height: 1.3;
  letter-spacing: -0.035em;
}

.services-list-heading > p {
  margin: 0;
  font-size: 16px;
}

.services-accordion {
  display: grid;
  gap: 12px;
}

.service-option {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  background: var(--surface);
  scroll-margin-top: 120px;
}

.service-option summary {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto 20px;
  align-items: center;
  gap: 22px;
  padding: 24px;
  list-style: none;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.service-option summary::-webkit-details-marker {
  display: none;
}

.service-option summary:hover {
  background: #f3f7fa;
}

.service-option summary:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: -4px;
}

.service-option[open] > summary {
  background: var(--soft-blue);
}

/* Small terracotta number accent. */
.service-option-number {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid #e6c7b8;
  border-radius: 50%;
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
}

.service-option-title {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.service-option-title strong {
  color: var(--navy);
  font-family: var(--heading-font);
  font-size: 23px;
  font-weight: 400;
  line-height: 1.25;
}

.service-option-title > span {
  color: var(--body-text);
  font-size: 14px;
  line-height: 1.5;
}

.service-option-status {
  padding: 7px 12px;
  border-radius: 20px;
  background: #eef3f6;
  color: var(--muted-text);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.service-option-status.is-available {
  background: #e0eee7;
  color: #315b49;
}

/* Plus becomes minus when the panel opens. */
.service-option-toggle::before {
  content: "+";
  color: var(--navy);
  font-size: 24px;
}

.service-option[open] .service-option-toggle::before {
  content: "−";
}

.service-option-body {
  padding: 30px;
  border-top: 1px solid var(--border);
}

.service-option-body p {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
}

.service-option-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
}

.service-option-body .button {
  margin-top: 24px;
}

.service-option-inclusions {
  padding-left: 32px;
  border-left: 1px solid var(--border);
}

.service-option-inclusions h3 {
  margin: 0 0 18px;
  font-family: var(--body-font);
  font-size: 15px;
  font-weight: 700;
}

.service-option-inclusions .starter-features {
  margin: 0;
}

@media (max-width: 760px) {
  .services-list-heading {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .service-option summary {
    grid-template-columns: 34px minmax(0, 1fr) 20px;
    gap: 14px;
    padding: 20px 16px;
  }

  .service-option-number {
    width: 32px;
    height: 32px;
  }

  .service-option-title strong {
    font-size: 21px;
  }

  .service-option-status {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
  }

  .service-option-toggle {
    grid-column: 3;
    grid-row: 1;
  }

  .service-option-body {
    padding: 24px 20px;
  }

  .service-option-columns {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .service-option-inclusions {
    padding: 24px 0 0;
    border-left: 0;
    border-top: 1px solid var(--border);
  }
}
/* Restored service descriptions: space between paragraphs. */
.service-option-body p + p {
  margin-top: 18px;
}

.service-option-body .service-panel-note {
  color: var(--muted-text);
  font-size: 14px;
}
/* ======================================================
   SERVICES PAGE — ONGOING WEBSITE CARE
   Pale-blue band, with support features on the right.
   ====================================================== */

.services-care {
  padding-block: 72px;
  background: var(--soft-blue);
  scroll-margin-top: 120px;
}

.services-care-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 64px;
}

.services-care h2 {
  margin: 0;
  font-size: clamp(28px, 2.7vw, 38px);
  line-height: 1.3;
  letter-spacing: -0.035em;
}

.services-care-content > p:not(.eyebrow) {
  max-width: 580px;
  margin: 20px 0 0;
  font-size: 16px;
  line-height: 1.65;
}

.services-care-content > .services-care-note {
  color: var(--muted-text);
  font-size: 14px;
}

.services-care .button {
  margin-top: 24px;
}

.services-care-features {
  padding-left: 44px;
  border-left: 1px solid var(--border);
}

.services-care-features h3 {
  margin: 0 0 20px;
  font-family: var(--body-font);
  font-size: 15px;
  font-weight: 700;
}

.services-care-features .starter-features {
  margin: 0;
  gap: 16px;
}

@media (max-width: 760px) {
  .services-care {
    padding-block: 48px;
  }

  .services-care-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .services-care-features {
    padding: 28px 0 0;
    border-left: 0;
    border-top: 1px solid var(--border);
  }
}
/* ======================================================
   SERVICES PAGE — ADDITIONAL SUPPORT CARDS
   Four columns on desktop, with a subtle blue hover.
   ====================================================== */

.services-extras {
  padding-block: 80px;
  background: var(--page-background);
}

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

.services-extra-card {
  display: flex;
  flex-direction: column;
  padding: 26px;
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  background: var(--surface);
  transition:
    background-color 200ms ease,
    border-color 200ms ease;
}

.services-extra-card:hover {
  background: #f3f7fa;
  border-color: #aec4d2;
}

.services-extra-card h3 {
  margin: 0 0 14px;
  font-size: 23px;
  line-height: 1.3;
}

.services-extra-card p {
  margin: 0 0 22px;
  font-size: 14px;
  line-height: 1.65;
}

.services-extra-status {
  margin-top: auto;
  color: var(--muted-text);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

@media (max-width: 1000px) {
  .services-extras-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .services-extras {
    padding-block: 56px;
  }

  .services-extras-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}
/* Additional-service icons: consistent navy outlines. */
.services-extra-icon {
  display: block;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  margin-bottom: 20px;
  color: var(--navy);
}
/* ======================================================
   SERVICES PAGE — COMPACT GROWTH PATHWAY
   Four steps on desktop, two on tablet, one on mobile.
   ====================================================== */

/* Pale-blue background with space above and below. */
.services-pathway {
  padding-block: 72px 80px;
  background: var(--soft-blue);
}

.services-pathway-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  margin: 36px 0 0;
  padding: 0;
  list-style: none;
}

.services-pathway-step {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: start;
  gap: 14px;
}

/* Terracotta circles with dark navy numbers. */
.services-pathway-number {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
 border: 1px solid #b86b4b;
border-radius: 50%;
background: #f6e7de;
color: #b86b4b;
  font-size: 13px;
  font-weight: 700;
}

.services-pathway-step h3 {
  margin: 0 0 10px;
  font-family: var(--body-font);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
}

.services-pathway-step p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
}

@media (max-width: 1000px) {
  .services-pathway-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
  }
}

@media (max-width: 600px) {
  .services-pathway {
    padding-bottom: 56px;
  }

  .services-pathway-grid {
    grid-template-columns: 1fr;
    gap: 26px;
  }
}
/* =========================================================
   07. SERVICES — FREE CONSULTATION
   Scenic background shared with the homepage.
   Two columns on desktop; stacked content on smaller screens.
   ========================================================= */

.services-consultation {
  padding-block: 100px;
  background-color: var(--page-background);
  background-image: url("assets/built-to-grow-background.webp");
  background-size: cover;
  background-position: center bottom;
}

.services-consultation-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 60px;
}

.services-consultation-content h2 {
  margin: 0;
  max-width: 650px;
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1.25;
  letter-spacing: -0.025em;
}

.services-consultation-content > p:not(.eyebrow) {
  max-width: 620px;
  margin: 22px 0 0;
  font-size: 16px;
  line-height: 1.65;
}

/* Keep the button and its reassurance together. */
.services-consultation-action {
  text-align: center;
}

.services-consultation-action > p {
  margin: 12px 0 0;
  color: var(--muted-text);
  font-size: 12px;
}

/* Smaller screens: place the button below the message. */
@media (max-width: 760px) {
  .services-consultation {
    padding-block: 64px;
  }

  .services-consultation-layout {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .services-consultation-action {
    justify-self: start;
    text-align: left;
  }
}
/* =========================================================
   08. SERVICES HERO — THREE DEVICE COMPOSITION
   Laptop anchors the visual; iPad and phone sit in front.
   These rules replace the previous placeholder treatment.
   ========================================================= */

.services-hero-visual {
  display: grid;
  place-items: center;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.services-device-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  isolation: isolate;
}

.services-device {
  position: absolute;
  display: block;
  max-width: none;
  height: auto;
}

/* Main device: slightly left to leave room for companions. */
.services-device-laptop {
  z-index: 1;
  left: -5%;
  bottom: 8%;
  width: 94%;
}

/* Tablet: taller companion, behind the phone. */
.services-device-ipad {
  z-index: 2;
  right: 4%;
  bottom: 8%;
  width: 34%;
}

/* Phone: foreground device at the right edge. */
.services-device-phone {
  z-index: 3;
  right: -4%;
  bottom: 6%;
  width: 19%;
}

@media (max-width: 760px) {
  .services-device-stage {
    max-width: 580px;
    margin-inline: auto;
  }
}
/* =========================================================
   01. CONTACT — CONVERSATION HERO
   Matches the homepage and services hero spacing.
   These selectors affect only the contact page.
   ========================================================= */

.contact-hero {
  padding-block: 100px 82px;
}

.contact-hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 60px;
}

.contact-hero-content h1 {
  max-width: 620px;
  margin: 0;
  font-size: clamp(42px, 4.5vw, 66px);
  line-height: 1.12;
  letter-spacing: -0.035em;
}

.contact-hero-description {
  max-width: 560px;
  margin: 26px 0 0;
  color: var(--body-text);
  font-size: 18px;
  line-height: 1.65;
}

.contact-hero-content .hero-actions {
  margin-top: 28px;
}

/* Reserve room for the future communication visual. */
.contact-hero-visual {
  display: grid;
  place-items: center;
  min-height: 420px;
  padding: 30px;
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  background: var(--soft-blue);
}

.contact-hero-visual p {
  margin: 0;
  color: var(--muted-text);
  font-size: 13px;
  text-align: center;
}

/* Wider hero only: other sections keep their usual width. */
@media (min-width: 761px) {
  .contact-hero > .contact-hero-layout {
    width: min(
      1320px,
      calc(100% - var(--page-gutter) * 2)
    );
    margin-inline: auto;
  }
}

/* Mobile: place the visual beneath the message. */
@media (max-width: 760px) {
  .contact-hero {
    padding-block: 60px;
  }

  .contact-hero-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .contact-hero-visual {
    min-height: 300px;
  }
}
/* =========================================================
   02. CONTACT — WAYS TO GET IN TOUCH
   Three cards on desktop, stacked on smaller screens.
   Only active contact links receive a hover highlight.
   ========================================================= */

.contact-options {
  padding-block: 64px;
  background: var(--soft-blue);
}

.contact-options-heading {
  max-width: 760px;
  margin-bottom: 32px;
}

.contact-options-heading h2 {
  margin: 0;
  font-size: clamp(28px, 2.7vw, 38px);
  line-height: 1.3;
  letter-spacing: -0.025em;
}

.contact-options-heading > p:not(.eyebrow) {
  max-width: 620px;
  margin: 18px 0 0;
  font-size: 16px;
  line-height: 1.65;
}

.contact-options-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

/* Whole active card is clickable. */
.contact-option-card {
  position: relative;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: start;
  gap: 18px;
  padding: 26px;
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  background: var(--surface);
  color: var(--body-text);
  text-decoration: none;
  transition: background 200ms ease, border-color 200ms ease;
}

a.contact-option-card:hover {
  background: #f7fafc;
  border-color: #aec4d2;
}

a.contact-option-card:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 4px;
}

.contact-option-content h3 {
  margin: 0 0 10px;
  color: var(--navy);
  font-size: 23px;
  line-height: 1.3;
}

.contact-option-content p {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
}

/* Small circular icons: terracotta, blue and green. */
.contact-option-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid #e8c8ba;
  border-radius: 50%;
  background: #f6e7de;
  color: #b86b4b;
}

.contact-option-icon-blue {
  border-color: #d5e2ec;
  background: #f0f6fa;
  color: var(--navy);
}

.contact-option-icon-green {
  border-color: #cee5d8;
  background: #e8f4ed;
  color: #327452;
}

.contact-option-icon svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.contact-option-email {
  color: var(--navy);
  text-decoration: underline;
  overflow-wrap: anywhere;
}

.contact-option-arrow {
  grid-column: 2;
  justify-self: end;
  color: var(--navy);
  font-size: 20px;
}

.contact-option-status {
  display: inline-block;
  margin-top: 16px;
  padding: 6px 12px;
  border-radius: 20px;
  background: #e4edf4;
  color: var(--navy);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .contact-options-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .contact-options {
    padding-block: 48px;
  }

  .contact-option-card {
    padding: 22px;
  }
}
/* =========================================================
   03. CONTACT — FORM AND REASSURANCE
   Two columns on desktop; stacked on smaller screens.
   ========================================================= */

.contact-enquiry {
  padding-block: 90px;
  scroll-margin-top: 120px;
}

.contact-enquiry-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr);
  align-items: start;
  gap: 48px;
}

#contact-form-heading {
  margin: 0 0 26px;
  font-size: clamp(28px, 2.7vw, 38px);
  line-height: 1.3;
  letter-spacing: -0.025em;
}

.contact-form {
  display: grid;
  gap: 22px;
  padding: 30px;
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  background: var(--surface);
}

/* Enquiry type: two selectable cards. */
.contact-type {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.contact-type legend {
  margin-bottom: 12px;
  color: var(--navy);
  font-size: 14px;
}

.contact-type-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.contact-type-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  cursor: pointer;
}

.contact-type-option:has(input:checked) {
  background: #f0f6fa;
  border-color: #aec4d2;
}

.contact-type-option input {
  flex-shrink: 0;
  margin-top: 4px;
  accent-color: var(--accent);
}

.contact-type-option strong {
  display: block;
  color: var(--navy);
  font-size: 14px;
  font-weight: 600;
}

.contact-type-option small {
  display: block;
  margin-top: 5px;
  color: var(--muted-text);
  font-size: 12px;
  line-height: 1.5;
}

/* Labels and fields. */
.contact-form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.contact-field {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.contact-field label {
  color: var(--navy);
  font-size: 14px;
}

.contact-field input,
.contact-field select,
.contact-field textarea {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  color: var(--navy);
  font: inherit;
  font-size: 15px;
}

.contact-field textarea {
  resize: vertical;
}

.contact-field input::placeholder,
.contact-field textarea::placeholder {
  color: var(--muted-text);
  opacity: 1;
}

.contact-field input:focus-visible,
.contact-field select:focus-visible,
.contact-field textarea:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}

/* Additional questions only appear for consultations. */
.contact-consultation-fields {
  display: grid;
  gap: 20px;
  min-width: 0;
  margin: 0;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  background: #f7fafc;
}

.contact-consultation-fields[hidden] {
  display: none;
}

.contact-consultation-fields legend {
  padding-inline: 6px;
  color: var(--navy);
  font-size: 15px;
  font-weight: 600;
}

.contact-privacy {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 13px;
  line-height: 1.6;
}

.contact-privacy input {
  flex-shrink: 0;
  margin-top: 5px;
  accent-color: var(--accent);
}

.contact-privacy a {
  color: var(--navy);
  text-decoration: underline;
}

.contact-submit {
  width: 100%;
}

.contact-submit:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

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

/* Right-hand reassurance panel. */
.contact-reassurance {
  margin-top: 48px;
  padding: 30px;
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  background: #f0f6fa;
}

.contact-reassurance > h2 {
  margin: 0 0 16px;
  font-size: 30px;
  line-height: 1.3;
}

.contact-reassurance p {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
}

.contact-reassurance-list {
  display: grid;
  gap: 26px;
  margin: 30px 0;
  padding: 0;
  list-style: none;
}

.contact-reassurance-list li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 16px;
}

.contact-reassurance-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid #e8c8ba;
  border-radius: 50%;
  background: #f6e7de;
  color: #b86b4b;
  font-size: 19px;
}

.contact-reassurance h3 {
  margin: 0 0 8px;
  color: var(--navy);
  font-size: 20px;
  line-height: 1.3;
}

.contact-consultation-note {
  padding-top: 26px;
  border-top: 1px solid var(--border);
}

.contact-consultation-note p + p {
  margin-top: 14px;
}

@media (max-width: 900px) {
  .contact-enquiry-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .contact-reassurance {
    margin-top: 0;
  }
}

@media (max-width: 600px) {
  .contact-enquiry {
    padding-block: 56px;
  }

  .contact-form,
  .contact-reassurance {
    padding: 22px;
  }

  .contact-form-row,
  .contact-type-options {
    grid-template-columns: 1fr;
  }
}
/* Consultation benefits — small terracotta ticks. */
.contact-consultation-benefits {
  display: grid;
  gap: 16px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.contact-consultation-benefits li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 10px;
  font-size: 14px;
  line-height: 1.6;
}

.contact-consultation-benefits li::before {
  content: "✓";
  color: var(--accent);
  font-weight: 700;
}
/* =========================================================
   CONTACT SIDEBAR — TWO SEPARATE BLUE PANELS
   Shared right column with a clear gap between panels.
   ========================================================= */

.contact-sidebar {
  display: grid;
  gap: 20px;
  margin-top: 48px;
  min-width: 0;
}

.contact-sidebar .contact-reassurance {
  margin-top: 0;
}

.contact-sidebar .contact-consultation-note {
  padding: 30px;
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  background: #f0f6fa;
}

.contact-sidebar .contact-consultation-note h3 {
  margin: 0 0 14px;
  color: var(--navy);
  font-size: 23px;
  line-height: 1.3;
}

.contact-sidebar .contact-consultation-note p {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
}

/* Remove excess space beneath the first panel’s list. */
.contact-sidebar .contact-reassurance-list {
  margin-bottom: 0;
}

@media (max-width: 900px) {
  .contact-sidebar {
    margin-top: 0;
  }
}

@media (max-width: 600px) {
  .contact-sidebar .contact-consultation-note {
    padding: 22px;
  }
}
/* Reassurance icons — consistent terracotta line drawings.
   Existing pale orange circles stay in place. */
.contact-reassurance-icon svg {
  display: block;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* =========================================================
   CONTACT — CENTRE THE TWO BLUE PANELS
   Equal free space above and below the sidebar on desktop.
   ========================================================= */

.contact-sidebar {
  margin-top: 0;
  align-self: center;
}
/* More space between panels, keeping the top panel
   near its current position. */
@media (min-width: 901px) {
  .contact-sidebar {
    gap: 70px;
    transform: translateY(65px);
  }
}
/* =========================================================
   04. CONTACT — WHAT HAPPENS NEXT
   Three columns with small terracotta numbered circles.
   Stacks vertically on smaller screens.
   ========================================================= */

.contact-next {
  padding-block: 72px;
  /* Soft blue separates the process from the scenic banner. */
background: var(--soft-blue);
  border-top: 1px solid var(--border);
}

.contact-next-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.8fr);
  align-items: center;
  gap: 48px;
  margin-bottom: 36px;
}

.contact-next-heading h2 {
  margin: 0;
  font-size: clamp(28px, 2.7vw, 38px);
  line-height: 1.3;
  letter-spacing: -0.025em;
}

.contact-next-heading > p {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
}

.contact-next-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact-next-step {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: start;
  gap: 16px;
}

/* Small arrows connect the steps on desktop. */
.contact-next-step:not(:last-child)::after {
  content: "→";
  position: absolute;
  top: 8px;
  right: -28px;
  color: var(--navy);
  font-size: 20px;
}

.contact-next-number {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid #b86b4b;
  border-radius: 50%;
  background: #f6e7de;
  color: #b86b4b;
  font-size: 14px;
  font-weight: 700;
}

.contact-next-step h3 {
  margin: 0 0 10px;
  font-size: 21px;
  line-height: 1.3;
}

.contact-next-step p {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
}

@media (max-width: 900px) {
  .contact-next-heading {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .contact-next-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .contact-next-step::after {
    display: none;
  }
}

@media (max-width: 600px) {
  .contact-next {
    padding-block: 48px;
  }
}
/* =========================================================
   05. CONTACT — SCENIC CONSULTATION BANNER
   Compact closing section using our existing background.
   ========================================================= */

.contact-consultation-banner {
/* Match the taller scenic banner on the services page.
   Give the text room above the dark mountain foreground. */
padding-block: 100px;
  background-color: var(--page-background);
 /* Show the mountain image without a pale overlay. */
background-image: url("assets/built-to-grow-background.webp");
background-size: cover;
background-position: center bottom;
background-repeat: no-repeat;
}

.contact-consultation-banner-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 40px;
}

.contact-consultation-banner .eyebrow {
  margin-bottom: 14px;
}

.contact-consultation-banner h2 {
  margin: 0;
  font-size: clamp(28px, 2.7vw, 38px);
  line-height: 1.3;
  letter-spacing: -0.025em;
}

.contact-consultation-banner-description {
  margin: 12px 0 0;
  color: var(--navy);
  font-size: 15px;
  line-height: 1.65;
}

@media (max-width: 760px) {
  .contact-consultation-banner {
    padding-block: 40px;
  }

  .contact-consultation-banner-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .contact-consultation-banner-layout > .button {
    justify-self: start;
  }
}
/* ==========================================================
   CONTACT HERO — static glass graphic and fading words.
   ========================================================== */

.contact-hero-visual {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  padding: 24px 90px 24px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.contact-hero-graphic {
  display: block;
  width: 100%;
  max-width: 560px;
  height: auto;
}

/* Words beside the upper-right edge of the graphic. */
.contact-hero-words {
  position: absolute;
  top: 12%;
  right: 0;
  display: grid;
  gap: 9px;
  padding-left: 18px;
}

/* Thin terracotta line and dot beside the words. */
.contact-hero-words::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 0;
  width: 1px;
  height: 48px;
  background: var(--accent);
}

.contact-hero-words::after {
  content: "";
  position: absolute;
  top: 0;
  left: -2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

.contact-hero-words span,
.contact-hero-visual .contact-hero-closing {
  color: var(--navy);
  font-family: var(--body-font);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.8;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Each word slowly appears, then stays visible. */
.contact-hero-words span {
  animation: contact-word-fade 2s ease both;
}

.contact-hero-words span:nth-child(1) {
  animation-delay: 0.6s;
}

.contact-hero-words span:nth-child(2) {
  animation-delay: 1.4s;
}

.contact-hero-words span:nth-child(3) {
  animation-delay: 2.2s;
}

.contact-hero-words span:nth-child(4) {
  animation-delay: 3s;
}

/* Closing message beside the lower-right edge. */
.contact-hero-visual .contact-hero-closing {
  position: absolute;
  right: 0;
  bottom: 9%;
  margin: 0;
  padding-left: 18px;
  animation: contact-word-fade 2.4s ease 3.8s both;
}

@keyframes contact-word-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Smaller text and spacing on mobile. */
@media (max-width: 600px) {
  .contact-hero-visual {
    padding: 20px 80px 20px 0;
  }

  .contact-hero-words {
    top: 5%;
    gap: 5px;
  }

  .contact-hero-words span,
  .contact-hero-visual .contact-hero-closing {
    font-size: 9px;
  }

  .contact-hero-visual .contact-hero-closing {
    bottom: 2%;
  }
}

/* Show the text immediately for reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
  .contact-hero-words span,
  .contact-hero-visual .contact-hero-closing {
    animation: none;
  }
}
/* CONTACT HERO — repeat the text sequence gently. */
.contact-hero-words span {
animation: contact-text-loop 14s ease-in-out 3.2s infinite both;
}

.contact-hero-words span:nth-child(1) {
  animation-delay: 0s;
}

.contact-hero-words span:nth-child(2) {
  animation-delay: 0.8s;
}

.contact-hero-words span:nth-child(3) {
  animation-delay: 1.6s;
}

.contact-hero-words span:nth-child(4) {
  animation-delay: 2.4s;
}

.contact-hero-visual .contact-hero-closing {
  animation: contact-text-loop 14s ease-in-out 3.2s infinite both;
}

@keyframes contact-text-loop {
  0%, 100% {
    opacity: 0;
  }

  18%, 65% {
    opacity: 1;
  }

  85% {
    opacity: 0;
  }
}

/* Keep the text visible when reduced motion is preferred. */
@media (prefers-reduced-motion: reduce) {
  .contact-hero-words span,
  .contact-hero-visual .contact-hero-closing {
    animation: none;
    opacity: 1;
  }
}
/* SHARED LEGAL PAGES — privacy, cookies and website terms */
.legal-hero {
  padding-block: 72px 48px;
  background: var(--soft-blue);
}

.legal-hero h1 {
  margin: 0 0 20px;
  font-size: clamp(38px, 5vw, 60px);
  line-height: 1.12;
}

.legal-introduction {
  max-width: 650px;
  margin: 0;
  color: var(--muted-text);
  font-size: 17px;
  line-height: 1.7;
}

.legal-updated {
  margin: 22px 0 0;
  color: var(--muted-text);
  font-size: 13px;
}

.legal-content {
  max-width: 850px;
  padding-block: 56px 80px;
}

.legal-content section + section {
  margin-top: 34px;
  padding-top: 30px;
  border-top: 1px solid var(--border);
}

.legal-content h2 {
  margin: 0 0 16px;
  font-size: clamp(23px, 2.5vw, 29px);
  line-height: 1.3;
}

.legal-content p,
.legal-content li {
  font-size: 15px;
  line-height: 1.8;
}

.legal-content p {
  margin: 0 0 16px;
}

.legal-content ul {
  margin: 0 0 20px;
  padding-left: 22px;
}

.legal-content li + li {
  margin-top: 12px;
}

.legal-content a {
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

.legal-content a:hover {
  color: var(--accent);
}

@media (max-width: 600px) {
  .legal-hero {
    padding-block: 48px 36px;
  }

  .legal-content {
    padding-block: 36px 56px;
  }
}
/* Keep the homepage animation from causing sideways scrolling. */
.hero {
  overflow-x: clip;
}