/* Hollow Oak demo: design tokens first, then base, layout, components. */
:root{
  --forest:#1f3a2c; --forest-2:#2d5240; --moss:#6b8f5e; --ivory:#f6f2e7; --paper:#fbf9f3;
  --charcoal:#23262a; --muted:#5b605c; --ochre:#c8993a; --line:#ddd5c0;
  --font-body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-display:"Fraunces",Georgia,"Times New Roman",serif;
  --space:clamp(1rem,3vw,2rem); --section:clamp(3.5rem,9vw,7rem); --header-h:68px;
  --r-s:8px; --r-m:14px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:var(--header-h)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;font-family:var(--font-body);color:var(--charcoal);background:var(--paper);line-height:1.65;font-size:clamp(1rem,.96rem + .2vw,1.1rem);overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3{font-family:var(--font-display);font-weight:600;line-height:1.15;margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:clamp(2.3rem,1.4rem + 4.5vw,4.6rem)}
h2{font-size:clamp(1.8rem,1.3rem + 2.4vw,3rem)}
h3{font-size:1.25rem}
p{margin:0 0 1em;max-width:62ch}
a{color:inherit}
:focus-visible{outline:3px solid var(--ochre);outline-offset:3px;border-radius:4px}
.container{width:min(1160px,100% - 2*var(--space));margin-inline:auto}
.narrow{width:min(760px,100% - 2*var(--space))}
.skip-link{position:absolute;left:1rem;top:-4rem;background:var(--ivory);padding:.6rem 1rem;z-index:100;border-radius:var(--r-s)}
.skip-link:focus{top:1rem}

/* Header */
.site-header{position:sticky;top:0;z-index:50;height:var(--header-h);background:var(--paper);border-bottom:1px solid transparent;transition:box-shadow .3s,border-color .3s,background-color .3s}
.site-header.scrolled{border-color:var(--line);box-shadow:0 6px 20px rgba(31,58,44,.08);background:rgba(251,249,243,.96)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:100%}
.logo{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--forest);font-family:var(--font-display);font-weight:600;font-size:1.3rem}
.menu-toggle{width:44px;height:44px;border:1px solid var(--line);border-radius:var(--r-s);background:none;display:grid;place-content:center;gap:5px;cursor:pointer}
.menu-toggle span{display:block;width:20px;height:2px;background:var(--forest);transition:transform .3s,opacity .2s}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.primary-nav{position:absolute;top:var(--header-h);left:0;right:0;background:var(--paper);border-bottom:1px solid var(--line);padding:1rem var(--space) 1.5rem;display:grid;gap:1rem;opacity:0;transform:translateY(-8px);visibility:hidden;transition:opacity .25s,transform .25s,visibility .25s}
.primary-nav.open{opacity:1;transform:none;visibility:visible}
.primary-nav ul{display:grid}
.primary-nav li a{display:block;padding:.7rem 0;text-decoration:none;font-weight:500;border-bottom:1px solid var(--line)}
@media (min-width:860px){
  .menu-toggle{display:none}
  .primary-nav{position:static;display:flex;align-items:center;gap:2rem;padding:0;border:0;background:none;opacity:1;transform:none;visibility:visible}
  .primary-nav ul{display:flex;gap:1.8rem}
  .primary-nav li a{border:0;padding:.3rem 0;background:linear-gradient(var(--ochre),var(--ochre)) 0 100%/0 2px no-repeat;transition:background-size .3s}
  .primary-nav li a:hover{background-size:100% 2px}
}

/* Buttons */
.btn{display:inline-block;padding:.85rem 1.5rem;border-radius:999px;font-weight:600;text-decoration:none;border:2px solid transparent;cursor:pointer;font:inherit;font-weight:600;transition:transform .2s,background-color .2s,color .2s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--forest);color:var(--ivory)}
.btn-primary:hover{background:var(--forest-2)}
.btn-accent{background:var(--ochre);color:#1b1b17}
.btn-accent:hover{background:#d6a844}
.btn-ghost{border-color:var(--forest);color:var(--forest)}
.btn-ghost:hover{background:var(--forest);color:var(--ivory)}
.btn-row{display:flex;flex-wrap:wrap;gap:.8rem}

/* Hero */
.hero{padding:clamp(2rem,6vw,5rem) 0 var(--section);overflow:hidden}
.hero-grid{display:grid;gap:2.5rem;align-items:center}
.lead{font-size:1.15em;color:var(--muted);margin-bottom:1.8rem}
.hero-media{position:relative}
.hero-media::before{content:"";position:absolute;inset:auto -12% -14% auto;width:55%;aspect-ratio:1;border-radius:50%;background:var(--ivory);border:1px solid var(--line);z-index:0}
.hero-media img{position:relative;z-index:1;border-radius:var(--r-m) var(--r-m) 120px var(--r-m);box-shadow:0 20px 40px rgba(31,58,44,.18);aspect-ratio:4/3;object-fit:cover}
@media (min-width:900px){.hero-grid{grid-template-columns:1.05fr 1fr;gap:4rem}}
@media (prefers-reduced-motion:no-preference){
  .hero-copy>*{animation:rise .8s both cubic-bezier(.2,.7,.2,1)}
  .hero-copy>:nth-child(2){animation-delay:.12s}.hero-copy>:nth-child(3){animation-delay:.24s}
  .hero-media img{animation:rise 1s .2s both cubic-bezier(.2,.7,.2,1)}
}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

/* Trust */
.trust{background:var(--forest);color:var(--ivory)}
.trust-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.5rem 2rem;padding:1.2rem 0;font-weight:500}
.trust-list li{padding-left:1.4rem;position:relative}
.trust-list li::before{content:"";position:absolute;left:0;top:.6em;width:.6rem;height:.6rem;border-radius:50%;background:var(--ochre)}

/* Sections */
.section{padding:var(--section) 0}
.section-tint{background:var(--ivory)}
.section-dark{background:var(--forest);color:var(--ivory)}
.section-head{margin-bottom:2.5rem}
.section-head p{color:var(--muted)}
.section-dark p{color:#dfe6d6}

/* Services */
.service-grid{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.service{background:#fff;border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;transition:transform .3s,box-shadow .3s}
.service:hover{transform:translateY(-4px);box-shadow:0 14px 28px rgba(31,58,44,.12)}
.service img{aspect-ratio:3/2;object-fit:cover;width:100%}
.service div{padding:1.2rem 1.3rem 1.4rem}
.service p{margin:0;color:var(--muted)}

/* About */
.about-grid{display:grid;gap:2.5rem;align-items:center}
.about-grid img{border-radius:var(--r-m);aspect-ratio:4/5;object-fit:cover;width:100%;max-height:520px}
@media (min-width:860px){.about-grid{grid-template-columns:1fr 1fr;gap:5rem}}

/* Gallery */
.gallery{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.gallery-item{position:relative;display:block;width:100%;padding:0;border:0;border-radius:var(--r-m);overflow:hidden;cursor:zoom-in;background:var(--forest)}
.gallery-item img{aspect-ratio:4/3;object-fit:cover;width:100%;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.gallery-cap{position:absolute;inset:auto 0 0 0;padding:2.5rem 1rem .9rem;color:#fff;font:500 .95rem var(--font-body);text-align:left;background:linear-gradient(transparent,rgba(20,32,25,.85));transform:translateY(100%);transition:transform .35s}
.gallery-item:hover img,.gallery-item:focus-visible img{transform:scale(1.06)}
.gallery-item:hover .gallery-cap,.gallery-item:focus-visible .gallery-cap{transform:none}
@media (hover:none){.gallery-cap{transform:none}}
.lightbox{border:0;padding:0;border-radius:var(--r-m);max-width:min(900px,94vw);background:var(--charcoal);color:#fff;overflow:visible}
.lightbox::backdrop{background:rgba(15,22,18,.8)}
.lightbox img{width:100%;height:auto;border-radius:var(--r-m) var(--r-m) 0 0}
.lightbox p{margin:0;padding:1rem 1.3rem}
.lightbox-close{position:absolute;top:-14px;right:-14px;width:44px;height:44px;border-radius:50%;border:2px solid var(--charcoal);background:var(--ochre);font-size:1.6rem;line-height:1;cursor:pointer}

/* Process */
.steps{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));counter-reset:step}
.steps li{counter-increment:step;border-top:3px solid var(--forest);padding-top:1rem}
.steps li::before{content:counter(step);display:grid;place-content:center;width:2.2rem;height:2.2rem;border-radius:50%;background:var(--forest);color:var(--ivory);font-weight:600;margin-bottom:.8rem}
.steps p{color:var(--muted)}

/* Areas, quotes */
.chips{display:flex;flex-wrap:wrap;gap:.6rem}
.chips li{padding:.5rem 1.1rem;border:1px solid var(--line);border-radius:999px;background:var(--ivory)}
.quote-grid{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.quote{margin:0;padding:1.5rem;background:#fff;border:1px solid var(--line);border-left:4px solid var(--ochre);border-radius:var(--r-s)}
.quote blockquote{margin:0 0 1rem;font-family:var(--font-display);font-size:1.15rem;line-height:1.45}
.quote figcaption{color:var(--muted);font-size:.9rem}

/* FAQ */
.faq-item{border-bottom:1px solid var(--line)}
.faq-item h3{margin:0;font-size:inherit}
.faq-q{width:100%;display:flex;justify-content:space-between;gap:1rem;padding:1.1rem 0;background:none;border:0;font:600 1.1rem var(--font-display);color:inherit;text-align:left;cursor:pointer}
.faq-q::after{content:"+";font-size:1.5rem;line-height:1;transition:transform .3s}
.faq-q[aria-expanded="true"]::after{transform:rotate(45deg)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s ease}
.faq-a>div{overflow:hidden}
.faq-a.open{grid-template-rows:1fr}
.faq-a p{color:var(--muted)}

/* Contact */
.contact-grid{display:grid;gap:2.5rem}
@media (min-width:860px){.contact-grid{grid-template-columns:1fr 1.2fr;gap:5rem}}
.notice{padding:1rem 1.2rem;border:1px dashed var(--ochre);border-radius:var(--r-s);color:var(--ivory)}
.form{background:var(--paper);color:var(--charcoal);padding:clamp(1.2rem,4vw,2rem);border-radius:var(--r-m);display:grid;gap:1rem}
.field{display:grid;gap:.35rem}
label{font-weight:600;font-size:.95rem}
input,select,textarea{font:inherit;padding:.75rem .9rem;border:1.5px solid #b9b49f;border-radius:var(--r-s);background:#fff;color:inherit;width:100%}
input[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:#a3261f}
.error{color:#a3261f;font-size:.88rem;min-height:1.2em}
.privacy{font-size:.9rem;color:var(--muted);margin:0}
.status{margin:0;font-weight:500}

/* Footer */
.site-footer{background:var(--charcoal);color:#d6d8d2;padding:3rem 0 1.5rem}
.footer-grid{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.site-footer p{margin:0 0 .5rem}
.logo-text{font-family:var(--font-display);font-size:1.3rem;color:#fff}
.site-footer li{margin-bottom:.4rem}
.copyright{margin-top:2rem !important;padding-top:1rem;border-top:1px solid #3a3e42;font-size:.9rem;max-width:none}

/* Scroll reveal: hidden state only applies when JS is running */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.js .reveal.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition-duration:.01ms !important}
  .js .reveal{opacity:1;transform:none}
}