/* ============================================================
   IronWood Homes theme (loaded after the template styles.css)

   The logo is pure black and white, so it sets no colour. These are
   the existing IronWood brand colours, carried forward so the site,
   the van, the cards and the quote document all agree.

   Sage and clay. Light sage grounds, deep forest ink, clay accent.

   Contrast checked, all on white unless stated:
     clay    #8A4529   7.09    accent text, Estimate buttons
     white on clay      7.09
     forest  #2C332B  13.00    headings
     white on forest   13.00   dark bands
     body    #262B25  14.44
     muted   #555C50   6.92
     band-muted on forest 5.23
     accent-2 #48593F  7.56
   ============================================================ */
:root {
  --navy-900: #2C332B;   /* deep forest: dark bands + footer ground */
  --navy-950: #222820;   /* bottom of the dark band gradient */
  --navy-800: #FFFFFF;   /* page background */
  --navy-700: #FAFBF8;   /* cards and raised surfaces */
  --navy-600: #CDD3C4;   /* tinted light for thumbs / placeholders */
  --alt:        #E6E9E0; /* light sage alternating band (hero, form) */
  --copper:     #8A4529; /* clay: main accent + Estimate buttons */
  --copper-2:   #6F3820; /* clay, hover / pressed */
  --accent-rgb: 138,69,41;
  --sand:       #2C332B; /* headings */
  --cream:      #262B25; /* body ink */
  --muted:      #555C50; /* secondary ink */
  --ink-rgb:    44,51,43;

  /* Button fill (Estimate, submit, checked choices). */
  --btn:        #8A4529;
  --btn-2:      #6F3820;
  --btn-rgb:    138,69,41;
  --on-btn:     #FFFFFF;

  --on-copper:  #FBF6F2;
  --line:       rgba(var(--ink-rgb),0.16);
  --line-soft:  rgba(var(--ink-rgb),0.09);
  --shadow:     0 18px 40px rgba(var(--ink-rgb),0.16);

  /* Secondary accent: secondary (white) buttons, highlighted words, letter tiles */
  --accent-2:      #48593F;  /* forest green secondary */
  --accent-2-rgb:  72,89,63;
  --accent-2-tint: #E6E9E0;

  /* Chips, form choices, Go to pills, town service pills */
  --chip-fill:     #EEF0E9;
  --chip-fill-2:   #E6E9E0;
  --chip-border:   #CDD3C4;
  --chip-border-2: #B9C1AE;
  --gallery-bg:    #F4F1EA;

  /* text roles on the dark bands */
  --band-strong: #EDF0E7;
  --band-muted:  #9EA79A;
  --band-accent: #C98A63;
  --band-accent-2: #DCAE8E;
  --band-accent-rgb: 201,138,99;
  --band-deep-rgb: 34,40,32;
  --cta-on-dark: #A5542F;

  --wrap: 1140px;
  /* One family sitewide (self-hosted Inter, see fonts.css). The serif token
     keeps its old name so the shared rules still work. */
  --serif: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* The brand block is the logo on its own: Kelly's artwork is already a wordmark
   with its own tagline, so the template's text lockup beside it said the name
   twice. Sized by height so the 6.6:1 wordmark never crowds the menu. */
.brand-logo.wordmark {
  width: auto;
  height: 34px;
  max-width: 62vw;
}
@media (min-width: 900px) {
  .brand-logo.wordmark { height: 40px; }
}

/* ============================================================
   The two doors on the home page

   Curtis's structure for this site: before anything is sold, send the
   visitor to Custom Homes or to Remodeling. Two cards, so each one has
   room for a photo, a sentence and a real button. The whole card is the
   link; the button inside it is a span so there is no nested anchor.
   ============================================================ */
.door-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}
.door-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  background: var(--navy-700);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.door-card:hover,
.door-card:focus-visible {
  border-color: var(--copper);
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}
.door-thumb {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--navy-600);
}
.door-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.door-card:hover .door-thumb img { transform: scale(1.04); }
.door-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 24px 26px 26px;
  flex: 1;
}
.door-tag {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--copper);
}
.door-card h3 {
  margin: 0;
  font-size: 27px;
  line-height: 1.15;
  color: var(--sand);
}
.door-card p {
  margin: 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.55;
  flex: 1;
}
/* Solid fill, same as every other button on the site. */
.door-card .btn { margin-top: 6px; }

@media (max-width: 760px) {
  .door-grid { grid-template-columns: 1fr; gap: 16px; }
  .door-card h3 { font-size: 23px; }
  .door-body { padding: 20px 20px 22px; }
}

/* ============================================================
   Gallery filters

   The template ships the filter pills styled but not wired. These do the
   wiring in CSS: the radio that is checked decides which figures stay on.
   No script, so the grid is right on first paint instead of flickering.

   A figure can belong to more than one category (a tile shower is both
   "tile" and "bathrooms"), which is why this matches on a word inside
   data-cat rather than on the whole attribute.
   ============================================================ */
.gal-wrap:has(#f-bathrooms:checked) .gallery figure:not([data-cat~="bathrooms"]),
.gal-wrap:has(#f-kitchens:checked)  .gallery figure:not([data-cat~="kitchens"]),
.gal-wrap:has(#f-tile:checked)      .gallery figure:not([data-cat~="tile"]),
.gal-wrap:has(#f-trim:checked)      .gallery figure:not([data-cat~="trim"]),
.gal-wrap:has(#f-decks:checked)     .gallery figure:not([data-cat~="decks"]) {
  display: none;
}

/* ============================================================
   Remodeling landing: seven service cards

   auto-fill rather than auto-fit, so the last card in a short row keeps
   its width instead of stretching across the gap.
   ============================================================ */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 18px;
}
.svc-grid .type-thumb { aspect-ratio: 4 / 3; }
.svc-grid .type-card h3 { font-size: 20px; padding: 14px 18px 4px; }
@media (max-width: 620px) {
  .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .svc-grid .type-card h3 { font-size: 16px; padding: 10px 12px 12px; }
}

/* ============================================================
   Phone header: one row, with a stacked logo

   Kelly's horizontal wordmark is 6.6:1. On a 375px phone the header's own
   controls (call, Estimate, menu) take about 216px of the 335px available,
   leaving roughly 115px for the brand, which at that ratio is 17px tall.
   Giving the brand its own row fixed the squeeze but grew the header to
   109px, about an eighth of the screen, with the logo running edge to edge.

   The old Renovations by IronWood logo was 3.3:1, which is exactly why that
   site's phone header worked at a normal height. So under 700px the <picture>
   in the header swaps to a stacked lockup cut from the same letterforms,
   "IRONWOOD" over "HOMES" at 3.4:1, and the row fits at 68px.

   aspect-ratio is set explicitly because the two sources have different
   shapes: without it the box is reserved from the full lockup's 900x137 and
   the header jumps when the stacked image lands.
   ============================================================ */
@media (max-width: 700px) {
  .site-header .nav {
    padding: 12px 14px;
    gap: 8px;
  }
  /* Fluid rather than stepped. At a fixed 34px the row fitted a 375px phone
     with 8px to spare and ran 28px off the right edge of a 320px one, which
     is an iPhone SE and anyone whose browser text is scaled up. The clamp
     lets the logo use whatever the controls leave and never go under 28px,
     where the two stacked words stop being readable. */
  .brand-logo.wordmark {
    height: clamp(28px, 9vw, 38px);
    width: auto;
    aspect-ratio: 600 / 175;
    max-width: none;
  }
  /* The controls hold a fixed width so the clamp above has something to
     measure against. Still 40px and up, so every tap target survives. */
  .site-header .nav-actions { gap: 7px; flex: 0 0 auto; }
  .site-header .nav-actions .btn {
    padding: 9px 11px;
    font-size: 13.5px;
    letter-spacing: .02em;
  }
  .site-header .nav-call { width: 42px; height: 42px; }
  .site-header .nav-toggle { padding: 10px 11px; }
}

/* ============================================================
   Phone type floors

   The template shrinks the "Photo Coming Soon" badge to 10px inside a
   three-up photo row on a phone. That is below the readable floor, and on
   two service pages the badge is the only thing in the row, so it is the
   only thing to read. 12px, and the row gets a little more air to hold it.
   ============================================================ */
@media (max-width: 760px) {
  .ph .soon-label,
  .photo-row .ph .soon-label,
  .type-thumb .ph .soon-label {
    font-size: 12px;
    letter-spacing: .07em;
    padding: 4px 9px;
  }
}

/* An inline phone number in a sentence is a real tap target on a phone, and
   at the body line height it is a 21px one. This gives it finger room
   without changing where the sentence wraps. */
@media (max-width: 760px) {
  p a[href^="tel:"],
  li a[href^="tel:"] {
    display: inline-block;
    padding: 5px 2px;
    margin: -5px 0;
  }
}

/* ============================================================
   Home page band rhythm: dark hero, light stats strip

   The template ships the home page as light header, dark stats strip, light
   hero. Every interior page is light header, DARK page hero. So the home page
   was the only page on the site without a dark band under the fold, and next
   to the old Renovations by IronWood site it read as one long pale stretch.

   This puts the home page back on the old site's rhythm, which is also what
   the rest of this site already does:

     light header
     light sage stats strip
     DARK hero
     white two doors
     sage featured project
     white meet the owner
     DARK reviews
     sage why this matters
     DARK how it works
     sage estimate form
     DARK footer

   Both blocks work by re-scoping the same :root tokens rather than writing
   one-off dark rules, so anything dropped into either section inherits the
   right colours on its own.
   ============================================================ */

/* The strip goes light, because the band below it is now the dark one. */
.stats-band {
  background: var(--alt);
  border-top: 1px solid rgba(var(--ink-rgb), 0.14);
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.14);
  --sand:      #2C332B;
  --cream:     #262B25;
  --muted:     #555C50;
  --copper:    #8A4529;
  --line:      rgba(var(--ink-rgb), 0.16);
  --line-soft: rgba(var(--ink-rgb), 0.09);
  --on-copper: #FBF6F2;
}
/* The clay bloom belongs to the dark treatment; on sage it just muddies it. */
.stats-band::before { display: none; }

/* The hero goes dark, same treatment as every interior page hero. */
.hero {
  background: var(--navy-900);
  border-bottom: 1px solid rgba(237, 240, 231, 0.14);
  --sand:       var(--band-strong);
  --cream:      var(--band-strong);
  --muted:      var(--band-muted);
  --copper:     var(--band-accent);
  --copper-2:   var(--band-accent-2);
  --line:       rgba(237, 240, 231, 0.16);
  --line-soft:  rgba(237, 240, 231, 0.09);
  --on-copper:  var(--navy-900);
}
/* A soft clay bloom behind the photo so the panel is not a flat rectangle.
   The template's version is tuned for a light ground and disappears here. */
.hero::before {
  background: radial-gradient(circle, rgba(var(--band-accent-rgb), 0.16), transparent 68%);
}
/* Service chips: barely-there pills, as on the old site. The template's are
   filled with a dark tint that vanishes against the forest. */
.hero .chip {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(237, 240, 231, 0.22);
}
.hero .chip:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: var(--band-accent);
  color: var(--band-accent);
}
/* Solid white, the same secondary button the interior dark heroes use. */
.hero .btn-ghost {
  background: #FFFFFF;
  color: var(--navy-900);
  border-color: #FFFFFF;
}
.hero .btn-ghost:hover {
  background: var(--band-accent);
  border-color: var(--band-accent);
  color: var(--navy-900);
}

/* ============================================================
   Footer logo

   The template puts a white plate behind the footer logo, which is right for
   a client whose only artwork is dark. IronWood has a proper white version
   of the wordmark, so the plate rendered as a solid white rectangle with an
   invisible logo inside it. Sit the white artwork straight on the forest.
   ============================================================ */
.foot-logo {
  width: auto;
  height: 42px;
  max-width: 260px;
  background: none;
  padding: 0;
  border-radius: 0;
}
@media (max-width: 760px) {
  .foot-logo { height: 36px; }
}

/* ============================================================
   Dark header, sitewide

   Curtis wants the old Renovations by IronWood treatment: the bar carrying
   the menu is deep forest, not white. The playbook allows this as the stated
   exception, "a dark header carrying the menu, with the light ground directly
   beneath it, when the client asks for it".

   What it gives you per page type:
     home      dark header, light sage stats strip, dark hero
     interior  dark header running straight into the dark page hero, so the
               top of the screen does not change colour as you navigate

   Done entirely by re-scoping the tokens the header already reads, so the
   links, the caret, the dropdown panel, the phone link and the toggle all
   follow without a single one-off rule. The markup change that goes with it
   is the brand image: every page now points at logo-light.png.
   ============================================================ */
.site-header {
  background: rgba(44, 51, 43, 0.95);
  border-bottom: 1px solid rgba(237, 240, 231, 0.12);
  --sand:       var(--band-strong);
  --cream:      var(--band-strong);
  --muted:      var(--band-muted);
  --copper:     var(--band-accent);
  --copper-2:   var(--band-accent-2);
  /* The dropdown panel, lifted off the bar so it reads as a panel. */
  --navy-700:   #343C32;
  --line:       rgba(237, 240, 231, 0.16);
  --line-soft:  rgba(237, 240, 231, 0.09);
  --on-copper:  var(--navy-900);
  /* Used by the dropdown link hover tint, which is invisible at the dark
     clay the light theme sets. */
  --accent-rgb: 201, 138, 99;
}

/* The Estimate button: the light clay, because the dark one is close enough
   to the forest bar that the button stops reading as a button. */
.site-header .btn-primary {
  background: var(--cta-on-dark);
  border-color: var(--cta-on-dark);
}
.site-header .btn-primary:hover {
  background: #BD6137;
  border-color: #BD6137;
}

/* The phone drawer has to be the same colour as the header, or the light
   menu button sitting on top of it disappears (Valley Home lesson). The
   tokens above are inherited, so only the hard-coded white needs replacing. */
@media (max-width: 900px) {
  .site-header .menu {
    background: var(--navy-900);
    border-left: 1px solid rgba(237, 240, 231, 0.16);
  }
}

/* ============================================================
   Photos: let the CSS aspect ratio win

   Every <img> on this site carries width and height attributes, which is
   what stops the page jumping while images load. The side effect is that the
   browser treats the height attribute as a presentational hint, so an image
   that was supposed to be cropped to 3:4 by CSS renders at its full
   intrinsic height instead.

   It showed up in two places and both were bad: the gallery ran every photo
   at 1200px tall and the page came out 26,000px long on a phone, and the
   Recent Work row on the service pages did the same to three photos side by
   side. Adding height:auto hands the sizing back to aspect-ratio and keeps
   the attributes doing their real job.

   The other photo blocks already set a height of their own, so they were
   never affected.
   ============================================================ */
.gallery figure img,
.photo-row img {
  height: auto;
}

/* Eighteen portrait photos in one column is about eight thousand pixels of
   scrolling. Two columns on a phone, same as the Recent Work rows. */
@media (max-width: 560px) {
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .gallery figcaption { font-size: 13px; padding: 6px 2px 0; }
}

/* ============================================================
   A portrait photo in the landscape service hero slot

   Alec shoots on a phone, so the good bathroom shots are 3:4. The hero slot
   crops to 4:3, which shows only about 56% of the height, and centring that
   window lands on a blank stretch of wall. Pulling it up to 28% puts the
   shower head, the niche and the valve in frame, so it reads as a shower
   rather than a slab of marble.
   ============================================================ */
/* Alec shoots on a phone, so the good photos are 3:4 portrait, and the hero
   slot crops to 4:3 landscape. That showed 56% of the photo and read as a
   random slice of wall with a toilet at the edge, which is what he flagged.

   A squarer box keeps most of the frame. 1:1 on a laptop shows 75% of the
   height; under 980px the hero stacks and the photo owns the full column, so
   it goes to 4:5 and shows 94%. The focal point sits a little above centre
   because on a shower shot the head and the niche are the subject. */
.svc-hero-photo.portrait img {
  aspect-ratio: 1 / 1;
  object-position: center 38%;
}
@media (max-width: 980px) {
  .svc-hero-photo.portrait img { aspect-ratio: 4 / 5; }
}