/* =========================================================
   Petronella — VBE Restorations · "The Open Road" edition
   Palette drawn from the photography:
   --paper   overcast autumn sky     #F1EDE3
   --ink     hedgerow near-black     #23261F
   --green   hedgerow green          #41503B
   --earth   ploughed-field ochre    #97754A
   --storm   storm-cloud grey        #74766F
   --pipe    coach-line red (nod to the interior piping) #A8322E
   ========================================================= */

:root{
  --paper:#f1ede3;
  --paper-2:#e9e4d6;
  --ink:#23261f;
  --green:#41503b;
  --earth:#97754a;
  --storm:#74766f;
  --pipe:#a8322e;
  --display:'Fraunces', Georgia, serif;
  --body:'Newsreader', Georgia, serif;
  --utility:'Archivo', Arial, sans-serif;
  --wrap:1160px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:1.05rem;
  line-height:1.75;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}

/* ---------- Type ---------- */
h1,h2{font-family:var(--display);font-weight:400;line-height:1.08}
h1{
  font-size:clamp(3.4rem,9vw,7rem);
  color:#fff;
  letter-spacing:.01em;
}
h2{
  font-size:clamp(2rem,4.4vw,3.2rem);
  color:var(--green);
  margin-bottom:.7em;
}
.eyebrow{
  font-family:var(--utility);
  font-size:.75rem;font-weight:600;
  letter-spacing:.3em;text-transform:uppercase;
  color:var(--earth);
  margin-bottom:1.6em;
}
/* the signature "road line": double rule like carriageway markings */
.eyebrow::after{
  content:"";display:block;width:64px;
  border-top:2px solid var(--green);
  border-bottom:2px solid var(--green);
  height:7px;margin-top:1em;
}
.eyebrow.light{color:#e8dfc9}
.eyebrow.light::after{border-color:rgba(255,255,255,.75)}

/* ---------- Header ---------- */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 32px;
  transition:background .35s, padding .35s, box-shadow .35s;
}
.site-header .brand,.site-header .site-nav a{color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.35)}
.site-header.scrolled{
  background:var(--paper);
  padding:12px 32px;
  box-shadow:0 1px 0 rgba(35,38,31,.15);
}
.site-header.scrolled .brand,.site-header.scrolled .site-nav a{color:var(--ink);text-shadow:none}
.brand{display:flex;align-items:baseline;gap:.5em}
.brand-mark{font-family:var(--display);font-size:1.5rem;letter-spacing:.12em}
.brand-sub{font-family:var(--utility);font-size:.65rem;letter-spacing:.3em;text-transform:uppercase;opacity:.85}
.site-nav{display:flex;gap:2em;align-items:center;font-family:var(--utility);font-size:.78rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase}
.site-nav a{opacity:.9;transition:opacity .25s}
.site-nav a:hover,.site-nav a:focus-visible{opacity:1}
.nav-cta{
  border:1.5px solid currentColor;
  padding:.55em 1.3em;border-radius:2px;
}
.site-header.scrolled .nav-cta{border-color:var(--green);color:var(--green) !important}
.nav-cta:hover{background:rgba(255,255,255,.15)}
.site-header.scrolled .nav-cta:hover{background:var(--green);color:var(--paper) !important}

/* ---------- Hero ---------- */
.hero{
  position:relative;min-height:100svh;
  display:flex;align-items:flex-end;
}
.hero-image{
  position:absolute;inset:0;
  background:url("../images/rear_clouds.jpg") center 85%/cover no-repeat;
}
.hero-image::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top, rgba(24,26,20,.82) 0%, rgba(24,26,20,.25) 45%, rgba(24,26,20,.12) 100%);
}
.hero-content{
  position:relative;z-index:2;
  width:100%;max-width:var(--wrap);
  margin:0 auto;padding:0 24px 10vh;
}
.standfirst{
  font-size:clamp(1.05rem,2vw,1.35rem);
  font-style:italic;
  color:#f0ead8;
  margin:1.2em 0 2em;
  max-width:34em;
}
.hero-actions{display:flex;gap:1em;flex-wrap:wrap}
.btn{
  display:inline-block;
  font-family:var(--utility);
  font-size:.78rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  padding:1em 2.1em;border-radius:2px;
  border:1.5px solid;
  transition:background .25s,color .25s,border-color .25s;
}
.btn-solid{background:var(--green);border-color:var(--green);color:#f4f1e6}
.btn-solid:hover{background:#33402f;border-color:#33402f}
.btn-ghost{border-color:rgba(255,255,255,.7);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.15)}

/* ---------- Sections ---------- */
.section{padding:110px 0}
.section-alt{background:var(--paper-2);padding-bottom:0}

/* Story */
.story-grid{
  display:grid;grid-template-columns:1.5fr 1fr;gap:64px;align-items:start;
}
.lede{
  font-size:1.3rem;line-height:1.6;
  color:var(--ink);
  margin-bottom:1em;
}
.story-text p+p{margin-top:1em;color:#3d4037}
.story-photo img{border-radius:2px}
.story-photo figcaption{
  font-family:var(--utility);
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--storm);
  margin-top:1em;
}
.road-quote{
  margin:90px auto 0;max-width:760px;text-align:center;
  position:relative;padding-top:42px;
}
/* road-line above the quote */
.road-quote::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:64px;height:7px;
  border-top:2px solid var(--earth);border-bottom:2px solid var(--earth);
}
.road-quote p{
  font-family:var(--display);
  font-size:clamp(1.5rem,3vw,2.2rem);
  font-style:italic;line-height:1.4;
  color:var(--green);
}
.road-quote cite{
  display:block;font-style:normal;
  font-family:var(--utility);
  font-size:.75rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--storm);margin-top:1.4em;
}

/* Figures strip */
.figures{
  background:var(--green);
  color:#eee8d6;
  padding:54px 0;
}
.figures-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:40px;text-align:center}
.fig-num{display:block;font-family:var(--display);font-size:clamp(1.8rem,3.4vw,2.8rem)}
.fig-label{
  display:block;font-family:var(--utility);
  font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;
  color:#bcc4ae;margin-top:.4em;
}

/* Breaker */
.breaker{
  min-height:72vh;
  background:url("../images/storm_profile.jpg") center 90%/cover no-repeat;
  display:flex;align-items:flex-end;justify-content:center;
  position:relative;
}
.breaker::after{content:"";position:absolute;inset:0;background:linear-gradient(to top, rgba(24,26,20,.55), transparent 40%)}
.breaker-line{
  position:relative;z-index:1;
  font-family:var(--display);font-style:italic;
  font-size:clamp(1.2rem,2.4vw,1.7rem);
  color:#f2edda;text-align:center;
  padding:0 24px 56px;max-width:34em;
}
@media (max-width:900px){}

/* Specification */
.spec-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:0 56px;
  border-top:1px solid rgba(35,38,31,.2);
}
.spec-item{
  padding:26px 0;
  border-bottom:1px solid rgba(35,38,31,.15);
}
.spec-item dt{
  font-family:var(--utility);
  font-size:.74rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--earth);margin-bottom:.6em;
}
.spec-item dd{color:#3d4037;font-size:.98rem}
.spec-strip{
  margin-top:48px;padding:26px 32px;
  background:var(--paper-2);
  border-left:4px solid var(--green);
  font-size:.95rem;color:#3d4037;
}
.spec-strip strong{color:var(--ink);font-weight:500}

/* Gallery */
.gallery{
  margin-top:56px;
  display:grid;grid-template-columns:repeat(2,1fr);gap:22px;
  padding:0 22px 110px;
  max-width:1400px;margin-left:auto;margin-right:auto;
}
.g-item{position:relative;overflow:hidden;border-radius:2px;cursor:zoom-in;background:#dcd6c4}
.g-wide{grid-column:1 / -1}
.g-item img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease;aspect-ratio:3/2}
.g-wide img{aspect-ratio:21/9;object-position:center 45%}
.g-item:hover img{transform:scale(1.02)}
.g-item figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:46px 22px 16px;
  font-family:var(--utility);
  font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:#f4f0e2;
  background:linear-gradient(to top, rgba(24,26,20,.75), transparent);
  opacity:0;transition:opacity .4s;
}
.g-item:hover figcaption,.g-item:focus-within figcaption{opacity:1}

/* Commission */
.commission{
  background:var(--ink);
  color:#eee8d6;
  text-align:center;
}
.commission-line{color:#f2edda;font-size:clamp(2.2rem,5vw,3.6rem)}
.commission-line em{font-style:italic;color:#c9bd9c}
.commission-copy{max-width:640px;margin:1.2em auto 3em;color:#c7c2ae}
.commission-copy strong{color:#f2edda;font-weight:500}
.contact-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:960px;margin:0 auto}
.contact-card{
  border:1px solid rgba(238,232,214,.25);
  border-radius:2px;
  padding:28px 20px;
  transition:border-color .3s, background .3s;
}
.contact-card:hover{border-color:var(--earth);background:rgba(151,117,74,.08)}
.cc-label{
  display:block;font-family:var(--utility);
  font-size:.68rem;font-weight:600;letter-spacing:.28em;text-transform:uppercase;
  color:var(--earth);margin-bottom:.7em;
}
.cc-value{font-family:var(--display);font-size:1.05rem;word-break:break-word}

/* Footer */
.site-footer{
  background:var(--ink);
  border-top:1px solid rgba(238,232,214,.12);
  padding:28px 0;
  font-family:var(--utility);
  font-size:.75rem;letter-spacing:.06em;color:#9b978a;
}
.footer-wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.site-footer a:hover{color:#eee8d6}

/* Lightbox */
.lightbox{
  position:fixed;inset:0;z-index:100;
  background:rgba(24,26,20,.95);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:5vh 4vw;
}
.lightbox[hidden]{display:none}
.lightbox img{max-width:100%;max-height:82vh;object-fit:contain;border-radius:2px}
.lb-caption{
  margin-top:1em;font-family:var(--utility);
  font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:#c7c2ae;
}
.lb-close{
  position:absolute;top:18px;right:26px;
  background:none;border:none;color:#f2edda;
  font-size:2.4rem;line-height:1;cursor:pointer;
}
.lb-close:hover{color:var(--earth)}

/* Reveal on scroll */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s ease, transform .8s ease}
.reveal.visible{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .g-item img{transition:none}
  
}

a:focus-visible,button:focus-visible{outline:2px solid var(--earth);outline-offset:3px}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .story-grid{grid-template-columns:1fr;gap:44px}
  .figures-grid{grid-template-columns:repeat(3,1fr);row-gap:32px}
  .spec-grid{grid-template-columns:1fr}
  .contact-cards{grid-template-columns:1fr;max-width:420px}
}
@media (max-width:680px){
  .site-header{padding:16px 20px}
  .site-nav{gap:1.2em;font-size:.68rem}
  .site-nav a:not(.nav-cta){display:none}
  .section{padding:76px 0}
  .hero-image{background-position:62% 75%}
  .gallery{grid-template-columns:1fr;padding-bottom:76px}
  .g-wide img{aspect-ratio:3/2}
  .figures-grid{grid-template-columns:repeat(2,1fr)}
  .g-item figcaption{opacity:1}
}