/* ==========================================================
   Strawhorn Surveyors — Global Stylesheet (v3)
   Design language matched to the supplied reference mockups.

   Brand colours verified from the real logo file (Original_Logo.png)
   and cross-checked against the reference mockups' own palette strip
   (#0E3B2E / #1D5C44 / #D4AF37 / #F5F7F6 / #333333):
     Primary green  #0E3B2E
     Deep green     #0A2B20
     Mid green      #1D5C44
     Accent gold    #D4AF37
   ========================================================== */

:root{
  --color-primary:#0E3B2E;
  --color-primary-deep:#0A2B20;
  --color-secondary:#1D5C44;
  --color-accent:#D4AF37;
  --color-accent-dark:#BE9930;
  --color-bg:#F5F7F6;
  --color-surface:#FFFFFF;
  --color-text:#333333;
  --color-text-muted:#5F6B66;
  --color-error:#B3261E;
  --radius-sm:8px;
  --radius-md:14px;
  --radius-lg:20px;
  --radius-pill:999px;
  --shadow-sm:0 4px 14px rgba(14,59,46,.06);
  --shadow:0 14px 36px rgba(14,59,46,.10);
  --shadow-hover:0 20px 44px rgba(14,59,46,.16);
  --header-height:5rem;
  --transition:220ms ease;
  --max-width:1240px;
}

*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:"Source Sans 3", "Source Sans Pro", Arial, sans-serif;
  background:var(--color-bg);
  color:var(--color-text);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

h1, h2, h3, h4{
  font-family:"Montserrat", Arial, sans-serif;
  font-weight:700;
  color:var(--color-primary);
  line-height:1.15;
  margin-top:0;
}
h1{ font-size:clamp(2.1rem, 4vw, 3.2rem); }
h2{ font-size:clamp(1.6rem, 2.7vw, 2.2rem); }
h3{ font-size:1.15rem; }
h4{ font-size:1rem; }

p{ margin-top:0; }
a{ color:var(--color-secondary); }
img{ max-width:100%; display:block; }
ul{ margin:0; }

.container{
  max-width:var(--max-width);
  margin:0 auto;
  padding:0 2rem;
}

.eyebrow{
  display:block;
  color:var(--color-accent);
  text-transform:uppercase;
  letter-spacing:.16em;
  font-weight:700;
  font-size:.78rem;
  margin-bottom:.9rem;
}

section{ padding:5rem 0; }

.section-heading{
  max-width:720px;
  margin:0 auto 3rem;
  text-align:center;
}
.section-heading p:last-child{ color:var(--color-text-muted); margin-bottom:0; }

/* Gold rule under centred headings, as in the reference */
.section-heading h2::after{
  content:"";
  display:block;
  width:56px; height:3px;
  background:var(--color-accent);
  margin:1rem auto 0;
  border-radius:2px;
}

/* ---------- Accessibility ---------- */
.skip-link{
  position:absolute; left:-9999px; top:0;
  background:var(--color-primary); color:#fff;
  padding:1rem 1.5rem; z-index:9999;
  border-radius:0 0 var(--radius-sm) 0;
}
.skip-link:focus{ left:0; }
:focus-visible{ outline:3px solid var(--color-accent); outline-offset:3px; }
.visually-hidden{
  position:absolute !important; width:1px; height:1px; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.95rem 1.8rem; border-radius:var(--radius-sm);
  font-weight:700; text-decoration:none; border:none; cursor:pointer;
  font-size:.98rem; gap:.6rem;
  font-family:"Montserrat", sans-serif;
  transition:transform var(--transition), background var(--transition), box-shadow var(--transition);
}
.btn svg{ width:16px; height:16px; }
.btn-primary{ background:var(--color-accent); color:var(--color-primary-deep); }
.btn-primary:hover{ background:var(--color-accent-dark); transform:translateY(-2px); box-shadow:0 12px 24px rgba(212,175,55,.32); }
.btn-secondary{ background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.55); }
.btn-secondary:hover{ background:rgba(255,255,255,.12); transform:translateY(-2px); }
.btn-outline{ background:transparent; color:var(--color-primary); border:1.5px solid var(--color-primary); }
.btn-outline:hover{ background:var(--color-primary); color:#fff; }
.btn-outline-gold{ background:transparent; color:var(--color-accent); border:1.5px solid var(--color-accent); }
.btn-outline-gold:hover{ background:var(--color-accent); color:var(--color-primary-deep); }

/* ---------- Header ---------- */

.site-header{
  position:sticky; top:0; z-index:1000;
  background:var(--color-primary);
  transition:box-shadow var(--transition);
}
.site-header.is-scrolled{ box-shadow:0 8px 24px rgba(0,0,0,.22); }

.header-shell{
  max-width:var(--max-width); margin:0 auto;
  min-height:var(--header-height);
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; padding:.5rem 2rem;
}

.site-logo{ display:flex; align-items:center; flex-shrink:0; }
.site-logo img{ height:54px; width:auto; }

.desktop-navigation{ flex:1; display:flex; justify-content:center; }
.navigation-list{
  display:flex; align-items:center; gap:1.75rem;
  list-style:none; margin:0; padding:0;
}
.navigation-list a{
  color:rgba(255,255,255,.9);
  font:600 .88rem/1.2 "Montserrat", sans-serif;
  text-decoration:none; position:relative; padding:.5rem 0;
  white-space:nowrap;
}
.navigation-list a::after{
  content:""; position:absolute; left:0; bottom:-3px;
  width:0; height:2px; background:var(--color-accent);
  transition:width var(--transition);
}
.navigation-list a:hover::after,
.navigation-list a:focus-visible::after,
.navigation-list a[aria-current="page"]::after{ width:100%; }
.navigation-list a[aria-current="page"]{ color:#fff; }

.navigation-actions{ display:flex; align-items:center; gap:1rem; flex-shrink:0; }
.primary-cta{
  display:inline-flex; padding:.72rem 1.5rem; border-radius:var(--radius-sm);
  background:var(--color-accent); color:var(--color-primary-deep);
  font:700 .86rem "Montserrat", sans-serif; text-decoration:none;
  transition:background var(--transition), transform var(--transition);
  white-space:nowrap;
}
.primary-cta:hover{ background:var(--color-accent-dark); transform:translateY(-2px); }

.mobile-toggle{
  display:none; flex-direction:column; gap:5px;
  background:none; border:0; cursor:pointer; padding:.5rem;
}
.mobile-toggle span{ width:24px; height:2px; background:#fff; display:block; }

.mobile-navigation{ display:none; background:var(--color-primary-deep); }
.mobile-navigation.is-open{ display:block; }
.mobile-navigation ul{ list-style:none; margin:0; padding:1rem 2rem 1.5rem; }
.mobile-navigation li{ border-top:1px solid rgba(255,255,255,.12); }
.mobile-navigation li:first-child{ border-top:0; }
.mobile-navigation a{
  display:block; padding:.9rem 0; color:#fff; text-decoration:none;
  font:600 1rem "Montserrat", sans-serif;
}
.mobile-navigation a[aria-current="page"]{ color:var(--color-accent); }

@media (max-width:1100px){
  .desktop-navigation{ display:none; }
  .mobile-toggle{ display:inline-flex; }
}

/* ==========================================================
   HERO — the signature "green fading into the photo" treatment
   ==========================================================
   Structure:
     <section class="hero">
       <div class="hero-media"><img src="..." alt=""></div>   <- optional real photo
       <div class="hero-overlay"></div>                        <- green fade
       <div class="container hero-content"> ... </div>
     </section>

   The overlay is a horizontal gradient: solid brand green on the left,
   fading to transparent across the middle, so the photo shows through on
   the right while text stays fully legible on the left. A second vertical
   gradient darkens the bottom edge so the overlapping card row reads well.
   Works with or without a photo present.
*/

.hero{
  position:relative;
  background:var(--color-primary);
  color:#fff;
  overflow:hidden;
  isolation:isolate;
}

/* The hero-media div always carries the placeholder treatment as its own
   background. A real photo, when present, is layered on top and hides it.
   If the photo file is missing the <img> removes itself (see the onerror
   attribute in the HTML) and the placeholder simply shows through — so the
   page never displays a broken-image icon. */
.hero-media{
  position:absolute; inset:0;
  z-index:-2;
  background:
    radial-gradient(circle at 72% 35%, rgba(255,255,255,.10), transparent 55%),
    linear-gradient(150deg, var(--color-secondary), var(--color-primary-deep));
}
.hero-media::after{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:40px 40px;
}
.hero-media img.slot-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center right;
  z-index:1;
}

.hero-overlay{
  position:absolute; inset:0;
  z-index:-1;
  background:
    linear-gradient(to bottom,
      rgba(14,59,46,.35) 0%,
      rgba(14,59,46,0) 25%,
      rgba(14,59,46,0) 65%,
      rgba(10,43,32,.55) 100%),
    linear-gradient(to right,
      var(--color-primary) 0%,
      var(--color-primary) 28%,
      rgba(14,59,46,.92) 42%,
      rgba(14,59,46,.55) 58%,
      rgba(14,59,46,.15) 78%,
      rgba(14,59,46,.05) 100%);
}

.hero-content{
  position:relative;
  padding-top:6rem;
  padding-bottom:7rem;
  max-width:var(--max-width);
}
.hero-inner{ max-width:560px; }
.hero h1{ color:#fff; margin-bottom:.75rem; }
.hero-tagline{
  color:var(--color-accent);
  font:700 clamp(1.05rem,1.8vw,1.3rem) "Montserrat", sans-serif;
  margin-bottom:1.1rem;
}
.hero-inner p{ color:rgba(255,255,255,.9); font-size:1.05rem; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2rem; }

/* Interior page hero — same treatment, shorter */
.hero.hero-compact .hero-content{ padding-top:4.5rem; padding-bottom:5rem; }

@media (max-width:860px){
  /* On narrow screens the photo sits behind everything, so strengthen the
     overlay to keep text contrast well above WCAG AA. */
  .hero-overlay{
    background:linear-gradient(to bottom,
      rgba(14,59,46,.94) 0%,
      rgba(14,59,46,.88) 60%,
      rgba(10,43,32,.94) 100%);
  }
  .hero-content{ padding-top:4rem; padding-bottom:5rem; }
  .hero-inner{ max-width:none; }
}

/* ---------- Feature strip: white card overlapping the hero ---------- */

.feature-strip{
  margin-top:-4.5rem;
  position:relative;
  z-index:5;
  padding-top:0;
  padding-bottom:4rem;
}
.feature-strip-inner{
  background:var(--color-surface);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-hover);
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  padding:2.5rem 1rem;
}
.feature-item{
  text-align:center;
  padding:.5rem 1.5rem;
  border-right:1px solid rgba(14,59,46,.10);
}
.feature-item:last-child{ border-right:none; }
.feature-item svg{
  width:38px; height:38px;
  color:var(--color-primary);
  margin:0 auto .9rem;
  stroke-width:1.5;
}
.feature-item h3{ font-size:1.02rem; margin-bottom:.4rem; }
.feature-item p{
  color:var(--color-text-muted);
  font-size:.88rem;
  margin:0;
  line-height:1.55;
}
.feature-item strong{
  display:block;
  font:700 clamp(1.5rem,2.6vw,2rem)/1 "Montserrat", sans-serif;
  color:var(--color-primary);
  margin-bottom:.3rem;
}
.feature-item span{ color:var(--color-text-muted); font-weight:600; font-size:.86rem; }

@media (max-width:900px){
  .feature-strip-inner{ grid-template-columns:1fr 1fr; row-gap:2rem; }
  .feature-item:nth-child(2n){ border-right:none; }
}
@media (max-width:520px){
  .feature-strip{ margin-top:-2.5rem; }
  .feature-strip-inner{ grid-template-columns:1fr; }
  .feature-item{ border-right:none; border-bottom:1px solid rgba(14,59,46,.10); padding-bottom:1.5rem; }
  .feature-item:last-child{ border-bottom:none; padding-bottom:.5rem; }
}

/* ---------- Card grids ---------- */

.card-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1.75rem; }
.card-grid.cols-2{ grid-template-columns:repeat(2, 1fr); }

.info-card{
  background:var(--color-surface);
  border-radius:var(--radius-md);
  padding:2rem;
  box-shadow:var(--shadow);
  transition:transform var(--transition), box-shadow var(--transition);
  display:flex; flex-direction:column;
}
.info-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-hover); }
.info-card h3{ margin-bottom:.55rem; }
.info-card p{ color:var(--color-text-muted); margin:0; flex:1; }
.info-card .card-link{
  display:inline-flex; align-items:center; gap:.4rem;
  margin-top:1.25rem; font:700 .9rem "Montserrat", sans-serif;
  color:var(--color-primary); text-decoration:none;
}
.info-card .card-link svg{ width:15px; height:15px; color:var(--color-accent); transition:transform var(--transition); }
.info-card .card-link:hover svg{ transform:translateX(4px); }

/* Round dark-green icon badge, as used on the reference service cards */
.icon-badge{
  width:52px; height:52px; border-radius:50%;
  background:var(--color-primary);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:1.2rem;
  color:var(--color-accent);
  flex-shrink:0;
}
.icon-badge svg{ width:24px; height:24px; stroke-width:1.7; }
.icon-badge.light{ background:rgba(14,59,46,.08); color:var(--color-primary); }

@media (max-width:900px){ .card-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:620px){ .card-grid, .card-grid.cols-2{ grid-template-columns:1fr; } }

/* ---------- Method cards (DRC 3-step, with key considerations) ---------- */

.method-card{
  background:var(--color-surface);
  border-radius:var(--radius-md);
  padding:1.75rem;
  box-shadow:var(--shadow);
}
.method-head{ display:flex; gap:1.1rem; align-items:flex-start; margin-bottom:1.25rem; }
.method-head .icon-badge{ background:rgba(14,59,46,.07); color:var(--color-primary); margin-bottom:0; }
.method-head h3{ margin-bottom:.4rem; }
.method-head p{ color:var(--color-text-muted); font-size:.9rem; margin:0; }
.method-card h4{
  font-size:.82rem; text-transform:uppercase; letter-spacing:.08em;
  color:var(--color-text-muted);
  padding-top:1.1rem; border-top:1px solid rgba(14,59,46,.10);
  margin-bottom:.9rem;
}
.tick-list{ list-style:none; padding:0; display:grid; gap:.6rem; }
.tick-list li{ display:flex; gap:.65rem; align-items:flex-start; font-size:.92rem; }
.tick-list svg{ width:17px; height:17px; color:var(--color-accent); flex-shrink:0; margin-top:.25rem; }

/* ---------- "Who we work with" icon row ---------- */

.audience-row{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:0;
}
.audience-item{
  text-align:center;
  padding:1.25rem 1rem;
  border-right:1px solid rgba(14,59,46,.10);
}
.audience-item:last-child{ border-right:none; }
.audience-item svg{
  width:34px; height:34px; color:var(--color-primary);
  margin:0 auto .7rem; stroke-width:1.5;
}
.audience-item span{
  font:700 .86rem "Montserrat", sans-serif;
  color:var(--color-primary);
}
@media (max-width:900px){
  .audience-row{ grid-template-columns:repeat(3, 1fr); }
  .audience-item{ border-bottom:1px solid rgba(14,59,46,.10); }
  .audience-item:nth-child(3n){ border-right:none; }
}
@media (max-width:520px){
  .audience-row{ grid-template-columns:1fr 1fr; }
  .audience-item:nth-child(3n){ border-right:1px solid rgba(14,59,46,.10); }
  .audience-item:nth-child(2n){ border-right:none; }
}

/* ---------- Numbered process steps ---------- */

.process-row{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:1rem;
  align-items:stretch;
}
.process-step{
  background:var(--color-surface);
  border-radius:var(--radius-md);
  padding:2.25rem 1.25rem 1.5rem;
  box-shadow:var(--shadow-sm);
  text-align:center;
  position:relative;
}
.process-number{
  position:absolute; top:-16px; left:50%; transform:translateX(-50%);
  width:34px; height:34px; border-radius:50%;
  background:var(--color-accent); color:var(--color-primary-deep);
  display:flex; align-items:center; justify-content:center;
  font:700 .82rem "Montserrat", sans-serif;
}
.process-step svg.step-icon{
  width:30px; height:30px; color:var(--color-primary);
  margin:0 auto .8rem; stroke-width:1.5;
}
.process-step h3{ font-size:.98rem; margin-bottom:.4rem; }
.process-step p{ color:var(--color-text-muted); font-size:.84rem; margin:0; line-height:1.5; }

@media (max-width:1000px){ .process-row{ grid-template-columns:repeat(3, 1fr); row-gap:2rem; } }
@media (max-width:620px){ .process-row{ grid-template-columns:1fr; row-gap:2rem; } }

/* ---------- Dark green band (why clients choose us) ---------- */

.dark-band{
  background:var(--color-primary);
  color:#fff;
  padding:4.5rem 0;
}
.dark-band h2, .dark-band h3{ color:#fff; }
.dark-band .section-heading h2::after{ background:var(--color-accent); }
.dark-band .eyebrow{ color:var(--color-accent); text-align:center; }

.reason-row{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:2rem 1rem;
}
.reason-row.cols-6{ grid-template-columns:repeat(6, 1fr); }
.reason-item{ text-align:center; padding:0 1rem; }
.reason-item svg{
  width:34px; height:34px; color:var(--color-accent);
  margin:0 auto .8rem; stroke-width:1.5;
}
.reason-item h3{ font-size:.95rem; margin-bottom:.4rem; }
.reason-item p{ color:rgba(255,255,255,.75); font-size:.84rem; margin:0; line-height:1.55; }

@media (max-width:1000px){ .reason-row, .reason-row.cols-6{ grid-template-columns:repeat(3, 1fr); } }
@media (max-width:620px){ .reason-row, .reason-row.cols-6{ grid-template-columns:1fr 1fr; } }

/* ---------- CTA card (dark rounded box, photo + text) ---------- */

.cta-card{
  background:var(--color-primary);
  border-radius:var(--radius-lg);
  overflow:hidden;
  display:grid;
  grid-template-columns:0.9fr 1.1fr;
  align-items:center;
  color:#fff;
  position:relative;
}
.cta-card-media{
  align-self:stretch;
  min-height:260px;
  margin:1.75rem;
  border-radius:var(--radius-md);
  overflow:hidden;
  background:
    radial-gradient(circle at 40% 30%, rgba(255,255,255,.10), transparent 55%),
    linear-gradient(150deg, var(--color-secondary), var(--color-primary-deep));
  display:flex; align-items:center; justify-content:center;
}
.cta-card-media svg{ width:45%; max-width:150px; opacity:.7; }
.cta-card-body{ padding:2.5rem 2.75rem 2.5rem 1rem; }
.cta-card-body h2{ color:#fff; margin-bottom:.75rem; }
.cta-card-body p{ color:rgba(255,255,255,.82); margin-bottom:1.75rem; }
.cta-card-actions{ display:flex; align-items:center; gap:1.75rem; flex-wrap:wrap; }
.cta-phone{
  display:inline-flex; align-items:center; gap:.6rem;
  color:#fff; text-decoration:none;
  font:700 1.05rem "Montserrat", sans-serif;
}
.cta-phone svg{ width:20px; height:20px; color:var(--color-accent); }
.cta-phone:hover{ color:var(--color-accent); }

@media (max-width:860px){
  .cta-card{ grid-template-columns:1fr; }
  .cta-card-media{ margin:1.5rem 1.5rem 0; min-height:200px; }
  .cta-card-body{ padding:2rem 1.75rem 2.25rem; }
}

/* ---------- Split section (image + text) ---------- */

.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3rem;
  align-items:center;
}
.split-media{
  position:relative;
  border-radius:var(--radius-md);
  overflow:hidden;
  min-height:340px;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.10), transparent 55%),
    linear-gradient(150deg, var(--color-secondary), var(--color-primary-deep));
  display:flex; align-items:center; justify-content:center;
}
.split-media svg{ width:50%; max-width:180px; opacity:.75; }

@media (max-width:860px){ .split{ grid-template-columns:1fr; gap:2rem; } }

/* ---------- Photo slots ----------
   Shared behaviour for the smaller image containers (.split-media,
   .cta-card-media, .about-hero-portrait). The <img> sits on top of the
   inline placeholder artwork and covers it completely. If the image file
   isn't present the <img> removes itself and the placeholder shows instead. */

.split-media,
.cta-card-media,
.about-hero-portrait{ position:relative; }

.split-media img.slot-img,
.cta-card-media img.slot-img,
.about-hero-portrait img.slot-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index:2;
}

/* ---------- Check list ---------- */

.check-list{ list-style:none; padding:0; display:grid; gap:1rem; }
.check-list li{ display:flex; gap:.85rem; align-items:flex-start; }
.check-list svg{ flex-shrink:0; width:19px; height:19px; color:var(--color-accent); margin-top:.28rem; }
.check-list strong{ color:var(--color-primary); }

/* ---------- Checklist (services detail pages) ---------- */

.checklist{ list-style:none; padding:0; display:grid; gap:.55rem; }
.checklist > li{ padding:.55rem 0 .55rem 1.9rem; position:relative; }
.checklist > li::before{
  content:""; position:absolute; left:0; top:1rem;
  width:8px; height:8px; border-radius:50%;
  background:var(--color-accent);
}
.checklist ul{ margin-top:.4rem; padding-left:0; display:grid; gap:.4rem; list-style:none; }
.checklist ul li{ position:relative; padding-left:1.4rem; color:var(--color-text-muted); }
.checklist ul li::before{
  content:""; position:absolute; left:0; top:.75rem;
  width:6px; height:6px; border-radius:50%;
  background:var(--color-primary); opacity:.45;
}

/* ---------- FAQ accordion ---------- */

.faq-list{ display:grid; gap:1rem; max-width:820px; margin:0 auto; }
.faq-item{
  background:var(--color-surface);
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}
.faq-question{
  width:100%; text-align:left; background:none; border:none;
  padding:1.35rem 1.6rem; font:700 1rem "Montserrat", sans-serif;
  color:var(--color-primary); cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.faq-question svg{
  width:18px; height:18px; flex-shrink:0;
  transition:transform var(--transition);
  color:var(--color-accent);
}
.faq-question[aria-expanded="true"] svg{ transform:rotate(45deg); }
.faq-answer{
  max-height:0; overflow:hidden;
  transition:max-height 320ms ease, padding var(--transition);
  padding:0 1.6rem;
}
.faq-answer[data-open="true"]{ padding:0 1.6rem 1.4rem; }
.faq-answer p{ color:var(--color-text-muted); margin:0 0 .75rem; }
.faq-answer p:last-child{ margin-bottom:0; }
.faq-answer ul{ padding-left:1.2rem; color:var(--color-text-muted); }

/* ---------- Sub navigation ---------- */

.sub-nav{ background:var(--color-primary-deep); padding:1rem 0; }
.sub-nav ul{
  list-style:none; margin:0 auto; padding:0 2rem;
  display:flex; flex-wrap:wrap; gap:.5rem 1.75rem;
  max-width:var(--max-width);
}
.sub-nav a{
  color:rgba(255,255,255,.82); text-decoration:none;
  font:600 .86rem "Montserrat", sans-serif;
}
.sub-nav a:hover, .sub-nav a[aria-current="page"]{ color:var(--color-accent); }

/* ---------- Testimonials ---------- */

.testimonial-card{
  background:var(--color-surface);
  border-radius:var(--radius-md);
  padding:2rem;
  box-shadow:var(--shadow);
  display:flex; flex-direction:column;
}
.testimonial-card::before{
  content:"\201C";
  font-family:Georgia, serif;
  font-size:3.5rem;
  color:var(--color-accent);
  line-height:.8;
  display:block;
  margin-bottom:.75rem;
}
.testimonial-card p{ font-size:.98rem; flex:1; }
.testimonial-attribution{
  margin-top:1.5rem; padding-top:1.25rem;
  border-top:1px solid rgba(14,59,46,.10);
}
.testimonial-attribution strong{
  display:block; color:var(--color-primary);
  font-family:"Montserrat", sans-serif; font-size:.95rem;
}
.testimonial-attribution span{ display:block; color:var(--color-text-muted); font-size:.86rem; }

.testimonial-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1.75rem; }
.testimonial-grid.cols-2{ grid-template-columns:repeat(2, 1fr); }
@media (max-width:1000px){ .testimonial-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:700px){ .testimonial-grid, .testimonial-grid.cols-2{ grid-template-columns:1fr; } }

.testimonial-compact{
  background:var(--color-surface);
  border-left:4px solid var(--color-accent);
  border-radius:var(--radius-sm);
  padding:1.5rem 1.75rem;
  margin-bottom:1.25rem;
  box-shadow:var(--shadow-sm);
}
.testimonial-compact p{ font-style:italic; }
.testimonial-compact .testimonial-attribution{ border-top:none; padding-top:.75rem; margin-top:.75rem; }

/* ---------- About page ---------- */

.about-hero-portrait{
  width:100%;
  max-width:300px;
  aspect-ratio:4/5;
  border-radius:var(--radius-md);
  border:2px solid var(--color-accent);
  overflow:hidden;
  background:linear-gradient(150deg, var(--color-secondary), var(--color-primary-deep));
  display:flex; align-items:center; justify-content:center;
  justify-self:end;
}
.about-hero-portrait svg{ width:50%; opacity:.6; }

.hero-with-portrait .hero-content{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:3rem;
  align-items:center;
}
@media (max-width:860px){
  .hero-with-portrait .hero-content{ grid-template-columns:1fr; }
  .about-hero-portrait{ justify-self:start; max-width:220px; }
}

.timeline-card{
  background:var(--color-surface);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow);
  padding:2rem;
}
.timeline{ position:relative; padding-left:2.25rem; }
.timeline::before{
  content:""; position:absolute; left:15px; top:10px; bottom:10px;
  width:2px; background:rgba(14,59,46,.15);
}
.timeline-item{ position:relative; padding-bottom:1.6rem; }
.timeline-item:last-child{ padding-bottom:0; }
.timeline-item::before{
  content:""; position:absolute; left:-2.25rem; top:.2rem;
  width:32px; height:32px; border-radius:50%;
  background:var(--color-primary);
  border:3px solid var(--color-surface);
}
.timeline-item .timeline-year{
  color:var(--color-accent); font:700 .85rem "Montserrat", sans-serif;
  margin-bottom:.1rem;
}
.timeline-item .timeline-role{ color:var(--color-primary); font:700 .95rem "Montserrat", sans-serif; margin-bottom:.1rem; }
.timeline-item .timeline-org{ color:var(--color-text-muted); font-size:.86rem; margin-bottom:.35rem; }
.timeline-item p{ color:var(--color-text-muted); font-size:.9rem; margin:0; }

.about-split{ display:grid; grid-template-columns:1.1fr .9fr; gap:3rem; align-items:start; }
@media (max-width:900px){ .about-split{ grid-template-columns:1fr; } }

.qualification-split{ display:grid; grid-template-columns:1fr 1fr; gap:3rem; }
@media (max-width:820px){ .qualification-split{ grid-template-columns:1fr; } }

/* ---------- Contact ---------- */

.contact-layout{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:2rem;
  align-items:start;
}
.contact-form{
  background:var(--color-surface);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow);
  padding:2.5rem;
  display:grid;
  gap:1.15rem;
}
.contact-form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.15rem; }
.contact-form label{ display:grid; gap:.45rem; font-weight:600; font-size:.92rem; }
.contact-form input,
.contact-form select,
.contact-form textarea{
  padding:.85rem 1rem; border:1px solid #dcdfde; border-radius:var(--radius-sm);
  font:inherit; width:100%; background:#fff;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{
  outline:none; border-color:var(--color-secondary);
  box-shadow:0 0 0 3px rgba(29,92,68,.14);
}
.contact-form button[type="submit"]{
  background:var(--color-accent); color:var(--color-primary-deep); border:none;
  padding:1rem 1.5rem; border-radius:var(--radius-sm);
  font:700 1rem "Montserrat", sans-serif; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  transition:background var(--transition);
}
.contact-form button[type="submit"]:hover:not(:disabled){ background:var(--color-accent-dark); }
.contact-form button[type="submit"]:disabled{ opacity:.65; cursor:not-allowed; }

.form-privacy-note{
  display:flex; gap:.6rem; align-items:flex-start;
  color:var(--color-text-muted); font-size:.86rem;
}
.form-privacy-note svg{ width:18px; height:18px; color:var(--color-primary); flex-shrink:0; margin-top:.15rem; }

.form-status{
  margin:0; font-weight:600; padding:.9rem 1rem;
  border-radius:var(--radius-sm); display:none;
}
.form-status[data-state]{ display:block; }
.form-status[data-state="success"]{ background:#e7f3ec; color:var(--color-primary); }
.form-status[data-state="error"]{ background:#fbeaea; color:var(--color-error); }

.hp-field{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }

.contact-side{
  background:var(--color-primary);
  color:#fff;
  border-radius:var(--radius-md);
  padding:2.5rem;
}
.contact-side h2{ color:#fff; }
.contact-side > p{ color:rgba(255,255,255,.8); margin-bottom:2rem; }
.contact-method{
  display:flex; gap:1rem; align-items:flex-start;
  padding:1.25rem 0;
  border-bottom:1px solid rgba(255,255,255,.15);
}
.contact-method:last-child{ border-bottom:none; padding-bottom:0; }
.contact-method-icon{
  width:44px; height:44px; border-radius:50%;
  border:1.5px solid var(--color-accent);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.contact-method-icon svg{ width:19px; height:19px; color:var(--color-accent); }
.contact-method-label{
  color:var(--color-accent); font:700 .8rem "Montserrat", sans-serif;
  margin-bottom:.15rem;
}
.contact-method-value{ color:#fff; font-weight:600; }
.contact-method-value a{ color:#fff; text-decoration:none; word-break:break-word; }
.contact-method-value a:hover{ color:var(--color-accent); }

@media (max-width:900px){
  .contact-layout{ grid-template-columns:1fr; }
  .contact-form-row{ grid-template-columns:1fr; }
  .contact-form, .contact-side{ padding:1.75rem; }
}

/* ---------- Footer ---------- */

.site-footer{
  background:var(--color-primary-deep);
  color:rgba(255,255,255,.82);
  padding:4rem 0 1.5rem;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1.2fr;
  gap:2.5rem;
  padding-bottom:2.5rem;
}
.footer-logo img{ height:46px; margin-bottom:1.1rem; }
.footer-grid h4{
  color:#fff; font-size:.82rem; text-transform:uppercase;
  letter-spacing:.1em; margin-bottom:1.1rem;
}
.site-footer nav{ display:grid; gap:.55rem; }
.site-footer nav a{ color:rgba(255,255,255,.8); text-decoration:none; font-size:.92rem; }
.site-footer nav a:hover{ color:var(--color-accent); }
.footer-contact p{ display:flex; align-items:flex-start; gap:.65rem; margin:0 0 .85rem; font-size:.92rem; }
.footer-contact svg{ width:17px; height:17px; color:var(--color-accent); flex-shrink:0; margin-top:.2rem; }
.footer-contact a{ color:rgba(255,255,255,.8); text-decoration:none; word-break:break-word; }
.footer-contact a:hover{ color:var(--color-accent); }
.footer-social{ display:flex; gap:.65rem; margin-top:1rem; }
.footer-social a{
  width:34px; height:34px; border-radius:50%;
  border:1.5px solid var(--color-accent);
  display:flex; align-items:center; justify-content:center;
  color:var(--color-accent);
}
.footer-social svg{ width:16px; height:16px; }
.footer-social a:hover{ background:var(--color-accent); color:var(--color-primary-deep); }

.footer-legal{
  max-width:var(--max-width); margin:0 auto;
  padding:1.5rem 2rem 0;
  border-top:1px solid rgba(255,255,255,.12);
  font-size:.84rem; color:rgba(255,255,255,.5);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem;
}

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

/* ---------- Motion ---------- */

[data-animate="fade-up"]{
  opacity:0; transform:translateY(20px);
  transition:opacity .6s ease, transform .6s ease;
}
[data-animate="fade-up"].is-visible{ opacity:1; transform:none; }

/* ---------- 404 ---------- */

.error-page{
  min-height:60vh; display:grid; place-items:center;
  text-align:center; padding:5rem 2rem;
}
.error-page h1{ font-size:5rem; margin-bottom:.5rem; }