@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Work+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

  :root{
    --bg:#F4F1E9;
    --bg-alt:#E7E1D0;
    --card:#FCFAF4;
    --text:#22241E;
    --text-muted:#5B5D51;
    --accent:#3E6B4A;
    --accent-strong:#294A31;
    --accent-tint:#DEE7DD;
    --stone:#C9B896;
    --stone-strong:#A68F62;
    --ochre:#A24E17;
    --border: rgba(34,36,30,0.14);
    --border-strong: rgba(34,36,30,0.28);
    --shadow: 0 1px 2px rgba(34,36,30,0.06), 0 10px 30px -18px rgba(34,36,30,0.35);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#181F17;
      --bg-alt:#20281E;
      --card:#1D251C;
      --text:#F0EDE2;
      --text-muted:#ADB3A2;
      --accent:#80B98B;
      --accent-strong:#A9D8B0;
      --accent-tint:#243425;
      --stone:#8C7A54;
      --stone-strong:#C2AD7C;
      --ochre:#DE8A4C;
      --border: rgba(240,237,226,0.16);
      --border-strong: rgba(240,237,226,0.3);
      --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 10px 30px -18px rgba(0,0,0,0.6);
    }
  }
  :root[data-theme="dark"]{
    --bg:#181F17;
    --bg-alt:#20281E;
    --card:#1D251C;
    --text:#F0EDE2;
    --text-muted:#ADB3A2;
    --accent:#80B98B;
    --accent-strong:#A9D8B0;
    --accent-tint:#243425;
    --stone:#8C7A54;
    --stone-strong:#C2AD7C;
    --ochre:#DE8A4C;
    --border: rgba(240,237,226,0.16);
    --border-strong: rgba(240,237,226,0.3);
    --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 10px 30px -18px rgba(0,0,0,0.6);
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:'Work Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
  }
  img,svg{max-width:100%;}
  h1,h2,h3,h4{
    font-family:'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
    font-weight:700;
    letter-spacing:-0.01em;
    line-height:1.15;
    text-wrap:balance;
    margin:0;
    color:var(--text);
  }
  h3{font-weight:600;}
  p{margin:0;}
  a{color:var(--accent);}
  button{font-family:inherit;}
  .mono{
    font-family:'IBM Plex Mono', ui-monospace, monospace;
    font-variant-numeric:tabular-nums;
  }
  .eyebrow{
    font-family:'IBM Plex Mono', ui-monospace, monospace;
    font-size:0.72rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--accent);
  }
  .wrap{
    max-width:1080px;
    margin:0 auto;
    padding-inline:24px;
  }
  .visually-hidden{
    position:absolute; width:1px; height:1px; overflow:hidden;
    clip:rect(0 0 0 0); white-space:nowrap;
  }
  a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:2px;
  }

  /* ---------- tread motif ---------- */
  .tile-rule{
    height:10px;
    background-image:
      linear-gradient(135deg, var(--accent) 25%, transparent 25%),
      linear-gradient(225deg, var(--accent) 25%, transparent 25%),
      linear-gradient(45deg, var(--accent) 25%, transparent 25%),
      linear-gradient(315deg, var(--accent) 25%, transparent 25%);
    background-position: 10px 0, 10px 0, 0 0, 0 0;
    background-size: 20px 20px;
    background-repeat: repeat-x;
    opacity:0.55;
  }

  /* ---------- header / nav ---------- */
  header.site{
    position:sticky; top:0; z-index:40;
    background:var(--bg);
    border-bottom:1px solid var(--border);
    box-shadow:0 1px 0 rgba(0,0,0,0.02), 0 4px 16px -8px rgba(0,0,0,0.08);
  }
  .nav-row{
    display:flex; align-items:center; justify-content:space-between;
    gap:16px; padding-block:16px;
  }
  .wordmark{
    display:flex; flex-direction:column; gap:2px;
    text-decoration:none; color:var(--text);
    cursor:pointer; background:none; border:none; padding:0; text-align:left;
  }
  .wordmark .name{
    font-family:'Plus Jakarta Sans', sans-serif; font-size:1.2rem; font-weight:800; letter-spacing:-0.01em;
    white-space:nowrap;
  }
  .wordmark .tag{
    font-family:'IBM Plex Mono', monospace; font-size:0.62rem; letter-spacing:0.08em;
    text-transform:uppercase; color:var(--text-muted); white-space:nowrap;
  }
  nav.primary{
    display:flex; align-items:center; gap:4px;
  }
  nav.primary button, nav.primary a{
    background:none; border:none; cursor:pointer;
    color:var(--text-muted); font-size:0.92rem;
    padding:8px 12px; border-radius:6px;
    transition:color .15s ease, background .15s ease;
    white-space:nowrap;
    text-decoration:none; display:inline-block;
  }
  nav.primary button:hover, nav.primary a:hover{color:var(--text); background:var(--bg-alt);}
  nav.primary button[aria-current="page"], nav.primary a[aria-current="page"]{color:var(--accent); font-weight:500;}
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    padding:12px 22px; border-radius:10px;
    font-size:0.92rem; font-weight:600;
    text-decoration:none; cursor:pointer; border:1px solid transparent;
    transition:transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
    white-space:nowrap;
  }
  .btn:hover{transform:translateY(-1px);}
  .btn-primary{background:var(--accent); color:#F7FBF7; border-color:var(--accent); box-shadow:0 1px 2px rgba(34,36,30,0.08), 0 8px 20px -10px var(--accent);}
  .btn-primary:hover{background:var(--accent-strong); border-color:var(--accent-strong); box-shadow:0 1px 2px rgba(34,36,30,0.1), 0 10px 24px -10px var(--accent-strong);}
  .btn-ghost{background:transparent; color:var(--text); border-color:var(--border-strong);}
  .btn-ghost:hover{background:var(--bg-alt);}
  .btn-ghost-light{background:rgba(255,255,255,0.08); color:#fff; border-color:rgba(255,255,255,0.55); backdrop-filter:blur(2px);}
  .btn-ghost-light:hover{background:rgba(255,255,255,0.16); border-color:#fff;}
  .btn-lg{padding:15px 26px; font-size:0.98rem; border-radius:11px;}
  .nav-toggle{
    display:none; background:none; border:1px solid var(--border-strong);
    border-radius:8px; padding:8px 10px; cursor:pointer; color:var(--text);
  }

  @media (max-width:1080px){
    nav.primary{
      position:absolute; top:100%; left:0; right:0;
      background:var(--bg); border-bottom:1px solid var(--border);
      flex-direction:column; align-items:stretch; padding:8px 24px 16px;
      gap:2px; display:none;
    }
    nav.primary.open{display:flex;}
    nav.primary button, nav.primary a{text-align:left; padding:10px 4px;}
    .nav-toggle{display:inline-flex;}
    .nav-cta{display:none;}
  }

  /* ---------- pages / sections ---------- */
  main{display:block;}
  .page{padding-block:0;}
  section{padding-block:64px;}
  section.tight{padding-block:40px;}
  .band-alt{background:var(--bg-alt);}

  /* ---------- hero (full-bleed photographic banner) ---------- */
  .hero-banner{
    position:relative; overflow:hidden;
    min-height:600px; display:flex; align-items:flex-end;
  }
  .hero-banner .hero-bg{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; object-position:50% 40%; display:block;
  }
  .hero-banner .hero-scrim{
    position:absolute; inset:0;
    background:
      linear-gradient(180deg, rgba(10,18,12,0.25) 0%, rgba(10,18,12,0.4) 45%, rgba(10,18,12,0.88) 100%),
      linear-gradient(90deg, rgba(8,14,10,0.55) 0%, rgba(8,14,10,0.08) 60%);
  }
  .hero-inner{
    position:relative; z-index:1; max-width:680px;
    padding-block:100px 60px;
  }
  .hero-inner .eyebrow{color:#BFE0C6; text-shadow:0 1px 4px rgba(0,0,0,0.3);}
  .hero-inner h1{
    color:#fff; font-size:clamp(2.3rem, 4.6vw, 3.5rem); margin-block:16px 20px;
    text-shadow:0 2px 16px rgba(0,0,0,0.25);
  }
  .hero-inner .lede{font-size:1.1rem; color:rgba(255,255,255,0.88); max-width:50ch; text-shadow:0 1px 8px rgba(0,0,0,0.2);}
  .hero-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:30px;}

  @media (max-width:760px){
    .hero-banner{min-height:520px;}
    .hero-inner{padding-block:72px 44px;}
  }

  /* ---------- sub-page banner (same photographic treatment, shorter) ---------- */
  .page-hero{
    position:relative; overflow:hidden;
    min-height:280px; display:flex; align-items:flex-end;
  }
  .page-hero .hero-bg{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; object-position:50% 40%; display:block;
  }
  .page-hero .hero-scrim{
    position:absolute; inset:0;
    background:
      linear-gradient(180deg, rgba(10,18,12,0.35) 0%, rgba(10,18,12,0.58) 55%, rgba(10,18,12,0.9) 100%);
  }
  .page-hero-inner{
    position:relative; z-index:1; max-width:720px;
    padding-block:60px 36px;
  }
  .page-hero-inner .eyebrow{color:#BFE0C6; text-shadow:0 1px 4px rgba(0,0,0,0.3);}
  .page-hero-inner h1{
    color:#fff; font-size:clamp(1.9rem, 3.6vw, 2.7rem); margin-top:12px;
    text-shadow:0 2px 14px rgba(0,0,0,0.25);
  }
  .page-hero-inner .lede{
    color:rgba(255,255,255,0.88); margin-top:14px;
    text-shadow:0 1px 8px rgba(0,0,0,0.2);
  }
  @media (max-width:760px){
    .page-hero{min-height:220px;}
    .page-hero-inner{padding-block:44px 28px;}
  }

  /* ---------- trust strip ---------- */
  .trust-strip{background:var(--accent-strong);}
  .trust-grid{
    display:grid; grid-template-columns:repeat(4,1fr); gap:20px 28px;
    padding-block:26px;
  }
  @media (max-width:820px){.trust-grid{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:480px){.trust-grid{grid-template-columns:1fr;}}
  .trust-item{display:flex; gap:12px; align-items:flex-start;}
  .trust-item svg{flex:none; width:20px; height:20px; margin-top:2px; opacity:0.92;}
  .trust-item strong{display:block; font-size:0.9rem; font-weight:600; color:#fff;}
  .trust-item span{display:block; font-size:0.78rem; color:rgba(255,255,255,0.72); margin-top:2px; line-height:1.45;}

  .section-head{max-width:60ch; margin-bottom:36px;}
  .section-head h2{font-size:clamp(1.5rem, 2.6vw, 2rem); margin-top:10px;}
  .section-head p{color:var(--text-muted); margin-top:12px; font-size:1.02rem;}

  /* steps */
  .steps{
    display:grid; grid-template-columns:repeat(4,1fr); gap:20px; counter-reset:step;
  }
  @media (max-width:900px){.steps{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:560px){.steps{grid-template-columns:1fr;}}
  .step{
    background:var(--card); border:1px solid var(--border); border-radius:14px;
    padding:22px 20px; display:flex; flex-direction:column; gap:10px;
  }
  .step .num{
    font-family:'IBM Plex Mono', monospace; font-size:0.78rem; color:var(--accent);
  }
  .step h3{font-size:1.05rem;}
  .step p{color:var(--text-muted); font-size:0.94rem;}

  /* type cards */
  .areas-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
  @media (max-width:820px){.areas-grid{grid-template-columns:1fr;}}
  .area-card{
    background:var(--card); border:1px solid var(--border); border-radius:14px;
    overflow:hidden; display:flex; flex-direction:column;
    transition:transform .18s ease, box-shadow .18s ease;
  }
  .area-card:hover{transform:translateY(-3px); box-shadow:var(--shadow);}
  .area-art{height:190px; position:relative; overflow:hidden;}
  .area-art img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s ease;}
  .area-card:hover .area-art img{transform:scale(1.04);}
  .area-body{padding:20px; display:flex; flex-direction:column; gap:10px; flex:1;}
  .area-body h3{font-size:1.15rem;}
  .area-body p{color:var(--text-muted); font-size:0.94rem;}
  .area-link{font-size:0.88rem; font-weight:500; text-decoration:none; margin-top:auto;}
  .link-inline{
    background:none; border:none; padding:0; margin:0; cursor:pointer;
    font:inherit; color:var(--accent); text-decoration:underline; text-underline-offset:2px;
  }
  .link-inline:hover{color:var(--accent-strong);}

  /* honesty band */
  .split{display:grid; grid-template-columns:1fr 1fr; gap:40px;}
  @media (max-width:760px){.split{grid-template-columns:1fr;}}
  .check-list, .cross-list{list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:10px;}
  .check-list li, .cross-list li{display:flex; gap:10px; font-size:0.96rem; color:var(--text-muted);}
  .mark{flex:none; width:18px; height:18px; margin-top:2px;}

  /* shortlist sample */
  .sample-flag{
    display:inline-flex; align-items:center; gap:8px;
    background:var(--accent-strong); color:#fff;
    border:1px solid var(--accent-strong); border-radius:999px;
    padding:6px 14px; font-family:'IBM Plex Mono', monospace; font-size:0.72rem;
    letter-spacing:0.06em; text-transform:uppercase;
  }
  .shortlist{
    display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:18px; margin-top:28px;
  }
  @media (max-width:900px){.shortlist{grid-template-columns:1fr;}}
  .listing-card{
    background:var(--card); border:1px solid var(--border); border-radius:14px;
    padding:22px; display:flex; flex-direction:column; gap:14px;
  }
  .listing-card .thumb{
    position:relative;
    height:130px; border-radius:10px; background:var(--bg-alt);
    display:flex; align-items:center; justify-content:center;
    color:var(--text-muted); font-family:'IBM Plex Mono',monospace; font-size:0.72rem;
    letter-spacing:0.08em; text-transform:uppercase; border:1px solid var(--border);
    overflow:hidden;
  }
  .listing-card .thumb img{width:100%; height:100%; object-fit:cover; display:block;}
  .thumb-watermark{
    position:absolute; left:8px; top:8px;
    background:rgba(10,18,12,0.72); color:#fff;
    font-family:'IBM Plex Mono',monospace; font-size:0.6rem; letter-spacing:0.07em; text-transform:uppercase;
    padding:3px 6px; border-radius:4px; line-height:1; pointer-events:none;
  }
  .listing-title{font-size:1.05rem; font-weight:600;}
  .listing-meta{display:flex; justify-content:space-between; font-size:0.85rem; color:var(--text-muted);}
  .listing-price{font-family:'IBM Plex Mono',monospace; color:var(--text); font-weight:500;}
  .listing-why{font-size:0.92rem; color:var(--text-muted);}
  .tradeoff{
    font-size:0.82rem; background:var(--bg-alt); border-radius:8px; padding:8px 10px;
    color:var(--text-muted);
  }
  .tradeoff b{color:var(--ochre); font-weight:600;}

  /* about */
  .about-grid{display:grid; grid-template-columns:0.8fr 1.2fr; gap:44px; align-items:start;}
  @media (max-width:760px){.about-grid{grid-template-columns:1fr;}}
  .avatar{
    width:100%; aspect-ratio:1; border-radius:16px; background:var(--card);
    border:1px solid var(--border);
    display:flex; align-items:center; justify-content:center;
    overflow:hidden;
  }
  .avatar img{width:100%; height:100%; object-fit:cover; display:block;}
  .placeholder-note{
    border-left:3px solid var(--ochre); background:var(--bg-alt);
    padding:14px 16px; border-radius:0 10px 10px 0; font-size:0.9rem; color:var(--text-muted); margin-top:18px;
  }

  /* enquire form */
  .form-wrap{
    display:grid; grid-template-columns:1.1fr 0.9fr; gap:44px; align-items:start;
  }
  @media (max-width:860px){.form-wrap{grid-template-columns:1fr;}}
  form.enquiry{
    background:var(--card); border:1px solid var(--border); border-radius:16px;
    padding:28px; display:flex; flex-direction:column; gap:18px;
  }
  .field{display:flex; flex-direction:column; gap:6px;}
  .field label{font-size:0.88rem; font-weight:500;}
  .field .hint{font-size:0.78rem; color:var(--text-muted); font-weight:400;}
  .field input[type=text], .field input[type=email], .field input[type=tel],
  .field select, .field textarea{
    font-family:inherit; font-size:0.96rem; color:var(--text);
    background:var(--bg); border:1px solid var(--border-strong); border-radius:8px;
    padding:11px 12px; width:100%;
  }
  .field textarea{resize:vertical; min-height:96px;}
  .check-group{display:flex; flex-wrap:wrap; gap:10px;}
  .chip{
    display:flex; align-items:center; gap:7px; font-size:0.88rem;
    border:1px solid var(--border-strong); border-radius:999px; padding:8px 13px;
    cursor:pointer; color:var(--text-muted);
  }
  .chip input{accent-color:var(--accent);}
  .consent{display:flex; gap:10px; align-items:flex-start; font-size:0.86rem; color:var(--text-muted);}
  .consent input{margin-top:3px;}
  .form-note{font-size:0.84rem; color:var(--text-muted);}
  .side-note{display:flex; flex-direction:column; gap:16px;}
  .side-note .card{
    background:var(--card); border:1px solid var(--border); border-radius:14px; padding:18px 20px;
  }
  .side-note h3{font-size:0.98rem; margin-bottom:6px;}
  .side-note p{font-size:0.88rem; color:var(--text-muted);}
  .confirm-panel{
    display:none; background:var(--accent-tint); border:1px solid var(--accent);
    border-radius:14px; padding:20px 22px; margin-top:18px;
  }
  .confirm-panel.show{display:block;}
  .confirm-panel.error{background:rgba(162,78,23,0.08); border-color:var(--ochre);}
  .confirm-panel h3{font-size:1.02rem; margin-bottom:6px;}
  .confirm-panel p{font-size:0.9rem; color:var(--text-muted); margin-top:6px;}

  /* legal page */
  .legal-box{
    border:1px solid var(--border); border-radius:14px; padding:28px;
    background:var(--card); display:flex; flex-direction:column; gap:14px;
  }
  .legal-box + .legal-box{margin-top:20px;}
  .legal-box h2{font-size:1.35rem; margin-top:8px;}
  .legal-box h3{font-size:1.02rem; margin-top:6px;}
  .legal-box p{color:var(--text-muted); font-size:0.96rem; line-height:1.65;}
  .legal-box ul{margin:2px 0 0; padding-left:20px; color:var(--text-muted); font-size:0.94rem; display:flex; flex-direction:column; gap:6px; line-height:1.55;}

  /* footer */
  footer{
    border-top:1px solid var(--border); padding-block:40px; margin-top:20px;
    background:var(--bg-alt);
  }
  .footer-grid{display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap;}
  .footer-links{display:flex; gap:18px; flex-wrap:wrap;}
  .footer-links button, .footer-links a{
    background:none; border:none; color:var(--text-muted); cursor:pointer; font-size:0.88rem; padding:0;
    text-decoration:none;
  }
  .footer-links button:hover, .footer-links a:hover{color:var(--accent);}
  .fine-print{margin-top:24px; font-size:0.78rem; color:var(--text-muted); max-width:70ch; line-height:1.6;}

  .card-plain{background:var(--card); border:1px solid var(--border); border-radius:14px; padding:20px;}
  .type-row:hover{transform:translateY(-2px); box-shadow:var(--shadow);}
  @media (max-width:640px){
    .type-row{grid-template-columns:1fr !important;}
    .type-row .area-art{height:180px;}
  }