/* ==========================================================================
   A1A Surveying — Page sections
   Header, hero, stat band, services, project types, about, approach,
   contact, footer. One block per section, in page order.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fixed plat backdrop

   One drawing behind the whole page, in two stacked layers:

     sharp   the hero framing — masked to the right side, crisp. Fades out.
     blur    the same drawing full-bleed and soft. Fades in.

   js/main.js cross-fades between them and scales them up over the height of
   the hero, so the sketch appears to grow, soften, and settle in behind the
   page as you scroll. Both layers are position: fixed, so nothing has to line
   up with page content — it renders the same in every browser and at every
   size. Only opacity and transform are animated, which the GPU handles; the
   blur radius is set once and never changes.

   Section grounds above it are thin washes (see --paper-veil in tokens.css),
   which is what lets the drawing stay present down the whole page.
   -------------------------------------------------------------------------- */

.backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--paper);
}

.backdrop__layer {
  position: absolute;
  inset: -8%;                 /* slack, so scaling never exposes an edge */
  /* The plat drawing at full quality — no lossy compression anywhere in the
     chain. The .webp is a LOSSLESS encode of the .png: identical pixels, about
     900 KB lighter. The .png is the fallback for anything that cannot do WebP.
     Do not re-encode either one to save weight; this artwork gets scaled up
     and blurred, which makes JPEG artifacts and any resampling very visible. */
  background-image: url("../assets/hero-plat.png");
  background-image: -webkit-image-set(url("../assets/hero-plat.webp") type("image/webp"), url("../assets/hero-plat.png") type("image/png"));
  background-image: image-set(url("../assets/hero-plat.webp") type("image/webp"), url("../assets/hero-plat.png") type("image/png"));
  background-repeat: no-repeat;
  transform-origin: 70% 45%;
  will-change: transform, opacity;
}

/* Sharp layer — the hero look. Masked to a soft ellipse over on the right so
   the headline always sits on clean paper. */
.backdrop__sharp {
  background-position: right center;
  background-size: contain;
  -webkit-mask-image: radial-gradient(ellipse 46% 60% at 74% 50%, #000 0%, rgba(0,0,0,.9) 42%, rgba(0,0,0,.45) 66%, rgba(0,0,0,0) 82%);
  mask-image: radial-gradient(ellipse 46% 60% at 74% 50%, #000 0%, rgba(0,0,0,.9) 42%, rgba(0,0,0,.45) 66%, rgba(0,0,0,0) 82%);
}

/* Soft layer — full bleed. Starts invisible and fades up as you scroll. */
.backdrop__blur {
  background-position: center;
  background-size: cover;
  filter: blur(var(--backdrop-blur));
  opacity: 0;
}

/* Blur is the one expensive part. Ease off on small screens, where the layer
   is nearly full-viewport and the GPU has less to give. */
@media (max-width: 720px) {
  :root { --backdrop-blur: 22px; --backdrop-scale: 1.2; --backdrop-opacity: 1; }
}

/* Page content rides above the backdrop. */
.site-header,
main,
.site-footer { position: relative; z-index: 1; }


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

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(250, 246, 238, .95);
  border-bottom: 1px solid var(--hair-soft);
}

/* Progressive enhancement — only go translucent where blur is supported. */
@supports ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
  .site-header {
    background: rgba(250, 246, 238, .82);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
}

.site-header__bar {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  min-height: 78px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.site-header__logo { display: inline-flex; align-items: center; flex: none; }
.site-header__logo img { display: block; height: 56px; width: auto; }

.site-nav { display: flex; flex-wrap: wrap; gap: var(--space-7); margin: 0 auto; }

.site-nav a {
  font-size: 16px;
  color: var(--ink-body);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.site-nav a:hover,
.site-nav a[aria-current="true"] { color: var(--orange-600); border-bottom-color: var(--orange-600); }

.site-header__cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: none;
  font-size: 12px;
  font-weight: var(--weight-semibold);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
}
.site-header__cta:hover { color: var(--orange-600); }

/* Hamburger — hidden until the nav no longer fits. */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  margin-left: auto;
  flex: none;
  background: transparent;
  border: 1px solid var(--hair);
  border-radius: var(--r-sm);
  color: var(--ink);
  cursor: pointer;
  transition: var(--transition-control);
}
.nav-toggle:hover { border-color: var(--ink); }
.nav-toggle__bar {
  display: block;
  width: 18px; height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--dur-base) var(--ease), opacity var(--dur-fast) var(--ease);
}
.nav-toggle__bars { display: flex; flex-direction: column; gap: 4px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(5.5px) 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(-5.5px) rotate(-45deg); }

@media (max-width: 940px) {
  .nav-toggle { display: inline-flex; }
  .site-header__logo img { height: 46px; }

  /* The nav and header CTA collapse into a drop panel. */
  .site-header__menu {
    display: none;
    width: 100%;
    padding: var(--space-4) 0 var(--space-6);
    border-top: 1px solid var(--hair-soft);
  }
  .site-header__bar { flex-wrap: wrap; min-height: 68px; }
  .site-header[data-nav-open="true"] .site-header__menu { display: block; }

  .site-nav { flex-direction: column; gap: 0; margin: 0; }
  .site-nav a { padding: 13px 0; font-size: 18px; border-bottom: 1px solid var(--hair-soft); }
  .site-nav a:hover, .site-nav a[aria-current="true"] { border-bottom-color: var(--hair-soft); }

  .site-header__cta { margin-top: var(--space-5); }
}

/* Wide screens keep the nav and CTA inline. */
@media (min-width: 941px) {
  .site-header__menu {
    display: contents;   /* children participate in the flex bar directly */
  }
}


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

.hero { position: relative; overflow: hidden; }

/* Scrim: guarantees text contrast over the artwork on the left. */
.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    var(--paper) 0%, var(--paper) 28%,
    rgba(250,246,238,.9) 42%, rgba(250,246,238,.5) 55%,
    rgba(250,246,238,.1) 70%, rgba(250,246,238,0) 82%);
}

.hero__inner {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: var(--space-9);
  align-items: center;
  min-height: 620px;
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
}

.hero__copy { max-width: 640px; }

.hero__eyebrow {
  display: block;
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--aqua-700);
  margin: 0;
}

.hero__title {
  font-size: clamp(42px, 6.2vw, 88px);
  line-height: 1.02;
  letter-spacing: -.015em;
  max-width: 12ch;
  margin: 22px 0 0;
}

.hero__lede {
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.62;
  color: #55503F;
  max-width: 46ch;
  margin: 26px 0 34px;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }

.hero__place {
  margin: 40px 0 0;
  font-size: 13px;
  font-weight: var(--weight-medium);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.hero__motto {
  margin-top: var(--space-7);
  padding-left: 16px;
  border-left: 2px solid var(--aqua-600);
}
.hero__motto small {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--aqua-700);
}
.hero__motto strong {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: clamp(21px, 2vw, 25px);
  color: var(--ink);
  margin-top: 4px;
}

/* Right-hand column: an empty spacer that reserves room for the artwork. */
.hero__stage { min-height: 360px; }

/* Service word strip under the hero. */
.hero__strip {
  position: relative;
  z-index: 3;
  border-top: 1px solid var(--hair-soft);
  background: rgba(250, 246, 238, .78);
}
.hero__strip-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-6);
  padding-top: 22px;
  padding-bottom: 22px;
}
.hero__strip span {
  font-family: var(--font-display);
  font-size: clamp(19px, 2.2vw, 26px);
  color: var(--ink);
}
.hero__strip .dot {
  width: 5px; height: 5px;
  background: var(--ink);
  border-radius: 50%;
  flex: none;
}

/* Below the two-column breakpoint the artwork sits behind the copy, so it
   drops back far enough to stay out of the way of the text. */
@media (max-width: 900px) {
  .hero__inner { min-height: 0; padding-top: var(--space-10); padding-bottom: var(--space-9); }
  .hero__stage { display: none; }

  /* Stacked layout puts the copy over the artwork, so the scrim does the
     heavy lifting and the drawing drops well back. */
  .backdrop__sharp { opacity: .34; }
  .hero__scrim {
    background: linear-gradient(180deg,
      rgba(250,246,238,.86) 0%, rgba(250,246,238,.72) 45%, rgba(250,246,238,.94) 100%);
  }
}


/* --------------------------------------------------------------------------
   Stat band
   -------------------------------------------------------------------------- */

.stats {
  border-top: 1px solid var(--hair-soft);
  border-bottom: 1px solid var(--hair-soft);
  background: var(--paper-veil);
}

.stats__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: var(--space-8);
  padding: var(--space-9) 0;
}

.stat__value {
  display: block;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(38px, 4.6vw, 64px);
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.stat__label {
  display: block;
  margin: 10px 0 0;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}


/* --------------------------------------------------------------------------
   Services — slide-up cards
   -------------------------------------------------------------------------- */

.svc-grid { margin-top: var(--space-10); }

.svc {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 300px;
  background: var(--paper-card);
  border: 1px solid var(--hair-soft);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
  contain: paint;   /* keeps the panel's repaint inside this card */
}
.svc:hover { border-color: rgba(46, 150, 175, .45); box-shadow: var(--shadow-md); }

/* Faint plat texture washed behind each card face. Kept low enough that it
   reads as paper grain — at higher opacity the lettering in the source
   drawings becomes legible and competes with the card's own text. */
.svc__face {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  opacity: .07;
  pointer-events: none;
}
.svc--boundary  .svc__face { background-image: url("../assets/plat-boundary.jpg"); background-position: 46% 44%; background-size: 260%; }
.svc--topo      .svc__face { background-image: url("../assets/plat-topo.jpg");     background-position: 58% 46%; background-size: 280%; }
.svc--construct .svc__face { background-image: url("../assets/plat-site.jpg");     background-position: 34% 52%; background-size: 270%; }
.svc--asbuilt   .svc__face { background-image: url("../assets/plat-site.jpg");     background-position: 72% 40%; background-size: 300%; }
.svc--elevation .svc__face { background-image: url("../assets/plat-topo.jpg");     background-position: 30% 68%; background-size: 320%; }
.svc--specialty .svc__face { background-image: url("../assets/plat-boundary.jpg"); background-position: 12% 30%; background-size: 300%; }

.svc__front {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 28px;
}

.svc__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px; height: 54px;
  flex: none;
  border-radius: 15px;
  background: var(--aqua-50);
  border: 1px solid var(--aqua-200);
  color: var(--aqua-700);
}

.svc__title {
  margin: auto 0 0;
  font-size: clamp(26px, 2.4vw, 32px);
  line-height: 1.1;
}

/* The "Details" button is the real control — it carries the accessible name,
   the focus ring, and aria-expanded. js/main.js also forwards a click on any
   blank part of the card to it, so the whole card is a tap target on touch. */
.svc__toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  margin-top: 16px;
  padding: 0;
  font-family: inherit;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease);
}
.svc:hover .svc__toggle { color: var(--ink); }
.svc__toggle:focus-visible { outline: 2px solid var(--orange-500); outline-offset: 4px; border-radius: 3px; }

/* Only advertise the card as clickable once the script that handles the
   click is running (main.js sets data-enhanced on the grid). */
.svc-grid[data-enhanced="true"] .svc { cursor: pointer; }


/* --------------------------------------------------------------------------
   Project types
   -------------------------------------------------------------------------- */

.projects__head {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: var(--space-9);
  align-items: end;
}
.projects__grid { margin-top: var(--space-10); }

.ptype {
  background: var(--paper-card);
  border: 1px solid var(--hair-soft);
  border-radius: var(--r-md);
  padding: var(--space-7);
}
.ptype--aqua   { box-shadow: inset 0 3px 0 var(--aqua-600); }
.ptype--navy   { box-shadow: inset 0 3px 0 var(--navy-600); }
.ptype--orange { box-shadow: inset 0 3px 0 var(--orange-500); }

.ptype h3 { margin: 0 0 12px; font-size: clamp(28px, 2.6vw, 34px); line-height: 1.05; }
.ptype p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink-muted); }


/* --------------------------------------------------------------------------
   About — the company's own words
   -------------------------------------------------------------------------- */

.about { position: relative; overflow: hidden; }

.about__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: var(--space-10);
  align-items: start;
}

/* The opening line gets display type — it is the part people respond to. */
.about__eyebrow { margin-bottom: var(--space-6); }

.about__lead {
  font-family: var(--font-display);
  font-size: clamp(25px, 2.9vw, 38px);
  line-height: 1.24;
  letter-spacing: -.012em;
  color: var(--ink);
  margin: 0 0 var(--space-6);
  max-width: 22ch;
}

.about__body {
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.72;
  color: var(--ink-muted);
  max-width: 58ch;
}
.about__body p + p { margin-top: var(--space-5); }

.about__signoff {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--hair-soft);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--aqua-700);
}

/* Small facts alongside the story. */
.about__facts { display: grid; gap: var(--space-5); align-content: start; }

.fact {
  padding: var(--space-6);
  background: var(--paper-card);
  border: 1px solid var(--hair-soft);
  border-radius: var(--r-md);
}
.fact dt {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--aqua-700);
  margin-bottom: 8px;
}
.fact dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(20px, 1.8vw, 24px);
  line-height: 1.25;
  color: var(--ink);
}


/* --------------------------------------------------------------------------
   Approach
   -------------------------------------------------------------------------- */

.steps { margin-top: var(--space-10); gap: var(--space-9); }

.step__mark {
  display: flex;
  height: 7px;
  width: 64px;
  border: 1px solid var(--ink);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 20px;
}
.step__mark span { flex: 1; }
.step__mark span:nth-child(odd) { background: var(--ink); }

.step h3 { margin: 0 0 12px; font-size: clamp(24px, 2.2vw, 28px); line-height: 1.15; }
.step p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink-muted); }


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

.contact { position: relative; overflow: hidden; }

.contact__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
  gap: var(--space-10);
  align-items: start;
}

.contact__phone { display: inline-flex; flex-direction: column; gap: 3px; margin-top: var(--space-8); }
.contact__phone small {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--aqua-700);
}
.contact__phone strong {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: clamp(26px, 2.6vw, 30px);
  color: var(--ink);
}

.contact__meta {
  margin-top: var(--space-7);
  display: grid;
  gap: 6px;
  font-size: 15px;
  color: var(--ink-muted);
  line-height: 1.55;
}

.form-card {
  background: rgba(255, 253, 249, .95);
  border: 1px solid var(--hair-soft);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.form-card__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 20px var(--space-7);
  border-bottom: 1px solid var(--hair-soft);
}
.form-card__head h3 {
  margin: 0;
  font-size: clamp(21px, 2vw, 24px);
  font-weight: var(--weight-regular);
}
.form-card__head span {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--aqua-700);
}

.form { padding: var(--space-7); display: grid; gap: var(--space-5); }

.form__note { font-size: 13px; color: var(--ink-faint); margin: 0; }

.form-sent {
  padding: var(--space-9) var(--space-7);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.form-sent .icon { color: var(--aqua-600); }
.form-sent h3 { margin: 0; font-size: clamp(26px, 2.6vw, 30px); }
.form-sent p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink-muted); }

.form-error {
  margin: 0;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  background: var(--danger-100);
  border: 1px solid rgba(179, 52, 28, .25);
  color: var(--danger-600);
  font-size: 14px;
  font-weight: var(--weight-medium);
}


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

.site-footer { background: var(--paper-veil); border-top: 1px solid var(--hair-soft); }

.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: var(--space-9);
  padding-top: var(--space-10);
  padding-bottom: var(--space-9);
}

.site-footer__logo img { display: block; height: 78px; width: auto; }
.site-footer__blurb {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-muted);
  max-width: 32ch;
  margin-top: var(--space-5);
}

.site-footer h2 {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--weight-regular);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--aqua-700);
  margin: 0 0 16px;
}

.site-footer__links { display: grid; gap: 10px; }
.site-footer__links a, .site-footer__links span { font-size: 16px; color: var(--ink-body); line-height: 1.5; }

.site-footer__base { border-top: 1px solid var(--hair-soft); }
.site-footer__base-inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  min-height: 60px;
  padding-top: 14px;
  padding-bottom: 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.site-footer__base-inner .right { margin-left: auto; }

@media (max-width: 620px) {
  .site-footer__base-inner .right { margin-left: 0; }
}