/* Keating Builders shared styles (all pages). Page-specific rules live in each page's inline <style>. */

/* ─── Fonts (self-hosted, OFL) ─── */
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 300 500; font-display: swap; src: url('/fonts/newsreader-latin-var.woff2') format('woff2'); }
@font-face { font-family: 'Newsreader'; font-style: italic; font-weight: 300 500; font-display: swap; src: url('/fonts/newsreader-italic-latin-var.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 500; font-display: swap; src: url('/fonts/inter-latin-var.woff2') format('woff2'); }

/* ─── Tokens ─── */
:root {
  --color-cream:      #efede7;
  --color-card:       #e9e6dd;
  --color-dark:       #181711;
  --color-ink-soft:   #46443a;
  --color-olive:      #3c4632;
  --color-olive-dark: #2c3424;
  --color-olive-text: #4b5139;
  --color-stone:      #a7a284;
  --color-rule:       #c8c5ad;
  --color-scrap:      #e9e5da; /* base tone of the fibrous collage paper */

  --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-sans:    'Inter', system-ui, -apple-system, sans-serif;

  --track-wide: .22em;
  --gutter: 1rem;
  --header-h: 76px;
  --ease: cubic-bezier(.2,.7,.2,1);
}
@media (min-width: 640px)  { :root { --gutter: 1.5rem; } }
@media (min-width: 1024px) { :root { --gutter: 2.5rem; --header-h: 104px; } }
@media (min-width: 1280px) { :root { --gutter: 3.25rem; } }

/* ─── Reset ─── */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-display);
  color: var(--color-dark);
  background-color: var(--color-cream);
  background-image: url('/images/graphics/paper-grain.jpg');
  background-image: image-set(url('/images/graphics/paper-grain-512w.avif') type('image/avif'), url('/images/graphics/paper-grain.jpg') type('image/jpeg'));
  background-size: 512px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video { max-width: 100%; display: block; }
picture { display: contents; }
h1, h2, h3, p, ul { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--color-olive); outline-offset: 3px; }
.site-header :focus-visible, .mobile-nav :focus-visible, .site-footer :focus-visible { outline-color: var(--color-cream); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 1rem; top: -100px; z-index: 100; background: var(--color-olive); color: var(--color-cream); padding: .75rem 1rem; font: 500 .8125rem var(--font-sans); }
.skip-link:focus { top: 1rem; }

/* ─── Shared label + button ─── */
.label {
  font: 500 .75rem/1.4 var(--font-sans);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
}
/* Scrapbook button: grained paper face, offset backing sheet, strip of tape.
   No transform/z-index on .btn itself, so the z-index:-1 backing stays behind the face. */
:root { --grain-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .14 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); --grain-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .18 0 0 0 0 .1 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.btn {
  position: relative;
  display: inline-flex; align-items: center; gap: 1.25rem;
  padding: 1.1rem 1.9rem;
  font: 500 .75rem/1 var(--font-sans);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-cream);
  background: var(--grain-light) var(--color-olive);
  box-shadow: inset 0 1px 0 rgba(239,237,231,.12), 0 1px 1px rgba(24,23,17,.25);
  transition: background-color .25s ease;
}
.btn::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--grain-dark) #cfc5a9;
  transform: translate(5px, 6px) rotate(1.4deg);
  box-shadow: 0 6px 14px -8px rgba(24,23,17,.35);
  transition: transform .35s var(--ease);
}
.btn::before {
  content: ''; position: absolute; top: -.5rem; left: .85rem;
  width: 2.75rem; height: .95rem;
  background: var(--grain-dark) rgba(226,219,198,.82);
  transform: rotate(-7deg);
  box-shadow: 0 1px 2px rgba(24,23,17,.12);
  pointer-events: none;
}
.btn:hover { background-color: var(--color-olive-dark); }
.btn:hover::after { transform: translate(8px, 9px) rotate(2.2deg); }
.btn svg { width: 22px; height: 12px; flex: none; transition: transform .3s var(--ease); }
.btn:hover svg { transform: translateX(4px); }
.btn--light { color: var(--color-dark); background: var(--grain-dark) var(--color-cream); box-shadow: 0 1px 1px rgba(24,23,17,.3); }
.btn--light:hover { background-color: #f7f5ef; }
.btn--light::after { background: var(--grain-dark) var(--color-stone); }
.btn--light::before { background: var(--grain-dark) rgba(167,162,132,.85); }
.btn--no-tape::before { display: none; }
/* Ink seal tucked behind the face and the kraft sheet, peeking out where the tape would be; turns slowly.
   z-index -2 sits under the backing sheet (-1); the button itself has no z-index, so both stay behind the face. */
.btn--seal::before {
  top: -1.15rem; left: -1.15rem; width: 2.6rem; height: 2.6rem; z-index: -2;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23dcd2b8'%3E%3Ccircle cx='20' cy='20' r='17.2' stroke-width='1.8'/%3E%3Ccircle cx='20' cy='20' r='13.4' stroke-width='1.3' stroke-dasharray='.1 3.05' stroke-linecap='round'/%3E%3Ccircle cx='20' cy='20' r='9.6' stroke-width='.7'/%3E%3C/svg%3E") center / contain no-repeat;
  box-shadow: none; transform: none;
  opacity: .9; filter: url(#ink);
  animation: seal-turn 30s linear infinite;
}
@keyframes seal-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn--seal::before { animation: none; } }

/* ─── Header ─── */
.site-header {
  position: relative; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  height: var(--header-h);
  padding: 0 var(--gutter);
  max-width: 1440px; margin: 0 auto;
  color: var(--color-cream);
  background: var(--color-olive);
  /* full-bleed background while content stays in the 1440px column */
  box-shadow: 0 0 0 100vmax var(--color-olive);
  clip-path: inset(0 -100vmax);
}
.site-header__logo { display: block; }
.site-header__logo img { height: 56px; width: auto; }
@media (min-width: 1024px) { .site-header__logo img { height: 76px; } }
.site-nav { display: none; }
.site-nav ul { display: flex; gap: 2.5rem; list-style: none; padding: 0; }
.site-nav a {
  display: inline-block; text-decoration: none;
  margin: -.6rem -.75rem; padding: .6rem .75rem;
  position: relative;
}
.site-nav a::after {
  content: ''; position: absolute; left: .75rem; right: .75rem; bottom: .35rem;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease);
}
.site-nav a:hover::after, .site-nav a:focus-visible::after { transform: scaleX(1); }
.site-header__cta { display: none; }
/* Hamburger: a cream paper tab (grain face, kraft backing) with hand-drawn bars that fold into an X.
   No transform/z-index on the button itself so the z-index:-1 backing stays behind the face. */
.site-header__toggle {
  position: relative;
  width: 44px; height: 44px; padding: 0;
  display: grid; place-items: center;
  color: var(--color-dark); cursor: pointer;
  border: 0;
  background: var(--grain-dark) var(--color-cream);
  box-shadow: 0 1px 1px rgba(24,23,17,.3);
}
.site-header__toggle::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--grain-dark) var(--color-stone);
  transform: translate(3px, 4px) rotate(2.5deg);
  transition: transform .4s var(--ease);
}
.site-header__toggle:hover::after { transform: translate(4px, 5px) rotate(3.5deg); }
.nav-open .site-header__toggle::after { transform: translate(-3px, 4px) rotate(-3deg); }
.site-header__toggle-bars { display: grid; gap: 5px; width: 20px; }
.site-header__toggle-bars > span {
  display: block; height: 1.6px; border-radius: 1px; background: currentColor; justify-self: start;
  transition: transform .4s var(--ease), opacity .25s ease, width .4s var(--ease);
}
.site-header__toggle-bars > span:nth-child(1) { width: 20px; transform: rotate(-2deg); }
.site-header__toggle-bars > span:nth-child(2) { width: 14px; transform: rotate(1.5deg); }
.site-header__toggle-bars > span:nth-child(3) { width: 17px; transform: rotate(-1deg); }
.site-header__toggle:hover .site-header__toggle-bars > span:nth-child(2) { width: 20px; }
.nav-open .site-header__toggle-bars > span:nth-child(1) { width: 21px; transform: translateY(6.6px) rotate(43deg); }
.nav-open .site-header__toggle-bars > span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-open .site-header__toggle-bars > span:nth-child(3) { width: 21px; transform: translateY(-6.6px) rotate(-46deg); }
.site-header__toggle:focus-visible { outline-color: var(--color-cream); outline-offset: 5px; }
@media (min-width: 960px) {
  .site-nav { display: block; margin-left: auto; margin-right: 2.75rem; }
  .site-header__cta { display: inline-flex; }
  .site-header__toggle { display: none; }
}

/* Mobile menu: full-screen olive sheet under a pinned header.
   Fully display:none while closed (iOS Safari translucent-chrome rule); JS handles display + timing. */
.nav-lock { overflow: hidden; }
.nav-lock .site-header { position: fixed; top: 0; left: 0; right: 0; }
.mobile-nav {
  position: fixed; inset: 0 0 auto 0; z-index: 15;
  height: 100vh;
  height: 100dvh; /* dynamic viewport: excludes the mobile browser's URL bar */
  display: none;
  overflow-y: auto; overscroll-behavior: contain;
  padding: calc(var(--header-h) + 1rem) var(--gutter) calc(.75rem + env(safe-area-inset-bottom));
  color: var(--color-cream);
  background: var(--grain-light) var(--color-olive);
  clip-path: inset(0 0 100% 0);
  transition: clip-path .5s var(--ease);
}
.mobile-nav.is-open { clip-path: inset(0 0 0 0); }
.mobile-nav__inner { display: flex; flex-direction: column; gap: 1.25rem; min-height: 100%; max-width: 36rem; }
.mobile-nav a { text-decoration: none; }

/* Primary links: torn scraps of the same fibrous paper as the hero collage */
.mobile-nav__primary { list-style: none; padding: 0; display: grid; gap: .5rem; }
.mobile-nav__primary li { filter: drop-shadow(0 5px 7px rgba(0,0,0,.2)); }
.mobile-nav__primary li:nth-child(odd)  { margin-right: .6rem; }
.mobile-nav__primary li:nth-child(even) { margin-left: .6rem; }
.mobile-nav__primary a {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1rem;
  padding: .75rem 1.25rem .85rem;
  color: var(--color-dark);
  background: var(--color-scrap) url('/images/graphics/fibrous-paper.jpg') 0 0 / 256px;
  background-image: image-set(url('/images/graphics/fibrous-paper.avif') type('image/avif'), url('/images/graphics/fibrous-paper.jpg') type('image/jpeg'));
  clip-path: polygon(0% 1.9%, 2.5% 1.4%, 5% 1.5%, 7.5% 0.8%, 10% 0.1%, 12.5% 1.0%, 15% 1.3%, 17.5% 1.7%, 20% 2.0%, 22.5% 0.8%, 25% 0.5%, 27.5% 0.7%, 30% 0.6%, 32.5% 1.7%, 35% 1.7%, 37.5% 1.1%, 40% 1.3%, 42.5% 0.6%, 45% 0.5%, 47.5% 1.2%, 50% 0.9%, 52.5% 1.6%, 55% 1.8%, 57.5% 0.9%, 60% 1.0%, 62.5% 0.4%, 65% 0.4%, 67.5% 1.7%, 70% 1.6%, 72.5% 1.6%, 75% 1.3%, 77.5% 0.1%, 80% 0.6%, 82.5% 1.1%, 85% 1.2%, 87.5% 2.0%, 90% 1.3%, 92.5% 0.8%, 95% 1.0%, 97.5% 0.4%, 100% 0.9%, 99.6% 50%, 100% 98.4%, 97.5% 98.5%, 95% 99.4%, 92.5% 99.1%, 90% 99.5%, 87.5% 99.2%, 85% 98.1%, 82.5% 98.4%, 80% 98.6%, 77.5% 99.0%, 75% 100.0%, 72.5% 99.3%, 70% 98.6%, 67.5% 98.5%, 65% 98.0%, 62.5% 98.9%, 60% 99.5%, 57.5% 99.1%, 55% 99.4%, 52.5% 98.8%, 50% 98.3%, 47.5% 98.8%, 45% 98.5%, 42.5% 99.0%, 40% 99.7%, 37.5% 99.1%, 35% 99.1%, 32.5% 98.6%, 30% 97.9%, 27.5% 98.8%, 25% 99.2%, 22.5% 99.5%, 20% 99.8%, 17.5% 98.5%, 15% 98.2%, 12.5% 98.5%, 10% 98.5%, 7.5% 99.6%, 5% 99.6%, 2.5% 98.9%, 0% 99.0%, 0.4% 50%);
  transform: rotate(-.9deg);
  transition: background-color .25s ease;
}
.mobile-nav__primary li:nth-child(even) a {
  clip-path: polygon(0% 0.7%, 2.5% 0.4%, 5% 0.6%, 7.5% 1.9%, 10% 1.7%, 12.5% 1.4%, 15% 1.2%, 17.5% 0.2%, 20% 0.7%, 22.5% 1.2%, 25% 1.1%, 27.5% 1.8%, 30% 1.4%, 32.5% 0.9%, 35% 1.1%, 37.5% 0.4%, 40% 0.7%, 42.5% 1.5%, 45% 1.4%, 47.5% 1.8%, 50% 1.3%, 52.5% 0.2%, 55% 0.6%, 57.5% 0.8%, 60% 1.3%, 62.5% 2.2%, 65% 1.3%, 67.5% 0.9%, 70% 0.7%, 72.5% 0.3%, 75% 1.3%, 77.5% 1.6%, 80% 1.3%, 82.5% 1.7%, 85% 0.9%, 87.5% 0.6%, 90% 1.0%, 92.5% 0.6%, 95% 1.3%, 97.5% 1.9%, 100% 1.3%, 99.6% 50%, 100% 98.1%, 97.5% 98.9%, 95% 98.9%, 92.5% 99.2%, 90% 99.8%, 87.5% 98.9%, 85% 98.5%, 82.5% 98.4%, 80% 98.1%, 77.5% 99.3%, 75% 99.7%, 72.5% 99.2%, 70% 99.2%, 67.5% 98.2%, 65% 98.1%, 62.5% 99.0%, 60% 99.0%, 57.5% 99.5%, 55% 99.4%, 52.5% 98.5%, 50% 98.8%, 47.5% 98.5%, 45% 98.4%, 42.5% 99.3%, 40% 99.2%, 37.5% 99.3%, 35% 99.4%, 32.5% 98.2%, 30% 98.3%, 27.5% 98.6%, 25% 98.8%, 22.5% 99.9%, 20% 99.5%, 17.5% 98.7%, 15% 98.6%, 12.5% 98.0%, 10% 98.7%, 7.5% 99.6%, 5% 99.2%, 2.5% 99.4%, 0% 98.9%, 0.4% 50%);
  transform: rotate(.8deg);
}
.mobile-nav__primary li:nth-child(3) a { transform: rotate(-.4deg); }
.mobile-nav__primary a:hover { filter: brightness(1.04); }
/* Optional lighter torn rim behind each scrap (echoes the collage's paper edges). Off by default;
   enable by adding .mobile-nav--rim to #mobile-nav. */
.mobile-nav--rim .mobile-nav__primary li { position: relative; }
.mobile-nav--rim .mobile-nav__primary li::before {
  content: ''; position: absolute; inset: -2px -2px -3px -2px; z-index: -1;
  background: #f3efe6;
  clip-path: polygon(0% 2.6%, 2.5% 2.6%, 5% 1.3%, 7.5% 1.3%, 10% 0.4%, 12.5% 0.9%, 15% 2.6%, 17.5% 2.3%, 20% 2.3%, 22.5% 1.7%, 25% 0.2%, 27.5% 1.1%, 30% 1.6%, 32.5% 1.8%, 35% 2.8%, 37.5% 1.8%, 40% 1.3%, 42.5% 1.5%, 45% 0.6%, 47.5% 1.4%, 50% 2.1%, 52.5% 1.9%, 55% 2.7%, 57.5% 1.7%, 60% 0.5%, 62.5% 1.1%, 65% 0.8%, 67.5% 2.0%, 70% 3.1%, 72.5% 1.9%, 75% 1.5%, 77.5% 0.8%, 80% 0.3%, 82.5% 2.0%, 85% 2.2%, 87.5% 2.1%, 90% 2.4%, 92.5% 1.0%, 95% 1.0%, 97.5% 1.4%, 100% 0.9%, 99.6% 50%, 100% 98.7%, 97.5% 97.9%, 95% 98.0%, 92.5% 97.2%, 90% 98.5%, 87.5% 99.6%, 85% 99.0%, 82.5% 99.1%, 80% 97.7%, 77.5% 96.9%, 75% 98.3%, 72.5% 98.5%, 70% 99.2%, 67.5% 99.5%, 65% 98.0%, 62.5% 98.0%, 60% 97.9%, 57.5% 97.6%, 55% 98.9%, 52.5% 98.9%, 50% 98.8%, 47.5% 99.2%, 45% 97.8%, 42.5% 97.5%, 40% 98.0%, 37.5% 97.9%, 35% 99.5%, 32.5% 99.6%, 30% 98.3%, 27.5% 98.1%, 25% 97.1%, 22.5% 97.6%, 20% 99.3%, 17.5% 99.0%, 15% 99.2%, 12.5% 98.7%, 10% 97.3%, 7.5% 98.0%, 5% 98.2%, 2.5% 98.2%, 0% 99.4%, 0.4% 50%);
  transform: rotate(-.9deg);
}
.mobile-nav--rim .mobile-nav__primary li:nth-child(even)::before { transform: rotate(.8deg); }
.mobile-nav--rim .mobile-nav__primary li:nth-child(3)::before { transform: rotate(-.4deg); }
/* clip-path would cut off an outline, so the focus ring goes on the unclipped li */
.mobile-nav__primary a:focus-visible { outline: none; }
.mobile-nav__primary li:has(a:focus-visible) { outline: 2px solid var(--color-cream); outline-offset: 5px; }
.mobile-nav__text { font-size: clamp(1.625rem, 1.2rem + 2vw, 2.125rem); line-height: 1.05; letter-spacing: -.03em; }
.mobile-nav__primary svg { width: 22px; height: 12px; color: var(--color-olive); transition: transform .3s var(--ease); }
.mobile-nav__primary a:hover svg, .mobile-nav__primary a:focus-visible svg { transform: translateX(4px); }
.mobile-nav__primary a[aria-current="page"] .mobile-nav__text { font-style: italic; color: var(--color-olive-text); }

/* Services: level kraft discs with ink-stamped ring, icon and label, 3 over 2 */
.ink-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.mobile-nav__slip { text-align: center; }
.mobile-nav__svc-label { display: flex; align-items: center; justify-content: center; gap: .75rem; font-size: .625rem; color: #c9cbb9; }
.mobile-nav__svc-label::before, .mobile-nav__svc-label::after { content: ''; width: 1.75rem; height: 1px; background: rgba(239,237,231,.35); }
.mobile-nav__svc {
  list-style: none; padding: 0; margin: .8rem auto 0;
  max-width: calc(3 * 5.5rem + 2 * .9rem); /* always 3 over 2 */
  display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem .9rem;
}
.mobile-nav__svc a {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 5.5rem; aspect-ratio: 1; border-radius: 50%;
  background: var(--grain-dark) #d2c4a2;
  box-shadow: 0 6px 10px -5px rgba(0,0,0,.45);
  transition: transform .3s var(--ease), background-color .25s ease;
}
/* Everything printed on the disc is "ink": olive, multiplied into the kraft, roughened by the #ink SVG filter */
.mobile-nav__svc a::after { /* stamped seal ring */
  content: ''; position: absolute; inset: 5px; border-radius: 50%;
  border: 1.5px solid #3a4530; opacity: .8; mix-blend-mode: multiply; filter: url(#ink);
}
.mobile-nav__ink {
  position: relative; top: -1.5px; /* optical centring: visible ink sits a hair above true centre */
  display: flex; flex-direction: column; align-items: center; gap: 0;
  color: #3a4530; opacity: .92; mix-blend-mode: multiply;
}
.mobile-nav__ink svg { filter: url(#ink); }
.mobile-nav__ink span { filter: url(#ink-fine); }
.mobile-nav__svc a:hover { background-color: #dccfae; transform: translateY(-2px); }
.mobile-nav__svc a:focus-visible { outline: 2px solid var(--color-cream); outline-offset: 3px; }
/* Icon + label kept compact so the label sits high enough to clear the inner ring
   (checked: "Renovations", the longest, keeps ~4px clearance at its corners) */
.mobile-nav__svc svg { width: 1.7rem; height: 1.7rem; }
.mobile-nav__svc span { font-size: .6875rem; font-style: italic; line-height: 1.1; letter-spacing: -.02em; }
@media (max-width: 359px) { .mobile-nav__svc { max-width: calc(3 * 5.5rem + 2 * .6rem); column-gap: .6rem; } }
/* Short phones (e.g. iPhone SE with Safari bars): compact everything so the menu still fits above the URL bar */
@media (max-height: 600px) {
  .mobile-nav { padding-top: calc(var(--header-h) + .75rem); }
  .mobile-nav__inner { gap: .8rem; }
  .mobile-nav__primary { gap: .4rem; }
  .mobile-nav__primary a { padding: .5rem 1.2rem .55rem; }
  .mobile-nav__text { font-size: 1.5rem; }
  .mobile-nav__svc { max-width: calc(3 * 5rem + 2 * .9rem); margin-top: .25rem; gap: .4rem .9rem; }
  .mobile-nav__svc a { width: 5rem; }
  .mobile-nav__svc svg { width: 1.3rem; height: 1.3rem; }
  .mobile-nav__svc span { font-size: .6rem; }
}

/* bottom padding keeps the button's tilted backing sheet inside the panel (no phantom scroll) */
.mobile-nav__foot { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .75rem 1.25rem; padding-bottom: .5rem; }
.mobile-nav__foot .btn { padding-left: 1.5rem; padding-right: 1.5rem; }
.mobile-nav__phone { font-size: 1.1875rem; letter-spacing: -.01em; white-space: nowrap; }
.mobile-nav__phone:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Staggered entrance for the menu contents */
.mobile-nav__primary li, .mobile-nav__slip, .mobile-nav__foot { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .6s var(--ease); }
.mobile-nav.is-open .mobile-nav__primary li, .mobile-nav.is-open .mobile-nav__slip, .mobile-nav.is-open .mobile-nav__foot { opacity: 1; transform: none; }
.mobile-nav.is-open .mobile-nav__primary li:nth-child(1) { transition-delay: .1s; }
.mobile-nav.is-open .mobile-nav__primary li:nth-child(2) { transition-delay: .18s; }
.mobile-nav.is-open .mobile-nav__primary li:nth-child(3) { transition-delay: .26s; }
.mobile-nav.is-open .mobile-nav__primary li:nth-child(4) { transition-delay: .34s; }
.mobile-nav.is-open .mobile-nav__slip { transition-delay: .42s; }
.mobile-nav.is-open .mobile-nav__foot { transition-delay: .5s; }
@media (prefers-reduced-motion: reduce) {
  .mobile-nav, .mobile-nav * , .site-header__toggle-bars > span { transition: none !important; }
}
@media (min-width: 960px) { .mobile-nav { display: none !important; } }

/* ─── Content sections ─── */
.section { max-width: 1440px; margin: 0 auto; padding: 6rem var(--gutter); }
@media (min-width: 1024px) { .section { padding: 8rem var(--gutter); } }
.section__head { display: grid; gap: 1.25rem; margin-bottom: 3rem; }
.section__head h2 {
  font-weight: 400; font-size: clamp(2.25rem, 1.4rem + 2.6vw, 3.5rem);
  line-height: 1.02; letter-spacing: -.03em;
}
.section__head h2 em { color: var(--color-olive-text); }
@media (min-width: 900px) {
  .section__head { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: end; margin-bottom: 4rem; }
}
.section__intro { max-width: 34rem; font-size: 1.1875rem; line-height: 1.45; color: var(--color-ink-soft); }

.services { list-style: none; padding: 0; border-top: 1px solid var(--color-dark); }
.services li { border-bottom: 1px solid var(--color-rule); }
.services a {
  display: grid; gap: .4rem 2rem; align-items: baseline;
  grid-template-columns: 2.5rem minmax(0, 1fr) 26px;
  padding: 1.6rem 0; text-decoration: none;
}
.services__num { color: var(--color-ink-soft); font-size: .6875rem; }
.services__name { font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem); letter-spacing: -.02em; line-height: 1.1; transition: color .25s ease; }
.services__desc { grid-column: 2; font-size: 1.0625rem; line-height: 1.45; color: var(--color-ink-soft); max-width: 36rem; }
.services svg { grid-column: 3; grid-row: 1; width: 26px; height: 14px; align-self: center; transition: transform .3s var(--ease); }
.services a:hover .services__name { color: var(--color-olive-text); }
.services a:hover svg { transform: translateX(4px); }
@media (min-width: 900px) {
  .services a { grid-template-columns: 4rem minmax(0, 5fr) minmax(0, 6fr) 26px; }
  .services__desc { grid-column: 3; }
  .services svg { grid-column: 4; }
}

.approach { border-top: 1px solid var(--color-rule); }
.approach__grid { display: grid; gap: 3rem; }
@media (min-width: 900px) { .approach__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2rem; } }
.approach__title {
  margin: 1.25rem 0 1.5rem;
  font-weight: 400; font-size: clamp(2.25rem, 1.4rem + 2.6vw, 3.5rem);
  line-height: 1.02; letter-spacing: -.03em;
}
.approach__title em { color: var(--color-olive-text); }
.approach__body { font-size: 1.1875rem; line-height: 1.5; color: var(--color-ink-soft); max-width: 34rem; }
.approach__body + .btn { margin-top: 2.25rem; }
.principles { list-style: none; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--color-dark); }
@media (min-width: 640px) { .principles { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; } }
.principles li { padding: 1.5rem 0 1.75rem; border-bottom: 1px solid var(--color-rule); }
.principles h3 { font-weight: 500; font-size: .75rem; }
.principles p { margin-top: .6rem; font-size: 1.0625rem; line-height: 1.45; color: var(--color-ink-soft); }

/* ─── Footer ─── */
.site-footer { position: relative; z-index: 0; background: var(--color-olive); color: var(--color-cream); }
.site-footer a { text-decoration: none; }
.site-footer__inner { max-width: 1440px; margin: 0 auto; padding: 0 var(--gutter); }
.site-footer__cols {
  display: grid; gap: 2.5rem;
  padding: 4rem 0 3rem;
  border-bottom: 1px solid rgba(239,237,231,.22);
}
@media (min-width: 760px) { .site-footer__cols { grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); } }
.site-footer__tag { font-size: 1.5rem; line-height: 1.2; max-width: 18rem; letter-spacing: -.01em; }
.site-footer h2 { font-size: .6875rem; color: #c9cbb9; margin-bottom: 1rem; font-weight: 500; }
.site-footer ul { list-style: none; padding: 0; display: grid; gap: .55rem; }
.site-footer li a, .site-footer address a { font-size: 1.0625rem; opacity: .92; transition: opacity .2s; }
.site-footer li a:hover, .site-footer address a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.site-footer address { font-style: normal; display: grid; gap: .55rem; }

.band {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 2rem;
  padding: 2rem 0;
}
.band__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; flex: 1 1 auto; font-size: .6875rem; }
.band__rule { display: none; }
@media (min-width: 1100px) {
  .band__meta { flex-wrap: nowrap; }
  .band__rule { display: block; flex: 1 1 auto; max-width: 8.5rem; height: 1px; background: rgba(239,237,231,.5); }
}
.band__end { display: flex; align-items: center; gap: 1.75rem; }
.band__logo { display: block; padding-left: 1.75rem; border-left: 1px solid rgba(239,237,231,.35); }
.band__logo img { height: 56px; width: auto; }
.band__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem; padding: 1.25rem 0 1.75rem; border-top: 1px solid rgba(239,237,231,.22); font: 400 .8125rem var(--font-sans); color: #c9cbb9; }
.band__legal a:hover { color: var(--color-cream); }

/* ─── Entrance (CSS only; from-state applies on first paint) ─── */
@media (prefers-reduced-motion: no-preference) {
  .rise { animation: rise .9s var(--ease) both; }
  .rise--2 { animation-delay: .08s; }
  .rise--3 { animation-delay: .16s; }
  .rise--4 { animation-delay: .24s; }
  .fade { animation: fade 1.2s ease .1s both; }
  @keyframes rise { from { opacity: 0; transform: translateY(14px); } }
  @keyframes fade { from { opacity: 0; } }
}
  
/* ─── Eyebrow label with short rule ─── */
.eyebrow { display: block; color: var(--color-ink-soft); }
.eyebrow::after { content: ''; display: block; width: 36px; height: 1px; margin-top: 1.4rem; background: var(--color-dark); }

/* ─── Paper: kraft backing sheet + tilted face + tape (prints, notes, CTA card) ───
   The backing lives on the untransformed wrapper so z-index:-1 stays behind the face. */
.paper { position: relative; isolation: isolate; }
.paper::before {
  content: ''; position: absolute; inset: -.6rem -.5rem .9rem -.75rem; z-index: -1;
  background: var(--grain-dark) #d6ccb2;
  transform: rotate(calc(var(--tilt, 1.5deg) * -1.6));
  box-shadow: 0 10px 22px -14px rgba(24,23,17,.45);
}
.paper__sheet {
  position: relative;
  background: var(--grain-dark) #f5f3ed;
  box-shadow: 0 1px 2px rgba(24,23,17,.12), 0 14px 28px -16px rgba(24,23,17,.45);
  transform: rotate(var(--tilt, 1.5deg));
}
.paper__sheet::after {
  content: ''; position: absolute; top: -.6rem; left: 50%;
  width: 4rem; height: 1.15rem; margin-left: -2rem;
  background: var(--grain-dark) rgba(222,214,192,.82);
  transform: rotate(-4deg);
  box-shadow: 0 1px 2px rgba(24,23,17,.1);
}
.paper--left  { --tilt: -1.5deg; }
.paper--flat  { --tilt: -.4deg; }
.paper--plain::before { display: none; }

.print { margin: 0; }
.print .paper__sheet { padding: .6rem .6rem 1.9rem; }
.print img { width: 100%; height: auto; filter: sepia(.1) saturate(.9); }
.print figcaption { padding: .9rem .25rem 0; }
.print__cat { color: var(--color-ink-soft); font-size: .6875rem; }
.print__name { margin-top: .35rem; font-size: 1.375rem; line-height: 1.15; letter-spacing: -.01em; }
.print__place { margin-top: .2rem; font-size: 1rem; color: var(--color-ink-soft); font-style: italic; }

/* ─── Inner page hero ─── */
.page-hero {
  max-width: 1440px; margin: 0 auto;
  display: grid; gap: 3.5rem; align-items: center;
  padding: 2.5rem var(--gutter) 4.5rem;
}
@media (min-width: 900px) {
  .page-hero { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 4rem; padding: 3.5rem var(--gutter) 6rem; }
  .page-hero--text { grid-template-columns: minmax(0, 1fr); }
  .page-hero__media { padding: 0 2rem 0 1rem; }
}
@media (min-width: 1280px) { .page-hero__media { padding: 0 4rem 0 2rem; } }
.crumbs ol { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 0 0 2rem; font: 400 .8125rem var(--font-sans); color: var(--color-ink-soft); }
.crumbs li + li::before { content: '/'; margin-right: .5rem; color: var(--color-stone); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }
.page-hero h1 { font-weight: 400; }
.display {
  display: block; margin-top: 1.25rem;
  font-size: clamp(2.5rem, 1.3rem + 4vw, 4.5rem);
  line-height: 1; letter-spacing: -.035em;
  font-variation-settings: 'opsz' 72;
}
.display em, .h2 em { font-style: italic; color: var(--color-olive-text); }
.lede { margin-top: 1.5rem; max-width: 34rem; font-size: 1.25rem; line-height: 1.4; color: var(--color-ink-soft); }
.page-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 2rem; margin-top: 2.25rem; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .9rem;
  margin: -.5rem -.25rem; padding: .5rem .25rem;
  font: 500 .75rem/1 var(--font-sans); letter-spacing: var(--track-wide); text-transform: uppercase;
  text-decoration: none;
}
.link-arrow svg { width: 22px; height: 12px; transition: transform .3s var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }

/* ─── Generic headings + two-column split ─── */
.h2 {
  font-weight: 400; font-size: clamp(2.25rem, 1.4rem + 2.6vw, 3.5rem);
  line-height: 1.02; letter-spacing: -.03em;
}
.eyebrow + .h2 { margin-top: 1.25rem; }
.section--rule { border-top: 1px solid var(--color-rule); }
.split { display: grid; gap: 3rem; }
@media (min-width: 900px) { .split { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 5rem; align-items: start; } }
.body p { font-size: 1.1875rem; line-height: 1.55; color: var(--color-ink-soft); max-width: 38rem; }
.body p + p { margin-top: 1.1rem; }
.h2 + .body { margin-top: 1.75rem; }
.body + .btn { margin-top: 2.25rem; }

/* ─── Note card (stat + quote) ─── */
.note .paper__sheet { padding: 2.25rem 2rem 2rem; }
.note__stat { display: block; font-size: clamp(3rem, 2rem + 3vw, 4.25rem); line-height: 1; letter-spacing: -.03em; color: var(--color-olive-text); }
.note__label { display: block; margin-top: .75rem; font-size: .6875rem; color: var(--color-ink-soft); }
.note__quote { margin: 1.75rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--color-rule); font-size: 1.25rem; line-height: 1.4; font-style: italic; }
.note .link-arrow { margin-top: 1.75rem; }

/* ─── Checklist (scope of work) ─── */
.checklist { list-style: none; padding: 0; display: grid; border-top: 1px solid var(--color-dark); }
@media (min-width: 700px) { .checklist { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; } }
.checklist li {
  display: flex; gap: 1rem; align-items: baseline;
  padding: 1.1rem 0; border-bottom: 1px solid var(--color-rule);
  font-size: 1.1875rem; line-height: 1.35;
}
.checklist li::before { content: ''; flex: none; width: .55rem; height: .55rem; background: var(--color-olive); transform: rotate(45deg) translateY(-.1rem); }

/* ─── Steps (numbered process rows) ─── */
.steps { list-style: none; padding: 0; border-top: 1px solid var(--color-dark); }
.steps li {
  display: grid; gap: .4rem 2rem; align-items: baseline;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  padding: 1.6rem 0; border-bottom: 1px solid var(--color-rule);
}
.steps__num { color: var(--color-ink-soft); font-size: .6875rem; }
.steps h3 { font-weight: 400; font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem); letter-spacing: -.02em; line-height: 1.1; }
.steps p { grid-column: 2; font-size: 1.0625rem; line-height: 1.5; color: var(--color-ink-soft); max-width: 36rem; }
@media (min-width: 900px) {
  .steps li { grid-template-columns: 4rem minmax(0, 5fr) minmax(0, 6fr); }
  .steps p { grid-column: 3; }
}

/* ─── Principles: 3-up variant ─── */
@media (min-width: 900px) { .principles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ─── Facts strip ─── */
.facts { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--color-dark); }
@media (min-width: 900px) { .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.facts li { padding: 1.75rem 1.5rem 1.75rem 0; border-bottom: 1px solid var(--color-rule); }
.facts strong { display: block; font-weight: 400; font-size: clamp(2.25rem, 1.6rem + 2vw, 3.25rem); line-height: 1; letter-spacing: -.03em; color: var(--color-olive-text); }
.facts span { display: block; margin-top: .75rem; font-size: .6875rem; color: var(--color-ink-soft); }

/* ─── Gallery of prints ─── */
.gallery { list-style: none; padding: 0; display: grid; gap: 3rem 2.5rem; }
@media (min-width: 700px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.gallery li:nth-child(3n+1) .paper { --tilt: -1.2deg; }
.gallery li:nth-child(3n+2) .paper { --tilt: .8deg; }
.gallery li:nth-child(3n)   .paper { --tilt: -.5deg; }
.gallery .print img { aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 1024px) { .gallery--feature li:first-child { grid-column: span 2; grid-row: span 2; } }
.page-hero .print img { aspect-ratio: 4 / 3; object-fit: cover; }

/* ─── CTA card ─── */
.cta { max-width: 1440px; margin: 0 auto; padding: 2rem var(--gutter) 7rem; }
.cta .paper { max-width: 68rem; margin: 0 auto; --tilt: -.6deg; }
.cta .paper__sheet { display: grid; gap: 2rem; padding: 3rem 2rem; }
@media (min-width: 900px) { .cta .paper__sheet { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: center; gap: 3rem; padding: 3.75rem 3.5rem; } }
.cta__sub { margin-top: 1rem; font-size: 1.125rem; line-height: 1.5; color: var(--color-ink-soft); max-width: 32rem; }
.cta__actions { display: grid; gap: 1.5rem; justify-items: start; }
.cta__phone { font-size: 1.625rem; letter-spacing: -.01em; text-decoration: none; }
.cta__phone:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ─── Contact form ─── */
.form .paper__sheet { padding: 2.5rem 1.5rem 2.25rem; }
@media (min-width: 640px) { .form .paper__sheet { padding: 3rem 2.75rem 2.75rem; } }
.form__grid { display: grid; gap: 1.75rem 2rem; margin-top: 2rem; }
@media (min-width: 640px) { .form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .form__full { grid-column: 1 / -1; } }
.field label { display: block; font-size: .6875rem; color: var(--color-ink-soft); }
.field input, .field select, .field textarea {
  display: block; width: 100%; margin-top: .5rem;
  padding: .7rem 0; border: 0; border-bottom: 1px solid var(--color-stone); border-radius: 0;
  background: transparent; color: var(--color-dark);
  font: 400 1.1875rem/1.4 var(--font-display);
  -webkit-appearance: none; appearance: none;
}
.field textarea { resize: vertical; min-height: 8rem; }
.field select {
  padding-right: 2rem; cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23181711' stroke-width='1.4'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") no-repeat right .25rem center / 12px 8px;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom: 2px solid var(--color-olive); margin-bottom: -1px; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: none; }
.field [aria-invalid="true"] { border-bottom-color: #8a2b1b; }
.field__error { display: block; min-height: 1.1em; margin-top: .4rem; font: 400 .8125rem var(--font-sans); color: #8a2b1b; }
.form__footer { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; margin-top: 2.25rem; }
.form__note { font: 400 .8125rem/1.5 var(--font-sans); color: var(--color-ink-soft); max-width: 22rem; }
.form__status { margin-top: 1.5rem; font-size: 1.125rem; line-height: 1.45; }
.form__status:empty { display: none; }
.btn[disabled] { opacity: .65; cursor: progress; }

.info { margin: 0; border-top: 1px solid var(--color-dark); }
.info div { padding: 1.25rem 0; border-bottom: 1px solid var(--color-rule); }
.info dt { font-size: .6875rem; color: var(--color-ink-soft); }
.info dd { margin: .45rem 0 0; font-size: 1.25rem; line-height: 1.4; }
.info a { text-decoration: none; }
.info a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ─── Prose (privacy) ─── */
.prose { max-width: 44rem; }
.prose h2 { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--color-rule); font-weight: 400; font-size: 1.875rem; letter-spacing: -.02em; line-height: 1.15; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { font-size: 1.1875rem; line-height: 1.6; color: var(--color-ink-soft); }
.prose p { margin-top: 1rem; }
.prose ul { margin-top: 1rem; padding-left: 1.25rem; }
.prose li + li { margin-top: .35rem; }
.prose a { color: var(--color-olive-text); text-underline-offset: 3px; }
.checklist--note { margin-top: 1.75rem; grid-template-columns: minmax(0, 1fr) !important; }
.checklist--note li { font-size: 1.0625rem; padding: .8rem 0; }
.facts--spaced { margin-top: 5rem; }
.aside-intro { margin: 1.5rem 0 2rem; font-size: 1.1875rem; line-height: 1.55; color: var(--color-ink-soft); max-width: 26rem; }

/* H1 keyword label: clean two-line break on phones */
@media (max-width: 639px) {
  h1 .eyebrow { font-size: .6875rem; letter-spacing: .16em; }
  h1 .eyebrow__place { display: block; }
}