/* ==========================================================================
   Lake Life Tech — main.css
   The only stylesheet. Every page loads this one file.

   Todd: the custom properties in section 1 are safe to change — colours,
   fonts, spacing. Everything below section 1 is layout. Leave it alone.
   ========================================================================== */


/* 1. Custom properties
   ========================================================================== */

:root {

  /* Brand. Two inks only — a red and a near-black. No third colour. */
  --red:        #D9432A;
  --red-dark:   #B8351F;   /* hover only */
  --red-light:  #E8825F;   /* small labels on ink */
  --ink:        #1C1C1A;
  --ground:     #F3F2F2;
  --white:      #FFFFFF;

  /* Warm greys. All tints of the ink above — not a third colour. */
  --ink-80:     #4A4644;
  --ink-70:     #5C5954;
  --ink-55:     #78756F;
  --ink-50:     #8D8A86;
  --ink-35:     #B5B1AB;
  --ink-30:     #C9C5BF;
  --ink-15:     #E4E2DE;
  --ink-10:     #E8E5E1;

  /* Type */
  --font-body: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Layout */
  --pad:       20px;   /* page gutter — grows at the breakpoints below */
  --maxw:      1400px; /* content stops widening past this */
  --tap:       44px;   /* minimum tap target */
  --header-h:  74px;   /* header height, used to clear the hero content */
  --rule:      2px;    /* divider thickness */
}

@media (min-width: 768px) {
  :root { --pad: 32px; --header-h: 84px; }
}

@media (min-width: 1024px) {
  :root { --pad: 44px; --header-h: 98px; }
}


/* 2. Reset and base
   ========================================================================== */

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

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

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, p, ul, figure { margin: 0; }

ul { padding: 0; list-style: none; }

a { color: var(--red); text-decoration: none; }
a:hover { color: var(--red-dark); }

/* Zero corner radius everywhere. This is a brand rule, not a preference. */
button, input, textarea, select, .btn { border-radius: 0; }

button { font: inherit; color: inherit; cursor: pointer; }

/* Visible focus on everything interactive. */
:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

/* On ink or photography the red ring is hard to see — switch to white. */
.site-header :focus-visible,
.site-footer :focus-visible,
.hero :focus-visible,
.aerial__panel :focus-visible {
  outline-color: var(--white);
}

/* Opts a word out of an uppercased run. Some names are not acronyms and must
   keep their own casing — "PCs" set in all caps becomes "PCS", which reads as
   an initialism. Wrap the word, not the whole line. */
.keep-case { text-transform: none; }

/* A line break that only applies once there is room for it. On a narrow screen
   a forced break leaves orphan words, so let the text flow instead. */
.br-wide { display: none; }

@media (min-width: 768px) {
  .br-wide { display: inline; }
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: var(--pad);
  top: -100px;
  z-index: 100;
  padding: 14px 20px;
  background: var(--red);
  color: var(--white);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.skip-link:focus {
  top: 12px;
  color: var(--white);
}


/* 3. Shared pieces
   ========================================================================== */

/* Section padding + max width. */
.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

/* Buttons. Flush-left label, never centred — brand rule. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  min-height: var(--tap);
  padding: 13px 22px;
  border: 0;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-align: left;
  text-transform: uppercase;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.btn-primary {
  background: var(--red);
  color: var(--white);
}
.btn-primary:hover {
  background: var(--red-dark);
  color: var(--white);
}

/* Outlined button, for use on photography. */
.btn-ghost {
  background: transparent;
  color: var(--white);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.65);
}
.btn-ghost:hover {
  background: var(--white);
  color: var(--ink);
}

/* Small uppercase label used above headings. */
.eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1.4;
  text-transform: uppercase;
}

/* Phone reveal.
   The number is not in the markup at all — see js/main.js. The control starts
   as "Show number" and only becomes a dial link once somebody clicks it. */
.phone {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: var(--tap);
}
.phone__label { font-weight: 700; }
.phone.is-revealed .phone__label {
  font-size: 20px;
  letter-spacing: -0.01em;
}


/* 4. Header and navigation
   ========================================================================== */

/* The header sits over the top of the hero photo on every page. */
.site-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 20;
}

.site-header__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  min-height: var(--header-h);
  padding: 0 var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* Logo: the supplied badge artwork. The wave is part of the image — never
   recolour it, never sample a colour out of it, never rebuild it in CSS. */
.logo { display: block; color: var(--white); }
.logo:hover { color: var(--white); }

/* The badge sits inside the bar, vertically centred on the same line as the
   nav links and the Contact button — those are the two red shapes at either
   end and they have to agree. Centring comes from align-items on the row, so
   the clearance above and below is simply (--header-h - badge) / 2:
       54px badge in a 74px bar -> 10px
       60px badge in an 84px bar -> 12px
       70px badge in a 98px bar -> 14px */
.logo__img {
  height: 54px;
  width: auto;
}

@media (min-width: 768px)  { .logo__img { height: 60px; } }
@media (min-width: 1024px) { .logo__img { height: 70px; } }

/* Hamburger. Hidden from 768px up. */
.nav-toggle {
  width: var(--tap);
  height: var(--tap);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 0 10px;
  border: 0;
  background: transparent;
}
.nav-toggle__bar {
  display: block;
  height: 2px;
  background: var(--white);
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile: nav is a panel that drops out of the header. */
.site-nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: none;
  flex-direction: column;
  padding: 8px var(--pad) 24px;
  background: var(--ink);
}
.site-nav.is-open { display: flex; }

.site-nav a {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  padding: 8px 0;
  color: var(--white);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.site-nav a:hover { color: var(--red-light); }

.site-nav .btn {
  margin-top: 18px;
  border-bottom: 0;
  color: var(--white);
  letter-spacing: 0.1em;
}
.site-nav .btn:hover { color: var(--white); }

/* Marks the page you are on. Home has no nav item, so nothing carries it here —
   the service pages and About will. */
.site-nav a[aria-current="page"] { color: var(--red-light); }

@media (min-width: 768px) {
  .nav-toggle { display: none; }

  .site-nav {
    position: static;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
    padding: 0;
    background: transparent;
  }
  /* 768px is still a touch screen, so the hit area stays 44px even though the
     label is only 13px tall. The header has the room. */
  .site-nav a {
    position: relative;
    min-height: var(--tap);
    padding: 0;
    font-size: 13px;
    border-bottom: 0;
  }
  /* The current-page underline is drawn against the label, not the bottom of
     the 44px hit area, or it would float well below the text. */
  .site-nav a[aria-current="page"] { color: var(--white); }
  .site-nav a[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: calc(50% + 11px);
    height: 2px;
    background: var(--red);
  }
  .site-nav .btn {
    margin-top: 0;
    padding: 12px 22px;
    border-bottom: 0;
  }
}

@media (min-width: 1024px) {
  .site-nav { gap: 28px; }
}


/* 5. Hero
   ========================================================================== */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 600px;
  padding-top: calc(var(--header-h) + 24px);
  overflow: hidden;
  background: #1B2733; /* holds the space while the photo loads */
}

@media (min-width: 768px) {
  .hero { min-height: 640px; }
}

@media (min-width: 1024px) {
  .hero {
    aspect-ratio: 16 / 9;
    min-height: 640px;
    max-height: 860px;
  }
}

.hero__media {
  position: absolute;
  inset: 0;
}
/* <picture> is an inline wrapper with no size of its own — without this the
   img has no parent height to resolve against and the photo will not fill. */
.hero__media picture {
  display: block;
  width: 100%;
  height: 100%;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Darkens the photo so white type stays readable over it.
   On a narrow screen the copy sits in the middle of the frame, right on the
   sunrise, so the scrim has to carry more weight there. From 1024px the copy
   drops to the bottom over dark water and the gradient can open back up. */
.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(18, 24, 30, 0.70) 0%,
    rgba(18, 24, 30, 0.34) 20%,
    rgba(18, 24, 30, 0.56) 44%,
    rgba(18, 24, 30, 0.76) 72%,
    rgba(18, 24, 30, 0.86) 100%
  );
}

@media (min-width: 1024px) {
  .hero__scrim {
    background: linear-gradient(
      to bottom,
      rgba(18, 24, 30, 0.72) 0%,
      rgba(18, 24, 30, 0.28) 26%,
      rgba(18, 24, 30, 0.10) 44%,
      rgba(18, 24, 30, 0.62) 84%,
      rgba(18, 24, 30, 0.82) 100%
    );
  }
}

.hero__inner {
  position: relative;
  z-index: 10;
  max-width: var(--maxw);
  width: 100%;
  margin: 0 auto;
  padding: 40px var(--pad);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
}

@media (min-width: 1024px) {
  .hero__inner {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 60px;
    padding-bottom: 44px;
  }
}

.hero__copy {
  display: flex;
  flex-direction: column;
  gap: 18px;
  color: var(--white);
}

@media (min-width: 1024px) {
  .hero__copy { max-width: 70%; }
}

.hero__eyebrow {
  color: var(--white);
  opacity: 0.85;
  letter-spacing: 0.14em;
}

@media (min-width: 768px) {
  .hero__eyebrow { letter-spacing: 0.2em; }
}

.hero h1 {
  font-size: clamp(34px, 7vw, 62px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.02;
  text-wrap: pretty;
}

.hero__lede {
  max-width: 600px;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink-10);
  text-wrap: pretty;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding-top: 6px;
}

.hero .phone { color: var(--white); }
.hero .phone:hover { color: var(--white); }

/* Google rating badge. Sits opposite the headline on wide screens. */
.rating {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 22px;
  background: rgba(28, 28, 26, 0.86);
  color: var(--white);
}
.rating:hover { color: var(--white); }

.rating__score {
  display: flex;
  align-items: center;
  gap: 10px;
}
.rating__number {
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
}
.rating__stars {
  display: flex;
  gap: 2px;
  color: var(--red-light);
}
.rating__stars svg { width: 15px; height: 15px; }

.rating__meta {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-35);
}

@media (min-width: 1024px) {
  .rating { flex: none; }
}


/* 6. Service cards
   ========================================================================== */

.services {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--rule);
  background: var(--ink-15);
  border-bottom: var(--rule) solid var(--ink-15);
}

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

@media (min-width: 1024px) {
  .services { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.service {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 32px var(--pad);
  background: var(--white);
  color: var(--ink);
  transition: background-color 0.15s ease;
}
.service:hover { background: var(--ground); color: var(--ink); }

.service__icon {
  width: 30px;
  height: 30px;
  color: var(--red);
}

.service__name {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.service__text {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-70);
  text-wrap: pretty;
}

@media (min-width: 1024px) {
  .service { padding: 38px 32px; }
}


/* 7. Aerial band
   ========================================================================== */

.aerial {
  position: relative;
  background: #1B2733;
  border-bottom: var(--rule) solid var(--ink-15);
}

.aerial__media { position: relative; }
.aerial__media img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}

.aerial__panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 32px var(--pad);
  background: var(--ink);
  color: var(--white);
}

.aerial__eyebrow { color: var(--red-light); letter-spacing: 0.2em; }

.aerial h2 {
  font-size: clamp(26px, 5vw, 38px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.08;
  text-wrap: pretty;
}

.aerial__text {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-30);
  text-wrap: pretty;
}

.aerial__specs {
  display: flex;
  gap: 32px;
  padding-top: 4px;
}
.aerial__spec { display: flex; flex-direction: column; gap: 2px; }
.aerial__price {
  font-size: 26px;
  font-weight: 800;
  line-height: 1.1;
}
.aerial__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-50);
}

.aerial .btn {
  align-self: flex-start;
  margin-top: 6px;
}

/* From 1024px the panel sits inside the photo, flush left, as in the mockup. */
@media (min-width: 1024px) {
  .aerial {
    position: relative;
    aspect-ratio: 2.5;
    max-height: 620px;
    overflow: hidden;
  }
  .aerial__media { position: absolute; inset: 0; }
  .aerial__media img { height: 100%; }

  .aerial__panel {
    position: relative;
    z-index: 10;
    width: min(440px, 44%);
    height: 100%;
    justify-content: center;
    gap: 16px;
    padding: 44px 40px;
    background: rgba(28, 28, 26, 0.93);
  }
}


/* 8. Trust strip
   ========================================================================== */

.trust {
  background: var(--ground);
}

.trust__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 40px var(--pad);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.trust h2 {
  max-width: 640px;
  font-size: clamp(24px, 4.4vw, 38px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-wrap: pretty;
}

.trust__cards {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-70);
}

@media (min-width: 1024px) {
  .trust__inner { padding: 56px var(--pad); }
}


/* 9. Footer
   ========================================================================== */

.site-footer {
  background: var(--ink);
  color: var(--ink-35);
}

.site-footer__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 48px var(--pad) 40px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
}

/* Same logo, white version on the ink footer. */
.site-footer__logo { width: 200px; height: auto; }

.footer-cols {
  display: flex;
  flex-wrap: wrap;
  gap: 32px 56px;
  font-size: 14px;
  line-height: 1.7;
}

.footer-col { display: flex; flex-direction: column; gap: 4px; }

.footer-col__head {
  margin-bottom: 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-55);
}

/* Full 44px hit area on a phone. Tightens back up once there is a mouse. */
.footer-col a {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  color: var(--ink-35);
}
.footer-col a:hover { color: var(--white); }

@media (min-width: 1024px) {
  .footer-col a { display: inline-flex; min-height: 0; }
}

.site-footer .phone { color: var(--ink-35); }
.site-footer .phone:hover { color: var(--white); }
.site-footer .phone.is-revealed .phone__label { font-size: 16px; }

.footer-note {
  width: 100%;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-55);
}

@media (min-width: 768px) {
  .site-footer__inner {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 48px;
    padding: 64px var(--pad) 48px;
  }
  .site-footer__logo { width: 240px; }
}


/* 10. Sub-hero trust strip (home)
   ========================================================================== */

.subhero {
  background: var(--ink);
  color: var(--ink-35);
}

/* One fact per line on a phone. The dot separators only make sense once the
   whole strip fits on one row, otherwise they wrap to the start of a line. */
.subhero__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 18px var(--pad);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.subhero__sep { display: none; color: var(--ink-55); }

@media (min-width: 1024px) {
  .subhero__inner {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 20px;
  }
  .subhero__sep { display: inline; }
}

.subhero a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tap);
  color: var(--white);
}
.subhero a:hover { color: var(--red-light); }

/* Back to inline once the strip is a single row on a wide screen. */
@media (min-width: 1024px) {
  .subhero a { min-height: 0; }
}

.subhero__stars {
  display: inline-flex;
  gap: 2px;
  color: var(--red-light);
  vertical-align: -1px;
}
.subhero__stars svg { width: 13px; height: 13px; }


/* 11. Inner page header
   ========================================================================== */

/* Short photo header. Same idea as the hero, less of it. */
.page-head {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 260px;
  padding-top: calc(var(--header-h) + 16px);
  overflow: hidden;
  background: var(--ink);
}

@media (min-width: 768px) {
  .page-head { min-height: 300px; }
}

.page-head__media { position: absolute; inset: 0; }
.page-head__media picture { display: block; width: 100%; height: 100%; }
.page-head__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-head__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(18, 24, 30, 0.82) 0%,
    rgba(18, 24, 30, 0.58) 30%,
    rgba(18, 24, 30, 0.42) 62%,
    rgba(18, 24, 30, 0.68) 100%
  );
}

.page-head__inner {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 28px var(--pad);
  color: var(--white);
}

.page-head h1 {
  font-size: clamp(30px, 6vw, 48px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.02;
  text-wrap: pretty;
}

/* About and the two newer pages use a plain ink bar — no photo. */
.page-head--plain { min-height: 0; background: var(--ink); }
.page-head--plain .page-head__inner { padding-top: 20px; padding-bottom: 36px; }

/* The line under an inner-page H1. --ink-10 rather than --ink-30: on the ink
   bar either reads fine, but over a photo the darker grey falls to 3.3:1
   against the brightest part of the image, under the 4.5:1 floor for body
   text. This clears it at 4.5:1 and still sits below the white H1. */
.page-head__dek {
  max-width: 640px;
  margin-top: 14px;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink-10);
  text-wrap: pretty;
}


/* 12. Service tab row
   ========================================================================== */

/* Looks like tabs, is actually four documents. Real links, not anchors. */
.tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--rule);
  background: var(--ink-15);
  border-bottom: var(--rule) solid var(--ink-15);
}

@media (min-width: 768px) {
  .tabs { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.tab {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--tap);
  padding: 16px 18px;
  background: var(--ground);
  border-top: 4px solid transparent;
  color: var(--ink-70);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background-color 0.15s ease;
}
.tab:hover { background: var(--white); color: var(--ink); }

.tab svg { width: 20px; height: 20px; flex: none; color: var(--ink-50); }

.tab[aria-current="page"] {
  background: var(--white);
  border-top-color: var(--red);
  color: var(--ink);
}
.tab[aria-current="page"] svg { color: var(--red); }

@media (min-width: 1024px) {
  .tab { padding: 20px 22px; font-size: 13px; }
}


/* 13. Content bands
   ========================================================================== */

.band { background: var(--white); }
.band--ground { background: var(--ground); }
.band--ink { background: var(--ink); color: var(--ink-30); }

.band__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 44px var(--pad);
}

@media (min-width: 1024px) {
  .band__inner { padding: 64px var(--pad); }
}

.band + .band { border-top: var(--rule) solid var(--ink-15); }

/* A readable column of body copy. */
.prose { max-width: 680px; }

.prose > * + * { margin-top: 18px; }

.prose h2 {
  font-size: clamp(24px, 4.4vw, 38px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.12;
  text-wrap: pretty;
}

.prose h3 {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.prose p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-80);
  text-wrap: pretty;
}

.band--ink .prose h2, .band--ink .prose h3 { color: var(--white); }
.band--ink .prose p { color: var(--ink-30); }

.prose .eyebrow { color: var(--red); }

/* A link sitting on its own line in body copy still needs a real tap target.
   Padding rather than flex — a flex container would eat the space between the
   arrow span and the words. */
.link-standalone {
  display: inline-block;
  padding: 11px 0;
}

/* The pulled-aside caveat on the recovery page. */
.aside-note {
  border-left: 4px solid var(--red);
  padding: 12px 0 12px 16px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-70);
}

/* Text on one side, photo on the other. Stacks on a phone. */
.split { display: grid; grid-template-columns: 1fr; }

/* Grey variant. The IT teaser on Services.html uses it so that block reads as a
   different category of work from the repair cards above it — on white it just
   merges into the page. */
.split--ground { background: var(--ground); }

.split__text {
  padding: 40px var(--pad);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}

.split__media img {
  width: 100%;
  height: 260px;
  object-fit: cover;
}

@media (min-width: 1024px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split__text { padding: 64px 44px; }
  .split__media { height: 100%; }
  .split__media img { height: 100%; min-height: 420px; }
}


/* 14. Feature list (Services page)
   ========================================================================== */

.features {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--rule);
  /* 44px, the same step the bands use for their own vertical padding. 28px sat
     too close to the paragraph above and read as part of it. Matched below as
     well: both pages that use this grid have body copy directly after it, and
     with 44px above and nothing below the grid looked joined to the wrong
     paragraph. */
  margin: 44px 0;
  background: var(--ink-15);
}

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

.feature {
  padding: 26px 24px;
  background: var(--white);
}

.feature__name {
  display: block;
  margin-bottom: 8px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.feature__text {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-70);
  text-wrap: pretty;
}


/* 15. CTA band
   ========================================================================== */

.cta {
  background: var(--ground);
  border-top: var(--rule) solid var(--ink-15);
}

.cta__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 36px var(--pad);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}

.cta h2 {
  max-width: 560px;
  font-size: clamp(21px, 3.6vw, 30px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-wrap: pretty;
}

/* Heading plus body copy, where the band carries both. */
.cta__text {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 620px;
}

.cta__text p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-80);
  text-wrap: pretty;
}

.cta__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

/* The phone reveal on a light background needs ink, not white. */
.cta .phone,
.band .phone { color: var(--ink); }
.cta .phone:hover,
.band .phone:hover { color: var(--red); }

.btn-outline {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--ink);
}
.btn-outline:hover { background: var(--ink); color: var(--white); }

/* Closing band on the home page — same shape, ink instead of ground. */
.cta--ink { background: var(--ink); border-top: 0; }
.cta--ink h2 { color: var(--white); }
.cta--ink .cta__text p { color: var(--ink-30); }
.cta--ink .phone { color: var(--white); }
.cta--ink .phone:hover { color: var(--red-light); }
.cta--ink .btn-outline {
  color: var(--white);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.65);
}
.cta--ink .btn-outline:hover { background: var(--white); color: var(--ink); }


/* 16. Contact page
   ========================================================================== */

/* Contact hero: the photo panel, same as every other page's header treatment.
   The badge is visible here exactly as it is everywhere else. */
.lockup-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  padding: calc(var(--header-h) + 32px) var(--pad) 48px;
  overflow: hidden;
  background: var(--ink);
}

@media (min-width: 768px) {
  .lockup-hero { min-height: 400px; }
}

.lockup-hero__media { position: absolute; inset: 0; }
.lockup-hero__media picture { display: block; width: 100%; height: 100%; }
.lockup-hero__media img { width: 100%; height: 100%; object-fit: cover; }

.lockup-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(18, 24, 30, 0.66) 0%,
    rgba(18, 24, 30, 0.34) 45%,
    rgba(18, 24, 30, 0.46) 100%
  );
}

/* Reverse lockup with the red sun — the only version allowed on photography.
   Never below 140px wide. */
.lockup-hero__mark {
  position: relative;
  z-index: 10;
  width: min(340px, 72vw);
  min-width: 160px;
  height: auto;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--rule);
  background: var(--ink-15);
}

@media (min-width: 1024px) {
  .contact-grid { grid-template-columns: 1fr 1fr; }
}

.contact-form,
.contact-info {
  padding: 40px var(--pad);
  background: var(--white);
}
.contact-info { background: var(--ground); }

@media (min-width: 1024px) {
  .contact-form, .contact-info { padding: 64px 44px; }
}

.contact-form h2,
.contact-info h2 {
  margin-bottom: 22px;
  font-size: clamp(24px, 4vw, 32px);
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* Shown after the form redirects back. Hidden until then. */
.form-status {
  margin-bottom: 24px;
  padding: 14px 0 14px 16px;
  border-left: 4px solid var(--red);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
}
.form-status[hidden] { display: none; }

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.field label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-70);
}

.input {
  width: 100%;
  min-height: var(--tap);
  padding: 12px 14px;
  border: 2px solid var(--ink-15);
  background: var(--white);
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ink);
}
.input:focus { border-color: var(--ink); }
textarea.input { min-height: 132px; resize: vertical; }

/* Honeypot. Real people never see it; bots fill it in. No captcha. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.info-block { margin-bottom: 30px; }

.info-block__head {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-55);
}

.info-block p,
.info-block address {
  font-size: 17px;
  font-style: normal;
  line-height: 1.5;
  color: var(--ink);
}

.info-block--rule {
  padding-top: 22px;
  border-top: var(--rule) solid var(--ink-15);
}
.info-block--rule p { font-size: 15px; color: var(--ink-70); }

/* Any link in this column is a real tap target. Padding rather than flex:
   a flex container turns each child into an item and throws away the
   whitespace between them, which ran "13 reviews" into "on Google". */
.info-block a:not(.btn) {
  display: inline-block;
  padding: 11px 0;
}


/* 17. Motion
   ========================================================================== */

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