/* Wired4 — Direction D "Quiet Engineering"
   Mobile-first. 54% of traffic is on a phone, so the narrow layout is the
   base and wider screens are the enhancement, not the other way round. */

:root {
  --paper: #F2F1EE;
  --panel: #EAE8E3;
  --ink: #16181A;
  --ink-2: #4A524F;
  --ink-3: #6B726F;
  --muted: #8C8880;
  --line: #DEDBD5;
  --line-2: #C7C4BE;

  /* The three-network cable colors, used as a structural motif. */
  --wire-gray: #8B8987;
  --wire-white: #C9C3BD;
  --wire-red: #A8524A;

  --display: "Marcellus", Optima, Georgia, serif;
  --body: "Karla", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;

  --gutter: 20px;
  --measure: 62ch;
}

@media (min-width: 700px) { :root { --gutter: 40px; } }
@media (min-width: 1100px) { :root { --gutter: 72px; } }

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--ink-2); }
.text-link { text-decoration: underline; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.wrap { padding-inline: var(--gutter); }

/* ---------- type ---------- */
h1, h2, h3 { font-family: var(--display); font-weight: 400; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(34px, 7.4vw, 60px); line-height: 1.1; letter-spacing: -0.012em; }
h2 { font-size: clamp(27px, 4.4vw, 40px); line-height: 1.18; }
h3 { font-size: clamp(19px, 2.4vw, 22px); line-height: 1.3; }
p { margin: 0 0 18px; max-width: var(--measure); }
.lede { font-size: clamp(16px, 2vw, 17px); line-height: 1.72; color: var(--ink-2); }

.eyebrow {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 16px; font-weight: 500;
}
.data { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ---------- buttons ---------- */
.btn, .btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 13px 28px;
  font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500;
  border: 1px solid var(--ink); cursor: pointer;
}
.btn { background: var(--ink); color: var(--paper); }
.btn:hover { background: #000; color: var(--paper); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover { border-color: var(--ink); color: var(--ink); }
.textlink {
  display: inline-block; font-size: 13px; letter-spacing: 0.08em;
  text-transform: uppercase; font-weight: 500;
  border-bottom: 1px solid var(--ink); padding-bottom: 3px; min-height: 24px;
}

/* ---------- header ---------- */
.site-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 16px var(--gutter);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(8px);
}
/* The logo. The source artwork is a white house mark beside a dark gray
   wordmark; white is invisible on paper, so the mark takes a light gray that
   sits back from the wordmark rather than competing with it. No color in the
   lockup — the site has no chromatic accent and the logo does not introduce
   one. */
.logo { display: inline-flex; align-items: center; line-height: 0; }
/* The viewBox is cropped to the artwork, so this height is the height the
   logo actually appears at — the source canvas carried 25% padding. */
.logo svg { height: 40px; width: auto; display: block; }
/* No dark variant: this site is a single light theme, and flipping the
   wordmark on prefers-color-scheme alone left it near-white on a light page. */
:root { --logo-mark: #ADA7A2; --logo-word: #373A3C; }

.nav-desktop { display: none; }
.header-actions { display: flex; align-items: center; gap: 12px; }
.header-phone {
  font-family: var(--mono); font-size: 14px; color: var(--ink);
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px; padding-inline: 4px;
}
.header-phone svg { flex: none; }
.header-phone .label { display: none; }

.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; background: transparent; border: 1px solid var(--line-2);
  cursor: pointer; color: var(--ink); padding: 0;
}
.nav-panel { display: none; border-bottom: 1px solid var(--line); background: var(--paper); }
.nav-panel.open { display: block; }
.nav-panel ul { list-style: none; margin: 0; padding: 8px var(--gutter) 20px; }
.nav-panel li + li { border-top: 1px solid var(--line); }
.nav-panel a {
  display: block; padding: 15px 0; font-size: 17px; font-family: var(--display);
}

/* The menu, the lockup and the phone icon only fit on one line from about
   1180px with the longest lockup word; below that the menu button takes over. */
@media (min-width: 1180px) {
  .nav-toggle { display: none; }
  .nav-panel { display: none !important; }
  .nav-desktop { display: flex; gap: clamp(16px, 1.6vw, 26px); }
  .nav-desktop a {
    white-space: nowrap;
    font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--ink-2); font-weight: 500; padding-block: 6px;
  }
  .nav-desktop a:hover { color: var(--ink); }
}
/* The number itself needs the room the longest lockup word leaves. */
@media (min-width: 1280px) { .header-phone .label { display: inline; } }

/* ---------- hero ---------- */
.hero-img { width: 100%; height: clamp(240px, 46vw, 520px); object-fit: cover; }

.hero-body { padding-top: 40px; }
.hero-body h1 { margin-bottom: 20px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 26px; }

@media (min-width: 900px) {
  .hero-body {
    display: grid; grid-template-columns: 1.25fr 1fr; gap: 80px;
    align-items: start; padding-top: 60px;
  }
}

/* ---------- entry paths ---------- */
.paths { margin-top: 36px; }
.paths .eyebrow { margin-bottom: 12px; }
.path {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 17px 0; border-top: 1px solid var(--line);
  font-family: var(--display); font-size: 20px; min-height: 56px;
}
.path:last-child { border-bottom: 1px solid var(--line); }
.path svg { flex: none; color: var(--muted); }
.path:hover { color: var(--ink-2); }
.path:hover svg { color: var(--ink-2); }
@media (min-width: 900px) { .paths { margin-top: 6px; } }

/* ---------- generic section rhythm ---------- */
.section { padding-top: clamp(56px, 8vw, 84px); }
.rule-top { border-top: 1px solid var(--line); padding-top: 28px; }

/* ---------- credential + discretion ---------- */
.credential {
  margin-top: clamp(48px, 7vw, 70px);
  padding-block: 26px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  display: grid; gap: 22px;
}
.credential .claim {
  font-family: var(--display); font-size: clamp(18px, 2.3vw, 20px);
  font-style: italic; color: var(--ink-2); line-height: 1.5; max-width: 46ch;
}
.credential .discretion {
  font-size: 14.5px; line-height: 1.6; color: var(--ink-3); max-width: 44ch;
}
@media (min-width: 900px) {
  .credential { grid-template-columns: 1.4fr 1fr; gap: 56px; align-items: center; }
  .credential .discretion { border-left: 1px solid var(--line); padding-left: 30px; }
}

/* ---------- two-column feature ---------- */
.feature { display: grid; gap: 32px; align-items: center; }
.feature img { width: 100%; height: clamp(240px, 40vw, 380px); object-fit: cover; }
@media (min-width: 900px) {
  .feature { grid-template-columns: 1fr 1.1fr; gap: 68px; }
  .feature.media-right .media { order: 2; }
}

/* ---------- three-network standard ---------- */
.networks {
  display: grid; gap: 30px; margin-top: 44px;
  /* Ruled above and below, so the photos that follow don't read as one per network. */
  border-top: 1px solid var(--line); padding-top: 30px;
  border-bottom: 1px solid var(--line); padding-bottom: 34px;
}
.net-key { display: flex; align-items: center; gap: 11px; margin-bottom: 10px; }
.net-swatch { width: 28px; height: 3px; flex: none; }
.net-swatch.gray { background: var(--wire-gray); }
.net-swatch.white { background: var(--wire-white); outline: 1px solid var(--line); }
.net-swatch.red { background: var(--wire-red); }
.net-code { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; }
.networks h3 { margin-bottom: 6px; }
.networks p { font-size: 15px; line-height: 1.6; color: var(--ink-3); margin: 0; }
@media (min-width: 760px) { .networks { grid-template-columns: repeat(3, 1fr); gap: 40px; } }

/* ---------- craft grid ---------- */
.craft-grid { display: grid; gap: 26px; margin-top: 48px; }
.craft-head { margin-top: 40px; }
.craft-head + .craft-grid { margin-top: 18px; }
.craft-grid img { width: 100%; height: clamp(200px, 30vw, 215px); object-fit: cover; }
.craft-grid p { font-size: 15px; line-height: 1.62; color: var(--ink-2); margin: 14px 0 0; }
@media (min-width: 760px) { .craft-grid { grid-template-columns: repeat(3, 1fr); gap: 28px; } }

/* ---------- selected work ---------- */
.work-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 20px; margin-bottom: 30px; flex-wrap: wrap;
}
.work-grid { display: grid; gap: 44px; }
.work-grid img { width: 100%; height: clamp(220px, 34vw, 260px); object-fit: cover; }
.work-title {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; margin: 18px 0 10px;
}
.work-title h3 { font-size: clamp(22px, 3vw, 26px); }
.work-place { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.work-stats {
  font-family: var(--mono); font-size: 12.5px; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  padding-bottom: 11px; border-bottom: 1px solid var(--line); margin-bottom: 11px;
}
.work-grid p { font-size: 15px; line-height: 1.65; color: var(--ink-2); margin: 0; }
@media (min-width: 760px) { .work-grid { grid-template-columns: repeat(2, 1fr); gap: 48px 40px; } }

/* ---------- trade panel ---------- */
.trade {
  margin-top: clamp(56px, 8vw, 84px);
  background: var(--panel);
  padding: clamp(32px, 5vw, 46px) clamp(24px, 4vw, 48px);
  display: grid; gap: 28px;
}
@media (min-width: 900px) { .trade { grid-template-columns: 1fr 1.15fr; gap: 56px; align-items: center; } }

/* ---------- testimonial ---------- */
.testimonial {
  margin-top: clamp(56px, 8vw, 78px);
  padding-block: clamp(40px, 6vw, 52px);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  text-align: center;
}
.testimonial .quote {
  font-family: var(--display); font-size: clamp(22px, 3.6vw, 33px);
  line-height: 1.36; font-style: italic; color: #2C3330;
  max-width: 32ch; margin: 0 auto 20px;
}
.testimonial .attrib {
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
}
.testimonial .quotes {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(34px, 5vw, 48px);
}
.testimonial figure { margin: 0; flex: 0 1 300px; }
@media (min-width: 820px) {
  .testimonial .quote { font-size: clamp(18px, 1.9vw, 22px); max-width: 24ch; }
}
.placeholder-tag {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: #A8A49C; margin-bottom: 20px;
}

/* ---------- service ---------- */
.service { display: grid; gap: 34px; }
.service ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.service li { display: flex; gap: 16px; align-items: baseline; }
.service li .n { font-family: var(--mono); font-size: 12px; color: var(--muted); flex: none; width: 24px; }
.service li span:last-child { font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }
@media (min-width: 900px) {
  .service { grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
  .service .list-col { border-left: 1px solid var(--line); padding-left: 40px; }
}

/* ---------- contact + footer ---------- */
.contact {
  margin-top: clamp(56px, 8vw, 84px);
  border-top: 1px solid var(--line);
  padding-top: clamp(40px, 6vw, 56px);
  display: grid; gap: 30px;
}
.contact-details { font-family: var(--mono); font-size: 14.5px; line-height: 1.95; color: var(--ink-2); }
.contact-details a { color: var(--ink-2); }
.contact-details a:hover { color: var(--ink); }
@media (min-width: 900px) {
  .contact { grid-template-columns: 1.2fr 1fr; gap: 60px; align-items: end; }
  .contact .contact-side { text-align: right; }
}

.site-footer {
  margin-top: clamp(48px, 7vw, 72px);
  border-top: 1px solid var(--line);
  padding: 26px var(--gutter) calc(26px + env(safe-area-inset-bottom));
  display: flex; flex-wrap: wrap; gap: 14px 28px;
  justify-content: space-between; align-items: center;
  font-size: 13px; color: var(--muted);
}
.site-footer nav { display: flex; flex-wrap: wrap; gap: 18px; }
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--ink); }
/* Legal links sit in the middle: on their own centred row at desktop
   widths, and between the copyright and site links once there is room. */
@media (min-width: 1180px) {
  .site-footer { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "copy nav" "legal legal"; }
  .site-footer > span { grid-area: copy; }
  .site-footer .footer-legal { grid-area: legal; justify-self: center; }
  .site-footer > nav:last-child { grid-area: nav; justify-self: end; }
}
@media (min-width: 1500px) {
  .site-footer { grid-template-columns: auto 1fr auto; grid-template-areas: "copy legal nav"; }
}

/* Bottom call bar — phones only. The most common mobile intent is to call. */
.callbar { display: none; }
@media (max-width: 640px) {
  .callbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    display: grid; grid-template-columns: 1fr 1fr;
    border-top: 1px solid var(--line); background: var(--paper);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .callbar a {
    min-height: 54px; display: flex; align-items: center; justify-content: center; gap: 8px;
    font-size: 13px; letter-spacing: 0.07em; text-transform: uppercase; font-weight: 500;
  }
  .callbar a + a { background: var(--ink); color: var(--paper); }
  body { padding-bottom: 54px; }
}

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--paper); padding: 12px 18px; z-index: 100;
}
.skip-link:focus { left: 0; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ================= interior pages ================= */

/* Page masthead — the shared opener for every interior page. */
.page-head { padding-top: clamp(36px, 6vw, 64px); padding-bottom: clamp(28px, 4vw, 40px); }
.page-head h1 { margin-bottom: 18px; }
.page-head .lede { max-width: 58ch; margin-bottom: 0; }
.page-head.with-rule { border-bottom: 1px solid var(--line); }

.crumbs {
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 18px; display: flex; gap: 8px; flex-wrap: wrap;
}
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--ink); }

/* Index card grids */
.card-grid { display: grid; gap: 30px; }
@media (min-width: 640px) { .card-grid { grid-template-columns: repeat(2, 1fr); gap: 34px 30px; } }
@media (min-width: 1000px) { .card-grid.three { grid-template-columns: repeat(3, 1fr); } }

.card { display: flex; flex-direction: column; }
.card img { width: 100%; height: clamp(180px, 26vw, 220px); object-fit: cover; }
.card h2, .card h3 { margin: 16px 0 8px; font-size: clamp(21px, 2.6vw, 25px); }
.card p { font-size: 15px; line-height: 1.6; color: var(--ink-2); margin: 0 0 14px; }
.card .textlink { margin-top: auto; align-self: flex-start; }
.card:hover h2, .card:hover h3 { color: var(--ink-2); }

/* Spec / fact tables */
.spec { border-top: 1px solid var(--line); margin: 0; }
.spec div {
  display: flex; justify-content: space-between; gap: 20px;
  padding: 12px 0; border-bottom: 1px solid var(--line);
}
.spec dt { color: var(--ink-3); font-size: 15px; }
.spec dd {
  margin: 0; font-family: var(--mono); font-size: 14px;
  font-variant-numeric: tabular-nums; text-align: right; color: var(--ink);
}

/* Prose column for detail pages */
.prose { max-width: 62ch; }
.prose p { font-size: 17px; line-height: 1.75; color: var(--ink-2); }
.prose p:first-of-type { font-size: clamp(18px, 2.2vw, 20px); color: var(--ink); line-height: 1.6; }
.prose ul { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 14px; }
.prose li { font-size: 17px; line-height: 1.75; color: var(--ink-2); padding-left: 22px; position: relative; }
.prose li::before { content: ""; position: absolute; left: 0; top: 0.9em; width: 10px; height: 1px; background: var(--ink-3); }
.prose li strong { color: var(--ink); font-weight: 600; }
.prose .prose-h { font-size: clamp(22px, 2.8vw, 27px); margin: 44px 0 14px; }
.prose .prose-h:first-child { margin-top: 0; }
/* Sectioned pages start with a heading, not an intro paragraph. */
.prose-sections p:first-of-type { font-size: 17px; color: var(--ink-2); line-height: 1.75; }

.detail { display: grid; gap: 40px; }
@media (min-width: 960px) { .detail { grid-template-columns: 1.5fr 1fr; gap: 72px; align-items: start; } }
.detail aside { align-self: start; }
@media (min-width: 960px) { .detail aside { position: sticky; top: 96px; } }

/* Innovation page: the ScaledApps services, under "At a glance".
   Too tall to stay pinned while the text scrolls, so this aside scrolls too. */
.detail aside:has(.svc-notes) { position: static; }
.svc-notes { margin-top: 40px; display: grid; gap: 22px; }
.svc-notes .eyebrow { margin-bottom: 0; }
.svc-notes h3 { font-size: 19px; margin: 0 0 6px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.svc-notes h3 span { font-family: var(--body); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.svc-notes p { font-size: 15px; line-height: 1.6; color: var(--ink-2); margin: 0; }
.svc-notes > div + div { border-top: 1px solid var(--line); padding-top: 20px; }

/* Service page: more photos tagged with the service */
.service-strip { border-top: 1px solid var(--line); margin-top: clamp(48px, 7vw, 72px); padding-top: 30px; }
.strip-grid { display: grid; gap: 22px; }
.strip-grid figure { margin: 0; }
.strip-grid img { width: 100%; height: clamp(200px, 24vw, 230px); object-fit: cover; display: block; }
.strip-grid figcaption {
  font-size: 14px; line-height: 1.55; color: var(--ink-3); margin-top: 10px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
@media (min-width: 560px) { .strip-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .strip-grid { grid-template-columns: repeat(3, 1fr); gap: 26px; } }
.service-strip + .pager-links { margin-top: clamp(36px, 5vw, 52px); }

/* Prev / next */
.pager-links {
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  border-top: 1px solid var(--line); margin-top: clamp(48px, 7vw, 72px); padding-top: 24px;
}
.pager-links a { font-family: var(--display); font-size: 19px; }
.pager-links span { display: block; font-family: var(--body); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }

/* ---------- support / pricing ---------- */
.plans { display: grid; gap: 20px; margin-top: 8px; }
@media (min-width: 700px) { .plans { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1050px) { .plans { grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--line); } }
.plan { background: var(--paper); border: 1px solid var(--line); padding: 26px 22px; display: flex; flex-direction: column; }
@media (min-width: 1050px) { .plan { border: none; } }
.plan.featured { background: var(--panel); }
.plan .plan-name {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px;
}
.plan .price { font-family: var(--display); font-size: 38px; line-height: 1; }
.plan .period { font-size: 13px; color: var(--muted); margin: 6px 0 4px; }
.plan .price-note { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); margin-bottom: 6px; }
.plan .builds { font-size: 13px; color: var(--ink-3); font-style: italic; margin: 14px 0 10px; }
.plan ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 9px; }
.plan li { font-size: 14.5px; line-height: 1.5; color: var(--ink-2); padding-left: 18px; position: relative; }
.plan li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 8px; height: 1px; background: var(--line-2);
}
.tutorial-player { width: 100%; min-height: 360px; }
.plan-note { font-size: 13.5px; color: var(--muted); margin-top: 20px; max-width: none; }

.rates { display: grid; gap: 20px; margin-top: 28px; }
@media (min-width: 760px) { .rates { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
.rate { border: 1px solid var(--line); padding: 24px 22px; }
.rate.featured { background: var(--panel); border-color: transparent; }
.rate h3 { font-size: 20px; margin-bottom: 14px; }
.rate div {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 10px 0; border-top: 1px solid var(--line);
  font-size: 14.5px; color: var(--ink-2);
}
.rate div span:last-child { font-family: var(--mono); white-space: nowrap; color: var(--ink); }

/* ---------- process ---------- */
.phase {
  display: grid; gap: 18px;
  padding-top: 34px; margin-top: 34px; border-top: 1px solid var(--line);
}
.phase:first-child { border-top: none; margin-top: 0; padding-top: 0; }
.phase-n {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
}
.phase ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.phase ul li {
  font-size: 15px; line-height: 1.55; color: var(--ink-2);
  padding-left: 20px; position: relative;
}
.phase ul li::before {
  content: ""; position: absolute; left: 0; top: 10px;
  width: 9px; height: 1px; background: var(--line-2);
}
@media (min-width: 900px) { .phase { grid-template-columns: 150px 1.2fr 1fr; gap: 40px; } }

/* ---------- forms ---------- */
.form { display: grid; gap: 18px; max-width: 620px; }
.field { display: grid; gap: 7px; }
.field label { font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; }
.field input, .field select, .field textarea {
  font: inherit; font-size: 16px; /* 16px avoids iOS zoom-on-focus */
  color: var(--ink); background: #FFF;
  border: 1px solid var(--line-2); border-radius: 0;
  padding: 13px 14px; min-height: 50px; width: 100%;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--ink); outline-offset: 1px; border-color: var(--ink);
}
.field .err { font-size: 13.5px; color: #A8443C; }
.field-row { display: grid; gap: 18px; }
@media (min-width: 620px) { .field-row { grid-template-columns: 1fr 1fr; } }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.notice {
  border: 1px solid var(--line); background: var(--panel);
  padding: 20px 22px; margin-bottom: 26px; max-width: 620px;
}
.notice p { margin: 0; font-size: 15.5px; color: var(--ink-2); }
.notice strong { color: var(--ink); }

/* ---------- shared closing CTA ---------- */
.cta-band {
  margin-top: clamp(56px, 8vw, 84px);
  border-top: 1px solid var(--line);
  padding-top: clamp(40px, 6vw, 56px);
  display: grid; gap: 24px;
}
@media (min-width: 900px) { .cta-band { grid-template-columns: 1.3fr 1fr; gap: 60px; align-items: center; } }
.cta-band .actions { display: flex; gap: 12px; flex-wrap: wrap; }
@media (min-width: 900px) { .cta-band .actions { justify-content: flex-end; } }

/* ---- Header lockup ------------------------------------------------------
   The rotating service word beside the mark. Carried over from the legacy
   site, where it sat in the same position; it is decoration attached to the
   brand, never the headline, so it can vary without the page losing its
   argument. Hidden on narrow screens, where the mark and the phone number
   have to win. */
.lockup {
  display: none; text-decoration: none; align-items: baseline; gap: 6px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; margin-left: 2px;
  padding-left: 14px; border-left: 1px solid var(--line);
}
.lockup, .header-phone .label { white-space: nowrap; }
.lockup strong { font-weight: 500; color: var(--ink); }
.lockup span { color: var(--ink-3); letter-spacing: 0.06em; }
.lockup:hover strong { border-bottom: 1px solid var(--line-2); }
@media (min-width: 860px) { .lockup { display: inline-flex; } }

/* ---- Project photography ------------------------------------------------
   Photographs come from the record for that property, so a project can only
   ever show its own house. */
.proj-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px; margin-top: 14px;
}
.proj-grid figure { margin: 0; }
.proj-grid img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.proj-grid figcaption {
  font-family: var(--mono); font-size: 12px; color: var(--ink-3);
  letter-spacing: 0.02em; padding-top: 8px;
}

/* ---- Gallery ------------------------------------------------------------
   Carried over from the legacy gallery, which was property-filtered but not
   searchable and never drew the hotspots it had stored. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.gal-controls { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.gal-controls input[type="search"] {
  flex: 1 1 260px; font: inherit; font-size: 15px; padding: 10px 13px;
  border: 1px solid var(--line-2); background: var(--paper); color: var(--ink); border-radius: 2px;
}
.gal-controls select {
  font: inherit; font-size: 14px; padding: 10px 12px;
  border: 1px solid var(--line-2); background: var(--paper); color: var(--ink); border-radius: 2px;
}
.gal-count { font-family: var(--mono); font-size: 12.5px; color: var(--ink-3); margin: 0 0 20px; }
.gal-empty { padding: 48px 0; text-align: center; color: var(--ink-3); }
.gal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.gal-item { margin: 0; cursor: zoom-in; }
.gal-thumb { position: relative; overflow: hidden; }
.gal-thumb img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; transition: transform .4s ease; }
.gal-item:hover .gal-thumb img { transform: scale(1.02); }
.gal-tag {
  position: absolute; left: 0; bottom: 0; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .1em; text-transform: uppercase; padding: 5px 9px;
  background: rgba(20,17,16,.72); color: #fff;
}
.gal-item figcaption { display: flex; justify-content: space-between; gap: 12px; padding-top: 9px; }
.gal-name { font-size: 14px; color: var(--ink-2); }
.gal-proj { font-family: var(--mono); font-size: 11px; color: var(--ink-3); letter-spacing: .04em; white-space: nowrap; }

#gal-lb { border: none; padding: 0; background: transparent; max-width: 96vw; max-height: 96vh; }
#gal-lb::backdrop { background: rgba(0,0,0,.86); }
.lb-stage { position: relative; line-height: 0; }
.lb-stage img { max-width: 96vw; max-height: 84vh; display: block; object-fit: contain; }
.lb-spots { position: absolute; inset: 0; }
/* Callout markers are drawn by public/js/device-marker.js to match the Spaces
   floorplans; the button is only a hit area around them. The shadow keeps a
   white or yellow marker legible on a pale wall without changing its shape. */
.lb-spot {
  position: absolute; transform: translate(-50%, -50%); padding: 0; margin: 0;
  background: none; border: 0; cursor: pointer; line-height: 0;
  filter: drop-shadow(0 0 1.5px rgba(0,0,0,.55)) drop-shadow(0 1px 3px rgba(0,0,0,.35));
}
.lb-spot .device-marker { display: block; transition: transform .15s ease; }
.lb-spot:hover .device-marker, .lb-spot.open .device-marker { transform: scale(1.15); }
.lb-spot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lb-card {
  display: none; position: absolute; left: 50%; top: calc(100% + 10px);
  transform: translateX(-50%); min-width: 220px; max-width: 300px; background: var(--paper);
  border: 1px solid var(--line); padding: 10px 12px; text-align: left; line-height: 1.45;
  z-index: 2; filter: none; white-space: normal;
}
.lb-spot.open { z-index: 3; }
.lb-spot.open .lb-card { display: block; }
.lb-card .lb-title { display: block; font-size: 14px; color: var(--ink); }
.lb-card .lb-sub { display: block; font-family: var(--mono); font-size: 11px; color: var(--ink-3); margin-top: 3px; letter-spacing: .03em; }
.lb-card a { display: inline-block; font-size: 13px; color: var(--ink); margin-top: 7px; text-decoration: underline; text-underline-offset: 3px; }
.lb-card a:hover { color: var(--ink-3); }
.lb-bar {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 12px 4px; font-family: var(--mono); font-size: 13px; color: #EDE9E7;
}
.lb-close { font: inherit; cursor: pointer; background: none; border: 1px solid rgba(255,255,255,.4); color: #EDE9E7; padding: 6px 12px; border-radius: 2px; }
.lb-close:hover { border-color: #fff; }

/* The gallery lists a curated set; searching reaches the whole library. */
.gal-scope {
  display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 99px;
  background: var(--panel); color: var(--ink-3); font-size: 11px; letter-spacing: 0.04em;
}

/* ---- How-to guides ------------------------------------------------------
   Carried over from the old site's /how-to/ pages; the text is unchanged,
   only the presentation follows this site. */
.guide h3 { font-size: clamp(19px, 2.2vw, 22px); margin: 36px 0 12px; }
.guide p.watch { font-size: 14px; color: var(--ink-3); }
.guide p a { text-decoration: underline; text-underline-offset: 3px; }
.guide ol { list-style: none; counter-reset: step; margin: 0 0 18px; padding: 0; display: grid; gap: 10px; }
.guide ol > li { counter-increment: step; }
.guide ol > li::before {
  content: counter(step); width: auto; height: auto; background: none; top: 0.15em;
  font-family: var(--mono); font-size: 13px; color: var(--ink-3);
}
.guide figure.shot { margin: 10px 0 30px; }
.guide figure.shot img { display: block; width: 100%; height: auto; border: 1px solid var(--line); }
.guide figcaption { font-size: 13px; color: var(--muted); margin-top: 8px; }
.guide .btn-ghost { display: inline-flex; }
.guide-contents ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.guide-contents li { border-bottom: 1px solid var(--line); font-size: 14.5px; }
.guide-contents a, .guide-contents span { display: block; padding: 8px 0; color: var(--ink-2); }
.guide-contents a:hover { color: var(--ink); }
.guide-contents span[aria-current] { color: var(--ink); font-weight: 600; }
.guide-index { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 32px; border-top: 1px solid var(--line); }
@media (min-width: 760px) { .guide-index { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .guide-index { grid-template-columns: repeat(3, 1fr); } }
.guide-index li { border-bottom: 1px solid var(--line); }
.guide-index a { display: flex; gap: 14px; align-items: baseline; padding: 14px 0; font-size: 16px; color: var(--ink-2); }
.guide-index a:hover { color: var(--ink); }
.guide-index .n { font-family: var(--mono); font-size: 12px; color: var(--muted); }