:root {
  --slate:#2c4654; --slate-deep:#1f3440;
  --fynbos:#3d6b4a; --fynbos-deep:#2f5339;
  --ochre:#c07818; --ochre-text:#8a5309;
  --protea:#a03b36;
  --thatch:#e8d9b8; --sand:#f7f1e3; --paper:#fdfbf6;
  --ink:#2b2b2b; --muted:#5b666a; --line:#ded6c5;
  --display:Georgia,"Times New Roman",serif;
  --body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--body); font-size:16px; line-height:1.65; }
a { color:inherit; text-decoration:none; }
.wrap { width:min(1080px,calc(100% - 48px)); margin:0 auto; }
h1,h2,h3 { margin-top:0; color:var(--slate); font-family:var(--display); font-weight:400; line-height:1.18; }
h1 { max-width:660px; margin-bottom:22px; font-size:clamp(42px,5vw,60px); letter-spacing:-.015em; }
h2 { font-size:clamp(30px,3.3vw,40px); }
h3 { font-family:var(--body); font-size:20px; font-weight:700; }
.eyebrow { margin:0 0 14px; color:var(--ochre-text); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.eyebrow.green { color:var(--fynbos-deep); }
.eyebrow.light { color:var(--thatch); }
.section { padding:84px 0; }

/* header */
.topline { background:var(--slate-deep); color:var(--thatch); font-size:12.5px; }
.top-inner { min-height:38px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.top-inner a:hover { text-decoration:underline; }
.nav-row { min-height:92px; display:flex; align-items:center; justify-content:space-between; gap:32px; }
.brand { display:inline-flex; align-items:center; gap:12px; }
/* The mark is the axis in the name: one ochre vertical, one fynbos horizontal. */
.axis { position:relative; width:34px; height:34px; flex:0 0 auto; background:var(--thatch); border:2px solid var(--slate); }
.axis i { position:absolute; background:var(--ochre); }
.axis i:nth-child(1) { top:0; bottom:0; left:12px; width:4px; }
.axis i:nth-child(2) { left:0; right:0; top:19px; height:4px; background:var(--fynbos); }
.brand-name { font-family:var(--display); font-size:23px; letter-spacing:-.01em; color:var(--slate); }
.brand-name b { font-weight:400; color:var(--ochre-text); }
.nav-row nav { display:flex; align-items:center; gap:26px; font-size:14px; font-weight:600; color:var(--slate); }
.nav-row nav a { padding:10px 0; border-bottom:2px solid transparent; }
.nav-row nav a:hover,.nav-row nav a:focus-visible { color:var(--ochre-text); border-bottom-color:var(--ochre); }
.nav-row nav .nav-contact { padding:10px 18px; background:var(--fynbos-deep); color:#fff; border-bottom-color:transparent; }
.nav-row nav .nav-contact:hover { background:var(--slate); color:#fff; border-bottom-color:transparent; }

/* hero */
.hero { background:var(--sand); border-top:3px solid var(--ochre); overflow:hidden; }
.hero-grid { min-height:500px; display:grid; grid-template-columns:1.5fr .85fr; align-items:center; gap:70px; }
.hero-copy { padding:72px 0 80px; }
.hero-lede { max-width:640px; margin:0; color:#4a565b; font-size:18.5px; line-height:1.72; }
.button-row { margin-top:34px; display:flex; align-items:center; gap:26px; flex-wrap:wrap; }
.button { display:inline-flex; min-height:48px; align-items:center; justify-content:center; padding:11px 24px; border:2px solid transparent; font-size:14px; font-weight:700; }
.button-primary { background:var(--ochre-text); color:#fff; }
.button-primary:hover { background:var(--slate); }
.button-text { padding:0; color:var(--fynbos-deep); border-bottom:2px solid var(--fynbos); }
.button-text span { margin-left:10px; }
.button-light { flex:0 0 auto; background:#fff; color:var(--fynbos-deep); }
.button-light:hover { background:var(--thatch); }
.hero-panel { position:relative; align-self:stretch; display:flex; flex-direction:column; justify-content:center; padding:46px 0 46px 40px; background:var(--slate); color:#e4ebee; }
.hero-panel::after { content:""; position:absolute; top:0; bottom:0; left:100%; width:100vw; background:var(--slate); }
.panel-kicker { margin:0 0 24px; color:var(--thatch); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.panel-quote { margin:0; color:#fff; font-family:var(--display); font-size:27px; line-height:1.42; }
.panel-rule { width:56px; height:3px; margin:28px 0 22px; background:var(--ochre); }
.hero-panel>p:last-child { margin:0; font-size:14.5px; line-height:1.7; }
.hero-photo { height:320px; background-image:url('/hero.jpg'); background-position:center 55%; background-size:cover; border-bottom:6px solid var(--fynbos); }

/* home body */
.split-heading { display:grid; grid-template-columns:1fr 1.1fr; gap:64px; }
.split-heading h2 { margin-bottom:0; }
.intro-copy { padding-top:22px; color:var(--muted); font-size:17px; }
.intro-copy p:first-child { margin-top:0; }
.service-grid { margin-top:44px; display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.service-card { padding:32px 30px 36px; background:var(--paper); }
.service-card h3 { margin-bottom:12px; color:var(--fynbos-deep); }
.service-card p { margin:0; color:var(--muted); font-size:15px; }
.card-link { display:inline-block; margin-top:16px; color:var(--ochre-text); font-size:14px; font-weight:700; }
.card-link:hover { text-decoration:underline; }
.steps { background:var(--sand); border-block:1px solid var(--line); }
.steps-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:34px; }
.steps-grid article>span { display:grid; width:34px; height:34px; margin-bottom:16px; place-items:center; background:var(--ochre); color:#fff; font-family:var(--display); font-size:17px; }
.steps-grid h3 { margin-bottom:9px; }
.steps-grid p { margin:0; color:var(--muted); font-size:15px; }
.quote-band { padding:74px 0; background:var(--slate); }
.quote-band blockquote { max-width:800px; margin:0 auto; color:#fff; font-family:var(--display); font-size:27px; font-style:italic; line-height:1.5; text-align:center; }
.quote-band p { margin:18px 0 0; color:var(--thatch); font-size:14px; text-align:center; }
.cta { background:var(--fynbos-deep); color:#fff; }
.cta h2 { color:#fff; }
.cta .eyebrow.light { color:#e7f2e5; }
.cta-inner { min-height:230px; display:flex; align-items:center; justify-content:space-between; gap:48px; }
.cta h2 { max-width:660px; margin:0; }

/* interior pages */
.page-hero { padding:70px 0; background:var(--slate); color:#e4ebee; border-top:3px solid var(--ochre); }
.page-hero h1 { max-width:840px; color:#fff; }
.page-hero-intro { max-width:760px; margin:0; color:var(--thatch); font-size:18.5px; line-height:1.72; }
.about-story { display:grid; grid-template-columns:1fr 1.15fr; gap:64px; }
.about-story h2 { max-width:480px; }
.prose { color:var(--muted); font-size:17px; }
.prose p:first-child { margin-top:0; }
.values { display:grid; grid-template-columns:.75fr 1.25fr; gap:64px; }
.value-list article { padding:26px 0; display:grid; grid-template-columns:240px 1fr; gap:32px; border-top:1px solid var(--line); }
.value-list article:last-child { border-bottom:1px solid var(--line); }
.value-list h3,.value-list p { margin:0; }
.value-list p { color:var(--muted); }
.contact-grid { display:grid; grid-template-columns:1.4fr .75fr; gap:64px; }
.contact-grid>div>h2 { margin-bottom:30px; }
.contact-form label { display:block; color:var(--slate); font-size:13.5px; font-weight:700; }
.contact-form label span { color:var(--protea); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.contact-form input,.contact-form textarea { width:100%; margin:7px 0 20px; padding:12px 13px; background:#fff; border:1px solid #b9b2a3; color:var(--ink); font:16px var(--body); }
.contact-form input:focus,.contact-form textarea:focus { outline:2px solid var(--ochre); outline-offset:1px; border-color:var(--ochre); }
.contact-form button { border:0; cursor:pointer; }
.form-help { margin:14px 0 0; color:var(--muted); font-size:12.5px; }
.form-status { margin-top:16px; padding:11px 14px; background:#eef4ec; color:var(--fynbos-deep); border-left:4px solid var(--fynbos); font-size:13.5px; }
.contact-grid aside { padding:30px; align-self:start; background:var(--sand); border-top:4px solid var(--ochre); }
.contact-grid aside h3 { margin-bottom:10px; font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--fynbos-deep); }
.contact-grid aside p { margin:0 0 8px; color:var(--muted); font-size:14.5px; }
.contact-grid aside a { color:var(--ochre-text); font-weight:700; text-decoration:underline; }
.contact-grid aside hr { margin:26px 0; border:0; border-top:1px solid var(--line); }

/* footer */
.site-footer { padding:60px 0 22px; background:var(--sand); border-top:3px solid var(--ochre); }
.footer-grid { display:grid; grid-template-columns:1.6fr 1fr 1.2fr; gap:52px; }
.footer-tagline { max-width:340px; margin-top:20px; color:var(--muted); font-size:14.5px; }
.footer-grid h3 { margin-bottom:15px; font-size:12px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--fynbos-deep); }
.footer-grid>div:not(:first-child) a,.footer-grid>div:not(:first-child) p { display:block; margin:0 0 8px; color:#4f5a5e; font-size:14.5px; }
.footer-grid a:hover { color:var(--ochre-text); text-decoration:underline; }
.footer-bottom { margin-top:44px; padding-top:20px; display:flex; justify-content:space-between; gap:14px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; }

@media(max-width:900px){
  .nav-row{padding:18px 0;align-items:flex-start}.nav-row nav{max-width:400px;justify-content:flex-end;gap:12px 20px;flex-wrap:wrap}
  .hero-grid{grid-template-columns:1.6fr .9fr;gap:40px}.hero-panel{padding-left:28px}.panel-quote{font-size:23px}
  .steps-grid{grid-template-columns:1fr 1fr;gap:32px}
  .about-story,.values,.contact-grid,.split-heading{grid-template-columns:1fr;gap:44px}.value-list article{grid-template-columns:200px 1fr}
}
@media(max-width:680px){
  .wrap{width:min(100% - 32px,1080px)}.top-inner{min-height:44px}.top-inner span{display:none}
  .nav-row{display:block}.nav-row nav{margin-top:18px;justify-content:flex-start;gap:4px 18px}.nav-row nav .nav-contact{padding:8px 14px}
  .hero-grid{min-height:0;display:block}.hero-copy{padding:56px 0}.hero-panel{margin:0 -16px;padding:38px 30px}.hero-panel::after{display:none}
  .hero-photo{height:200px;background-position:58% center}h1{font-size:38px}
  .section{padding:60px 0}.page-hero{padding:52px 0}.quote-band{padding:56px 0}.quote-band blockquote{font-size:22px}
  .service-grid,.steps-grid{grid-template-columns:1fr}.steps-grid{gap:28px}

  .value-list article,.form-row,.footer-grid{grid-template-columns:1fr}.value-list article{gap:8px}.footer-grid{gap:34px}
  .cta-inner{min-height:0;padding:52px 0;align-items:flex-start;flex-direction:column;gap:26px}
  .footer-bottom{flex-direction:column}.contact-grid aside{padding:24px}
}
@media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }