/* Self-hosted fonts (SIL Open Font License, see assets/fonts/OFL-*.txt) */
@font-face{font-family:'Archivo';font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;src:url(fonts/archivo-latin-wdth-normal.woff2) format('woff2-variations'),url(fonts/archivo-latin-wdth-normal.woff2) format('woff2')}
@font-face{font-family:'Figtree';font-style:normal;font-display:swap;font-weight:300 900;src:url(fonts/figtree-latin-wght-normal.woff2) format('woff2-variations'),url(fonts/figtree-latin-wght-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-display:swap;font-weight:400;src:url(fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-display:swap;font-weight:500;src:url(fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-display:swap;font-weight:600;src:url(fonts/ibm-plex-mono-latin-600-normal.woff2) format('woff2')}
/* Enoch Surfaces site styles. Layout: one centred 1180px column, full-bleed colour bands per section. */
:root{
  --ink:#0F1F1B; --paper:#F1F3EF; --paper2:#E6EAE4; --card:#FBFCFA; --rule:#C3CBC2; --rule2:#D3D9D2;
  --muted:#4A5A55; --body:#2B3B36; --amber:#D9A86C; --dmuted:#B4C2BB; --forest:#17302A; --deep:#0B1814;
  --wa:#0B7A37; --wa-h:#096530; --sage:#DDE3DC;
  --f-disp:'Archivo','Arial Narrow',Arial,sans-serif;
  --f-body:'Figtree','Segoe UI','PingFang SC','Microsoft YaHei',system-ui,sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
p{margin:0}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
.skip{position:absolute;left:-9999px;top:8px}
.skip:focus{left:16px;z-index:100;background:var(--ink);color:var(--paper);padding:10px 14px}

/* Layout */
.wrap{max-width:1180px;margin-inline:auto;padding-inline:24px}
@media (max-width:600px){.wrap{padding-inline:16px}}
.sec{padding-block:88px}.sec-m{padding-block:64px}.sec-s{padding-block:40px}
@media (max-width:700px){.sec{padding-block:56px}.sec-m{padding-block:44px}.sec-s{padding-block:28px}}
.bg-paper{background:var(--paper)}.bg-paper2{background:var(--paper2)}
.bg-ink{background:var(--ink);color:var(--paper)}.bg-forest{background:var(--forest);color:var(--paper)}
.stack{display:flex;flex-direction:column;gap:var(--gap,16px)}
.row-wrap{display:flex;flex-wrap:wrap;align-items:center;gap:var(--gap,14px)}
.split{display:flex;flex-wrap:wrap;gap:40px 64px}
.split>*{min-width:0}
.c1{flex:1 1 300px}.c2{flex:2 1 520px}.ch{flex:1 1 440px}.c-cta{flex:1 1 260px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--min,240px)),1fr));gap:var(--gap,24px)}
.start{align-self:flex-start}

/* Type */
.disp{font-family:var(--f-disp);font-stretch:78%;font-weight:800;letter-spacing:-.01em;text-wrap:balance;margin:0}
.h1{font-size:clamp(42px,6.2vw,84px);line-height:.96}
.h1-s{font-size:clamp(38px,5.4vw,72px);line-height:.98}
.h2{font-size:clamp(32px,4.4vw,56px);line-height:1}
.h3{font-size:clamp(26px,3.2vw,40px);line-height:1.04}
.h4{font-size:clamp(24px,2.6vw,32px);line-height:1}
.eyebrow{font-family:var(--f-mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.bg-ink .eyebrow,.bg-forest .eyebrow{color:var(--amber)}
.lead{font-size:19px;line-height:1.55;color:var(--body);max-width:36em}
.bg-ink .lead,.bg-forest .lead,.bg-ink .soft,.bg-forest .soft{color:var(--dmuted)}
.body-c{color:var(--body);line-height:1.55}
.mono{font-family:var(--f-mono)}.num{font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}.small{font-size:14px;line-height:1.5}.xs{font-size:13px;line-height:1.45}
.amber{color:var(--amber)}.b{font-weight:700}
.big-mono{font-family:var(--f-mono);font-weight:500;font-size:clamp(24px,3vw,30px)}
.prose{display:flex;flex-direction:column;gap:18px}
.prose p{font-size:18px;line-height:1.65;color:var(--body);max-width:40em}
h3.t{margin:0;font-size:20px;line-height:1.25}

/* Buttons and links */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 24px;font:700 17px/1.2 var(--f-body);text-decoration:none;border-radius:3px;cursor:pointer;text-align:center;border:1.5px solid transparent}
.btn-wa{background:var(--wa);color:#fff;border-color:var(--wa)}.btn-wa:hover{background:var(--wa-h)}
.bg-ink .btn-wa,.bg-forest .btn-wa{border-color:#2FB76A}
.btn-ink{background:var(--ink);color:var(--paper);border-color:var(--ink)}.btn-ink:hover{background:#22352F}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink)}.btn-ghost:hover{background:var(--ink);color:var(--paper)}
.btn-ghost-d{background:transparent;color:var(--paper);border-color:rgba(241,243,239,.5)}.btn-ghost-d:hover{border-color:var(--paper)}
.btn-sm{min-height:44px;padding:0 16px;font-size:15px}
.tlink{font-weight:700}

/* Header */
.site-h{background:var(--paper);border-bottom:1px solid var(--rule2)}
.site-h .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding-block:14px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none}
.logo-mark{display:flex;flex-direction:column;gap:2px;width:34px}
.logo-mark i{display:block;height:8px;width:34px}
.logo-mark i:nth-child(1){background:#B98B5C}.logo-mark i:nth-child(2){background:#A97A4C;margin-left:8px}.logo-mark i:nth-child(3){background:#C79A6B;margin-left:-6px}
.logo-t{font-size:28px;line-height:1}
.logo-img{display:block;height:54px;width:auto}
@media (max-width:640px){.logo-img{height:42px}}
.nav{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;font-weight:600;font-size:15px}
.nav a{text-decoration:none;white-space:nowrap}
.nav a:hover{text-decoration:underline}
.nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}
@media (max-width:860px){
  .nav{flex-wrap:nowrap;overflow-x:auto;width:100%;gap:18px;padding-bottom:4px;font-size:14px;scrollbar-width:none}
  .nav::-webkit-scrollbar{display:none}
  .nav .btn{display:none}
}

/* Mobile action bar */
.mbar{display:none}
@media (max-width:860px){
  .mbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));background:rgba(241,243,239,.97);border-top:1px solid var(--rule)}
  .mbar .btn{flex:1 1 0;min-height:48px;font-size:16px;padding:0 10px}
  body{padding-bottom:80px}
}

/* Pills and form controls */
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pill{min-height:44px;padding:0 16px;font:600 15px var(--f-body);border-radius:3px;cursor:pointer;background:var(--paper);color:var(--ink);border:1.5px solid #9AA89F}
.pill:hover{border-color:var(--ink)}
.pill[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.q{display:flex;flex-direction:column;gap:10px}
.qlabel{font-family:var(--f-mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.field{width:100%;min-height:48px;padding:0 14px;background:#fff;color:var(--ink);border:1.5px solid #9AA89F;border-radius:3px;font:500 16px var(--f-body)}
.field-num{min-height:56px;font:600 22px var(--f-mono)}
textarea.field{padding:12px 14px;min-height:110px;resize:vertical}
input[type="range"]{width:100%;height:44px;margin:0;accent-color:var(--ink)}
.fields{display:flex;flex-wrap:wrap;gap:16px}
.fields>div{flex:1 1 200px;min-width:0;display:flex;flex-direction:column;gap:8px}
.sw{min-height:44px;display:inline-flex;align-items:center;gap:8px;padding:0 12px 0 6px;font:600 14px var(--f-body);border-radius:3px;cursor:pointer;background:var(--paper);color:var(--ink);border:2px solid var(--rule)}
.sw:hover{border-color:#7E8D86}
.sw[aria-pressed="true"]{border-color:var(--ink)}
.sw i{width:30px;height:30px;border-radius:2px;background:var(--c)}

/* Receipt */
.receipt{background:var(--card);color:var(--ink);border:1px solid var(--rule);box-shadow:0 18px 40px -24px rgba(15,31,27,.35);padding:24px;display:flex;flex-direction:column;gap:14px}
@media (max-width:600px){.receipt{padding:18px}}
.r-head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:8px 12px}
.rlines{border-top:2px solid var(--ink)}
.rrow{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:12px 0;border-bottom:1px dashed var(--rule)}
.rrow-l{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:4px}
.rrow-t{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-weight:600}
.rrow-d{font-family:var(--f-mono);font-size:13px;color:var(--muted);overflow-wrap:anywhere}
.rrow-a{flex:none;max-width:45%;text-align:right;font-family:var(--f-mono);font-weight:500;font-variant-numeric:tabular-nums}
.rsub{display:flex;justify-content:space-between;gap:16px;color:var(--body)}
.rtotal{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:12px 16px;padding-top:8px;border-top:3px double var(--ink)}
.rtotal-v{font-size:clamp(32px,4.4vw,54px);line-height:1;font-variant-numeric:tabular-nums}
.note-site{font-size:14px;line-height:1.5;color:var(--body);padding:10px 12px;background:var(--sage)}
.chip{display:inline-block;font:600 11px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;padding:3px 7px;border-radius:2px;white-space:nowrap;vertical-align:middle}
.chip-fixed{background:var(--ink);color:var(--paper);border:1px solid var(--ink)}
.chip-range{background:#F3E3CC;color:#6B4A1E;border:1px solid #E2C9A2}
.chip-site{background:var(--sage);color:var(--body);border:1px solid var(--rule)}
.chip-open{background:transparent;color:var(--muted);border:1px dashed #7E8D86}
.chip-none{background:transparent;color:var(--muted);border:1px solid var(--rule)}

/* Rows (definition-style lists) */
.rows{border-top:2px solid var(--ink)}
.rows>.r{display:flex;flex-wrap:wrap;gap:6px 24px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--rule)}
.rows>.r:last-child{border-bottom:2px solid var(--ink)}
.r-k{flex:1 1 200px;font-weight:700;font-size:18px}
.r-v{flex:2 1 300px;min-width:0;line-height:1.55;color:var(--body)}
.r-n{flex:none;font-family:var(--f-mono)}
.bg-ink .rows,.bg-forest .rows{border-top-color:rgba(241,243,239,.3)}
.bg-ink .rows>.r,.bg-forest .rows>.r{border-bottom-color:rgba(241,243,239,.15)}
.bg-ink .r-v,.bg-forest .r-v{color:var(--dmuted)}
.kv{border-top:1px solid rgba(241,243,239,.25)}
.kv>div{display:flex;flex-wrap:wrap;gap:6px 24px;padding:16px 0;border-bottom:1px solid rgba(241,243,239,.15)}
.kv .k{flex:0 0 120px;font-family:var(--f-mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--dmuted)}
.kv .v{flex:1 1 220px;min-width:0;line-height:1.5;overflow-wrap:anywhere}

/* Tiles */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:2px}
.tile{display:flex;flex-direction:column;gap:10px;padding:28px 24px;background:var(--forest);color:var(--paper);text-decoration:none}
.tile:hover{background:#1E3A33}
.tile .t-h{font-size:32px;line-height:1}
.tile .t-p{color:var(--dmuted);line-height:1.5}
.tile .t-a{font-weight:700;margin-top:auto}

/* Price board */
.board{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:2px;background:var(--rule);border:2px solid var(--rule)}
.board>div{background:var(--paper);padding:22px;display:flex;flex-direction:column;gap:6px}

/* Cards */
.card-o{padding:28px;border:1.5px solid #9AA89F;display:flex;flex-direction:column;gap:10px}
.card-d{padding:28px;background:var(--ink);color:var(--paper);display:flex;flex-direction:column;gap:10px}
.proof{display:flex;flex-direction:column;gap:8px;padding-top:16px;border-top:2px solid var(--ink)}
.bg-ink .proof,.bg-forest .proof{border-top-color:rgba(241,243,239,.3)}

/* Image slots: a coloured block until the real photo is dropped into assets/img */
.ph{position:relative;overflow:hidden;max-width:100%;background-color:var(--c,#C3CBC2);background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 2px,rgba(0,0,0,.05) 2px 5px);margin:0}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ar-1{aspect-ratio:1/1}.ar-43{aspect-ratio:4/3}.ar-32{aspect-ratio:3/2}.ar-45{aspect-ratio:4/5}.ar-wide{aspect-ratio:16/7}
.planks{background:var(--ink);padding:10px}
.planks .pr{display:flex;height:64px;overflow:hidden}
.planks .pr span{flex:none;width:62%;box-shadow:inset 0 0 0 1px rgba(15,31,27,.3);background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 2px,rgba(0,0,0,.05) 2px 5px)}

/* Finish cards */
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr));gap:16px}
.fcard{display:flex;flex-direction:column;gap:8px;text-decoration:none;min-width:0}
.fcard .n{font-weight:700;font-size:18px}
.fpick{display:flex;flex-direction:column;gap:8px;padding:8px;text-align:left;cursor:pointer;font-family:var(--f-body);color:var(--ink);background:var(--paper);width:100%;border-radius:3px;border:3px solid transparent}
.fpick:hover{border-color:var(--rule)}
.fpick[aria-pressed="true"]{border-color:var(--ink)}
.fpick .st{font-size:14px;color:var(--muted)}
.fpick[aria-pressed="true"] .st{color:var(--ink);font-weight:700}

/* Quote checker */
.tick{width:100%;display:flex;align-items:flex-start;gap:14px;padding:14px;text-align:left;cursor:pointer;font-family:var(--f-body);color:var(--ink);border-radius:3px;background:var(--paper);border:1.5px solid var(--rule)}
.tick:hover{border-color:#7E8D86}
.tick[aria-pressed="true"]{background:var(--card);border-color:var(--ink)}
.tick .box{flex:none;width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;border-radius:2px;font:700 16px var(--f-mono);border:1.5px solid #7E8D86;color:transparent}
.tick[aria-pressed="true"] .box{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.tick .tl{font-weight:700;font-size:16px}
.tick .th{font-size:14px;line-height:1.45;color:var(--muted)}
.segs{display:flex;gap:4px}
.segs i{flex:1 1 0;height:14px;background:rgba(241,243,239,.16)}
.segs i.on{background:var(--amber)}
.miss{display:flex;flex-direction:column;gap:2px;padding:10px 0;border-bottom:1px solid rgba(241,243,239,.15)}

/* Tables */
.tbl-wrap{overflow-x:auto}
table.tbl{width:100%;min-width:640px;border-collapse:collapse;background:var(--card)}
.tbl th{text-align:left;font:500 12px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:12px 14px;border-bottom:2px solid var(--ink)}
.tbl td{padding:14px;border-bottom:1px solid var(--rule2);vertical-align:top;font-size:16px;line-height:1.5}
.tbl .ra{text-align:right}
.tbl tr.tot td{border-bottom:3px double var(--ink);font-weight:700}

/* FAQ */
.faq{border-top:2px solid var(--ink)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 0;font-weight:700;font-size:19px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--f-mono);font-size:24px;line-height:1;flex:none}
.faq details[open] summary::after{content:"\2212"}
.faq details p{padding:0 0 22px;line-height:1.6;color:var(--body);max-width:46em}

/* Steps */
.steps{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:28px 40px}
.steps li{flex:1 1 240px;min-width:0;display:flex;flex-direction:column;gap:8px;padding-top:14px;border-top:1px solid rgba(241,243,239,.3)}
.bg-paper .steps li,.bg-paper2 .steps li{border-top-color:var(--ink)}

/* Footer */
.site-f{background:var(--deep);color:var(--dmuted);font-size:14px;line-height:1.55}
.site-f .wrap{padding-block:36px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px 40px}
.site-f nav{display:flex;flex-wrap:wrap;gap:8px 20px}
.site-f a{text-decoration:none}.site-f a:hover{text-decoration:underline}
.crumbs{font-family:var(--f-mono);font-size:13px;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px}
.crumbs a{text-decoration:none}.crumbs a:hover{text-decoration:underline}
:where(img[width][height]){height:auto}