/* ==========================================================================
   Boxx ADUs — boxxadu.com
   Design tokens below were read off the live Wix site's computed styles so
   the rebuild matches it: Raleway throughout, charcoal ground, taupe accent.
   ========================================================================== */

:root {
  /* Palette */
  --ink:        #262626;  /* header, footer, deepest ground */
  --panel:      #333333;  /* page ground, one step up from --ink */
  --panel-soft: #3d3d3d;  /* cards and alternating bands */
  --taupe:      #9a8a78;  /* the accent: nav pill, buttons, sub-headings */
  --taupe-lit:  #b3a89a;  /* taupe on hover */
  --stone:      #cfc8c0;  /* body copy on dark */
  --white:      #ffffff;
  --line:       rgba(255, 255, 255, .14);

  /* Type */
  --font: "Raleway", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Rhythm.
     The Wix original ran near full-bleed — its model rows spanned ~97% of the
     viewport at roughly 2:1 image-to-text. --wrap keeps that on normal screens
     while stopping the line length running away on an ultrawide. */
  --wrap: 1920px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(3.5rem, 8vw, 7rem);
  --header-h: 106px;
}

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

html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--panel);
  color: var(--stone);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
  color: var(--white);
  font-weight: 400;
  line-height: 1.15;
  margin: 0 0 .6em;
}
h1 { font-size: clamp(2rem, 4.4vw, 3.15rem); letter-spacing: .02em; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 2.1vw, 1.6rem); }

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

/* Utility -------------------------------------------------------------- */
.eyebrow {
  color: var(--taupe);
  font-size: 1.3rem;
  letter-spacing: .01em;
  margin-bottom: .5em;
}
.center { text-align: center; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Skip link — the header is sticky, so it needs to clear it. */
.skip-link {
  position: absolute; left: var(--gutter); top: -100px; z-index: 200;
  background: var(--taupe); color: var(--white);
  padding: .7rem 1.2rem; border-radius: 3px; text-decoration: none;
}
.skip-link:focus { top: .75rem; }

:where(a, button, input, textarea, summary):focus-visible {
  outline: 2px solid var(--taupe-lit);
  outline-offset: 3px;
}

/* Buttons -------------------------------------------------------------- */
.btn {
  display: inline-block;
  padding: .75rem 1.9rem;
  border: 1px solid var(--taupe);
  background: transparent;
  color: var(--white);
  font: inherit;
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s;
}
.btn:hover { background: var(--taupe); border-color: var(--taupe); }
.btn--solid { background: var(--taupe); border-color: var(--taupe); }
.btn--solid:hover { background: var(--taupe-lit); border-color: var(--taupe-lit); }

/* Header --------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--ink);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.site-header__inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 1rem var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
}
.site-logo { display: block; flex-shrink: 0; }
.site-logo img { width: 74px; }

.nav-toggle {
  display: none;
  background: none; border: 0; padding: .5rem;
  color: var(--white); cursor: pointer;
}
.nav-toggle svg { width: 26px; height: 26px; display: block; }

.site-nav { display: flex; align-items: center; gap: .5rem; }
.site-nav__list {
  display: flex; align-items: center; gap: .25rem;
  list-style: none; margin: 0;
  padding: .55rem 1rem;
  background: var(--taupe);
}
/* The link and its chevron are siblings, so the li has to lay them out in a
   row; the submenu wraps to its own line (and is lifted out of flow on
   desktop by position:absolute below). */
.site-nav__list > li { position: relative; display: flex; align-items: center; flex-wrap: wrap; }
.site-nav__list > li > .submenu { width: 100%; }
.site-nav__list a {
  display: block;
  padding: .45rem .7rem;
  color: var(--white);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: color .18s;
}
.site-nav__list a:hover { color: var(--ink); }
/* aria-current marks the page you are on. */
.site-nav__list a[aria-current="page"] { color: rgba(255, 255, 255, .62); }

/* Pre-Designed dropdown */
.has-submenu > button {
  display: flex; align-items: center; gap: .35rem;
  padding: .45rem .7rem;
  background: none; border: 0;
  color: var(--white); font: inherit;
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  cursor: pointer;
}
.has-submenu > button:hover { color: var(--ink); }
.has-submenu > button svg { width: 9px; height: 9px; transition: transform .2s; }
.has-submenu[data-open="true"] > button svg { transform: rotate(180deg); }

.submenu {
  list-style: none; margin: 0; padding: .4rem 0;
  position: absolute; top: calc(100% + .55rem); left: 0; min-width: 190px;
  background: var(--ink);
  border: 1px solid var(--line);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .18s, transform .18s, visibility .18s;
}
.has-submenu:hover .submenu,
.has-submenu:focus-within .submenu,
.has-submenu[data-open="true"] .submenu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.submenu a { padding: .55rem 1.1rem; font-size: .7rem; }
.submenu a:hover { color: var(--taupe-lit); background: rgba(255, 255, 255, .04); }

@media (max-width: 1000px) {
  :root { --header-h: 84px; }
  .nav-toggle { display: block; }
  .site-nav {
    position: fixed; inset: var(--header-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--ink);
    border-bottom: 1px solid var(--line);
    padding: 1rem var(--gutter) 2rem;
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    display: none;
  }
  .site-nav[data-open="true"] { display: flex; }
  .site-nav__list { flex-direction: column; align-items: stretch; background: none; padding: 0; }
  .site-nav__list a, .has-submenu > button {
    width: 100%; padding: .85rem .25rem; font-size: .85rem;
    border-bottom: 1px solid var(--line);
  }
  .has-submenu > button { justify-content: space-between; }
  .submenu {
    position: static; opacity: 1; visibility: visible; transform: none;
    border: 0; background: none; padding: 0 0 0 1rem;
    display: none;
  }
  .has-submenu[data-open="true"] .submenu { display: block; }
  .site-nav .btn { margin-top: 1.25rem; text-align: center; }
}

/* Model rows ----------------------------------------------------------- */
.model-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
  margin-bottom: clamp(3rem, 7vw, 6rem);
}
.model-row:last-child { margin-bottom: 0; }

/* Hover zoom, matching the Wix original exactly. Its Pro Gallery used
   scale(1.1) over 2.2s on cubic-bezier(.14,.4,.09,.99) — a long, heavily
   front-loaded ease that moves fast then drifts. The wrapper clips the
   overflow so the image grows within its frame rather than pushing layout.
   The global prefers-reduced-motion rule collapses the duration. */
.model-row__media {
  display: block;
  overflow: hidden;
}
.model-row__media img {
  transition: transform 2.2s cubic-bezier(.14, .4, .09, .99);
  transform: scale(1);
}
.model-row__media:hover img,
.model-row__media:focus-visible img {
  transform: scale(1.1);
}
.model-row__body { padding-top: .5rem; }
.model-row h3 {
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
}
.model-row__specs { list-style: none; margin: 0 0 1.75rem; padding: 0; font-size: .95rem; }
.model-row__specs li { padding-left: 1rem; text-indent: -1rem; }
.model-row__specs li::before { content: "– "; }

@media (max-width: 800px) {
  .model-row { grid-template-columns: 1fr; }
}

/* Card grid (services, materials, zoning) ------------------------------- */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.grid > * {
  background: var(--panel);
  padding: clamp(1.5rem, 3vw, 2.5rem);
}
/* Services runs as a fixed 4-up so the two rows land the way the original did:
   title / copy / copy / photo, then photo / copy / copy / copy. */
.grid--services { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .grid--services { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .grid--services { grid-template-columns: 1fr; } }

.grid__title {
  background: var(--taupe);
  display: flex; align-items: center;
}
.grid__title h2 { margin: 0; }
.grid__photo { padding: 0; background-size: cover; background-position: center; min-height: 240px; }
.grid h3 { color: var(--taupe); margin-bottom: .8rem; }
.grid p:last-child { margin-bottom: 0; }

/* Services band --------------------------------------------------------
   The original splits this row: a full-bleed interior rendering on the left,
   a dark panel with the list on the right, with the pillars grid butted
   directly underneath sharing the same edges. */
.services-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  border: 1px solid var(--line);
  border-bottom: 0;
}
.services-band__media {
  width: 100%; height: 100%;
  object-fit: cover;
  min-height: 300px;
}
.services-band__panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(2rem, 5vw, 4.5rem);
}
.services-band__inner { width: min(100%, 27rem); }
.services-band__inner h2 { margin-bottom: 1.2em; }

.services-list {
  list-style: none;
  margin: 0 0 2.25rem;
  padding: 0;
  font-size: clamp(.95rem, 1.15vw, 1.1rem);
}
.services-list li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: 1.05rem;
  color: var(--white);
}
.services-list li::before {
  content: "";
  position: absolute; left: .15rem; top: .62em;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--white);
}

@media (max-width: 900px) {
  .services-band { grid-template-columns: 1fr; }
  .services-band__media { min-height: 240px; max-height: 55vh; }
}

/* Pillars -------------------------------------------------------------- */
.pillars {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--line);
  text-align: center;
}
.pillars > li {
  padding: clamp(1.75rem, 3.5vw, 3rem) 1rem;
  border-left: 1px solid var(--line);
}
.pillars > li:first-child { border-left: 0; }
.pillars h3 {
  color: var(--white);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  margin: 0;
}
.pillar-icon {
  width: clamp(38px, 3.6vw, 52px);
  height: auto;
  margin: 0 auto 1.1rem;
  display: block;
  color: var(--taupe);
}

@media (max-width: 800px) {
  .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* With two per row, the reset has to follow the rows, not just the first cell. */
  .pillars > li:nth-child(odd) { border-left: 0; }
  .pillars > li:nth-child(n + 3) { border-top: 1px solid var(--line); }
}

/* About band ----------------------------------------------------------- */
.about {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  align-items: stretch;
  border: 1px solid var(--line);
}
.about__body { padding: clamp(2rem, 5vw, 4rem); }
.about__photo { min-height: 320px; object-fit: cover; width: 100%; height: 100%; }
@media (max-width: 860px) { .about { grid-template-columns: 1fr; } }

/* Zoning --------------------------------------------------------------- */

/* Column label sitting over the +/- markers. Right-aligned so it lands above
   the marker, and aria-hidden because the <summary> elements already announce
   themselves as expandable to a screen reader. */
.town-hint {
  margin: 0 0 .5rem;
  text-align: right;
  color: var(--taupe);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.35;
}

.town { border-top: 1px solid var(--line); }
.town:last-child { border-bottom: 1px solid var(--line); }
.town > summary {
  cursor: pointer;
  padding: 1.15rem .25rem;
  color: var(--white);
  font-size: 1.15rem;
  letter-spacing: .02em;
  list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.town > summary::-webkit-details-marker { display: none; }
.town > summary::after {
  content: "+"; color: var(--taupe); font-size: 1.5rem; line-height: 1; flex-shrink: 0;
}
.town[open] > summary::after { content: "–"; }
.town > summary:hover { color: var(--taupe-lit); }
.town__body { padding: 0 .25rem 1.75rem; max-width: 68ch; }
.town__body h4 {
  color: var(--taupe); font-size: .95rem; text-transform: uppercase;
  letter-spacing: .08em; margin: 1.5rem 0 .4rem;
}
.town__body h4:first-child { margin-top: 0; }
.town__body p, .town__body ul { margin: 0 0 .6rem; }
.town__body ul { padding-left: 1.15rem; }

/* Spec list (materials) ------------------------------------------------ */
.spec-list { list-style: none; margin: 0 0 2rem; padding: 0; max-width: 60ch; }
.spec-list li { border-bottom: 1px solid var(--line); }
.spec-list li:not(:has(a)) { padding: .55rem 0; }

/* Rows that link out to the manufacturer. The whole row is the target, so
   it stays comfortable on touch. */
.spec-list a {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  padding: .7rem 0;
  color: var(--stone);
  text-decoration: none;
  transition: color .18s;
}
.spec-list a:hover { color: var(--white); }
.spec-list a .ext {
  width: 11px; height: 11px;
  flex-shrink: 0;
  color: var(--taupe);
  transition: transform .18s;
}
.spec-list a:hover .ext { transform: translate(2px, -2px); }

/* Model hero + thumbnails ----------------------------------------------
   build.py centre-crops the renderings to 3:2 so they match the plans and
   elevations off the drawing sheets. Every image is now the same shape, so
   the frame fills edge to edge with no letterboxing and no shift on swap. */
.model-hero {
  aspect-ratio: 3 / 2;
  background: var(--ink);
  overflow: hidden;
}
.model-hero img {
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Gallery -------------------------------------------------------------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: clamp(.6rem, 1.2vw, 1rem);
}

/* The thumb is a container, not the control: the picker button and the
   download link are siblings inside it, since a button cannot contain a
   link. */
.thumb {
  position: relative;
  aspect-ratio: 3 / 2;
  background: var(--ink);
  overflow: hidden;
}
.thumb__pick {
  display: block;
  width: 100%; height: 100%;
  padding: 0; border: 0;
  background: none;
  cursor: pointer;
  outline-offset: -2px;
}
.thumb__pick img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.14, .4, .09, .99), opacity .2s;
  opacity: .78;
}
.thumb:hover .thumb__pick img,
.thumb__pick:focus-visible img { opacity: 1; transform: scale(1.06); }

/* The thumbnail currently showing in the hero. */
.thumb__pick[aria-pressed="true"] { outline: 2px solid var(--taupe); }
.thumb__pick[aria-pressed="true"] img { opacity: 1; }

/* Download control, bottom-right on hover — where the Wix original put it.
   Always present for keyboard and touch, which have no hover to reveal it. */
.thumb__dl {
  position: absolute;
  right: .5rem; bottom: .5rem;
  display: grid; place-items: center;
  width: 30px; height: 30px;
  background: rgba(38, 38, 38, .82);
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 2px;
  opacity: 0;
  transition: opacity .18s, background-color .18s;
}
.thumb__dl svg { width: 15px; height: 15px; }
.thumb:hover .thumb__dl,
.thumb__dl:focus-visible { opacity: 1; }
.thumb__dl:hover { background: var(--taupe); }

/* Touch has no hover, so keep it visible there. */
@media (hover: none) {
  .thumb__dl { opacity: 1; }
}

/* Full drawing set, beside the model name. */
.model-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.model-head h1 { margin-bottom: .4em; }
.dl-set {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .45rem .85rem;
  border: 1px solid var(--line);
  color: var(--stone);
  text-decoration: none;
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: border-color .18s, color .18s, background-color .18s;
}
.dl-set svg { width: 14px; height: 14px; color: var(--taupe); }
.dl-set:hover {
  color: var(--white);
  border-color: var(--taupe);
  background: rgba(154, 138, 120, .14);
}
.dl-set:hover svg { color: var(--white); }

/* Steps (general contracting) ------------------------------------------ */
.steps { counter-reset: step; display: grid; gap: 1.5rem; max-width: 70ch; }
.steps > li { list-style: none; padding-left: 3.25rem; position: relative; }
.steps > li::before {
  counter-increment: step; content: "0" counter(step);
  position: absolute; left: 0; top: 0;
  color: var(--taupe); font-size: 1.1rem; letter-spacing: .05em;
}
.steps h3 { font-size: 1.1rem; margin-bottom: .3rem; }

/* Contact / footer ----------------------------------------------------- */
.site-footer {
  background: var(--ink);
  padding-block: var(--section-y);
  /* #contact is the last thing on every page. When the footer is shorter than
     the viewport the document runs out of scroll before the footer's top can
     reach the sticky header, so the anchor jump stops part-way down the screen.
     Guaranteeing at least a viewport's worth of footer gives it the room.
     dvh rather than vh so mobile browser chrome is accounted for. */
  min-height: calc(100dvh - var(--header-h));
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) auto;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr; } }

.contact-line { display: flex; gap: .9rem; align-items: flex-start; margin-bottom: 1.1rem; }
.contact-line svg { width: 22px; height: 22px; flex-shrink: 0; stroke: var(--taupe); fill: none; stroke-width: 1.5; margin-top: .15rem; }
.contact-line a { color: var(--stone); text-decoration: underline; text-underline-offset: 3px; }
.contact-line a:hover { color: var(--white); }

.copyright { font-size: .8rem; color: rgba(207, 200, 192, .6); margin-top: 2rem; }

.footer-nav { list-style: none; margin: 0 0 1.75rem; padding: 0; }
.footer-nav a { color: var(--stone); text-decoration: none; font-size: .9rem; line-height: 2; }
.footer-nav a:hover { color: var(--white); }

.socials { display: flex; gap: .75rem; }
.socials a { display: block; opacity: .8; transition: opacity .2s; }
.socials a:hover { opacity: 1; }
.socials img { width: 24px; }

/* Form ----------------------------------------------------------------- */
.form-field { margin-bottom: 1.5rem; }
.form-field label {
  display: block; font-size: .85rem; color: var(--stone); margin-bottom: .35rem;
}
.form-field .req { color: var(--taupe); }
.form-field input, .form-field textarea {
  width: 100%;
  background: transparent;
  border: 0; border-bottom: 1px solid var(--line);
  color: var(--white);
  font: inherit; font-size: .95rem;
  padding: .5rem 0;
  border-radius: 0; /* iOS adds one otherwise */
}
.form-field textarea { min-height: 5.5rem; resize: vertical; }
.form-field input:focus, .form-field textarea:focus {
  outline: none; border-bottom-color: var(--taupe);
}
.form-field input:user-invalid, .form-field textarea:user-invalid {
  border-bottom-color: #c96a5c;
}

/* Honeypot: off-screen for people, tempting for bots. Not display:none,
   which some bots detect and skip. */
.hp {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden;
}

.form-status { margin-top: 1rem; font-size: .9rem; min-height: 1.4em; }
.form-status[data-state="error"] { color: #e2a196; }
.form-status[data-state="ok"] { color: var(--taupe-lit); }
button[disabled] { opacity: .55; cursor: not-allowed; }

/* Zoning: breadcrumbs, town pages, town index ---------------------------- */
.crumbs {
  padding-top: 1.5rem;
  font-size: .8rem;
  letter-spacing: .06em;
  color: rgba(207, 200, 192, .65);
}
.crumbs a { color: var(--taupe); text-decoration: none; }
.crumbs a:hover { color: var(--white); text-decoration: underline; }
.crumbs span { margin: 0 .35rem; }

/* A town page is a long read, so cap the measure and give the questions air. */
.town-detail { max-width: 68ch; margin-top: 2.5rem; }
.town-detail h2 {
  color: var(--taupe);
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  margin: 2.25rem 0 .5rem;
}
.town-detail h2:first-child { margin-top: 0; }
.town-detail p, .town-detail ul { margin: 0 0 .7rem; }
.town-detail ul { padding-left: 1.15rem; }

.town-links { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.town-links a { color: var(--stone); text-decoration: none; }
.town-links a:hover { color: var(--white); }
.town-links:not(.town-links--cards) {
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
}
.town-links:not(.town-links--cards) a {
  text-decoration: underline; text-underline-offset: 3px;
}

/* Index cards */
.town-links--cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: 2.5rem;
}
.town-links--cards a {
  display: block;
  background: var(--panel);
  padding: 1.75rem 1.5rem;
  transition: background-color .2s;
}
.town-links--cards a:hover { background: var(--panel-soft); }
.town-links--cards strong {
  display: block;
  color: var(--white);
  font-size: 1.3rem;
  font-weight: 400;
  margin-bottom: .3rem;
}
.town-links--cards span { font-size: .8rem; color: var(--taupe); }