/* =========================================================
   ONYX Consultants: styles
   ---------------------------------------------------------
   Contents
     1.  Design tokens (colours, fonts, spacing: change here)
     2.  Base and reset
     3.  Layout helpers (container, sections, themes)
     4.  Type helpers (eyebrow, section titles)
     5.  Buttons
     6.  Cards and tick lists
     7.  Header and navigation (including mobile menu)
     8.  Hero
     9.  Credentials strip
     10. Services
     11. Our work (projects)
     12. About
     13. Contact and enquiry form
     14. Footer
     15. 404 page
     16. Motion (fade-up, reduced motion)

   Written mobile-first. Breakpoints:
     640px  (large phones / small tablets)
     960px  (tablets / small laptops)
     1280px (desktop)
   ========================================================= */


/* ---------------------------------------------------------
   1. DESIGN TOKENS
   Change a value here and it changes everywhere.
   --------------------------------------------------------- */
:root {
  /* Colours */
  --color-dark:         #111214; /* main dark background */
  --color-dark-panel:   #1B1D21; /* cards and strips on dark */
  --color-dark-line:    #2A2D33; /* borders on dark */
  --color-dark-outline: #6B7079; /* outlines of buttons and form fields on dark (needs 3:1 contrast) */
  --color-light:        #F4F2EE; /* main light background (warm off-white) */
  --color-white:        #FFFFFF; /* cards on light */
  --color-light-line:   #DEDAD3; /* borders on light */
  --color-text-light:   #F4F2EE; /* headings on dark */
  --color-muted-light:  #C9CCD1; /* body text on dark */
  --color-subtle-light: #A9ADB4; /* small labels on dark */
  --color-text-dark:    #16171A; /* headings on light, and the dark card/button on light sections */
  --color-muted-dark:   #3A3D42; /* body text on light */
  --color-accent:       #6189B9; /* ONYX blue, from the logo: buttons, highlights */
  --color-accent-hover: #7FA2CC; /* blue buttons on hover */
  --color-accent-ink:   #3E6A9E; /* darker blue for small text on light backgrounds */
  --color-error:        #FFA69E; /* form error text on dark */

  /* Fonts */
  --font-heading: "Barlow Condensed", "Barlow Condensed Fallback", "Arial Narrow", sans-serif;
  --font-body:    "IBM Plex Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Type sizes (fluid: they scale with the screen width) */
  --text-h1:        clamp(2.5rem, 13.3vw, 4.75rem);           /* 40px to 76px on phones */
  --text-h2:        clamp(2.75rem, 1.9rem + 3.4vw, 4rem);     /* 44px to 64px */
  --text-h2-small:  clamp(2.5rem, 1.9rem + 2.4vw, 3.5rem);    /* 40px to 56px */
  --text-h3:        clamp(1.5rem, 1.35rem + 0.6vw, 1.75rem);  /* 24px to 28px */
  --text-lead:      clamp(1.0625rem, 0.98rem + 0.4vw, 1.25rem); /* 17px to 20px */
  --text-body:      clamp(1rem, 0.95rem + 0.2vw, 1.125rem);   /* 16px to 18px */
  --text-card:      1rem;      /* 16px */
  --text-small:     0.875rem;  /* 14px: labels only */
  --text-eyebrow:   clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem); /* 12px to 14px */

  /* Spacing scale */
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.25rem;  /* 20px */
  --space-6: 1.5rem;   /* 24px */
  --space-7: 2rem;     /* 32px */
  --space-8: 3.5rem;   /* 56px */
  --space-9: 5rem;     /* 80px */

  /* Layout */
  --gutter:        clamp(1.25rem, 5.5vw, 5rem);  /* side padding: 20px to 80px */
  --section-pad:   clamp(3.5rem, 9vw, 7.5rem);   /* top/bottom of sections: 56px to 120px */
  --content-width: 80rem;                        /* 1280px of content */
  --measure:       34rem;                        /* comfortable paragraph width */

  /* Shape */
  --radius-button: 4px;
  --radius-card:   6px;

  /* Header height: tall at the top of the page, shorter once you scroll */
  --header-h-top:      5.5rem;   /* 88px */
  --header-h-scrolled: 4.25rem;  /* 68px */
  --logo-h-top:        3rem;     /* 48px */
  --logo-h-scrolled:   2.5rem;   /* 40px */

  --tap: 2.75rem; /* 44px minimum tap target */
}

@media (min-width: 640px) {
  :root {
    --text-h1: clamp(2.5rem, 6.1vw, 5.5rem); /* 40px to 88px beside the hero photo */
  }
}

@media (min-width: 960px) {
  :root {
    --header-h-top:      10rem;   /* 160px, as in the mockup */
    --header-h-scrolled: 5.5rem;  /* 88px */
    --logo-h-top:        5rem;    /* 80px */
    --logo-h-scrolled:   3rem;    /* 48px */
  }
}


/* ---------------------------------------------------------
   2. BASE AND RESET
   --------------------------------------------------------- */
/* Stand-in for the heading font while Barlow Condensed downloads. It is
   a system font squeezed to the same width, so headings don't jump or
   re-wrap when the real font arrives. */
@font-face {
  font-family: "Barlow Condensed Fallback";
  src: local("Arial Bold"), local("Arial"), local("Roboto Bold"), local("Roboto");
  font-weight: 600 700;
  size-adjust: 68.5%;
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Stops the sticky header covering a heading after a jump link */
  scroll-padding-top: calc(var(--header-h-scrolled) + var(--space-4));
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--color-muted-light);
  background: var(--color-dark);
  overflow-wrap: break-word;
}

h1, h2, h3, p, ul, dl, dd { margin: 0; }
ul { padding: 0; list-style: none; }

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

a { color: inherit; }

button, input, textarea { font: inherit; color: inherit; }

/* Keyboard focus outline: always visible, never removed */
:focus-visible {
  outline: 3px solid var(--focus-color, var(--color-accent));
  outline-offset: 3px;
}
main:focus { outline: none; } /* main only receives focus from the skip link */

/* Skip link: hidden until a keyboard user tabs to it */
.skip-link {
  position: absolute;
  left: var(--space-4);
  top: var(--space-4);
  z-index: 200;
  padding: var(--space-3) var(--space-5);
  background: var(--color-accent);
  color: var(--color-dark);
  font-weight: 600;
  border-radius: var(--radius-button);
  transform: translateY(-300%);
}
.skip-link:focus { transform: none; }


/* ---------------------------------------------------------
   3. LAYOUT HELPERS
   --------------------------------------------------------- */
.container {
  width: 100%;
  max-width: calc(var(--content-width) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-pad); }

/* Section themes. Add class="section theme-dark" or "section theme-light". */
.theme-dark {
  background: var(--color-dark);
  color: var(--color-muted-light);
  --heading-color: var(--color-text-light);
  --eyebrow-color: var(--color-accent);
  --focus-color: var(--color-accent);
}
.theme-light {
  background: var(--color-light);
  color: var(--color-muted-dark);
  --heading-color: var(--color-text-dark);
  --eyebrow-color: var(--color-accent-ink);
  --focus-color: var(--color-accent-ink);
}



/* ---------------------------------------------------------
   4. TYPE HELPERS
   --------------------------------------------------------- */
h1, h2, h3,
.section-title,
.card__title {
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
  color: var(--heading-color, var(--color-text-light));
}

.eyebrow {
  font-size: var(--text-eyebrow);
  font-weight: 600;
  letter-spacing: 0.18em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--eyebrow-color, var(--color-accent));
}

.section-title { font-size: var(--text-h2); }
.section-title--small { font-size: var(--text-h2-small); }

.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-bottom: var(--space-7);
}
.section-intro {
  max-width: var(--measure);
  line-height: 1.55;
}

@media (min-width: 960px) {
  .section-head {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--space-8);
    margin-bottom: var(--space-8);
  }
  .section-intro { max-width: 32.5rem; }
}


/* ---------------------------------------------------------
   5. BUTTONS
   --------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem; /* 52px */
  padding: var(--space-3) 1.75rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius-button);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* Blue button: dark text, never white */
.btn--accent {
  background: var(--color-accent);
  color: var(--color-dark);
}
.btn--accent:hover { background: var(--color-accent-hover); }

/* Outline button, for dark backgrounds */
.btn--outline {
  border-color: var(--color-dark-outline);
  color: var(--color-text-light);
  font-weight: 500;
}
.btn--outline:hover {
  border-color: var(--color-text-light);
  background: var(--color-dark-panel);
}

/* Dark button, for light backgrounds */
.btn--dark {
  background: var(--color-text-dark);
  color: var(--color-text-light);
}
.btn--dark:hover { background: var(--color-muted-dark); }

.btn--small {
  min-height: var(--tap);
  padding: var(--space-2) var(--space-5);
  font-size: 0.9375rem;
}
.btn--block { width: 100%; }

.btn[disabled] {
  opacity: 0.7;
  cursor: progress;
}


/* ---------------------------------------------------------
   6. CARDS AND TICK LISTS
   --------------------------------------------------------- */
.card {
  background: var(--color-white);
  border: 1px solid var(--color-light-line);
  border-radius: var(--radius-card);
  color: var(--color-muted-dark);
  font-size: var(--text-card);
  line-height: 1.55;
}
.card__title { font-size: var(--text-h3); }

/* Dark card sitting on a light section */
.card--dark {
  background: var(--color-text-dark);
  border-color: var(--color-text-dark);
  color: var(--color-muted-light);
  --heading-color: var(--color-text-light);
  --focus-color: var(--color-accent);
}

.tick-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  font-size: clamp(1rem, 0.97rem + 0.1vw, 1.0625rem);
  line-height: 1.35;
  color: var(--color-text-dark);
}
.tick-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
.tick {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.15em;
  color: var(--color-accent-ink);
}


/* ---------------------------------------------------------
   7. HEADER AND NAVIGATION
   The header is fixed to the top of the screen. <main> gets
   matching top padding so nothing hides underneath it.
   --------------------------------------------------------- */
.site-header {
  --header-h: var(--header-h-top);
  --logo-h: var(--logo-h-top);
  --focus-color: var(--color-accent);
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  background: var(--color-dark);
  border-bottom: 1px solid var(--color-dark-line);
  color: var(--color-text-light);
  transition: height 0.2s ease;
}
/* main.js adds .is-scrolled once the page has scrolled a little */
.site-header.is-scrolled {
  --header-h: var(--header-h-scrolled);
  --logo-h: var(--logo-h-scrolled);
}

main { padding-top: var(--header-h-top); }

.site-header__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}

.site-header__logo {
  display: flex;
  align-items: center;
  min-height: var(--tap);
}
/* Logo: set the height only, width follows, so it is never stretched */
.site-header__logo img {
  height: var(--logo-h);
  width: auto;
  max-width: none;
  transition: height 0.2s ease;
}

/* --- Hamburger button (hidden on desktop) --- */
.menu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  padding: 0;
  background: none;
  border: 1px solid var(--color-dark-outline);
  border-radius: var(--radius-button);
  color: var(--color-text-light);
  cursor: pointer;
}
.menu-toggle__close { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__open { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__close { display: block; }

/* --- Mobile menu: a full-width panel under the header --- */
.site-nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: calc(100vh - var(--header-h));
  height: calc(100dvh - var(--header-h));
  overflow-y: auto;
  padding: var(--space-5) var(--gutter) var(--space-7);
  background: var(--color-dark);
  border-top: 1px solid var(--color-dark-line);
  visibility: hidden; /* also keeps the links out of the tab order while closed */
  opacity: 0;
}
.site-nav.is-open {
  visibility: visible;
  opacity: 1;
}
.site-nav__list {
  display: flex;
  flex-direction: column;
}
.site-nav__link {
  display: flex;
  align-items: center;
  min-height: 4rem;
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-text-light);
  border-bottom: 1px solid var(--color-dark-line);
}
.site-nav__cta {
  width: 100%;
  min-height: 3.25rem;
  margin-top: var(--space-6);
  font-size: 1rem;
}

/* Stop the page scrolling behind the open menu */
body.menu-open { overflow: hidden; }

/* --- Desktop navigation --- */
@media (min-width: 960px) {
  .menu-toggle { display: none; }

  .site-nav {
    position: static;
    height: auto;
    overflow: visible;
    padding: 0;
    background: none;
    border: 0;
    visibility: visible;
    opacity: 1;
  }
  .site-nav__list {
    flex-direction: row;
    align-items: center;
    gap: var(--space-2);
  }
  .site-nav__link {
    position: relative;
    min-height: var(--tap);
    padding-inline: var(--space-4);
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 400;
    text-transform: none;
    border: 0;
  }
  /* Underline on hover, and for the section you are currently reading */
  .site-nav__link::after {
    content: "";
    position: absolute;
    left: var(--space-4);
    right: var(--space-4);
    bottom: 0.4rem;
    height: 2px;
    background: var(--color-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.2s ease;
  }
  .site-nav__link:hover::after,
  .site-nav__link[aria-current]::after { transform: scaleX(1); }

  .site-nav__cta {
    width: auto;
    min-height: var(--tap);
    margin-top: 0;
    margin-left: var(--space-3);
    font-size: 0.9375rem;
  }
}


/* ---------------------------------------------------------
   8. HERO
   --------------------------------------------------------- */
.hero {
  padding-block: 2.5rem 3rem;
  /* Makes the logo link (#top) scroll right back to the very top of the page */
  scroll-margin-top: var(--header-h-top);
}

.hero__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}
.hero__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.hero__title {
  font-size: var(--text-h1);
  line-height: 0.95;
  letter-spacing: 0.01em;
}
.hero__lead {
  max-width: 33.75rem;
  font-size: var(--text-lead);
  line-height: 1.55;
}
.hero__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-2);
}
/* Slightly tall photo (8:9). If it has to be trimmed, the bottom goes first. */
.hero__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 8 / 9;
  max-height: 47.5rem; /* 760px */
  object-fit: cover;
  object-position: center top;
  border-radius: var(--radius-card);
}

/* Tablet and up: text on the left, photo on the right */
@media (min-width: 640px) {
  .hero { padding-block: var(--space-8); }
  .hero__inner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: clamp(2rem, 4.5vw, 4rem);
  }
  .hero__actions { flex-direction: row; flex-wrap: wrap; gap: var(--space-4); }
}

@media (min-width: 960px) {
  .hero__text { gap: 1.75rem; }
}


/* ---------------------------------------------------------
   9. CREDENTIALS STRIP
   --------------------------------------------------------- */
.credentials {
  background: var(--color-dark-panel);
  border-block: 1px solid var(--color-dark-line);
}
.credentials__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  padding-block: var(--space-6);
}
.credentials__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.credentials__headline {
  font-family: var(--font-heading);
  font-size: clamp(1.375rem, 1.28rem + 0.4vw, 1.625rem); /* 22px to 26px */
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-accent);
}
.credentials__label {
  font-size: var(--text-small);
  line-height: 1.4;
  color: var(--color-subtle-light);
}

@media (min-width: 960px) {
  .credentials__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-7);
    padding-block: 1.75rem;
  }
}


/* ---------------------------------------------------------
   10. SERVICES
   --------------------------------------------------------- */
.service-grid {
  display: grid;
  gap: var(--space-5);
}

/* Phones: text first, photo edge to edge along the bottom */
.service-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.service-card__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: 1.375rem 1.375rem 1.125rem;
}
.service-card__media img {
  width: 100%;
  height: 11.25rem; /* 180px */
  object-fit: cover;
}

/* Tablet and up: photo on top, two cards across */
@media (min-width: 640px) {
  .service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6);
  }
  .service-card__media { order: -1; }
  .service-card__media img { height: 12.5rem; } /* 200px */
  .service-card__text {
    gap: var(--space-3);
    padding: var(--space-5) var(--space-6) 1.75rem;
  }
}

/* Desktop: four across */
@media (min-width: 1280px) {
  .service-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --- Row of three cards under the services --- */
.capability-grid {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-7);
}
.capability-card,
.cta-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: 1.375rem;
}
.capability-card__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.capability-card__sub { line-height: 1.4; }

.cta-card { justify-content: space-between; }
.cta-card__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.cta-card .btn { width: 100%; }

@media (min-width: 640px) {
  .capability-card,
  .cta-card { padding: var(--space-7); }
  .cta-card .btn { width: auto; align-self: flex-start; }
}

@media (min-width: 960px) {
  .capability-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);
    margin-top: 2.5rem;
  }
}


/* ---------------------------------------------------------
   11. OUR WORK (PROJECTS)
   --------------------------------------------------------- */
.project-grid {
  display: grid;
  gap: var(--space-8);
}
.project-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.project-card__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 7 / 4; /* about 200px tall on a phone */
  object-fit: cover;
  border-radius: var(--radius-card);
}
/* The 3D drawing: keep the right-hand and bottom flanges in view */
.project-card__media--headworks img { object-position: right 70%; }

.project-card__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.project-card__label {
  font-size: var(--text-eyebrow);
  letter-spacing: 0.18em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--color-subtle-light);
}
.project-card__name { font-size: var(--text-h3); }
.project-card__desc {
  max-width: var(--measure);
  font-size: clamp(1rem, 0.97rem + 0.1vw, 1.0625rem);
}
/* Optional line naming the client, e.g. "Client: Alton Drilling" */
.project-card__client {
  font-size: var(--text-small);
  color: var(--color-light);
}
.project-card__client span { color: var(--color-subtle-light); }

/* Stand-in box for a project photo that hasn't arrived yet */
.project-card__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 7 / 4;
  border: 1px dashed var(--color-dark-outline);
  font-size: var(--text-small);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-subtle-light);
}

/* Tablet: photo on the left, text on the right */
@media (min-width: 640px) {
  .project-grid { gap: var(--space-7); }
  .project-card {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: center;
    gap: var(--space-7);
  }
  .project-card__media img,
  .project-card__placeholder { aspect-ratio: 4 / 3; }
  .project-card__media--headworks img { object-position: right center; }
}

/* Desktop: three across, photo on top (about 300px tall) */
@media (min-width: 960px) {
  .project-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);
    align-items: start;
  }
  /* Only two projects: two across, so there's no empty third column */
  .project-grid:has(> .project-card:nth-child(2):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .project-grid:has(> .project-card:nth-child(2):last-child) .project-card__media img {
    aspect-ratio: 3 / 2;
  }
  .project-card {
    display: flex;
    align-items: stretch;
    gap: var(--space-5);
  }
}


/* ---------------------------------------------------------
   12. ABOUT
   --------------------------------------------------------- */
.about {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}
.about__media img {
  width: 100%;
  height: clamp(17.5rem, 55vw, 26rem); /* 280px on phones */
  object-fit: cover;
  object-position: 30% center;
  border-radius: var(--radius-card);
}
.about__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.about__body > p:not(.eyebrow) { max-width: 40rem; }

.team-grid {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-2);
}
.team-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: 1.125rem var(--space-5);
  line-height: 1.4;
}
.team-card__name {
  font-size: clamp(1.5rem, 1.45rem + 0.2vw, 1.625rem); /* 24px to 26px */
  margin-bottom: var(--space-1);
}
.team-card__quals { font-size: var(--text-small); }

.about__cta {
  align-self: flex-start;
  margin-top: var(--space-2);
}

@media (min-width: 480px) {
  .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 960px) {
  .about {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: clamp(3rem, 5.5vw, 5rem);
  }
  .about__media img { height: 32.5rem; } /* 520px */
  .about__body { gap: var(--space-6); }
}


/* ---------------------------------------------------------
   13. CONTACT AND ENQUIRY FORM
   --------------------------------------------------------- */
.contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}
.contact__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.contact__lead { max-width: var(--measure); line-height: 1.55; }

/* Phones and tablets: big call / email buttons */
.contact__buttons {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-2);
}
.contact__location {
  margin-top: var(--space-2);
  text-align: center;
  color: var(--color-subtle-light);
}
.contact__details { display: none; }

/* --- Form --- */
.enquiry {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
  padding: var(--space-6) var(--space-5);
  background: var(--color-dark-panel);
  border: 1px solid var(--color-dark-line);
  border-radius: var(--radius-card);
}
.enquiry__row {
  display: grid;
  gap: 1.125rem;
}
.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.field label {
  font-size: var(--text-small);
  color: var(--color-muted-light);
}
.field__hint { color: var(--color-subtle-light); }

.field input,
.field textarea {
  width: 100%;
  padding: var(--space-3) 0.875rem;
  font-size: 1rem; /* 16px stops iPhones zooming in on focus */
  line-height: 1.4;
  color: var(--color-text-light);
  background: var(--color-dark);
  border: 1px solid var(--color-dark-outline);
  border-radius: var(--radius-button);
}
.field input { height: 3rem; }
.field textarea { min-height: 8.5rem; resize: vertical; }

.field input:hover,
.field textarea:hover { border-color: var(--color-subtle-light); }

.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: var(--color-error); }

.field__error {
  font-size: var(--text-small);
  line-height: 1.4;
  color: var(--color-error);
}

/* Spam trap: moved off screen so people never see it */
.enquiry__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.enquiry__submit { width: 100%; }

.enquiry__message {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-text-light);
  background: var(--color-dark);
  border: 1px solid var(--color-dark-outline);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-button);
}
.enquiry__message[hidden] { display: none; }
.enquiry__message--success .tick { color: var(--color-accent); margin-top: 0.2em; }
.enquiry__message--error {
  display: block;
  border-left-color: var(--color-error);
}
.enquiry__message--error[hidden] { display: none; }
.enquiry__message a { font-weight: 600; white-space: nowrap; }

@media (min-width: 640px) {
  .enquiry { padding: 2.25rem; }
  .enquiry__row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
  .enquiry__submit { width: auto; align-self: flex-start; }
}

/* Desktop: details list on the left, form on the right */
@media (min-width: 960px) {
  .contact {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: clamp(3rem, 5.5vw, 5rem);
  }
  .contact__intro { gap: 1.75rem; }
  .contact__buttons { display: none; }

  .contact__details {
    display: flex;
    flex-direction: column;
    font-size: 1.125rem;
    color: var(--color-text-light);
  }
  .contact__details > div {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-height: var(--tap);
  }
  .contact__details dt {
    width: 5.625rem;
    flex: none;
    color: var(--color-subtle-light);
  }
  .contact__details a {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
    text-decoration: none;
  }
  .contact__details a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
}


/* ---------------------------------------------------------
   14. FOOTER
   --------------------------------------------------------- */
.site-footer {
  --focus-color: var(--color-accent);
  padding-block: var(--space-6);
  background: var(--color-dark);
  border-top: 1px solid var(--color-dark-line);
  font-size: var(--text-small);
  color: var(--color-subtle-light);
}
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-6);
}
.site-footer__links {
  display: flex;
  gap: var(--space-2);
  margin-inline: calc(-1 * var(--space-3));
}
.site-footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding-inline: var(--space-3);
  text-decoration: none;
}
.site-footer__links a:hover { color: var(--color-text-light); }

@media (min-width: 960px) {
  .site-footer { padding-block: var(--space-7); }
}


/* ---------------------------------------------------------
   15. 404 PAGE
   --------------------------------------------------------- */
.not-found {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
}
.not-found__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
}
.not-found__title { font-size: var(--text-h2); }


/* ---------------------------------------------------------
   16. MOTION
   Everything that moves lives here, and only runs for people
   who haven't asked their device to reduce motion.

     a. Smooth scrolling
     b. Hero entrance when the page loads
     c. Blocks rise into place as you scroll to them
     d. Photos settle, ticks draw themselves
     e. Mobile menu links slide in
     f. Buttons press down
   --------------------------------------------------------- */
:root {
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1); /* quick start, soft landing */
}

/* Photos are clipped to their frame so they can settle without spilling out */
.hero__media,
.about__media,
.project-card__media {
  overflow: hidden;
  border-radius: var(--radius-card);
}
.service-card__media { overflow: hidden; }

@media (prefers-reduced-motion: no-preference) {
  /* a. Smooth scrolling */
  html { scroll-behavior: smooth; }

  /* b. Hero entrance: the lines of text rise in one after another, and
        the photo settles from slightly zoomed in. The photo never fades,
        so it still appears as fast as possible. */
  @keyframes rise-in {
    from { opacity: 0; transform: translateY(1.25rem); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes settle {
    from { transform: scale(1.08); }
    to   { transform: none; }
  }
  .hero__text > * { animation: rise-in 0.7s var(--ease-out) both; }
  .hero__text > :nth-child(2) { animation-delay: 0.08s; }
  .hero__text > :nth-child(3) { animation-delay: 0.16s; }
  .hero__text > :nth-child(4) { animation-delay: 0.24s; }
  .hero__media img { animation: settle 1.4s var(--ease-out) both; }

  /* The four credentials follow the hero in, left to right */
  .credentials__item { animation: rise-in 0.7s var(--ease-out) both; }
  .credentials__item:nth-child(1) { animation-delay: 0.30s; }
  .credentials__item:nth-child(2) { animation-delay: 0.38s; }
  .credentials__item:nth-child(3) { animation-delay: 0.46s; }
  .credentials__item:nth-child(4) { animation-delay: 0.54s; }

  /* c. main.js adds .reveal to blocks, then .is-visible as they scroll into
        view. Blocks that arrive together get a small stagger (--reveal-delay). */
  .reveal {
    opacity: 0;
    transform: translateY(1.75rem);
  }
  /* The transition sits on .is-visible so blocks hide instantly and only
     animate on the way in */
  .reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
    transition-delay: var(--reveal-delay, 0s);
  }

  /* d. Photos inside a revealed block settle from slightly zoomed in */
  .reveal picture img,
  picture.reveal img { transform: scale(1.08); }
  .reveal.is-visible picture img,
  picture.reveal.is-visible img {
    transform: none;
    transition: transform 1.4s var(--ease-out);
    transition-delay: var(--reveal-delay, 0s);
  }

  /* d. Ticks draw themselves, one after another down the list */
  .reveal .tick path {
    stroke-dasharray: 18;
    stroke-dashoffset: 18;
  }
  .reveal.is-visible .tick path {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 0.45s ease-out;
  }
  .reveal.is-visible .tick-list li:nth-child(1) .tick path { transition-delay: calc(var(--reveal-delay, 0s) + 0.35s); }
  .reveal.is-visible .tick-list li:nth-child(2) .tick path { transition-delay: calc(var(--reveal-delay, 0s) + 0.45s); }
  .reveal.is-visible .tick-list li:nth-child(3) .tick path { transition-delay: calc(var(--reveal-delay, 0s) + 0.55s); }
  .reveal.is-visible .tick-list li:nth-child(4) .tick path { transition-delay: calc(var(--reveal-delay, 0s) + 0.65s); }
  .reveal.is-visible .tick-list li:nth-child(5) .tick path { transition-delay: calc(var(--reveal-delay, 0s) + 0.75s); }
  .reveal.is-visible .tick-list li:nth-child(6) .tick path { transition-delay: calc(var(--reveal-delay, 0s) + 0.85s); }

  /* e. Mobile menu: links slide in one after another */
  @media (max-width: 959px) {
    .site-nav__list > li {
      opacity: 0;
      transform: translateY(0.75rem);
      transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out);
    }
    .site-nav.is-open .site-nav__list > li { opacity: 1; transform: none; }
    .site-nav.is-open .site-nav__list > li:nth-child(2) { transition-delay: 0.04s; }
    .site-nav.is-open .site-nav__list > li:nth-child(3) { transition-delay: 0.08s; }
    .site-nav.is-open .site-nav__list > li:nth-child(4) { transition-delay: 0.12s; }
    .site-nav.is-open .site-nav__list > li:nth-child(5) { transition-delay: 0.16s; }
  }

  /* f. Buttons press down slightly when tapped or clicked */
  .btn { transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease; }
  .btn:active { transform: translateY(1px) scale(0.985); }

  /* Visibility flips instantly on open (so the first link can take focus)
     and waits for the fade to finish on close */
  .site-nav { transition: opacity 0.15s ease, visibility 0s 0.15s; }
  .site-nav.is-open { transition: opacity 0.15s ease, visibility 0s; }
}

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