/* ============================================================================
   GreenLight Construction — site styles
   Built on the Organic design system (assets/css/ds.css). Tokens only —
   no ad-hoc colours, no ad-hoc shadows.
   ========================================================================= */

/* --- Accent overrides -------------------------------------------------------
   The design system ships terracotta as the primary accent. Both design
   comps override it so SAGE (matching the logo) is primary and terracotta
   becomes the secondary voice. These overrides are intentional — keep them.
   ------------------------------------------------------------------------ */
:root {
  --color-accent:      #56633f;
  --color-accent-100:  #e1eecc;
  --color-accent-200:  #ccdbb2;
  --color-accent-300:  #aebf92;
  --color-accent-400:  #8fa073;
  --color-accent-500:  #728157;
  --color-accent-600:  #46512f;
  --color-accent-700:  #3d472b;
  --color-accent-800:  #272e1b;
  --color-accent-900:  #1a1f12;

  --color-accent-2:     #c67139;
  --color-accent-2-100: #fff2eb;
  --color-accent-2-200: #ffe1d0;
  --color-accent-2-300: #ffc6a5;
  --color-accent-2-400: #f6a06b;
  --color-accent-2-500: #d67f48;
  --color-accent-2-600: #b2622d;
  --color-accent-2-700: #8c491a;
  --color-accent-2-800: #643312;
  --color-accent-2-900: #402310;

  /* Layout */
  --wrap: 1180px;
  --gutter: 32px;
  --section-y: 92px;

  /* Muted text steps used throughout */
  --text-72: color-mix(in srgb, var(--color-text) 72%, transparent);
  --text-78: color-mix(in srgb, var(--color-text) 78%, transparent);
  --text-60: color-mix(in srgb, var(--color-text) 60%, transparent);
  --text-55: color-mix(in srgb, var(--color-text) 55%, transparent);
  --on-dark-88: color-mix(in srgb, var(--color-neutral-100) 88%, transparent);
  --on-dark-84: color-mix(in srgb, var(--color-neutral-100) 84%, transparent);
  --on-dark-82: color-mix(in srgb, var(--color-neutral-100) 82%, transparent);
  --on-dark-70: color-mix(in srgb, var(--color-neutral-100) 70%, transparent);
}

/* --- Base ---------------------------------------------------------------- */
html { scroll-behavior: smooth; scroll-padding-top: 120px; }
body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  margin: 0;
  overflow-x: hidden;
}
a { color: var(--color-accent-700); text-decoration: none; }
a:hover { color: var(--color-accent-600); }
img { display: block; max-width: 100%; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter); }
.band { padding-block: var(--section-y); }
.band-surface { background: var(--color-surface); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ── Photographs ────────────────────────────────────────────────────────────
   The design system's .washed filter desaturates and lifts photos into the
   warm cream ground. Every content photo gets it.

   Framing: 44 of the 49 source photos are 3:4 portrait — they came off a
   phone — so this site is portrait-first. Two modes, and no photo is ever
   forced into a frame it doesn't fit:

     .photo-frame    fixed aspect box, image covers. The ratio comes from the
                     photo itself via --ar, so "cover" has nothing to crop.
     .photo-natural  no box — the image sets its own height from its width and
                     height attributes. Zero crop, zero layout shift.
   ------------------------------------------------------------------------ */
.washed { min-width: 0; }

.photo-frame {
  position: relative; overflow: hidden;
  aspect-ratio: var(--ar, 3 / 4);
}
.photo-frame img,
.photo-frame video { width: 100%; height: 100%; object-fit: cover; display: block; }

.photo-natural img { width: 100%; height: auto; display: block; }

/* Card hover lift */
.lift { transition: transform .18s ease, box-shadow .18s ease; }
.lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .lift { transition: none; }
  .lift:hover { transform: none; }
}

/* Shared type helpers */
.kicker {
  font-size: 13px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--color-accent-700);
}
.kicker-sm { font-size: 12px; }
.lead { font-size: 19px; color: var(--text-72); }
.meta-label {
  font-size: 13px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-55);
}
h2.section-title { font-size: 44px; letter-spacing: -.02em; }

/* A value the client still has to supply. Deliberately visible. */
.todo {
  color: var(--text-55);
  font-style: italic;
  border-bottom: 1px dotted color-mix(in srgb, var(--color-text) 35%, transparent);
}

/* --- Header -------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--color-bg) 92%, transparent);
  backdrop-filter: blur(8px);
}
.site-header .nav {
  max-width: var(--wrap); margin: 0 auto;
  padding: 18px var(--gutter); gap: 28px;
}
.site-header .brand { display: flex; align-items: center; gap: 12px; color: var(--color-text); }
.site-header .brand img { height: 108px; width: auto; }
.site-nav {
  margin-left: auto; display: flex; align-items: center; gap: 26px;
  font-size: 15px; font-weight: 600;
}
.site-nav a { color: var(--color-text); }
.site-nav a:hover { color: var(--color-accent-700); }
.site-nav .btn-primary { font-size: 15px; padding: 11px 22px; color: var(--color-bg); }
.site-nav .btn-primary:hover { background: var(--color-accent-600); color: var(--color-bg); }

.nav-toggle {
  display: none; margin-left: auto;
  width: 46px; height: 46px; padding: 0;
  border: 1px solid var(--color-divider); background: transparent;
  border-radius: 999px; cursor: pointer;
}
.nav-toggle span {
  display: block; width: 18px; height: 2px; margin: 4px auto;
  background: var(--color-text); border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-open .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* --- Hero ---------------------------------------------------------------- */
.hero {
  max-width: var(--wrap); margin: 0 auto;
  padding: 56px var(--gutter) 88px;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center;
}
.hero-col { min-width: 0; }
.hero .tag {
  gap: 9px; padding: 7px 16px; font-size: 13px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
}
.hero .tag .dot {
  width: 7px; height: 7px; border-radius: 999px;
  background: var(--color-accent-2-700); display: block;
}
.hero h1 {
  font-size: 68px; line-height: 1.02; letter-spacing: -.025em;
  margin: 22px 0 20px; max-width: 15ch;
}
.hero-lead { font-size: 20px; max-width: 46ch; color: var(--text-78); margin-bottom: 28px; }
.hero-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.hero-actions .btn { font-size: 17px; padding: 16px 30px; }
.hero-actions .btn-secondary { padding: 16px 28px; }

.owner-signal { display: flex; align-items: center; gap: 16px; margin-top: 36px; }
.owner-signal .avatar {
  width: 66px; height: 66px; border-radius: 999px; overflow: hidden; flex: none;
}
.owner-signal p { font-size: 16px; margin: 0; max-width: 34ch; color: var(--text-72); }

.stats { display: flex; gap: 44px; margin-top: 40px; flex-wrap: wrap; }
.stat-num { font-family: var(--font-heading); font-size: 34px; line-height: 1; }
.stat-label { font-size: 14px; color: var(--text-60); }

.hero-figure { position: relative; min-width: 0; }
.hero-figure .blob {
  position: absolute; width: 190px; height: 190px; border-radius: 999px;
  background: var(--color-accent-2-200); right: -46px; top: -34px; display: block;
}
/* 3:4 — the exact ratio of the source photo, so the arch crops nothing. */
.hero-photo {
  position: relative; overflow: hidden;
  border-radius: 240px 240px var(--radius-lg) var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.hero-badge {
  position: absolute; bottom: -26px; left: -26px;
  background: var(--color-bg); border-radius: var(--radius-lg);
  padding: 16px 22px; box-shadow: var(--shadow-md); max-width: 250px;
}
.hero-badge strong { font-family: var(--font-heading); font-weight: 400; font-size: 17px; display: block; }
.hero-badge span { font-size: 14px; color: var(--text-60); }

/* --- Services ------------------------------------------------------------ */
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.service-card { background: var(--color-bg); padding: 30px; gap: 0; }
.service-card h3 { font-size: 24px; }
.service-card p { font-size: 16px; color: var(--text-72); margin: 0; }
/* The comps used an empty tinted circle here. An icon inside it does the same
   job and actually says something — Lucide at the system's 2.75 stroke.
   To drop the circles entirely: delete the .service-icon spans in the HTML. */
.service-icon {
  width: 40px; height: 40px; border-radius: 999px; flex: none;
  display: grid; place-items: center; margin-bottom: 18px;
  background: var(--color-accent-200); color: var(--color-accent-800);
}
.service-icon.alt { background: var(--color-accent-2-200); color: var(--color-accent-2-800); }
.service-icon svg {
  width: 20px; height: 20px; display: block;
  fill: none; stroke: currentColor; stroke-width: 2.75;
  stroke-linecap: round; stroke-linejoin: round;
}

.service-cta {
  grid-column: 1 / -1;
  background: var(--color-accent-2-700); color: var(--color-neutral-100);
  padding: 34px 38px; gap: 18px;
  display: grid; grid-template-columns: 1fr auto; align-items: center;
}
.service-cta h3 { font-size: 26px; color: var(--color-neutral-100); margin: 0 0 6px; }
.service-cta p { font-size: 16px; color: var(--on-dark-82); margin: 0; max-width: 60ch; }
.service-cta .btn {
  background: var(--color-neutral-100); color: var(--color-accent-2-800);
  font-size: 16px; padding: 13px 24px;
}
.service-cta .btn:hover { background: var(--color-accent-2-200); }

/* --- Projects ------------------------------------------------------------ */
.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 32px; flex-wrap: wrap; margin-bottom: 40px;
}
.section-head h2 { margin-bottom: 8px; }
.section-head p { font-size: 19px; color: var(--text-72); margin: 0; max-width: 46ch; }
.section-head .btn { font-size: 16px; padding: 13px 24px; }

.projects-feature { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; align-items: start; }
.projects-feature .stack { display: grid; gap: 24px; min-width: 0; }

/* Two columns, each card as tall as its own photo wants to be. Mixing
   portrait and landscape then reads as a deliberate stagger instead of as
   inconsistent cropping. */
.projects-feature { grid-template-columns: 1fr 1fr; }

.project-card {
  display: block; min-width: 0; gap: 0; padding: 0;
  color: var(--color-text); overflow: hidden;
}
.project-card:hover { color: var(--color-text); }
.project-card .body { padding: 26px 28px 30px; }
.project-card h3 { font-size: 26px; margin: 8px 0 6px; }
.project-card p { font-size: 16px; color: var(--text-72); margin: 0; }
.project-card .tag { margin-top: 12px; }

/* Projects index — masonry columns, so every card keeps its photo's shape. */
.projects-index { column-count: 3; column-gap: 24px; }
.projects-index .project-card {
  break-inside: avoid; margin-bottom: 24px; display: inline-block; width: 100%;
}
.projects-index .project-card .body { padding: 22px 24px 26px; }
.projects-index .project-card h3 { font-size: 24px; }

/* --- Before / after ------------------------------------------------------ */
/* The pair is portrait, so the text column is the wide one and the frame keeps
   the photos' own 3:4. Both layers must be the same ratio or the wipe lies. */
.ba { display: grid; grid-template-columns: 1fr .74fr; gap: 52px; align-items: center; }
.ba-controls { min-width: 0; }
.ba-controls p { font-size: 18px; color: color-mix(in srgb, var(--color-text) 74%, transparent); }
.ba-range { width: 100%; max-width: 320px; margin-top: 10px; accent-color: var(--color-accent); }
.ba-frame {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  aspect-ratio: var(--ar, 3 / 4);
  min-width: 0; box-shadow: var(--shadow-lg); touch-action: pan-y;
}
.ba-layer { position: absolute; inset: 0; }
.ba-layer img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ba-layer.before { clip-path: inset(0 52% 0 0); }
.ba-divider {
  position: absolute; top: 0; bottom: 0; width: 3px;
  background: var(--color-bg); left: 48%; pointer-events: none;
}
.ba-pill {
  position: absolute; top: 16px; border-radius: 999px; padding: 6px 14px;
  font-size: 13px; font-weight: 700; pointer-events: none;
}
.ba-pill.is-before { left: 16px; background: var(--color-bg); color: var(--color-text); }
.ba-pill.is-after  { right: 16px; background: var(--color-accent); color: var(--color-bg); }

/* --- Process ------------------------------------------------------------- */
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.step-num {
  width: 52px; height: 52px; border-radius: 999px;
  background: var(--color-accent); color: var(--color-bg);
  font-family: var(--font-heading); font-size: 22px;
  display: grid; place-items: center; margin-bottom: 18px;
}
.process-grid h4 { font-size: 21px; }
.process-grid p { font-size: 16px; color: var(--text-72); margin: 0; }

/* --- Owner promise ------------------------------------------------------- */
.promise {
  background: var(--color-accent-2-800); color: var(--color-neutral-100);
  padding-block: var(--section-y);
}
.promise .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.promise h2 { font-size: 44px; letter-spacing: -.02em; color: var(--color-neutral-100); }
.promise .lead { font-size: 19px; color: var(--on-dark-84); }
.promise-list { display: grid; gap: 16px; margin: 28px 0 32px; }
.promise-list li {
  display: grid; grid-template-columns: 26px 1fr; gap: 14px; align-items: start;
  list-style: none;
}
.promise-list { padding: 0; }
.promise-list .bullet {
  width: 10px; height: 10px; border-radius: 999px;
  background: var(--color-accent-2-400); display: block; margin: 9px 0 0 8px;
}
.promise-list p { margin: 0; font-size: 17px; color: var(--on-dark-88); }
.promise-sign { font-family: var(--font-heading); font-size: 22px; color: var(--color-neutral-100); }
.promise-role { font-size: 15px; color: var(--on-dark-70); }
.promise-photo {
  border-radius: var(--radius-lg) var(--radius-lg) 240px 240px;
  overflow: hidden; min-width: 0; box-shadow: var(--shadow-lg);
}

/* --- Testimonials -------------------------------------------------------- */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.quotes figure { padding: 30px; gap: 0; }
.quotes blockquote {
  font-family: var(--font-heading); font-size: 21px; line-height: 1.3; margin: 0 0 18px;
}
.quotes figcaption { font-size: 15px; color: color-mix(in srgb, var(--color-text) 65%, transparent); margin: 0; }

/* --- Consult ------------------------------------------------------------- */
.consult { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: start; }
.consult-details { margin-top: 28px; display: grid; gap: 14px; font-size: 16px; }
.consult-details strong { font-family: var(--font-heading); font-weight: 400; }
.consult-form {
  background: var(--color-bg); border-radius: var(--radius-lg); padding: 34px;
  box-shadow: var(--shadow-md); display: grid; gap: 18px;
}
.consult-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.consult-form label { display: grid; gap: 6px; font-size: 14px; font-weight: 700; }
.consult-form .input {
  font-size: 16px; font-weight: 400; min-height: 50px;
  background: var(--color-neutral-100);
}
.consult-form textarea.input { border-radius: var(--radius-md); resize: vertical; min-height: 92px; }
.scope-group { display: grid; gap: 8px; font-size: 14px; font-weight: 700; }
.scope-pills { display: flex; gap: 10px; flex-wrap: wrap; }
.scope-pills .btn { font-size: 15px; padding: 10px 18px; }
.scope-pills .btn[aria-pressed="true"] {
  background: var(--color-accent-200); color: var(--color-accent-800);
  border-color: transparent;
}
.consult-form .submit { font-size: 17px; padding: 16px 30px; }
.form-note { font-size: 13px; color: var(--text-60); margin: 0; }
.form-status { font-size: 15px; margin: 0; color: var(--color-accent-700); font-weight: 600; }

/* --- Footer -------------------------------------------------------------- */
.site-footer {
  background: var(--color-accent-2-900);
  color: var(--on-dark-82);
  padding-block: 52px;
}
.site-footer .wrap {
  display: flex; gap: 32px; justify-content: space-between;
  flex-wrap: wrap; align-items: center; font-size: 15px;
}
.site-footer img { height: 84px; width: auto; }
.site-footer a { color: var(--on-dark-82); }
.site-footer a:hover { color: var(--color-neutral-100); }

/* ============================================================================
   Project detail page
   ========================================================================= */
.pp-head { padding: 40px var(--gutter) 0; }
.pp-title {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px;
  align-items: end; margin-top: 24px;
}
.pp-title h1 {
  font-size: 60px; line-height: 1.04; letter-spacing: -.025em;
  margin: 14px 0 18px; max-width: 18ch;
}
.pp-title .summary { font-size: 20px; max-width: 48ch; color: var(--text-78); margin: 0; }
.pp-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; font-size: 16px; }

/* The hero is centred and sized to the photo, not the other way round: a
   portrait shot gets a tall narrow frame, a landscape one a wide frame.
   Neither is cropped. */
.pp-hero {
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-lg); margin-inline: auto;
}
.pp-hero.portrait  { max-width: 600px; }
.pp-hero.landscape { max-width: 1000px; }

.pp-story {
  padding: 80px var(--gutter);
  display: grid; grid-template-columns: .85fr 1.15fr; gap: 56px; align-items: start;
}
.pp-story h2 { font-size: 38px; letter-spacing: -.02em; }
.pp-story p { color: var(--text-78); }

/* Masonry gallery — every shot at its own shape, nothing cropped. */
.pp-shots { column-count: 2; column-gap: 22px; min-width: 0; }
.pp-shots figure {
  break-inside: avoid; margin: 0 0 22px; display: inline-block; width: 100%;
}
.pp-shots .frame { border-radius: var(--radius-lg); overflow: hidden; }
.pp-shots figcaption,
.pp-ba figcaption {
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  margin-top: 10px; color: var(--text-55);
}

/* Pairs are always the same orientation, so a plain 2-up works and both
   sides stay the same size. */
.pp-ba { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 28px; align-items: start; }
.pp-ba figure { margin: 0; }
.pp-ba .frame { border-radius: var(--radius-lg); overflow: hidden; }

/* A project whose finished photos don't exist yet says so. */
.pp-flag {
  display: flex; gap: 14px; align-items: flex-start;
  border: 1px solid var(--color-divider); border-radius: var(--radius-lg);
  padding: 22px 26px; font-size: 16px; color: var(--text-72);
  background: color-mix(in srgb, var(--color-accent-100) 60%, transparent);
}
.pp-flag strong { font-family: var(--font-heading); font-weight: 400; color: var(--color-text); }

.pp-quote { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.pp-quote blockquote {
  font-family: var(--font-heading); font-size: 30px; line-height: 1.25; margin: 0 0 18px;
}
.pp-quote figcaption { font-size: 16px; color: color-mix(in srgb, var(--color-text) 65%, transparent); }
.pp-materials { display: grid; gap: 12px; }
.pp-materials .tags { display: flex; gap: 10px; flex-wrap: wrap; font-size: 15px; font-weight: 600; }
.pp-materials .tag { font-size: 15px; padding: 8px 16px; }

.pp-video {
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-lg); background: var(--color-neutral-900);
}
.pp-video video { width: 100%; height: auto; display: block; }

.pp-cta {
  background: var(--color-accent-2-800); color: var(--color-neutral-100);
  border-radius: var(--radius-lg); padding: 56px;
  display: grid; grid-template-columns: 1.2fr .8fr; gap: 40px; align-items: center;
}
.pp-cta h2 { font-size: 40px; letter-spacing: -.02em; color: var(--color-neutral-100); margin-bottom: 10px; }
.pp-cta p { font-size: 18px; color: var(--on-dark-84); margin: 0; }
.pp-cta .actions { display: flex; gap: 14px; flex-wrap: wrap; justify-self: end; }
.pp-cta .btn { font-size: 17px; padding: 16px 30px; }
.pp-cta .btn-cream { background: var(--color-neutral-100); color: var(--color-accent-2-800); }
.pp-cta .btn-cream:hover { background: var(--color-accent-2-200); }
.pp-cta .btn-outline {
  border: 1px solid color-mix(in srgb, var(--color-neutral-100) 45%, transparent);
  color: var(--color-neutral-100); padding: 16px 28px;
}
.pp-cta .btn-outline:hover { background: color-mix(in srgb, var(--color-neutral-100) 12%, transparent); color: var(--color-neutral-100); }

/* ============================================================================
   Responsive — the design comps were desktop-only; this is the mobile build.
   ========================================================================= */
@media (max-width: 1080px) {
  :root { --section-y: 76px; }
  .hero h1 { font-size: 56px; }
  h2.section-title, .promise h2 { font-size: 38px; }
  .pp-title h1 { font-size: 48px; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .process-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 26px; }
  .projects-index { column-count: 2; }
  .pp-hero.landscape { max-width: 100%; }
}

@media (max-width: 900px) {
  :root { --gutter: 24px; --section-y: 64px; }

  /* Header → mobile menu */
  .site-header .brand img { height: 76px; }
  .nav-toggle { display: block; }
  .site-nav {
    display: none; width: 100%; order: 3; margin-left: 0;
    flex-direction: column; align-items: stretch; gap: 4px;
    padding: 8px 0 18px; font-size: 17px;
  }
  .nav-open .site-nav { display: flex; }
  .site-nav a { padding: 12px 4px; border-bottom: 1px solid var(--color-divider); }
  .site-nav .btn-primary { margin-top: 12px; border-bottom: 0; text-align: center; padding: 14px 22px; }
  .site-header .nav { flex-wrap: wrap; gap: 12px; padding-block: 12px; }

  /* Hero → stacked, image first */
  .hero { grid-template-columns: 1fr; gap: 40px; padding-top: 32px; padding-bottom: 56px; }
  .hero-figure { order: -1; margin-bottom: 20px; }
  .hero-photo { border-radius: 180px 180px var(--radius-lg) var(--radius-lg); }
  .hero .blob { width: 130px; height: 130px; right: -18px; top: -22px; }
  /* Smaller circle, thinner stroke — a 2.75 stroke on a 15px icon blobs. */
  .service-icon { width: 32px; height: 32px; margin-bottom: 14px; }
  .service-icon svg { width: 17px; height: 17px; stroke-width: 2.2; }
  .hero-badge { left: 0; bottom: -20px; }
  .hero-badge {
    padding: 12px 16px; max-width: 210px;
    left: 0; bottom: -18px;
  }
  .hero-badge strong { font-size: 15px; }
  .hero-badge span { font-size: 13px; }
  .hero .tag { align-items: flex-start; font-size: 12px; }
  .hero .tag .dot { margin-top: 6px; }
  .hero h1 { font-size: 42px; max-width: none; }
  .hero-lead { font-size: 18px; max-width: none; }
  .hero-actions .btn { font-size: 16px; padding: 14px 24px; }
  .stats { gap: 28px; }
  .stat-num { font-size: 28px; }

  h2.section-title, .promise h2, .pp-cta h2 { font-size: 32px; }
  .lead, .section-head p, .promise .lead { font-size: 17px; }

  .service-cta { grid-template-columns: 1fr; gap: 20px; padding: 28px; }
  .projects-feature { grid-template-columns: 1fr; }
  .projects-index { column-count: 1; }

  .ba { grid-template-columns: 1fr; gap: 28px; }
  .ba-frame { max-width: 460px; }
  .ba-range { max-width: none; }

  .promise .wrap { grid-template-columns: 1fr; gap: 36px; }
  .promise-photo {
    border-radius: var(--radius-lg) var(--radius-lg) 160px 160px;
    order: -1; max-width: 440px; margin-inline: auto;
  }

  .quotes { grid-template-columns: 1fr; }
  .consult { grid-template-columns: 1fr; gap: 36px; }
  .consult-form { padding: 26px; }

  .site-footer .wrap { justify-content: flex-start; gap: 18px; }
  .site-footer img { height: 64px; }

  /* Project page */
  .pp-title { grid-template-columns: 1fr; gap: 28px; align-items: start; }
  .pp-title h1 { font-size: 38px; max-width: none; }
  .pp-title .summary { font-size: 18px; max-width: none; }
  .pp-hero.portrait { max-width: 460px; }
  .pp-story { grid-template-columns: 1fr; gap: 32px; padding-block: 56px; }
  .pp-story h2 { font-size: 30px; }
  .pp-quote { grid-template-columns: 1fr; gap: 32px; }
  .pp-quote blockquote { font-size: 24px; }
  .pp-cta { grid-template-columns: 1fr; padding: 32px; gap: 24px; }
  .pp-cta .actions { justify-self: start; }
  .pp-cta .btn { font-size: 16px; padding: 14px 24px; }
}

@media (max-width: 620px) {
  .services-grid { grid-template-columns: 1fr; }
  .process-grid { grid-template-columns: 1fr; }
  .consult-form .row { grid-template-columns: 1fr; }
  .pp-shots { column-count: 1; }
  .pp-ba { grid-template-columns: 1fr; }
  .pp-meta { gap: 14px 20px; }
  .hero h1 { font-size: 36px; }
  .stats { gap: 20px 28px; }
}

/* --- Print ---------------------------------------------------------------- */
@media print {
  .site-header, .nav-toggle, .ba-controls, .consult-form { display: none; }
  body { background: #fff; }
}