/* --- 0. Quicksand, self-hosted. One variable file, weights 300-700. ------
   Licensed under the SIL Open Font License, see assets/fonts/. */
@font-face{
  font-family:'Quicksand';
  src:url('../fonts/quicksand-var.woff2') format('woff2');
  font-weight:300 700;
  font-style:normal;
  font-display:swap;
}

/* ==========================================================================
   KKLABELS — main.css
   Design direction: "Selvedge" — the visual language of the loom.
   Warp lines, woven tape textures, factory spec plates, madder-red thread.
   ========================================================================== */

/* --- 1. Tokens ---------------------------------------------------------- */
:root{
  --paper:#FBFAF8;
  --paper-2:#F3F0EA;
  --ink:#17181B;
  --ink-2:#33353B;
  --weft:#6B6862;
  --rule:#E3DED4;
  --thread:#A32A21;
  --thread-dk:#84201A;
  --thread-tint:#FBEFEC;
  --wa:#25D366;                   /* official WhatsApp green */
  --wa-dk:#128C7E;
  --wa-text:#0E7A63;
  --tape:#14161A;

  --f-display:'Quicksand',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --f-body:'Quicksand',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --f-mono:'Quicksand',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  --wrap:1180px;
  --gut:clamp(1.15rem,4vw,2.5rem);
  --r-xs:8px;                     /* small controls */
  --r:14px;                       /* cards, panels, buttons */
  --r-lg:22px;                    /* hero figure, map, large blocks */
  --r-pill:999px;                 /* fully rounded */
  --shadow:0 2px 4px rgba(23,24,27,.04),0 14px 34px -14px rgba(23,24,27,.20);
  --ease:cubic-bezier(.4,0,.2,1);
}

/* A real plain-weave: warp threads crossing weft threads. Used sparingly. */
.weave{
  background-image:
    repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 1px,transparent 1px 4px),
    repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 4px);
}

/* --- 2. Reset ----------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f-body);font-size:1.075rem;font-weight:500;line-height:1.7;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg,iframe{max-width:100%;display:block}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:700;line-height:1.16;letter-spacing:-.005em;margin:0}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}

:focus-visible{outline:2.5px solid var(--thread);outline-offset:3px;border-radius:var(--r-xs)}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:#fff;padding:.75rem 1.25rem}
.skip:focus{left:.5rem;top:.5rem}

/* --- 3. Shared type patterns -------------------------------------------- */
.eyebrow{
  font-family:var(--f-display);font-size:.74rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--thread);
  margin:0 0 .85rem;display:flex;align-items:center;gap:.7rem;
}
.eyebrow::after{content:'';flex:1;height:1px;background:var(--rule);max-width:5rem}
.eyebrow--light{color:#D8998F}
.eyebrow--light::after{background:rgba(255,255,255,.2)}

.h-xl{font-size:clamp(2.3rem,5.6vw,4rem)}
.h-lg{font-size:clamp(1.85rem,3.6vw,2.7rem)}
.h-md{font-size:clamp(1.35rem,2.2vw,1.7rem)}

.lede{font-size:clamp(1.08rem,1.6vw,1.24rem);color:var(--ink-2);line-height:1.6}
.muted{color:var(--weft)}

/* --- 4. Buttons --------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--f-display);font-weight:700;font-size:.95rem;letter-spacing:.01em;
  padding:.78rem 1.5rem;border-radius:var(--r-pill);border:1.5px solid transparent;
  cursor:pointer;transition:background .18s var(--ease),color .18s var(--ease),
    border-color .18s var(--ease),transform .18s var(--ease);
  white-space:nowrap;
}
.btn--solid{background:var(--thread);color:#fff;border-color:var(--thread)}
.btn--solid:hover{background:var(--thread-dk);border-color:var(--thread-dk);transform:translateY(-1px)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--rule)}
.btn--ghost:hover{border-color:var(--ink);transform:translateY(-1px)}
.btn--onDark{color:#fff;border-color:rgba(255,255,255,.32)}
.btn--onDark:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.btn--lg{padding:.95rem 2rem;font-size:1.02rem}

/* --- 5. Top bar --------------------------------------------------------- */
.topbar{background:var(--tape);color:#B9B5AC;font-size:.8rem}
.topbar__in{display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:38px}
.topbar__spec{font-family:var(--f-display);font-weight:500;letter-spacing:.03em}
.topbar__links{display:flex;align-items:center;gap:.85rem;font-family:var(--f-display);font-weight:600}
.topbar__links a{transition:color .15s var(--ease)}
.topbar__links a:hover{color:#fff}
.topbar__sep{width:1px;height:12px;background:rgba(255,255,255,.18)}
/* The dark strip is desktop only. On phones and small tablets the header
   already carries the quote button, the WhatsApp button and the floating
   WhatsApp circle, so the bar was one call-to-action too many.
   To bring it back, change 960px below to a smaller number such as 640px,
   or delete this rule entirely. */
@media(max-width:960px){
  .topbar{display:none}
}

/* --- 6. Header + navigation --------------------------------------------- */
.site-head{
  position:sticky;top:0;z-index:60;background:var(--paper);
  border-bottom:1px solid var(--rule);
}
/* The frosted-glass effect is applied ONLY on desktop. An element with
   backdrop-filter becomes the containing block for position:fixed children,
   which would trap the mobile menu drawer inside the header. */
@media(min-width:961px){
  .site-head{
    background:rgba(251,250,248,.94);
    backdrop-filter:saturate(180%) blur(12px);
  }
}
.site-head__in{display:flex;align-items:center;gap:1.5rem;min-height:74px}
.logo{flex:0 0 auto}
.logo img{width:auto;height:42px;object-fit:contain}

.nav{display:flex;align-items:center;gap:1.5rem;margin-left:auto}
.nav__list{display:flex;align-items:center;gap:.2rem}
.nav__item{position:relative}
.nav__link{
  display:block;padding:.55rem .8rem;font-family:var(--f-display);font-weight:600;
  font-size:.94rem;color:var(--ink-2);border-radius:var(--r-xs);position:relative;
  transition:color .16s var(--ease);
}
.nav__link::after{
  content:'';position:absolute;left:.7rem;right:.7rem;bottom:.28rem;height:2px;
  background:var(--thread);transform:scaleX(0);transform-origin:left;
  transition:transform .22s var(--ease);
}
.nav__link:hover,.nav__link.is-current{color:var(--ink)}
.nav__link:hover::after,.nav__link.is-current::after{transform:scaleX(1)}
.nav__toggle{display:none}

.nav__sub{
  position:absolute;top:100%;left:0;min-width:214px;background:#fff;
  border:1px solid var(--rule);border-radius:var(--r);box-shadow:var(--shadow);
  padding:.5rem;opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s;
}
.nav__sub::before{content:'';position:absolute;top:-4px;left:0;right:0;height:4px}
.has-sub:hover .nav__sub,.has-sub:focus-within .nav__sub{opacity:1;visibility:visible;transform:translateY(0)}
.nav__sub a{
  display:block;padding:.6rem .8rem;font-size:.92rem;color:var(--ink-2);border-radius:var(--r-xs);
  transition:background .14s var(--ease),color .14s var(--ease);
}
.nav__sub a:hover,.nav__sub a[aria-current]{background:var(--thread-tint);color:var(--thread)}
.has-sub > .nav__link{padding-right:1.25rem}
.has-sub > .nav__link::before{
  content:'';position:absolute;right:.45rem;top:50%;width:5px;height:5px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-70%) rotate(45deg);opacity:.55;
}
.nav__cta{display:flex;gap:.6rem}

.burger{
  display:none;width:46px;height:46px;margin-left:auto;background:none;
  border:1.5px solid var(--rule);border-radius:var(--r-pill);padding:0;cursor:pointer;
}
.burger span{display:block;width:19px;height:1.8px;background:var(--ink);margin:4px auto;transition:transform .25s var(--ease),opacity .2s var(--ease)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5.8px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.8px) rotate(-45deg)}

@media(max-width:1080px){
  .nav__cta .btn--ghost{display:none}
  .nav__link{font-size:.87rem;padding:.55rem .5rem}
}
@media(max-width:960px){
  /* --- Mobile header: logo centred, menu button on the right --- */
  .site-head__in{position:relative;justify-content:center;min-height:66px;gap:0}
  .logo{margin-inline:auto}
  .logo img{height:38px}
  /* The close button has to sit ABOVE the open drawer, or it is buried
     underneath it and there is no visible way to shut the menu. */
  /* The close button sits above the open drawer, otherwise it is buried
     underneath it and there is no visible way to shut the menu. */
  .burger{
    display:block;position:absolute;right:var(--gut);top:50%;
    transform:translateY(-50%);margin-left:0;z-index:3;
    background:var(--paper);
  }
  /* position:sticky always creates a stacking context, so the drawer, the
     dark overlay and the close button are layered relative to each other
     INSIDE the header. main.js places the overlay there for this reason. */
  .nav{z-index:2}
  .nav{
    position:fixed;inset:0 0 0 auto;width:min(340px,86vw);background:var(--paper);
    border-left:1px solid var(--rule);flex-direction:column;align-items:stretch;
    gap:0;overflow-y:auto;transform:translateX(101%);
    padding:1.25rem 1.25rem calc(2rem + env(safe-area-inset-bottom,0px));
    padding-top:calc(1.25rem + env(safe-area-inset-top,0px));
    transition:transform .3s var(--ease);box-shadow:-20px 0 40px -30px rgba(0,0,0,.5);
  }
  .nav.is-open{transform:translateX(0)}
  .nav__list{flex-direction:column;align-items:stretch;gap:0;flex:0 0 auto}
  .nav__item{border-bottom:1px solid var(--rule);flex:0 0 auto}
  .nav__link{padding:.95rem .25rem;font-size:1.02rem}
  .nav__link::after{display:none}
  .has-sub > .nav__link::before{display:none}
  .nav__toggle{
    display:block;position:absolute;right:0;top:.35rem;width:44px;height:44px;
    background:none;border:0;cursor:pointer;
  }
  .nav__toggle::before,.nav__toggle::after{
    content:'';position:absolute;left:50%;top:50%;background:var(--ink-2);
    transform:translate(-50%,-50%);transition:opacity .2s var(--ease);
  }
  .nav__toggle::before{width:13px;height:1.6px}
  .nav__toggle::after{width:1.6px;height:13px}
  .nav__toggle[aria-expanded="true"]::after{opacity:0}
  .nav__sub{
    position:static;opacity:1;visibility:visible;transform:none;border:0;
    box-shadow:none;background:transparent;padding:0 0 .6rem .25rem;
    display:none;
  }
  .nav__sub.is-open{display:block}
  .nav__sub a{padding:.55rem 0 .55rem .9rem;border-left:2px solid var(--rule)}
  .nav__cta{margin-top:1.4rem;flex-direction:column}
  .nav__cta .btn{width:100%}
  .nav__cta .btn--ghost{display:inline-flex}
}
.scrim{
  position:fixed;inset:0;background:rgba(20,22,26,.45);z-index:1;
  opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s;
}
.scrim.is-on{opacity:1;visibility:visible}
body.is-locked{overflow:hidden}

/* --- 7. Breadcrumbs ----------------------------------------------------- */
.crumbs{border-bottom:1px solid var(--rule);background:var(--paper)}
.crumbs ol{display:flex;flex-wrap:wrap;gap:.5rem;padding:.75rem 0;font-family:var(--f-display);font-weight:600;font-size:.78rem;letter-spacing:.04em;color:var(--weft)}
.crumbs li+li::before{content:'/';margin-right:.5rem;opacity:.5}
.crumbs a{transition:color .15s var(--ease)}
.crumbs a:hover{color:var(--thread)}
.crumbs [aria-current]{color:var(--ink)}

/* --- 8. Hero ------------------------------------------------------------ */
.hero{background:var(--tape);color:#fff;position:relative;overflow:hidden}
.hero::before{
  content:'';position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:
    repeating-linear-gradient(90deg,rgba(255,255,255,.045) 0 1px,transparent 1px 5px),
    repeating-linear-gradient(0deg,rgba(0,0,0,.3) 0 1px,transparent 1px 5px);
}
.hero__in{
  position:relative;display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(2rem,5vw,4rem);align-items:center;
  padding-block:clamp(3rem,7vw,5.5rem);
}
.hero h1{font-size:clamp(2.2rem,5vw,3.7rem);letter-spacing:-.015em;line-height:1.12}
.hero h1 em{font-style:normal;color:#E5867A}
.hero__p{margin-top:1.15rem;font-size:clamp(1.02rem,1.5vw,1.2rem);color:#B9B5AC;max-width:34ch;line-height:1.6}
.hero__actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
.hero__fig{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid rgba(255,255,255,.12)}
.hero__fig img{width:100%;aspect-ratio:4/3;object-fit:cover}
.hero__stamp{
  position:absolute;left:1rem;bottom:1rem;border-radius:var(--r-pill);background:var(--thread);color:#fff;
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  padding:.45rem 1rem;
}
@media(max-width:860px){
  .hero__in{grid-template-columns:1fr;padding-block:2.75rem 0}
  .hero__fig{margin-inline:calc(var(--gut)*-1);border-radius:0;border-inline:0;border-bottom:0}
  .hero__fig img{aspect-ratio:16/10}
}

/* --- 9. Spec strip — the signature element ------------------------------ */
.specs{background:var(--paper-2);border-bottom:1px solid var(--rule)}
.specs__in{display:grid;grid-template-columns:repeat(4,1fr)}
.spec{padding:1.25rem 0 1.35rem;position:relative}
.spec+.spec{padding-left:clamp(.9rem,2.5vw,2rem)}
.spec+.spec::before{content:'';position:absolute;left:0;top:1.25rem;bottom:1.35rem;width:1px;background:var(--rule)}
.spec dt{font-family:var(--f-display);font-size:.7rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--weft)}
.spec dd{margin:.35rem 0 0;font-family:var(--f-display);font-weight:700;font-size:clamp(1.15rem,2.3vw,1.6rem);letter-spacing:-.01em}
@media(max-width:640px){
  .specs__in{grid-template-columns:1fr 1fr}
  .spec:nth-child(odd)+.spec::before{content:''}
  .spec:nth-child(3)::before,.spec:nth-child(3){border-top:1px solid var(--rule)}
  .spec:nth-child(4){border-top:1px solid var(--rule)}
  .spec:nth-child(3){padding-left:0}
  .spec:nth-child(3)::before{display:none}
}

/* --- 10. Sections ------------------------------------------------------- */
.sec{padding-block:clamp(3.25rem,7vw,5.5rem)}
.sec--tint{background:var(--paper-2)}
.sec--rule{border-top:1px solid var(--rule)}
.sec__head{max-width:62ch;margin-bottom:clamp(1.75rem,4vw,2.75rem)}
.sec__head .lede{margin-top:.9rem}

/* Two-column editorial split: 7 / 5, not centred */
.split{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(2rem,5vw,4rem);align-items:start}
.split--rev{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
@media(max-width:900px){.split,.split--rev{grid-template-columns:1fr}}

/* --- 11. Prose ---------------------------------------------------------- */
.prose > * + *{margin-top:1.15rem}
.prose h2{font-size:clamp(1.5rem,2.6vw,2.05rem);margin-top:2.5rem}
.prose h3{font-size:clamp(1.12rem,1.8vw,1.3rem);margin-top:2rem;font-weight:600}
.prose h2:first-child,.prose h3:first-child{margin-top:0}
.prose p{color:var(--ink-2)}
.prose a{color:var(--thread);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px;text-decoration-color:rgba(163,42,33,.35);transition:text-decoration-color .16s var(--ease)}
.prose a:hover{text-decoration-color:var(--thread)}
.prose strong{font-weight:600;color:var(--ink)}
.prose ul{display:grid;gap:.6rem}
.prose ul li{position:relative;padding-left:1.5rem;color:var(--ink-2)}
.prose ul li::before{
  content:'';position:absolute;left:0;top:.62em;width:9px;height:2px;background:var(--thread);
}

/* --- 12. Cards ---------------------------------------------------------- */
.grid{display:grid;gap:clamp(1rem,2vw,1.5rem)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}
@media(max-width:900px){.grid--4{grid-template-columns:repeat(2,1fr)}.grid--3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.grid--4,.grid--3,.grid--2{grid-template-columns:1fr}}

.card{
  background:#fff;border:1px solid var(--rule);border-radius:var(--r);
  padding:1.65rem;display:flex;flex-direction:column;gap:.7rem;
  transition:border-color .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease);
}
.card:hover{border-color:var(--ink);transform:translateY(-3px);box-shadow:var(--shadow)}
.card__n{font-family:var(--f-display);font-size:.7rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--thread)}
.card h3{font-size:1.16rem;font-weight:600;letter-spacing:-.015em}
.card p{color:var(--weft);font-size:.95rem;line-height:1.6}
.card__more{margin-top:auto;padding-top:.6rem;font-family:var(--f-display);font-weight:600;font-size:.88rem;color:var(--thread);display:inline-flex;align-items:center;gap:.35rem}
.card__more::after{content:'→';transition:transform .2s var(--ease)}
.card:hover .card__more::after{transform:translateX(3px)}

/* Product card with image */
.pcard{background:#fff;border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;transition:border-color .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease)}
.pcard:hover{border-color:var(--ink);transform:translateY(-3px);box-shadow:var(--shadow)}
.pcard__img{aspect-ratio:4/3;background:var(--paper-2);overflow:hidden}
.pcard__img img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.pcard:hover .pcard__img img{transform:scale(1.04)}
.pcard__body{padding:1.25rem 1.35rem 1.5rem;display:flex;flex-direction:column;gap:.55rem;flex:1}
.pcard__body h3{font-size:1.12rem;font-weight:600}
.pcard__body p{font-size:.92rem;color:var(--weft);line-height:1.6}

/* Fabric / feature list with a woven rule */
.feat{border-top:1px solid var(--rule);padding-top:1.35rem;display:grid;gap:.55rem}
.feat h3{font-size:1.1rem;font-weight:600}
.feat p{color:var(--weft);font-size:.96rem}

/* --- 13. FAQ ------------------------------------------------------------ */
.faq{border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{
  list-style:none;cursor:pointer;padding:1.15rem 2.5rem 1.15rem 0;position:relative;
  font-family:var(--f-display);font-weight:600;font-size:1.02rem;line-height:1.45;
  transition:color .16s var(--ease);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--thread)}
.faq summary::after,.faq summary::before{
  content:'';position:absolute;right:.4rem;top:50%;background:var(--thread);
  transition:transform .25s var(--ease),opacity .25s var(--ease);
}
.faq summary::before{width:13px;height:1.8px;transform:translate(0,-50%)}
.faq summary::after{width:1.8px;height:13px;transform:translate(-5.6px,-50%)}
.faq details[open] summary::after{opacity:0}
.faq details[open] summary{color:var(--thread)}
.faq__a{padding:0 0 1.35rem;color:var(--ink-2);max-width:78ch}
.faq__a p+p{margin-top:.9rem}

/* --- 14. CTA band ------------------------------------------------------- */
.cta-band{background:var(--tape);color:#fff;position:relative;overflow:hidden}
.cta-band::before{
  content:'';position:absolute;inset:0;opacity:.45;
  background-image:
    repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 5px),
    repeating-linear-gradient(0deg,rgba(0,0,0,.3) 0 1px,transparent 1px 5px);
}
.cta-band__in{
  position:relative;display:flex;flex-wrap:wrap;gap:2rem;align-items:center;
  justify-content:space-between;padding-block:clamp(2.5rem,5vw,3.75rem);
}
.cta-band__h{font-size:clamp(1.6rem,3.2vw,2.35rem);max-width:20ch}
.cta-band__p{margin-top:.85rem;color:#B9B5AC;max-width:44ch;font-size:.98rem}
.cta-band__actions{display:flex;flex-wrap:wrap;gap:.75rem}

/* --- 15. Footer --------------------------------------------------------- */
.site-foot{background:var(--paper-2);border-top:1px solid var(--rule);padding-top:clamp(2.75rem,5vw,4rem)}
.site-foot__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.5fr;gap:clamp(1.75rem,4vw,3rem)}
.site-foot__brand img{height:40px;width:auto;object-fit:contain}
.site-foot__blurb{margin:1rem 0 1.5rem;color:var(--weft);font-size:.94rem;max-width:34ch;line-height:1.6}
.site-foot__col h3{
  font-family:var(--f-display);font-size:.72rem;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--weft);margin-bottom:1rem;
}
.site-foot__col ul{display:grid;gap:.55rem}
.site-foot__col a{font-size:.94rem;color:var(--ink-2);transition:color .15s var(--ease)}
.site-foot__col a:hover{color:var(--thread)}
.site-foot__addr{font-style:normal;font-size:.92rem;color:var(--weft);line-height:1.6}
.site-foot__legal{margin-bottom:.7rem;color:var(--ink-2)}
.site-foot__legal strong{font-size:.86rem}
.site-foot__contact{margin-top:1rem;display:grid;gap:.45rem}
.site-foot__contact span{font-family:var(--f-display);font-weight:600;font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;color:var(--weft);margin-left:.35rem}
.site-foot__contact .nolink{color:var(--ink-2)}
.site-foot__hours{margin-top:1rem;display:grid;gap:.3rem;font-size:.86rem}
.site-foot__base{
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;
  margin-top:clamp(2rem,4vw,3rem);padding-block:1.35rem;border-top:1px solid var(--rule);
  font-size:.85rem;color:var(--weft);
}
.site-foot__social a{display:inline-flex;align-items:center;gap:.45rem;transition:color .15s var(--ease)}
.site-foot__social a:hover{color:var(--thread)}
@media(max-width:900px){.site-foot__grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.site-foot__grid{grid-template-columns:1fr}}

/* ============================================================================
   16. THE FLOATING WHATSAPP BUTTON
   ----------------------------------------------------------------------------
   The green circle in the bottom-right corner, on every page including mobile.

   TO MOVE IT           change  right  and  bottom  below
   TO RESIZE IT         change  width  and  height  (keep them equal)
   TO HIDE IT ON PHONES add     display:none        inside the mobile block
                                at the very bottom of this section
   TO REMOVE IT ENTIRELY delete the <a class="wa-float"> line near the end of
                        every page file
   ========================================================================== */
.wa-float{
  position:fixed;right:1rem;z-index:50;width:56px;height:56px;
  bottom:calc(1rem + env(safe-area-inset-bottom,0px));
  display:grid;place-items:center;border-radius:50%;
  background:var(--wa);color:#fff;
  box-shadow:0 4px 14px rgba(37,211,102,.45),0 0 0 4px rgba(37,211,102,.14);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease);
}
.wa-float:hover,.wa-float:focus-visible{
  transform:scale(1.07);
  box-shadow:0 6px 20px rgba(37,211,102,.55),0 0 0 6px rgba(37,211,102,.18);
}

/* Any button pointing at WhatsApp picks up the brand green automatically,
   wherever it appears. No need to add a class in the HTML. */
.btn[href*="wa.me"]{color:var(--wa-text);border-color:var(--wa)}
.btn[href*="wa.me"]:hover{background:var(--wa);border-color:var(--wa);color:#fff}
.btn--onDark[href*="wa.me"]{color:#6BE79B;border-color:rgba(37,211,102,.55)}
.btn--onDark[href*="wa.me"]:hover{background:var(--wa);border-color:var(--wa);color:#fff}
.site-head__in{border-radius:0}
/* Phones: slightly smaller, and lifted clear of the iPhone home bar. */
@media(max-width:640px){
  .wa-float{
    width:52px;height:52px;
    right:.9rem;
    bottom:calc(.9rem + env(safe-area-inset-bottom,0px));
    /* To hide it on phones, uncomment the next line:  */
    /* display:none; */
  }
}

/* --- 17. Forms ---------------------------------------------------------- */
.form{background:#fff;border:1px solid var(--rule);border-radius:var(--r-lg);padding:clamp(1.5rem,3vw,2.4rem)}
.field{display:grid;gap:.4rem;margin-bottom:1.15rem}
.field > label{font-family:var(--f-display);font-weight:600;font-size:.88rem}
.field small{color:var(--weft);font-weight:400;font-family:var(--f-body)}
.field input[type=text],.field input[type=email],.field input[type=tel],
.field select,.field textarea,.field input[type=file]{
  width:100%;padding:.72rem .85rem;font:inherit;font-size:.98rem;color:var(--ink);
  background:var(--paper);border:1.5px solid var(--rule);border-radius:var(--r-xs);
  transition:border-color .16s var(--ease),background .16s var(--ease);
}
.field textarea{min-height:150px;resize:vertical;border-radius:var(--r)!important}
.field :is(input,select,textarea):focus{border-color:var(--thread);background:#fff;outline:none}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236B6862' d='M6 8 0 0h12z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .9rem center;padding-right:2.2rem}
.field--2{display:grid;grid-template-columns:1fr 1fr;gap:1.15rem}
@media(max-width:600px){.field--2{grid-template-columns:1fr}}

.choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.5rem}
.choice{position:relative}
.choice input{position:absolute;opacity:0;width:0;height:0}
.choice span{
  display:block;padding:.75rem 1rem;border:1.5px solid var(--rule);border-radius:var(--r-pill);
  font-size:.93rem;cursor:pointer;text-align:center;transition:all .16s var(--ease);background:var(--paper);
}
.choice input:checked + span{border-color:var(--thread);background:var(--thread-tint);color:var(--thread);font-weight:600}
.choice input:focus-visible + span{outline:2.5px solid var(--thread);outline-offset:2px}

.note{padding:1rem 1.2rem;border-radius:var(--r-xs);font-size:.94rem;margin-bottom:1.25rem}
.note--ok{background:#EAF7EE;border:1px solid #B7E0C4;color:#1E6B39}
.note--err{background:var(--thread-tint);border:1px solid #EBC1BB;color:var(--thread-dk)}
.hp{position:absolute;left:-9999px}

.map{border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden;aspect-ratio:16/9}
.map iframe{width:100%;height:100%;border:0}

/* --- 18. Motion --------------------------------------------------------- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}

/* --- 19. Current page + region highlighting (set by body/html class) ------ */
.page-about   .nav-about,
.page-woven   .nav-woven,
.page-heat    .nav-heat,
.page-printed .nav-printed,
.page-contact .nav-contact{color:var(--ink)}
.page-about   .nav-about::after,
.page-woven   .nav-woven::after,
.page-heat    .nav-heat::after,
.page-printed .nav-printed::after,
.page-contact .nav-contact::after{transform:scaleX(1)}