/* ArtisRaw theme.css — auto-generated. Edit files in css/ only. */

/* === tokens.css === */
/* ==========================================================================
   ArtisRaw — Design Tokens (SPEC §5.1)
   SINGLE SOURCE OF TRUTH. No raw colors, sizes or spacing anywhere else.
   Every other stylesheet references var(--token) only.
   ========================================================================== */

/* --- Self-hosted webfonts: 2 families, WOFF2, latin subset, swap ---------- */
/* Both are variable fonts: one file covers the full weight range.            */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 600 700;            /* display serif — H1/H2 only */
  font-display: swap;
  src: url("https://b2b.artisraw.com/wp-content/themes/artisraw/fonts/fraunces-var.woff2") format("woff2");
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 800;            /* UI sans — everything else (Figma design font) */
  font-display: swap;
  src: url("https://b2b.artisraw.com/wp-content/themes/artisraw/fonts/archivo-var.woff2") format("woff2");
}

:root {
  /* --- Font families ----------------------------------------------------- */
  --ff-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --ff-sans:  "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* --- Type scale (1.25 modular) — the ONLY sizes allowed ----------------- */
  --fs-display-xl: 3.375rem;   /* 54px — H1 hero (serif/700/1.1)            */
  --fs-display-l:  2.4375rem;  /* 39px — H1 inner pages (serif/700/1.15)    */
  --fs-heading:    1.9375rem;  /* 31px — H2 (serif/700/1.2)                 */
  --fs-subheading: 1.5625rem;  /* 25px — H3 card/block titles (sans/600-700)*/
  --fs-lead:       1.25rem;    /* 20px — intro paragraphs (sans/400/1.5)   */
  --fs-body:       1rem;       /* 16px — body copy (sans/400/1.6)          */
  --fs-ui:         0.875rem;   /* 14px — nav, buttons, links, captions     */
  --fs-micro:      0.75rem;    /* 12px — eyebrows, table meta (uppercase)  */

  /* --- Line heights ------------------------------------------------------- */
  --lh-display-xl: 1.1;
  --lh-display-l:  1.15;
  --lh-heading:    1.2;
  --lh-subheading: 1.25;
  --lh-lead:       1.5;
  --lh-body:       1.6;
  --lh-ui:         1.4;
  --lh-micro:      1.3;

  /* --- Weights ------------------------------------------------------------ */
  --fw-regular:  400;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* --- Tracking ----------------------------------------------------------- */
  --tracking-micro: 0.06em;    /* eyebrows / micro labels */

  /* --- Color (SPEC §5.1 — hard contrast rules) ---------------------------- */
  --c-espresso-900: #2B1A10;   /* text on light; dark section backgrounds  */
  --c-bark-700:     #4C3423;   /* secondary dark surfaces; borders on dark */
  --c-amber-500:    #D69A45;   /* accent — text ONLY on espresso/bark      */
  --c-sand-200:     #EAD9C3;   /* card surfaces, table row tint            */
  --c-tan-300:      #C9A468;   /* editorial mosaic surface (Figma) — espresso text only */
  --c-olive-600:    #6B5A3A;   /* editorial band surface (Figma) — cream text only      */
  --c-clay-700:     #854D26;   /* warm clay — hero differentiator card surface (cream text) */
  --c-cacao-950:    #221B19;   /* deepest brown — dark surfaces / text                  */
  --c-cream-100:    #F7EFE4;   /* page background                          */
  --c-paper-50:     #FFF8EF;   /* cards on cream, form fields              */
  --c-white:        #FFFFFF;   /* alternate page / section background      */
  --c-success:      #2F7D4F;   /* form states only                         */
  --c-error:        #B3392E;   /* form states only                         */
  --c-scrim:        rgba(43, 26, 16, 0.5); /* espresso 50% — drawer overlay */

  /* Derived interaction shades (hover = darken ~8%) */
  --c-amber-600:    #C2862F;   /* amber button hover */
  --c-espresso-800: #3A2417;   /* secondary button hover */

  /* Semantic aliases — components reference these, not raw color tokens */
  --color-text:        var(--c-espresso-900);
  --color-text-invert: var(--c-cream-100);
  --color-bg:          var(--c-white);
  --color-surface:     var(--c-paper-50);
  --color-surface-alt: var(--c-sand-200);
  --color-accent:      var(--c-amber-500);
  --color-border:      var(--c-sand-200);
  --color-border-dark: var(--c-bark-700);

  /* --- Spacing — 8px scale ------------------------------------------------ */
  --sp-1:  0.5rem;    /*   8px */
  --sp-2:  1rem;      /*  16px */
  --sp-3:  1.5rem;    /*  24px */
  --sp-4:  2rem;      /*  32px */
  --sp-5:  3rem;      /*  48px */
  --sp-6:  4rem;      /*  64px */
  --sp-7:  6rem;      /*  96px */
  --sp-8:  8rem;      /* 128px */

  /* --- Layout / grid ------------------------------------------------------ */
  --container:    1180px;
  --grid-cols:    12;
  --grid-gutter:  var(--sp-3);          /* 24px gutters */
  --section-pad:  var(--sp-7);          /* 96px desktop (overridden ≤768) */

  /* --- Radii -------------------------------------------------------------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* --- Elevation ---------------------------------------------------------- */
  --shadow-card:  0 1px 2px rgba(43, 26, 16, 0.06), 0 2px 8px rgba(43, 26, 16, 0.06);
  --shadow-lift:  0 4px 14px rgba(43, 26, 16, 0.12);

  /* --- Motion (SPEC §5.7) ------------------------------------------------- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:    150ms;
  --dur-base:    200ms;

  /* --- Focus -------------------------------------------------------------- */
  --focus-ring-width:  2px;
  --focus-on-light:    var(--c-espresso-900);
  --focus-on-dark:     var(--c-amber-500);

  /* --- Header ------------------------------------------------------------- */
  --header-height: 64px;          /* sticky header ≤64px (SPEC §4) */
  --z-header:      100;
  --z-drawer:      200;
  --z-sticky-cta:  150;
}

/* Body steps up to 18px at ≥1440 (SPEC §5.1 / §5.2) */
@media (min-width: 1440px) {
  :root { --fs-body: 1.125rem; /* 18px */ }
}


/* === base.css === */
/* ==========================================================================
   ArtisRaw — Base styles
   Tokens only: every value is var(--token) from tokens.css (SPEC §5.1).
   ========================================================================== */

/* --- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
/* The off-canvas drawer is position:fixed at translateX(100%) — contained by the
   viewport, so a body-level clip can't reach it. Clip on the root (html) instead.
   `clip` (not `hidden`) keeps overflow-y visible, so vertical scroll and the
   sticky header are unaffected. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body { overflow-x: clip; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

body {
  font-family: var(--ff-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, picture, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }

/* --- Headings — one style per level (SPEC: one H2 style!) --------------- */
h1, h2 { font-family: var(--ff-serif); font-weight: var(--fw-bold); }
h3, h4, h5, h6 { font-family: var(--ff-sans); }

h1 {                                       /* inner-page H1 default */
  font-size: var(--fs-display-l);
  line-height: var(--lh-display-l);
}
.h1-hero {                                 /* hero H1 only */
  font-size: var(--fs-display-xl);
  line-height: var(--lh-display-xl);
}
h2 {
  font-size: var(--fs-heading);
  line-height: var(--lh-heading);
}
h3 {
  font-size: var(--fs-subheading);
  line-height: var(--lh-subheading);
  font-weight: var(--fw-semibold);
}

/* --- Text helpers ------------------------------------------------------- */
.lead { font-size: var(--fs-lead); line-height: var(--lh-lead); }
.eyebrow {
  font-size: var(--fs-micro);
  line-height: var(--lh-micro);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
}
p { max-width: 70ch; }

/* --- Links -------------------------------------------------------------- */
a { color: var(--c-bark-700); text-underline-offset: 0.15em; }
a:hover { color: var(--c-espresso-900); }

/* --- Focus (visible, never hidden — SPEC §5.8) -------------------------- */
:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-on-light);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
/* On dark surfaces, focus ring is amber */
.on-dark :focus-visible { outline-color: var(--focus-on-dark); }

/* --- Skip link (SPEC §5.8) ---------------------------------------------- */
.skip-link {
  position: absolute;
  left: var(--sp-2);
  top: -100px;
  z-index: var(--z-drawer);
  background: var(--c-espresso-900);
  color: var(--c-cream-100);
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--radius-sm);
  font-size: var(--fs-ui);
  font-weight: var(--fw-semibold);
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus { top: var(--sp-2); color: var(--c-cream-100); }

/* --- Layout: container + 12-col grid ------------------------------------ */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-3);
}

.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  gap: var(--grid-gutter);
}

/* Column span utilities (mobile = full width by default) */
.col-1{grid-column:span 1}.col-2{grid-column:span 2}.col-3{grid-column:span 3}
.col-4{grid-column:span 4}.col-5{grid-column:span 5}.col-6{grid-column:span 6}
.col-7{grid-column:span 7}.col-8{grid-column:span 8}.col-9{grid-column:span 9}
.col-10{grid-column:span 10}.col-11{grid-column:span 11}.col-12{grid-column:span 12}
@media (max-width: 767px) {
  .grid { grid-template-columns: 1fr; }
  [class*="col-"] { grid-column: 1 / -1; }
}

/* --- Section rhythm ----------------------------------------------------- */
.section { padding-block: var(--section-pad); }
@media (max-width: 767px) { .section { padding-block: var(--sp-6); } /* 56→64px mobile band */ }

.section--dark {
  background: var(--c-espresso-900);
  color: var(--color-text-invert);
}
.section--sand { background: var(--color-surface-alt); }
.section--white { background: #fff; }

/* --- Buttons (3 levels, SPEC §5.4) -------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  min-height: 48px;
  padding: 0 var(--sp-3);
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  font-size: var(--fs-ui);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-ui);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] {
  opacity: 0.5; pointer-events: none;
}
.btn[aria-busy="true"] { pointer-events: none; }

/* Primary — amber bg + espresso text (6.8:1) */
.btn--primary { background: var(--c-amber-500); color: var(--c-espresso-900); }
.btn--primary:hover { background: var(--c-amber-600); color: var(--c-espresso-900); }

/* Secondary — espresso on cream */
.btn--secondary { background: var(--c-espresso-900); color: var(--c-cream-100); }
.btn--secondary:hover { background: var(--c-espresso-800); color: var(--c-cream-100); }

/* Tertiary — underlined link */
.btn--tertiary {
  min-height: auto; padding: 0; border: 0; background: transparent;
  color: var(--c-bark-700); text-decoration: underline;
}
.btn--tertiary:hover { color: var(--c-espresso-900); }

/* --- Visually hidden (accessible) --------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}


/* === layout.css === */
/* ==========================================================================
   ArtisRaw — Layout: header, navigation, drawer, breadcrumb, footer.
   Tokens only. Mobile-first; desktop nav appears at 1024px (SPEC §5.2/§5.3).
   ========================================================================== */

/* --- Sticky header (≤64px) --------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--c-cream-100);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;            /* no-JS: full-width nav wraps below the brand */
  gap: var(--sp-3);
  min-height: var(--header-height);
}
.site-header__brand { display: inline-flex; align-items: center; text-decoration: none; color: var(--c-espresso-900); }
.site-header__wordmark {
  font-family: var(--ff-serif);
  font-weight: var(--fw-bold);
  font-size: var(--fs-subheading);
  line-height: 1;
  letter-spacing: -0.01em;
}
.site-header__reg { font-size: 0.5em; vertical-align: super; font-weight: var(--fw-semibold); }

/* --- Hamburger (mobile only) ------------------------------------------- */
/* Only shown when JS can drive it; no-JS users get the plain stacked nav. */
.nav-toggle { display: none; }
.js .nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border: 0; background: transparent;
  cursor: pointer;
  color: var(--c-espresso-900);
}
.nav-toggle__bars { display: block; width: 22px; height: 16px; position: relative; }
.nav-toggle__bars span {
  position: absolute; left: 0; height: 2px; width: 100%;
  background: currentColor; border-radius: 2px;
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 7px; }
.nav-toggle__bars span:nth-child(3) { top: 14px; }
.nav-open .nav-toggle__bars span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-open .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle__bars span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- Navigation ---------------------------------------------------------
   No-JS default (mobile): plain stacked nav, always visible & usable.
   With JS (.js): becomes the off-canvas drawer toggled by the hamburger. */
.nav {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-2) 0;
  width: 100%;
}
.js .nav {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(86vw, 360px);
  z-index: var(--z-drawer);
  background: var(--c-cream-100);
  padding: calc(var(--header-height) + var(--sp-2)) var(--sp-3) var(--sp-3);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform var(--dur-base) var(--ease-out);
  gap: var(--sp-2);
}
.js .nav-open .nav { transform: translateX(0); box-shadow: var(--shadow-lift); }

.nav-overlay {
  position: fixed; inset: 0;
  z-index: var(--z-header);
  background: var(--c-scrim);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
.nav-open .nav-overlay { opacity: 1; }
.nav-open { overflow: hidden; }            /* body scroll lock */

.nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.nav__item { position: relative; }
.nav__link {
  display: block;
  padding: var(--sp-1) var(--sp-1);
  font-size: var(--fs-ui);
  font-weight: var(--fw-semibold);
  color: var(--c-espresso-900);
  text-decoration: none;
  border-radius: var(--radius-sm);
  min-height: 44px;
  line-height: calc(44px - 2 * var(--sp-1));
}
.nav__link:hover { color: var(--c-bark-700); background: var(--c-paper-50); }
.nav__link[aria-current="page"] { box-shadow: inset 3px 0 0 var(--c-amber-500); }

/* Dropdown disclosure */
.nav__item--has-children { display: grid; grid-template-columns: 1fr auto; align-items: center; }
.nav__item--has-children > .nav__link { grid-column: 1; }
.nav__disclosure {
  grid-column: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer;
  color: var(--c-espresso-900);
}
.nav__chevron { transition: transform var(--dur-fast) var(--ease-out); }
.nav__item.is-open .nav__disclosure .nav__chevron { transform: rotate(180deg); }
.nav__chevron-inline { display: none; } /* desktop-only; mobile uses the disclosure button */
.nav__sub {
  grid-column: 1 / -1;
  list-style: none; margin: 0; padding: 0 0 0 var(--sp-2);
  display: none;
}
.nav__item.is-open .nav__sub { display: block; }
.nav__sub-link {
  display: block; padding: var(--sp-1); min-height: 40px;
  font-size: var(--fs-ui); color: var(--c-bark-700); text-decoration: none;
}
.nav__sub-link:hover { color: var(--c-espresso-900); }

.nav__actions { margin-top: var(--sp-2); padding-top: var(--sp-2); border-top: 1px solid var(--color-border); display: flex; flex-direction: column; gap: var(--sp-2); }
.nav__cta { width: 100%; text-align: center; }

/* --- Desktop navigation (≥1180px) — horizontal bar; below this, the drawer.
   1180 (= container width) keeps all 6 items + actions on one line with room. */
@media (min-width: 1180px) {
  .js .nav-toggle, .nav-overlay, .nav__disclosure { display: none; }
  /* Single-row header, logo dead-centre. Two equal flex halves (flex:1 with a
     0 basis) flank the brand, so it sits at exact screen centre at any width.
     Utility actions are absolutely positioned far-right, OUT of the centring
     math, so they never push the logo off-centre. */
  .site-header__inner { position: relative; display: flex; flex-wrap: nowrap; align-items: center; gap: 0; }
  .nav, .js .nav {                 /* `.js .nav` beats the mobile drawer rule */
    display: contents;             /* lists + actions become flex items */
    position: static; width: auto; height: auto;
    transform: none; background: transparent; box-shadow: none;
    padding: 0; overflow: visible;
  }
  .nav__list--left  { flex: 1 1 0; order: 1; justify-content: flex-end; }
  .site-header__brand { flex: 0 0 auto; order: 2; margin: 0 var(--sp-5); }
  .nav__list--right { flex: 1 1 0; order: 3; justify-content: flex-start; }
  /* Language switcher sits at the very end of the right list. */
  .nav__item--lang { margin-left: auto; }
  .nav__list { flex-direction: row; align-items: center; gap: var(--sp-2); flex-wrap: nowrap; }
  .nav__item { flex: 0 0 auto; }                 /* keep each item's width */
  .nav__link { white-space: nowrap; }            /* labels never wrap to 2 lines */
  /* Parent link: label + inline chevron hug together as one focus target. */
  .nav__item--has-children { display: flex; align-items: center; }
  .nav__link--parent { display: inline-flex; align-items: center; gap: 4px; }
  .nav__chevron-inline { display: inline-flex; align-items: center; transition: transform var(--dur-fast) var(--ease-out); }
  .nav__item--has-children:hover .nav__chevron-inline,
  .nav__item--has-children:focus-within .nav__chevron-inline { transform: rotate(180deg); }
  .nav__link { min-height: 0; line-height: var(--lh-ui); padding: var(--sp-1); }
  .nav__link[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--c-amber-500); }

  /* Dropdown panel floats; opens on hover-intent, focus or click (is-open) */
  .nav__item--has-children { position: relative; }
  .nav__sub {
    position: absolute; top: 100%; left: 0; min-width: 220px;
    padding: var(--sp-1); margin-top: var(--sp-1);
    background: var(--c-paper-50); border: 1px solid var(--color-border);
    border-radius: var(--radius-md); box-shadow: var(--shadow-lift);
    display: none;
  }
  /* Transparent bridge fills the visual gap so moving cursor from the trigger
     into the panel never drops :hover (the classic dropdown-gap bug). */
  .nav__sub::before {
    content: ""; position: absolute; left: 0; right: 0;
    top: calc(-1 * var(--sp-1) - 1px); height: calc(var(--sp-1) + 1px);
  }
  .nav__item--has-children:hover .nav__sub,
  .nav__item--has-children:focus-within .nav__sub,
  .nav__item.is-open .nav__sub { display: block; }

  /* Language switcher on the left, the amber Client Login CTA anchors the right. */
  .lang-switch { order: 1; }
  .nav__cta { width: auto; order: 2; }
}

/* --- Breadcrumb -------------------------------------------------------- */
.breadcrumb { background: var(--c-cream-100); border-bottom: 1px solid var(--color-border); }
.breadcrumb__list {
  list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-1);
  padding-block: var(--sp-1); margin: 0;
  font-size: var(--fs-ui);
}
.breadcrumb__item { display: inline-flex; align-items: center; gap: var(--sp-1); }
.breadcrumb__item:not(:last-child)::after { content: "/"; color: var(--c-bark-700); opacity: 0.5; }
.breadcrumb__item a { color: var(--c-bark-700); text-decoration: none; }
.breadcrumb__item a:hover { color: var(--c-espresso-900); text-decoration: underline; }
.breadcrumb__item [aria-current="page"] { color: var(--c-espresso-900); font-weight: var(--fw-semibold); }

/* --- Footer ------------------------------------------------------------ */
.site-footer { background: var(--c-espresso-900); color: var(--c-cream-100); }
.site-footer__inner { padding-block: var(--sp-6); align-items: start; }
.site-footer a { color: var(--c-sand-200); text-decoration: none; }
.site-footer a:hover { color: var(--c-amber-500); text-decoration: underline; }
.site-footer__wordmark { font-family: var(--ff-serif); font-weight: var(--fw-bold); font-size: var(--fs-subheading); }
.site-footer__tagline { margin-top: var(--sp-1); color: var(--c-sand-200); font-size: var(--fs-ui); max-width: 32ch; }
.site-footer__nap { margin-top: var(--sp-2); font-style: normal; font-size: var(--fs-ui); line-height: var(--lh-body); color: var(--c-sand-200); }

.footer__links { list-style: none; margin: 0; padding: 0; columns: 2; gap: var(--sp-3); }
.footer__links li { margin-bottom: var(--sp-1); break-inside: avoid; }
.footer__links a { font-size: var(--fs-ui); }

.footer__whatsapp { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-ui); font-weight: var(--fw-semibold); }
.footer__lang { margin-top: var(--sp-3); }
.footer__lang-list { list-style: none; display: flex; gap: var(--sp-1); margin: 0; padding: 0; font-size: var(--fs-ui); font-weight: var(--fw-semibold); }
.footer__lang-list .is-disabled { color: var(--c-bark-700); }

.site-footer__legal { border-top: 1px solid var(--c-bark-700); }
.site-footer__legal p { max-width: none; padding-block: var(--sp-3); font-size: var(--fs-ui); color: var(--c-sand-200); }

@media (max-width: 767px) {
  .footer__links { columns: 1; }
  .site-footer__inner { gap: var(--sp-5); }
}


/* === components.css === */
/* ==========================================================================
   ArtisRaw — Components (SPEC §4). Tokens only.
   ========================================================================== */

/* --- Quick-answer box --------------------------------------------------- */
.quick-answer {
  background: var(--c-sand-200);
  border-left: 3px solid var(--c-amber-500);
  border-radius: var(--radius-md);
  padding: var(--sp-3);
  margin-block: var(--sp-3);
}
.quick-answer__label { color: var(--c-bark-700); margin-bottom: var(--sp-1); }
.quick-answer__text { font-size: var(--fs-lead); line-height: var(--lh-lead); margin: 0; max-width: 65ch; }

/* --- SKU spec card ------------------------------------------------------ */
.sku-grid { margin-block: var(--sp-3); }
.sku-card {
  display: flex; flex-direction: column; height: 100%;
  background: var(--c-paper-50);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.sku-card__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--c-sand-200); }
.sku-card__img--placeholder { display: block; }
.sku-card__body { padding: var(--sp-3); }
.sku-card__name { font-size: var(--fs-subheading); margin-bottom: var(--sp-1); }
.sku-card__ref { color: var(--c-bark-700); margin-bottom: var(--sp-2); }
.sku-card__specs { margin: 0; }
.sku-card__row { display: grid; grid-template-columns: 11ch 1fr; gap: var(--sp-2); padding-block: 6px; border-top: 1px solid var(--color-border); font-size: var(--fs-ui); }
.sku-card__row dt { color: var(--c-bark-700); }
.sku-card__row dd { margin: 0; font-weight: var(--fw-semibold); }

/* --- Horizontal product scroll (Olyfo-style carousel) ------------------- */
.product-scroll { margin-block: var(--sp-3); }
.product-scroll__track {
  display: flex; gap: var(--sp-3);
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--sp-2);
  /* Hide scrollbar visually while keeping functionality */
  scrollbar-width: none;
}
.product-scroll__track::-webkit-scrollbar { display: none; }
/* Olyfo-style: card itself is transparent; the gray box holds the product and
   the title sits separate below it on the page background. */
.product-scroll__card {
  flex: 0 0 auto;
  width: min(340px, 80vw);
  scroll-snap-align: start;
  display: block;
  text-decoration: none;
  color: var(--color-text);
}
.product-scroll__media {
  display: block;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--c-sand-200);
  transition: box-shadow 300ms var(--ease-out);
}
.product-scroll__card:hover .product-scroll__media { box-shadow: var(--shadow-lift); }
.product-scroll__img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  background: var(--c-sand-200);
  display: block;
  transition: transform 300ms var(--ease-out);
}
.product-scroll__card:hover .product-scroll__img { transform: scale(1.04); }
.product-scroll__card:active .product-scroll__img { transform: scale(1.02); }
.product-scroll__title {
  font-family: var(--ff-sans);
  font-size: var(--fs-subheading);
  font-weight: var(--fw-bold);
  color: var(--c-espresso-900);
  margin: var(--sp-2) 0 0;
  padding: 0 var(--sp-1);
  line-height: var(--lh-ui);
}
.product-scroll__bar {
  height: 3px;
  background: var(--c-sand-200);
  border-radius: 2px;
  margin-top: var(--sp-2);
  position: relative;
  overflow: hidden;
}
.product-scroll__bar-thumb {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0;
  background: var(--c-amber-500);
  border-radius: 2px;
  transition: transform 100ms linear, width 100ms linear;
  transform-origin: left center;
  will-change: transform, width;
}

@media (prefers-reduced-motion: reduce) {
  .product-scroll__track { scroll-behavior: auto; }
  .product-scroll__card,
  .product-scroll__img { transition: none; }
  .product-scroll__card:hover .product-scroll__img { transform: none; }
  .product-scroll__bar-thumb { transition: none; }
}

/* --- Data tables -------------------------------------------------------- */
.data-table { margin-block: var(--sp-3); overflow-x: auto; }
.data-table table { width: 100%; border-collapse: collapse; font-size: var(--fs-ui); }
.data-table caption { text-align: left; font-size: var(--fs-micro); letter-spacing: var(--tracking-micro); text-transform: uppercase; font-weight: var(--fw-bold); color: var(--c-bark-700); padding-bottom: var(--sp-2); }
.data-table th, .data-table td { text-align: left; padding: var(--sp-2); border-bottom: 1px solid var(--color-border); }
.data-table thead th { background: var(--c-espresso-900); color: var(--c-cream-100); font-weight: var(--fw-semibold); }
.data-table tbody tr:nth-child(even) { background: var(--c-sand-200); }
.data-table th[scope="row"] { font-weight: var(--fw-semibold); }
/* Stack to label/value pairs below 768px (no horizontal scroll) */
@media (max-width: 767px) {
  .data-table { overflow-x: visible; }
  .data-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .data-table tr { display: block; margin-bottom: var(--sp-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
  .data-table tbody tr:nth-child(even) { background: transparent; }
  .data-table td, .data-table th[scope="row"] { display: grid; grid-template-columns: 12ch 1fr; gap: var(--sp-2); border-bottom: 1px solid var(--color-border); }
  .data-table td::before, .data-table th[scope="row"]::before { content: attr(data-label); font-weight: var(--fw-semibold); color: var(--c-bark-700); }
  .data-table tr td:last-child { border-bottom: 0; }
}

/* --- Trust strip / chips ------------------------------------------------ */
.trust-strip { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; margin: var(--sp-3) 0; padding: 0; }
.trust-chip__link {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-2);
  background: var(--c-paper-50);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: var(--fs-ui); font-weight: var(--fw-semibold);
  color: var(--c-espresso-900); text-decoration: none;
}
a.trust-chip__link:hover { border-color: var(--c-amber-500); color: var(--c-espresso-900); }
.trust-chip__icon { color: var(--c-amber-600); flex: none; }
.on-dark .trust-chip__link { background: var(--c-bark-700); border-color: var(--c-bark-700); color: var(--c-cream-100); }
.on-dark .trust-chip__icon { color: var(--c-amber-500); }

/* --- Logo band ---------------------------------------------------------- */
.logo-band { margin-block: var(--sp-4); text-align: center; }
.logo-band__heading { color: var(--c-bark-700); margin-bottom: var(--sp-2); }
.logo-band__list { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--sp-3) var(--sp-5); list-style: none; margin: 0; padding: 0; }
.logo-band__name { font-family: var(--ff-serif); font-size: var(--fs-subheading); font-weight: var(--fw-semibold); color: var(--c-bark-700); }

/* --- FAQ accordion ------------------------------------------------------ */
.accordion { border-top: 1px solid var(--color-border); margin-block: var(--sp-3); }
.accordion__item { border-bottom: 1px solid var(--color-border); scroll-margin-top: calc(var(--header-height) + var(--sp-2)); }
.accordion__heading { margin: 0; font-family: var(--ff-sans); font-size: inherit; }
.accordion__trigger {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  width: 100%; padding: var(--sp-3) 0; border: 0; background: transparent;
  font-family: var(--ff-sans); font-size: var(--fs-subheading); font-weight: var(--fw-semibold);
  color: var(--c-espresso-900); text-align: left; cursor: pointer;
}
.accordion__q { flex: 1; }
.accordion__chevron { flex: none; color: var(--c-bark-700); transition: transform var(--dur-base) var(--ease-out); }
.accordion__trigger[aria-expanded="true"] .accordion__chevron { transform: rotate(180deg); }
.accordion__panel { overflow: hidden; }
/* No-JS: show every answer (the toggle button can't work without JS). */
html:not(.js) .accordion__panel[hidden] { display: block; }
.accordion__answer { padding-bottom: var(--sp-3); }
.accordion__answer p { color: var(--c-bark-700); }
@media (prefers-reduced-motion: no-preference) {
  .accordion__panel:not([hidden]) { animation: artisraw-reveal var(--dur-base) var(--ease-out); }
}
@keyframes artisraw-reveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* --- Stat band ---------------------------------------------------------- */
/* All stats sit on one row (3 or 4 of them); align to the top so the big
   numbers line up even when labels wrap to different line counts. */
.stat-band__grid { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--sp-4); text-align: center; align-items: start; }
@media (max-width: 767px) { .stat-band__grid { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(2, 1fr); } }
.stat { display: flex; flex-direction: column; gap: var(--sp-1); }
.stat__value { font-family: var(--ff-serif); font-size: var(--fs-display-l); font-weight: var(--fw-bold); line-height: 1; color: var(--c-amber-500); }
.stat-band:not(.on-dark) .stat__value { color: var(--c-bark-700); }
.stat__label { font-size: var(--fs-ui); color: inherit; }

/* --- Cards (article, category) ----------------------------------------- */
.card { position: relative; display: flex; flex-direction: column; height: 100%; background: var(--c-paper-50); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.card:focus-within { outline: var(--focus-ring-width) solid var(--focus-on-light); outline-offset: 2px; }
.card__img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--c-sand-200); }
.card__img--placeholder { display: block; }
.card__body { padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-1); }
.card__title { font-size: var(--fs-subheading); }
.card__link { color: var(--c-espresso-900); text-decoration: none; }
.card__link:hover { color: var(--c-bark-700); }
.card__excerpt { color: var(--c-bark-700); font-size: var(--fs-ui); }
.card__meta { color: var(--c-bark-700); }
.card:focus-within .card__link:focus-visible { outline: none; } /* ring handled by focus-within */

/* Stretched link — whole card clickable, single <a> */
.stretched-link::after { content: ""; position: absolute; inset: 0; }

/* --- Document / download card ------------------------------------------ */
.doc-card { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3); background: var(--c-paper-50); border: 1px solid var(--color-border); border-radius: var(--radius-md); text-decoration: none; color: var(--c-espresso-900); transition: border-color var(--dur-fast) var(--ease-out); }
.doc-card:hover { border-color: var(--c-amber-500); color: var(--c-espresso-900); }
.doc-card__icon { flex: none; color: var(--c-bark-700); }
.doc-card__body { display: flex; flex-direction: column; flex: 1; }
.doc-card__title { font-weight: var(--fw-semibold); }
.doc-card__meta, .doc-card__updated { font-size: var(--fs-ui); color: var(--c-bark-700); }
.doc-card__cta { font-size: var(--fs-subheading); color: var(--c-amber-600); }

/* --- Sticky mobile CTA bar --------------------------------------------- */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky-cta);
  display: none; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--c-cream-100);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -2px 12px rgba(43, 26, 16, 0.08);
}
.sticky-cta__quote { flex: 1; }
.sticky-cta__wa { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--radius-md); background: var(--c-espresso-900); color: var(--c-cream-100); }
.js .sticky-cta:not([hidden]) { display: flex; }
@media (min-width: 1180px) { .sticky-cta { display: none !important; } } /* below desktop nav only */

/* --- Home hero carousel ------------------------------------------------- */
.photo-hero.hero-carousel { position: relative; display: flex; flex-direction: column; }
.hero-carousel__track { position: relative; flex: 1 1 auto; width: 100%; min-height: inherit; overflow: hidden; }
.hero-carousel__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 800ms var(--ease-out), visibility 800ms var(--ease-out);
  z-index: 1;
}
.hero-carousel__slide.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}
.hero-carousel__slide::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(43, 26, 16, 0.55), rgba(43, 26, 16, 0.8));
  pointer-events: none;
}
.hero-carousel__slide .photo-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}
.hero-carousel__slide .photo-hero__inner {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0;
}
.hero-carousel__dots {
  position: absolute;
  left: 50%;
  bottom: var(--sp-4);
  transform: translateX(-50%);
  display: flex;
  gap: var(--sp-2);
  z-index: 3;
}
.hero-carousel__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--c-cream-100);
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition: background 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.hero-carousel__dot:hover,
.hero-carousel__dot.is-active {
  background: var(--c-amber-500);
  border-color: var(--c-amber-500);
}
.hero-carousel__dot.is-active { transform: scale(1.15); }

@media (prefers-reduced-motion: reduce) {
  .hero-carousel__slide {
    transition: none;
  }
}

html:not(.js) .hero-carousel__dots { display: none; }


/* === forms.css === */
/* ==========================================================================
   ArtisRaw — Forms (SPEC §5.4 inputs, §5.5 two-step quote flow).
   Tokens only.
   ========================================================================== */

/* --- Fields ------------------------------------------------------------- */
.field { margin-bottom: var(--sp-3); }
.field > label,
.field > legend {
  display: block;
  margin-bottom: var(--sp-1);
  font-size: var(--fs-ui);
  font-weight: var(--fw-semibold);
  color: var(--c-espresso-900);
}
.field__req { color: var(--c-error); }

.field input[type="text"],
.field input[type="email"],
.field input[type="date"],
.field input[type="tel"],
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: 0 var(--sp-2);
  background: var(--c-paper-50);
  border: 1px solid var(--c-bark-700);
  border-radius: var(--radius-md);
  font-size: var(--fs-body);
  color: var(--c-espresso-900);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.field textarea { padding: var(--sp-2); min-height: 120px; resize: vertical; line-height: var(--lh-body); }
.field select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%234C3423' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--sp-2) center; padding-right: var(--sp-5); }

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: none;
  border-color: var(--c-espresso-900);
  box-shadow: 0 0 0 var(--focus-ring-width) var(--c-espresso-900);
}

/* Validation states */
.field.is-error input,
.field.is-error select,
.field.is-error textarea { border-color: var(--c-error); box-shadow: 0 0 0 1px var(--c-error); }
.field.is-valid input,
.field.is-valid select { border-color: var(--c-success); }

.field__msg { display: none; margin-top: var(--sp-1); font-size: var(--fs-ui); color: var(--c-error); }
.field.is-error .field__msg { display: block; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
@media (max-width: 767px) { .field-row { grid-template-columns: 1fr; } }

/* Checkboxes */
fieldset.field { border: 0; padding: 0; margin: 0 0 var(--sp-3); }
.check-row { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); }
.check { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-ui); font-weight: var(--fw-regular); }
.check input { width: 20px; height: 20px; accent-color: var(--c-amber-600); }

/* Honeypot — removed from layout + a11y tree, never shown to users. */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- Error summary ------------------------------------------------------ */
.form-errors {
  margin-bottom: var(--sp-3);
  padding: var(--sp-2);
  background: color-mix(in srgb, var(--c-error) 8%, var(--c-paper-50));
  border: 1px solid var(--c-error);
  border-radius: var(--radius-md);
  font-size: var(--fs-ui);
  color: var(--c-error);
}
.form-errors ul { margin: var(--sp-1) 0 0; padding-left: var(--sp-3); }
.form-errors a { color: var(--c-error); }

/* --- Quote form --------------------------------------------------------- */
.quote-form {
  background: var(--c-paper-50);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
  box-shadow: var(--shadow-card);
}
.quote-form__promise { color: var(--c-bark-700); margin-bottom: var(--sp-1); }
.quote-form__heading { font-family: var(--ff-serif); font-size: var(--fs-subheading); font-weight: var(--fw-bold); margin-bottom: var(--sp-3); }
.quote-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-top: var(--sp-2); }
.quote-form__submit, .quote-form__submit2 { min-width: 14rem; }
.quote-form__privacy { margin-top: var(--sp-2); font-size: var(--fs-ui); color: var(--c-bark-700); max-width: none; }

/* Success + step 2 */
.quote-form__success-head { text-align: center; margin-bottom: var(--sp-3); }
.quote-form__tick { color: var(--c-success); margin-inline: auto; }
.quote-form__success-head .quote-form__heading { margin-top: var(--sp-1); margin-bottom: var(--sp-1); }
.quote-form__success-head p { margin-inline: auto; }
.quote-form__step2-done { margin-top: var(--sp-2); padding: var(--sp-2); background: color-mix(in srgb, var(--c-success) 10%, var(--c-paper-50)); border-radius: var(--radius-md); color: var(--c-espresso-900); font-weight: var(--fw-semibold); }

/* Loading state on submit (aria-busy) */
.btn[aria-busy="true"] .btn__label { opacity: 0; }
.btn[aria-busy="true"] { position: relative; }
.btn[aria-busy="true"]::after {
  content: ""; position: absolute; width: 18px; height: 18px;
  border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%;
  animation: artisraw-spin 0.7s linear infinite;
}
@keyframes artisraw-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .btn[aria-busy="true"]::after { animation: none; }
}


/* === templates.css === */
/* ==========================================================================
   ArtisRaw — Template-specific layouts. Tokens only.
   ========================================================================== */

/* --- Wholesale hub: hero ------------------------------------------------ */
.hub-hero { padding-block: var(--sp-7); }
.hub-hero__grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); align-items: center; }
@media (min-width: 1024px) { .hub-hero__grid { grid-template-columns: 1fr 0.85fr; gap: var(--sp-6); } }

.hub-hero__terms {
  display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3);
  list-style: none; margin: var(--sp-3) 0; padding: 0;
  font-size: var(--fs-ui);
}
.hub-hero__terms li { position: relative; padding-right: var(--sp-3); }
.hub-hero__terms li:not(:last-child)::after { content: "·"; position: absolute; right: 0; opacity: 0.5; }
.hub-hero__terms strong { color: var(--c-amber-500); }
.hub-hero__lead { max-width: 46ch; color: var(--c-sand-200); }
.hub-hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin-top: var(--sp-4); }
.hub-hero__alt { color: var(--c-amber-500); }
.hub-hero__alt:hover { color: var(--c-amber-500); }
.hub-hero__img { width: 100%; border-radius: var(--radius-lg); aspect-ratio: 3 / 2; object-fit: cover; box-shadow: var(--shadow-lift); }

/* --- Hub: trust strip band --------------------------------------------- */
.hub-trust { padding-block: var(--sp-3); border-bottom: 1px solid var(--color-border); }
.hub-trust .trust-strip { margin: 0; justify-content: center; }

/* --- Hub: generic section heads ---------------------------------------- */
.hub-section { padding-block: var(--sp-6); }
.hub-section__head { max-width: 60ch; margin-bottom: var(--sp-4); }
.hub-section__head .lead { color: var(--c-bark-700); margin-top: var(--sp-1); }
.hub-section__note { margin-top: var(--sp-3); font-size: var(--fs-ui); color: var(--c-bark-700); }

/* --- Hub: import-confidence list --------------------------------------- */
.hub-confidence__list { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: grid; gap: var(--sp-2); }
.hub-confidence__list li {
  padding: var(--sp-3); background: var(--c-paper-50);
  border: 1px solid var(--color-border); border-left: 3px solid var(--c-amber-500);
  border-radius: var(--radius-md); max-width: none;
}
@media (min-width: 768px) { .hub-confidence__list { grid-template-columns: 1fr 1fr; } }

/* --- Hub: services grid ------------------------------------------------- */
.hub-service { height: 100%; padding: var(--sp-3); background: var(--c-paper-50); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.hub-service__icon { display: block; width: 28px; height: 28px; margin-bottom: var(--sp-2); color: var(--c-espresso-900); }

/* Global distribution block — homepage map only, full-width, centred */
.global-dist { width: 100%; }
.global-dist__map { width: 100%; background: var(--c-cream-100); display: flex; align-items: center; justify-content: center; padding-block: var(--sp-4); }
.global-dist__img { display: block; width: 100%; max-width: 1100px; height: auto; }
.hub-service h3 { font-size: var(--fs-subheading); margin-bottom: var(--sp-1); }
.hub-service p { color: var(--c-bark-700); font-size: var(--fs-ui); }

/* --- Hub: forms + downloads -------------------------------------------- */
.hub-form-wrap { max-width: 680px; }
.hub-downloads__title { margin-top: var(--sp-5); margin-bottom: var(--sp-3); }

/* --- Trust page prose --------------------------------------------------- */
.trust-body { max-width: 70ch; }
.trust-body h2 { margin-top: var(--sp-5); }
.trust-body h3 { margin-top: var(--sp-4); }
.trust-body p, .trust-body ul, .trust-body ol { margin-top: var(--sp-2); }
.trust-body ul, .trust-body ol { padding-left: var(--sp-3); }
.trust-body li { margin-bottom: var(--sp-1); }
.trust-body table { width: 100%; border-collapse: collapse; margin-top: var(--sp-3); font-size: var(--fs-ui); }
.trust-body th, .trust-body td { text-align: left; padding: var(--sp-2); border-bottom: 1px solid var(--color-border); }
.trust-body thead th { background: var(--c-espresso-900); color: var(--c-cream-100); }

/* --- Contact layout ----------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); }
@media (min-width: 1024px) { .contact-grid { grid-template-columns: 1.3fr 1fr; gap: var(--sp-6); } }
.contact-nap { font-style: normal; line-height: var(--lh-body); font-size: var(--fs-body); }
.contact-grid__nap h2 { margin-bottom: var(--sp-2); }

/* --- Trimmed chrome on /request-quote/ (SPEC §5.6) --------------------- */
.is-trimmed .nav,
.is-trimmed .nav-toggle,
.is-trimmed .site-footer__nav,
.is-trimmed .site-footer__contact,
.is-trimmed .site-footer__news,
.is-trimmed .lang-switch,
.is-trimmed .sticky-cta { display: none !important; }
.is-trimmed .breadcrumb { display: none; }

/* --- Footer newsletter band -------------------------------------------- */
.site-footer__news { padding-block: var(--sp-5) 0; }

/* --- Article hero (single.php) ----------------------------------------- */
.article-hero { margin: var(--sp-4) 0; }
.article-hero__img { width: 100%; border-radius: var(--radius-lg); aspect-ratio: 16 / 9; object-fit: cover; }


/* === phase5.css === */
/* ==========================================================================
   ArtisRaw — Phase 5 (design-parity components + page layouts). Tokens only.
   Services · Worldwide · About/Process enrichments · home sections.
   ========================================================================== */

/* --- Numbered steps (services flow, QC timeline) ----------------------- */
.steps { list-style: none; margin: var(--sp-4) 0 0; padding: 0; display: grid; gap: var(--sp-3); }
@media (min-width: 768px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step { position: relative; display: flex; gap: var(--sp-2); padding: var(--sp-3); background: var(--c-paper-50); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.step__num { font-family: var(--ff-serif); font-size: var(--fs-subheading); font-weight: var(--fw-bold); color: var(--c-amber-600); line-height: 1; flex: none; }
.step__eyebrow { color: var(--c-bark-700); margin-bottom: 2px; }
.step__title { font-size: var(--fs-ui); font-weight: var(--fw-semibold); margin: 0 0 4px; }
.step__text { font-size: var(--fs-ui); color: var(--c-bark-700); margin: 0; }

/* --- Testimonials ------------------------------------------------------- */
.testimonials__head { margin-bottom: var(--sp-4); }
.testimonials__grid { display: grid; gap: var(--sp-3); }
@media (min-width: 768px) { .testimonials__grid { grid-template-columns: repeat(3, 1fr); } }
.testimonial { margin: 0; padding: var(--sp-4); background: var(--c-paper-50); border: 1px solid var(--color-border); border-radius: var(--radius-lg); display: flex; flex-direction: column; gap: var(--sp-2); }
.testimonial__stars { color: var(--c-amber-600); letter-spacing: 2px; margin: 0; }
.testimonial__quote { font-family: var(--ff-serif); font-size: var(--fs-lead); line-height: var(--lh-lead); margin: 0; color: var(--c-espresso-900); }
.testimonial__by { font-size: var(--fs-ui); color: var(--c-bark-700); }
.testimonial__author { font-weight: var(--fw-semibold); color: var(--c-espresso-900); }

/* --- Newsletter --------------------------------------------------------- */
.newsletter { display: grid; gap: var(--sp-3); align-items: center; padding: var(--sp-5); background: var(--c-sand-200); border-radius: var(--radius-lg); }
@media (min-width: 860px) { .newsletter { grid-template-columns: 1fr 1fr; gap: var(--sp-5); } }
.newsletter__head { margin: 0 0 var(--sp-1); }
.newsletter__text { color: var(--c-bark-700); margin: 0; max-width: 48ch; }
.newsletter__row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.newsletter__row input[type="email"] { flex: 1 1 14rem; min-height: 48px; padding: 0 var(--sp-2); border: 1px solid var(--color-border-dark); border-radius: var(--radius-md); background: var(--c-paper-50); font: inherit; }
.newsletter__row input[type="email"]:focus-visible { outline: var(--focus-ring-width) solid var(--focus-on-light); outline-offset: 1px; }
.newsletter__submit { flex: none; }
.newsletter__msg { margin: var(--sp-2) 0 0; font-size: var(--fs-ui); }
.newsletter__msg[data-state="ok"] { color: var(--c-bark-700); font-weight: var(--fw-semibold); }
.newsletter__msg[data-state="error"] { color: #9a3412; }
/* On dark surfaces (footer) */
.on-dark .newsletter { background: var(--c-bark-700); }
.on-dark .newsletter__text { color: var(--c-sand-200); }
.on-dark .newsletter__row input[type="email"] { background: var(--c-cream-100); border-color: var(--c-bark-700); }
.on-dark .newsletter__msg[data-state="ok"] { color: var(--c-sand-200); }

/* --- Founders / team ---------------------------------------------------- */
.founders__head { margin-bottom: var(--sp-4); }
.founders__grid { display: grid; gap: var(--sp-3); }
@media (min-width: 768px) { .founders__grid { grid-template-columns: repeat(3, 1fr); } }
.founder { margin: 0; padding: var(--sp-4); background: var(--c-paper-50); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.founder__avatar { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 999px; background: var(--c-espresso-900); color: var(--c-cream-100); font-family: var(--ff-serif); font-weight: var(--fw-bold); margin-bottom: var(--sp-2); }
.founder__role { color: var(--c-bark-700); margin-bottom: 2px; }
.founder__name { font-size: var(--fs-subheading); margin: 0 0 var(--sp-1); }
.founder__bio { font-size: var(--fs-ui); color: var(--c-bark-700); margin: 0; }

/* --- Plant-a-tree program ---------------------------------------------- */
.plant { padding-block: var(--sp-6); }
.plant__inner { display: grid; gap: var(--sp-4); align-items: center; }
@media (min-width: 860px) { .plant__inner { grid-template-columns: 1.6fr 1fr; } }
.plant__icon { color: var(--c-amber-600); margin-bottom: var(--sp-2); }
.plant__head { margin: 0 0 var(--sp-2); }
.plant__text { color: var(--c-bark-700); max-width: 60ch; margin: 0 0 var(--sp-3); }
.plant__stat { text-align: center; padding: var(--sp-4); background: var(--c-paper-50); border: 1px solid var(--color-border); border-left: 3px solid var(--c-amber-500); border-radius: var(--radius-lg); }
.plant__value { display: block; font-family: var(--ff-serif); font-size: var(--fs-display-l); font-weight: var(--fw-bold); line-height: 1; color: var(--c-bark-700); }
.plant__label { display: block; margin-top: var(--sp-1); font-size: var(--fs-ui); color: var(--c-bark-700); }

/* --- Instagram strip ---------------------------------------------------- */
.ig__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.ig__follow { font-weight: var(--fw-semibold); text-decoration: none; color: var(--c-amber-600); }
.ig__follow:hover { color: var(--c-espresso-900); }
.ig__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); }
@media (min-width: 600px) { .ig__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .ig__grid { grid-template-columns: repeat(6, 1fr); } }
.ig__link { position: relative; display: flex; align-items: flex-end; aspect-ratio: 1; padding: var(--sp-2); border-radius: var(--radius-md); text-decoration: none; color: var(--c-cream-100);
  background: linear-gradient(135deg, var(--c-bark-700), var(--c-espresso-900)); overflow: hidden; }
.ig__link:hover { color: var(--c-cream-100); box-shadow: var(--shadow-lift); }
.ig__caption { font-size: var(--fs-micro); line-height: 1.3; position: relative; z-index: 1; }

/* --- Generic: card grid for service/profile/region cells --------------- */
.cell-grid { display: grid; gap: var(--sp-3); }
.cell-grid--2 { grid-template-columns: 1fr; }
.cell-grid--3 { grid-template-columns: 1fr; }
.cell-grid--4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) {
  .cell-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .cell-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .cell-grid--4 { grid-template-columns: repeat(4, 1fr); }
}
.cell { height: 100%; padding: var(--sp-3); background: var(--c-paper-50); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.cell__num { font-family: var(--ff-serif); font-weight: var(--fw-bold); color: var(--c-amber-600); }
.cell__eyebrow { color: var(--c-bark-700); margin-bottom: 2px; }
.cell h3 { font-size: var(--fs-subheading); margin: 0 0 var(--sp-1); }
.cell p { color: var(--c-bark-700); font-size: var(--fs-ui); margin: 0; }
.cell ul { margin: var(--sp-2) 0 0; padding-left: var(--sp-3); font-size: var(--fs-ui); color: var(--c-bark-700); }
.cell li { margin-bottom: 4px; }

/* Buyer-profile chips (12 small cells) */
.profiles { list-style: none; margin: var(--sp-4) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); }
@media (min-width: 600px) { .profiles { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px) { .profiles { grid-template-columns: repeat(4, 1fr); } }
.profile { display: flex; align-items: baseline; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); background: var(--c-paper-50); border: 1px solid var(--color-border); border-radius: var(--radius-md); font-weight: var(--fw-semibold); }
.profile__num { font-family: var(--ff-serif); color: var(--c-amber-600); font-size: var(--fs-ui); }

/* Service packs (3 priced-style cards) */
.packs { display: grid; gap: var(--sp-3); margin-top: var(--sp-4); }
@media (min-width: 860px) { .packs { grid-template-columns: repeat(3, 1fr); } }
.pack { display: flex; flex-direction: column; height: 100%; padding: var(--sp-4); background: var(--c-paper-50); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.pack--featured { border-color: var(--c-amber-500); box-shadow: var(--shadow-lift); }
.pack__tag { align-self: flex-start; font-size: var(--fs-micro); letter-spacing: var(--tracking-micro); text-transform: uppercase; font-weight: var(--fw-bold); color: var(--c-bark-700); }
.pack--featured .pack__tag { color: var(--c-amber-600); }
.pack h3 { font-size: var(--fs-subheading); margin: var(--sp-1) 0; }
.pack__desc { color: var(--c-bark-700); font-size: var(--fs-ui); }
.pack__list { list-style: none; margin: var(--sp-3) 0; padding: 0; display: grid; gap: var(--sp-1); font-size: var(--fs-ui); }
.pack__list li { padding-left: 1.4em; position: relative; }
.pack__list li::before { content: "✓"; position: absolute; left: 0; color: var(--c-amber-600); font-weight: var(--fw-bold); }
.pack__cta { margin-top: auto; }

/* --- Worldwide: regions + static map ----------------------------------- */
.world-map { display: grid; gap: var(--sp-4); align-items: center; margin-top: var(--sp-4); }
@media (min-width: 960px) { .world-map { grid-template-columns: 1.4fr 1fr; } }
.world-map__svg { width: 100%; height: auto; background: var(--c-sand-200); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.world-map__svg text { fill: var(--c-espresso-900); font-family: var(--ff-sans); }
.world-map__svg .spokes { stroke: var(--c-amber-500); opacity: 0.85; }
.world-map__svg .pin { fill: var(--c-amber-600); }
.world-map__svg .home { fill: var(--c-espresso-900); }
.world-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.world-legend li { padding: var(--sp-2) var(--sp-3); background: var(--c-paper-50); border: 1px solid var(--color-border); border-left: 3px solid var(--c-amber-500); border-radius: var(--radius-md); font-size: var(--fs-ui); }
.world-legend strong { display: block; }

/* --- About: four pillars ------------------------------------------------ */
.pillars { list-style: none; margin: var(--sp-4) 0 0; padding: 0; display: grid; gap: var(--sp-3); }
@media (min-width: 768px) { .pillars { grid-template-columns: repeat(4, 1fr); } }
.pillar { padding: var(--sp-3); background: var(--c-paper-50); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.pillar h3 { font-size: var(--fs-ui); margin: 0 0 var(--sp-1); }
.pillar p { font-size: var(--fs-ui); color: var(--c-bark-700); margin: 0; }

/* --- Visual collections gallery (home) --------------------------------- */
.collections { list-style: none; margin: var(--sp-4) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); }
@media (min-width: 768px) { .collections { grid-template-columns: repeat(4, 1fr); } }
.collection { position: relative; display: flex; align-items: flex-end; aspect-ratio: 4 / 5; padding: var(--sp-3); border-radius: var(--radius-lg); overflow: hidden; text-decoration: none; color: var(--c-cream-100);
  background: linear-gradient(180deg, rgba(43,26,16,0.05), rgba(43,26,16,0.78)), var(--c-sand-200); }
.collection:hover { color: var(--c-cream-100); box-shadow: var(--shadow-lift); }
.collection__label { font-family: var(--ff-serif); font-weight: var(--fw-semibold); font-size: var(--fs-subheading); position: relative; z-index: 1; }

/* --- Photo mosaic (from tree → workshop → shelves) --------------------- */
.mosaic__head { margin-bottom: var(--sp-1); }
.mosaic__intro { max-width: 62ch; color: var(--c-bark-700); margin-bottom: var(--sp-4); }
.mosaic { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 38vw; gap: var(--sp-2); }
@media (min-width: 768px) { .mosaic { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 190px; } }
.mosaic__tile { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: var(--c-sand-200); display: block; text-decoration: none; }
.mosaic__tile--big { grid-column: span 2; grid-row: span 2; }
.mosaic__tile--wide { grid-column: span 2; }
.mosaic__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-base) var(--ease-out); }
a.mosaic__tile:hover .mosaic__img { transform: scale(1.05); }
.mosaic__label { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: var(--sp-3) var(--sp-2) var(--sp-2);
  color: var(--c-cream-100); font-family: var(--ff-serif); font-weight: var(--fw-semibold); font-size: var(--fs-ui);
  background: linear-gradient(transparent, rgba(43, 26, 16, 0.82)); }
.mosaic__tile--big .mosaic__label { font-size: var(--fs-subheading); }

/* --- Collections: real images (layer over the gradient placeholder) ---- */
.collection__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform var(--dur-base) var(--ease-out); }
.collection:hover .collection__img { transform: scale(1.05); }
.collection::after { content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, rgba(43, 26, 16, 0.06) 38%, rgba(43, 26, 16, 0.82)); }
.collection__label { position: relative; z-index: 1; }

/* --- Instagram: real images ------------------------------------------- */
.ig__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform var(--dur-base) var(--ease-out); }
.ig__link--img:hover .ig__img { transform: scale(1.06); }
.ig__link--img .ig__caption { position: relative; z-index: 1; width: 100%; padding: var(--sp-1); margin: calc(-1 * var(--sp-2)); margin-top: 0;
  background: linear-gradient(transparent, rgba(43, 26, 16, 0.72)); }

/* --- Header language toggle -------------------------------------------- */
/* Keep the action controls single-line now that the lang toggle shares the row. */
.nav__cta, .nav__login { white-space: nowrap; }
.lang-toggle { display: inline-flex; align-items: center; gap: 4px; margin-left: var(--sp-2); font-size: var(--fs-ui); font-weight: var(--fw-semibold); white-space: nowrap; }
.lang-toggle__sep { color: var(--color-border-dark); }
.lang-toggle a, .lang-toggle span { text-decoration: none; padding: 2px 4px; border-radius: 4px; }
.lang-toggle a[aria-current="true"] { color: var(--c-espresso-900); background: var(--c-sand-200); }
.lang-toggle a:not([aria-current]) { color: var(--c-bark-700); }
.lang-toggle .is-disabled { color: var(--color-border-dark); cursor: not-allowed; }
@media (max-width: 1179px) {
  .lang-toggle { margin: var(--sp-2) 0 0; }
}


/* === art.css === */
/* ==========================================================================
   ArtisRaw — Art Direction layer (Phase 11, Addendum v1.1). Tokens only.
   Olyfo visual language on the ArtisRaw B2B skeleton: statement hero, color-
   block mosaic, block-formula arrow links, buyer voices, two-column quote.
   ========================================================================== */

/* --- Color-block field surfaces (§4 measured combos) ------------------- */
.field--sand     { background: var(--c-sand-200);   color: var(--c-espresso-900); }
.field--espresso { background: var(--c-espresso-900); color: var(--c-cream-100); }
.field--amber    { background: var(--c-amber-500);   color: var(--c-espresso-900); }
.field--clay     { background: var(--c-clay-700);    color: var(--c-cream-100); }
.field--cacao    { background: var(--c-cacao-950);   color: var(--c-cream-100); }

/* --- Arrow link (§5 block formula) ------------------------------------- */
.arrow-link { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-ui); font-weight: var(--fw-semibold); text-decoration: none; color: var(--c-espresso-900); }
.arrow-link:hover { color: var(--c-bark-700); }
.field--espresso .arrow-link, .field--clay .arrow-link, .field--cacao .arrow-link, .on-dark .arrow-link { color: var(--c-cream-100); }
.field--espresso .arrow-link:hover, .field--clay .arrow-link:hover, .field--cacao .arrow-link:hover, .on-dark .arrow-link:hover { color: var(--c-amber-500); }
.arrow-link__arrow { transition: transform 150ms var(--ease-out); }
.arrow-link:hover .arrow-link__arrow { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .arrow-link__arrow { transition: none; } }

/* --- Statement hero (§3) ----------------------------------------------- */
.statement-hero { position: relative; display: flex; align-items: flex-end; min-height: 76vh; overflow: hidden; background: var(--c-espresso-900); }
.statement-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.8) contrast(1.05); }
.statement-hero::after { content: ""; position: absolute; inset: 0; background: var(--c-espresso-900); mix-blend-mode: multiply; opacity: 0.66; }
.statement-hero__inner { position: relative; z-index: 1; width: 100%; padding-block: var(--sp-7) var(--sp-5); }
.statement-hero__eyebrow { color: var(--c-amber-500); margin-bottom: var(--sp-2); }
.statement-hero__statement { font-family: var(--ff-serif); font-weight: var(--fw-bold); font-size: var(--fs-display-l); line-height: 1.04; text-transform: lowercase; color: var(--c-amber-500); margin: 0; max-width: 16ch; }
@media (min-width: 768px) { .statement-hero__statement { font-size: var(--fs-display-xl); } }
.statement-hero__support { font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--c-cream-100); max-width: 52ch; margin-top: var(--sp-3); }
.statement-hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); align-items: center; margin-top: var(--sp-4); }
.statement-hero__trust { margin-top: var(--sp-5); }
.statement-hero__trust .trust-strip { margin: 0; }

/* --- Color-block mosaic (§4): 50/50 field ↔ photo, alternating --------- */
.color-block { display: grid; grid-template-columns: 1fr; }
.color-block__photo { position: relative; min-height: 280px; background: var(--c-sand-200); }
.color-block__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.color-block__field { display: flex; flex-direction: column; justify-content: center; padding: var(--sp-5); }
.color-block__eyebrow { margin-bottom: var(--sp-2); }
.field--sand .color-block__eyebrow, .field--amber .color-block__eyebrow { color: var(--c-bark-700); }
.field--espresso .color-block__eyebrow, .field--clay .color-block__eyebrow, .field--cacao .color-block__eyebrow { color: var(--c-amber-500); }
.color-block__heading { font-family: var(--ff-serif); font-size: var(--fs-heading); line-height: var(--lh-heading, 1.2); margin-bottom: var(--sp-2); }
.color-block__body { max-width: 46ch; margin-bottom: var(--sp-3); }
@media (min-width: 860px) {
  .color-block { grid-template-columns: 1fr 1fr; }
  .color-block__field { padding: var(--sp-7); min-height: 480px; }
  .color-block--field-left .color-block__field { order: -1; } /* default: photo left, field right */
}

/* --- Section opener (§9.1 intro typography) ---------------------------- */
.section-opener { max-width: 62ch; margin-bottom: var(--sp-5); }
.section-opener h2 { font-family: var(--ff-serif); font-size: var(--fs-heading); }
@media (min-width: 768px) { .section-opener h2 { font-size: var(--fs-display-l); } }
.section-opener .lead { margin-top: var(--sp-2); color: var(--c-bark-700); }

/* --- Ready-to-Ship SKU strip (§6) -------------------------------------- */
.sku-strip__intro { font-family: var(--ff-serif); font-size: var(--fs-heading); max-width: 30ch; margin-bottom: var(--sp-4); }
@media (max-width: 767px) {
  .sku-strip .sku-grid.grid { display: flex; gap: var(--sp-3); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--sp-2); }
  .sku-strip .sku-grid.grid > [class*="col-"] { flex: 0 0 80%; scroll-snap-align: start; }
}

/* --- Buyer voices (§6): one quote per viewport ------------------------- */
.voices__track { display: flex; gap: var(--sp-3); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--sp-2); margin: 0; list-style: none; }
.voice { flex: 0 0 100%; scroll-snap-align: center; margin: 0; padding: var(--sp-5); background: var(--c-paper-50); border: 1px solid var(--color-border); border-radius: var(--radius-lg); text-align: center; }
@media (min-width: 860px) { .voice { flex-basis: 66%; } }
.voice__stars { color: var(--c-amber-600); letter-spacing: 2px; margin: 0 0 var(--sp-2); }
.voice__quote { font-family: var(--ff-serif); font-size: var(--fs-subheading); line-height: var(--lh-lead); color: var(--c-espresso-900); margin: 0; }
.voice__by { margin-top: var(--sp-3); font-size: var(--fs-ui); color: var(--c-bark-700); }
.voice__by strong { color: var(--c-espresso-900); }

/* --- Two-column quote block (§9.1) ------------------------------------- */
.quote-block { display: grid; gap: var(--sp-5); align-items: start; }
@media (min-width: 900px) { .quote-block { grid-template-columns: 1fr 1.1fr; gap: var(--sp-6); } }
.quote-block__intro h2 { font-family: var(--ff-serif); font-size: var(--fs-heading); }
@media (min-width: 768px) { .quote-block__intro h2 { font-size: var(--fs-display-l); } }
.quote-block__benefits { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: grid; gap: var(--sp-2); }
.quote-block__benefits li { position: relative; padding-left: 1.7em; font-weight: var(--fw-semibold); }
.quote-block__benefits li::before { content: "✓"; position: absolute; left: 0; color: var(--c-amber-600); }
.quote-block__card { background: var(--c-paper-50); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--sp-4); box-shadow: var(--shadow-lift); }
.quote-block__card .quote-form__heading { margin-top: 0; }

/* --- Footer: large wordmark + worded trust strip (§6) ------------------ */
.site-footer__wordmark--lg { font-size: var(--fs-display-l); line-height: 1; }
.footer-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2) var(--sp-5); list-style: none; margin: 0; padding: var(--sp-5) 0 0; }
.footer-trust li { display: inline-flex; align-items: center; gap: var(--sp-1); font-family: var(--ff-serif); font-weight: var(--fw-semibold); color: var(--c-sand-200); }
.footer-trust svg { color: var(--c-amber-500); }

/* --- ISO 9001 trust badge (Figma motif, re-skinned to brand) -----------
   Figma used corporate blue (#1D6FE0) — recoloured to espresso disc /
   amber ring / cream type so the mark belongs to the palette. */
.iso-badge {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 116px; height: 116px; border-radius: 50%; text-align: center;
  background: var(--c-espresso-900); color: var(--c-cream-100);
  border: 4px solid var(--c-amber-500); box-shadow: var(--shadow-lift);
  transform: rotate(8deg); font-family: var(--ff-sans);
}
.iso-badge__arc  { font-size: 0.625rem; font-weight: var(--fw-bold); letter-spacing: 0.2em; color: var(--c-amber-500); }
.iso-badge__iso  { font-size: 1.75rem; font-weight: var(--fw-bold); line-height: 1; margin: 2px 0; }
.iso-badge__year { font-size: 0.6875rem; font-weight: var(--fw-bold); letter-spacing: 0.04em; }
/* Hero placement: pinned to the lower-right of a photo hero. */
.iso-badge--hero { position: absolute; right: var(--sp-3); bottom: var(--sp-4); z-index: 2; }
@media (max-width: 768px) { .iso-badge--hero { position: static; margin-top: var(--sp-3); } }

/* Home hero: large blue ISO badge centred over the hero (per reference). */
.photo-hero[data-hero="home-hero"] .iso-badge--hero {
  background: #1b5fa8; color: #ffffff; border-color: #ffffff;
}
.photo-hero[data-hero="home-hero"] .iso-badge--hero .iso-badge__arc { color: #ffffff; }
@media (min-width: 769px) {
  .photo-hero[data-hero="home-hero"] .iso-badge--hero {
    left: auto; bottom: auto; top: 50%; right: 8%;
    transform: translateY(-50%) rotate(0deg);
    width: 150px; height: 150px; border-width: 5px;
  }
  .photo-hero[data-hero="home-hero"] .iso-badge--hero .iso-badge__arc  { font-size: 0.625rem; }
  .photo-hero[data-hero="home-hero"] .iso-badge--hero .iso-badge__iso  { font-size: 2.125rem; }
  .photo-hero[data-hero="home-hero"] .iso-badge--hero .iso-badge__year { font-size: 0.8125rem; }
}

/* --- Reveal-on-scroll utility (Figma .reveal → .in), reduced-motion safe -
   JS adds .reveal to mark, IntersectionObserver toggles .is-visible. Without
   JS or with reduced motion, content is shown unconditionally. */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out); }
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } }


/* === figma.css === */
/* ==========================================================================
   ArtisRaw — Figma visual integration (Phase 12). Tokens only.
   Figma component language ported onto our skeleton: captioned grids, trio
   wayfinding band, value/stat cards, QC timeline, feature quote, product strip.
   ========================================================================== */

/* --- Steps: numbered variant (Figma big corner numeral) ----------------- */
.steps--numbered .step { display: block; padding-bottom: var(--sp-5); overflow: hidden; }
.steps--numbered .step__num {
  position: absolute; right: var(--sp-2); bottom: var(--sp-1);
  font-size: 2.75rem; color: var(--c-sand-200); line-height: 1; pointer-events: none;
}
.steps--numbered .step__body { position: relative; z-index: 1; }

/* --- Captioned image grid (Figma .cap-grid) ----------------------------- */
.caption-grid__intro { max-width: 60ch; }
.caption-grid { display: grid; gap: var(--sp-3); grid-template-columns: repeat(2, 1fr); margin-top: var(--sp-4); }
@media (min-width: 900px) { .caption-grid { grid-template-columns: repeat(4, 1fr); } }
.caption-grid__tile { position: relative; margin: 0; display: block; }
.caption-grid__img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius-sm); display: block; }
.caption-grid__cap {
  position: absolute; left: var(--sp-1); right: var(--sp-1); bottom: var(--sp-1);
  background: var(--c-paper-50); color: var(--c-espresso-900);
  font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: var(--tracking-micro);
  text-transform: uppercase; padding: var(--sp-1) var(--sp-2); border-radius: var(--radius-sm);
}

/* --- Trio CTA band (Figma .trio) ---------------------------------------- */
.trio-band { display: grid; grid-template-columns: 1fr; }
@media (min-width: 820px) { .trio-band { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 820px) { .trio-band--wide-first { grid-template-columns: 2fr 1fr 1fr; } }
.trio-band__tile {
  min-height: 190px; padding: var(--sp-3); text-decoration: none;
  display: flex; flex-direction: column; justify-content: space-between;
  font-weight: var(--fw-bold); font-size: var(--fs-ui);
  transition: color 150ms var(--ease-out);
}
.trio-band__label { font-family: var(--ff-serif); font-size: var(--fs-subheading); line-height: var(--lh-subheading); max-width: 18ch; }
.trio-band__cue { font-size: var(--fs-ui); display: inline-flex; align-items: center; gap: var(--sp-1); }
.trio-band__cue .arrow-link__arrow { transition: transform 150ms var(--ease-out); }
.trio-band__tile:hover .arrow-link__arrow { transform: translateX(4px); }
.trio-band__tile--espresso { background: var(--c-espresso-900); color: var(--c-cream-100); }
.trio-band__tile--olive    { background: var(--c-olive-600);    color: var(--c-cream-100); }
.trio-band__tile--sand     { background: var(--c-sand-200);     color: var(--c-espresso-900); }
.trio-band__tile--clay     { background: var(--c-clay-700);     color: var(--c-cream-100); }
.trio-band__tile--espresso:hover,
.trio-band__tile--olive:hover,
.trio-band__tile--clay:hover { color: var(--c-amber-500); }
.trio-band__tile--espresso:hover .trio-band__cue,
.trio-band__tile--olive:hover .trio-band__cue,
.trio-band__tile--clay:hover .trio-band__cue { color: var(--c-amber-500); }
.trio-band__tile--sand:hover .trio-band__cue { color: var(--c-bark-700); }
@media (prefers-reduced-motion: reduce) { .trio-band__tile:hover .arrow-link__arrow { transform: none; } }

/* --- Value cards (Figma About .value-grid) ------------------------------ */
.value-cards { display: grid; gap: var(--sp-3); grid-template-columns: 1fr; margin-top: var(--sp-4); }
@media (min-width: 768px) { .value-cards { grid-template-columns: 1fr 1fr; } }
.value-card { padding: var(--sp-4); border-radius: var(--radius-sm); color: var(--c-cream-100); }
.value-card__title { color: var(--c-cream-100); font-size: var(--fs-subheading); margin: 0 0 var(--sp-1); }
.value-card__body { color: var(--c-sand-200); font-size: var(--fs-ui); margin: 0; }
.value-card--0 { background: var(--c-espresso-900); }
.value-card--1 { background: var(--c-olive-600); }
.value-card--2 { background: var(--c-bark-700); }
.value-card--3 { background: var(--c-espresso-800); }

/* --- Stat cards (Figma About "More than a workshop") -------------------- */
.stat-cards__intro { max-width: 78ch; }
.stat-cards { display: grid; gap: var(--sp-3); grid-template-columns: repeat(2, 1fr); margin-top: var(--sp-4); }
@media (min-width: 900px) { .stat-cards { grid-template-columns: repeat(4, 1fr); } }
.stat-card { background: var(--c-paper-50); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--sp-3); }
.stat-card__label { display: block; margin-bottom: var(--sp-1); }
.stat-card__value { font-family: var(--ff-serif); font-size: var(--fs-heading); line-height: 1; display: block; margin-bottom: var(--sp-1); }
.stat-card__note { font-size: var(--fs-ui); color: var(--c-bark-700); }

/* --- QC timeline (Figma Process .qc-grid) ------------------------------- */
.qc-timeline__intro { max-width: 70ch; }
.qc-timeline { list-style: none; margin: var(--sp-4) 0 0; padding: 0; display: grid; gap: var(--sp-2); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .qc-timeline { grid-template-columns: repeat(6, 1fr); } }
.qc-check { background: var(--c-paper-50); border-top: 3px solid var(--c-amber-500); border-radius: var(--radius-sm); padding: var(--sp-2); box-shadow: var(--shadow-card); }
.qc-check__title { font-size: var(--fs-ui); font-weight: var(--fw-bold); margin: 0 0 var(--sp-1); }
.qc-check__body { font-size: var(--fs-micro); line-height: var(--lh-body); color: var(--c-bark-700); margin: 0; }

/* --- Feature testimonial (Figma .testimonial) --------------------------- */
.feature-quote { display: grid; grid-template-columns: 1fr; }
@media (min-width: 820px) { .feature-quote { grid-template-columns: 1fr 1fr; } }
.feature-quote__img { width: 100%; height: 100%; object-fit: cover; min-height: 320px; display: block; }
.feature-quote__field { background: var(--c-paper-50); padding: var(--sp-6) var(--sp-5); display: flex; flex-direction: column; justify-content: center; }
.feature-quote__head { font-size: var(--fs-heading); margin: 0 0 var(--sp-2); }
.feature-quote__quote { margin: 0 0 var(--sp-2); font-size: var(--fs-lead); line-height: var(--lh-lead); max-width: 48ch; }
.feature-quote__by { font-size: var(--fs-ui); color: var(--c-bark-700); margin: 0 0 var(--sp-2); }
@media (min-width: 820px) {
  .feature-quote--field-left .feature-quote__field { order: 1; }
  .feature-quote--field-left .feature-quote__photo { order: 2; }
}

/* --- Language switcher (flag dropdown, native <details>) ---------------- */
.lang-switch { position: relative; }
.lang-switch__summary { display: inline-flex; align-items: center; gap: var(--sp-1); cursor: pointer; list-style: none; padding: var(--sp-1); border-radius: var(--radius-sm); font-size: var(--fs-ui); font-weight: var(--fw-semibold); color: var(--c-espresso-900); }
.lang-switch__summary::-webkit-details-marker { display: none; }
.lang-switch__summary::marker { content: ""; }
.lang-switch__summary:hover { background: var(--c-sand-200); }
.lang-switch__flag { width: 20px; height: 14px; border-radius: 2px; flex: none; box-shadow: 0 0 0 1px rgba(43, 26, 16, 0.12); object-fit: cover; }
.lang-switch__chev { transition: transform var(--dur-fast) var(--ease-out); }
.lang-switch[open] .lang-switch__chev { transform: rotate(180deg); }
.lang-switch__menu { list-style: none; margin: var(--sp-1) 0 0; padding: var(--sp-1); }
.lang-switch__opt { display: flex; align-items: center; gap: var(--sp-1); padding: var(--sp-1) var(--sp-2); border-radius: var(--radius-sm); text-decoration: none; white-space: nowrap; font-weight: var(--fw-semibold); color: var(--c-bark-700); }
.lang-switch__opt:hover { background: var(--c-sand-200); color: var(--c-espresso-900); }
.lang-switch__opt[aria-current="true"] { color: var(--c-espresso-900); }
.lang-switch__opt.is-disabled { color: var(--color-border-dark); cursor: not-allowed; opacity: 0.55; }
.lang-switch__opt.is-disabled:hover { background: none; }
.lang-switch__opt.is-disabled .lang-switch__flag { filter: grayscale(1); }
@media (min-width: 1180px) {
  .lang-switch__menu { position: absolute; top: 100%; right: 0; min-width: 170px; background: var(--c-paper-50); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lift); z-index: var(--z-drawer); }
}

/* --- Inner-page photo hero (Figma .hero-page) --------------------------- */
.photo-hero { position: relative; isolation: isolate; overflow: hidden; color: var(--c-cream-100); min-height: 460px; display: flex; align-items: center; padding: calc(var(--header-height) + var(--sp-6)) 0 var(--sp-6); }
.photo-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.photo-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(43, 26, 16, 0.55), rgba(43, 26, 16, 0.8)); }
.photo-hero__inner { width: 100%; }
.photo-hero__eyebrow { color: var(--c-amber-500); }
.photo-hero__title { font-family: var(--ff-serif); font-size: var(--fs-display-l); line-height: var(--lh-display-l); font-weight: var(--fw-bold); color: var(--c-amber-500); max-width: 18ch; margin: 0 0 var(--sp-2); }
.photo-hero__support { max-width: 56ch; margin: 0 0 var(--sp-3); }
.photo-hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); align-items: center; margin: 0; }
.photo-hero__alt { color: var(--c-cream-100); }
.photo-hero__trust { margin-top: var(--sp-4); }
.photo-hero__trust .trust-strip { margin: 0; }

/* Differentiator slabs below the full-height hero — revealed on scroll.
   Olive slab, bold cream number, cream text, line icon (per reference). */
.hero-cards { position: relative; z-index: 3; margin-top: var(--sp-6); margin-bottom: var(--sp-7); }
.hero-cards__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
@media (min-width: 880px) { .hero-cards__grid { grid-template-columns: repeat(4, 1fr); } }
.hero-card { background: var(--c-clay-700); color: var(--c-cream-100); border-radius: var(--radius-lg); box-shadow: var(--shadow-lift); padding: var(--sp-4) var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-1); }
.hero-card__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-2); }
.hero-card__num { font-family: var(--ff-serif); font-weight: var(--fw-bold); font-size: 2.75rem; line-height: 1; color: var(--c-cream-100); }
.hero-card__icon { width: 2rem; height: 2rem; opacity: .9; }
.hero-card__icon svg { width: 100%; height: 100%; display: block; }
.hero-card__title { font-family: var(--ff-serif); font-size: var(--fs-subheading); color: var(--c-cream-100); margin: 0; }
.hero-card__text { color: var(--c-cream-100); opacity: .85; margin: 0; }

/* Product mosaic head: heading left, "Discover our product" link right (PDF). */
.mosaic-section__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-2) var(--sp-4); margin-bottom: var(--sp-4); }
.mosaic-section__head h2 { font-family: var(--ff-serif); font-size: var(--fs-heading); margin: 0; }
@media (min-width: 768px) { .mosaic-section__head h2 { font-size: var(--fs-display-l); } }

/* Home intro: editorial two-column — heading left, copy split into paragraphs right. */
.home-intro__head h2 { font-family: var(--ff-serif); font-size: var(--fs-heading); margin: 0; }
.home-intro__body > p { color: var(--c-bark-700); max-width: 64ch; }
.home-intro__body > p + p { margin-top: var(--sp-3); }
.home-intro__note { margin-top: var(--sp-4); }
@media (min-width: 880px) {
	.home-intro { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-5) clamp(var(--sp-4), 6vw, var(--sp-7)); align-items: start; }
	.home-intro__head { position: sticky; top: calc(var(--header-height) + var(--sp-4)); }
	.home-intro__head h2 { font-size: var(--fs-display-l); }
}

/* Home hero: full-viewport, larger type (PDF). Scoped so inner-page heroes keep their size. */
.photo-hero[data-hero="home-hero"] {
  min-height: calc(100vh - var(--header-height));
  min-height: calc(100svh - var(--header-height));
  padding: 0;                                    /* image bleeds to edges; spacing moves to inner */
}
.hero-carousel[data-hero="home-hero"] .hero-carousel__slide .photo-hero__inner {
  padding: calc(var(--header-height) + var(--sp-4)) var(--sp-3) var(--sp-5);
}
.photo-hero[data-hero="home-hero"] .photo-hero__title { font-size: clamp(2.75rem, 7vw, 5rem); line-height: 1.05; max-width: 16ch; }
.photo-hero[data-hero="home-hero"] .photo-hero__support { font-size: clamp(1.125rem, 2vw, 1.5rem); line-height: 1.4; font-weight: var(--fw-regular); max-width: 50ch; }

/* --- About intro (centered editorial prose) ----------------------------- */
.about-intro { max-width: 78ch; margin-inline: auto; text-align: center; }
.about-intro h2 { font-size: var(--fs-heading); margin-top: var(--sp-4); }
.about-intro h2:first-child { margin-top: 0; }

/* --- Services intro (PDF: two lead paragraphs under section head) ------- */
.services-intro .lead { max-width: 78ch; }
.services-intro .lead + .lead { margin-top: var(--sp-3); }

/* --- Certification block (Figma About .cert) ---------------------------- */
.cert-block { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 820px) { .cert-block { grid-template-columns: 0.8fr 1.2fr; } }
.cert-block__img { width: 100%; height: auto; border-radius: var(--radius-sm); box-shadow: var(--shadow-lift); background: var(--c-paper-50); }
.cert-block__list { padding-left: var(--sp-3); margin: var(--sp-2) 0 var(--sp-3); }
.cert-block__list li { margin-bottom: var(--sp-1); }

/* --- Feature testimonial: dark "Stories" variant (Figma .story-band) ---- */
.feature-quote--dark .feature-quote__field { background: var(--c-espresso-900); }
.feature-quote--dark .feature-quote__head { color: var(--c-amber-500); }
.feature-quote--dark .feature-quote__quote { color: var(--c-cream-100); }
.feature-quote--dark .feature-quote__by { color: var(--c-sand-200); }
.feature-quote__cta { margin: var(--sp-1) 0 0; }

/* --- Hero-products strip (Figma .product-strip) ------------------------- */
.product-strip { display: grid; gap: var(--sp-2); grid-template-columns: repeat(2, 1fr); margin-top: var(--sp-4); }
@media (min-width: 900px) { .product-strip { grid-template-columns: repeat(5, 1fr); } }
.product-strip__card { background: var(--c-sand-200); padding: var(--sp-2); display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); }
.product-strip__img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; mix-blend-mode: multiply; }
.product-strip__cta { margin-top: var(--sp-3); }

/* Custom-woodworking feature: left photo stack + tall hero photo, with a
   semi-transparent clay text panel overlapping the photos (WoodCraft ref).
   Panel = clay #854D27 @ ~92% so the photo reads faintly through it. */
.cw-feature__media { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.cw-feature__stack { display: grid; gap: var(--sp-3); }
.cw-feature__img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-md); }
.cw-feature__panel { background: rgba(133, 77, 39, 0.92); color: #fff; padding: var(--sp-5); }
.cw-feature__title { color: #fff; font-family: var(--ff-serif); font-weight: var(--fw-bold); font-size: clamp(2.25rem, 1.2rem + 3.4vw, 3.5rem); line-height: 1.06; letter-spacing: -0.01em; margin-bottom: var(--sp-3); }
.cw-feature__text { color: #fff; font-size: var(--fs-lead); line-height: var(--lh-body, 1.6); margin-bottom: var(--sp-5); max-width: 46ch; }

@media (min-width: 980px) {
  .cw-feature { display: grid; grid-template-columns: repeat(12, 1fr); align-items: center; }
  .cw-feature__media { grid-column: 1 / 8; grid-row: 1; grid-template-columns: 0.85fr 1.15fr; align-items: stretch; }
  .cw-feature__stack { grid-template-rows: 1.35fr 0.65fr; }   /* tall top, short bottom, per ref */
  .cw-feature__hero { min-height: 620px; }
  /* Panel spans cols 6–13, overlapping the hero photo (cols ~6–7) with z-index. */
  .cw-feature__panel { grid-column: 6 / 13; grid-row: 1; z-index: 2; align-self: center; padding: clamp(var(--sp-5), 4vw, var(--sp-7)); box-shadow: var(--shadow-lift); }
}