/*
Theme Name: Fakhruddin & Sons — Atelier
Theme URI: https://fakhruddinandsons.in
Author: Hutaib Technologies
Author URI: https://hutaibtechnologies.com
Description: Atelier theme for Fakhruddin & Sons — fine fabrics, bespoke fitting and school uniforms. Cream, beige and gold with arabesque ornament. No build step, no dependencies.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: Proprietary — commissioned work
Text Domain: fs-atelier
Tags: custom-colors, custom-menu, one-column, two-columns, translation-ready
*/

/* ============================================================
   FAKHRUDDIN & SONS — ATELIER
   Fine fabrics & bespoke fitting
   Global stylesheet
   ------------------------------------------------------------
   01 Tokens
   02 Reset & base
   03 Typography
   04 Buttons, ornaments & utilities
   05 Header / navigation
   06 Fabric textures (swatches)
   07 Hero
   08 Marquee
   09 Sections (heritage, collections, fitting, craft, services, uniforms)
   10 Testimonials
   11 Appointment band
   12 Footer
   13 Inner-page chrome
   14 Fabrics library page
   15 Bespoke page
   16 Atelier page
   17 Appointment page
   18 Reveal animations
   19 Responsive
   20 Uniform shop (catalogue, size chips, bag drawer)
   21 Arabesque (girih tiles, shamsa medallions, dividers, flourishes)
   ============================================================ */

/* ---------- 01 Tokens ---------- */
:root {
  /* surfaces — light only, warm neutrals */
  --ivory:      #FFFCF7;
  --cream:      #FAF5EC;
  --sand:       #F5EEE2;
  --linen:      #EFE6D7;
  --beige:      #E5D8C4;
  --taupe:      #CBB89E;

  /* metallics */
  --gold:       #B08C4F;
  --gold-deep:  #97753C;
  --gold-soft:  #D6BE8E;
  --gold-pale:  #EBDDBE;

  /* ink — warm, never black */
  --ink:        #4A4137;
  --ink-soft:   #6E6355;
  --ink-mute:   #918676;

  /* structure */
  --hair:       rgba(176, 140, 79, .28);
  --hair-soft:  rgba(176, 140, 79, .16);
  --shadow-sm:  0 2px 14px rgba(122, 98, 60, .07);
  --shadow-md:  0 14px 40px rgba(122, 98, 60, .10);
  --shadow-lg:  0 30px 70px rgba(122, 98, 60, .14);

  /* type */
  --display: "Cormorant Garamond", "Times New Roman", serif;
  --sans:    "Jost", "Helvetica Neue", Arial, sans-serif;

  /* rhythm */
  --gutter:  clamp(20px, 5vw, 64px);
  --section: clamp(72px, 10vw, 148px);
  --maxw:    1280px;
  --ease:    cubic-bezier(.22, .61, .36, 1);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.75;
  letter-spacing: .012em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* paper grain — the whole site sits on warm stock */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: .038;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--gold-pale); color: var(--ink); }

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

/* ---------- 03 Typography ---------- */
h1, h2, h3, h4, .display {
  font-family: var(--display);
  font-weight: 300;
  color: var(--ink);
  letter-spacing: -.005em;
  line-height: 1.1;
  margin: 0;
}

h1 { font-size: clamp(2.9rem, 7vw, 5.6rem); }
h2 { font-size: clamp(2.1rem, 4.4vw, 3.5rem); }
h3 { font-size: clamp(1.35rem, 2vw, 1.75rem); line-height: 1.25; }
h4 { font-size: 1.1rem; line-height: 1.35; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 400;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 22px;
}
.eyebrow::before {
  content: "";
  width: 34px;
  height: 1px;
  background: var(--gold);
  opacity: .55;
}
.eyebrow.is-centred { justify-content: center; }
.eyebrow.is-centred::after {
  content: "";
  width: 34px;
  height: 1px;
  background: var(--gold);
  opacity: .55;
}

.lede {
  font-size: clamp(1.02rem, 1.35vw, 1.18rem);
  line-height: 1.85;
  color: var(--ink-soft);
  max-width: 56ch;
}

.italic-note {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.28rem;
  color: var(--gold-deep);
  line-height: 1.6;
}

.sec-head { margin-bottom: clamp(40px, 5vw, 68px); }
.sec-head.is-centred { text-align: center; }
.sec-head.is-centred .lede { margin-inline: auto; }
.sec-head h2 + .lede { margin-top: 20px; }

/* ---------- 04 Buttons, ornaments & utilities ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-narrow { max-width: 940px; }
.section { padding-block: var(--section); position: relative; }
.bg-cream { background: var(--cream); }
.bg-sand  { background: var(--sand); }
.bg-linen { background: var(--linen); }

.btn {
  --btn-fg: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 17px 34px;
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--btn-fg);
  border: 1px solid var(--gold);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color .45s var(--ease), border-color .45s var(--ease);
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .5s var(--ease);
}
.btn:hover::before { transform: scaleX(1); transform-origin: left center; }
.btn:hover { color: var(--ivory); }

.btn-gold { background: var(--gold); border-color: var(--gold); color: var(--ivory); }
.btn-gold::before { background: var(--gold-deep); }
.btn-gold:hover { color: var(--ivory); border-color: var(--gold-deep); }

.btn-sm { padding: 13px 24px; font-size: .66rem; letter-spacing: .18em; }

.btn-line {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-deep);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--hair);
  transition: border-color .4s var(--ease), gap .4s var(--ease);
}
.btn-line svg { width: 18px; height: 8px; transition: transform .4s var(--ease); }
.btn-line:hover { border-color: var(--gold); gap: 18px; }
.btn-line:hover svg { transform: translateX(4px); }

.rule { height: 1px; background: var(--hair-soft); border: 0; margin: 0; }

/* small diamond ornament */
.orn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--gold);
}
.orn::before, .orn::after {
  content: "";
  height: 1px;
  width: clamp(40px, 8vw, 96px);
  background: linear-gradient(90deg, transparent, var(--gold));
  opacity: .5;
}
.orn::after { background: linear-gradient(90deg, var(--gold), transparent); }
.orn i {
  width: 6px; height: 6px;
  background: var(--gold);
  transform: rotate(45deg);
  display: block;
}

.num {
  font-family: var(--display);
  font-size: clamp(2.6rem, 5vw, 3.6rem);
  line-height: 1;
  color: var(--gold);
  opacity: .5;
}

/* ---------- 05 Header / navigation ---------- */
.site-head {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 900;
  transition: background .5s var(--ease), box-shadow .5s var(--ease), padding .5s var(--ease);
  padding-block: 22px;
}
.site-head.is-stuck {
  background: rgba(255, 252, 247, .92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--hair-soft), var(--shadow-sm);
  padding-block: 12px;
}
.head-inner {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.brand { display: flex; align-items: center; gap: 14px; }
.brand-mark {
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--gold);
  border-radius: 50%;
  font-family: var(--display);
  font-size: .95rem;
  letter-spacing: .02em;
  color: var(--gold-deep);
  flex: none;
  transition: background .4s var(--ease), color .4s var(--ease);
}
.brand:hover .brand-mark { background: var(--gold); color: var(--ivory); }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name {
  font-family: var(--display);
  font-size: 1.22rem;
  color: var(--ink);
  letter-spacing: .01em;
}
.brand-sub {
  font-size: .56rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 3px;
}

.nav { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 38px); }
.nav a {
  position: relative;
  font-size: .73rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-block: 6px;
  transition: color .35s var(--ease);
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .4s var(--ease);
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after,
.nav a.is-active::after { transform: scaleX(1); transform-origin: left; }
.nav a.is-active { color: var(--gold-deep); }

.head-cta { display: flex; align-items: center; gap: 16px; }

.burger {
  display: none;
  width: 40px; height: 40px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 6px;
}
.burger span {
  display: block;
  height: 1px;
  background: var(--ink);
  transition: transform .4s var(--ease), opacity .3s var(--ease), width .4s var(--ease);
}
.burger span:nth-child(1) { width: 24px; }
.burger span:nth-child(2) { width: 18px; }
.burger span:nth-child(3) { width: 24px; }
.burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); width: 24px; }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); width: 24px; }

/* mobile drawer */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 890;
  background: var(--cream);
  padding: 128px var(--gutter) 48px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .7s var(--ease);
  pointer-events: none;
}
.drawer.is-open { clip-path: inset(0 0 0 0); pointer-events: auto; }
.drawer a {
  font-family: var(--display);
  font-size: 2rem;
  color: var(--ink);
  padding-block: 14px;
  border-bottom: 1px solid var(--hair-soft);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.drawer.is-open a { opacity: 1; transform: none; }
.drawer.is-open a:nth-child(1) { transition-delay: .18s; }
.drawer.is-open a:nth-child(2) { transition-delay: .24s; }
.drawer.is-open a:nth-child(3) { transition-delay: .30s; }
.drawer.is-open a:nth-child(4) { transition-delay: .36s; }
.drawer.is-open a:nth-child(5) { transition-delay: .42s; }
.drawer-foot {
  margin-top: auto;
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* ---------- 06 Fabric textures (swatches) ---------- */
.swatch {
  position: relative;
  border-radius: 2px;
  background-color: var(--beige);
  overflow: hidden;
  isolation: isolate;
  box-shadow: inset 0 0 0 1px rgba(150, 124, 86, .14);
}
/* soft sheen sweeping over every swatch */
.swatch::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(255, 255, 255, .34) 0%, rgba(255, 255, 255, 0) 44%, rgba(255, 255, 255, 0) 58%, rgba(255, 255, 255, .22) 100%);
  pointer-events: none;
}

.tx-plain {
  background-image:
    repeating-linear-gradient(0deg,   rgba(138,110,70,.30) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg,  rgba(138,110,70,.30) 0 1px, transparent 1px 4px);
  background-color: #E7D8BF;
}
/* fine two-ply poplin — tighter and paler than plain weave */
.tx-poplin {
  background-image:
    repeating-linear-gradient(0deg,  rgba(138,110,70,.22) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(150,118,64,.34) 0 1px, transparent 1px 3px);
  background-color: #EEE3CE;
}
.tx-twill {
  background-image:
    repeating-linear-gradient(48deg, rgba(133,104,62,.42) 0 2px, rgba(255,255,255,.34) 2px 4px, transparent 4px 7px);
  background-color: #DFCCAB;
}
.tx-pin {
  background-image:
    repeating-linear-gradient(90deg, rgba(150,118,64,.72) 0 1px, transparent 1px 13px),
    repeating-linear-gradient(0deg,  rgba(138,110,70,.24) 0 1px, transparent 1px 4px);
  background-color: #E4D5B9;
}
.tx-check {
  background-image:
    repeating-linear-gradient(90deg, rgba(150,118,64,.55) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(0deg,  rgba(150,118,64,.55) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, rgba(138,110,70,.22) 0 1px, transparent 1px 5px);
  background-color: #EBDFC7;
}
.tx-herring {
  background-image:
    repeating-linear-gradient(45deg,  rgba(133,104,62,.46) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(-45deg, rgba(133,104,62,.46) 0 1px, transparent 1px 5px);
  background-size: 12px 12px, 12px 12px;
  background-position: 0 0, 6px 6px;
  background-color: #DDCAA6;
}
.tx-silk {
  background-image:
    repeating-linear-gradient(102deg, rgba(255,255,255,.42) 0 3px, rgba(186,155,102,.34) 3px 9px),
    linear-gradient(140deg, #F0E2C6, #D9C199 55%, #EDE0C6);
}
.tx-linen {
  background-image:
    repeating-linear-gradient(0deg,  rgba(133,104,62,.32) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(133,104,62,.38) 0 2px, transparent 2px 5px);
  background-color: #E6D6B8;
}
.tx-cash {
  background-image:
    radial-gradient(circle at 30% 28%, rgba(255,255,255,.55), transparent 62%),
    repeating-linear-gradient(30deg, rgba(138,110,70,.22) 0 3px, transparent 3px 8px);
  background-color: #E3D3B6;
}
.tx-jacq {
  background-image:
    repeating-conic-gradient(from 45deg at 50% 50%, rgba(150,118,64,.32) 0deg 90deg, transparent 90deg 180deg);
  background-size: 20px 20px;
  background-color: #E8DABD;
}
.tx-gold {
  background-image:
    repeating-linear-gradient(115deg, rgba(150,118,64,.55) 0 2px, transparent 2px 6px),
    linear-gradient(140deg, #EFDFB4, #DCC087 50%, #EDDDB2);
}

/* ---------- 07 Hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: 120px;
  padding-bottom: clamp(56px, 8vw, 96px);
  background:
    radial-gradient(120% 90% at 85% 10%, var(--sand) 0%, transparent 58%),
    radial-gradient(90% 80% at 5% 90%, var(--cream) 0%, transparent 60%),
    var(--ivory);
  overflow: hidden;
}
/* faint woven ground — the hero stays clear of arabesque so the cloth leads */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .5;
  background-image:
    repeating-linear-gradient(0deg,  rgba(176,140,79,.055) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(90deg, rgba(176,140,79,.055) 0 1px, transparent 1px 7px);
  pointer-events: none;
}
.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
  width: 100%;
}
.hero-copy { max-width: 620px; }
.hero h1 { margin-bottom: 26px; }
.hero h1 em {
  font-style: italic;
  color: var(--gold-deep);
  display: block;
}
.hero .lede { margin-bottom: 38px; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }

.hero-meta {
  display: flex;
  gap: clamp(24px, 4vw, 52px);
  margin-top: clamp(44px, 6vw, 68px);
  padding-top: 30px;
  border-top: 1px solid var(--hair-soft);
}
.hero-meta div span {
  display: block;
  font-family: var(--display);
  font-size: 1.9rem;
  color: var(--ink);
  line-height: 1;
}
.hero-meta div small {
  display: block;
  margin-top: 8px;
  font-size: .62rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* layered swatch composition */
.hero-art {
  position: relative;
  aspect-ratio: 4 / 5;
  max-height: 76vh;
}
.hero-art .card {
  position: absolute;
  border-radius: 3px;
  box-shadow: var(--shadow-md);
  border: 1px solid rgba(255, 255, 255, .7);
}
.hero-art .c1 { inset: 0 22% 18% 0; box-shadow: var(--shadow-lg); }
.hero-art .c2 { width: 46%; aspect-ratio: 3/4; right: 0; top: 12%; }
.hero-art .c3 { width: 38%; aspect-ratio: 1/1; left: 12%; bottom: 0; }
.hero-art .tag {
  position: absolute;
  right: 2%;
  bottom: 8%;
  background: var(--ivory);
  border: 1px solid var(--hair);
  border-radius: 2px;
  padding: 16px 22px;
  box-shadow: var(--shadow-md);
  text-align: right;
}
.hero-art .tag b {
  display: block;
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.15rem;
  color: var(--ink);
}
.hero-art .tag small {
  font-size: .58rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
/* gold thread */
.hero-thread {
  position: absolute;
  inset: -6% -12%;
  pointer-events: none;
  z-index: 2;
}
.hero-thread path {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1;
  opacity: .45;
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
  animation: draw 3.4s var(--ease) .5s forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }

.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: .58rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.scroll-hint i {
  width: 1px; height: 44px;
  background: linear-gradient(180deg, var(--gold), transparent);
  animation: drop 2.4s var(--ease) infinite;
  transform-origin: top;
}
@keyframes drop {
  0%   { transform: scaleY(0); opacity: 0; }
  35%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}

/* ---------- 08 Marquee ---------- */
.marquee {
  border-block: 1px solid var(--hair-soft);
  background: var(--cream);
  padding-block: 22px;
  overflow: hidden;
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: slide 42s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span {
  display: inline-flex;
  align-items: center;
  gap: 30px;
  padding-right: 30px;
  font-family: var(--display);
  font-size: clamp(1.05rem, 1.7vw, 1.45rem);
  font-style: italic;
  color: var(--ink-soft);
  white-space: nowrap;
}
.marquee-track span::after {
  content: "";
  width: 5px; height: 5px;
  background: var(--gold);
  transform: rotate(45deg);
  flex: none;
}
@keyframes slide { to { transform: translateX(-50%); } }

/* ---------- 09 Sections ---------- */
/* Heritage */
.heritage-grid {
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: center;
}
.heritage-art { position: relative; }
.heritage-art .swatch { aspect-ratio: 4/5; border-radius: 3px; box-shadow: var(--shadow-md); }
.heritage-art .badge {
  position: absolute;
  right: -18px;
  bottom: 34px;
  width: 138px; height: 138px;
  border-radius: 50%;
  background: var(--ivory);
  border: 1px solid var(--hair);
  display: grid;
  place-items: center;
  text-align: center;
  box-shadow: var(--shadow-md);
}
.heritage-art .badge b {
  display: block;
  font-family: var(--display);
  font-size: 2.4rem;
  font-weight: 400;
  color: var(--gold-deep);
  line-height: 1;
}
.heritage-art .badge small {
  display: block;
  margin-top: 4px;
  font-size: .55rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 44px;
  padding-top: 34px;
  border-top: 1px solid var(--hair-soft);
}
.stat-row b {
  display: block;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.9rem, 3vw, 2.5rem);
  color: var(--gold-deep);
  line-height: 1;
}
.stat-row small {
  display: block;
  margin-top: 10px;
  font-size: .62rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-mute);
  line-height: 1.6;
}

/* Collections */
.coll-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(20px, 2.4vw, 32px);
}
.coll-card {
  background: var(--ivory);
  border: 1px solid var(--hair-soft);
  border-radius: 3px;
  overflow: hidden;
  transition: transform .55s var(--ease), box-shadow .55s var(--ease), border-color .55s var(--ease);
}
.coll-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
  border-color: var(--hair);
}
.coll-card { display: flex; flex-direction: column; }
.coll-card .swatch { aspect-ratio: 4/3.2; flex: none; }
.coll-card .body { padding: 28px 26px 30px; display: flex; flex-direction: column; flex: 1; }
.coll-card .body small {
  font-size: .6rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.coll-card h3 { margin: 12px 0 12px; }
.coll-card p { font-size: .92rem; line-height: 1.8; margin-bottom: 18px; }
.coll-card .meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--hair-soft);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.coll-card .meta b { color: var(--gold-deep); font-weight: 400; }

/* Fitting process */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
  gap: clamp(28px, 3vw, 44px);
  position: relative;
}
.step { position: relative; padding-top: 30px; }
.step::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 1px;
  background: var(--hair-soft);
}
.step::after {
  content: "";
  position: absolute;
  top: -3px; left: 0;
  width: 7px; height: 7px;
  background: var(--gold);
  transform: rotate(45deg);
}
.step .num { display: block; margin-bottom: 14px; }
.step h3 { margin-bottom: 12px; }
.step p { font-size: .93rem; line-height: 1.8; }
.step .dur {
  display: inline-block;
  margin-top: 16px;
  font-size: .6rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-deep);
  padding: 6px 14px;
  border: 1px solid var(--hair);
  border-radius: 40px;
}

/* Craft — offset panels */
.craft-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(20px, 3vw, 36px);
  align-items: center;
}
.craft-a { grid-column: 1 / 6; }
.craft-b { grid-column: 7 / 13; }
.craft-a .swatch, .craft-b .swatch { border-radius: 3px; box-shadow: var(--shadow-md); }
.craft-a .swatch { aspect-ratio: 1/1.15; }
.craft-b .swatch { aspect-ratio: 1/1; margin-top: clamp(28px, 6vw, 72px); }
.craft-quote {
  grid-column: 1 / 13;
  text-align: center;
  padding-block: clamp(48px, 7vw, 88px) 0;
}
.craft-quote blockquote {
  margin: 0 auto;
  max-width: 800px;
  font-family: var(--display);
  font-size: clamp(1.5rem, 3vw, 2.35rem);
  font-style: italic;
  font-weight: 300;
  line-height: 1.42;
  color: var(--ink);
}
.craft-quote cite {
  display: block;
  margin-top: 26px;
  font-family: var(--sans);
  font-style: normal;
  font-size: .64rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* Services */
.svc-list { border-top: 1px solid var(--hair-soft); }
.svc {
  display: grid;
  grid-template-columns: 88px 1.15fr 1.35fr auto;
  gap: clamp(16px, 3vw, 40px);
  align-items: center;
  padding-block: clamp(24px, 3vw, 38px);
  border-bottom: 1px solid var(--hair-soft);
  transition: background .45s var(--ease), padding-inline .45s var(--ease);
}
.svc:hover { background: var(--cream); padding-inline: 22px; }
.svc .idx {
  font-family: var(--display);
  font-size: .95rem;
  letter-spacing: .12em;
  color: var(--gold);
}
.svc h3 { font-size: clamp(1.4rem, 2.2vw, 1.95rem); }
.svc p { font-size: .92rem; line-height: 1.8; margin: 0; }
.svc .price {
  font-family: var(--display);
  font-size: 1.15rem;
  color: var(--gold-deep);
  white-space: nowrap;
}
.svc .price small {
  display: block;
  font-family: var(--sans);
  font-size: .56rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* School uniforms — the contract side of the house */
.uni-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 5vw, 76px);
  align-items: center;
}
.uni-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 1.8vw, 22px);
}
.uni-tile {
  position: relative;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.uni-tile:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.uni-tile .swatch { aspect-ratio: 4/3.4; }
.uni-tile .label {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  background: rgba(255, 252, 247, .93);
  border-top: 1px solid var(--hair-soft);
  padding: 12px 16px;
}
.uni-tile .label b {
  display: block;
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.05rem;
  color: var(--ink);
  line-height: 1.25;
}
.uni-tile .label small {
  display: block;
  margin-top: 3px;
  font-size: .55rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.uni-copy h3 { margin-bottom: 16px; }
.uni-points {
  display: grid;
  gap: 14px;
  margin: 28px 0 32px;
}
.uni-points li {
  display: flex;
  gap: 14px;
  font-size: .93rem;
  line-height: 1.75;
}
.uni-points li::before {
  content: "";
  width: 5px; height: 5px;
  background: var(--gold);
  transform: rotate(45deg);
  margin-top: 10px;
  flex: none;
}

.uni-facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: clamp(44px, 5vw, 68px);
  padding-top: 34px;
  border-top: 1px solid var(--hair-soft);
}
.uni-facts b {
  display: block;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.9rem, 3vw, 2.5rem);
  color: var(--gold-deep);
  line-height: 1;
}
.uni-facts small {
  display: block;
  margin-top: 10px;
  font-size: .62rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-mute);
  line-height: 1.6;
}

/* ---------- 10 Testimonials ---------- */
.quotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(22px, 2.6vw, 34px);
}
.quote-card {
  background: var(--ivory);
  border: 1px solid var(--hair-soft);
  border-radius: 3px;
  padding: clamp(30px, 3.4vw, 42px);
  position: relative;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.quote-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.quote-card .mark {
  font-family: var(--display);
  font-size: 4rem;
  line-height: .6;
  color: var(--gold);
  opacity: .32;
  display: block;
  margin-bottom: 18px;
}
.quote-card p {
  font-family: var(--display);
  font-size: 1.16rem;
  font-style: italic;
  line-height: 1.7;
  color: var(--ink);
}
.quote-card footer {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--hair-soft);
  display: flex;
  align-items: center;
  gap: 14px;
}
.quote-card .av {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--sand);
  border: 1px solid var(--hair);
  font-family: var(--display);
  font-size: .92rem;
  color: var(--gold-deep);
  flex: none;
}
.quote-card b {
  display: block;
  font-weight: 400;
  font-size: .88rem;
  color: var(--ink);
}
.quote-card small {
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* ---------- 11 Appointment band ---------- */
.band {
  background: var(--sand);
  position: relative;
  overflow: hidden;
  text-align: center;
}
.band::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .27;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88'%3E%3Cg fill='none' stroke='%23B08C4F' stroke-width='1'%3E%3Cpath d='M22 22h44v44H22z'/%3E%3Cpath d='M44 11 77 44 44 77 11 44Z'/%3E%3Cpath d='M0 -10 10 0 0 10 -10 0Z'/%3E%3Cpath d='M88 -10 98 0 88 10 78 0Z'/%3E%3Cpath d='M0 78 10 88 0 98 -10 88Z'/%3E%3Cpath d='M88 78 98 88 88 98 78 88Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 88px 88px;
}
.band .wrap { position: relative; }
.band h2 { margin-bottom: 22px; }
.band .lede { margin-inline: auto; margin-bottom: 38px; }
.band-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 24px; }

/* ---------- 12 Footer ---------- */
.site-foot {
  background: var(--linen);
  padding-top: clamp(60px, 8vw, 96px);
  border-top: 1px solid var(--hair-soft);
  position: relative;
  overflow: hidden;
}
.foot-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: clamp(30px, 4vw, 60px);
  padding-bottom: clamp(44px, 5vw, 66px);
}
.foot-grid h4 {
  font-family: var(--sans);
  font-size: .64rem;
  font-weight: 400;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 22px;
}
.foot-brand .brand-name { font-size: 1.6rem; }
.foot-brand p { font-size: .9rem; line-height: 1.85; margin-top: 18px; max-width: 34ch; }
.foot-links li { margin-bottom: 11px; }
.foot-links a {
  font-size: .88rem;
  color: var(--ink-soft);
  transition: color .35s var(--ease), padding-left .35s var(--ease);
}
.foot-links a:hover { color: var(--gold-deep); padding-left: 6px; }
.foot-note { font-size: .88rem; line-height: 1.85; }
.foot-note b { display: block; font-weight: 400; color: var(--ink); }

.foot-form { display: flex; margin-top: 20px; border-bottom: 1px solid var(--hair); }
.foot-form input {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  padding: 12px 0;
  font-family: var(--sans);
  font-size: .88rem;
  font-weight: 300;
  color: var(--ink);
}
.foot-form input::placeholder { color: var(--ink-mute); }
.foot-form input:focus { outline: none; }
.foot-form button {
  padding: 0 4px;
  font-size: .64rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-deep);
  transition: opacity .3s var(--ease);
}
.foot-form button:hover { opacity: .65; }

.socials { display: flex; gap: 10px; margin-top: 26px; }
.socials a {
  width: 36px; height: 36px;
  border: 1px solid var(--hair);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--gold-deep);
  transition: background .4s var(--ease), color .4s var(--ease), transform .4s var(--ease);
}
.socials a:hover { background: var(--gold); color: var(--ivory); transform: translateY(-3px); }
.socials svg { width: 15px; height: 15px; }

.foot-base {
  border-top: 1px solid var(--hair-soft);
  padding-block: 26px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  font-size: .74rem;
  letter-spacing: .06em;
  color: var(--ink-mute);
}
.foot-base a:hover { color: var(--gold-deep); }

/* ---------- 13 Inner-page chrome ---------- */
.page-head {
  padding-top: clamp(150px, 18vw, 210px);
  padding-bottom: clamp(50px, 7vw, 84px);
  background:
    radial-gradient(90% 120% at 80% 0%, var(--sand), transparent 62%),
    var(--cream);
  position: relative;
  overflow: hidden;
  text-align: center;
}
.page-head::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .42;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cg fill='none' stroke='%23B08C4F' stroke-width='.9'%3E%3Cpath d='M13 22 22 13 42 13 51 22 51 42 42 51 22 51 13 42Z'/%3E%3Cpath d='M0 -9 9 0 0 9 -9 0Z'/%3E%3Cpath d='M64 -9 73 0 64 9 55 0Z'/%3E%3Cpath d='M0 55 9 64 0 73 -9 64Z'/%3E%3Cpath d='M64 55 73 64 64 73 55 64Z'/%3E%3C/g%3E%3C/svg%3E"),
    repeating-linear-gradient(0deg,  rgba(176,140,79,.05) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(90deg, rgba(176,140,79,.05) 0 1px, transparent 1px 7px);
  background-size: 64px 64px, auto, auto;
  -webkit-mask-image: radial-gradient(100% 100% at 50% 100%, #000 0%, transparent 78%);
          mask-image: radial-gradient(100% 100% at 50% 100%, #000 0%, transparent 78%);
}
.page-head .wrap { position: relative; }
.page-head .lede { margin-inline: auto; margin-top: 22px; }
.crumbs {
  margin-top: 30px;
  font-size: .62rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.crumbs a { color: var(--gold-deep); }
.crumbs span { margin-inline: 10px; opacity: .5; }

/* ---------- 14 Fabrics library page ---------- */
.filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: clamp(36px, 4vw, 56px);
}
.filters button {
  padding: 11px 22px;
  border: 1px solid var(--hair-soft);
  border-radius: 40px;
  font-size: .66rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.filters button:hover { border-color: var(--gold); color: var(--gold-deep); }
.filters button.is-active { background: var(--gold); border-color: var(--gold); color: var(--ivory); }

.fab-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: clamp(20px, 2.4vw, 30px);
}
.fab {
  background: var(--ivory);
  border: 1px solid var(--hair-soft);
  border-radius: 3px;
  overflow: hidden;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), opacity .4s var(--ease);
}
.fab:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.fab.is-hidden { display: none; }
.fab .swatch { aspect-ratio: 1/1; flex: none; }
.swatch .flag {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 3;
  background: rgba(255, 252, 247, .93);
  border: 1px solid var(--hair-soft);
  padding: 5px 12px;
  border-radius: 40px;
  font-size: .55rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
/* flex column so the price row can bottom-align across a whole row of cards,
   whatever the origin or composition text wraps to */
.fab { display: flex; flex-direction: column; }
.fab .body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.fab .body h3 { font-size: 1.3rem; margin-bottom: 6px; }
.fab .body .origin {
  font-size: .6rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.fab .specs {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--hair-soft);
  display: grid;
  gap: 7px;
}
.fab .specs div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: .78rem;
}
.fab .specs dt { color: var(--ink-mute); }
.fab .specs dd { margin: 0; color: var(--ink); }
.fab .price-row {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--hair-soft);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.fab .price-row b {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.22rem;
  color: var(--gold-deep);
}
.fab .price-row small {
  font-size: .58rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* mill logos row */
.mills {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--hair-soft);
  border: 1px solid var(--hair-soft);
  border-radius: 3px;
  overflow: hidden;
}
.mills div {
  background: var(--ivory);
  padding: 34px 18px;
  text-align: center;
  font-family: var(--display);
  font-size: 1.18rem;
  letter-spacing: .1em;
  color: var(--ink-mute);
  transition: background .4s var(--ease), color .4s var(--ease);
}
.mills div:hover { background: var(--cream); color: var(--gold-deep); }
.mills div small {
  display: block;
  margin-top: 6px;
  font-family: var(--sans);
  font-size: .54rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  opacity: .7;
}

/* ---------- 15 Bespoke page ---------- */
.journey { position: relative; display: grid; gap: 0; }
.journey-item {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: clamp(24px, 4vw, 56px);
  padding-block: clamp(34px, 4vw, 52px);
  border-bottom: 1px solid var(--hair-soft);
  align-items: start;
}
.journey-item:first-child { border-top: 1px solid var(--hair-soft); }
.journey-item .stage {
  font-family: var(--display);
  font-size: clamp(2.4rem, 4.4vw, 3.4rem);
  color: var(--gold);
  opacity: .45;
  line-height: 1;
}
.journey-item h3 { margin-bottom: 14px; }
.journey-item .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}
.journey-item .tags span {
  font-size: .58rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding: 6px 14px;
  border: 1px solid var(--hair-soft);
  border-radius: 40px;
}

.tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
  gap: clamp(20px, 2.4vw, 30px);
  align-items: start;
}
.tier {
  background: var(--ivory);
  border: 1px solid var(--hair-soft);
  border-radius: 3px;
  padding: clamp(30px, 3.4vw, 44px);
  position: relative;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.tier:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.tier.is-featured {
  border-color: var(--gold);
  box-shadow: var(--shadow-md);
  background: var(--cream);
}
.tier.is-featured::before {
  content: "Most requested";
  position: absolute;
  top: -11px; left: 50%;
  transform: translateX(-50%);
  background: var(--gold);
  color: var(--ivory);
  font-size: .55rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: 5px 16px;
  border-radius: 40px;
  white-space: nowrap;
}
.tier h3 { margin-bottom: 10px; }
.tier .amt {
  font-family: var(--display);
  font-size: clamp(2.2rem, 3.4vw, 2.9rem);
  color: var(--gold-deep);
  line-height: 1.1;
  margin: 18px 0 4px;
}
.tier .amt small {
  font-family: var(--sans);
  font-size: .58rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-mute);
  display: block;
  margin-top: 8px;
}
.tier ul { margin: 26px 0 30px; display: grid; gap: 12px; }
.tier li {
  display: flex;
  gap: 12px;
  font-size: .89rem;
  line-height: 1.65;
}
.tier li::before {
  content: "";
  width: 5px; height: 5px;
  background: var(--gold);
  transform: rotate(45deg);
  margin-top: 9px;
  flex: none;
}
.tier .btn { width: 100%; }

/* measurement diagram */
.measure {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 5vw, 76px);
  align-items: center;
}
.measure-list { display: grid; gap: 2px; }
.measure-list div {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-block: 15px;
  border-bottom: 1px solid var(--hair-soft);
  font-size: .9rem;
}
.measure-list div:first-child { border-top: 1px solid var(--hair-soft); }
.measure-list b { font-weight: 400; color: var(--ink); }
.measure-list span { color: var(--ink-mute); font-size: .82rem; }
.figure-wrap {
  background: var(--cream);
  border: 1px solid var(--hair-soft);
  border-radius: 3px;
  padding: clamp(28px, 4vw, 48px);
  display: grid;
  place-items: center;
}
.figure-wrap svg { width: 100%; max-width: 300px; height: auto; }

/* ---------- 16 Atelier page ---------- */
.timeline { display: grid; gap: 0; }
.tl {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: clamp(24px, 4vw, 52px);
  padding-block: clamp(28px, 3.4vw, 44px);
  border-bottom: 1px solid var(--hair-soft);
}
.tl:first-child { border-top: 1px solid var(--hair-soft); }
.tl .yr {
  font-family: var(--display);
  font-size: clamp(1.7rem, 2.6vw, 2.2rem);
  color: var(--gold-deep);
  line-height: 1;
}
.tl h3 { font-size: 1.35rem; margin-bottom: 10px; }
.tl p { font-size: .93rem; line-height: 1.85; }

.people {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: clamp(22px, 2.6vw, 34px);
}
.person { text-align: center; }
.person .swatch {
  aspect-ratio: 3/4;
  border-radius: 3px;
  margin-bottom: 22px;
  box-shadow: var(--shadow-sm);
  display: grid;
  place-items: center;
  transition: transform .55s var(--ease), box-shadow .55s var(--ease);
}
/* monogram plate — replace with a photograph when one is available */
.person .mono {
  position: relative;
  z-index: 2;
  width: 86px; height: 86px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 252, 247, .88);
  border: 1px solid var(--hair);
  font-family: var(--display);
  font-size: 1.6rem;
  letter-spacing: .06em;
  color: var(--gold-deep);
}
.person:hover .swatch { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.person h3 { font-size: 1.28rem; }
.person small {
  display: block;
  margin-top: 8px;
  font-size: .6rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.person p { font-size: .88rem; line-height: 1.8; margin-top: 14px; }

.values {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(24px, 3vw, 44px);
}
.value { padding-top: 26px; border-top: 1px solid var(--hair); }
.value .ic {
  width: 34px; height: 34px;
  color: var(--gold);
  margin-bottom: 20px;
}
.value h3 { font-size: 1.32rem; margin-bottom: 12px; }
.value p { font-size: .91rem; line-height: 1.8; }

/* ---------- 17 Appointment page ---------- */
.book-grid {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: clamp(38px, 5vw, 74px);
  align-items: start;
}
.form-card {
  background: var(--ivory);
  border: 1px solid var(--hair-soft);
  border-radius: 3px;
  padding: clamp(30px, 4vw, 52px);
  box-shadow: var(--shadow-sm);
}
.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(18px, 2.2vw, 28px);
}
.field { display: flex; flex-direction: column; }
.field.is-full { grid-column: 1 / -1; }
.field label {
  font-size: .6rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 10px;
}
.field input,
.field select,
.field textarea {
  font-family: var(--sans);
  font-size: .94rem;
  font-weight: 300;
  color: var(--ink);
  background: var(--cream);
  border: 1px solid var(--hair-soft);
  border-radius: 2px;
  padding: 14px 16px;
  transition: border-color .35s var(--ease), background .35s var(--ease);
  width: 100%;
}
.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 d='M1 1l5 5 5-5' fill='none' stroke='%23B08C4F' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 11px;
  padding-right: 40px;
}
.field textarea { resize: vertical; min-height: 132px; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: var(--ivory);
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-mute); }
.form-foot {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.form-foot small { font-size: .76rem; color: var(--ink-mute); max-width: 34ch; line-height: 1.7; }
.form-msg {
  margin-top: 22px;
  padding: 16px 20px;
  border: 1px solid var(--gold);
  border-radius: 2px;
  background: var(--cream);
  font-size: .9rem;
  color: var(--gold-deep);
  display: none;
}
.form-msg.is-on { display: block; }

.info-card {
  background: var(--cream);
  border: 1px solid var(--hair-soft);
  border-radius: 3px;
  padding: clamp(28px, 3.4vw, 40px);
}
.info-card + .info-card { margin-top: 24px; }
.info-card h3 { font-size: 1.35rem; margin-bottom: 20px; }
.info-row {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding-block: 11px;
  border-bottom: 1px solid var(--hair-soft);
  font-size: .88rem;
}
.info-row:last-child { border-bottom: 0; }
.info-row span { color: var(--ink-mute); }
.info-card address {
  font-style: normal;
  font-size: .93rem;
  line-height: 1.9;
}
.info-card .contact-line {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-block: 10px;
  font-size: .92rem;
}
.info-card .contact-line svg { width: 15px; height: 15px; color: var(--gold); flex: none; }
.map-frame {
  margin-top: 24px;
  aspect-ratio: 16/10;
  border: 1px solid var(--hair-soft);
  border-radius: 3px;
  position: relative;
  overflow: hidden;
  background:
    repeating-linear-gradient(0deg,  rgba(176,140,79,.10) 0 1px, transparent 1px 38px),
    repeating-linear-gradient(90deg, rgba(176,140,79,.10) 0 1px, transparent 1px 38px),
    var(--sand);
  display: grid;
  place-items: center;
  text-align: center;
}
.map-frame .pin {
  display: grid;
  place-items: center;
  gap: 10px;
}
.map-frame .pin i {
  width: 12px; height: 12px;
  background: var(--gold);
  border-radius: 50%;
  box-shadow: 0 0 0 8px rgba(176, 140, 79, .16), 0 0 0 18px rgba(176, 140, 79, .08);
  display: block;
}
.map-frame .pin span {
  font-size: .6rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* FAQ */
.faq { border-top: 1px solid var(--hair-soft); }
.faq-item { border-bottom: 1px solid var(--hair-soft); }
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: clamp(20px, 2.4vw, 28px);
  text-align: left;
  font-family: var(--display);
  font-size: clamp(1.12rem, 1.7vw, 1.35rem);
  color: var(--ink);
  transition: color .35s var(--ease);
}
.faq-q:hover { color: var(--gold-deep); }
.faq-q i {
  position: relative;
  width: 14px; height: 14px;
  flex: none;
}
.faq-q i::before, .faq-q i::after {
  content: "";
  position: absolute;
  background: var(--gold);
  transition: transform .4s var(--ease), opacity .4s var(--ease);
}
.faq-q i::before { top: 50%; left: 0; width: 14px; height: 1px; transform: translateY(-50%); }
.faq-q i::after  { left: 50%; top: 0; width: 1px; height: 14px; transform: translateX(-50%); }
.faq-item.is-open .faq-q i::after { transform: translateX(-50%) rotate(90deg); opacity: 0; }
.faq-a {
  overflow: hidden;
  max-height: 0;
  transition: max-height .55s var(--ease);
}
.faq-a p {
  padding-bottom: 26px;
  font-size: .93rem;
  line-height: 1.9;
  max-width: 72ch;
}

/* ---------- 18 Reveal animations ---------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay: var(--d, 0ms);
}
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ---------- 19 Responsive ---------- */
@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: 1fr; gap: 56px; }
  .hero-art { max-width: 520px; aspect-ratio: 5/4; max-height: none; }
  .hero-art .c1 { inset: 0 26% 14% 0; }
  .heritage-grid { grid-template-columns: 1fr; }
  .heritage-art { max-width: 460px; }
  .uni-grid { grid-template-columns: 1fr; }
  .uni-facts { grid-template-columns: repeat(2, 1fr); gap: 28px 24px; }
  .book-grid { grid-template-columns: 1fr; }
  .measure { grid-template-columns: 1fr; }
  .craft-a, .craft-b { grid-column: span 12; }
  .craft-b .swatch { margin-top: 0; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .svc { grid-template-columns: 60px 1fr; row-gap: 12px; }
  .svc .price { grid-column: 2; }
  .svc p { grid-column: 2; }
}

@media (max-width: 860px) {
  .nav, .head-cta .btn { display: none; }
  .burger { display: flex; }
  .scroll-hint { display: none; }
  .journey-item, .tl { grid-template-columns: 1fr; gap: 14px; }
  .stat-row { grid-template-columns: 1fr; gap: 20px; text-align: left; }
  .field-grid { grid-template-columns: 1fr; }
  .hero-meta { flex-wrap: wrap; gap: 26px 40px; }
}

@media (max-width: 560px) {
  .foot-grid { grid-template-columns: 1fr; }
  .uni-facts { grid-template-columns: 1fr; gap: 22px; }
  /* tiles get narrow enough that labels wrap — drop them below the cloth,
     and let the label fill so both tiles in a row end level */
  .uni-tile { display: flex; flex-direction: column; }
  .uni-tile .label { position: static; background: var(--ivory); flex: 1; }
  .uni-tile .swatch { aspect-ratio: 1/1; }
  .hero-art .tag { padding: 12px 16px; }
  .brand-sub { display: none; }
  .btn { width: 100%; }
  .hero-actions .btn-line { width: auto; }
  .band-actions .btn { width: 100%; }
}

/* ---------- 20 Uniform shop ---------- */
/* toolbar: category chips, school picker, bag */
.shop-tools {
  position: sticky;
  top: 68px;
  z-index: 500;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  padding-block: 16px;
  margin-bottom: clamp(28px, 3.4vw, 44px);
  background: rgba(255, 252, 247, .93);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hair-soft);
}
.shop-tools .filters { margin-bottom: 0; justify-content: flex-start; }
/* margin-left:auto keeps the controls right-aligned when the chips push them
   onto their own row */
.shop-side { display: flex; align-items: center; gap: 14px; margin-left: auto; }

.shop-select {
  appearance: none;
  /* min-width:auto would hold the select open at its widest option name and
     shove the bag button off narrow screens */
  min-width: 0;
  max-width: 100%;
  text-overflow: ellipsis;
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 300;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
  background-color: var(--cream);
  border: 1px solid var(--hair-soft);
  border-radius: 40px;
  padding: 11px 40px 11px 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23B08C4F' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 11px;
  transition: border-color .35s var(--ease);
}
.shop-select:focus { outline: none; border-color: var(--gold); }

.bag-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 20px;
  border: 1px solid var(--gold);
  border-radius: 40px;
  font-size: .66rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-deep);
  transition: background .4s var(--ease), color .4s var(--ease);
}
.bag-btn:hover { background: var(--gold); color: var(--ivory); }
.bag-btn svg { width: 15px; height: 15px; }
.bag-btn .count {
  min-width: 20px;
  height: 20px;
  padding-inline: 6px;
  border-radius: 40px;
  background: var(--gold);
  color: var(--ivory);
  display: grid;
  place-items: center;
  font-size: .62rem;
  letter-spacing: 0;
}
.bag-btn:hover .count { background: var(--ivory); color: var(--gold-deep); }
.bag-btn.is-bumped { animation: bump .5s var(--ease); }
@keyframes bump {
  40% { transform: scale(1.07); }
  100% { transform: scale(1); }
}

/* product grid */
.prod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(256px, 1fr));
  gap: clamp(20px, 2.4vw, 30px);
}
.prod {
  display: flex;
  flex-direction: column;
  background: var(--ivory);
  border: 1px solid var(--hair-soft);
  border-radius: 3px;
  overflow: hidden;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.prod:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.prod.is-hidden { display: none; }
.prod .swatch { aspect-ratio: 1/1; flex: none; }
.prod .body {
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.prod .school {
  font-size: .58rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.prod h3 { font-size: 1.24rem; margin: 8px 0 6px; }
.prod .cloth { font-size: .8rem; color: var(--ink-mute); }

/* auto margin here pins the sizes + buy block to the card foot, so chips and
   prices line up across a row whatever the cloth description wraps to */
.sizes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: auto 0 0;
  padding-top: 18px;
}
.sizes button {
  min-width: 34px;
  padding: 6px 9px;
  border: 1px solid var(--hair-soft);
  border-radius: 2px;
  font-size: .68rem;
  letter-spacing: .06em;
  color: var(--ink-soft);
  transition: border-color .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.sizes button:hover { border-color: var(--gold); color: var(--gold-deep); }
.sizes button.is-on { background: var(--gold); border-color: var(--gold); color: var(--ivory); }

.prod .buy {
  padding-top: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.prod .buy .price {
  font-family: var(--display);
  font-size: 1.28rem;
  color: var(--gold-deep);
}
.prod .buy .price small {
  display: block;
  font-family: var(--sans);
  font-size: .54rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.add-btn {
  padding: 11px 18px;
  border: 1px solid var(--gold);
  border-radius: 2px;
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-deep);
  white-space: nowrap;
  transition: background .35s var(--ease), color .35s var(--ease);
}
.add-btn:hover { background: var(--gold); color: var(--ivory); }
.add-btn.is-added { background: var(--gold); border-color: var(--gold); color: var(--ivory); }

.shop-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding-block: clamp(40px, 6vw, 72px);
  color: var(--ink-mute);
  font-size: .92rem;
}

/* bag drawer */
.bag-scrim {
  position: fixed;
  inset: 0;
  z-index: 940;
  background: rgba(74, 65, 55, .26);
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s var(--ease);
}
.bag-scrim.is-on { opacity: 1; pointer-events: auto; }

.bag {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: 950;
  width: min(432px, 94vw);
  background: var(--ivory);
  border-left: 1px solid var(--hair-soft);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  transform: translateX(101%);
  transition: transform .55s var(--ease);
}
.bag.is-on { transform: none; }
.bag-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 26px clamp(22px, 3vw, 32px);
  border-bottom: 1px solid var(--hair-soft);
}
.bag-head h3 { font-size: 1.5rem; }
.bag-close {
  width: 36px; height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--hair-soft);
  border-radius: 50%;
  color: var(--ink-soft);
  transition: background .35s var(--ease), color .35s var(--ease);
}
.bag-close:hover { background: var(--gold); color: var(--ivory); border-color: var(--gold); }
.bag-close svg { width: 13px; height: 13px; }

.bag-body {
  flex: 1;
  overflow-y: auto;
  padding: 6px clamp(22px, 3vw, 32px);
}
.bag-line {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 16px;
  padding-block: 20px;
  border-bottom: 1px solid var(--hair-soft);
}
.bag-line .thumb {
  width: 62px; height: 62px;
  border-radius: 2px;
}
.bag-line b {
  display: block;
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.05rem;
  color: var(--ink);
  line-height: 1.25;
}
.bag-line .meta {
  display: block;
  margin-top: 4px;
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.bag-line .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}
.qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--hair-soft);
  border-radius: 40px;
}
.qty button {
  width: 30px; height: 30px;
  display: grid;
  place-items: center;
  color: var(--gold-deep);
  font-size: 1rem;
  line-height: 1;
  transition: color .3s var(--ease);
}
.qty button:hover { color: var(--ink); }
.qty span {
  min-width: 26px;
  text-align: center;
  font-size: .84rem;
}
.bag-line .line-total {
  font-family: var(--display);
  font-size: 1.05rem;
  color: var(--gold-deep);
}
.bag-line .rm {
  font-size: .58rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  border-bottom: 1px solid transparent;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.bag-line .rm:hover { color: var(--gold-deep); border-color: var(--hair); }

.bag-empty {
  text-align: center;
  padding: clamp(40px, 8vw, 80px) 10px;
  color: var(--ink-mute);
  font-size: .92rem;
  line-height: 1.9;
}
.bag-empty .orn { margin-bottom: 22px; }

.bag-foot {
  border-top: 1px solid var(--hair-soft);
  padding: 24px clamp(22px, 3vw, 32px) 28px;
  background: var(--cream);
}
.bag-sum {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 6px;
}
.bag-sum span {
  font-size: .64rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.bag-sum b {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.7rem;
  color: var(--gold-deep);
}
.bag-note {
  font-size: .74rem;
  line-height: 1.7;
  color: var(--ink-mute);
  margin-bottom: 18px;
}
.bag-foot .btn { width: 100%; }

/* size guide */
.size-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
}
.size-table th,
.size-table td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid var(--hair-soft);
}
.size-table thead th {
  font-family: var(--sans);
  font-weight: 400;
  font-size: .6rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-deep);
  border-bottom-color: var(--hair);
}
.size-table tbody tr { transition: background .35s var(--ease); }
.size-table tbody tr:hover { background: var(--cream); }
.size-table td:first-child { font-family: var(--display); font-size: 1.05rem; color: var(--ink); }
.table-scroll { overflow-x: auto; }

@media (max-width: 860px) {
  .shop-tools { top: 60px; gap: 14px; }
  .shop-tools .filters { width: 100%; }
  .shop-side { width: 100%; justify-content: space-between; }
}
@media (max-width: 560px) {
  .shop-select { flex: 1 1 0; }
  .bag-btn { flex: none; }
  .prod .buy { flex-direction: column; align-items: stretch; gap: 14px; }
  .add-btn { width: 100%; }
}

/* ---------- 21 Arabesque ---------- */
/* Geometric motifs drawn from girih tiling — an eight-point khatam star, an
   interlaced octagon lattice and an overlapping-circle rosette. All are laid in
   at low opacity so they read as watermarked paper, never as wallpaper. */

.pat { position: relative; }
.pat::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-repeat: repeat;
}
.pat > * { position: relative; z-index: 1; }

/* eight-point khatam star lattice */
.pat-star::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88'%3E%3Cg fill='none' stroke='%23B08C4F' stroke-width='1'%3E%3Cpath d='M22 22h44v44H22z'/%3E%3Cpath d='M44 11 77 44 44 77 11 44Z'/%3E%3Cpath d='M0 -10 10 0 0 10 -10 0Z'/%3E%3Cpath d='M88 -10 98 0 88 10 78 0Z'/%3E%3Cpath d='M0 78 10 88 0 98 -10 88Z'/%3E%3Cpath d='M88 78 98 88 88 98 78 88Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 88px 88px;
  opacity: .3;
}

/* interlaced octagon-and-diamond lattice */
.pat-lattice::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cg fill='none' stroke='%23B08C4F' stroke-width='.9'%3E%3Cpath d='M13 22 22 13 42 13 51 22 51 42 42 51 22 51 13 42Z'/%3E%3Cpath d='M0 -9 9 0 0 9 -9 0Z'/%3E%3Cpath d='M64 -9 73 0 64 9 55 0Z'/%3E%3Cpath d='M0 55 9 64 0 73 -9 64Z'/%3E%3Cpath d='M64 55 73 64 64 73 55 64Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 64px 64px;
  opacity: .26;
}

/* overlapping-circle rosette */
.pat-rosette::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cg fill='none' stroke='%23B08C4F' stroke-width='.9'%3E%3Ccircle cx='0' cy='0' r='30'/%3E%3Ccircle cx='60' cy='0' r='30'/%3E%3Ccircle cx='0' cy='60' r='30'/%3E%3Ccircle cx='60' cy='60' r='30'/%3E%3Ccircle cx='30' cy='30' r='30'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 60px 60px;
  opacity: .22;
}

/* Sections open blank at the top — where the heading sits — and the tiling
   fades in as you read down. */
.pat-fade::after {
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 14%, #000 66%, #000 100%);
          mask-image: linear-gradient(180deg, transparent 0%, transparent 14%, #000 66%, #000 100%);
}

/* --- shamsa: radiant medallion watermark --- */
.shamsa {
  position: absolute;
  color: var(--gold);
  opacity: .16;
  pointer-events: none;
  z-index: 0;
  width: clamp(280px, 34vw, 520px);
  height: auto;
  animation: shamsa-turn 120s linear infinite;
}
@keyframes shamsa-turn { to { transform: rotate(360deg); } }

.shamsa-head  { top: 50%; left: 50%; margin-top: -26vw; margin-left: -17vw; opacity: .12; }
.shamsa-band  { bottom: -46%; left: -8%; opacity: .13; }
.shamsa-foot  { top: -34%; right: -6%; opacity: .1; }

/* --- arabesque divider --- */
.divider {
  display: flex;
  justify-content: center;
  color: var(--gold);
  padding-block: clamp(28px, 4vw, 46px);
}
.divider svg {
  width: min(420px, 78%);
  height: auto;
  opacity: .55;
}
.divider--tight { padding-block: 0 clamp(24px, 3vw, 38px); }

/* --- corner flourishes --- */
.flourish {
  position: absolute;
  width: 52px;
  height: 52px;
  color: var(--gold);
  opacity: .5;
  pointer-events: none;
}
.flourish-tl { top: 10px; left: 10px; }
.flourish-tr { top: 10px; right: 10px; transform: scaleX(-1); }
.flourish-bl { bottom: 10px; left: 10px; transform: scaleY(-1); }
.flourish-br { bottom: 10px; right: 10px; transform: scale(-1); }

/* the featured tier and the booking card carry framed corners */
.tier.is-featured,
.form-card { position: relative; }

@media (prefers-reduced-motion: reduce) {
  .shamsa { animation: none; }
}

@media (max-width: 860px) {
  .shamsa { width: clamp(220px, 62vw, 360px); }
  .shamsa-head { margin-top: -44vw; margin-left: -31vw; }
  .pat-star::after { background-size: 72px 72px; }
  .flourish { width: 34px; height: 34px; }
}

/* ---------- 22 Mobile refinements ---------- */

/* anchored sections must clear the fixed header */
[id] { scroll-margin-top: 96px; }

/* momentum scrolling, and keep overscroll inside the panels that scroll */
.table-scroll,
.bag-body { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.drawer { overscroll-behavior: contain; }

/* the house gold instead of the default blue tap flash */
@media (hover: none) {
  a, button, select, input, textarea, summary {
    -webkit-tap-highlight-color: rgba(176, 140, 79, .14);
  }
  /* hover lifts never settle on touch — keep cards flat */
  .coll-card:hover, .fab:hover, .prod:hover,
  .quote-card:hover, .tier:hover, .uni-tile:hover,
  .person:hover .swatch { transform: none; }
}

@media (max-width: 860px) {
  /* iOS Safari zooms the page when a focused control is under 16px */
  .field input,
  .field select,
  .field textarea,
  .foot-form input,
  .shop-select { font-size: 16px; }

  .shop-select { letter-spacing: .1em; padding-block: 14px; }
  .shop-tools { top: 66px; }
  /* six chips wrap to three rows and the sticky bar swallows a quarter of the
     screen — run them as one horizontally scrolling row instead */
  .shop-tools .filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .shop-tools .filters::-webkit-scrollbar { display: none; }
  .shop-tools .filters button { flex: none; }

  /* tap targets — 44px minimum on the small, frequently-missed controls */
  .foot-links li { margin-bottom: 0; }
  .foot-links a { display: inline-block; padding-block: 10px; }
  .socials { gap: 12px; }
  .socials a { width: 44px; height: 44px; }
  .socials svg { width: 17px; height: 17px; }
  .btn-line { padding-block: 13px; }
  .crumbs a { display: inline-block; padding-block: 13px; }
  .foot-form input { padding-block: 15px; }
  .foot-form button { padding: 15px 4px; }
  .filters button { padding: 13px 20px; }
  .faq-q { padding-block: 22px; }
  .sizes button { min-width: 46px; padding: 12px 10px; }
  .add-btn { padding: 15px 18px; }
  .bag-btn { padding: 14px 20px; }
  .bag-close { width: 44px; height: 44px; }
  .qty button { width: 42px; height: 42px; }
  .info-card .contact-line { padding-block: 13px; }
  .foot-base a { display: inline-block; padding-block: 11px; }

  /* the size guide scrolls sideways — show that it does */
  .table-scroll {
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent 100%);
            mask-image: linear-gradient(90deg, #000 88%, transparent 100%);
  }
  .size-table { min-width: 520px; }
}

@media (max-width: 560px) {
  /* single-column cards make square swatches full-bleed tall — a 12-card grid
     becomes an endless scroll, so shorten the cloth to a landscape crop */
  .prod .swatch,
  .fab .swatch,
  .person .swatch { aspect-ratio: 4/3; }

  /* stacked buttons need room between them */
  .hero-actions, .band-actions { gap: 14px; }
  .form-foot { flex-direction: column; align-items: stretch; }
  .form-foot .btn { width: 100%; order: 2; }
  .form-foot small { order: 1; max-width: none; }
  /* the commissions list reads better as stacked rows than a squeezed grid */
  .svc { grid-template-columns: 1fr; row-gap: 10px; }
  .svc .idx { display: none; }
  .svc .price { text-align: left; }
}

/* ---------- 24 Gallery ---------- */
.gal-grid {
  columns: 3;
  column-gap: clamp(14px, 1.8vw, 24px);
}
.gal-item {
  break-inside: avoid;
  margin-bottom: clamp(14px, 1.8vw, 24px);
  position: relative;
  border-radius: 3px;
  overflow: hidden;
  cursor: pointer;
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--hair-soft);
  background: none;
  text-align: left;
  transition: transform .55s var(--ease), box-shadow .55s var(--ease);
}
.gal-item:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.gal-item.is-hidden { display: none; }
.gal-item .swatch { width: 100%; }
.gal-item .cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  padding: 26px 20px 16px;
  background: linear-gradient(180deg, transparent, rgba(255, 252, 247, .95) 62%);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.gal-item:hover .cap, .gal-item:focus-visible .cap { opacity: 1; transform: none; }
.gal-item .cap b {
  display: block;
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.1rem;
  color: var(--ink);
}
.gal-item .cap small {
  font-size: .56rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.gal-item .zoom {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 3;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255, 252, 247, .9);
  border: 1px solid var(--hair-soft);
  display: grid;
  place-items: center;
  color: var(--gold-deep);
  opacity: 0;
  transition: opacity .4s var(--ease);
}
.gal-item:hover .zoom { opacity: 1; }
.gal-item .zoom svg { width: 14px; height: 14px; }

/* lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 960;
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 56px);
  background: rgba(74, 65, 55, .42);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s var(--ease);
}
.lightbox.is-on { opacity: 1; pointer-events: auto; }
.lb-frame {
  position: relative;
  width: min(860px, 100%);
  background: var(--ivory);
  border-radius: 3px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transform: scale(.97);
  transition: transform .45s var(--ease);
}
.lightbox.is-on .lb-frame { transform: none; }
.lb-frame .swatch { aspect-ratio: 16/10; }
.lb-cap { padding: 22px clamp(20px, 3vw, 32px) 26px; }
.lb-cap b {
  display: block;
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.45rem;
  color: var(--ink);
}
.lb-cap small {
  display: block;
  margin-top: 6px;
  font-size: .6rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.lb-cap p { margin-top: 12px; font-size: .92rem; line-height: 1.8; }
.lb-close, .lb-nav {
  position: absolute;
  z-index: 4;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: rgba(255, 252, 247, .94);
  border: 1px solid var(--hair-soft);
  display: grid;
  place-items: center;
  color: var(--ink-soft);
  transition: background .35s var(--ease), color .35s var(--ease);
}
.lb-close:hover, .lb-nav:hover { background: var(--gold); color: var(--ivory); }
.lb-close { top: 14px; right: 14px; }
.lb-close svg, .lb-nav svg { width: 14px; height: 14px; }
.lb-prev { top: 50%; left: 14px; transform: translateY(-50%); }
.lb-next { top: 50%; right: 14px; transform: translateY(-50%); }
.lb-count {
  position: absolute;
  left: 50%; bottom: 14px;
  transform: translateX(-50%);
  z-index: 4;
  font-size: .58rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-mute);
  background: rgba(255, 252, 247, .9);
  padding: 6px 14px;
  border-radius: 40px;
  border: 1px solid var(--hair-soft);
}

/* ---------- 25 Product detail ---------- */
.pdp {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(36px, 5vw, 76px);
  align-items: start;
}
.pdp-media { position: sticky; top: 110px; }
.pdp-media .main { border-radius: 3px; box-shadow: var(--shadow-sm); }
.pdp-media .main .swatch { aspect-ratio: 4/5; }
.pdp-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 12px;
}
.pdp-thumbs button {
  border: 1px solid var(--hair-soft);
  border-radius: 2px;
  overflow: hidden;
  padding: 0;
  background: none;
  transition: border-color .35s var(--ease);
}
.pdp-thumbs button.is-on { border-color: var(--gold); }
.pdp-thumbs .swatch { aspect-ratio: 1/1; }

.pdp-info .school {
  font-size: .6rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.pdp-info h1 { font-size: clamp(2.1rem, 4vw, 3rem); margin: 12px 0 16px; }
.pdp-price {
  font-family: var(--display);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  color: var(--gold-deep);
  line-height: 1;
}
.pdp-price small {
  display: block;
  margin-top: 8px;
  font-family: var(--sans);
  font-size: .6rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.pdp-block { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--hair-soft); }
.pdp-block > label,
.pdp-label {
  display: block;
  font-size: .6rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 14px;
}
.pdp-buy { display: flex; gap: 14px; align-items: stretch; margin-top: 26px; }
.pdp-buy .qty { border-radius: 2px; }
.pdp-buy .btn { flex: 1; }
.pdp-note {
  margin-top: 18px;
  font-size: .82rem;
  line-height: 1.8;
  color: var(--ink-mute);
}
.pdp-facts { margin-top: 30px; display: grid; gap: 0; }
.pdp-facts div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-block: 13px;
  border-bottom: 1px solid var(--hair-soft);
  font-size: .88rem;
}
.pdp-facts div:first-child { border-top: 1px solid var(--hair-soft); }
.pdp-facts dt { color: var(--ink-mute); }
.pdp-facts dd { margin: 0; color: var(--ink); }

/* ---------- 26 Cart, checkout, confirmation ---------- */
.cart-page { display: grid; grid-template-columns: 1.5fr .9fr; gap: clamp(30px, 4vw, 56px); align-items: start; }
.cart-list { border-top: 1px solid var(--hair-soft); }
.cart-row {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: clamp(16px, 2.4vw, 28px);
  padding-block: 24px;
  border-bottom: 1px solid var(--hair-soft);
  align-items: start;
}
.cart-row .thumb { width: 96px; border-radius: 2px; }
.cart-row .thumb .swatch { aspect-ratio: 1/1; }
.cart-row h3 { font-size: 1.2rem; margin-bottom: 5px; }
.cart-row .meta {
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.cart-row .row { display: flex; align-items: center; gap: 16px; margin-top: 14px; flex-wrap: wrap; }
.cart-row .line { font-family: var(--display); font-size: 1.2rem; color: var(--gold-deep); text-align: right; white-space: nowrap; }
.cart-row .rm {
  font-size: .58rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  border-bottom: 1px solid transparent;
}
.cart-row .rm:hover { color: var(--gold-deep); border-color: var(--hair); }

.summary {
  background: var(--cream);
  border: 1px solid var(--hair-soft);
  border-radius: 3px;
  padding: clamp(26px, 3.2vw, 38px);
  position: sticky;
  top: 110px;
}
.summary h3 { font-size: 1.35rem; margin-bottom: 22px; }
.summary .line {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-block: 11px;
  font-size: .9rem;
  border-bottom: 1px solid var(--hair-soft);
}
.summary .line span { color: var(--ink-mute); }
.summary .total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--hair);
}
.summary .total span { font-size: .64rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-mute); }
.summary .total b { font-family: var(--display); font-weight: 400; font-size: 1.7rem; color: var(--gold-deep); }
.summary .btn { width: 100%; margin-top: 24px; }
.summary .fine { margin-top: 16px; font-size: .76rem; line-height: 1.7; color: var(--ink-mute); }

.empty-state { text-align: center; padding-block: clamp(50px, 8vw, 90px); }
.empty-state .orn { margin-bottom: 26px; }
.empty-state p { color: var(--ink-mute); margin-bottom: 26px; }

.steps-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2vw, 22px);
  margin-bottom: clamp(34px, 4vw, 52px);
  flex-wrap: wrap;
}
.steps-bar span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: .62rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.steps-bar span i {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 1px solid var(--hair);
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-style: normal;
  font-size: .8rem;
}
.steps-bar span.is-on { color: var(--gold-deep); }
.steps-bar span.is-on i { background: var(--gold); border-color: var(--gold); color: var(--ivory); }
.steps-bar em { width: 24px; height: 1px; background: var(--hair); }

.pay-methods { display: grid; gap: 12px; }
.pay-opt {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--hair-soft);
  border-radius: 2px;
  cursor: pointer;
  transition: border-color .35s var(--ease), background .35s var(--ease);
}
.pay-opt:hover { border-color: var(--gold); }
.pay-opt input { accent-color: var(--gold); width: 17px; height: 17px; }
.pay-opt b { display: block; font-weight: 400; font-size: .95rem; color: var(--ink); }
.pay-opt small { font-size: .78rem; color: var(--ink-mute); }

.confirm-card {
  text-align: center;
  background: var(--ivory);
  border: 1px solid var(--hair-soft);
  border-radius: 3px;
  padding: clamp(34px, 5vw, 64px);
  box-shadow: var(--shadow-sm);
  position: relative;
}
.confirm-seal {
  width: 84px; height: 84px;
  margin: 0 auto 26px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  display: grid;
  place-items: center;
  color: var(--gold-deep);
}
.confirm-seal svg { width: 32px; height: 32px; }
.confirm-ref {
  display: inline-block;
  margin-top: 20px;
  padding: 10px 22px;
  border: 1px solid var(--hair);
  border-radius: 40px;
  font-family: var(--display);
  font-size: 1.1rem;
  color: var(--gold-deep);
}

/* ---------- 27 Account & auth ---------- */
.auth-wrap { max-width: 480px; margin-inline: auto; }
.auth-tabs { display: flex; gap: 8px; margin-bottom: 28px; }
.auth-tabs button {
  flex: 1;
  padding: 13px 16px;
  border: 1px solid var(--hair-soft);
  border-radius: 2px;
  font-size: .64rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.auth-tabs button.is-on { background: var(--gold); border-color: var(--gold); color: var(--ivory); }
.auth-panel { display: none; }
.auth-panel.is-on { display: block; }
.auth-alt { margin-top: 22px; text-align: center; font-size: .84rem; color: var(--ink-mute); }
.auth-alt a { color: var(--gold-deep); border-bottom: 1px solid var(--hair); }

.acct-grid { display: grid; grid-template-columns: 240px 1fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
.acct-nav { display: grid; gap: 2px; border-top: 1px solid var(--hair-soft); }
.acct-nav a {
  padding: 14px 0;
  border-bottom: 1px solid var(--hair-soft);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  transition: color .35s var(--ease), padding-left .35s var(--ease);
}
.acct-nav a:hover, .acct-nav a.is-on { color: var(--gold-deep); padding-left: 8px; }
.order-card {
  border: 1px solid var(--hair-soft);
  border-radius: 3px;
  padding: clamp(22px, 2.6vw, 30px);
  margin-bottom: 16px;
  background: var(--ivory);
}
.order-card header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--hair-soft);
}
.order-card b { font-family: var(--display); font-weight: 400; font-size: 1.2rem; color: var(--ink); }
.pill {
  font-size: .55rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 40px;
  border: 1px solid var(--hair);
  color: var(--gold-deep);
}
.pill.is-done { background: var(--gold); border-color: var(--gold); color: var(--ivory); }

/* ---------- 28 School size-set matrix ---------- */
.matrix-wrap { overflow-x: auto; border: 1px solid var(--hair-soft); border-radius: 3px; }
.matrix { width: 100%; border-collapse: collapse; min-width: 640px; }
.matrix th, .matrix td { padding: 12px 10px; text-align: center; border-bottom: 1px solid var(--hair-soft); }
.matrix thead th {
  font-family: var(--sans);
  font-weight: 400;
  font-size: .58rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-deep);
  background: var(--cream);
  position: sticky;
  top: 0;
  z-index: 2;
}
.matrix tbody th {
  text-align: left;
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.02rem;
  color: var(--ink);
  white-space: nowrap;
  padding-left: 16px;
}
.matrix input {
  width: 54px;
  padding: 9px 6px;
  text-align: center;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink);
  background: var(--ivory);
  border: 1px solid var(--hair-soft);
  border-radius: 2px;
}
.matrix input:focus { outline: none; border-color: var(--gold); }
.matrix tfoot td, .matrix tfoot th {
  background: var(--cream);
  font-family: var(--display);
  font-size: 1.05rem;
  color: var(--gold-deep);
}
.matrix .row-total, .matrix tfoot td { font-family: var(--display); color: var(--gold-deep); }

/* ---------- 29 Prose (legal) & 404 ---------- */
.prose { max-width: 74ch; }
.prose h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin: 44px 0 14px; }
.prose h3 { font-size: 1.2rem; margin: 30px 0 10px; }
.prose p, .prose li { font-size: .95rem; line-height: 1.9; }
.prose ul { margin: 0 0 1.1em; padding-left: 20px; list-style: disc; }
.prose li { margin-bottom: 8px; }
.prose a { color: var(--gold-deep); border-bottom: 1px solid var(--hair); }
.prose .updated {
  font-size: .62rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.e404 { text-align: center; padding-block: clamp(70px, 12vw, 140px); }
.e404 .code {
  font-family: var(--display);
  font-size: clamp(5rem, 18vw, 11rem);
  line-height: .9;
  color: var(--gold);
  opacity: .32;
}

/* ---------- 30 New-page responsive ---------- */
@media (max-width: 1080px) {
  .gal-grid { columns: 2; }
  .pdp { grid-template-columns: 1fr; }
  .pdp-media { position: static; }
  .cart-page { grid-template-columns: 1fr; }
  .summary { position: static; }
  .acct-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .gal-grid { columns: 1; }
  .gal-item .cap { opacity: 1; transform: none; }
  .cart-row { grid-template-columns: 72px 1fr; }
  .cart-row .thumb { width: 72px; }
  .cart-row .line { grid-column: 2; text-align: left; }
  .pdp-buy { flex-direction: column; }
  .auth-tabs { flex-direction: column; }
  .steps-bar em { display: none; }
}

/* per-size column totals in the school size-set matrix */
.matrix .col-total { font-family: var(--display); color: var(--gold-deep); }


/* ---------- 23 WordPress menu compatibility ---------- */
/* wp_nav_menu() wraps links in ul > li — flatten that so .nav keeps its row */
.nav ul {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.4vw, 38px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav li { display: block; position: relative; }
.nav .current-menu-item > a,
.nav .current_page_item > a { color: var(--gold-deep); }
.nav .current-menu-item > a::after,
.nav .current_page_item > a::after { transform: scaleX(1); transform-origin: left; }

.drawer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.drawer li { display: block; }
.drawer li a { display: block; }

/* admin bar must not sit on top of the fixed header */
body.admin-bar .site-head { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .site-head { top: 46px; }
}