@charset "UTF-8";
/* ==========================================================================
   หจก.เอ็นพี บัวโฟม ดีไซน์ — NP Bua Foam Design
   Luxury Mix & Match theme · White / Beige / Gold
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts — how to switch the site to Kanin
   --------------------------------------------------------------------------
   Kanin is the brand face, but it is a licensed font that no public CDN
   serves, so nothing here can fetch it for you. Until the files exist the
   site renders in Kanit (Google Fonts) — the closest widely available Thai
   loopless face, and what --font-th falls back to.

   TO ENABLE KANIN:
     1. Put Kanin-Light.woff2, Kanin-Regular.woff2, Kanin-Medium.woff2 and
        Kanin-SemiBold.woff2 into  assets/fonts/
     2. Delete the opening and closing comment markers around the block below.

   The @font-face rules stay commented out on purpose: browsers would
   otherwise request four font files that return 404 on every page load.

@font-face {
  font-family: "Kanin";
  src: url("../fonts/Kanin-Light.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Kanin";
  src: url("../fonts/Kanin-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Kanin";
  src: url("../fonts/Kanin-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Kanin";
  src: url("../fonts/Kanin-SemiBold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   2. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* palette */
  --cream:        #FBF8F3;
  --cream-2:      #F6F1E8;
  --beige:        #EDE3D2;
  --beige-deep:   #DFD2BA;
  --sand:         #C9B48E;
  --gold:         #B08D4F;
  --gold-dark:    #8E6F38;
  --gold-light:   #D4B87E;
  --ink:          #1A1713;
  --ink-2:        #4A4238;
  --ink-3:        #7C7266;
  --white:        #FFFFFF;

  --line:         rgba(176, 141, 79, .24);
  --line-soft:    rgba(26, 23, 19, .08);
  --shadow-sm:    0 2px 10px rgba(26, 23, 19, .05);
  --shadow:       0 14px 40px -18px rgba(26, 23, 19, .22);
  --shadow-lg:    0 30px 70px -30px rgba(26, 23, 19, .35);

  /* type */
  --font-th: "Kanin", "Kanit", "Noto Sans Thai", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Cormorant Garamond", "Kanin", "Kanit", Georgia, serif;

  /* metrics */
  --container: 1280px;
  --radius: 4px;
  --radius-lg: 8px;
  /* Sized around the upright logo plus even breathing room above and below. */
  --header-h: 82px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* --------------------------------------------------------------------------
   3. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 20px);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink-2);
  font-family: var(--font-th);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.85;
  letter-spacing: .01em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.is-locked { overflow: hidden; }

img, picture, video, svg { max-width: 100%; display: block; }
img { height: auto; }

a { color: inherit; text-decoration: none; transition: color .3s var(--ease); }
button { font: inherit; color: inherit; cursor: pointer; }

h1, h2, h3, h4, h5 {
  margin: 0;
  color: var(--ink);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -.005em;
}
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; }

::selection { background: var(--gold); color: #fff; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--ink);
  color: #fff;
  padding: .8rem 1.4rem;
  font-size: .9rem;
}
.skip-link:focus { left: 12px; top: 12px; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   4. Layout primitives
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}
.container--narrow { max-width: 880px; }

.section { padding: clamp(64px, 8vw, 116px) 0; position: relative; }
.section--tight { padding: clamp(48px, 6vw, 80px) 0; }
.section--cream  { background: var(--cream); }
.section--sand   { background: var(--cream-2); }
.section--beige  { background: var(--beige); }
.section--ink    { background: var(--ink); color: rgba(255, 255, 255, .72); }
.section--ink h2, .section--ink h3, .section--ink h4 { color: #fff; }

/* hairline divider that reads as a gold rule */
.rule {
  width: 56px; height: 1px;
  background: linear-gradient(90deg, var(--gold), rgba(176, 141, 79, 0));
  border: 0; margin: 0;
}
.rule--center { margin-inline: auto; background: linear-gradient(90deg, rgba(176,141,79,0), var(--gold), rgba(176,141,79,0)); width: 90px; }

.grid { display: grid; gap: clamp(20px, 2.4vw, 32px); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   5. Typography helpers
   -------------------------------------------------------------------------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .7em;
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: 1rem;
}
.eyebrow::before {
  content: ""; width: 26px; height: 1px; background: var(--gold); flex: none;
}
/* Thai carries its vowels and tone marks above and below the consonant, so the
   .26em tracking that suits a Latin all-caps label pulls those marks visually
   away from the letter they belong to. Tighten it when the label is Thai. */
.eyebrow--th { letter-spacing: .1em; font-size: .8rem; }

.eyebrow--center { justify-content: center; }
.eyebrow--center::after {
  content: ""; width: 26px; height: 1px; background: var(--gold); flex: none;
}
.section--ink .eyebrow { color: var(--gold-light); }
.section--ink .eyebrow::before, .section--ink .eyebrow::after { background: var(--gold-light); }

/* The "mix & match": an English serif line paired with the Thai title */
.display {
  font-family: var(--font-display);
  font-weight: 300;
  font-style: italic;
  letter-spacing: .01em;
  color: var(--gold-dark);
  line-height: 1.2;
}
.section--ink .display { color: var(--gold-light); }

.title-xl { font-size: clamp(2rem, 4.6vw, 3.4rem); font-weight: 300; line-height: 1.22; }
.title-lg { font-size: clamp(1.6rem, 3.2vw, 2.5rem); font-weight: 300; line-height: 1.28; }
.title-md { font-size: clamp(1.25rem, 2vw, 1.6rem); font-weight: 400; }
.title-sm { font-size: 1.1rem; font-weight: 500; }

.lead {
  font-size: clamp(1rem, 1.2vw, 1.08rem);
  color: var(--ink-2);
  line-height: 1.95;
  max-width: 62ch;
}
.section--ink .lead { color: rgba(255, 255, 255, .72); }

.muted { color: var(--ink-3); }
.text-center { text-align: center; }
.text-center .lead { margin-inline: auto; }
.text-center .rule { margin-inline: auto; }

.section-head { margin-bottom: clamp(36px, 4vw, 56px); }
.section-head .display { margin-bottom: .35rem; font-size: clamp(1.1rem, 1.6vw, 1.35rem); }
.section-head h2 { margin-bottom: 1.1rem; }
.section-head .rule { margin-bottom: 1.4rem; }

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--gold);
  --btn-fg: #fff;
  --btn-bd: var(--gold);
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  padding: .95em 2.1em;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--radius);
  font-size: .9rem;
  font-weight: 400;
  letter-spacing: .08em;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: background .35s var(--ease), color .35s var(--ease),
              border-color .35s var(--ease), transform .35s var(--ease),
              box-shadow .35s var(--ease);
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -14px rgba(176, 141, 79, .85);
}
.btn:active { transform: translateY(0); }
.btn svg { width: 1.05em; height: 1.05em; flex: none; }

.btn--dark  { --btn-bg: var(--ink); --btn-bd: var(--ink); }
.btn--dark:hover { box-shadow: 0 12px 26px -14px rgba(26, 23, 19, .7); }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--line); }
.btn--ghost:hover { --btn-bg: var(--ink); --btn-fg: #fff; --btn-bd: var(--ink); }

.btn--light { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255,255,255,.45); }
.btn--light:hover { --btn-bg: #fff; --btn-fg: var(--ink); --btn-bd: #fff; }

.btn--sm { padding: .7em 1.5em; font-size: .82rem; }
.btn--block { width: 100%; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .55em;
  font-size: .85rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold-dark); font-weight: 400;
}
.link-arrow::after {
  content: "→"; transition: transform .35s var(--ease); font-size: 1.05em;
}
.link-arrow:hover { color: var(--ink); }
.link-arrow:hover::after { transform: translateX(6px); }

/* --------------------------------------------------------------------------
   7. Social icons + language switcher
   -------------------------------------------------------------------------- */
.socials { display: flex; align-items: center; gap: 12px; }
.socials a {
  width: 26px; height: 26px; display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .18); border-radius: 50%;
  transition: all .3s var(--ease);
}
.socials a:hover { background: var(--gold); border-color: var(--gold); color: #fff; }
.socials svg { width: 12px; height: 12px; }

/* Language switcher — lives in the header, so it is styled for the light
   cream background rather than the dark bar it used to sit on. */
.lang {
  display: inline-flex; align-items: center; flex: none;
  border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}
.lang button {
  background: none; border: 0; padding: .45em .85em;
  font-size: .74rem; font-weight: 400; letter-spacing: .1em;
  color: var(--ink-3); line-height: 1.2;
  transition: all .3s var(--ease);
}
.lang button[aria-pressed="true"] { background: var(--gold); color: #fff; }
.lang button:not([aria-pressed="true"]):hover {
  color: var(--ink); background: rgba(176, 141, 79, .09);
}

/* --------------------------------------------------------------------------
   8. Header
   -------------------------------------------------------------------------- */
.header {
  position: sticky; top: 0; z-index: 70;
  background: rgba(251, 248, 243, .92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
  transition: box-shadow .35s var(--ease), background .35s var(--ease);
}
/* Scrolling only firms up the bar — a shadow and a more opaque background.
   The header height and the logo stay put, so nothing moves under the
   visitor's eye as they scroll. */
.header.is-stuck {
  box-shadow: var(--shadow-sm);
  background: rgba(251, 248, 243, .98);
}
/* Three columns at every screen size: menu button · emblem · controls.
   Grid rather than flex, because `1fr auto 1fr` centres the middle column on
   the page axis. With space-between the emblem would only sit halfway between
   its neighbours, and the controls on the right are far wider than the single
   button on the left — so it would drift left of true centre. */
.header .container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  height: var(--header-h);
}
/* grid-row: 1 is not optional here. Auto-placement never moves backwards, so
   an item explicitly put in a later column pushes anything after it onto a
   second row and doubles the header height. */
.header__menu { grid-column: 1; grid-row: 1; justify-self: start; }
.brand        { grid-column: 2; grid-row: 1; justify-self: center; }
.header__cta  { grid-column: 3; grid-row: 1; justify-self: end; }

.brand { display: flex; align-items: center; flex: none; }
.brand img {
  /* One fixed size per breakpoint — the logo does not resize on scroll.
     The source PNG has a real alpha channel, so no blend mode is needed to
     knock out a background: it sits cleanly on any colour. */
  width: auto; height: 56px;
}

.header__menu { display: flex; align-items: center; }
.header__cta { display: flex; align-items: center; gap: 14px; flex: none; }

/* The bars were 1px hairlines inside a barely-there border, which all but
   disappeared against the cream header. Solid 2px bars, a tinted face and a
   stronger edge make it read as a button people notice and press. */
/* Flex column with an explicit gap, not grid. Grid stretches its implicit
   rows to fill the button, so the spacing between the bars depended on the
   button's height instead of the gap — and the close animation folded them
   into a ">" rather than an "×". */
.burger {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 5px;
  width: 48px; height: 48px;
  background: rgba(176, 141, 79, .08);
  border: 1px solid rgba(176, 141, 79, .45);
  border-radius: var(--radius);
  padding: 0; flex: none;
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
.burger:hover, .burger[aria-expanded="true"] {
  background: var(--gold); border-color: var(--gold);
}
.burger:hover span, .burger[aria-expanded="true"] span { background: #fff; }

.burger span {
  display: block; width: 22px; height: 2px; border-radius: 1px;
  background: var(--ink); margin: 0; flex: none;
  transition: transform .35s var(--ease), opacity .25s var(--ease), background .3s var(--ease);
}
/* Bar centres sit 7px apart (2px bar + 5px gap), so the outer two travel
   exactly 7px to land on the middle one and cross. */
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 960px) {
  :root { --header-h: 76px; }
  /* The quote button goes; the drawer carries a full-width call button and
     the floating gold call button is on screen anyway. */
  .header__cta .btn { display: none; }
  .brand img { height: 52px; }
  .burger { width: 44px; height: 44px; }
}
@media (max-width: 420px) {
  :root { --header-h: 68px; }
  .header .container { padding-inline: 14px; gap: 10px; }
  .brand img { height: 46px; }
  .burger { width: 42px; height: 42px; }
}

/* slide-out drawer */
.drawer {
  position: fixed; inset: 0; z-index: 90;
  visibility: hidden; pointer-events: none;
}
.drawer.is-open { visibility: visible; pointer-events: auto; }
.drawer__scrim {
  position: absolute; inset: 0;
  background: rgba(26, 23, 19, .55);
  opacity: 0; transition: opacity .4s var(--ease);
}
.drawer.is-open .drawer__scrim { opacity: 1; }
/* Slides in from the left, matching the side the menu button sits on —
   a panel arriving from the opposite edge to the button that opened it
   reads as a different control. */
.drawer__panel {
  position: absolute; top: 0; left: 0; bottom: 0;
  width: min(380px, 86vw);
  background: var(--cream);
  padding: 26px 26px 40px;
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform .45s var(--ease);
  display: flex; flex-direction: column; gap: 24px;
  box-shadow: 24px 0 60px -30px rgba(26, 23, 19, .45);
}
.drawer.is-open .drawer__panel { transform: none; }
.drawer__top { display: flex; align-items: center; justify-content: space-between; }
.drawer__top img { mix-blend-mode: multiply; }
.drawer__close {
  width: 40px; height: 40px; background: none;
  border: 1px solid var(--line); border-radius: var(--radius);
  font-size: 1.1rem; color: var(--ink); line-height: 1;
}
.drawer__close:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.drawer nav { display: flex; flex-direction: column; }
.drawer nav a {
  padding: 1em 0; font-size: 1.02rem; color: var(--ink-2);
  border-bottom: 1px solid var(--line-soft);
}
.drawer nav a[aria-current="page"] { color: var(--gold-dark); font-weight: 400; }
.drawer__meta { font-size: .86rem; color: var(--ink-3); line-height: 1.9; }
.drawer__meta strong { color: var(--ink); font-weight: 400; }
.drawer .socials a { border-color: var(--line); color: var(--ink-2); }

/* --------------------------------------------------------------------------
   9. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: clamp(520px, 78vh, 780px);
  display: flex; align-items: center;
  overflow: hidden;
  background: var(--ink);
}
.hero__media { position: absolute; inset: 0; }
.hero__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 58%;
  animation: heroZoom 18s var(--ease) forwards;
}
@keyframes heroZoom { from { transform: scale(1.08); } to { transform: scale(1); } }
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(20, 17, 13, .82) 0%, rgba(20, 17, 13, .62) 38%, rgba(20, 17, 13, .18) 72%, rgba(20,17,13,.35) 100%),
    linear-gradient(to top, rgba(20, 17, 13, .55), transparent 45%);
}
/* The facts strip is pinned to the bottom of the hero, so the copy needs to
   reserve room for it. English runs ~2 lines longer than Thai in the H1, which
   is exactly when the buttons would otherwise slide under the strip. */
.hero__inner { position: relative; z-index: 2; width: 100%; padding: 90px 0 150px; }
.hero__box { max-width: 680px; color: rgba(255, 255, 255, .8); }
.hero .eyebrow { color: var(--gold-light); }
.hero .eyebrow::before { background: var(--gold-light); }
.hero__display {
  font-family: var(--font-display); font-style: italic; font-weight: 300;
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  color: var(--gold-light); margin-bottom: .5rem; letter-spacing: .02em;
}
.hero h1 {
  color: #fff;
  font-size: clamp(2.1rem, 5.2vw, 3.85rem);
  font-weight: 300; line-height: 1.18; letter-spacing: -.01em;
  margin-bottom: 1.3rem;
  text-wrap: balance;
}
/* The highlighted phrase in the H1.
   Thai has no italic form. Cormorant Garamond carries no Thai glyphs either,
   so an italic rule here makes the browser fall back to Kanit and fake the
   slant by skewing the letterforms — which distorts the vowel marks. Thai
   therefore stays upright and is emphasised by colour alone; English keeps
   the real Cormorant italic, which is a genuine cut of the typeface. */
.hero h1 em {
  font-style: normal;
  font-weight: 400;
  color: var(--gold-light);
}
html[lang="en"] .hero h1 em {
  font-family: var(--font-display);
  font-style: italic;
}
.hero__lead {
  font-size: clamp(1rem, 1.3vw, 1.12rem);
  /* 1.95 left the lines floating apart; 1.8 still clears Thai tone marks.
     The 54ch cap made the measure narrower than the box for no reason, so the
     lead now runs the full width of .hero__box. */
  line-height: 1.8; max-width: 100%; margin-bottom: 2.2rem;
  color: rgba(255, 255, 255, .78);
}
/* Thai breaks only where we type a space, so a two-line paragraph here came out
   97% + 10% — a single word stranded on its own line. Balancing evens the two
   lines instead. `text-wrap: pretty` was measured on this very text and moved
   nothing in Chromium, so balance is the only lever that works. A paragraph
   that already fits on one line is untouched. */
.hero__lead p { text-wrap: balance; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }

.hero__facts {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  background: rgba(20, 17, 13, .42);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.hero__facts ul {
  list-style: none; display: grid; grid-template-columns: repeat(4, 1fr);
}
.hero__facts li {
  padding: 22px 18px; text-align: center; color: rgba(255, 255, 255, .7);
  border-left: 1px solid rgba(255, 255, 255, .1);
}
.hero__facts li:first-child { border-left: 0; }
.hero__facts b {
  display: block; font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 500;
  color: var(--gold-light); line-height: 1.1; margin-bottom: .2rem;
}
.hero__facts span { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; }
@media (max-width: 760px) {
  .hero__facts ul { grid-template-columns: repeat(2, 1fr); }
  .hero__facts li:nth-child(3) { border-left: 0; }
  .hero__facts li { border-top: 1px solid rgba(255,255,255,.1); padding: 16px 12px; }
  .hero__facts li:nth-child(-n+2) { border-top: 0; }
  .hero__facts span { font-size: .68rem; letter-spacing: .08em; }
}
@media (max-width: 640px) {
  /* On a phone the facts strip wraps to two rows and the headline runs long,
     so a reserved padding would be a guess that breaks at some text length.
     Drop the strip back into normal flow instead — it then sits under the
     copy and can never cover it, whatever the language or screen height. */
  .hero { min-height: 0; display: block; }
  .hero__inner { padding: 64px 0 40px; }
  .hero__facts { position: static; }
  .hero__actions .btn { flex: 1 1 100%; }
}

/* page hero (inner pages) */
.pagehero {
  position: relative; background: var(--ink); overflow: hidden;
  padding: clamp(66px, 9vw, 120px) 0 clamp(52px, 7vw, 86px);
}
.pagehero__media { position: absolute; inset: 0; }
.pagehero__media img { width: 100%; height: 100%; object-fit: cover; }
.pagehero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(20,17,13,.9) 0%, rgba(20,17,13,.74) 50%, rgba(20,17,13,.5) 100%);
}
.pagehero__inner { position: relative; z-index: 2; max-width: 760px; }
.pagehero .eyebrow { color: var(--gold-light); }
.pagehero .eyebrow::before { background: var(--gold-light); }
.pagehero h1 {
  color: #fff; font-size: clamp(1.9rem, 4.2vw, 3.1rem);
  font-weight: 300; margin-bottom: 1.1rem;
}
.pagehero p { color: rgba(255, 255, 255, .76); max-width: 58ch; line-height: 1.95; }

/* breadcrumbs */
.crumbs {
  background: var(--cream-2);
  border-bottom: 1px solid var(--line-soft);
  font-size: .82rem; color: var(--ink-3);
}
.crumbs ol {
  list-style: none; display: flex; flex-wrap: wrap; align-items: center;
  gap: .5em; padding: 14px 0;
}
.crumbs li { display: inline-flex; align-items: center; gap: .5em; }
.crumbs li + li::before { content: "/"; color: var(--line); }
.crumbs a:hover { color: var(--gold-dark); }
.crumbs [aria-current="page"] { color: var(--ink); }

/* --------------------------------------------------------------------------
   10. Cards
   -------------------------------------------------------------------------- */
.card {
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
  border-color: var(--line);
}
.card__media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--beige); }
.card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s var(--ease);
}
.card:hover .card__media img { transform: scale(1.06); }
.card__badge {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  background: rgba(251, 248, 243, .94);
  color: var(--gold-dark);
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  padding: .45em 1em; border-radius: 2px;
}
.card__body { padding: 26px 26px 28px; display: flex; flex-direction: column; gap: .8rem; flex: 1; }
.card__body h3 { font-size: 1.16rem; font-weight: 400; }
.card__body p { font-size: .93rem; color: var(--ink-3); line-height: 1.85; margin: 0; }
.card__body .link-arrow { margin-top: auto; padding-top: .4rem; }

.card__num {
  font-family: var(--font-display); font-size: 1.05rem; font-style: italic;
  color: var(--gold); letter-spacing: .08em;
}

/* icon card (no image) */
.icard {
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: clamp(26px, 3vw, 38px);
  display: flex; flex-direction: column; gap: 1rem;
  position: relative; overflow: hidden;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.icard::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--gold); transform: scaleY(0); transform-origin: top;
  transition: transform .5s var(--ease);
}
.icard:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: var(--line); }
.icard:hover::before { transform: scaleY(1); }
.icard__icon {
  width: 46px; height: 46px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%;
  color: var(--gold-dark); flex: none;
}
.icard__icon svg { width: 20px; height: 20px; }
.icard h3 { font-size: 1.1rem; font-weight: 400; }
.icard p { font-size: .92rem; color: var(--ink-3); line-height: 1.85; margin: 0; }

.section--ink .icard {
  background: rgba(255, 255, 255, .035);
  border-color: rgba(255, 255, 255, .12);
}
.section--ink .icard p { color: rgba(255, 255, 255, .62); }
.section--ink .icard__icon { border-color: rgba(212, 184, 126, .4); color: var(--gold-light); }

/* --------------------------------------------------------------------------
   11. Split feature (image + text)
   -------------------------------------------------------------------------- */
.split {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 76px); align-items: center;
}
.split--reverse .split__media { order: 2; }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: 32px; }
  .split--reverse .split__media { order: 0; }
}

.split__media { position: relative; }
.split__media img {
  width: 100%; border-radius: var(--radius); box-shadow: var(--shadow);
}
.split__media--stack { display: grid; grid-template-columns: 1.15fr .85fr; gap: 16px; align-items: end; }
/* Three photos: the feature shot runs the full width, the other two share the
   row below it. The pair is forced to one ratio with object-fit so a portrait
   and a landscape still line up — left to themselves they differ by 160px and
   the row looks broken. */
.split__media--trio { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.split__media--trio img:first-child { grid-column: 1 / -1; }
.split__media--trio img:not(:first-child) { aspect-ratio: 4 / 3; object-fit: cover; }
/* Chromium's Thai line-breaker has no entry for the loanword สมาร์ทบอร์ด, so it
   breaks it at arbitrary points — "แผ่นสมาร์ทบ / อร์ด". Keeping the word whole is
   the only fix; word joiners would have to go between every character. */
.nb { white-space: nowrap; }
.split__frame {
  position: absolute; inset: 22px -22px -22px 22px;
  border: 1px solid var(--line); border-radius: var(--radius);
  z-index: -1; pointer-events: none;
}
@media (max-width: 560px) {
  .split__media--stack { grid-template-columns: 1fr; }
  .split__frame { display: none; }
}

/* A plain list of many short items — two columns so eleven entries read as a
   compact block rather than a long thin ladder. */
.bullets {
  list-style: none;
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: .55rem 2rem;
  margin-top: 1.5rem;
}
@media (max-width: 620px) { .bullets { grid-template-columns: 1fr; } }
.bullets li {
  position: relative; padding-left: 1.4em;
  font-size: .95rem; color: var(--ink-2); line-height: 1.7;
}
.bullets li::before {
  content: ""; position: absolute; left: 0; top: .72em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold);
}
.section--ink .bullets li { color: rgba(255, 255, 255, .74); }

.checklist { list-style: none; display: grid; gap: .85rem; margin-top: 1.6rem; }
.checklist li {
  display: flex; gap: .85em; align-items: flex-start;
  font-size: .95rem; color: var(--ink-2); line-height: 1.75;
}
.checklist svg { width: 18px; height: 18px; color: var(--gold); flex: none; margin-top: .32em; }
.section--ink .checklist li { color: rgba(255, 255, 255, .74); }
.section--ink .checklist svg { color: var(--gold-light); }

/* --------------------------------------------------------------------------
   12. Stats
   -------------------------------------------------------------------------- */
.stats { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.stats li { background: var(--cream); padding: clamp(26px, 3vw, 40px) 20px; text-align: center; }
.stats b {
  display: block; font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.4vw, 2.8rem); font-weight: 500;
  color: var(--gold-dark); line-height: 1.05; margin-bottom: .45rem;
}
.stats span { font-size: .84rem; color: var(--ink-3); letter-spacing: .05em; }
@media (max-width: 700px) { .stats { grid-template-columns: repeat(2, 1fr); } }

/* --------------------------------------------------------------------------
   13. Process steps
   -------------------------------------------------------------------------- */
.steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 2.6vw, 34px); counter-reset: s; }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }
.steps li { position: relative; padding-top: 34px; }
.steps li::before {
  counter-increment: s; content: "0" counter(s);
  position: absolute; top: 0; left: 0;
  font-family: var(--font-display); font-style: italic;
  font-size: 1.5rem; color: var(--gold); line-height: 1;
}
.steps li::after {
  content: ""; position: absolute; top: 12px; left: 46px; right: -17px; height: 1px;
  background: linear-gradient(90deg, var(--line), rgba(176,141,79,0));
}
.steps li:last-child::after { display: none; }
@media (max-width: 900px) {
  .steps li:nth-child(2n)::after { display: none; }
}
@media (max-width: 520px) { .steps li::after { display: none; } }
.steps h3 { font-size: 1.05rem; font-weight: 400; margin-bottom: .5rem; }
.steps p { font-size: .9rem; color: var(--ink-3); line-height: 1.8; margin: 0; }
.section--ink .steps p { color: rgba(255, 255, 255, .62); }
.section--ink .steps li::after { background: linear-gradient(90deg, rgba(212,184,126,.4), transparent); }

/* --------------------------------------------------------------------------
   14. Gallery / portfolio
   -------------------------------------------------------------------------- */
.filters {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  margin-bottom: clamp(30px, 4vw, 46px);
}
.filters button {
  background: none; border: 1px solid var(--line-soft);
  border-radius: 999px; padding: .6em 1.5em;
  font-size: .86rem; font-weight: 300; color: var(--ink-3);
  letter-spacing: .03em;
  transition: all .35s var(--ease);
}
.filters button:hover { border-color: var(--gold); color: var(--ink); }
.filters button[aria-pressed="true"] {
  background: var(--ink); border-color: var(--ink); color: #fff;
}

/* Uniform grid — every tile the same shape (homepage teaser). */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.8vw, 22px); }
@media (max-width: 900px) { .gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .gallery { grid-template-columns: 1fr; } }

/* Mosaic — mixed portrait and landscape (the full portfolio).
   CSS columns rather than grid: a grid row stretches to its tallest tile and
   leaves a hole under every shorter one, which is exactly the ragged look a
   gallery of mixed-orientation photography must not have. Columns let each
   photo keep its real shape and stack flush. */
.gallery--mosaic {
  display: block;
  column-count: 3;
  column-gap: clamp(14px, 1.8vw, 22px);
}
.gallery--mosaic .gitem {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin-bottom: clamp(14px, 1.8vw, 22px);
}
@media (max-width: 900px) { .gallery--mosaic { column-count: 2; } }
@media (max-width: 560px) { .gallery--mosaic { column-count: 1; } }

.gitem {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--radius); background: var(--beige);
  aspect-ratio: 4 / 3; cursor: zoom-in; border: 0; padding: 0;
  width: 100%;
}
.gitem--tall { aspect-ratio: 3 / 4; }
/* Catalogue sheets. Every code and dimension printed on them has to stay
   readable, so the tile takes the sheet's own ratio instead of being cropped
   to 4:3, and two per row keeps them large enough to scan before enlarging. */
.gallery--sheets { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 560px) { .gallery--sheets { grid-template-columns: 1fr; } }
.gitem--sheet { aspect-ratio: 1492 / 1054; background: var(--white); }
/* Catalogue thumbnails on the homepage. Deliberately NOT .gitem: main.js binds
   the lightbox to every .gitem on a page, and the homepage already carries the
   portfolio preview — sharing the class would make "next" step from a
   catalogue sheet into a project photograph. These link through instead. */
.sheets { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(14px, 1.8vw, 22px); }
@media (max-width: 560px) { .sheets { grid-template-columns: 1fr; } }
.sheets a {
  display: block; overflow: hidden; border-radius: var(--radius);
  border: 1px solid var(--line-soft); background: var(--white);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.sheets a:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: var(--line); }
.sheets img { width: 100%; height: auto; display: block; }
.gitem--sheet img { object-fit: contain; }
@media (max-width: 560px) { .gitem--tall { aspect-ratio: 4 / 3; } }
.gitem img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.gitem:hover img { transform: scale(1.07); }
.gitem__overlay {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(to top, rgba(20,17,13,.88) 0%, rgba(20,17,13,.35) 42%, transparent 70%);
  opacity: 0; transition: opacity .45s var(--ease);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 24px; text-align: left; color: #fff;
}
.gitem:hover .gitem__overlay, .gitem:focus-visible .gitem__overlay { opacity: 1; }
.gitem__overlay small {
  font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-light); margin-bottom: .35rem;
}
.gitem__overlay strong { font-size: 1.02rem; font-weight: 400; line-height: 1.5; }
.gitem.is-hidden { display: none; }

/* lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(14, 12, 10, .95);
  display: none; align-items: center; justify-content: center;
  padding: 5vh 5vw;
}
.lightbox.is-open { display: flex; }
.lightbox__fig { margin: 0; max-width: 100%; max-height: 100%; text-align: center; }
.lightbox__fig img {
  max-width: 100%; max-height: 78vh; object-fit: contain;
  border-radius: var(--radius); margin-inline: auto;
}
.lightbox__fig figcaption {
  color: rgba(255, 255, 255, .72); font-size: .9rem; margin-top: 1.1rem; line-height: 1.6;
}
.lightbox__fig figcaption small {
  display: block; color: var(--gold-light);
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; margin-bottom: .3rem;
}
.lightbox button {
  position: absolute; background: none; color: #fff;
  border: 1px solid rgba(255, 255, 255, .28); border-radius: 50%;
  width: 46px; height: 46px; display: grid; place-items: center;
  font-size: 1.2rem; line-height: 1; transition: all .3s var(--ease);
}
.lightbox button:hover { background: var(--gold); border-color: var(--gold); }
.lightbox__close { top: 3vh; right: 4vw; }
.lightbox__prev { left: 3vw; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 3vw; top: 50%; transform: translateY(-50%); }
@media (max-width: 640px) {
  .lightbox__prev { left: 12px; } .lightbox__next { right: 12px; }
  .lightbox button { width: 40px; height: 40px; }
}

/* --------------------------------------------------------------------------
   14b. Showcase video
   -------------------------------------------------------------------------- */
.videobox {
  max-width: 900px; margin-inline: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--ink);
  box-shadow: var(--shadow-lg);
  line-height: 0;
}
.videobox video {
  width: 100%; height: auto;
  aspect-ratio: 958 / 540;
  display: block;
  background: #000;
}
/* The coating clip is filmed upright. Left on the landscape ratio above it
   would be letterboxed into a thin strip inside a tall column, so portrait
   footage gets its own ratio. */
.videobox--portrait { max-width: 100%; }
.videobox--portrait video { aspect-ratio: 540 / 960; }

/* --------------------------------------------------------------------------
   15. Products
   -------------------------------------------------------------------------- */
.product {
  background: var(--white); border: 1px solid var(--line-soft);
  border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.product:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: var(--line); }
.product__media { aspect-ratio: 1 / 1; overflow: hidden; background: var(--cream-2); }
.product__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.product:hover .product__media img { transform: scale(1.04); }
.product__body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.product__code {
  font-family: var(--font-display); font-style: italic;
  font-size: .95rem; color: var(--gold-dark); letter-spacing: .08em;
}
.product__body h3 { font-size: 1.06rem; font-weight: 400; }
.product__size {
  display: inline-flex; align-items: center; gap: .5em;
  font-size: .82rem; color: var(--ink-3);
  border-top: 1px solid var(--line-soft); padding-top: .7rem; margin-top: auto;
}
.product__size svg { width: 14px; height: 14px; color: var(--gold); }

/* --------------------------------------------------------------------------
   16. FAQ
   -------------------------------------------------------------------------- */
.faq { display: grid; gap: 12px; }
.faq details {
  background: var(--white);
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  transition: border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.faq details[open] { border-color: var(--line); box-shadow: var(--shadow-sm); }
.faq summary {
  list-style: none; cursor: pointer;
  padding: 1.15em 3.2em 1.15em 1.5em;
  font-size: 1rem; font-weight: 400; color: var(--ink);
  position: relative; line-height: 1.7;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 1.5em; top: 1.65em;
  width: 11px; height: 11px;
  border-right: 1px solid var(--gold); border-bottom: 1px solid var(--gold);
  transform: rotate(45deg); transition: transform .35s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); top: 1.9em; }
.faq summary:hover { color: var(--gold-dark); }
.faq .faq__a {
  padding: 0 1.5em 1.5em; font-size: .94rem; color: var(--ink-3); line-height: 1.9;
}
.faq .faq__a p { margin-bottom: .8em; }

/* --------------------------------------------------------------------------
   17. Newsletter + CTA band
   -------------------------------------------------------------------------- */
.newsletter {
  background: var(--ink); color: rgba(255, 255, 255, .72);
  border-radius: var(--radius-lg); overflow: hidden;
  padding: clamp(34px, 5vw, 62px);
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 56px); align-items: center;
  position: relative;
}
.newsletter::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(900px 340px at 88% -10%, rgba(176, 141, 79, .22), transparent 62%);
  pointer-events: none;
}
.newsletter > * { position: relative; }
@media (max-width: 860px) { .newsletter { grid-template-columns: 1fr; } }
.newsletter h2 { color: #fff; font-size: clamp(1.45rem, 2.4vw, 2rem); margin-bottom: .9rem; }
.newsletter p { font-size: .95rem; line-height: 1.9; margin: 0; }

.subscribe { display: flex; gap: 10px; flex-wrap: wrap; }
.subscribe input {
  flex: 1 1 240px; min-width: 0;
  padding: .95em 1.2em;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--radius);
  color: #fff; font: inherit; font-size: .94rem;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.subscribe input::placeholder { color: rgba(255, 255, 255, .42); }
.subscribe input:focus { outline: none; border-color: var(--gold); background: rgba(255, 255, 255, .1); }
.subscribe .btn { flex: none; }
.subscribe small {
  flex: 1 1 100%; font-size: .78rem; color: rgba(255, 255, 255, .45); line-height: 1.7;
}

.ctaband { position: relative; overflow: hidden; background: var(--ink); }
.ctaband__media { position: absolute; inset: 0; }
.ctaband__media img { width: 100%; height: 100%; object-fit: cover; }
.ctaband__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(20,17,13,.93), rgba(20,17,13,.7) 55%, rgba(20,17,13,.55));
}
.ctaband__inner {
  position: relative; z-index: 2;
  padding: clamp(56px, 7vw, 100px) 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 36px; flex-wrap: wrap;
}
.ctaband h2 { color: #fff; font-size: clamp(1.6rem, 3.2vw, 2.4rem); margin-bottom: .7rem; }
.ctaband p { color: rgba(255, 255, 255, .72); max-width: 48ch; margin: 0; }
.ctaband__actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* the "profiles · sizes · prices" line — a list of topics, not a sentence */
.ctaband__tags {
  margin-top: .8rem !important;
  font-size: .92rem;
  letter-spacing: .02em;
  color: var(--gold-light) !important;
}

/* A short run of selling points under a checklist, separated by bullets. Ruled
   off above so it reads as a summary line rather than one more list item. */
.tagline {
  margin-top: 1.7rem; padding-top: 1.2rem;
  border-top: 1px solid var(--line);
  font-size: .95rem; letter-spacing: .02em;
  color: var(--gold-dark);
}
.section--ink .tagline { color: var(--gold-light); border-top-color: rgba(255, 255, 255, .14); }

/* brand signature closing the page */
.ctaband__sign {
  position: relative; z-index: 2;
  margin-top: clamp(38px, 5vw, 64px);
  padding: clamp(28px, 3.4vw, 40px) 0 clamp(52px, 6vw, 88px);
  border-top: 1px solid rgba(255, 255, 255, .16);
  text-align: center;
}
.ctaband__sign p { max-width: none; margin: 0; }
.ctaband__name {
  font-size: clamp(1.2rem, 2.2vw, 1.55rem);
  font-weight: 500; letter-spacing: .06em;
  color: #fff !important;
}
.ctaband__what {
  margin-top: .35rem !important;
  font-size: .95rem;
  color: rgba(255, 255, 255, .68) !important;
}
.ctaband__slogan {
  margin-top: 1rem !important;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.45rem);
  color: var(--gold-light) !important;
  line-height: 1.5;
}
/* Thai has no italic cut, so the serif face would be slanted by the browser;
   keep it upright in Thai and let the real italic show in English. */
.ctaband__slogan { font-style: normal; }
html[lang="en"] .ctaband__slogan { font-style: italic; }

/* --------------------------------------------------------------------------
   18. Forms
   -------------------------------------------------------------------------- */
.form { display: grid; gap: 18px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 620px) { .form__row { grid-template-columns: 1fr; } }

.field { display: grid; gap: .45rem; }
.field label {
  font-size: .84rem; color: var(--ink-2); letter-spacing: .04em;
}
.field label .req { color: var(--gold-dark); }
.field input, .field select, .field textarea {
  width: 100%;
  padding: .92em 1.1em;
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  font: inherit; font-size: .95rem; color: var(--ink);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.field textarea { resize: vertical; min-height: 140px; line-height: 1.8; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23B08D4F' stroke-width='1.4' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.1em center;
  background-size: 12px;
  padding-right: 2.6em;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(176, 141, 79, .12);
}
.field input:user-invalid, .field textarea:user-invalid { border-color: #C0563F; }

.form__note { font-size: .8rem; color: var(--ink-3); line-height: 1.75; }
.form__note a { color: var(--gold-dark); text-decoration: underline; text-underline-offset: 3px; }

.form-status {
  display: none;
  padding: .95em 1.2em; border-radius: var(--radius);
  font-size: .9rem; line-height: 1.7;
}
.form-status.is-shown { display: block; }
.form-status--ok { background: rgba(120, 150, 110, .12); border: 1px solid rgba(120, 150, 110, .4); color: #40603A; }
.form-status--err { background: rgba(192, 86, 63, .09); border: 1px solid rgba(192, 86, 63, .35); color: #9A4231; }
.newsletter .form-status--ok { background: rgba(212, 184, 126, .14); border-color: rgba(212, 184, 126, .4); color: var(--gold-light); }
.newsletter .form-status--err { background: rgba(255, 140, 110, .12); border-color: rgba(255, 140, 110, .38); color: #FFB3A0; }

/* honeypot */
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }

/* --------------------------------------------------------------------------
   19. Contact blocks
   -------------------------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(28px, 3vw, 44px); align-items: start; }
@media (max-width: 940px) { .contact-grid { grid-template-columns: 1fr; } }

/* Both columns are framed cards. Stretch them to a common height and let the
   map take up whatever space the details column does not, so the two sides
   finish on the same line instead of one stopping short. */
@media (min-width: 941px) {
  .contact-grid { align-items: stretch; }
  .contact-grid > .panel { display: flex; flex-direction: column; }
  .contact-grid > .panel > .map { flex: 1; min-height: 340px; }
  .contact-grid > .panel > .map iframe { height: 100%; }
}

.infolist { list-style: none; display: grid; gap: 4px; }
.infolist li {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 20px 0; border-bottom: 1px solid var(--line-soft);
}
.infolist li:last-child { border-bottom: 0; }
.infolist__icon {
  width: 42px; height: 42px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%; color: var(--gold-dark);
}
.infolist__icon svg { width: 17px; height: 17px; }
.infolist__body { min-width: 0; }
.infolist h3 {
  font-size: .76rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 400; margin-bottom: .3rem;
}
.infolist p, .infolist a { font-size: .97rem; color: var(--ink); line-height: 1.8; margin: 0; }
.infolist a:hover { color: var(--gold-dark); }

.map {
  border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line-soft); background: var(--beige);
  line-height: 0;
}
.map iframe { width: 100%; height: clamp(320px, 42vw, 460px); border: 0; display: block; }

.panel {
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: clamp(26px, 3.4vw, 44px);
}

/* --------------------------------------------------------------------------
   20. Testimonials
   -------------------------------------------------------------------------- */
.quote {
  background: var(--white); border: 1px solid var(--line-soft);
  border-radius: var(--radius); padding: clamp(26px, 3vw, 38px);
  display: flex; flex-direction: column; gap: 1.1rem;
  position: relative;
}
.quote::before {
  content: "“"; font-family: var(--font-display);
  font-size: 4.2rem; line-height: .8; color: var(--line);
  position: absolute; top: 18px; right: 24px;
}
.quote p { font-size: .96rem; line-height: 1.95; color: var(--ink-2); margin: 0; position: relative; }
.quote__by { display: flex; flex-direction: column; gap: .15rem; margin-top: auto; }
.quote__by strong { font-size: .95rem; font-weight: 500; color: var(--ink); }
.quote__by span { font-size: .82rem; color: var(--ink-3); }
.quote__stars { color: var(--gold); font-size: .9rem; letter-spacing: .18em; }

/* --------------------------------------------------------------------------
   21. Rich text (policy / legal pages)
   -------------------------------------------------------------------------- */
.prose { max-width: 78ch; }
.prose h2 {
  font-size: clamp(1.3rem, 2.2vw, 1.7rem); font-weight: 400;
  margin: 2.6rem 0 1rem; padding-top: 1.8rem;
  border-top: 1px solid var(--line-soft);
}
.prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 { font-size: 1.08rem; font-weight: 500; margin: 1.8rem 0 .7rem; }
.prose p, .prose li { font-size: .97rem; line-height: 1.95; color: var(--ink-2); }
.prose ul, .prose ol { margin: 0 0 1.2em; padding-left: 1.4em; }
.prose li { margin-bottom: .55em; }
.prose ul { list-style: none; padding-left: 0; }
.prose ul li { position: relative; padding-left: 1.5em; }
.prose ul li::before {
  content: ""; position: absolute; left: 0; top: .82em;
  width: 6px; height: 1px; background: var(--gold);
}
.prose a { color: var(--gold-dark); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--ink); }
.prose__meta {
  font-size: .85rem; color: var(--ink-3);
  padding: 1em 1.3em; background: var(--cream-2);
  border-left: 2px solid var(--gold); border-radius: 0 var(--radius) var(--radius) 0;
  margin-bottom: 2.4rem;
}

/* --------------------------------------------------------------------------
   22. Error pages
   -------------------------------------------------------------------------- */
.errpage {
  min-height: 74vh; display: flex; align-items: center;
  padding: clamp(60px, 9vw, 120px) 0;
}
.errpage__code {
  font-family: var(--font-display); font-weight: 300; font-style: italic;
  font-size: clamp(5rem, 16vw, 11rem); line-height: .9;
  color: var(--beige-deep); margin-bottom: 1rem;
}
.errpage h1 { font-size: clamp(1.6rem, 3.4vw, 2.5rem); margin-bottom: 1.1rem; }
.errpage .lead { margin-inline: auto; margin-bottom: 2.2rem; }
.errpage__links {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
  margin-top: 2.6rem; padding-top: 2.2rem; border-top: 1px solid var(--line-soft);
}
.errpage__links a {
  font-size: .88rem; color: var(--ink-3);
  padding: .4em .9em; border: 1px solid var(--line-soft); border-radius: 999px;
}
.errpage__links a:hover { border-color: var(--gold); color: var(--gold-dark); }

/* --------------------------------------------------------------------------
   23. Footer
   -------------------------------------------------------------------------- */
.footer { background: var(--ink); color: rgba(255, 255, 255, .58); font-size: .92rem; }
.footer__main {
  padding: clamp(50px, 6vw, 82px) 0 clamp(36px, 4vw, 56px);
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.25fr;
  gap: clamp(28px, 3.4vw, 54px);
}
@media (max-width: 980px) { .footer__main { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__main { grid-template-columns: 1fr; } }

.footer h3 {
  font-size: .78rem; letter-spacing: .2em; text-transform: uppercase;
  color: #fff; font-weight: 400; margin-bottom: 1.4rem;
}
.footer__brand img {
  height: 76px; width: auto; margin-bottom: 1.3rem;
  background: rgba(255, 255, 255, .96); padding: 10px 14px; border-radius: var(--radius);
}
.footer__brand p { font-size: .9rem; line-height: 1.9; max-width: 38ch; }
.footer ul { list-style: none; display: grid; gap: .8rem; }
.footer ul a:hover { color: var(--gold-light); }
.footer__contact li { display: flex; gap: .8em; align-items: flex-start; line-height: 1.8; }
.footer__contact svg { width: 15px; height: 15px; color: var(--gold-light); flex: none; margin-top: .4em; }
.footer .socials { margin-top: 1.5rem; }
.footer .socials a { border-color: rgba(255, 255, 255, .2); }

.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding: 22px 0 26px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  font-size: .82rem; color: rgba(255, 255, 255, .42);
}
.footer__bottom nav { display: flex; gap: 20px; flex-wrap: wrap; }
.footer__bottom a:hover { color: var(--gold-light); }

/* --------------------------------------------------------------------------
   24. Floating actions
   -------------------------------------------------------------------------- */
.dock {
  position: fixed; right: 20px; bottom: 20px; z-index: 80;
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
}

/* ── the single button that opens everything ── */
.dock__toggle {
  width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--gold); color: #fff; border: 0;
  box-shadow: 0 14px 30px -12px rgba(142, 111, 56, .75);
  transition: background .35s var(--ease), transform .35s var(--ease);
  position: relative; flex: none;
}
.dock__toggle:hover { background: var(--gold-dark); transform: translateY(-3px); }
.dock__toggle svg {
  width: 24px; height: 24px; grid-area: 1 / 1;
  transition: opacity .25s var(--ease), transform .35s var(--ease);
}
.dock__toggle-close { opacity: 0; transform: rotate(-90deg); }
.dock__toggle[aria-expanded="true"] { background: var(--ink); }
.dock__toggle[aria-expanded="true"] .dock__toggle-open { opacity: 0; transform: rotate(90deg); }
.dock__toggle[aria-expanded="true"] .dock__toggle-close { opacity: 1; transform: none; }

/* a soft pulse the first time, so the button is noticed without nagging */
.dock__toggle::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid var(--gold); opacity: 0;
  animation: dockPulse 2.6s var(--ease) 1.5s 3;
}
.dock__toggle[aria-expanded="true"]::after { animation: none; }
@keyframes dockPulse {
  0%   { opacity: .55; transform: scale(1); }
  70%  { opacity: 0;   transform: scale(1.45); }
  100% { opacity: 0;   transform: scale(1.45); }
}
@media (prefers-reduced-motion: reduce) {
  .dock__toggle::after { animation: none; }
}

/* ── the panel of channels ──
   Gold ground with white type, as specified. Note that white on #B08D4F
   measures 3.1:1, under the 4.5:1 WCAG AA asks for body text; every value
   below is therefore solid white rather than translucent, so the contrast
   is at least the best this pairing allows. Deepening the ground to
   #8E6F38 would lift white to 4.7:1 and clear AA. */
.dock__panel {
  width: min(300px, calc(100vw - 40px));
  background: var(--gold);
  border: 1px solid var(--gold-dark);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 70px -28px rgba(89, 66, 25, .7);
  padding: 18px 16px 14px;
  display: flex; flex-direction: column; gap: 4px;
  transform-origin: bottom right;
}
.dock__panel[hidden] { display: none; }
.dock__panel.is-open { animation: dockIn .32s var(--ease); }
@keyframes dockIn {
  from { opacity: 0; transform: translateY(14px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

.dock__title {
  margin: 0 0 .6rem; padding: 0 8px;
  font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
  /* hierarchy comes from size and tracking, never from fading the white —
     any transparency here would push the contrast down further still */
  color: #fff;
}

.dock__item {
  display: flex; align-items: center; gap: 13px;
  padding: 10px 8px; border-radius: var(--radius);
  transition: background .25s var(--ease);
}
.dock__item:hover { background: rgba(255, 255, 255, .18); }
.dock__ico {
  width: 38px; height: 38px; flex: none;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .55); border-radius: 50%;
  color: #fff;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.dock__ico svg { width: 17px; height: 17px; }
.dock__item:hover .dock__ico { background: #fff; border-color: #fff; color: var(--gold-dark); }
.dock__text { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.dock__text strong { font-size: .94rem; font-weight: 500; color: #fff; }
.dock__text small { font-size: .78rem; color: #fff; opacity: .95; }

.dock__note {
  margin: .7rem 0 0; padding: .7rem 8px 0;
  border-top: 1px solid rgba(255, 255, 255, .3);
  font-size: .76rem; color: #fff;
}

/* ── back to top ── */
.totop {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; flex: none;
  background: var(--ink); color: #fff; border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: all .35s var(--ease);
}
.totop svg { width: 18px; height: 18px; }
.totop:hover { background: var(--gold); border-color: var(--gold); }
.totop.is-shown { opacity: 1; visibility: visible; transform: none; }

@media (max-width: 640px) {
  .dock { right: 14px; bottom: 14px; gap: 10px; }
  .dock__toggle { width: 54px; height: 54px; }
  .totop { width: 42px; height: 42px; }
  .dock__panel { padding: 16px 14px 12px; }
}

/* --------------------------------------------------------------------------
   25. Scroll reveal

   Every rule here is scoped to .js, a class an inline script in <head> puts
   on <html>. Without that class nothing is hidden, so a visitor whose
   JavaScript failed, was blocked, or simply has not parsed yet still sees a
   complete page rather than blank space where the content should be.
   -------------------------------------------------------------------------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .85s var(--ease), transform .85s var(--ease);
  will-change: opacity, transform;
}
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-reveal][data-delay="1"] { transition-delay: .09s; }
.js [data-reveal][data-delay="2"] { transition-delay: .18s; }
.js [data-reveal][data-delay="3"] { transition-delay: .27s; }
.js [data-reveal][data-delay="4"] { transition-delay: .36s; }
.js [data-reveal][data-delay="5"] { transition-delay: .45s; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   26. Print
   -------------------------------------------------------------------------- */
@media print {
  .header, .drawer, .dock, .ctaband, .newsletter, .footer__main { display: none !important; }
  body { background: #fff; color: #000; }
  .section { padding: 12px 0; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; color: #555; }
}