/* ==========================================================================
   AG Contracting & Remodeling

   The look came out of a three-way design comparison (design/panel-result.json): the "quiet editorial" direction,
   with faces in the first screen, a real before and after, and brighter brand orange carried in from the other two.
   A ten-reviewer pass (docs/review-round-1.json) shaped the details below.

   Contents
   01  Fonts and tokens        08  Proof strip            15  Where we work        22  Projects page
   02  Base                    09  Services and cards     16  Questions            23  Reviews page, values, about
   03  Type                    10  Project spreads        17  Quote and form       24  Legal pages
   04  Layout                  11  Before and after       18  Inner page heads     25  Footer
   05  Components              12  Meet Aaron and Ava     19  Service page         26  Phone action bar
   06  Header and navigation   13  Reviews                20  Photo rows and tiles 27  Motion and print
   07  Lead (home)             14  How it works           21  Lightbox

   Breakpoints (min-width): 560, 700, 900, 1080, and 1200 for the full navigation
   ========================================================================== */


/* 01  Fonts and tokens
   ========================================================================== */

@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 300 500; font-display: swap; src: url("/fonts/newsreader.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 400; font-display: swap; src: url("/fonts/newsreader-italic.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonts/hanken-grotesk.woff2") format("woff2"); }

:root {
  /* Brand, from the badge logo */
  --orange: #F1592C;        /* buttons (with dark text), rules, stars. Never small text on white. */
  --orange-hover: #F4683F;  /* lighter on hover, so the dark label keeps its contrast (5.4:1) */
  --orange-deep: #B8400F;   /* labels and text links. 5.5:1 on white. */
  --orange-deeper: #983308;
  --charcoal: #353537;
  --on-orange: #1F1F21;     /* text on the bright orange. 4.9:1. */

  /* Paper and ink */
  --paper: #FFFFFF;
  --paper-warm: #F7F3EC;
  --ink: #29292B;
  --ink-soft: #4B4945;
  --muted: #68645C;
  --line: #E3DCD0;
  --line-strong: #8A8378;

  /* Footer band */
  --night: #2B2B2D;
  --night-ink: #F3EFE8;
  --night-muted: #C4BEB4;
  --night-line: #4A4A4D;

  --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "Hanken Grotesk", "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;

  --text-xs: 0.78125rem;  /* 12.5px  eyebrows, sources */
  --text-sm: 0.9rem;      /* captions, labels */
  --text-base: 1.0625rem; /* 17px body */
  --text-lg: 1.25rem;
  --h3: clamp(1.375rem, 1.1rem + 0.8vw, 1.625rem);
  --h2: clamp(1.875rem, 1.3rem + 2.4vw, 2.75rem);
  --h1: clamp(1.9375rem, 1.3rem + 2.9vw, 2.875rem);

  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --container: 75rem;
  --section: clamp(3.5rem, 2.25rem + 6vw, 6.75rem);
  --gap: 1.5rem;
  --radius: 3px;
  --callbar-h: 3.75rem;
}


/* 02  Base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 1.5rem; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: var(--text-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }
[hidden] { display: none !important; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
a[href^="tel:"], a[href^="sms:"] { white-space: nowrap; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--orange-deep); outline-offset: 3px; border-radius: 2px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: 0.75rem 1rem; background: var(--ink); color: #fff; border-radius: var(--radius); }
.skip-link:focus { top: 1rem; }
/* On phones the fixed bar at the bottom must never cover the control that has focus */
@media (max-width: 699px) { html { scroll-padding-bottom: calc(var(--callbar-h) + env(safe-area-inset-bottom, 0px) + 1rem); } }


/* 03  Type
   ========================================================================== */

h1, h2, h3, h4 {
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 380;
  line-height: 1.1;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
h1 { font-size: var(--h1); line-height: 1.07; }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); font-weight: 420; line-height: 1.2; letter-spacing: -0.005em; }
h4 { font-size: 1.1875rem; font-weight: 440; line-height: 1.25; letter-spacing: 0; }
p { text-wrap: pretty; }
.lede { color: var(--ink); font-size: var(--text-lg); line-height: 1.55; }
strong { color: var(--ink); font-weight: 600; }
.stack > * + * { margin-top: 1.125rem; }
.measure { max-width: 36rem; }


/* 04  Layout
   ========================================================================== */

.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.section { padding-block: var(--section); }
.section--warm { background: var(--paper-warm); --line: #DCD3C4; }
.section--tight { padding-block: calc(var(--section) * 0.62); }
/* A hairline between two white sections */
.section--ruled { padding-top: 0; }
.section--ruled > .container { border-top: 1px solid var(--line); padding-top: var(--section); }

.section-head { display: grid; gap: 1.25rem; margin-bottom: clamp(2.25rem, 5vw, 4rem); }
.section-head h2 { max-width: 18ch; }
.section-head--wide h2 { max-width: 26ch; }
.section-head .eyebrow { margin-bottom: 1rem; }
.section-head__aside { display: grid; gap: 1.125rem; justify-items: start; max-width: 27rem; }

/* Two columns: words and a list, words and a form */
.split { display: grid; gap: 2.5rem; }
.split__text { display: grid; gap: 1.25rem; align-content: start; justify-items: start; }
.split__text .eyebrow { margin-bottom: 0; }
.list-title { margin-bottom: 1rem; }
.list-more { margin-top: 1.25rem; }

@media (min-width: 900px) {
  .section-head { grid-template-columns: 7fr 5fr; column-gap: 4rem; align-items: end; }
  .section-head__aside { justify-self: end; }
  .split { grid-template-columns: 5fr 6fr; column-gap: clamp(3rem, 8vw, 7rem); align-items: start; }
}


/* 05  Components
   ========================================================================== */

.eyebrow {
  display: flex; align-items: center; gap: 0.75rem;
  margin-bottom: 1.125rem;
  color: var(--orange-deep);
  font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.17em; line-height: 1.4; text-transform: uppercase;
}
.eyebrow::before { content: ""; flex: none; width: 1.5rem; height: 2px; background: var(--orange); }

.link-arrow {
  position: relative; display: inline-flex; align-items: center; gap: 0.75rem;
  min-height: 2.75rem; padding-bottom: 0.5rem;
  color: var(--ink); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.15em; text-decoration: none; text-transform: uppercase;
}
.link-arrow::after { content: ""; position: absolute; left: 0; bottom: 0.25rem; width: 2.5rem; height: 2px; background: var(--orange); transition: width 0.25s ease; }
.link-arrow:hover::after { width: 100%; }
.icon-arrow { width: 1.5rem; height: 0.75rem; flex: none; transition: transform 0.25s ease; }
.link-arrow:hover .icon-arrow { transform: translateX(4px); }

.text-link { color: var(--orange-deep); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.text-link:hover { color: var(--orange-deeper); text-decoration-thickness: 2px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.625rem;
  min-height: 3.125rem; padding: 0.625rem 1.5rem;
  border: 1px solid transparent; border-radius: var(--radius);
  font-size: 0.96875rem; font-weight: 600; letter-spacing: 0.015em; line-height: 1.2; text-align: center; text-decoration: none;
  cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn--primary { background: var(--orange); color: var(--on-orange); }
.btn--primary:hover { background: var(--orange-hover); }
.btn--primary:focus-visible { outline-color: var(--on-orange); }
.btn--ghost { border-color: var(--charcoal); color: var(--ink); background: transparent; }
.btn--ghost:hover { background: var(--charcoal); color: #fff; }
.btn--dark { background: var(--charcoal); color: #fff; }
.btn--dark:hover { background: #1f1f21; }
.btn--wide { width: 100%; }
.btn--small { min-height: 2.75rem; padding-inline: 1.125rem; font-size: 0.9375rem; }
.btn[disabled] { opacity: 0.65; cursor: default; }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.icon { width: 1.25rem; height: 1.25rem; flex: none; }

/* Photo frame: a fixed shape with the photo cropped inside it. --ratio and --pos are set per placement. */
.frame { position: relative; overflow: hidden; aspect-ratio: var(--ratio, 4 / 3); background: var(--paper-warm); }
.frame picture { display: contents; }
.frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.caption { margin-top: 0.75rem; color: var(--muted); font-size: var(--text-sm); line-height: 1.45; }
.caption--mark { display: flex; align-items: flex-start; gap: 0.625rem; }
.caption--mark::before { content: ""; flex: none; width: 0.875rem; height: 2px; margin-top: 0.62em; background: var(--orange); }

/* Small label on or under a photo: Before, After, In progress */
.tag {
  display: inline-block; padding: 0.3rem 0.6rem;
  background: var(--charcoal); color: #fff;
  font-size: 0.71875rem; font-weight: 600; letter-spacing: 0.14em; line-height: 1.2; text-transform: uppercase;
}
.tag--light { background: var(--paper); color: var(--ink); border: 1px solid var(--line-strong); }
.frame .tag, .strip__item .tag, .tiles__item .tag { position: absolute; left: 0.625rem; top: 0.625rem; z-index: 1; }

.motto { color: var(--ink); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.17em; text-transform: uppercase; }
.stars { display: inline-flex; gap: 2px; color: var(--orange); }
.stars svg { width: 0.9375rem; height: 0.9375rem; }

.checks { display: grid; gap: 0.625rem; }
.checks li { display: grid; grid-template-columns: 1.375rem 1fr; gap: 0.625rem; align-items: start; color: var(--ink); }
.checks svg { width: 1.25rem; height: 1.25rem; margin-top: 0.2rem; color: var(--orange-deep); }

.pullquote { padding-left: 1.25rem; border-left: 2px solid var(--orange); }
.pullquote p { color: var(--ink); font-family: var(--serif); font-size: clamp(1.3125rem, 1.1rem + 0.9vw, 1.625rem); font-style: italic; font-weight: 400; line-height: 1.32; }
.pullquote footer, .pullquote figcaption { margin-top: 0.75rem; color: var(--muted); font-size: var(--text-sm); font-style: normal; }
.pullquote .stars { margin-bottom: 0.625rem; }
.pullquote--small p { font-size: 1.25rem; line-height: 1.4; }
.pullquote__more { white-space: nowrap; }
/* In a narrow column and on phones the link takes its own line, so the dot that separates it is never left
   hanging at the start of one */
.pullquote--small .pullquote__more { display: block; }
.pullquote--small .pullquote__dot { display: none; }
@media (max-width: 559px) { .pullquote__more { display: block; } .pullquote__dot { display: none; } }
.pullquote__more a, .review__more { display: inline-block; padding-block: 0.5rem; }

.crumbs { display: flex; flex-wrap: wrap; gap: 0 0.5rem; color: var(--muted); font-size: var(--text-sm); }
.crumbs li { display: inline-flex; align-items: center; min-height: 1.75rem; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--orange-deep); text-decoration: underline; }
.crumbs li:not(:last-child)::after { content: "/"; margin-left: 0.5rem; color: var(--line-strong); }
/* Phones: the headline right below already names the page */
@media (max-width: 559px) { .crumbs li:last-child { display: none; } .crumbs li:nth-last-child(2)::after { content: none; } .crumbs a { min-height: 2.75rem; display: inline-flex; align-items: center; } }


/* 06  Header and navigation
   ========================================================================== */

.site-header { position: relative; z-index: 20; background: var(--paper); border-bottom: 1px solid var(--line); }
.site-header__inner { display: flex; align-items: center; gap: 0.75rem; min-height: 4.25rem; padding-block: 0.625rem; }
.site-header .btn, .nav-toggle { flex: none; white-space: nowrap; }

.brand { display: flex; align-items: center; gap: 0.75rem; margin-right: auto; text-decoration: none; min-width: 0; }
.brand__badge { width: 2.875rem; height: 2.875rem; flex: none; }
.brand__text { display: grid; gap: 0.2rem; min-width: 0; }
.brand__name { color: var(--ink); font-family: var(--serif); font-size: 1.0625rem; font-weight: 420; line-height: 1.15; letter-spacing: -0.005em; white-space: nowrap; }
.brand__name .br { display: block; }   /* two lines by default: "AG Contracting" / "& Remodeling" */
.brand__amp { font-style: italic; color: var(--orange-deep); }
.brand__place { display: none; color: var(--muted); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; }

.nav-toggle {
  display: inline-flex; align-items: center; gap: 0.5rem; order: 3;
  min-height: 2.75rem; padding: 0 0.75rem;
  border: 1px solid var(--line-strong); border-radius: var(--radius); background: transparent;
  font-size: 0.875rem; font-weight: 600; color: var(--ink); cursor: pointer;
}
.nav-toggle__bars { display: none; position: relative; top: -3px; width: 1.125rem; height: 1.5px; background: currentColor; }
.nav-toggle__bars::before { content: ""; position: absolute; left: 0; top: 6px; width: 1.125rem; height: 1.5px; background: currentColor; }
.no-js .nav-toggle { display: none; }

/* Small screens: the menu drops below the header */
.site-nav { position: absolute; left: 0; right: 0; top: 100%; background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); box-shadow: 0 24px 40px -24px rgb(41 41 43 / 0.25); }
.js .site-nav { display: none; }
.js .site-nav.open { display: block; }
.site-nav__list { padding: 0.5rem var(--gutter) 1rem; }
.site-nav__list a { display: flex; align-items: center; min-height: 3.25rem; border-bottom: 1px solid var(--line); color: var(--ink); font-family: var(--serif); font-size: 1.375rem; text-decoration: none; }
.site-nav__list li:last-child a { border-bottom: 0; }
.site-nav__list a[aria-current="page"] { color: var(--orange-deep); }
/* Without JavaScript the menu is simply a row of links under the logo */
.no-js .site-header__inner { flex-wrap: wrap; }
.no-js .site-nav { position: static; order: 9; flex: 0 0 100%; box-shadow: none; border-bottom: 0; }
.no-js .site-nav__list { display: flex; flex-wrap: wrap; gap: 0 1.25rem; padding: 0.25rem 0 0; }
.no-js .site-nav__list a { min-height: 2.75rem; border-bottom: 0; font-size: 1.0625rem; }

.site-header__call { min-height: 2.75rem; padding-inline: 0.75rem; }
.site-header__call .num { display: none; }
.site-header__quote { display: none; }

/* The smallest phones: the bar at the bottom already has Call */
@media (max-width: 389px) {
  .site-header__call { display: none; }
  .brand__name { font-size: 1rem; }
}
@media (min-width: 460px) {
  .nav-toggle__bars { display: block; }
}
@media (min-width: 560px) {
  .site-header__call .num { display: inline; }
  .site-header__call .word { display: none; }
}
@media (min-width: 700px) {
  .site-header__inner { min-height: 5.25rem; gap: 1rem; }
  .brand__badge { width: 3.5rem; height: 3.5rem; }
  .brand__name { font-size: 1.25rem; }
  .site-header__quote { display: inline-flex; }
}
@media (min-width: 860px) {
  .brand__name .br { display: inline; }
  .brand__place { display: block; }
}
/* The full navigation needs about 1,180px beside the logo and the two buttons */
@media (min-width: 1200px) {
  .nav-toggle { display: none; }
  .site-nav, .js .site-nav, .no-js .site-nav { display: block; position: static; order: 0; flex: none; border: 0; box-shadow: none; }
  .site-nav__list, .no-js .site-nav__list { display: flex; flex-wrap: nowrap; gap: clamp(0.875rem, 1.6vw, 1.75rem); padding: 0; margin-right: 0.5rem; }
  .site-nav__list a, .no-js .site-nav__list a {
    position: relative; min-height: 2.75rem; border: 0; white-space: nowrap;
    font-family: var(--sans); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  }
  .site-nav__list a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0.5rem; height: 2px; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform 0.25s ease; }
  .site-nav__list a:hover::after, .site-nav__list a:focus-visible::after, .site-nav__list a[aria-current="page"]::after { transform: scaleX(1); }
  .site-nav__list a[aria-current="page"] { color: var(--ink); }
  .site-nav__list .nav-only-small { display: none; }
  .site-header { border-bottom: 0; }
  .no-js .site-header__inner { flex-wrap: nowrap; }
}
@media (min-width: 1200px) and (max-width: 1279px) { .brand__place { display: none; } }


/* 07  Lead (home)
   Photos are shown clean; the words never sit on top of them.
   Phone: headline, one photo, one sentence, two buttons, then the two faces.
   Wider: three photos in a row at one height (a kitchen, a bathroom, Aaron and Ava), headline strip beneath.
   ========================================================================== */

.lead { padding-bottom: clamp(2.25rem, 5vw, 3.5rem); }
.lead__grid { display: grid; }
.lead__head { order: 1; padding-block: 1.25rem 1rem; }
.lead__head .eyebrow { margin-bottom: 0.75rem; }
.lead__photos { order: 2; margin-inline: calc(var(--gutter) * -1); }
.lead__figure .frame { --ratio: 16 / 10; }
.lead__figure--b, .lead__figure--c { display: none; }
.lead__figure .caption { display: none; }
.lead__pitch { order: 3; display: grid; gap: 1.125rem; padding-top: 1.125rem; }
.lead__pitch > p { color: var(--ink); font-size: 1.0625rem; line-height: 1.55; max-width: 34rem; }
.lead .actions, .pagehead .actions { width: 100%; max-width: 34rem; }
.lead .actions .btn, .pagehead .actions .btn { flex: 1 1 9rem; padding-inline: 0.75rem; }
.lead .actions .btn .long { display: none; }

/* The two faces, small, with a way to meet them */
.facechip { display: flex; align-items: center; gap: 0.875rem; padding-top: 1.125rem; border-top: 1px solid var(--line); text-decoration: none; color: var(--ink-soft); font-size: 0.9375rem; line-height: 1.4; }
.facechip .frame { --ratio: 1 / 1; --pos: 50% 28%; width: 3.5rem; flex: none; border-radius: 50%; }
.facechip strong { display: block; font-family: var(--serif); font-size: 1.125rem; font-weight: 420; }
.facechip u { color: var(--orange-deep); text-underline-offset: 0.2em; }

@media (min-width: 560px) {
  .pagehead .actions .btn { flex: 0 1 auto; padding-inline: 1.5rem; }
}
@media (min-width: 700px) {
  .lead__photos {
    order: 1; margin-inline: 0;
    display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(0, 0.72fr) minmax(0, 0.8fr); gap: 0 1rem;
    --lead-h: min(27rem, 46vh, 35vw);
  }
  .lead__figure, .lead__figure--b, .lead__figure--c { display: block; }
  .lead__figure .frame { aspect-ratio: auto; height: var(--lead-h); }
  .lead__figure .caption { display: flex; }
  .lead__head { order: 2; padding-block: 1.75rem 0; }
  .lead__head .eyebrow { margin-bottom: 1rem; }
  .lead__pitch { order: 3; padding-top: 1rem; align-content: start; }
  .lead__pitch > p { font-size: 1.125rem; }
  .lead .actions .btn { flex: 1 1 0; padding-inline: 1rem; }
  .facechip { display: none; }
}
@media (min-width: 900px) {
  .lead__grid { grid-template-columns: 7fr 5fr; column-gap: 4rem; }
  .lead__photos { grid-column: 1 / -1; }
  .lead__head { padding-top: 2rem; }
  .lead__pitch { padding-top: 4.1rem; }  /* lines the sentence up with the h1, below the eyebrow */
}
@media (min-width: 1200px) {
  .lead .actions .btn { flex: 0 1 auto; padding-inline: 1.5rem; }
  .lead .actions .btn .long { display: inline; }
  .lead .actions .btn .short { display: none; }
}


/* 08  Proof strip
   ========================================================================== */

.proof__list { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.proof__item { display: grid; align-content: start; gap: 0.2rem; padding: 1.125rem 0.75rem 1.125rem 0; border-top: 1px solid var(--line); }
.proof__item:nth-child(-n + 2) { border-top: 0; }
.proof__item:nth-child(even) { padding-left: 1.125rem; padding-right: 0; border-left: 1px solid var(--line); }
.proof__value { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; color: var(--ink); font-family: var(--serif); font-size: 1.4375rem; font-weight: 420; line-height: 1.15; }
.proof__label { color: var(--muted); font-size: var(--text-sm); line-height: 1.4; }

@media (min-width: 700px) {
  .proof__list { grid-template-columns: repeat(3, 1fr); }
  .proof__item, .proof__item:nth-child(even) { padding: 1.375rem 1.25rem; border-left: 1px solid var(--line); border-top: 1px solid var(--line); }
  .proof__item:nth-child(-n + 3) { border-top: 0; }
  .proof__item:nth-child(3n + 1) { padding-left: 0; border-left: 0; }
}
@media (min-width: 1080px) {
  .proof__list { grid-template-columns: repeat(6, 1fr); }
  .proof__item, .proof__item:nth-child(even) { padding: 1.625rem 1.125rem; border-top: 0; border-left: 1px solid var(--line); }
  .proof__item:first-child { padding-left: 0; border-left: 0; }
  .proof__item:nth-child(3n + 1):not(:first-child) { padding-left: 1.125rem; border-left: 1px solid var(--line); }
  .proof__item:last-child { padding-right: 0; }
  .proof__value { font-size: 1.5rem; }
}


/* 09  Services and cards
   Home, phone: bathrooms and kitchens as full cards, the other six as rows with thumbnails.
   Home, wider: an intro cell, the two tall cards, then six landscape cards.
   .cards is the plain grid used on the services page, related services, towns and the 404 page.
   ========================================================================== */

.service { position: relative; }
/* The whole card is one link: the heading's link is stretched over it */
.service__name a { color: inherit; text-decoration: none; }
.service__name a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.service__num { display: block; color: var(--orange-deep); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.16em; line-height: 1.4; }
.service__name { margin-top: 0.25rem; font-size: 1.3125rem; }
.service__line { margin-top: 0.375rem; color: var(--ink-soft); font-size: 0.9375rem; line-height: 1.5; }
.service:hover .service__name a, .service__name a:focus-visible { text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.service .frame img { transition: transform 0.6s ease; }
.service:hover .frame img { transform: scale(1.03); }

.services__grid { display: grid; gap: 0; }
.services__intro { display: grid; gap: 1.125rem; justify-items: start; margin-bottom: 2rem; }
.services__intro .eyebrow { margin-bottom: 0; }
.services__aside { display: none; }
.services__grid .service { border-top: 1px solid var(--line); }
.services__grid .service:last-child { border-bottom: 1px solid var(--line); }
.services__grid .service--feature { border-top: 0; margin-bottom: 2rem; }
.services__grid .service:not(.service--feature) { display: grid; grid-template-columns: 6.5rem 1fr; column-gap: 1.125rem; align-items: start; padding-block: 1.125rem; }
.services__grid .service:not(.service--feature) .frame { --ratio: 1 / 1; grid-row: 1 / span 3; }
.services__grid .service--feature .frame { --ratio: 4 / 3; margin-bottom: 0.875rem; }
.services__grid .service--feature .service__name { font-size: 1.5rem; }

@media (min-width: 700px) {
  .services__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3rem var(--gap); }
  .services__intro { grid-column: 1 / -1; margin-bottom: 0; max-width: 36rem; }
  .services__grid .service, .services__grid .service:last-child { grid-column: span 2; border: 0; }
  .services__grid .service--feature { grid-column: span 3; margin-bottom: 0; }
  .services__grid .service:not(.service--feature) { display: block; padding: 0; }
  .services__grid .service:not(.service--feature) .frame { --ratio: 4 / 3; margin-bottom: 0.875rem; }
  .services__grid .service__name, .services__grid .service--feature .service__name { font-size: var(--h3); }
  .service__line { font-size: 1rem; max-width: 22rem; }
}
@media (min-width: 900px) {
  .services__grid { row-gap: 3.5rem; }
  .services__intro { grid-column: span 2; align-self: stretch; align-content: start; grid-template-rows: auto auto auto auto 1fr; padding-right: 1.5rem; }
  .services__intro h2 { font-size: clamp(1.75rem, 3vw, 2.75rem); }
  .services__aside { display: block; align-self: end; padding-top: 2rem; }
  .services__grid .service--feature { grid-column: span 2; }
  .services__grid .service--feature .frame { --ratio: 4 / 5; }
}

.cards { display: grid; gap: 2.5rem var(--gap); }
.cards .frame { --ratio: 4 / 3; margin-bottom: 0.875rem; }
.cards .service__name { font-size: var(--h3); }
.cards__note { margin-top: 2rem; max-width: 44rem; }
.service--note { align-self: start; padding-top: 1rem; border-top: 2px solid var(--charcoal); }
.service--note .towns { margin-top: 1rem; }
@media (min-width: 560px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 700px) { .cards--three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 3.25rem; } .cards--four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .cards--four { grid-template-columns: repeat(4, minmax(0, 1fr)); } }


/* 10  Project spreads
   One large photo, one or two smaller views, and a few true sentences.
   ========================================================================== */

.project { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.project + .project { margin-top: clamp(3.25rem, 8vw, 6rem); }
.project__main .frame { --ratio: 4 / 3; }
.project--tall .project__main .frame { --ratio: 4 / 5; }
.project__meta { display: flex; flex-wrap: wrap; gap: 0.125rem 0.625rem; color: var(--muted); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.15em; line-height: 1.5; text-transform: uppercase; }
.project__num { color: var(--orange-deep); }
.project__title { margin-top: 0.5rem; font-size: 1.625rem; font-weight: 380; line-height: 1.14; }
.project__body { display: grid; gap: 1rem; justify-items: start; max-width: 38rem; }
.project__quote p { color: var(--ink); font-family: var(--serif); font-size: 1.25rem; font-style: italic; line-height: 1.4; }
.project__quote footer { margin-top: 0.5rem; color: var(--muted); font-size: var(--text-sm); }
.project__detail { font-size: 1rem; line-height: 1.6; }
.project__side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.project__side .frame { --ratio: 4 / 3; }
.project__side .frame:only-child { grid-column: 1 / -1; --ratio: 3 / 2; }
/* A narrow portrait beside another photo: each keeps its own shape and the two share one height.
   On its own it stays a portrait at a modest size. (The shape is set on each frame in the template.) */
.project__side--fit { display: flex; }
.project__side--fit .frame { flex: var(--ratio) 1 0%; min-width: 0; }
.project__side--solo .frame:only-child { max-width: 12.5rem; }
/* In the narrow desktop column a tall side photo would stretch the large photo beside it into a slice */
@media (min-width: 900px) and (max-width: 1199px) { .project__side--solo .frame:only-child { max-width: 9rem; } }
@media (max-width: 899px) { .project__side--fit { max-width: 34rem; } }

/* Phones: the home page keeps to one photo per job, and three reviews */
@media (max-width: 699px) {
  .project--home .project__side { display: none; }
  .reviews__grid--home .review:nth-child(4), .reviews__grid--home .review:nth-child(5) { display: none; }
}
@media (min-width: 560px) {
  .project__title { font-size: 1.875rem; }
}
/* Tablets: a portrait photo at full width would be taller than the screen */
@media (min-width: 560px) and (max-width: 899px) {
  .project--tall .project__main, .project--tall .project__side, .project__side:has(.frame:only-child) { max-width: 30rem; }
}
@media (min-width: 900px) {
  .project { grid-template-columns: repeat(12, 1fr); grid-template-rows: auto 1fr auto; gap: 0 var(--gap); }
  .project__main { grid-area: 1 / 1 / -1 / span 8; display: grid; container-type: inline-size; }
  /* The large photo grows to meet a taller column of words, but only so far: past about 6 wide to 5 tall a
     landscape photo turns into a slice. Beyond that it stays put and the column runs on beside it. */
  .project__main .frame { width: 100%; min-height: min(100%, 83cqw); --ratio: 3 / 2; }
  .project__head, .project__body, .project__side { grid-column: 9 / -1; padding-left: 1.5rem; }
  .project__head { grid-row: 1; }
  .project__body { grid-row: 2; align-content: start; gap: 1.125rem; padding-top: 1.5rem; }
  .project__side { grid-row: 3; align-self: end; margin-top: 1.75rem; }
  .project--flip .project__main { grid-column: 5 / -1; }
  .project--flip .project__head, .project--flip .project__body, .project--flip .project__side { grid-column: 1 / span 4; padding-left: 0; padding-right: 1.5rem; }
  .project__title { font-size: 2.125rem; }
  .project__quote p { font-size: 1.3125rem; }

  /* A portrait photo gets a narrower, taller frame and more room for the words */
  .project--tall .project__main { grid-column: 1 / span 6; }
  .project--tall .project__main .frame { --ratio: 4 / 5; min-height: min(100%, 150cqw); }
  .project--tall .project__head, .project--tall .project__body, .project--tall .project__side { grid-column: 7 / -1; }
  .project--tall.project--flip .project__main { grid-column: 7 / -1; }
  .project--tall.project--flip .project__head, .project--tall.project--flip .project__body, .project--tall.project--flip .project__side { grid-column: 1 / span 6; }
}


/* 11  Before and after
   The words come first, then a small "before" beside a large "after". Labels sit under the photos.
   ========================================================================== */

.pair { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
.pair--home { margin-top: clamp(3.25rem, 8vw, 6rem); padding-top: clamp(2.5rem, 6vw, 4rem); border-top: 1px solid var(--line); }
.pair__fig figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.375rem 0.75rem; margin-top: 0.75rem; color: var(--muted); font-size: var(--text-sm); line-height: 1.45; }
.pair__fig .frame { --ratio: 4 / 3; }
.pair__text { display: grid; gap: 1rem; justify-items: start; align-content: start; max-width: 40rem; }
.pair__text .eyebrow { margin-bottom: 0; }
@media (min-width: 700px) {
  .pair { grid-template-columns: 5fr 7fr; column-gap: var(--gap); align-items: end; }
  .pair__text { grid-column: 1 / -1; padding-bottom: 0.5rem; }
}
@media (min-width: 1080px) {
  .pair { grid-template-columns: 3fr 4fr 5fr; align-items: start; }
  .pair__text { grid-column: auto; padding: 0 1rem 0 0; }
}


/* 12  Meet Aaron and Ava
   ========================================================================== */

.about__grid { display: grid; gap: 2.25rem; }
.about__photo > figure > .frame { --ratio: 4 / 3; }
.about__text { display: grid; gap: 1.25rem; align-content: start; justify-items: start; }
.about__text .eyebrow { margin-bottom: 0; }
/* Phones: the words first ("Meet us" lands here), then the photos */
@media (max-width: 699px) { .about__text { order: -1; } }
.about__crew { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; width: 100%; margin-top: 1.5rem; }
.about__crew .frame { --ratio: 4 / 3; }
.about__crew figcaption { margin-top: 0.5rem; color: var(--muted); font-size: 0.8125rem; line-height: 1.4; }
@media (min-width: 700px) { .about__grid { grid-template-columns: 2fr 3fr; column-gap: 2.5rem; align-items: start; } }
@media (min-width: 900px) { .about__grid { grid-template-columns: 5fr 6fr; column-gap: clamp(3rem, 8vw, 7rem); } .about__text { padding-top: 0.75rem; } }


/* 13  Reviews
   Short excerpts on the home page (word for word), full text on the reviews page.
   ========================================================================== */

.reviews__grid { display: grid; gap: 0; }
.review { padding-block: 1.75rem; border-top: 1px solid var(--line); }
.reviews__grid .review:last-child { border-bottom: 1px solid var(--line); }
.review__top { display: flex; flex-wrap: wrap; align-items: center; align-content: flex-start; gap: 0.375rem 0.875rem; margin-bottom: 0.875rem; }
.review__top .stars { flex-basis: 100%; }
.review__source { color: var(--muted); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; }
.review blockquote p { color: var(--ink); font-family: var(--serif); font-size: 1.1875rem; line-height: 1.5; }
.review__name { padding-top: 0.75rem; color: var(--ink); font-size: 1rem; font-weight: 600; }
.review__name span { display: block; color: var(--muted); font-size: var(--text-sm); font-weight: 400; }
.review__lead { color: var(--ink); margin-bottom: 0.75rem; }
@media (min-width: 900px) {
  .reviews__grid { grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .reviews__grid .review, .reviews__grid .review:last-child { padding: 2.25rem 2rem; border: 0; border-left: 1px solid var(--line); }
  .reviews__grid .review:nth-child(3n + 1) { padding-left: 0; border-left: 0; }
  .reviews__grid .review:nth-child(3n) { padding-right: 0; }
  .reviews__grid .review:nth-child(n + 4) { border-top: 1px solid var(--line); }
}

.solo-review { padding-left: 1.25rem; border-left: 2px solid var(--orange); }
.solo-review p { color: var(--ink); font-family: var(--serif); font-size: clamp(1.1875rem, 1.05rem + 0.6vw, 1.375rem); line-height: 1.5; }
.solo-review__more { margin-top: 1.25rem; }


/* 14  How it works
   ========================================================================== */

.steps { display: grid; }
.step { display: grid; grid-template-columns: 3rem 1fr; align-content: start; gap: 0.375rem 0.5rem; padding-block: 1.5rem; border-top: 1px solid var(--line); }
.step__num { grid-row: 1 / span 2; padding-top: 0.3rem; color: var(--orange-deep); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.16em; }
.step p { grid-column: 2; font-size: 1rem; line-height: 1.6; }
@media (min-width: 700px) { .steps { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; } }
@media (min-width: 1080px) {
  .steps--four { grid-template-columns: repeat(4, 1fr); column-gap: var(--gap); }
  .steps--four .step { display: block; padding: 1.75rem 1.25rem 0 0; border-top: 2px solid var(--charcoal); }
  .steps--four .step__num { display: block; margin-bottom: 1.25rem; padding-top: 0; }
  .steps--four .step__title { min-height: 2.4em; margin-bottom: 0.75rem; }
}


/* 15  Where we work
   Links are underlined in orange, so a town with its own page is not told apart by color alone.
   ========================================================================== */

.towns { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.5rem; width: 100%; border-top: 1px solid var(--line); }
.towns--one { grid-template-columns: 1fr; }
.towns li { border-bottom: 1px solid var(--line); }
.towns a, .towns span { display: flex; align-items: center; min-height: 3.5rem; color: var(--ink); font-family: var(--serif); font-size: clamp(1.25rem, 1rem + 1vw, 1.5rem); font-weight: 380; transition: color 0.2s ease, padding-left 0.2s ease; }
.towns a { text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
.towns span { color: var(--ink-soft); }
.towns a:hover { color: var(--orange-deep); padding-left: 0.375rem; }
@media (min-width: 900px) { .towns { column-gap: 2.5rem; } .towns a, .towns span { min-height: 4rem; } }


/* 16  Questions
   ========================================================================== */

.faq__list { width: 100%; border-top: 1px solid var(--line); }
.qa { border-bottom: 1px solid var(--line); }
.qa summary { position: relative; display: block; padding: 1.25rem 3rem 1.25rem 0; color: var(--ink); font-family: var(--serif); font-size: clamp(1.1875rem, 1rem + 0.7vw, 1.375rem); font-weight: 420; line-height: 1.25; cursor: pointer; list-style: none; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::before, .qa summary::after { content: ""; position: absolute; right: 0.375rem; top: 50%; width: 0.875rem; height: 2px; background: var(--orange-deep); transition: transform 0.2s ease; }
.qa summary::after { transform: rotate(90deg); }
.qa[open] summary::after { transform: rotate(0deg); }
.qa summary:hover { color: var(--orange-deep); }
.qa p { padding: 0 2rem 1.5rem 0; max-width: 38rem; }
/* Where a ruled section follows, two hairlines in a row would look like an empty row */
@media (max-width: 899px) {
  .section--ruled .faq__list .qa:last-child, .section--ruled .towns li:last-child, .section--ruled .towns:not(.towns--one) li:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
}


/* 17  Quote and form
   ========================================================================== */

.quote__direct { display: grid; gap: 0.875rem; width: 100%; margin-top: 0.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.quote__phone { color: var(--ink); font-family: var(--serif); font-size: clamp(2rem, 1.5rem + 2vw, 2.625rem); font-weight: 380; line-height: 1.1; text-decoration: none; }
.quote__phone:hover { color: var(--orange-deep); }
.quote__email a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.quote__voice { margin-top: 1.25rem; }
.next { width: 100%; margin-top: 1rem; }
.next__title { margin-bottom: 1rem; font-size: 1.5rem; }
.nextsteps { display: grid; gap: 0.75rem; counter-reset: n; width: 100%; }
.nextsteps li { display: grid; grid-template-columns: 2rem 1fr; gap: 0.5rem; counter-increment: n; color: var(--ink); }
.nextsteps li::before { content: "0" counter(n); color: var(--orange-deep); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.14em; padding-top: 0.3rem; }

.form { display: grid; grid-template-columns: 1fr; gap: 1.125rem 1rem; padding: 1.5rem 1.25rem; background: var(--paper); border: 1px solid var(--line); scroll-margin-top: 1.25rem; }
.form__title { font-size: 1.5rem; font-weight: 420; line-height: 1.2; letter-spacing: -0.005em; }
.field { display: grid; gap: 0.4rem; align-content: start; }
.field label { color: var(--ink); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.01em; }
.field__optional { color: var(--muted); font-weight: 400; }
.field input:not([type="checkbox"]), .field select, .field textarea {
  width: 100%; min-height: 3rem; padding: 0.625rem 0.875rem;
  background: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--radius);
  font-size: 1rem; line-height: 1.4; color: var(--ink);
}
.field textarea { min-height: 6.5rem; resize: vertical; }
.field select {
  appearance: none; padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2329292B' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; background-size: 0.75rem;
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--orange-deep); outline-offset: 1px; border-color: var(--orange-deep); }
.field--check { grid-template-columns: 1.5rem 1fr; gap: 0.875rem; align-items: start; padding-top: 0.25rem; }
.field--check input { width: 1.5rem; height: 1.5rem; margin: 0.1rem 0 0; accent-color: var(--orange-deep); }
.field--check label { color: var(--ink-soft); font-size: 0.8125rem; font-weight: 400; line-height: 1.55; }
.field--trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__foot { display: grid; gap: 0.875rem; }
.form__note, .form-note { color: var(--muted); font-size: var(--text-sm); text-align: center; }
.form-note:empty { display: none; }
.form-note.err { padding: 0.75rem 1rem; background: #FBEDE7; border: 1px solid #E9B9A6; border-radius: var(--radius); color: #7A2306; text-align: left; }
@media (min-width: 560px) {
  .form { grid-template-columns: 1fr 1fr; padding: 2.25rem; }
  .form > * { grid-column: 1 / -1; }
  .form > .field--half { grid-column: auto; }
}


/* 18  Inner page heads
   Words on one side, one photo on the other. On phones: headline, sentence, buttons, then the photo.
   ========================================================================== */

.pagehead { padding-block: clamp(1.25rem, 3vw, 2.25rem) clamp(2.5rem, 6vw, 4.5rem); }
.pagehead__grid { display: grid; gap: 1.5rem; }
.pagehead__text { display: grid; gap: 1.125rem; align-content: start; justify-items: start; }
.pagehead__text .eyebrow { margin-bottom: 0; }
.pagehead__text h1 { max-width: 20ch; }
.pagehead__text .lede { max-width: 36rem; }
.pagehead__photo .frame { --ratio: 4 / 3; }
.pagehead--plain .pagehead__text h1 { max-width: 24ch; }
@media (max-width: 899px) {
  .pagehead__photo { margin-inline: calc(var(--gutter) * -1); }
  .pagehead__photo .frame { --ratio: 16 / 10; }
  .pagehead__grid--photo-tall .pagehead__photo .frame { --ratio: 5 / 4; }
  .pagehead__photo .caption { padding-inline: var(--gutter); }
}
@media (min-width: 900px) {
  .pagehead__grid { grid-template-columns: 6fr 6fr; column-gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
  .pagehead__grid--photo-tall { grid-template-columns: 7fr 5fr; }
  .pagehead__grid--photo-tall .pagehead__photo .frame { --ratio: 4 / 5; }
  .pagehead--plain .pagehead__grid { grid-template-columns: 1fr; }
}


/* 19  Service page
   ========================================================================== */

.includes { width: 100%; border-top: 1px solid var(--line); }
.includes li { display: grid; gap: 0.25rem; padding-block: 1.125rem; border-bottom: 1px solid var(--line); }
.includes h3 { font-size: 1.25rem; }
.includes p { font-size: 1rem; line-height: 1.55; }
@media (min-width: 560px) { .includes li { grid-template-columns: 11rem 1fr; column-gap: 1.5rem; align-items: baseline; } }

.cta-band { display: grid; gap: 1.25rem; justify-items: start; }
.cta-band h2 { max-width: 22ch; }
.cta-band__text { margin-top: 1rem; max-width: 36rem; }
@media (min-width: 900px) { .cta-band { grid-template-columns: 1fr auto; align-items: center; column-gap: 3rem; } .cta-band .actions { justify-content: flex-end; } }


/* 20  Photo rows and tiles
   .strip: each photo keeps close to its own shape and a row shares one height (projects page).
   .tiles: an even grid, one tile shape for the whole gallery (service and town pages).
   ========================================================================== */

.strip { display: flex; flex-wrap: wrap; gap: 0.625rem; align-self: start; }
.strip__row { display: contents; }
.strip__item { position: relative; flex: calc(var(--r) * 10) 1 calc(var(--r) * 11rem); min-width: 0; aspect-ratio: var(--r); background: var(--paper-warm); overflow: hidden; }
.strip__item picture, .tiles__item picture { display: contents; }
.strip__item img, .tiles__item img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); transition: transform 0.5s ease; }
a.strip__item:hover img, a.tiles__item:hover img { transform: scale(1.03); }
/* Wider than a phone: the rows chosen in the template. Each photo's width follows its shape, so a row is exactly
   full width and all of its photos are one height. */
@media (min-width: 500px) {
  .strip { flex-direction: column; flex-wrap: nowrap; }
  .strip__row { display: flex; gap: inherit; }
  .strip__row .strip__item { flex: var(--r) 1 0%; }
}
@media (min-width: 900px) { .strip { gap: 0.875rem; } }

.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.625rem; }
.tiles__item { position: relative; aspect-ratio: 4 / 3; background: var(--paper-warm); overflow: hidden; }
.tiles--tall .tiles__item { aspect-ratio: 4 / 5; }
.tiles--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Three across on a phone is a small tile: the label shrinks to fit on one line */
@media (max-width: 559px) { .tiles--three .tag { left: 0.25rem; top: 0.25rem; padding: 0.15rem 0.35rem; font-size: 0.5625rem; letter-spacing: 0.06em; white-space: nowrap; } }
@media (min-width: 900px) { .tiles { grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 0.875rem; } }


/* 21  Lightbox
   ========================================================================== */

.lb { position: fixed; inset: 0; z-index: 60; display: none; align-items: center; justify-content: center; background: rgb(24 24 26 / 0.95); }
.lb.on { display: flex; }
.lb figure { margin: 0; max-width: 94vw; }
.lb img { max-width: 94vw; max-height: 82vh; margin-inline: auto; }
.lb figcaption { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-top: 0.75rem; color: #E9E5DE; font-size: var(--text-sm); text-align: center; }
.lb button { position: absolute; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0 0 0.25rem; background: rgb(24 24 26 / 0.6); border: 0; border-radius: 50%; color: #fff; font-size: 2rem; font-weight: 300; line-height: 1; cursor: pointer; }
.lb :focus-visible { outline-color: #fff; }
.lb-x { top: 0.5rem; right: 0.5rem; }
.lb-p { left: 0.375rem; top: 50%; transform: translateY(-50%); }
.lb-n { right: 0.375rem; top: 50%; transform: translateY(-50%); }


/* 22  Projects page
   ========================================================================== */

.filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.filters button { min-height: 2.75rem; padding: 0 1rem; background: var(--paper); border: 1px solid var(--line-strong); border-radius: 999px; color: var(--ink); font-size: 0.9375rem; font-weight: 500; cursor: pointer; }
.filters button[aria-pressed="true"] { background: var(--charcoal); border-color: var(--charcoal); color: #fff; }
.no-js .filters { display: none; }
.job { display: grid; gap: 1.5rem; padding-block: clamp(2.25rem, 6vw, 4rem); border-top: 1px solid var(--line); scroll-margin-top: 1rem; }
/* The first job showing (whatever the filter) starts clean under the chips */
.job:not([hidden]):not(.job:not([hidden]) ~ .job) { border-top: 0; padding-top: 0; }
.job__text { display: grid; gap: 0.875rem; align-content: start; justify-items: start; }
.job__text h2 { font-size: clamp(1.625rem, 1.3rem + 1.4vw, 2.125rem); }
.job__text p { max-width: 36rem; }
@media (min-width: 1000px) { .job { grid-template-columns: 4fr 8fr; column-gap: clamp(2rem, 5vw, 4rem); } }


/* 23  Reviews page, values, about
   ========================================================================== */

.summary { display: grid; grid-template-columns: 1fr 1fr; gap: 0; width: 100%; max-width: 30rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.summary > div { padding: 1.125rem 0; }
.summary > div + div { padding-left: 1.25rem; border-left: 1px solid var(--line); }
.reviews__full { display: grid; gap: 0; }
.reviews__full .review { padding-block: 2.25rem; scroll-margin-top: 1rem; }
.reviews__full .review:last-child { border-bottom: 1px solid var(--line); }
.reviews__full .review blockquote p { font-size: clamp(1.1875rem, 1.05rem + 0.6vw, 1.375rem); line-height: 1.5; }
@media (min-width: 900px) {
  /* Who and where on the left, the words on the right */
  .reviews__full .review { display: grid; grid-template-columns: 4fr 8fr; grid-template-areas: "top quote" "name quote"; grid-template-rows: auto 1fr; column-gap: clamp(2rem, 5vw, 4rem); align-items: start; }
  .reviews__full .review__top { grid-area: top; margin-bottom: 0.5rem; }
  .reviews__full .review__name { grid-area: name; padding-top: 0; font-family: var(--serif); font-size: 1.5rem; font-weight: 420; }
  .reviews__full .review blockquote { grid-area: quote; }
}

.values { display: grid; gap: 0; border-top: 2px solid var(--charcoal); }
.values li { display: grid; gap: 0.5rem; align-content: start; padding-block: 1.5rem; border-bottom: 1px solid var(--line); }
.values p { font-size: 1rem; line-height: 1.6; }
@media (min-width: 700px) { .values { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; } }
@media (min-width: 1080px) { .values { grid-template-columns: repeat(4, 1fr); column-gap: var(--gap); border-top: 0; } .values li { border-top: 2px solid var(--charcoal); border-bottom: 0; padding: 1.5rem 1rem 0 0; } .values h3 { min-height: 2.4em; } }

/* About page sections: photo beside words, alternating */
.story { display: grid; gap: 1.75rem; }
.story + .story { margin-top: clamp(3rem, 7vw, 5.5rem); }
.story__text { display: grid; gap: 1.125rem; align-content: start; justify-items: start; }
.story__text p { max-width: 36rem; }
.story__photo .frame { --ratio: 4 / 3; }
@media (min-width: 560px) and (max-width: 899px) { .story__photo { max-width: 32rem; } }
@media (min-width: 900px) {
  .story { grid-template-columns: 5fr 6fr; column-gap: clamp(3rem, 8vw, 6rem); align-items: center; }
  .story--flip .story__photo { order: 2; }
  .story--text { grid-template-columns: 1fr; }
  .story--text .story__text { max-width: 44rem; }
}


/* 24  Legal pages
   ========================================================================== */

.prose { max-width: 46rem; }
.prose h2 { margin: 2.25rem 0 0.625rem; font-size: 1.5rem; }
.prose p { margin-bottom: 0.875rem; }
.prose a { color: var(--orange-deep); }
.prose .muted { color: var(--muted); font-size: var(--text-sm); }


/* 25  Footer
   The one dark band on the page.
   ========================================================================== */

.site-footer { padding-top: clamp(3.25rem, 7vw, 5rem); background: var(--night); color: var(--night-muted); font-size: 0.9375rem; }
.site-footer :focus-visible { outline-color: #fff; }
.site-footer__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.25rem 1.5rem; }
.site-footer__brand { grid-column: 1 / -1; display: grid; gap: 0.875rem; justify-items: start; max-width: 24rem; }
.site-footer__badge { display: grid; place-items: center; width: 5.25rem; height: 5.25rem; background: #fff; border-radius: 50%; }
.site-footer__badge img { width: 4.5rem; height: 4.5rem; }
.site-footer__name { color: var(--night-ink); font-family: var(--serif); font-size: 1.375rem; line-height: 1.2; }
.motto--light { color: var(--night-ink); }
.site-footer__heading { margin-bottom: 0.5rem; color: var(--night-ink); font-family: var(--sans); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.17em; text-transform: uppercase; }
.site-footer a { display: inline-flex; align-items: center; min-height: 2.75rem; padding-block: 0.625rem; color: var(--night-ink); line-height: 1.35; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 0.25em; }
.site-footer__col--contact { grid-column: 1 / -1; }
.site-footer__legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 2rem; margin-top: clamp(2.25rem, 5vw, 3.5rem); padding-block: 1.125rem calc(1.125rem + var(--callbar-h) + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--night-line); font-size: var(--text-sm); }
.site-footer__legal ul { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
@media (min-width: 700px) {
  .site-footer__grid { grid-template-columns: repeat(3, 1fr); column-gap: 2.5rem; }
  .site-footer__brand { grid-column: 1 / -1; }
  .site-footer__col--contact { grid-column: auto; }
  .site-footer__legal { padding-bottom: 1.125rem; }
}
@media (min-width: 900px) {
  .site-footer__grid { grid-template-columns: 1.5fr 1.15fr 0.9fr 1.2fr; }
  .site-footer__brand { grid-column: auto; }
  .site-footer a { min-height: 2.25rem; padding-block: 0.4rem; }
}


/* 26  Phone action bar
   Slim, fixed to the bottom of small screens: Call, Text, Free quote.
   ========================================================================== */

.callbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: 1fr 1fr 1.35fr; padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--paper); border-top: 1px solid var(--line); box-shadow: 0 -10px 30px -18px rgb(41 41 43 / 0.35); }
.callbar__item { display: flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: var(--callbar-h); color: var(--ink); font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.02em; text-decoration: none; }
.callbar__item + .callbar__item { border-left: 1px solid var(--line); }
.callbar__item--primary { background: var(--orange); color: var(--on-orange); border-left: 0; }
.callbar__item:focus-visible { outline-offset: -3px; }
.callbar__item--primary:focus-visible { outline-color: var(--on-orange); }
@media (min-width: 700px) { .callbar { display: none; } }


/* 27  Motion and print
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .service:hover .frame img, a.strip__item:hover img, a.tiles__item:hover img { transform: none; }
}
@media print { .callbar, .nav-toggle, .site-nav, .lb { display: none; } .site-footer { background: none; color: #000; } }