/* JS Groundworks - demo site (v2)
   Made from the logo: the excavator and the name sit on one ground line.
   That 4px ground line is the site's only structural motif. Headings sit on it,
   photos sit on it, and the bucket bites through it twice (hero, footer).
   No vertical rules. Hairlines only where they separate rows of data. */

:root {
  --brand: #6A1622;       /* JS Groundworks burgundy - buttons, icons, accents (9.8:1 on ground). Never on graphite (1:1). */
  --brand-deep: #4E0F18;  /* darker burgundy - hover, the honest band (12.2:1 with ground text) */
  --char: #33363A;        /* graphite - text and rules (9.9:1 on ground) */
  --ink: #33363A;         /* graphite - footer, lightbox, dock text button */
  --ground: #E9E8E5;      /* off-white ground */
  --paper: #F4F3F1;       /* lifted panels */
  --muted: #55585D;       /* secondary text on ground (5.8:1) and paper (6.4:1) */
  --on-ink: #E9E8E5;      /* text on graphite (9.9:1) and deep burgundy (12.2:1) */
  --on-ink-muted: #BDBBB6;/* secondary text on graphite (6.3:1) */
  --on-deep-muted: #E0C9CC;/* secondary text on deep burgundy (9.5:1) */
  --line: rgba(51, 54, 58, 0.22);

  --f-head: "Barlow Condensed", "Barlow Semi Condensed", "Arial Narrow", sans-serif; /* logo lettering: big headings */
  --f-display: "Barlow Semi Condensed", "Arial Narrow", sans-serif; /* small headings, buttons, nav */
  --f-body: "Barlow", "Helvetica Neue", Arial, sans-serif;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  --gutter: 1.25rem;
  --rule: 5px;          /* the ground line. Logo ratio: line = 1/6 of cap height */
  --hair: 1px;
  --dock-h: 0px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--char);
  font-family: var(--f-body);
  font-size: 1.0625rem;
  line-height: 1.55;
  padding-bottom: var(--dock-h);
  overflow-wrap: break-word;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 700; margin: 0; line-height: 1; letter-spacing: -0.005em; text-wrap: balance; overflow-wrap: break-word; hyphens: auto; }
/* big headings use the logo's own lettering */
.hero-h, .phead-h, .sec-h, .cta-h, .honest-h { font-family: var(--f-head); font-weight: 800; letter-spacing: 0; }
.hero-h, .phead-h { text-transform: uppercase; }
::selection { background: var(--brand); color: var(--ground); }
input, textarea { caret-color: var(--brand); }
html { accent-color: var(--brand); }

/* ---------- the ground line ---------- */
/* .on-ground: the element sits on a 4px line, like the logo. Graphite on light, off-white on dark. */
.on-ground { padding-bottom: 0.55rem; border-bottom: var(--rule) solid var(--char); }
/* The bite: the bucket's scoop taken out of the ground line. Used twice only (hero, footer). */
.bite { position: relative; }
/* Sized from the line: the logo's line is 8 units, the bite crop is 36 x 41.5 units. */
.bite { --bite-w: calc(var(--rule) * 4.5); --bite-h: calc(var(--rule) * 5.1875); --bite-svg: url("assets/bite.svg"); }
.bite-dark { --bite-svg: url("assets/bite-dark.svg"); }
.bite::after {
  content: ""; position: absolute; z-index: 1; left: var(--bite-x, 70%); bottom: 0;
  width: var(--bite-w); height: var(--bite-h); pointer-events: none;
  background: var(--bite-svg) no-repeat 0 100% / 100% 100%;
}
/* phone: section headings stand on the line, their intro sits under it */
.sec-head.on-ground { padding-bottom: 0; border-bottom: 0; }
.sec-head.on-ground > .sec-h, .row-head.on-ground { padding-bottom: 0.55rem; border-bottom: var(--rule) solid var(--char); }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: 2px; }
.honest :focus-visible, .site-foot :focus-visible, .lightbox :focus-visible, .form-note :focus-visible { outline-color: var(--on-ink); }
.dock :focus-visible { outline-offset: 2px; }

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

.skip {
  position: absolute; left: 0.5rem; top: -4rem; z-index: 100;
  background: var(--ink); color: var(--on-ink); padding: 0.75rem 1rem; text-decoration: none;
}
.skip:focus { top: 0.5rem; }

.ico { width: 1.25em; height: 1.25em; flex: none; }

/* ---------- buttons ---------- */
.btn {
  max-width: 100%; text-align: center; flex-wrap: wrap;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  min-height: 3.25rem; padding: 0.7rem 1.25rem;
  font-family: var(--f-display); font-weight: 700; font-size: 1.2rem; line-height: 1.1;
  text-decoration: none; border-radius: 4px; border: 2px solid transparent;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform 140ms var(--ease-out), background-color 160ms ease, color 160ms ease, border-color 160ms ease;
  -webkit-appearance: none; appearance: none;
}
.btn:active { transform: scale(0.97); }
.btn-lg { min-height: 3.5rem; font-size: 1.25rem; padding-inline: 1.4rem; }
.btn-block { width: 100%; }
.btn-brand { background: var(--brand); color: #fff; }
.btn-ink { background: var(--ink); color: var(--on-ink); }
.btn-line { border-color: var(--char); color: var(--char); background: transparent; }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }
@media (max-width: 39.99rem) { .btn-row .btn-lg { flex: 1 1 auto; } }

.text-link {
  display: inline-flex; align-items: center; min-height: 2.75rem;
  font-family: var(--f-display); font-weight: 700; font-size: 1.2rem;
  color: var(--brand); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.25em;
  transition: color 160ms ease;
}
.text-link-light { color: var(--on-ink); }

@media (hover: hover) and (pointer: fine) {
  .btn-brand:hover { background: var(--brand-deep); }
  .btn-ink:hover { background: #000; }
  .btn-line:hover { background: var(--char); color: var(--ground); }
  .text-link:hover { color: var(--char); }
  .text-link-light:hover { color: var(--on-deep-muted); }
}

/* ---------- header ---------- */
.site-head { position: relative; z-index: 20; background: var(--ground); }
.head-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1rem; min-height: 4.5rem; }
.brand { display: block; margin-right: auto; padding-block: 0.85rem; flex: 1 1 0; min-width: min(9rem, 100%); max-width: 14rem; }
.brand img { width: 100%; height: auto; }
.nav-desk, .head-call { display: none; }

.menu-btn {
  flex: none; margin-block: 0.5rem;
  -webkit-appearance: none; appearance: none;
  display: inline-flex; align-items: center; gap: 0.6rem;
  min-height: 2.75rem; min-width: 2.75rem; padding: 0 0.85rem;
  background: transparent; border: 2px solid var(--char); border-radius: 4px; color: var(--char);
  font-family: var(--f-display); font-weight: 700; font-size: 1.1rem;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform 140ms var(--ease-out);
}
.menu-btn:active { transform: scale(0.97); }
.menu-lines { position: relative; width: 1.1rem; height: 0.75rem; }
.menu-lines i { position: absolute; left: 0; right: 0; height: 2px; background: currentColor; transition: transform 200ms var(--ease-out); }
.menu-lines i:first-child { top: 0; }
.menu-lines i:last-child { bottom: 0; }
.menu-btn[aria-expanded="true"] .menu-lines i:first-child { transform: translateY(5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-lines i:last-child { transform: translateY(-5px) rotate(-45deg); }

.menu {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--ground); border-bottom: var(--rule) solid var(--char);
  box-shadow: 0 24px 40px -24px rgba(51, 54, 58, 0.45);
  transform-origin: top center;
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
}
/* No JS: the menu is a plain list under the header. With JS it starts closed. */
html:not(.js) .menu { position: static; box-shadow: none; }
html:not(.js) .menu-btn { display: none; }
.js .menu:not([data-state]), .menu[hidden] { display: none; }
.menu[data-state="closed"] { opacity: 0; transform: translateY(-0.5rem); transition-duration: 140ms; }
.menu ul { padding-block: 0.5rem; }
.menu li + li { border-top: 1px solid var(--line); }
.menu a {
  display: flex; align-items: center; min-height: 3.5rem;
  font-family: var(--f-display); font-weight: 700; font-size: 1.6rem; text-decoration: none;
}
.menu a[aria-current="page"] { color: var(--brand); }
.menu-phone { margin: 0; padding-bottom: 1rem; }
.menu-phone a { font-size: 1.25rem; color: var(--brand); min-height: 2.75rem; text-decoration: underline; text-underline-offset: 0.2em; }

/* ---------- mobile dock ---------- */
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem;
  padding: 0.6rem var(--gutter) calc(0.6rem + env(safe-area-inset-bottom));
  background: var(--ground); border-top: 1px solid var(--line);
}
.dock .btn { min-height: 3.25rem; font-size: 1.15rem; padding-inline: 0.5rem; }
body { --dock-h: calc(4.75rem + env(safe-area-inset-bottom)); }

/* ---------- hero: photo and words sit on one ground line ---------- */
.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: fit-content(40%) minmax(0, 1fr);
  grid-template-areas:
    "photo photo"
    "rule  rule"
    "copy  copy"
    "est   est"
    "list  list";
  max-width: 76rem; margin-inline: auto;
}
.hero-photo { grid-area: photo; overflow: hidden; background: var(--char); }
.hero-photo img { width: 100%; height: min(62svh, 34rem); object-fit: cover; object-position: 50% 58%; }
.hero-copy { grid-area: copy; padding: 1.75rem var(--gutter) 1.75rem; }
.hero-h { font-size: clamp(2.6rem, 12.5vw, 6rem); line-height: 0.92; color: var(--char); }
.hero-h .ln { display: inline-block; max-width: 100%; }
.hero-sub { margin: 1rem 0 1.5rem; max-width: 30rem; font-size: 1.125rem; }
.rule-h { grid-area: rule; position: relative; height: var(--rule); background: var(--char); --bite-x: calc(100% - var(--gutter) - 4.5rem); }
.hero-est {
  grid-area: est; margin: 0; padding: 0.9rem var(--gutter) 0;
  font-family: var(--f-display); font-weight: 700; font-size: 1.1rem; line-height: 1.1; color: var(--brand);
}
.hero-area { display: block; text-wrap: pretty; margin-top: 0.3rem; font-family: var(--f-body); font-weight: 400; font-size: 1rem; line-height: 1.4; color: var(--muted); }
/* Phone: the six services sit in a tidy 2 x 3 grid. No half-empty box, no extra vertical line. */
.hero-list { grid-area: list; padding: 0.15rem var(--gutter) 1.5rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; row-gap: 0.15rem; }
.hero-list a {
  overflow-wrap: anywhere;
  display: flex; align-items: center; min-height: 2.75rem;
  padding-block: 0.2rem;
  font-family: var(--f-display); font-weight: 600; font-size: 1.25rem; line-height: 1.1; text-decoration: none;
  transition: color 160ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .hero-list a:hover { color: var(--brand); }
}

/* Signature moment: the ground line sweeps across, the photo rises off it,
   then the bucket bites into the line. Runs once, on load. */
@keyframes draw-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes bite-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes rise-photo {
  from { clip-path: inset(100% 0 0 0); transform: scale(1.06); }
  to { clip-path: inset(0 0 0 0); transform: scale(1); }
}
@keyframes lift { from { opacity: 0; transform: translateY(0.35em); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: no-preference) {
  .js .rule-h { transform-origin: left center; animation: draw-x 800ms var(--ease-in-out) 80ms both; }
  .js .rule-h::after { animation: bite-in 300ms var(--ease-out) 900ms both; }
  .js .hero-photo img { animation: rise-photo 1000ms var(--ease-in-out) 260ms both; }
  .js .hero-h .ln { animation: lift 520ms var(--ease-out) both; }
  .js .hero-h .ln:nth-child(1) { animation-delay: 560ms; }
  .js .hero-h .ln:nth-child(2) { animation-delay: 620ms; }
  .js .hero-h .ln:nth-child(3) { animation-delay: 680ms; }
  .js .hero-sub, .js .hero-btns { animation: fade 360ms ease-out 560ms both; }
  .js .hero-est, .js .hero-list { animation: fade 360ms ease-out 900ms both; }
}

/* ---------- generic bands ---------- */
.band { padding-block: 3.5rem; }
.band-tight { padding-block: 2.5rem 3.5rem; }
.band-paper { background: var(--paper); --cover: var(--paper); }
.sec-h { font-size: clamp(2.2rem, 8vw, 3.5rem); line-height: 0.95; color: var(--char); }
.sec-p { margin: 0.9rem 0 0; max-width: 34rem; color: var(--muted); }
.sec-head { margin-bottom: 1.75rem; }
.row-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.25rem 1.5rem; margin-bottom: 1.5rem; }
.row-head .text-link { margin-bottom: -0.35rem; }

/* services list (home) */
.svc-list { display: grid; grid-template-columns: minmax(0, 1fr); }
.svc { }
.svc-link { display: flex; gap: 1rem; align-items: flex-start; padding-block: 0.85rem; text-decoration: none; }
.svc-text { flex: 1 1 11rem; min-width: 0; }
.svc-ico { width: 3.5rem; height: 3.5rem; flex: none; }
.svc-name { display: block; font-family: var(--f-display); font-weight: 700; font-size: 1.5rem; line-height: 1.1; transition: color 160ms ease; }
.svc-desc { display: block; margin-top: 0.2rem; color: var(--muted); }
@media (hover: hover) and (pointer: fine) {
  a.svc-link:hover .svc-name { color: var(--brand); }
}

/* photo strip */
.strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
.strip-item { overflow: hidden; background: var(--char); border-radius: 3px; }
.strip-item img { width: 100%; height: 100%; object-fit: cover; }
.strip-tall { aspect-ratio: 4 / 5; }
.strip-wide { grid-column: 1 / -1; grid-row: 2; aspect-ratio: 16 / 10; }

/* honest band */
.honest { background: var(--brand-deep); color: var(--on-ink); padding-block: 3.5rem; --cover: var(--brand-deep); }
.honest-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
.honest-photo { overflow: hidden; border-radius: 3px; aspect-ratio: 4 / 3; background: #000; }
.honest-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.honest-h { font-size: clamp(2.2rem, 8vw, 3.6rem); color: var(--on-ink); margin-bottom: 1.25rem; }
.honest .on-ground { border-bottom-color: var(--on-ink); }
.honest-copy p { color: var(--on-deep-muted); max-width: 34rem; font-size: 1.125rem; }
.honest-copy p:last-child { margin-bottom: 0; }


/* CTA */
.cta { padding-block: 3.5rem; background: var(--ground); }
.cta-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
.cta-h { font-size: clamp(2.4rem, 9vw, 4.25rem); line-height: 0.95; }
.cta-body p { max-width: 32rem; }
.cta-alt { margin: 1rem 0 0; }
.cta-alt a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--brand); font-weight: 600; text-underline-offset: 0.2em; }

/* ---------- page heads (inner pages) ---------- */
.phead { padding-top: 2rem; }
.cross { display: grid; grid-template-columns: minmax(0, 1fr); }
.phead-h { font-size: clamp(2.8rem, 15vw, 6rem); line-height: 0.9; }
.phead-intro { padding-block: 1.1rem 0.5rem; font-size: 1.125rem; max-width: 40rem; color: var(--char); }
.phead-intro p { margin: 0; }

/* ---------- services page ---------- */
.sv-list { display: grid; grid-template-columns: minmax(0, 1fr); }
.sv { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; padding-block: 2rem; scroll-margin-top: 1rem; }
.sv:first-child { padding-top: 0.5rem; }
.sv-photo-wide { aspect-ratio: 16 / 10; }
.sv-head { display: flex; align-items: center; gap: 1rem; }
.sv-ico { width: 4rem; height: 4rem; flex: none; }
.sv-h { font-size: clamp(1.8rem, 7vw, 2.4rem); line-height: 1.02; min-width: 0; }
.sv-body p { max-width: 34rem; }
.sv-body p:last-child { margin-bottom: 0; }
.sv-photo { overflow: hidden; border-radius: 3px; aspect-ratio: 4 / 3; background: var(--char); }
.sv-photo img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- gallery ---------- */
.g-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: dense; gap: 0.6rem; }
.g-item { aspect-ratio: 4 / 5; overflow: hidden; border-radius: 3px; background: var(--char); }
.g-wide { grid-column: span 2; aspect-ratio: 8 / 5; }
.g-btn { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; color: inherit; -webkit-appearance: none; appearance: none; cursor: zoom-in; -webkit-tap-highlight-color: transparent; }
.g-btn img { width: 100%; height: 100%; object-fit: cover; transition: transform 280ms var(--ease-out); }
.g-btn:active img { transform: scale(0.985); }
@media (hover: hover) and (pointer: fine) {
  .g-btn:hover img { transform: scale(1.03); }
}

/* before / after (ready for when Jacob sends pairs) */
.ba-wrap { margin-top: 3rem; }
.ba-list { display: grid; gap: 2rem; margin-top: 1.25rem; }
.ba-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem; }
.ba-side { position: relative; overflow: hidden; border-radius: 3px; aspect-ratio: 3 / 4; }
.ba-side img { width: 100%; height: 100%; object-fit: cover; }
.ba-tag { position: absolute; left: 0.5rem; top: 0.5rem; background: var(--ink); color: var(--on-ink); font-family: var(--f-display); font-weight: 700; padding: 0.15rem 0.5rem; border-radius: 2px; }

/* lightbox */
.lightbox {
  width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; padding: 0;
  border: 0; background: rgba(38, 40, 43, 0.97); color: var(--on-ink);
}
.lightbox[open] { display: grid; grid-template-rows: minmax(0, 1fr) auto; animation: lb-in 220ms var(--ease-out); }
.lightbox::backdrop { background: rgba(38, 40, 43, 0.6); }
@keyframes lb-in { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: none; } }
.lb-fig { display: grid; grid-template-rows: minmax(0, 1fr); place-items: center; padding: 1rem var(--gutter) 0; min-height: 0; }
.lb-img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; min-height: 0; }
.lb-ctrls { display: flex; justify-content: center; align-items: center; gap: 0.75rem; padding: 0.75rem var(--gutter) calc(1rem + env(safe-area-inset-bottom)); }
.lb-btn {
  display: grid; place-items: center; width: 3rem; height: 3rem; padding: 0;
  border: 2px solid rgba(233, 232, 229, 0.5); border-radius: 50%; background: transparent; color: var(--on-ink);
  cursor: pointer; transition: transform 140ms var(--ease-out), border-color 160ms ease;
  -webkit-appearance: none; appearance: none;
}
.lb-btn svg { width: 1.4rem; height: 1.4rem; }
.lb-btn:active { transform: scale(0.94); }
.lb-close { margin-left: 1rem; }
.lb-count { min-width: 3.5rem; text-align: center; font-family: var(--f-display); font-weight: 600; font-size: 1.15rem; }
@media (hover: hover) and (pointer: fine) {
  .lb-btn:hover { border-color: var(--on-ink); }
}

/* ---------- about ---------- */
.about-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
.about-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 60%; border-radius: 3px; }
.about-copy .sec-h { margin-bottom: 1.25rem; }
.about-copy p { max-width: 36rem; }
.facts { margin: 1.75rem 0 0; border-top: 1px solid var(--line); }
.facts div { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; padding-block: 0.8rem; border-bottom: 1px solid var(--line); }
.facts dt { flex: 0 0 7.5rem; }
.facts dd { flex: 1 1 12rem; min-width: 0; }
.facts dt { font-family: var(--f-display); font-weight: 700; font-size: 1.15rem; }
.facts dd { margin: 0; }
.facts a { color: var(--brand); font-weight: 600; display: inline-flex; align-items: center; min-height: 2.75rem; margin-block: -0.6rem; }
.about-second { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; align-items: center; }
.about-photo2 { overflow: hidden; border-radius: 3px; aspect-ratio: 4 / 3; }
.about-photo2 img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.about-kit .sec-h { margin-bottom: 1rem; }
.about-kit p { max-width: 32rem; }

/* ---------- contact ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
.contact-direct .big-link:first-child { padding-top: 0; }
.big-link {
  display: grid; gap: 0.15rem; padding-block: 1rem; text-decoration: none;
  border-bottom: 1px solid var(--line); -webkit-tap-highlight-color: transparent;
  transition: transform 140ms var(--ease-out);
}
.big-link:active { transform: scale(0.985); transform-origin: left center; }
.big-k { font-family: var(--f-display); font-weight: 600; font-size: 1.2rem; color: var(--muted); }
.big-v { overflow-wrap: anywhere; font-family: var(--f-display); font-weight: 700; font-size: clamp(2.2rem, 10vw, 3.4rem); line-height: 1; color: var(--brand); transition: color 160ms ease; }
@media (hover: hover) and (pointer: fine) {
  .big-link:hover .big-v { color: var(--char); }
}
.contact-area { padding-top: 1.5rem; }
.foot-h, .mini-h { font-family: var(--f-display); font-weight: 700; font-size: 1.35rem; margin-bottom: 0.4rem; }

.quote { background: var(--paper); padding: 1.5rem var(--gutter) 1.75rem; border-radius: 4px; }
.quote .sec-h.on-ground { margin-bottom: 1.25rem; }
.quote .sec-h { font-size: clamp(1.8rem, 6vw, 2.4rem); margin-bottom: 1.25rem; }
.field { margin-bottom: 1rem; }
.field label { display: block; font-weight: 600; margin-bottom: 0.35rem; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 3.25rem; padding: 0.7rem 0.85rem;
  font: inherit; font-size: 1.0625rem; color: var(--char);
  background: #fff; border: 2px solid rgba(51, 54, 58, 0.4); border-radius: 4px;
  -webkit-appearance: none; appearance: none;
  transition: border-color 160ms ease;
}
.field select {
  appearance: none; -webkit-appearance: none; padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%2333363A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 1.25rem;
}
.field textarea { resize: vertical; min-height: 8rem; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px rgba(106, 22, 34, 0.28); }
.form-note { margin: 1rem 0 0; padding: 0.85rem 1rem; background: var(--ink); color: var(--on-ink); border-radius: 4px; }
.form-note a { color: var(--on-ink); font-weight: 600; }
/* the demo notice eases in instead of popping (browsers without @starting-style just show it) */
.form-note { transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out); }
@starting-style { .form-note { opacity: 0; transform: translateY(4px); } }

/* ---------- footer ---------- */
.site-foot { background: var(--ink); color: var(--on-ink); padding-top: 3rem; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
.foot-logo { width: 100%; max-width: 11rem; }
.foot-col p { margin: 0 0 0.25rem; color: var(--on-ink-muted); }
.foot-col a { color: var(--on-ink); display: inline-flex; align-items: center; min-height: 2.75rem; text-underline-offset: 0.2em; }
.foot-phone { font-family: var(--f-display); font-weight: 700; font-size: 1.75rem; color: var(--on-ink) !important; text-decoration: none; }
.site-foot .foot-h { color: var(--on-ink); }
.foot-nav { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 7rem), 1fr)); column-gap: 1rem; }
.foot-nav a { font-family: var(--f-display); font-weight: 600; font-size: 1.15rem; text-decoration: none; min-width: 2.75rem; }
.foot-base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1.5rem;
  margin-top: 2.5rem; padding-block: 1.25rem; position: relative;
  color: var(--on-ink-muted); font-size: 0.95rem;
}
.foot-base p { margin: 0; }
.foot-base::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); height: var(--rule); background: var(--on-ink); }
.foot-base.bite { --bite-x: min(calc(var(--gutter) + 9rem), calc(100% - var(--gutter) - var(--bite-w))); }
.foot-base.bite::after { bottom: auto; top: calc(var(--rule) - var(--bite-h)); }
@media (hover: hover) and (pointer: fine) {
  .foot-col a:hover { color: var(--on-ink-muted); }
}

/* ---------- scroll reveals (only when JS is running) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(12px); transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out); transition-delay: calc(var(--i, 0) * 60ms); }
  .js .reveal.in { opacity: 1; transform: none; }
  /* A cover in the section's colour lifts off the photo, so the photo rises from the bottom
     edge like the hero. The image itself is never clipped, so lazy-loading and the
     observer both see it normally. */
  .js .reveal-img { position: relative; }
  .js .reveal-img::after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: var(--cover, var(--ground)); transform-origin: top center;
    transition: transform 800ms var(--ease-in-out); transition-delay: calc(var(--i, 0) * 70ms);
  }
  .js .reveal-img.in::after { transform: scaleY(0); }
}

/* ---------- tablet ---------- */
@media (min-width: 40rem) {
  :root { --gutter: 2rem; }
  .strip { grid-template-columns: 1fr 1fr 1fr; }
  .strip-wide { grid-column: auto; grid-row: auto; aspect-ratio: 4 / 5; }
  .honest-photo { aspect-ratio: 16 / 10; }
  .about-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: start; }
  .about-second { grid-template-columns: 1fr 1fr; }
  .quote { padding: 2rem; }
}

/* ---------- desktop ---------- */
@media (min-width: 60rem) {
  :root { --rule: 6px; }
  body { --dock-h: 0px; }
  .dock, .menu-btn, .menu { display: none !important; }
  .nav-desk { display: block; }
  .nav-desk ul { display: flex; gap: 0.25rem; }
  .nav-desk a {
    display: inline-flex; align-items: center; min-height: 2.75rem; padding-inline: 0.75rem;
    font-family: var(--f-display); font-weight: 600; font-size: 1.2rem; text-decoration: none;
    border-bottom: 3px solid transparent; transition: border-color 160ms ease, color 160ms ease;
  }
  .nav-desk a[aria-current="page"] { border-bottom-color: var(--brand); }
  .head-call { display: inline-flex; min-height: 2.9rem; font-size: 1.15rem; }
  .head-row { min-height: 5.25rem; }
  .brand { flex: 0 1 19rem; max-width: 19rem; }

  .hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "copy photo"
      "rule rule"
      "est  list";
    padding-inline: var(--gutter);
  }
  /* the photo stands on the ground line, like the excavator */
  .hero-photo { margin: 2.5rem 0 0 2.75rem; border-radius: 3px 3px 0 0; }
  .rule-h { --bite-x: calc(50% + 0.6rem); }
  .hero-photo img { height: min(66vh, 36rem); min-height: 26rem; object-position: 50% 62%; }
  .hero-copy { align-self: end; padding: 2.5rem 2.75rem 2rem 0; }
  .hero-h { font-size: clamp(4rem, 6.2vw, 5.25rem); } /* capped so "And driveways." stays one line in the copy column */
  /* Desktop strip: "Based in Stoneville" in the first third, the six services as a
     full 3 x 2 grid in the other two thirds. Two complete rows, nothing orphaned. */
  .hero-est {
    grid-area: 3 / 1 / 4 / 3; justify-self: start; align-self: stretch;
    display: block; width: calc(50% - 2.75rem); margin: 0;
    padding: 1.15rem 0 0; font-size: 1.6rem; color: var(--char);
  }
  .hero-list {
    grid-area: 3 / 1 / 4 / 3; align-self: start; margin-left: 50%;
    padding: 0.85rem 0 0 2.75rem;
    grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.25rem;
  }
  .hero-list a { font-size: clamp(1.1rem, 1.4vw, 1.3rem); min-height: 2.75rem; }
  .hero { padding-bottom: 1rem; }

  .band { padding-block: 5rem; }
  .sec-head { margin-bottom: 2.5rem; }
  .sec-head.on-ground { display: flex; align-items: flex-end; justify-content: space-between; gap: 2.75rem; padding-bottom: 0.55rem; border-bottom: var(--rule) solid var(--char); }
  .sec-head.on-ground > .sec-h { padding-bottom: 0; border-bottom: 0; }
  .sec-head .sec-p { margin: 0; max-width: 26rem; flex: 0 1 26rem; }
  .svc-list { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 2.75rem; row-gap: 1.25rem; }

  .strip { grid-template-columns: 1fr 2fr 1fr; height: 32rem; }
  .strip-item { aspect-ratio: auto !important; }

  .honest { padding-block: 5rem; }
  .honest-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 3.5rem; align-items: center; }
  .honest-photo { aspect-ratio: 4 / 5; }

  .cta { padding-block: 5rem; }
  /* heading and the buttons both stand on one ground line */
  .cta-grid { position: relative; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 2.75rem; align-items: end; padding-bottom: 1.5rem; }
  .cta-grid::after { content: ""; position: absolute; left: var(--gutter); right: var(--gutter); bottom: 0; height: var(--rule); background: var(--char); }
  .cta-h.on-ground { padding-bottom: 0; border-bottom: 0; }
  .cta-body .cta-alt { margin-bottom: -0.5rem; }

  .phead { padding-top: 3.5rem; }
  /* title stands on the line; the intro sits under it, starting where the photo column does */
  .cross { position: relative; grid-template-columns: minmax(0, auto) minmax(0, 30rem); justify-content: space-between; align-items: end; column-gap: 3rem; padding-bottom: calc(0.55rem + var(--rule)); }
  .cross::after { content: ""; position: absolute; left: var(--gutter); right: var(--gutter); bottom: 0; height: var(--rule); background: var(--char); }
  .cross .phead-h.on-ground { padding-bottom: 0; border-bottom: 0; }
  .phead-intro { padding: 0 0 0.35rem; }

  .sv-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3.5rem; }
  .sv { align-content: start; padding-block: 2.5rem; }
  .sv:first-child { padding-top: 1rem; }
  .sv-has-photo { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 1fr 1fr; column-gap: 3.5rem; row-gap: 1rem; }
  /* text centred against the photo: heading sits on the midline, body hangs under it */
  .sv-has-photo .sv-head { grid-column: 1; grid-row: 1; align-self: end; }
  .sv-has-photo .sv-body { grid-column: 1; grid-row: 2; align-self: start; }
  .sv-has-photo .sv-photo { grid-column: 2; grid-row: 1 / -1; }
  #civil .sv-head, #civil .sv-body { grid-column: 2; }
  #civil .sv-photo { grid-column: 1; }
  .sv:last-child { padding-bottom: 0; }
  .sv-head { flex-wrap: nowrap; }
  .sv-photo { aspect-ratio: 16 / 10; }
  .sv-photo img { object-position: 50% 60%; }

  .g-grid { grid-template-columns: repeat(4, 1fr); gap: 0.75rem; }

  .contact-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3.5rem; align-items: start; }

  .foot-grid { grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 2.5rem; }
  .foot-nav { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 60rem) and (hover: hover) and (pointer: fine) {
  .nav-desk a:hover { border-bottom-color: var(--char); }
  .nav-desk a[aria-current="page"]:hover { border-bottom-color: var(--brand); }
}

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

/* ================= v3: Team, Prices, Projects, Crew & client login, editor login ================= */

/* empty editable fields never show to visitors (the editor shows their placeholder instead) */
[data-ph]:empty { display: none; }
img[data-fimg][hidden] { display: none; }

/* lists: a short note when a list has nothing in it */
.list-empty { display: none; margin: 0; max-width: 34rem; color: var(--muted); font-size: 1.125rem; }
.list-empty a { color: var(--brand); font-weight: 600; text-underline-offset: 0.2em; }
[data-list]:not(:has([data-item])) ~ .list-empty { display: block; }

/* small secondary links: the crew & client login */
.head-crew { display: none; }
@media (hover: hover) and (pointer: fine) { .head-crew:hover { color: var(--char); } }
.menu-crew { margin: 0; padding-bottom: 1.1rem; }
.menu-crew a { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: 1.05rem; color: var(--muted); font-family: var(--f-body); font-weight: 600; text-underline-offset: 0.2em; }
.menu-crew a[aria-current="page"] { color: var(--brand); }
.menu-phone { padding-bottom: 0.25rem; }
.foot-crew { margin: 0.75rem 0 0 !important; }
.foot-crew a { font-size: 0.95rem; color: var(--on-ink-muted) !important; }

/* ground-coloured button for dark panels (burgundy text on off-white, 9.8:1) */
.btn-ground { background: var(--ground); color: var(--brand); }
@media (hover: hover) and (pointer: fine) { .btn-ground:hover { background: #fff; } }

/* ---------- team ---------- */
.team-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
.member { display: grid; grid-template-columns: min(7.5rem, 36%) minmax(0, 1fr); gap: 1.1rem; align-items: start; }
.member-photo { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 3px; background: var(--brand-deep); }
.member-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* placeholder: a figure standing on the ground line, in the brand's own burgundies */
.member-ph { display: block; width: 100%; height: 100%; }
.member-ph circle, .member-ph path { fill: var(--brand); }
.member-ph rect { fill: var(--ground); }
.member-photo:has(img:not([hidden])) .member-ph { display: none; }
.member-text { min-width: 0; }
.member-name { font-family: var(--f-head); font-weight: 800; font-size: clamp(1.9rem, 8vw, 2.6rem); line-height: 0.95; padding-bottom: 0.45rem; border-bottom: var(--rule) solid var(--char); }
.member-role { margin: 0.6rem 0 0; font-family: var(--f-display); font-weight: 700; font-size: 1.2rem; color: var(--brand); }
.member-line { margin: 0.3rem 0 0; color: var(--muted); max-width: 32rem; }

/* ---------- prices ---------- */
.price-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
.price-list { border-top: 1px solid var(--line); }
.price-row {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.2rem 1.25rem;
  padding-block: 1rem; border-bottom: 1px solid var(--line);
}
.price-name { flex: 1 1 10rem; min-width: 0; font-family: var(--f-display); font-weight: 700; font-size: 1.35rem; line-height: 1.15; }
.price-amt { flex: 0 1 auto; min-width: 0; margin-left: auto; text-align: right; }
.price-v { display: block; font-family: var(--f-display); font-weight: 700; font-size: 1.2rem; line-height: 1.15; color: var(--brand); }
.price-unit { display: block; font-size: 0.95rem; color: var(--muted); }
.price-wrap > .list-empty { margin-top: -1rem; }
.price-side .mini-h { margin-bottom: 0.5rem; }
.price-side p { max-width: 30rem; }

/* ---------- gallery: Standard / Large ----------
   No JS: Large spans 2 columns and dense packing fills what it can.
   With JS (script.js pack): items keep their order and every row is filled exactly. */
.g-item[data-size="large"] { grid-column: span 2; aspect-ratio: 8 / 5; }
.g-grid.packed { grid-auto-flow: row; }
.g-grid.packed > .g-item { align-self: stretch; aspect-ratio: 4 / 5; }
.g-grid.packed > .g-item[data-span="2"] { aspect-ratio: 8 / 5; }
.g-grid.packed > .g-item[data-span="3"] { aspect-ratio: 12 / 5; }
.g-grid.packed > .g-item[data-span="4"] { aspect-ratio: 16 / 5; }

/* ---------- projects ---------- */
.proj-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem 1.75rem; }
.proj-photo { overflow: hidden; border-radius: 3px; aspect-ratio: 4 / 3; background: var(--char); }
.proj-photo img { width: 100%; height: 100%; object-fit: cover; }
.proj-photo:has(> img[hidden]) { display: none; }
.proj-text { padding-top: 1rem; }
.proj-h { font-family: var(--f-head); font-weight: 800; font-size: clamp(1.8rem, 7vw, 2.4rem); line-height: 0.95; padding-bottom: 0.45rem; border-bottom: var(--rule) solid var(--char); }
.proj-p { margin: 0.75rem 0 0; color: var(--muted); max-width: 36rem; }

/* ---------- crew & client hub ---------- */
.hub-panel {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.75rem;
  background: var(--brand-deep); color: var(--on-ink); border-radius: 4px;
  padding: 1.75rem var(--gutter) 2rem;
}
.hub-h { font-family: var(--f-head); font-weight: 800; font-size: clamp(2.2rem, 9vw, 3.6rem); line-height: 0.95; padding-bottom: 0.55rem; border-bottom: var(--rule) solid var(--on-ink); }
.hub-p { margin: 1rem 0 0; max-width: 32rem; font-size: 1.125rem; color: var(--on-deep-muted); }
.hub-status { margin: 0 0 0.35rem; font-family: var(--f-display); font-weight: 700; font-size: 1.35rem; color: var(--on-ink); }
.hub-note { margin: 0; color: var(--on-deep-muted); max-width: 30rem; }
.hub-note a { color: var(--on-ink); font-weight: 600; display: inline-flex; align-items: center; min-height: 2.75rem; margin-block: -0.6rem; text-underline-offset: 0.2em; }
.hub-btn { width: 100%; }
.hub-embed { grid-column: 1 / -1; }
.hub-frame { display: block; width: 100%; height: min(78svh, 46rem); border: 0; border-radius: 3px; background: var(--ground); }
.hub-panel :focus-visible { outline-color: var(--on-ink); }

/* the login page is for Jacob: no call dock */
.page-edit .dock { display: none; }
.page-edit { --dock-h: 0px; }

/* ---------- editor login (edit.html): one graphite card, same style as the editor ---------- */
.login-band { padding-block: 2rem 3.5rem; }
.login-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; justify-items: center; }
.login-card {
  width: 100%; max-width: 25rem; padding: 1.75rem 1.4rem 1.6rem;
  background: var(--ink); color: var(--on-ink); border-radius: 16px;
  box-shadow: 0 20px 44px -22px rgba(51, 54, 58, 0.7);
}
.login-logo { width: 6.5rem; height: auto; margin-bottom: 1.25rem; }
.login-h { font-family: var(--f-head); font-weight: 800; font-size: 2.6rem; line-height: 0.95; padding-bottom: 0.5rem; border-bottom: var(--rule) solid var(--on-ink); }
.login-sub { margin: 0.9rem 0 1.1rem; color: var(--on-ink-muted); }
.login-label { display: block; margin-bottom: 0.35rem; font-family: var(--f-display); font-weight: 600; font-size: 1.1rem; }
.pw-wrap { position: relative; }
.pw-wrap input {
  width: 100%; min-height: 3.25rem; padding: 0.7rem 5rem 0.7rem 0.85rem; font: inherit; font-size: 1.0625rem; color: var(--char);
  background: var(--ground); border: 2px solid transparent; border-radius: 10px; -webkit-appearance: none; appearance: none; caret-color: var(--brand);
}
.pw-wrap input:focus { outline: none; border-color: #fff; box-shadow: 0 0 0 3px rgba(233, 232, 229, 0.35); }
.pw-wrap input[aria-invalid="true"] { border-color: var(--on-deep-muted); }
.pw-show {
  position: absolute; right: 0.3rem; top: 50%; transform: translateY(-50%);
  min-height: 2.75rem; min-width: 4.25rem; padding: 0 0.8rem; border: 0; border-radius: 8px;
  background: #D6D5D2; color: var(--char); font-family: var(--f-display); font-weight: 700; font-size: 1rem; cursor: pointer;
  -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent;
}
.pw-show { transition: transform 140ms var(--ease-out); }
.pw-show:active { transform: translateY(-50%) scale(0.96); }
.pw-show:focus-visible { outline: 2px solid var(--char); outline-offset: 1px; }
.login-err { display: flex; gap: 0.45rem; align-items: flex-start; margin: 0.55rem 0 0; color: var(--on-deep-muted); font-weight: 600; line-height: 1.35; }
.login-err::before { content: ""; flex: none; width: 1.15rem; height: 1.15rem; margin-top: 0.1rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4l9 16H3zM12 10v4.5M12 17.2v.3' fill='none' stroke='%23E0C9CC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain; }
.login-err:empty { display: none; }
.login-go { margin-top: 1.1rem; }
.login-card .btn-block + .btn-block { margin-top: 0.6rem; }
.login-logout { background: rgba(233, 232, 229, 0.1); color: var(--on-ink); }
.login-demo { margin: 0.9rem 0 0; font-size: 0.95rem; color: var(--on-ink-muted); }
.login-demo strong { color: var(--on-ink); }
.login-card :focus-visible { outline-color: var(--on-ink); }
.login-help { width: 100%; max-width: 25rem; }
.login-help .mini-h { margin-bottom: 0.75rem; }
.login-steps { margin: 0; padding-left: 1.4rem; }
.login-steps li { padding-left: 0.25rem; margin-bottom: 0.55rem; }
.login-steps li::marker { font-family: var(--f-display); font-weight: 700; color: var(--brand); }

@media (min-width: 40rem) {
  .member { grid-template-columns: min(11rem, 36%) minmax(0, 1fr); gap: 1.5rem; }
  .proj-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* odd one out at the end gets the full row: never a half-empty row */
  .proj-list:not(.packed) .proj:last-child:nth-child(odd), .proj-list:not(.packed) .proj[data-size="large"] { grid-column: 1 / -1; }
  .proj-list:not(.packed) .proj:last-child:nth-child(odd) .proj-photo, .proj-list:not(.packed) .proj[data-size="large"] .proj-photo,
  .proj-list.packed .proj[data-span="2"] .proj-photo { aspect-ratio: 21 / 9; }
  .hub-panel { padding: 2.25rem 2rem 2.5rem; }
  .hub-btn { width: auto; }
}

@media (min-width: 60rem) {
  /* seven links + the call button still fit one line at 1024 */
  .brand { flex: 0 1 12.25rem; max-width: 12.25rem; }
  /* the crew & client login: a small utility link, not a main nav item */
  .head-crew { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 2.75rem; padding-inline: 0.25rem; font-size: 0.95rem; font-weight: 600; color: var(--muted); text-decoration: none; white-space: nowrap; transition: color 160ms ease; }
  .head-crew svg { width: 1.05rem; height: 1.05rem; }
  .head-crew[aria-current="page"] { color: var(--brand); }
  .nav-desk ul { gap: 0; }
  .nav-desk a { padding-inline: 0.45rem; font-size: 1.1rem; }
  .head-row { gap: 0 0.6rem; }
  .head-call { padding-inline: 1rem; }

  .foot-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.25rem; }

  .team-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; row-gap: 2.75rem; }
  .member:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .member:only-child { grid-template-columns: min(17rem, 36%) minmax(0, 30rem); gap: 2.25rem; }
  .member:only-child .member-name { font-size: 3.4rem; }

  .price-wrap { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: 4rem; align-items: start; }
  .price-wrap > .list-empty { grid-column: 1; margin-top: 0; }
  .price-side { grid-column: 2; grid-row: 1; padding-top: 1rem; }
  .price-name { font-size: 1.5rem; }
  .price-v { font-size: 1.35rem; }

  .proj-list { column-gap: 3rem; row-gap: 3.5rem; }

  .hub-panel { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); column-gap: 3.5rem; align-items: end; padding: 3rem; }
  .hub-action { padding-bottom: 0.2rem; }

  .login-band { padding-block: 3.5rem 5rem; }
  .login-wrap { grid-template-columns: 25rem 22rem; justify-content: center; gap: 4rem; align-items: center; }
  .login-card { padding: 2.25rem 2rem 2rem; }
}
@media (min-width: 80rem) {
  .brand { flex-basis: 17rem; max-width: 17rem; }
  .nav-desk a { padding-inline: 0.7rem; font-size: 1.2rem; }
  .head-row { gap: 0 1rem; }
  .head-crew { padding-inline: 0.5rem; }
}
/* 960-1023: seven links + the call button fill the row, so the small crew link waits for 1024 (it is always in the footer) */
@media (min-width: 60rem) and (max-width: 63.99rem) {
  .head-crew { display: none; }
}

/* Phones: the hero photo sits right on the line, so the bite read as a stray blob on the photo. Show it only on the two-column layout. */
@media (max-width: 59.99rem) { .rule-h::after { display: none; } }

/* iOS Safari: keep the call/text dock on its own layer so it does not flicker or jump while the page scrolls and the toolbar resizes. */
.dock { width: 100%; max-width: 100vw; box-sizing: border-box; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); -webkit-backface-visibility: hidden; backface-visibility: hidden; }

/* Oscar 2 Nov: no bucket "bite" anywhere - it read as a glitch. */
.bite::after, .rule-h::after, .foot-base.bite::after { display: none !important; content: none !important; }

/* Oscar 2 Nov: page slid sideways on iPhone while photos revealed (scale 1.06 poked past the screen edge). Clip the zoom inside each photo and lock sideways scrolling. */
html { overflow-x: hidden; }
@supports (overflow-x: clip) { html, body { overflow-x: clip; } html { overflow-x: clip; } }
.reveal-img, .hero-photo, .g-btn, .proj-photo { overflow: hidden; }

/* Oscar 2 Nov: service list is icon + name only, so centre the name on its tile. */
.svc-link { align-items: center; }

/* logged-out note (shown once after leaving the editor) */
.out-note { position: fixed; left: 50%; bottom: calc(var(--dock-h, 4.5rem) + 1rem); z-index: 70; margin: 0; max-width: calc(100vw - 2rem); box-sizing: border-box; padding: 0.8rem 1.1rem; border-radius: 12px; background: #33363A; color: #fff; font-weight: 600; font-size: 1rem; line-height: 1.3; transform: translateX(-50%); box-shadow: 0 10px 28px -12px rgba(0,0,0,.5); transition: opacity 200ms ease; }
.out-note.is-out { opacity: 0; }
@media (min-width: 60rem) { .out-note { bottom: 1.75rem; } }