/* ==========================================================================
   variant-04-warm-workshop — style.css
   Warm paper ground, soft rounded cards, hand-drawn accents.
   No external requests: system font stacks only, SVG as inline data URIs.
   Measured contrast pairs are documented in MANIFESTO.md.
   ========================================================================== */

:root{
  --paper:#FBF7F0;
  --card:#FFFFFF;
  --ink:#241B14;
  --muted:#67584A;
  --line:#E7D9C7;
  --line-strong:#D9C7B0;
  --accent:#A3431C;
  --accent-dark:#7E2F12;
  --soft:#F6E4D8;
  --band:#F3E7D8;
  --green:#2E6B4F;
  --green-bg:#E7F1EA;
  --green-line:#BFD8C8;
  --warm:#8A5A2B;
  --radius:22px;
  --radius-sm:14px;
  --shadow:0 1px 0 rgba(36,27,20,.04), 0 12px 26px -18px rgba(36,27,20,.35);
  --shadow-lift:0 2px 0 rgba(36,27,20,.05), 0 20px 34px -18px rgba(36,27,20,.42);
  --sans:ui-rounded,"SF Pro Rounded",-apple-system,BlinkMacSystemFont,"Segoe UI Variable Display","Segoe UI",system-ui,Roboto,"Helvetica Neue",Arial,sans-serif;
  --hand:"Snell Roundhand","SignPainter","Marker Felt","Noteworthy","Chalkboard SE","Bradley Hand","Segoe Print","Comic Sans MS",cursive;
  --measure:66ch;
  --pad:1.15rem;
  --bar-h:64px;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  font-family:var(--sans);
  font-size:1.0625rem;
  line-height:1.62;
  color:var(--ink);
  background-color:var(--paper);
  background-image:
    radial-gradient(circle at 16% 8%,rgba(233,214,190,.55),transparent 42%),
    radial-gradient(circle at 84% 2%,rgba(246,228,216,.6),transparent 46%);
  background-repeat:no-repeat;
  overflow-wrap:break-word;
}

@media (max-width:860px){
  body{padding-bottom:calc(var(--bar-h) + env(safe-area-inset-bottom,0px))}
  html.bottom-bar-hidden body{padding-bottom:0}
}

img,svg{max-width:100%;height:auto}
a{color:var(--accent-dark)}
a:hover{color:var(--accent)}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:6px}

h1,h2,h3,h4{line-height:1.2;margin:0 0 .6rem;font-weight:800;letter-spacing:-.01em}
h1{font-size:clamp(1.72rem,1.2rem + 2.6vw,2.6rem)}
h2{font-size:clamp(1.32rem,1.05rem + 1.3vw,1.85rem);margin-top:0}
h3{font-size:1.1rem}
p{margin:0 0 .85rem;max-width:var(--measure)}
p:last-child{margin-bottom:0}
ul,p,li{max-width:var(--measure)}
ul{padding-left:1.15rem;margin:0 0 .85rem}
li{margin-bottom:.4rem}

.wrap{width:100%;max-width:1080px;margin:0 auto;padding:0 1rem}
@media (min-width:768px){.wrap{padding:0 1.5rem}}

.skip{position:absolute;left:-9999px;top:0;background:var(--card);border:2px solid var(--accent);
      padding:.7rem 1rem;border-radius:0 0 var(--radius-sm) 0;z-index:60;font-weight:700}
.skip:focus{left:0}

/* ---------- header / pill nav ---------- */
.site-head{
  position:sticky;top:0;z-index:40;
  background:rgba(251,247,240,.96);
  border-bottom:2px dashed var(--line);
}
.head-inner{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;padding:.6rem 0}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink);font-weight:800;letter-spacing:-.01em;min-height:44px}
.brand .mark{flex:0 0 auto;width:40px;height:40px;border-radius:50%;background:var(--soft);border:2px solid var(--accent);display:flex;align-items:center;justify-content:center}
.brand span{font-size:1.05rem}
.brand small{display:block;font-weight:600;color:var(--muted);font-size:.76rem;letter-spacing:.02em}

.pillnav{display:none;gap:.4rem;flex-wrap:wrap;align-items:center}
@media (min-width:861px){.pillnav{display:flex}}
.pill{
  display:inline-flex;align-items:center;justify-content:center;gap:.35rem;
  min-height:44px;padding:.5rem 1rem;border-radius:999px;
  background:var(--card);border:1px solid var(--line-strong);
  color:var(--ink);text-decoration:none;font-weight:600;font-size:.95rem;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
.pill:hover,.pill:focus-visible{border-color:var(--accent);color:var(--accent-dark);transform:translateY(-1px) rotate(-.6deg);box-shadow:var(--shadow)}
.pill[aria-current="page"]{background:var(--soft);border-color:var(--accent);color:var(--accent-dark)}
.head-actions{margin-left:auto;display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.lang-switch{display:flex;gap:.25rem;align-items:center}
.lang-switch .pill{min-width:52px;padding:.5rem .7rem}

.menu-disclosure{display:block}
@media (min-width:861px){.menu-disclosure{display:none}}
.menu-disclosure summary{
  list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.4rem;
  min-height:44px;padding:.5rem 1rem;border-radius:999px;background:var(--card);
  border:1px solid var(--line-strong);font-weight:700
}
.menu-disclosure summary::-webkit-details-marker{display:none}
.menu-disclosure[open] summary{background:var(--soft);border-color:var(--accent);color:var(--accent-dark)}
.menu-panel{margin-top:.6rem;display:flex;flex-wrap:wrap;gap:.45rem;padding:.7rem;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.menu-panel .pill{font-size:.9rem}

/* ---------- bottom bar (mobile) ---------- */
.bottom-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:45;
  background:rgba(255,255,255,.98);border-top:2px dashed var(--line-strong);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (min-width:861px){.bottom-bar{display:none}}
html.bottom-bar-hidden .bottom-bar{display:none}
.bb-inner{display:grid;grid-template-columns:repeat(4,1fr);align-items:stretch}
.bb-item{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;
  min-height:var(--bar-h);padding:.35rem .25rem;text-decoration:none;color:var(--ink);
  font-size:.74rem;font-weight:700;letter-spacing:.01em
}
.bb-item svg{width:22px;height:22px;stroke:var(--accent-dark);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.bb-item[aria-current="page"]{background:var(--soft);color:var(--accent-dark)}
.bb-close{
  position:absolute;top:-1.55rem;right:.6rem;min-height:44px;min-width:44px;
  border:1px solid var(--line-strong);background:var(--card);border-radius:999px 999px 0 0;
  font:inherit;font-size:.74rem;font-weight:700;color:var(--muted);cursor:pointer;padding:.2rem .7rem
}

/* ---------- layout helpers ---------- */
main{display:block;padding:1.1rem 0 2rem}
section{margin:0 0 1.6rem}
.stack>*+*{margin-top:1rem}
.grid{display:grid;gap:1rem}
.grid-2{grid-template-columns:1fr}
.grid-3{grid-template-columns:1fr}
@media (min-width:700px){.grid-2{grid-template-columns:1fr 1fr}.grid-3{grid-template-columns:repeat(3,1fr)}}
@media (min-width:980px){
  .grid-2.wide{grid-template-columns:1.15fr .85fr}
  .grid-3{grid-template-columns:repeat(3,1fr)}
}

.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:var(--pad);box-shadow:var(--shadow)
}
.card.soft{background:var(--band)}
.card.quote{background:#FFFDF9}
.lift{transition:transform .18s ease,box-shadow .18s ease}
.lift:hover,.lift:focus-within{transform:translateY(-2px) rotate(-.35deg);box-shadow:var(--shadow-lift)}

.eyebrow{font-family:var(--hand);font-size:1.06rem;color:var(--warm);margin:0 0 .35rem;letter-spacing:.01em}
.lead{font-size:1.12rem;color:var(--ink)}
.muted{color:var(--muted)}
.small{font-size:.9rem}
.tiny{font-size:.82rem}

/* hand-drawn accents — inline SVG data URIs, no network */
.hand-underline{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='12' viewBox='0 0 120 12'%3E%3Cpath d='M2 8c14-6 26 4 40 1s26-8 40-3 26 6 36 1' fill='none' stroke='%23A3431C' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:repeat-x;background-position:0 100%;background-size:120px 12px;padding-bottom:.3em
}
.squiggle{
  height:12px;margin:.4rem 0 1.4rem;border:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='12' viewBox='0 0 80 12'%3E%3Cpath d='M0 7c10-6 18 5 28 1s18-7 28-1 16 5 24 0' fill='none' stroke='%23D9C7B0' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:repeat-x;background-position:0 50%;background-size:80px 12px
}
.hand{
  font-family:var(--hand);font-style:italic;color:var(--warm);font-size:1.04rem;line-height:1.45;
  display:inline-block;transform:rotate(-1.2deg);letter-spacing:.01em;padding-bottom:5px;
  /* hand-drawn underline as an inline SVG stroke — works even where no script face exists */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='6' viewBox='0 0 64 6'%3E%3Cpath d='M1 4c8-3 14 3 22 1s14-4 22-1 12 2 18 0' fill='none' stroke='%238A5A2B' stroke-width='1.6' stroke-linecap='round' opacity='0.55'/%3E%3C/svg%3E");
  background-repeat:repeat-x;background-position:0 100%;background-size:64px 6px
}

/* ---------- hero ---------- */
.hero{
  background:linear-gradient(180deg,#FFFDF8 0%,var(--card) 100%);
  border:1px solid var(--line);border-radius:calc(var(--radius) + 6px);
  box-shadow:var(--shadow);padding:1.3rem 1.15rem 1.4rem
}
@media (min-width:768px){.hero{padding:1.9rem 1.9rem 2rem}}
.hero-grid{display:grid;gap:1.2rem}
@media (min-width:980px){.hero-grid{grid-template-columns:1.08fr .92fr;align-items:center}}
.hero h1{margin-bottom:.7rem}
.hero .cta-row{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem}
.storefront{display:block;width:100%;height:auto;border-radius:var(--radius);border:1px solid var(--line);background:#FFF9F0}
.hero-tagline{margin-top:.4rem;color:var(--muted);font-size:.95rem}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:48px;padding:.75rem 1.25rem;border-radius:999px;
  font:inherit;font-weight:700;text-decoration:none;text-align:center;
  border:2px solid var(--ink);background:var(--ink);color:#FFF9F0;cursor:pointer;
  transition:transform .16s ease,box-shadow .16s ease
}
.btn:hover,.btn:focus-visible{color:#FFF9F0;transform:translateY(-1px) rotate(-.5deg);box-shadow:var(--shadow-lift)}
.btn-accent{background:var(--accent);border-color:var(--accent)}
.btn-accent:hover,.btn-accent:focus-visible{background:var(--accent-dark);border-color:var(--accent-dark)}
.btn-ghost{background:var(--card);color:var(--ink)}
.btn-ghost:hover,.btn-ghost:focus-visible{color:var(--accent-dark)}
.btn-sm{min-height:44px;padding:.5rem 1rem;font-size:.92rem}
.btn svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- facts strip ---------- */
.facts{display:grid;gap:.7rem;grid-template-columns:1fr}
@media (min-width:640px){.facts{grid-template-columns:repeat(3,1fr)}}
.fact{background:var(--band);border:1px solid var(--line);border-radius:var(--radius);padding:.85rem 1rem}
.fact dt{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700}
.fact dd{margin:.15rem 0 0;font-weight:700}
.fact dd .hand{font-weight:400}

/* ---------- badges ---------- */
.badge{display:inline-block;border-radius:999px;padding:.22rem .68rem;font-size:.82rem;font-weight:700;line-height:1.5}
.badge-onrequest{background:var(--soft);color:var(--accent-dark);border:1px dashed var(--accent)}
.badge-exact{background:var(--green-bg);color:var(--green);border:1px solid var(--green-line)}
.badge-open{background:var(--green-bg);color:var(--green);border:1px solid var(--green-line)}
.badge-closed{background:#EFEAE3;color:var(--muted);border:1px solid var(--line-strong)}

/* ---------- counter price list ---------- */
.counter{border-radius:calc(var(--radius) + 6px);border:1px solid var(--line);background:var(--card);box-shadow:var(--shadow);overflow:hidden}
.counter-head{padding:1rem 1.15rem;border-bottom:2px dashed var(--line);background:var(--band)}
.counter-head h2{margin:0}
.counter-list{list-style:none;margin:0;padding:0}
.counter-row{
  display:grid;grid-template-columns:1fr;gap:.3rem;min-width:0;
  padding:.85rem 1.15rem;border-bottom:1px dashed var(--line);position:relative
}
.counter-row:last-child{border-bottom:0}
.counter-row>*{min-width:0}
.counter-row .label{font-weight:700}
.counter-row .leader{display:none}
.counter-row .price{text-align:left;font-weight:800}
.counter-row .hand-row{grid-column:1 / -1}
.counter-row .hand{margin-top:.15rem}
@media (min-width:620px){
  .counter-row{grid-template-columns:minmax(0,1fr) auto;align-items:baseline;column-gap:1rem}
  .counter-row .price{text-align:right;white-space:nowrap}
  .counter-row .price .badge{white-space:normal}
}
.counter-row.exact{background:#FAFDFB}
.counter-foot{padding:.9rem 1.15rem;background:#FFFDF8;border-top:2px dashed var(--line)}

/* ---------- generic tables ---------- */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radius);border:1px solid var(--line);background:var(--card)}
table{border-collapse:collapse;width:100%;font-size:.97rem}
caption{text-align:left;padding:.8rem 1.15rem;color:var(--muted);font-size:.9rem}
th,td{padding:.7rem .8rem;text-align:left;vertical-align:top;border-bottom:1px dashed var(--line)}
thead th{background:var(--band);font-size:.82rem;text-transform:uppercase;letter-spacing:.05em}
tbody tr:last-child td{border-bottom:0}
@media (max-width:700px){
  .table-wrap{border:0;background:transparent;overflow:visible}
  table,thead,tbody,tr,td,th{display:block;width:100%}
  thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  tbody tr{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:.7rem;padding:.3rem .1rem}
  td{border-bottom:1px dashed var(--line);display:flex;gap:.8rem;justify-content:space-between}
  td:last-child{border-bottom:0}
  td::before{content:attr(data-th);font-weight:700;color:var(--muted);font-size:.82rem;text-transform:uppercase;letter-spacing:.04em;flex:0 0 42%}
}

/* ---------- steps ---------- */
.steps{list-style:none;margin:0;padding:0;counter-reset:step}
.step{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:1rem 1.15rem 1rem 3.4rem;margin-bottom:.8rem;box-shadow:var(--shadow)}
.step::before{
  counter-increment:step;content:counter(step);
  position:absolute;left:.85rem;top:.9rem;width:2.1rem;height:2.1rem;border-radius:50%;
  background:var(--soft);border:1px dashed var(--accent);color:var(--accent-dark);
  display:flex;align-items:center;justify-content:center;font-weight:800
}
.step h3{margin-bottom:.25rem}

/* ---------- quotes ---------- */
.quotes{display:grid;gap:1rem;grid-template-columns:1fr}
@media (min-width:700px){.quotes{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.quotes.three{grid-template-columns:repeat(3,1fr)}}
.quote-card{background:#FFFDF9;border:1px solid var(--line);border-radius:var(--radius);padding:1rem 1.15rem;box-shadow:var(--shadow);position:relative}
.quote-card blockquote{margin:0 0 .6rem;font-size:1rem}
.quote-card cite{display:block;font-style:normal;font-weight:700;font-size:.92rem}
.stars{color:var(--warm);letter-spacing:.12em;font-size:.95rem}

/* ---------- finder widget ---------- */
.finder{background:var(--card);border:2px solid var(--line-strong);border-radius:calc(var(--radius) + 6px);box-shadow:var(--shadow);padding:1.15rem;position:relative;overflow:hidden}
.finder::after{
  content:"";position:absolute;inset:6px;border:1px dashed var(--line-strong);border-radius:calc(var(--radius));
  pointer-events:none
}
.finder h2,.finder h3{position:relative;z-index:1}
.finder-fields{position:relative;z-index:1;display:grid;gap:.7rem;margin:.9rem 0}
@media (min-width:760px){.finder-fields{grid-template-columns:1fr 1fr 1fr auto;align-items:end}}
.field{display:flex;flex-direction:column;gap:.3rem}
.field label{font-weight:700;font-size:.9rem}
select,input[type=text],input[type=tel],input[type=email],textarea{
  font:inherit;font-size:1rem;padding:.65rem .75rem;border-radius:var(--radius-sm);
  border:1px solid var(--line-strong);background:#FFFDF9;color:var(--ink);width:100%;min-height:44px
}
textarea{min-height:7.5rem;resize:vertical}
.finder-result{position:relative;z-index:1;border-radius:var(--radius);border:1px dashed var(--line-strong);background:#FFFDF8;padding:1rem}
.finder-result .state{display:none}
.finder-result[data-state="loading"] .state-loading,
.finder-result[data-state="empty"] .state-empty,
.finder-result[data-state="onrequest"] .state-onrequest,
.finder-result[data-state="exact"] .state-exact,
.finder-result[data-state="error"] .state-error{display:block}
.finder-result[data-state="loading"]{color:var(--muted)}
.price-out{font-size:1.7rem;font-weight:800;margin:.1rem 0 .3rem}
.price-out .badge{margin-left:.4rem;vertical-align:middle}
.progress-dots{display:flex;gap:.35rem;align-items:center;margin:.2rem 0 .5rem}
.progress-dots i{width:.6rem;height:.6rem;border-radius:50%;background:var(--line-strong);display:block}
.progress-dots i.on{background:var(--accent)}

/* ---------- ask-us card ---------- */
.askcard{
  background:linear-gradient(180deg,#FFF6EF 0%,#FCEADA 100%);
  border:2px dashed var(--accent);border-radius:calc(var(--radius) + 6px);
  padding:1.25rem;box-shadow:var(--shadow)
}
.askcard h2{margin-bottom:.4rem}
.askcard .cta-row{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.9rem}

/* ---------- honest notes ---------- */
.honest{background:#FCF8F1;border-left:6px solid var(--warm);border-radius:var(--radius-sm);padding:.9rem 1rem}
.honest h2,.honest h3{margin-bottom:.35rem}

/* ---------- contact / nap ---------- */
.nap-grid{display:grid;gap:.9rem;grid-template-columns:1fr}
@media (min-width:700px){.nap-grid{grid-template-columns:1fr 1fr}}
.hours{list-style:none;margin:0;padding:0}
.hours li{display:flex;justify-content:space-between;gap:1rem;padding:.35rem 0;border-bottom:1px dashed var(--line)}
.hours li:last-child{border-bottom:0}
.addr{margin:0 0 .8rem}
.addr strong{display:block}

/* ---------- breadcrumbs ---------- */
.crumbs{margin:.2rem 0 1rem;font-size:.88rem;color:var(--muted)}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.35rem;margin:0;padding:0}
.crumbs li::after{content:"›";margin-left:.35rem;color:var(--line-strong)}
.crumbs li:last-child::after{content:""}
.crumbs a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.crumbs [aria-current="page"]{color:var(--ink);font-weight:700}

/* ---------- footer ---------- */
.site-foot{
  margin-top:1.5rem;border-top:2px dashed var(--line-strong);background:#FFFDF8;padding:1.4rem 0 2rem
}
.foot-grid{display:grid;gap:1.1rem;grid-template-columns:1fr}
@media (min-width:700px){.foot-grid{grid-template-columns:1.2fr 1fr 1fr}}
.foot-grid h2{font-size:1rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.foot-links{list-style:none;margin:0;padding:0}
.foot-links li{margin-bottom:.4rem}
.notice{background:var(--soft);border:1px dashed var(--accent);border-radius:var(--radius-sm);padding:.8rem 1rem;font-size:.88rem;color:var(--accent-dark)}

/* ---------- q&a details / definition lists ---------- */
.qa{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:var(--shadow)}
.qa summary{
  cursor:pointer;font-weight:700;min-height:44px;padding:.8rem 1rem;list-style:none;
  display:flex;align-items:center;gap:.6rem;border-radius:var(--radius-sm)
}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"＋";margin-left:auto;color:var(--accent);font-weight:800;font-size:1.05rem}
.qa[open] summary::after{content:"−"}
.qa p{padding:0 1rem .9rem;margin:0}
.qa[open]{background:#FFFDF9;border-color:var(--line-strong)}

.kv{margin:0}
.kvi{border-bottom:1px dashed var(--line);padding:.55rem 0}
.kvi:last-child{border-bottom:0}
.kv dt{font-weight:700}
.kv dd{margin:.15rem 0 0;color:var(--muted)}

figure.quote-card{margin:0}
figure.quote-card blockquote{margin:0 0 .6rem}
figure.quote-card cite{font-style:normal}

/* ---------- utility ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.center{text-align:center}
.nowrap{white-space:nowrap}
.tagline-row{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center}
.chip{background:var(--card);border:1px solid var(--line-strong);border-radius:999px;padding:.3rem .8rem;font-size:.88rem;font-weight:600}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  .lift:hover,.lift:focus-within,.pill:hover,.pill:focus-visible,.btn:hover,.btn:focus-visible{transform:none}
  .hand{transform:none}
}