/* Layout: logo-led identity, compact and structured. One family (Jost, close to the logo's Futura), two weights only (400 text, 500 labels).
   Logo-tile colours as small accents; content sits in framed panels; justified running text. */
:root{
  --bg:#ffffff; --tint:#f6f1ea; --tint2:#eef2ec; --ink:#3b3936; --muted:#655f58; --line:#e3ddd3;
  --terra:#bf5433; --ochre:#c9933f; --sage:#6c8a64; --slate:#5d7c93; --umber:#3a2a22; --sand:#cdbda3;
  --font:"Jost", "Futura", "Century Gothic", "Avenir Next", system-ui, sans-serif;
  --max:1140px; --gap:24px; --pad:44px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#191614; --tint:#221d19; --tint2:#1c211d; --ink:#ede7e0; --muted:#b2a89c; --line:#362f29;
  --terra:#e07a57; --ochre:#e0ad62; --sage:#95b18c; --slate:#91b1c7; --umber:#e9dfd3; --sand:#8a7a64; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#191614; --tint:#221d19; --tint2:#1c211d; --ink:#ede7e0; --muted:#b2a89c; --line:#362f29;
  --terra:#e07a57; --ochre:#e0ad62; --sage:#95b18c; --slate:#91b1c7; --umber:#e9dfd3; --sand:#8a7a64; color-scheme:dark}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-weight:400;font-size:16px;line-height:1.6;margin:0}
body *{font-family:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
a{color:var(--terra);text-underline-offset:3px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--ochre);outline-offset:3px}
h1,h2,h3{line-height:1.2;margin:0;text-wrap:balance;color:var(--ink);font-weight:400}
h1{font-size:clamp(25px,2.5vw,32px)}
h2{font-size:clamp(21px,2vw,26px)}
h3{font-size:17px;font-weight:500}
p{margin:0;text-align:justify;hyphens:auto;-webkit-hyphens:auto}
strong,b{font-weight:500}
.eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--terra);font-weight:500}
.lead{font-size:17px;color:var(--muted)}
.muted{color:var(--muted)}
.tilestrip{height:12px;background:url("tile-strip.svg") repeat-x;background-size:48px 12px}

/* header */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--bg)}
header.site{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--bg);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:20px;padding-block:10px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);flex-shrink:0}
.logo img{width:48px;height:auto;display:block}
.logo .word{display:flex;flex-direction:column;line-height:1}
.logo .word b{font-weight:400;font-size:27px;color:var(--ink)}
.logo .word span{font-size:9.5px;letter-spacing:.74em;color:var(--muted);margin-top:5px;padding-left:1px}
nav.main{display:flex;align-items:center;gap:22px;font-size:15px;margin-left:auto}
nav.main a{color:var(--ink);text-decoration:none;padding-block:5px;border-bottom:1px solid transparent}
nav.main a:hover{border-bottom-color:var(--sand)}
nav.main a[aria-current="page"]{color:var(--terra);border-bottom-color:var(--terra)}
.lang{display:flex;gap:2px;font-size:13px;margin-left:12px}
.lang a,.lang strong{padding:3px 8px;text-decoration:none;color:var(--muted);border:1px solid transparent;font-weight:400}
.lang strong{color:var(--ink);border-color:var(--line);font-weight:500}
@media (max-width:900px){
  .bar{flex-wrap:wrap;gap:8px 16px}
  .lang{margin-left:auto}
  nav.main{order:3;width:100%;gap:20px;font-size:14.5px;border-top:1px solid var(--line);padding-top:4px;margin:0}
  .logo img{width:40px}.logo .word b{font-size:23px}.logo .word span{font-size:8.5px}
}

.btn{display:inline-flex;align-items:center;padding:10px 20px;background:var(--terra);color:#fff;text-decoration:none;font-weight:500;font-size:13px;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--terra);cursor:pointer}
.btn:hover{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.btn.line{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.line:hover{background:var(--ink);color:var(--bg)}
.ctas{display:flex;gap:10px;flex-wrap:wrap}

.tile{width:26px;height:26px;flex:none;display:block}

/* sections and panels */
section{padding-block:var(--pad)}
section.tint{background:var(--tint)}
section.tint2{background:var(--tint2)}
.head{display:grid;gap:8px;margin-bottom:22px;max-width:780px}
.pagehead{padding-block:28px 18px;display:grid;gap:10px}
.pagehead>*{max-width:860px}
.pagehead + section{padding-top:4px}
.panel{background:var(--bg);border:1px solid var(--line);padding:24px 26px;position:relative;min-width:0}
section.tint .panel,section.tint2 .panel{border-color:transparent}

/* home hero */
.hero-photo{display:block;width:100%;height:clamp(200px,24vw,300px);object-fit:cover;object-position:60% 40%}
.hero-card{position:relative;margin-top:-88px;background:var(--bg);padding:26px 32px 24px;max-width:700px;display:grid;gap:12px;border:1px solid var(--line)}
.hero-card::before{content:"";position:absolute;left:-1px;top:-1px;right:-1px;height:4px;background:url("tile-strip.svg") repeat-x;background-size:16px 4px}
@media (max-width:760px){.hero-card{margin-top:-36px;padding:22px 20px}.hero-photo{height:190px}}
.brief{margin-top:16px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:start;background:var(--tint);padding:18px 22px}
.brief p{font-size:15.5px}

.split{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:40px;align-items:start}
.prose{display:grid;gap:12px}
.prose p{color:var(--muted)}
.prose strong{color:var(--ink)}
@media (max-width:900px){.split{grid-template-columns:1fr;gap:16px}}

.values{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.values>div{background:var(--bg);padding:20px 22px;display:grid;gap:8px;align-content:start;min-width:0}
.values h3{display:flex;gap:12px;align-items:center}
.values p{font-size:15px;color:var(--muted)}
@media (max-width:900px){.values{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.values{grid-template-columns:1fr}}

.zones{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.zone{padding:20px 22px;display:grid;gap:8px;align-content:start;min-width:0;border:1px solid var(--line)}
.zone h3{font-size:19px;font-weight:400;display:flex;gap:12px;align-items:center}
.zone .hoods{font-size:13.5px;color:var(--terra);text-align:left}
.zone p{font-size:15px;color:var(--muted)}
@media (max-width:900px){.zones{grid-template-columns:1fr}}

ol.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);counter-reset:s}
ol.steps li{counter-increment:s;display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;align-content:start;background:var(--bg);padding:18px 20px}
ol.steps li::before{content:counter(s,decimal-leading-zero);font-size:22px;color:var(--terra);line-height:1.1;grid-row:span 2}
ol.steps p{font-size:15px;color:var(--muted)}
@media (max-width:900px){ol.steps{grid-template-columns:1fr 1fr}}
@media (max-width:600px){ol.steps{grid-template-columns:1fr}}

.cta-band{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;border:1px solid var(--line);padding:22px 26px}

/* team */
.founder{display:grid;grid-template-columns:150px minmax(0,1fr);gap:26px;align-items:start;background:var(--tint);padding:22px;border:1px solid var(--line)}
.founder img{width:150px;height:171px;object-fit:cover;display:block}
.founder .prose{gap:8px}
.founder h2{font-size:22px}
.founder .prose p{font-size:15.5px}
@media (max-width:600px){.founder{grid-template-columns:96px minmax(0,1fr);gap:16px;padding:16px}.founder img{width:96px;height:110px}.founder .prose p,.founder .ctas{grid-column:1/-1}}
.team{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--gap)}
.member{grid-column:span 2;background:var(--bg);padding:20px 22px;display:grid;gap:6px;align-content:start;min-width:0}
.member.wide{grid-column:span 3}
.member .top{display:flex;gap:12px;align-items:center}
.role{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:500}
.member h3{font-size:19px;font-weight:400}
.member p{font-size:15px;color:var(--muted)}
.badge{justify-self:start;font-size:13.5px;color:var(--terra);font-weight:500}
@media (max-width:900px){.team{grid-template-columns:1fr 1fr}.member,.member.wide{grid-column:auto}}
@media (max-width:600px){.team{grid-template-columns:1fr}}

/* services */
.packs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gap)}
.pack{background:var(--bg);border:1px solid var(--line);padding:22px 24px;display:grid;gap:10px;align-content:start;min-width:0;position:relative}
.pack::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:4px;background:url("tile-strip.svg") repeat-x;background-size:16px 4px}
.pack h2{font-size:21px}
.pack .for{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--terra);font-weight:500}
.pack p{font-size:15px}
.pack .price{font-size:13.5px;color:var(--muted);border-top:1px solid var(--line);padding-top:10px}
.pack .price b{color:var(--ink)}
.pack .note{font-size:13.5px;color:var(--sage);font-weight:500}
@media (max-width:900px){.packs{grid-template-columns:1fr}}

.compare{width:100%;border-collapse:collapse;font-size:15px;background:var(--bg)}
.compare th,.compare td{padding:9px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
.compare thead th{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:500;border-bottom:1px solid var(--ink)}
.compare td.c,.compare th.c{text-align:center;width:140px}
.compare td b{font-weight:500}
.compare td span{color:var(--muted);font-size:13.5px;margin-left:8px}
.compare tr.group td{padding-top:16px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--terra);font-weight:500;background:var(--tint)}
.yes{display:inline-block;width:10px;height:10px;transform:rotate(45deg);background:var(--terra)}
.no{color:var(--sand)}
.table-scroll{overflow-x:auto}
@media (max-width:640px){.compare td.c,.compare th.c{width:64px}.compare th,.compare td{padding:9px 8px}.compare thead th{font-size:10.5px;letter-spacing:.04em}.compare td span{display:block;margin-left:0}}

.terms{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gap)}
.terms.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.terms>div{display:grid;gap:6px;align-content:start;border:1px solid var(--line);padding:20px 22px}
.terms p{font-size:15px;color:var(--muted)}
@media (max-width:900px){.terms,.terms.three{grid-template-columns:1fr}}

.faq{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--gap)}
.faq details{border-top:1px solid var(--line);padding-block:12px}
.faq summary{cursor:pointer;font-size:16px;font-weight:500;list-style:none;display:flex;justify-content:space-between;gap:14px}
.faq summary::after{content:"+";color:var(--terra);font-weight:400}
.faq details[open] summary::after{content:"–"}
.faq summary::-webkit-details-marker{display:none}
.faq details p{color:var(--muted);margin-top:6px;font-size:15px}
@media (max-width:760px){.faq{grid-template-columns:1fr}}

/* contact */
.contact{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--gap);align-items:start}
.reach{display:grid;gap:14px;border:1px solid var(--line);padding:22px 24px}
.reach dl{margin:0;display:grid;gap:12px}
.reach dt{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--terra);font-weight:500}
.reach dd{margin:2px 0 0;color:var(--muted);font-size:15px}
.reach dd, .pack .note, .zone .hoods{text-align:left}
.reach .mail{color:var(--ink);user-select:all;overflow-wrap:anywhere}
form.brief-form{display:grid;gap:12px;background:var(--tint);padding:22px 24px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
label{display:grid;gap:4px;font-size:13px;color:var(--muted);font-weight:500}
input,select,textarea{font-size:15px;font-weight:400;padding:9px 11px;border:1px solid var(--line);background:var(--bg);color:var(--ink);width:100%;min-width:0;border-radius:0}
textarea{min-height:96px;resize:vertical}
.sent{color:var(--sage);font-size:14px}
@media (max-width:900px){.contact{grid-template-columns:1fr}.row{grid-template-columns:1fr}}

footer{background:var(--tint);padding-block:0 24px;font-size:14px}
footer .grid{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(2,minmax(0,1fr));gap:24px;padding-top:28px}
footer a{color:var(--ink);text-decoration:none} footer a:hover{color:var(--terra)}
footer p{color:var(--muted);font-size:13.5px;text-align:left}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
@media (max-width:760px){footer .grid{grid-template-columns:1fr}}
.pagehead + section + section.tint{padding-top:28px}
.pagehead + section:has(.founder){padding-bottom:20px}
/* founder: round portrait aligned with the name, small link */
.founder{grid-template-columns:132px minmax(0,1fr);align-items:center}
.founder img{width:132px;height:132px;border-radius:50%;object-fit:cover;align-self:center}
.founder .prose{gap:6px}
.small-link{justify-self:end;font-size:13px;color:var(--terra);text-decoration:none;letter-spacing:.02em}
.small-link:hover{text-decoration:underline}
@media (max-width:600px){.founder{grid-template-columns:84px minmax(0,1fr)}.founder img{width:84px;height:84px}}
/* google reviews module */
.reviews{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:18px;padding:8px 14px;background:var(--bg);border:1px solid var(--line);text-decoration:none;color:var(--ink);font-size:13.5px}
.reviews:hover{border-color:var(--sand)}
.reviews .g{width:20px;height:20px;display:grid;place-items:center;border-radius:50%;background:var(--bg);border:1px solid var(--line);font-weight:500;font-size:12px;color:var(--slate)}
.reviews .stars{color:var(--ochre);letter-spacing:1px;font-size:14px}
.reviews b{font-weight:500}
.reviews .lbl{color:var(--muted)}
.reviews .go{color:var(--terra)}
/* advice */
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.post-card{border:1px solid var(--line);padding:20px 22px;display:grid;gap:8px;align-content:start;position:relative;min-width:0}
.post-card::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:3px;background:url("tile-strip.svg") repeat-x;background-size:12px 3px}
.post-card h2{font-size:18px;font-weight:500;line-height:1.3}
.post-card h2 a{color:var(--ink);text-decoration:none}
.post-card h2 a:hover{color:var(--terra)}
.post-card p{font-size:14.5px;color:var(--muted)}
.post-card .small-link{justify-self:start}
.meta{display:flex;gap:12px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:500}
.meta span:first-child{color:var(--terra)}
@media (max-width:900px){.posts{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.posts{grid-template-columns:1fr}}
.article{max-width:780px;padding-block:24px 48px;display:grid;gap:14px}
.article .back{justify-self:start}
.art-head{display:grid;gap:10px}
.art-head h1{font-size:clamp(25px,2.6vw,32px)}
.art-body{display:grid;gap:12px}
.art-body h2{font-size:21px;margin-top:14px}
.art-body h3{margin-top:6px}
.art-body ul{margin:0;padding-left:20px;display:grid;gap:6px}
.art-body li{text-align:justify;hyphens:auto}
.art-body li::marker{color:var(--terra)}
.art-body .sources{font-size:13px;color:var(--muted);border-top:1px solid var(--line);padding-top:10px;margin-top:8px;text-align:left}
.archive-note{font-size:14px;background:var(--tint);padding:10px 14px;color:var(--muted);text-align:left}
.art-cta{margin-top:20px;background:var(--tint);padding:22px 24px;display:grid;gap:10px;justify-items:start}
.art-cta h2{font-size:20px}