:root {
  --green:#185b47;
  --green-dark:#0d3d30;
  --cream:#f6f1e7;
  --warm:#fffaf2;
  --gold:#d3a74f;
  --ink:#1b2521;
  --muted:#5e6a64;
  --line:rgba(27,37,33,.13);
  --white:#ffffff;
  --shell:1180px;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background:var(--warm); color:var(--ink); line-height:1.65; }
a { color:inherit; }
img { max-width:100%; display:block; }
.skip-link { position:absolute; left:-999px; top:0; z-index:9999; background:#fff; color:#000; padding:.8rem 1rem; }
.skip-link:focus { left:1rem; top:1rem; }
.site-header { background:rgba(255,250,242,.96); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:100; backdrop-filter:blur(12px); }
.header-inner { width:min(calc(100% - 2rem), var(--shell)); margin:0 auto; min-height:92px; display:flex; justify-content:space-between; align-items:center; gap:2rem; }
.logo-lockup { display:inline-flex; align-items:center; gap:.9rem; text-decoration:none; }
.logo-image { width:auto; height:78px; border-radius:12px; }
.logo-text { display:flex; flex-direction:column; line-height:1.05; }
.logo-title { font-weight:950; letter-spacing:-.03em; color:var(--green); font-size:1.12rem; }
.logo-place { color:var(--muted); font-size:.9rem; }
.nav { display:flex; flex-wrap:wrap; align-items:center; gap:.35rem; }
.nav a { text-decoration:none; color:var(--ink); font-weight:850; font-size:.9rem; padding:.62rem .78rem; border-radius:999px; }
.nav a:hover,.nav a.active { background:var(--green); color:#fff; }
.nav .nav-cta { background:var(--gold); color:var(--green-dark); }
.hero { min-height:650px; display:grid; align-items:center; background:linear-gradient(90deg, rgba(12,54,42,.9), rgba(12,54,42,.62) 45%, rgba(12,54,42,.18) 78%), url("../shirley-high-street.jpg") center / cover no-repeat; color:#fff; border-bottom:1px solid rgba(255,255,255,.12); }
.hero-inner { width:min(calc(100% - 2rem), var(--shell)); margin:0 auto; padding:5rem 0; }
.eyebrow { display:inline-flex; align-items:center; gap:.5rem; font-size:.8rem; font-weight:900; text-transform:uppercase; letter-spacing:.14em; color:#fff; padding:.48rem .78rem; border-radius:999px; border:1px solid rgba(255,255,255,.32); background:rgba(255,255,255,.14); margin-bottom:1rem; }
.eyebrow.on-light { color:var(--green); border-color:var(--line); background:#fff; }
.hero h1 { max-width:850px; margin:0; font-size:clamp(3.2rem, 8vw, 6.5rem); line-height:.92; letter-spacing:-.065em; }
.hero p { max-width:690px; margin:1.2rem 0 0; font-size:1.22rem; color:rgba(255,255,255,.9); }
.button-row { display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.6rem; }
.btn { display:inline-flex; align-items:center; justify-content:center; text-decoration:none; border-radius:999px; padding:.92rem 1.2rem; font-weight:900; border:1px solid transparent; }
.btn.primary { background:var(--gold); color:var(--green-dark); }
.btn.secondary { background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.38); }
.btn.dark { background:var(--green); color:#fff; }
.btn.light { background:#fff; color:var(--green); border-color:var(--line); }
.section { padding:4.5rem max(1rem, calc((100vw - var(--shell))/2)); }
.section.cream { background:var(--cream); }
.section.white { background:#fff; }
.section.green { background:linear-gradient(135deg, var(--green), var(--green-dark)); color:#fff; }
.section-head { max-width:820px; margin:0 0 2rem; }
.section-head.center { text-align:center; margin-left:auto; margin-right:auto; }
.section h2 { margin:0; font-size:clamp(2rem, 4vw, 3.2rem); line-height:1; letter-spacing:-.04em; color:var(--green); }
.section.green h2 { color:#fff; }
.section-head p,.lead { color:var(--muted); font-size:1.08rem; margin:.8rem 0 0; }
.section.green .section-head p,.section.green .lead { color:rgba(255,255,255,.82); }
.grid-2 { display:grid; grid-template-columns:repeat(2, 1fr); gap:2rem; }
.grid-3 { display:grid; grid-template-columns:repeat(3, 1fr); gap:1.4rem; }
.card { background:#fff; border:1px solid var(--line); border-radius:18px; padding:1.35rem; box-shadow:0 16px 38px rgba(27,37,33,.06); }
.card h3 { margin:0 0 .55rem; color:var(--green); font-size:1.28rem; line-height:1.1; }
.card p { margin:0; color:var(--muted); }
.icon { width:58px; height:58px; border-radius:999px; display:grid; place-items:center; background:rgba(24,91,71,.1); color:var(--green); font-size:1.65rem; margin-bottom:.8rem; }
.feature-list { list-style:none; padding:0; margin:1.2rem 0 0; display:grid; gap:.85rem; }
.feature-list li { position:relative; padding-left:1.9rem; }
.feature-list li::before { content:"✓"; position:absolute; left:0; top:.05rem; width:22px; height:22px; border-radius:999px; background:var(--gold); color:var(--green-dark); display:grid; place-items:center; font-size:.78rem; font-weight:900; }
.example-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:1.4rem; }
.example-card { background:#fff; border:1px solid var(--line); border-radius:18px; overflow:hidden; box-shadow:0 16px 38px rgba(27,37,33,.06); display:flex; flex-direction:column; }
.example-card img { width:100%; aspect-ratio:1.35/.82; object-fit:cover; background:#eee; }
.example-card-body { padding:1.2rem; display:flex; flex-direction:column; gap:.65rem; flex:1; }
.tag { display:inline-flex; width:max-content; border-radius:999px; padding:.28rem .62rem; background:rgba(24,91,71,.1); color:var(--green); font-size:.78rem; font-weight:900; text-transform:uppercase; letter-spacing:.06em; }
.example-card h3 { margin:0; color:var(--green); font-size:1.35rem; line-height:1.05; }
.example-card p { margin:0; color:var(--muted); flex:1; }
.notice { background:#fff; border-left:5px solid var(--gold); padding:1rem 1.1rem; border-radius:12px; box-shadow:0 12px 30px rgba(27,37,33,.05); }
.url-box { display:inline-flex; align-items:center; gap:.4rem; padding:.72rem .9rem; background:#0f3329; color:#fff; border-radius:10px; font-weight:900; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.95rem; }
.category-section { padding:2.4rem max(1rem, calc((100vw - var(--shell))/2)); border-top:1px solid var(--line); }
.category-section:nth-child(even) { background:#fff; }
.category-head { display:flex; justify-content:space-between; gap:1.5rem; align-items:end; margin-bottom:1rem; }
.category-head h2 { margin:0; color:var(--green); font-size:clamp(1.65rem, 3vw, 2.5rem); letter-spacing:-.04em; line-height:1; }
.category-head p { margin:.5rem 0 0; color:var(--muted); max-width:720px; }
.carousel { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(245px, 1fr); gap:1rem; overflow-x:auto; padding:.4rem 0 1rem; scroll-snap-type:x proximity; }
.mini-card { background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; min-width:245px; scroll-snap-align:start; box-shadow:0 12px 28px rgba(27,37,33,.05); }
.mini-card img { width:100%; aspect-ratio:1.3/.8; object-fit:cover; }
.mini-card div { padding:1rem; }
.mini-card h3 { margin:0 0 .35rem; color:var(--green); }
.mini-card p { margin:0; color:var(--muted); font-size:.94rem; }
.footer { background:#0d3027; color:#fff; }
.footer-inner { width:min(calc(100% - 2rem), var(--shell)); margin:0 auto; padding:3rem 0; display:grid; grid-template-columns:1.2fr .8fr .9fr; gap:2.4rem; }
.footer-logo { width:112px; border-radius:999px; margin-bottom:.8rem; }
.footer p,.footer a { color:rgba(255,255,255,.78); }
.footer-links { list-style:none; padding:0; margin:0; }
.footer-links li { margin-bottom:.42rem; }
.footer-bottom { width:min(calc(100% - 2rem), var(--shell)); margin:0 auto; border-top:1px solid rgba(255,255,255,.12); padding:1.2rem 0; display:flex; justify-content:space-between; gap:1rem; color:rgba(255,255,255,.62); font-size:.9rem; }
@media (max-width:1000px) {
  .header-inner { align-items:flex-start; flex-direction:column; padding:1rem 0; }
  .grid-2,.grid-3,.example-grid,.footer-inner { grid-template-columns:1fr; }
  .category-head { display:block; }
}
@media (max-width:680px) {
  .logo-image { height:68px; }
  .logo-text { display:none; }
  .nav a { font-size:.82rem; padding:.52rem .6rem; }
  .hero { min-height:auto; }
  .hero-inner { padding:3.5rem 0; }
  .section { padding-top:3.3rem; padding-bottom:3.3rem; }
  .footer-bottom { flex-direction:column; }
}