/* ==========================================================================
   Valiant Custom Homes
   Playfair Display carries the high-contrast character of the wordmark with
   thin strokes sturdy enough to survive on screen; Jost echoes the letterspaced
   "CUSTOM HOMES" beneath it. Red appears only as a hairline, a link underline
   and the primary button.
   ========================================================================== */

:root{
  --paper:#FFFFFF;
  --mist:#F8F7F6;
  --bar:#EFECE8;            /* title band — a step darker than --mist */
  --ink:#1A1A1A;
  --graphite:#55565A;
  --rule:#E4E1DF;
  --valiant:#EA222E;
  --valiant-deep:#BE151F;

  --night:#111111;          /* footer ground */
  --night-rule:#2E2E2E;
  --night-text:#B4B4B4;

  --display:"Playfair Display",Georgia,"Times New Roman",serif;
  --sans:"Jost","Helvetica Neue",Arial,sans-serif;

  --gutter:clamp(1.25rem,5vw,5.5rem);
  --band:clamp(4.5rem,10vw,9rem);
  --measure:62ch;
  --grid-gap:clamp(.6rem,1.4vw,1.1rem);
}

*,*::before,*::after{box-sizing:border-box}

body{
  margin:0;
  background:var(--paper);
  color:var(--graphite);
  font-family:var(--sans);
  font-size:clamp(1.0625rem,1rem + .28vw,1.125rem);
  font-weight:300;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}

img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--valiant);outline-offset:3px}

.screen-reader-text{
  position:absolute!important;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:-9999px;top:0;z-index:100;
  background:var(--ink);color:#fff;padding:.75rem 1.25rem;
  font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
}
.skip-link:focus{left:0}

/* ---------- type ---------- */
.eyebrow{
  font-family:var(--sans);font-size:.75rem;font-weight:400;
  letter-spacing:.2em;text-transform:uppercase;color:var(--graphite);margin:0;
}
.eyebrow::after{content:"";display:block;width:34px;height:1px;background:var(--valiant);margin-top:.9rem}
.eyebrow.is-centered{text-align:center}
.eyebrow.is-centered::after{margin-left:auto;margin-right:auto}

.display{
  font-family:var(--display);font-weight:400;color:var(--ink);
  line-height:1.08;letter-spacing:-.005em;text-wrap:balance;margin:0;
}
.display-xl{font-size:clamp(2.5rem,1.5rem + 4.4vw,5rem)}
.display-l{font-size:clamp(1.9rem,1.35rem + 2.4vw,3.15rem)}
.display-m{font-size:clamp(1.5rem,1.2rem + 1.3vw,2.05rem)}

.lede{
  font-family:var(--display);font-size:clamp(1.2rem,1.05rem + .6vw,1.55rem);
  line-height:1.5;color:var(--ink);font-weight:400;margin:0;
}

.prose{max-width:var(--measure)}
.prose p{margin:0 0 1.35em}
.prose p:last-child{margin-bottom:0}

/* ---------- links & buttons ---------- */
.btn,.btn-quiet{
  display:inline-block;font-family:var(--sans);font-size:.8125rem;font-weight:400;
  letter-spacing:.16em;text-transform:uppercase;text-decoration:none;
  padding:1.05em 2.3em;border:1px solid transparent;
  transition:background .25s ease,border-color .25s ease,color .25s ease;
}
.btn{background:var(--valiant);color:#fff;border-color:var(--valiant)}
.btn:hover{background:var(--valiant-deep);border-color:var(--valiant-deep)}
.btn-quiet{background:transparent;color:var(--ink);border-color:var(--rule)}
.btn-quiet:hover{border-color:var(--ink)}

.arrow-link{
  display:inline-block;font-family:var(--sans);font-size:.78rem;font-weight:400;
  letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:var(--ink);
  padding-bottom:.45rem;border-bottom:1px solid var(--valiant);transition:color .25s ease;
}
.arrow-link:hover{color:var(--valiant)}
.arrow-link .chev{display:inline-block;margin-left:.55em;transition:transform .25s ease}
.arrow-link:hover .chev{transform:translateX(4px)}

.actions{display:flex;flex-wrap:wrap;gap:.85rem;align-items:center;justify-content:center}

/* ---------- header ---------- */
.masthead{background:var(--paper);border-bottom:1px solid var(--rule)}
.masthead-inner{
  padding:1.5rem var(--gutter);display:flex;align-items:center;
  justify-content:space-between;gap:1.5rem 2rem;flex-wrap:wrap;
}
.masthead-logo img{width:clamp(140px,15vw,196px)}
.masthead-wordmark{font-family:var(--display);font-size:1.5rem;color:var(--ink)}

.nav{display:flex;align-items:center;gap:clamp(.9rem,1.9vw,1.9rem);flex-wrap:wrap}
.nav-list{
  list-style:none;margin:0;padding:0;display:flex;align-items:center;
  gap:clamp(.9rem,1.9vw,1.9rem);flex-wrap:wrap;
}
.nav-list a{
  font-size:.8125rem;font-weight:400;letter-spacing:.15em;text-transform:uppercase;
  text-decoration:none;color:var(--ink);padding-bottom:.3rem;
  border-bottom:1px solid transparent;transition:border-color .25s ease;
}
.nav-list a:hover,
.nav-list .current-menu-item > a{border-bottom-color:var(--valiant)}
.nav-tel{
  font-size:.8125rem;letter-spacing:.08em;color:var(--graphite);text-decoration:none;
  transition:color .25s ease;
}
.nav-tel:hover{color:var(--valiant)}

/* Social marks close the nav, to the right of the phone number. Sized against
   the 13px nav text rather than against each other, and set tighter as a pair
   than the nav's own gap so they read as one unit rather than two more items.
   Facebook is a filled glyph, Instagram a stroked one, so the stroke is tuned
   to match the f's apparent weight at this size. */
.nav-social{display:flex;align-items:center;gap:.6rem}
.nav-social a{display:flex;color:var(--ink);transition:color .25s ease}
.nav-social a:hover{color:var(--valiant)}
.nav-social svg{width:17px;height:17px;display:block}
.nav-social .ico-fb{fill:currentColor}
.nav-social .ico-ig{fill:none;stroke:currentColor;stroke-width:1.85}
.nav-social .ico-ig .ig-dot{fill:currentColor;stroke:none}

.nav-toggle{display:none;background:none;border:0;padding:.5rem;cursor:pointer}
.nav-toggle-bars{display:block;width:26px}
.nav-toggle-bars span{
  display:block;height:1px;background:var(--ink);margin:6px 0;
  transition:transform .25s ease,opacity .25s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:first-child{transform:translateY(3.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

/* ---------- title bar ----------
   A quiet band under the menu naming the page. It carries the h1; section
   headings on interior pages step down to h2 so there is only ever one. */
.title-bar{
  background:var(--bar);
  border-bottom:1px solid var(--rule);
  padding:clamp(1.7rem,3vw,2.6rem) var(--gutter);
  text-align:center;
}
.title-bar-label{
  margin:0;
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.6rem,1.35rem + .75vw,2.15rem);
  line-height:1.2;
  letter-spacing:.005em;
  color:var(--ink);
}
/* The one note of color on the band — the same device as the eyebrow rule,
   weighted up to hold its own under larger type. */
.title-bar-label::after{
  content:"";
  display:block;
  width:48px;
  height:2px;
  background:var(--valiant);
  margin:.85rem auto 0;
}

/* ---------- layout primitives ---------- */
.band{padding:var(--band) var(--gutter)}
.band-mist{background:var(--mist)}
.wrap{max-width:1240px;margin-inline:auto}
.section-head{display:grid;gap:1.5rem;justify-items:center;text-align:center}
.section-head .display-l{max-width:20ch}
.section-head .intro-note{max-width:56ch;margin:0}
.page-head{margin-bottom:clamp(2rem,4vw,3rem)}

/* ---------- hero ---------- */
.hero-figure{margin:0;width:100%;aspect-ratio:16/9;max-height:min(84vh,780px);overflow:hidden}
.hero-figure img{width:100%;height:100%;object-fit:cover;animation:settle 1.4s cubic-bezier(.22,.61,.36,1) both}
@keyframes settle{from{transform:scale(1.045)}to{transform:scale(1)}}
.hero-copy{
  padding:clamp(3rem,6vw,5.25rem) var(--gutter) var(--band);
  display:grid;gap:1.9rem;justify-items:center;text-align:center;
}
.hero-copy .display-xl{max-width:16ch}
.hero-copy .sub{max-width:46ch;margin:0}

/* The opening statement rises with the image rather than waiting on a scroll. */
.js-reveal .hero-copy > *{animation:rise .9s cubic-bezier(.22,.61,.36,1) both}
.js-reveal .hero-copy > *:nth-child(1){animation-delay:.10s}
.js-reveal .hero-copy > *:nth-child(2){animation-delay:.20s}
.js-reveal .hero-copy > *:nth-child(3){animation-delay:.30s}
.js-reveal .hero-copy > *:nth-child(4){animation-delay:.40s}
@keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

/* ---------- intro ---------- */
.section-intro{padding-inline:0}
.intro{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);
  align-items:center;gap:clamp(2rem,5vw,5rem);
  max-width:1500px;margin-inline:auto;
}
.intro-figure{margin:0}
.intro-figure img{width:100%;aspect-ratio:3/4;max-height:640px;object-fit:cover}
.intro-body{
  display:grid;gap:1.6rem;justify-items:start;
  padding-right:var(--gutter);max-width:min(100%,38rem);
}

/* ---------- pillars (photo above each heading) ---------- */
.triptych{
  display:grid;
  grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));
  gap:clamp(1.75rem,4vw,3.25rem);
  align-items:start;
}
.section-head + .triptych{margin-top:clamp(2.75rem,5vw,4rem)}
.trip{display:grid;gap:1rem;align-content:start}
.trip-figure{margin:0 0 .35rem}
/* fixed ratio + cover keeps every column's photo exactly the same size */
.trip-figure img{width:100%;aspect-ratio:4/3;object-fit:cover}
.trip h3{
  margin:0;font-family:var(--display);font-size:1.4rem;font-weight:400;
  color:var(--ink);line-height:1.2;
}
.trip p{margin:0;font-size:1rem;line-height:1.7}

/* ---------- paths ---------- */
.paths{
  display:grid;grid-template-columns:repeat(var(--cols,2),minmax(0,1fr));
  gap:clamp(2rem,5vw,4.5rem);
}
.section-head + .paths{margin-top:clamp(2.25rem,4vw,3.25rem)}
.path{display:grid;gap:1.1rem;align-content:start}
.path .kicker{
  margin:0;font-size:.75rem;font-weight:400;letter-spacing:.2em;
  text-transform:uppercase;color:var(--valiant);
}
.path h3{
  margin:0;font-family:var(--display);font-weight:400;color:var(--ink);
  font-size:clamp(1.5rem,1.2rem + .9vw,1.95rem);line-height:1.2;
}
.path p{margin:0}

/* link sits directly under the options — no rule, no closing paragraph */
.paths-note{display:flex;justify-content:center;margin-top:clamp(2.25rem,3.5vw,2.75rem)}

/* ---------- gallery: one ratio, one gap, always aligned ---------- */
.work-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--grid-gap);
}
.section-head + .work-grid{margin-top:clamp(2.75rem,5vw,4rem)}
.work-cell{margin:0}
.work-cell img{width:100%;aspect-ratio:4/3;object-fit:cover}
.work-foot{display:flex;justify-content:center;margin-top:clamp(2.25rem,4vw,3rem)}

/* ---------- quote ---------- */
.quote-inner{display:grid;justify-items:center;text-align:center;gap:1.9rem;max-width:60rem}
blockquote.pull{
  margin:0;font-family:var(--display);font-weight:400;color:var(--ink);
  font-size:clamp(1.3rem,1.05rem + .95vw,1.9rem);line-height:1.44;text-wrap:pretty;
}
.attrib{margin:0;font-size:.8125rem;letter-spacing:.16em;text-transform:uppercase;color:var(--graphite)}

/* ---------- communities ---------- */
.comm-logos{
  list-style:none;margin:0;padding:clamp(1.75rem,3vw,2.6rem) 0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(1.5rem,4vw,3.5rem);align-items:center;
  border-block:1px solid var(--rule);
}
.comm-logos img{width:100%;max-width:180px;margin-inline:auto;mix-blend-mode:multiply}
.section-head + .comm-logos{margin-top:clamp(2.25rem,4vw,3.25rem)}
.comm-foot{
  display:flex;flex-wrap:wrap;gap:1.25rem 2.5rem;justify-content:center;
  align-items:baseline;margin-top:clamp(1.75rem,3vw,2.5rem);text-align:center;
}
.comm-foot p{margin:0;max-width:52ch;font-size:1rem}

/* ---------- closing ---------- */
.closing{padding:var(--band) var(--gutter);background:var(--mist);text-align:center}
.closing-inner{max-width:1240px;margin-inline:auto;display:grid;gap:1.85rem;justify-items:center}
.closing .display-l{max-width:18ch}
.closing .sub{max-width:44ch;margin:0}
.direct{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem 2rem;font-size:.875rem;letter-spacing:.1em;margin:0}
.direct a{text-decoration:none;border-bottom:1px solid var(--rule);padding-bottom:.15rem;transition:border-color .25s ease}
.direct a:hover{border-bottom-color:var(--valiant)}

/* ---------- footer: black, reversed, compact ---------- */
.site-foot{
  background:var(--night);
  color:var(--night-text);
  padding:clamp(2.5rem,4vw,3.25rem) var(--gutter) clamp(1.25rem,2vw,1.5rem);
}
.foot-inner{
  max-width:1240px;margin-inline:auto;
  display:grid;grid-template-columns:auto 1fr 1fr 1.15fr;
  gap:clamp(1.75rem,3.5vw,3rem);align-items:start;
}
.foot-affil ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.foot-affil li{font-size:.875rem;line-height:1.5;color:var(--night-text)}
.foot-brand img{width:clamp(128px,13vw,160px)}
.foot-wordmark{font-family:var(--display);font-size:1.35rem;color:#fff}
.foot-social{display:flex;gap:1.25rem;margin:1rem 0 0;font-size:.8125rem;letter-spacing:.12em;text-transform:uppercase}
.foot-social a{text-decoration:none;color:var(--night-text);transition:color .25s ease}
.foot-social a:hover{color:#fff}

.foot-title{
  margin:0 0 .9rem;font-family:var(--sans);font-size:.75rem;font-weight:400;
  letter-spacing:.2em;text-transform:uppercase;color:#fff;
}
.foot-list{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.foot-list a{text-decoration:none;font-size:.9375rem;color:var(--night-text);transition:color .25s ease}
.foot-list a:hover{color:#fff}

.foot-contact address{font-style:normal;font-size:.9375rem;line-height:1.65;margin:0}
.foot-direct{display:grid;gap:.35rem;margin:.85rem 0 0;font-size:.9375rem}
.foot-direct a{text-decoration:none;color:var(--night-text);transition:color .25s ease}
.foot-direct a:hover{color:#fff}

.colophon{
  max-width:1240px;margin:clamp(2rem,3vw,2.5rem) auto 0;padding-top:1.15rem;
  border-top:1px solid var(--night-rule);
  display:flex;flex-wrap:wrap;gap:.4rem 1.5rem;justify-content:space-between;
  font-size:.78rem;letter-spacing:.06em;color:#7C7C7C;
}
.colophon p{margin:0}

/* ---------- full-width photo band ----------
   The media box is taller than its window by 2 x --travel, and the script
   shifts it between +travel and -travel, so it always covers the band exactly
   at both ends of the drift while revealing more of the photo than fits. */
.parallax{
  position:relative;
  width:100%;
  height:clamp(320px,58vw,var(--band-height,800px));
  overflow:hidden;
  /* Generous travel on purpose: the band is the last thing on the page, so it
     never scrolls fully past the top and only part of the range is reachable. */
  --travel:clamp(60px,11vw,170px);
}
.parallax-media{
  position:absolute;left:0;right:0;
  top:calc(-1 * var(--travel));
  height:calc(100% + (2 * var(--travel)));
}
.parallax-media img{width:100%;height:100%;object-fit:cover}
.parallax.is-drifting .parallax-media{will-change:transform}

@media (prefers-reduced-motion:reduce){
  /* No drift — the band simply shows the middle of the photograph. */
  .parallax-media{transform:none!important}
}

/* ---------- feature: photograph one side, words the other ----------
   The photo runs to the outer edge of the page; the text sits in the opposite
   column against the standard gutter. Flipping the side is the whole rhythm
   device on interior pages. */
.section-feature{padding-inline:0}
.feature{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;
  gap:clamp(2rem,5vw,5rem);
  max-width:1560px;
  margin-inline:auto;
}
.feature-figure{margin:0}
.feature-figure img{width:100%;aspect-ratio:4/3;object-fit:cover}
.feature-body{
  display:grid;gap:1.5rem;justify-items:start;align-content:center;
  max-width:min(100%,36rem);
  padding-right:var(--gutter);
}
.feature.is-flipped .feature-figure{order:2}
.feature.is-flipped .feature-body{
  order:1;justify-self:end;
  padding-right:0;padding-left:var(--gutter);
}
.feature-body .prose{max-width:100%}

@media (max-width:900px){
  .feature{grid-template-columns:1fr}
  .feature.is-flipped .feature-figure{order:0}
  .feature.is-flipped .feature-body{order:0;justify-self:start}
  .feature-body{padding-inline:var(--gutter)!important;max-width:100%}
}

/* ---------- two photographs, edge to edge ---------- */
.duo{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--grid-gap);
}
.duo-cell{margin:0}
.duo-cell img{width:100%;aspect-ratio:4/3;object-fit:cover}

@media (max-width:760px){
  .duo{grid-template-columns:1fr}
}

/* ---------- zoomable photographs ---------- */
.zoom{display:block;cursor:zoom-in;position:relative;overflow:hidden}
.zoom img{transition:transform .5s cubic-bezier(.22,.61,.36,1),opacity .3s ease}
.zoom:hover img,
.zoom:focus-visible img{transform:scale(1.03)}
/* the grid and pair cells clip the scale */
.work-cell,.duo-cell{overflow:hidden}

/* ---------- photograph viewer ----------
   The one place the site goes dark: photographs need a surround, and the
   footer already establishes near-black as part of the palette. */
body.lightbox-open{overflow:hidden}

.lightbox{
  position:fixed;inset:0;z-index:200;
  display:none;
  background:var(--night);   /* solid: 3% bleed let a white page read through */
  padding:clamp(3.25rem,7vw,5rem) clamp(1rem,5vw,5rem);
  overscroll-behavior:contain;
}
.lightbox.is-open{display:grid;place-items:center}

.lightbox-stage{margin:0;display:grid;place-items:center;gap:1.1rem;max-width:100%;max-height:100%}
.lightbox-stage img{
  max-width:min(100%,1600px);max-height:78vh;width:auto;height:auto;
  object-fit:contain;opacity:0;transition:opacity .35s ease;
}
.lightbox-stage img.is-ready{opacity:1}
.lightbox-stage figcaption{
  margin:0;max-width:62ch;text-align:center;
  font-family:var(--sans);font-size:.875rem;font-weight:300;line-height:1.6;
  color:var(--night-text);
}

.lightbox-count{
  position:absolute;left:50%;bottom:clamp(1rem,3vw,1.9rem);transform:translateX(-50%);
  margin:0;font-family:var(--sans);font-size:.72rem;letter-spacing:.2em;
  color:#7C7C7C;font-variant-numeric:tabular-nums;
}

.lightbox button{
  position:absolute;background:none;border:0;cursor:pointer;color:#fff;
  font-family:var(--sans);line-height:1;padding:.6rem .9rem;
  opacity:.65;transition:opacity .25s ease;
}
.lightbox button:hover,.lightbox button:focus-visible{opacity:1}
.lightbox button:focus-visible{outline:2px solid var(--valiant);outline-offset:3px}

.lightbox-close{top:clamp(.75rem,2vw,1.4rem);right:clamp(.75rem,2vw,1.6rem);font-size:2.1rem;font-weight:300}
.lightbox-nav{top:50%;transform:translateY(-50%);font-size:3rem;font-weight:300}
.lightbox-prev{left:clamp(.25rem,1.5vw,1.25rem)}
.lightbox-next{right:clamp(.25rem,1.5vw,1.25rem)}

@media (max-width:700px){
  .lightbox-stage img{max-height:66vh}
  .lightbox-nav{font-size:2.2rem}
  .lightbox-stage figcaption{font-size:.8125rem}
}

@media (prefers-reduced-motion:reduce){
  .zoom:hover img,.zoom:focus-visible img{transform:none}
  .lightbox-stage img{transition:none;opacity:1}
}

/* ---------- contact ---------- */
/* NOTE: never trim only one side of a band. If a section needs less room,
   trim both, or the imbalance shows wherever the background changes. */

/* Two sections sharing a background read as one block. Charging full padding on
   both sides of an invisible boundary leaves a dead gap, so halve it. */
.band-mist + .band-mist,
.band:not(.band-mist) + .band:not(.band-mist){padding-top:calc(var(--band) * .5)}

/* The page heading owns the space beneath it, so the section under it starts
   flush rather than stacking a second gap. Restricted to white-on-white, where
   there is no visible edge to look uneven — and it has to outrank the halving
   rule above, hence the extra .band. */
.band.section-pagehead + .band:not(.band-mist){padding-top:0}

/* Two photo grids running back to back with no heading between them are one
   grid that merely happens to be stored as two sections. Charging band padding
   at that join opens a gap the reader cannot account for, so close it to the
   grid's own gutter and let the rows tile straight through. Both selectors have
   to outrank the halving rule above, hence the doubled class. */
.band.section-gallery:has(+ .section-gallery){padding-bottom:0}
.band.section-gallery + .band.section-gallery{padding-top:var(--grid-gap)}

/* Interior pages open under the title bar, so the first section needs less
   room above it than the homepage's hero does. */
/* The page heading is a band in its own right: its text is centred in it, top
   matching bottom, rather than sitting flush on the next section's edge. */
body:not(.home) main > .section-pagehead:first-child{
  padding-top:clamp(2.75rem,5.5vw,5rem);
  padding-bottom:clamp(2.75rem,5.5vw,5rem);
}

.contact-grid{
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(2.5rem,6vw,5.5rem);align-items:start;
}
.contact-aside{display:grid;gap:clamp(1.75rem,3vw,2.5rem);align-content:start}
.contact-note{font-size:1rem}

.contact-details{margin:0;display:grid;gap:1.5rem}
.contact-details > div{display:grid;gap:.35rem;padding-top:1.15rem;border-top:1px solid var(--rule)}
.contact-details dt{
  font-size:.75rem;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:var(--graphite);
}
.contact-details dd{margin:0;font-family:var(--display);font-size:1.15rem;color:var(--ink);line-height:1.45}
.contact-details dd a{text-decoration:none;border-bottom:1px solid var(--rule);transition:border-color .25s ease}
.contact-details dd a:hover{border-bottom-color:var(--valiant)}
.contact-details address{font-style:normal}

/* ---------- Gravity Forms, brought into the type system ----------
   GF ships its own theme; rather than fight every selector we let it handle
   layout and behavior and restate only the visual properties — face, rules,
   color, focus. Keeps conditional logic and validation working. */
.gform_wrapper{--gf-local-radius:0}
.gform_wrapper form{margin:0}
.gform_wrapper .gform_required_legend{display:none}

.gform_wrapper .gfield_label,
.gform_wrapper legend.gfield_label{
  font-family:var(--sans)!important;
  font-size:.75rem!important;
  font-weight:400!important;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--graphite)!important;
  margin-bottom:.65rem!important;
}
/* Red is the accent, not a warning color — five red "(Required)" tags in a
   column would out-shout the one button that matters. */
.gform_wrapper .gfield_required{
  color:var(--graphite)!important;font-style:normal!important;
  letter-spacing:.12em;margin-left:.4em;opacity:.75;
}

.gform_wrapper input[type=text],
.gform_wrapper input[type=email],
.gform_wrapper input[type=tel],
.gform_wrapper input[type=url],
.gform_wrapper input[type=number],
.gform_wrapper select,
.gform_wrapper textarea{
  width:100%;
  font-family:var(--sans)!important;
  font-size:1rem!important;
  font-weight:300;
  color:var(--ink)!important;
  background:var(--paper)!important;
  border:1px solid var(--rule)!important;
  border-radius:0!important;
  padding:.85em 1em!important;
  transition:border-color .25s ease;
  box-shadow:none!important;
}
.gform_wrapper textarea{min-height:9.5rem;line-height:1.7;resize:vertical}
.gform_wrapper select{appearance:none;-webkit-appearance:none;padding-right:2.5em!important;
  background-image:linear-gradient(45deg,transparent 50%,var(--graphite) 50%),linear-gradient(135deg,var(--graphite) 50%,transparent 50%)!important;
  background-position:calc(100% - 1.25em) 55%,calc(100% - 0.85em) 55%!important;
  background-size:6px 6px,6px 6px!important;background-repeat:no-repeat!important;}

.gform_wrapper input:focus,
.gform_wrapper select:focus,
.gform_wrapper textarea:focus{
  border-color:var(--ink)!important;outline:2px solid var(--valiant);outline-offset:2px;
}

/* radios and checkboxes */
.gform_wrapper .gfield_radio label,
.gform_wrapper .gfield_checkbox label{
  font-family:var(--sans);font-size:1rem;font-weight:300;color:var(--graphite);
  text-transform:none;letter-spacing:normal;
}
.gform_wrapper input[type=radio],
.gform_wrapper input[type=checkbox]{accent-color:var(--valiant)}

/* submit */
.gform_wrapper .gform_footer{margin:clamp(1.75rem,3vw,2.25rem) 0 0!important;padding:0!important}
.gform_wrapper .gform_button{
  display:inline-block;font-family:var(--sans)!important;font-size:.8125rem!important;font-weight:400!important;
  letter-spacing:.16em;text-transform:uppercase;
  padding:1.05em 2.6em!important;
  background:var(--valiant)!important;color:#fff!important;
  border:1px solid var(--valiant)!important;border-radius:0!important;
  cursor:pointer;width:auto;
  transition:background .25s ease,border-color .25s ease;
}
.gform_wrapper .gform_button:hover{background:var(--valiant-deep)!important;border-color:var(--valiant-deep)!important}

/* validation + confirmation */
.gform_wrapper .gform_validation_errors,
.gform_wrapper .gfield_validation_message,
.gform_wrapper .validation_message{
  font-family:var(--sans)!important;font-size:.9375rem!important;
  background:transparent!important;border:0!important;border-left:2px solid var(--valiant)!important;
  border-radius:0!important;color:var(--ink)!important;padding:.4rem 0 .4rem .9rem!important;
}
.gform_confirmation_message{
  font-family:var(--display);font-size:clamp(1.2rem,1.05rem + .6vw,1.55rem);
  line-height:1.5;color:var(--ink);
  padding-top:1.5rem;border-top:1px solid var(--rule);
}

@media (max-width:900px){
  .contact-grid{grid-template-columns:1fr}
}

/* ---------- blog fallbacks ---------- */
.post-list{display:grid;gap:clamp(2rem,4vw,3rem)}
.post-item h2 a{text-decoration:none}
.post-item h2 a:hover{color:var(--valiant)}
.entry a{color:var(--valiant)}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .foot-inner{grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem}
  .foot-brand{grid-column:1 / -1}
}
/* The menu collapses on its own schedule, earlier than the layout does.
   Six items at 13px need ~1090px of room; the grids are still happy in three
   columns well below that, so the two breakpoints are deliberately different. */
@media (max-width:1150px){
  .nav-toggle{display:block;order:3}
  .nav{
    order:4;flex-basis:100%;display:none;
    flex-direction:column;align-items:flex-start;gap:1.1rem;
    padding:1.25rem 0 .25rem;border-top:1px solid var(--rule);
  }
  .nav.is-open{display:flex}
  .nav-list{flex-direction:column;align-items:flex-start;gap:1rem}
  .nav-list a{font-size:.9375rem}
  .nav-tel{padding-left:0;font-size:.9375rem}
}

@media (max-width:900px){
  .intro{grid-template-columns:1fr}
  .intro-figure img{aspect-ratio:4/3;max-height:none}
  .intro-body{padding-right:0;padding-inline:var(--gutter)}
  .triptych,.paths{grid-template-columns:1fr!important}
  .work-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .comm-logos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .comm-foot{justify-content:flex-start}
}
@media (max-width:600px){
  .work-grid{grid-template-columns:1fr}
  .foot-inner{grid-template-columns:1fr}
  .colophon{justify-content:flex-start}
}

/* ---------- scroll reveals ----------
   The .js-reveal class is set on <html> by an inline script in the head, so
   with JavaScript off every element simply stays visible. Nothing is hidden
   that cannot be un-hidden. */
.js-reveal .reveal{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .85s cubic-bezier(.22,.61,.36,1),transform .85s cubic-bezier(.22,.61,.36,1);
  transition-delay:calc(var(--i,0) * 90ms);
  will-change:opacity,transform;
}
.js-reveal .reveal.is-visible{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .js-reveal .reveal{opacity:1!important;transform:none!important;transition:none!important}
}

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