/* ================================================================
   ODON SHARED SITE STYLES
   This file controls site-wide colours, fonts, spacing and layouts.
   ================================================================ */

/* COLOURS AND GLOBAL VALUES: Change these once to update the whole site. */
:root {
  --forest:#244f1c; /* Main green: buttons, links and accents. */
  --dark:#173712;   /* Dark green: dark sections. */
  --moss:#4f753e;   /* Secondary green: labels and small headings. */
  --sage:#dfe8da;   /* Pale green: contact callout background. */
  --mist:#f4f7f2;   /* Very light green: tinted sections and forms. */
  --ink:#1f2920;    /* Main text colour. */
  --muted:#5d685d;  /* Body and secondary text colour. */
  --border:#d7dfd3; /* Borders and dividers. */
  --shadow:0 18px 42px rgba(18,46,15,.12); /* Card and image shadow. */
  --page:1180px;    /* Maximum content width. */
}

/* GLOBAL BOX SIZING: Padding stays inside declared widths. */
*{box-sizing:border-box}
/* Smooth movement when linking to a section. */
html{scroll-behavior:smooth}
/* BODY TEXT: Main font, colour and line spacing. */
body{margin:0;color:var(--ink);font-family:"Segoe UI",Arial,sans-serif;line-height:1.65}
/* Images remain responsive. */
img{display:block;max-width:100%}
/* Links inherit the surrounding text colour unless styled below. */
a{color:inherit}
/* Remove browser top margins from text elements. */
h1,h2,h3,p{margin-top:0}
/* HEADINGS: Shared serif font and line spacing. */
h1,h2,h3{font-family:Georgia,"Times New Roman",serif;line-height:1.15}
/* MAIN HEADING: Responsive size, width and letter spacing. */
h1{max-width:920px;font-size:clamp(2.65rem,6vw,5.4rem);letter-spacing:-.045em}
/* SECTION HEADING: Responsive size and letter spacing. */
h2{font-size:clamp(2rem,4vw,3.4rem);letter-spacing:-.025em}
/* CARD/SUBHEADING size. */
h3{font-size:1.45rem}
/* PAGE WIDTH: 3rem total side clearance, capped by --page. */
.page-shell{width:min(calc(100% - 3rem),var(--page));margin:auto}
/* Accessibility link hidden until keyboard focus. */
.skip-link{position:fixed;transform:translateY(-150%)}
.skip-link:focus{z-index:99;padding:.6rem;background:#fff;transform:none}

/* ============================== HEADER ============================== */
.site-header{border-bottom:1px solid rgba(36,79,28,.14);background:#fff}
/* Header spacing and alignment. */
.header-inner{display:flex;width:min(calc(100% - 3rem),var(--page));min-height:96px;margin:auto;align-items:center;justify-content:space-between;gap:2rem}
/* Logo and company name alignment. */
.brand{display:flex;align-items:center;gap:.8rem;text-decoration:none}
.brand img{width:78px;height:78px;object-fit:contain}
.brand-text{display:flex;flex-direction:column}
/* ODON name styling. */
.brand-name{color:var(--forest);font-family:Georgia,"Times New Roman",serif;font-size:2rem;font-weight:700;line-height:1}
/* Environmental subtitle styling. */
.brand-subtitle{margin-top:.15rem;color:var(--moss);font-size:.85rem;font-weight:700;letter-spacing:.22em;line-height:1.2;text-transform:uppercase}
/* Navigation spacing. */
.nav-bar{display:flex;gap:clamp(.8rem,2vw,1.8rem)}
.nav-bar a{position:relative;padding:.75rem 0;font-size:.94rem;font-weight:650;text-decoration:none}
/* Green underline on hover and current page. */
.nav-bar a:after{position:absolute;right:0;bottom:.45rem;left:0;height:2px;background:var(--forest);content:"";transform:scaleX(0)}
.nav-bar a:hover:after,.nav-bar a.active:after{transform:scaleX(1)}

/* =============================== HEROES ============================= */
/* Shared hero image positioning and white text. */
.hero,.page-hero{position:relative;display:grid;color:#fff;background-position:center;background-size:cover}
/* Home hero height. */
.hero{min-height:min(760px,calc(100vh - 96px));place-items:center}
/* Full-area image and overlay layers. */
.hero-media,.hero-overlay,.page-hero:before{position:absolute;inset:0}
.hero-media img{width:100%;height:100%;object-fit:cover}
/* Dark gradient over hero photos. */
.hero-overlay,.page-hero:before{background:linear-gradient(90deg,rgba(12,35,12,.92),rgba(15,42,14,.62));content:""}
/* Hero text spacing. */
.hero-content,.page-hero-content{position:relative;z-index:1;padding-block:7rem}
/* Internal-page hero height and bottom alignment. */
.page-hero{min-height:520px;align-items:end}
/* Internal-page hero images. Change URL only to replace a photo. */
.about-hero{background-image:url("https://images.unsplash.com/photo-1441974231531-c6227db76b6e?auto=format&fit=crop&w=1800&q=85")}
.expertise-hero{background-image:url("https://images.unsplash.com/photo-1500534623283-312aade485b7?auto=format&fit=crop&w=1800&q=85")}
.training-hero{background-image:url("https://images.unsplash.com/photo-1503676260728-1c00da094a0b?auto=format&fit=crop&w=1800&q=85")}
.facts-hero{background-image:url("https://images.unsplash.com/photo-1504198453319-5ce911bafcde?auto=format&fit=crop&w=1800&q=85")}
.contact-hero{background-image:url("https://images.unsplash.com/photo-1501785888041-af3ef285b470?auto=format&fit=crop&w=1800&q=85")}
/* Small uppercase labels. */
.eyebrow{color:#d7e8cf;font-size:.78rem;font-weight:750;letter-spacing:.16em;text-transform:uppercase}
.eyebrow-dark{color:var(--moss)}
/* Hero body text width, colour and size. */
.hero-summary{max-width:720px;color:rgba(255,255,255,.88);font-size:1.2rem}

/* =========================== SHARED SECTIONS ======================== */
/* Vertical spacing above and below every main section. */
.section{padding-block:clamp(4.5rem,9vw,8rem)}
.section-light{background:#fff}
.section-tint{background:var(--mist)}
.section-dark{background:var(--dark);color:#fff}
.centered{text-align:center}
.narrow-shell{max-width:850px}
/* Section heading width and spacing below it. */
.section-heading{max-width:780px;margin-bottom:3rem}
/* Larger body/intro text. */
.lead-text,.body-copy{color:var(--muted);font-size:1.18rem}
/* Two-column layouts and gap. */
.split-layout,.contact-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,6vw,6rem)}
/* Shared three-column grids and spacing. */
.principle-grid,.service-grid,.pathway-grid,.process-list{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
/* White card spacing, border, corners and shadow. */
.principle-card,.service-card,.card{padding:2rem;border:1px solid var(--border);border-radius:16px;background:#fff;box-shadow:var(--shadow)}
.principle-card p,.service-card p{color:var(--muted)}
/* Small labels inside cards. */
.principle-number,.service-tag,.pathway-label{display:block;margin-bottom:2.5rem;color:var(--moss);font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
/* Dark linked pathway cards. */
.pathway-card{display:flex;min-height:320px;padding:2rem;border:1px solid rgba(255,255,255,.18);border-radius:16px;flex-direction:column;color:#fff;text-decoration:none}
.pathway-card p,.process-list p{color:rgba(255,255,255,.72)}
.text-link{margin-top:auto;font-weight:800}
.process-list>div{padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.25)}

/* ================= BUTTONS, CONTACT, FACTS, FOOTER ================= */
.button-group{display:flex;gap:.85rem}
/* Shared button spacing and corners. */
.button{display:inline-flex;padding:.8rem 1.25rem;border:1px solid transparent;border-radius:8px;align-items:center;font-weight:700;text-decoration:none}
.button-primary{background:var(--forest);color:#fff}
.button-secondary{border-color:#fff;color:#fff}
/* Pale-green callout strip. */
.contact-strip{background:var(--sage)}
.contact-strip-inner,.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:2rem}
/* Contact form layout and background. */
.contact-form{display:flex;padding:2rem;border-radius:16px;background:var(--mist);flex-direction:column}
.contact-form label{margin-top:1rem;font-weight:750}
/* Form-field spacing, border and corners. */
.contact-form input,.contact-form textarea,.post-tools input{padding:.8rem;border:1px solid var(--border);border-radius:8px;font:inherit}
.contact-form button{margin-top:1.5rem;padding:.9rem;border:0;border-radius:8px;background:var(--forest);color:#fff;font-weight:750}
/* Facts post grid. */
.blog-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.25rem}
.post-tools{max-width:620px;margin-bottom:2rem}
.post-tools label{display:block;font-weight:750}
.post-tools input{width:100%}
/* Footer colours and spacing. */
.site-footer{padding:1.8rem 0;background:#102b0d;color:rgba(255,255,255,.72);font-size:.9rem}
.footer-inner p{margin:0}

/* ============================ RESPONSIVE ============================ */
/* Tablet: stack header, grids and callouts. */
@media(max-width:850px){.header-inner{padding:1rem 0;flex-direction:column}.nav-bar{width:100%;overflow-x:auto}.principle-grid,.service-grid,.pathway-grid,.process-list,.split-layout,.contact-layout{grid-template-columns:1fr}.contact-strip-inner,.footer-inner{align-items:flex-start;flex-direction:column}}
/* Phone: reduce side spacing and brand size; make buttons full width. */
@media(max-width:520px){.page-shell,.header-inner{width:calc(100% - 2rem)}.brand img{width:68px;height:68px}.brand-name{font-size:1.5rem}.brand-subtitle{font-size:.68rem}.button-group,.button{width:100%}}