/* ============================================================
   J.B. VASANI & CO.  ·  Heritage × Industrial Premium
   1  Tokens
   2  Base & typography
   3  Buttons
   4  Header & navigation
   5  Sections
   6  Components
   7  Fabric Brief
   8  Footer & mobile bar
   ============================================================ */

/* ---------------------------------------------------------- 1 TOKENS */
:root{
  --paper:      #ECE8DF;   /* warm oatmeal ground */
  --paper-2:    #E3DED2;   /* alternating band     */
  --bleach:     #FAF8F3;   /* card / white cotton  */
  --ink:        #171A18;   /* charcoal, green-cast */
  --ink-60:     #5C625C;
  --ink-35:     #9A9E97;
  --loom:       #1E3A31;   /* muted deep green     */
  --loom-2:     #162C25;
  --sand:       #D6CCB9;
  --brass:      #96682B;   /* restrained accent    */
  --brass-lt:   #C08A3E;
  --line:       #CFC8B8;
  --line-dark:  rgba(236,232,223,.22);

  --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --serif:"Libre Caslon Display", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --shell: 1240px;
  --gutter: 28px;
  --sec-y: 128px;

  --r-sm: 2px;
  --r-md: 4px;

  --ease: cubic-bezier(.2,.7,.3,1);
}

/* ---------------------------------------------------------- 2 BASE */
*,*::before,*::after{ box-sizing:border-box; }

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

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

body.is-locked{ overflow:hidden; }

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

p{ margin:0 0 1.1em; max-width:64ch; }
p:last-child{ margin-bottom:0; }

a{ color:inherit; }

::selection{ background:var(--loom); color:var(--paper); }

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

.skip-link{
  position:absolute; left:12px; top:-60px; z-index:200;
  background:var(--loom); color:var(--paper);
  padding:10px 16px; text-decoration:none; font-size:14px;
  transition:top .2s var(--ease);
}
.skip-link:focus{ top:12px; }

.shell{
  width:100%; max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* --- Type scale ------------------------------------------- */
.display{
  font-family:var(--serif);
  font-weight:400;
  line-height:1.06;
  letter-spacing:-.012em;
  margin:0 0 .5em;
  text-wrap:balance;
}
.display--lg  { font-size:clamp(2rem, 3.4vw, 2.9rem); }
.display--xl  { font-size:clamp(2.35rem, 4.4vw, 3.65rem); }
.display--xxl { font-size:clamp(2.8rem, 6vw, 5rem); }

.eyebrow{
  font-size:12.5px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--brass);
  font-weight:500;
  margin:0 0 26px;
}

.lede{
  font-size:clamp(1.05rem, 1.5vw, 1.22rem);
  color:var(--ink-60);
  line-height:1.6;
  max-width:56ch;
}

.placeholder-note{
  font-size:13px; color:var(--ink-35);
  border-left:2px solid var(--sand);
  padding-left:12px; max-width:46ch;
}

/* ---------------------------------------------------------- 3 BUTTONS */
.btn{
  --btn-bg:transparent; --btn-fg:var(--ink); --btn-bd:currentColor;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:48px;
  padding:13px 26px;
  font:500 14.5px/1 var(--sans);
  letter-spacing:.05em;
  text-decoration:none;
  border:1px solid var(--btn-bd);
  border-radius:var(--r-sm);
  background:var(--btn-bg);
  color:var(--btn-fg);
  cursor:pointer;
  transition:background .28s var(--ease), color .28s var(--ease),
             border-color .28s var(--ease), transform .18s var(--ease);
}
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }
.btn__icon{ width:18px; height:18px; flex:none; }

.btn--solid{ --btn-bg:var(--loom); --btn-fg:var(--paper); --btn-bd:var(--loom); }
.btn--solid:hover{ --btn-bg:var(--loom-2); --btn-bd:var(--loom-2); }

.btn--brass{ --btn-bg:var(--brass); --btn-fg:#FFF9EF; --btn-bd:var(--brass); }
.btn--brass:hover{ --btn-bg:#7E561F; --btn-bd:#7E561F; }

.btn--outline{ --btn-bd:var(--ink); }
.btn--outline:hover{ --btn-bg:var(--ink); --btn-fg:var(--paper); }

.btn--outline-light{ --btn-fg:var(--paper); --btn-bd:rgba(236,232,223,.5); }
.btn--outline-light:hover{ --btn-bg:var(--paper); --btn-fg:var(--loom); --btn-bd:var(--paper); }

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

.btn--quiet{ --btn-bd:var(--line); --btn-fg:var(--ink-60); }
.btn--quiet:hover{ --btn-fg:var(--ink); --btn-bd:var(--ink); }
.btn--quiet[disabled]{ opacity:.35; pointer-events:none; }

.btn--sm{ min-height:40px; padding:9px 18px; font-size:13.5px; }
.btn--lg{ min-height:56px; padding:17px 34px; font-size:15px; }

/* ---------------------------------------------------------- 4 HEADER */
.site-header{
  position:sticky; top:0; z-index:90;
  background:rgba(236,232,223,.9);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.site-header.is-stuck{ border-bottom-color:var(--line); background:rgba(236,232,223,.97); }

.header-inner{
  display:flex; align-items:center; gap:28px;
  min-height:76px;
}

.brandmark{
  display:flex; align-items:center; gap:12px;
  text-decoration:none; flex:none;
}
.brandmark__glyph{ width:26px; height:26px; color:var(--loom); display:block; }
.brandmark__glyph svg{ display:block; }
.brandmark__name{
  display:block; font-family:var(--serif);
  font-size:20px; line-height:1.1; letter-spacing:-.01em;
}
.brandmark__sub{
  display:block; font-size:11px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-35); margin-top:3px;
}

.site-nav{ margin-left:auto; }
.site-nav ul{ display:flex; gap:26px; list-style:none; margin:0; padding:0; }
.site-nav a{
  position:relative; text-decoration:none;
  font-size:14.5px; color:var(--ink-60);
  padding:6px 0;
  transition:color .25s var(--ease);
}
.site-nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:1px; background:var(--brass);
  transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease);
}
.site-nav a:hover, .site-nav a.is-current{ color:var(--ink); }
.site-nav a:hover::after, .site-nav a.is-current::after{ transform:scaleX(1); }

.header-actions{ display:flex; align-items:center; gap:10px; }

.nav-toggle{
  display:none; width:44px; height:44px;
  background:none; border:1px solid var(--line); border-radius:var(--r-sm);
  cursor:pointer; padding:0;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.nav-toggle span{
  display:block; width:18px; height:1.5px; background:var(--ink);
  transition:transform .3s var(--ease), opacity .2s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

.noscript-note{
  background:var(--brass); color:#FFF9EF;
  padding:16px var(--gutter); font-size:15px; text-align:center;
}
.noscript-note p{ margin:0; max-width:none; }

/* ---------------------------------------------------------- 5 SECTIONS */
.section{ padding-block:var(--sec-y); position:relative; }

.section-head{ margin-bottom:64px; max-width:62ch; }
.section-head--split{
  display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:end;
  max-width:none;
}
.section-head .display{ margin-bottom:18px; }

/* --- HERO ------------------------------------------------- */
.hero{
  padding-top:clamp(56px, 7vw, 96px);
  padding-bottom:clamp(56px, 7vw, 104px);
  position:relative;
  overflow:hidden;
}
.hero::before{  /* warp lines */
  content:""; position:absolute; inset:0;
  background-image:repeating-linear-gradient(90deg,
    rgba(23,26,24,.055) 0 1px, transparent 1px 68px);
  pointer-events:none;
}
.hero__grid{
  position:relative;
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(32px, 5vw, 72px); align-items:center;
}
.hero__title{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2.7rem, 5.4vw, 4.6rem);
  line-height:1.02; letter-spacing:-.018em;
  margin:0 0 26px;
}
.hero__title em{ font-style:italic; color:var(--loom); }
.hero__lede{
  font-size:clamp(1.05rem,1.5vw,1.2rem);
  color:var(--ink-60); max-width:44ch; margin-bottom:14px;
}
.hero__model{
  font-size:13px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink); margin-bottom:38px;
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:48px; }

.heritage-strip{
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  padding-top:26px; border-top:1px solid var(--line);
}
.heritage-strip__span{
  display:inline-flex; align-items:center; gap:14px;
  font-family:var(--serif); font-size:26px; color:var(--loom);
}
.heritage-strip__span i{
  display:block; width:52px; height:1px; background:var(--brass); position:relative;
}
.heritage-strip__span i::after{
  content:""; position:absolute; right:0; top:-3px;
  width:7px; height:7px; border-top:1px solid var(--brass);
  border-right:1px solid var(--brass); transform:rotate(45deg);
}
.heritage-strip__label{
  font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-60);
}

.hero__visual{
  position:relative; margin:0;
  aspect-ratio:1/1.15;
  background:var(--loom);
  border-radius:var(--r-md);
  overflow:hidden;
}
.weave-field{
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.07) 0 5px, transparent 5px 10px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.16) 0 5px, transparent 5px 10px),
    linear-gradient(150deg, #24473C 0%, #162C25 100%);
}
.rolls{ position:absolute; inset:0; width:100%; height:100%; }
.hero__caption{
  position:absolute; left:0; right:0; bottom:0;
  padding:18px 22px;
  background:linear-gradient(transparent, rgba(10,20,17,.72));
  color:var(--sand); font-size:12.5px; letter-spacing:.1em; text-transform:uppercase;
}

/* --- HERITAGE --------------------------------------------- */
.section--heritage{ background:var(--paper); }
.heritage{
  display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(40px,6vw,90px);
  align-items:start;
}
.heritage__lead .display{ margin-bottom:26px; }
.heritage__lead .lede{ margin-bottom:22px; }
.heritage__lead p:not(.lede){ color:var(--ink-60); }

.timeline{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.timeline__item{
  display:grid; grid-template-columns:minmax(150px,auto) 1fr;
  gap:24px; align-items:baseline;
  padding:30px 0; border-bottom:1px solid var(--line);
  position:relative;
}
.timeline__item::before{
  content:""; position:absolute; left:0; top:-1px; height:1px; width:0;
  background:var(--brass); transition:width .8s var(--ease);
}
.timeline__item.is-in::before{ width:100%; }
.timeline__year{
  font-family:var(--serif); font-size:clamp(1.6rem,2.6vw,2.1rem);
  color:var(--loom); line-height:1;
}
.timeline__text{ color:var(--ink-60); font-size:15.5px; }

/* --- COUNTERS --------------------------------------------- */
.section--counters{
  background:var(--loom); color:var(--paper);
  padding-block:clamp(56px,7vw,84px);
}
.metrics{
  display:grid; grid-template-columns:repeat(4,1fr);
  margin:0; padding:0;
}
.metric{
  padding:8px 28px;
  border-left:1px solid var(--line-dark);
}
.metric:first-child{ border-left:0; padding-left:0; }
.metric__value{
  font-family:var(--serif); font-size:clamp(2.6rem,5vw,4rem);
  line-height:1; letter-spacing:-.02em; margin:0 0 12px;
  font-variant-numeric:tabular-nums;
}
.metric__label{
  margin:0; font-size:12.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--sand);
}

/* --- FABRICS ---------------------------------------------- */
.section--fabrics{ background:var(--paper-2); }
.fabric-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:28px; }

.fabric-card{
  background:var(--bleach);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  overflow:hidden;
  display:flex; flex-direction:column;
}
.fabric-card__swatch{
  height:230px; position:relative; overflow:hidden;
}
.fabric-card__swatch::after{
  content:""; position:absolute; inset:0;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.30) 0 4px, transparent 4px 8px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.10) 0 4px, transparent 4px 8px);
}
.fabric-card--grey .fabric-card__swatch{ background:linear-gradient(140deg,#CDC3AE,#AFA592); }
.fabric-card--bleached .fabric-card__swatch{ background:linear-gradient(140deg,#FAF7F1,#D5CDBD); }

.fabric-card__body{ padding:32px; display:flex; flex-direction:column; flex:1; }
.fabric-card__top{
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:16px; margin-bottom:16px;
}
.fabric-card__name{
  font-family:var(--serif); font-size:clamp(1.5rem,2.4vw,1.95rem);
  line-height:1.1; margin:0;
}
.tag{
  flex:none; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase;
  padding:6px 11px; border-radius:100px; border:1px solid;
  white-space:nowrap;
}
.tag--open{ color:var(--loom); border-color:rgba(30,58,49,.4); background:rgba(30,58,49,.07); }
.tag--request{ color:var(--brass); border-color:rgba(150,104,43,.4); background:rgba(150,104,43,.07); }

.fabric-card__desc{ color:var(--ink-60); font-size:15.5px; margin-bottom:24px; }

.spec-list{ list-style:none; margin:0 0 28px; padding:0; border-top:1px solid var(--line); }
.spec-list li{
  display:flex; justify-content:space-between; gap:16px;
  padding:11px 0; border-bottom:1px solid var(--line);
  font-size:14px;
}
.spec-list dt, .spec-list .k{ color:var(--ink-35); letter-spacing:.04em; }
.spec-list .v{ color:var(--ink); text-align:right; }

.fabric-card__foot{ margin-top:auto; }
.fabric-card__prompt{
  font-size:14px; color:var(--ink-60); margin-bottom:16px;
}
.fabrics__note{
  margin-top:36px; font-size:14.5px; color:var(--ink-60);
  max-width:70ch; border-left:2px solid var(--brass); padding-left:16px;
}

/* --- REQUIREMENT CTA -------------------------------------- */
.section--brief-cta{ background:var(--paper); }
.brief-cta{
  display:grid; grid-template-columns:1.15fr .85fr;
  gap:clamp(36px,5vw,72px); align-items:center;
}
.brief-cta__sub{
  font-family:var(--serif); font-size:clamp(1.3rem,2vw,1.7rem);
  color:var(--brass); margin-bottom:20px;
}
.brief-cta__text p:not(.brief-cta__sub):not(.brief-cta__meta){
  color:var(--ink-60); margin-bottom:32px; max-width:52ch;
}
.brief-cta__meta{
  margin-top:18px; font-size:13px; color:var(--ink-35);
}

.preview-card{
  background:var(--bleach); border:1px solid var(--line);
  border-radius:var(--r-md); padding:30px;
  box-shadow:0 24px 48px -34px rgba(23,26,24,.5);
}
.preview-card__step{
  font-family:var(--mono); font-size:12px; color:var(--brass);
  letter-spacing:.1em; display:block; margin-bottom:14px;
}
.preview-card__q{
  font-family:var(--serif); font-size:1.3rem; line-height:1.25; margin-bottom:22px;
}
.preview-card__opt{
  display:block; padding:14px 16px; border:1px solid var(--line);
  border-radius:var(--r-sm); margin-bottom:10px; font-size:14.5px; color:var(--ink-60);
}
.preview-card__opt--on{
  border-color:var(--loom); color:var(--ink); background:rgba(30,58,49,.05);
}

/* --- WHY -------------------------------------------------- */
.section--why{ background:var(--paper-2); }
.reasons{
  display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);
}
.reason{
  padding:38px 34px 38px 0;
  border-bottom:1px solid var(--line);
  border-right:1px solid var(--line);
}
.reason:nth-child(3n){ border-right:0; padding-right:0; }
.reason:not(:nth-child(3n)){ padding-right:34px; }
.reason:nth-child(n+2){ padding-left:34px; }
.reason:nth-child(3n+1){ padding-left:0; }
.reason h3{
  font-family:var(--serif); font-weight:400;
  font-size:1.4rem; line-height:1.2; margin:0 0 12px;
}
.reason p{ color:var(--ink-60); font-size:15px; margin:0; }

/* --- NETWORK ---------------------------------------------- */
.section--network{ background:var(--loom); color:var(--paper); }
.section--network .lede{ color:var(--sand); }
.network{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(40px,6vw,80px); align-items:center;
}
.network__text .display{ margin-bottom:22px; }
.network__note{ font-size:13px; color:rgba(236,232,223,.45); margin-top:22px; }

.region-list{ list-style:none; margin:34px 0 0; padding:0; border-top:1px solid var(--line-dark); }
.region-btn{
  display:flex; justify-content:space-between; align-items:baseline; gap:20px;
  width:100%; text-align:left;
  background:none; border:0; border-bottom:1px solid var(--line-dark);
  padding:20px 0; cursor:pointer; color:inherit;
  transition:padding .3s var(--ease), color .3s var(--ease);
  font-family:inherit;
}
.region-btn__name{ font-family:var(--serif); font-size:1.45rem; }
.region-btn__role{ font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; color:rgba(236,232,223,.5); }
.region-btn:hover, .region-btn.is-active{ padding-left:16px; }
.region-btn.is-active .region-btn__name{ color:var(--brass-lt); }
.region-btn.is-active .region-btn__role{ color:var(--sand); }

.india{ width:100%; height:auto; display:block; }
.india__fill{ color:rgba(214,204,185,.34); }
.india__outline{ stroke:rgba(214,204,185,.5); stroke-width:1.25; }
.pin__halo{ fill:var(--brass-lt); opacity:0; transition:opacity .35s var(--ease); }
.pin__dot{ fill:var(--sand); transition:fill .3s var(--ease), r .3s var(--ease); }
.pin text{
  fill:var(--sand); font:500 14px var(--sans); letter-spacing:.05em;
  paint-order:stroke; stroke:#16302A; stroke-width:4px; stroke-linejoin:round;
  transition:fill .3s var(--ease);
}
.pin.is-active .pin__halo{ opacity:.22; }
.pin.is-active .pin__dot{ fill:var(--brass-lt); }
.pin.is-active text{ fill:#F4EFE2; }
.base__mark{ fill:none; stroke:rgba(236,232,223,.7); stroke-width:1.2; }
.base text{
  fill:rgba(236,232,223,.72); font:400 12.5px var(--sans); letter-spacing:.07em;
  paint-order:stroke; stroke:#16302A; stroke-width:4px; stroke-linejoin:round;
}

/* --- APPLICATIONS ----------------------------------------- */
.section--apps{ background:var(--paper); }
.apps{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line); border-left:1px solid var(--line);
}
.app{
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:44px 26px; min-height:150px;
  display:flex; align-items:flex-end;
  transition:background .35s var(--ease);
}
.app:hover{ background:var(--bleach); }
.app__name{
  font-family:var(--serif); font-size:clamp(1.2rem,1.9vw,1.55rem);
  line-height:1.15;
}

/* --- MARKET ----------------------------------------------- */
.section--market{
  background:var(--ink); color:var(--paper);
  padding-block:clamp(72px,8vw,110px);
}
.market{ max-width:760px; }
.market .display{ margin-bottom:22px; }
.market p{ color:rgba(236,232,223,.68); }
.market__prompt{
  font-family:var(--serif); font-size:1.5rem;
  color:var(--brass-lt); margin:28px 0 20px !important;
}

/* --- SPLIT ------------------------------------------------ */
.section--split{ background:var(--paper-2); }
.split{ display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(40px,6vw,80px); align-items:center; }
.split__left .display{ margin:0; }
.split__list{
  list-style:none; margin:0; padding:0; border-top:1px solid var(--line);
}
.split__list li{
  padding:20px 0; border-bottom:1px solid var(--line);
  font-size:1.05rem; color:var(--ink-60);
  display:flex; align-items:center; gap:16px;
}
.split__list li::before{
  content:""; width:22px; height:1px; background:var(--brass); flex:none;
}

/* --- FINAL CTA -------------------------------------------- */
.section--final{
  background:var(--loom); color:var(--paper);
  padding-block:clamp(80px,9vw,132px);
  position:relative; overflow:hidden;
}
.section--final::before{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 72px);
}
.final{ position:relative; text-align:center; }
.final .display{ margin-bottom:16px; }
.final__sub{
  font-family:var(--serif); font-size:clamp(1.2rem,2vw,1.6rem);
  color:var(--sand); margin:0 auto 42px; max-width:none;
}
.final__actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

/* --- CONTACT ---------------------------------------------- */
.section--contact{ background:var(--paper); }
.contact{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(40px,6vw,80px); }
.contact__lead .display{ margin-bottom:20px; }
.contact__org{ margin:28px 0 22px; font-size:16px; line-height:1.8; }

.contact__cards{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
}
.contact-card{
  display:flex; flex-direction:column; gap:7px;
  background:var(--bleach); padding:28px;
  text-decoration:none; text-align:left;
  border:0; font-family:inherit; cursor:pointer;
  transition:background .3s var(--ease);
}
.contact-card:hover{ background:#fff; }
.contact-card--static{ cursor:default; }
.contact-card--static:hover{ background:var(--bleach); }
.contact-card__label{
  font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-35);
}
.contact-card__value{ font-family:var(--serif); font-size:1.28rem; line-height:1.25; }
.contact-card__action{ font-size:13.5px; color:var(--ink-60); margin-top:2px; }
.contact-card--cta{ background:var(--loom); color:var(--paper); }
.contact-card--cta:hover{ background:var(--loom-2); }
.contact-card--cta .contact-card__label{ color:var(--brass-lt); }
.contact-card--cta .contact-card__action{ color:var(--sand); }

/* ---------------------------------------------------------- 7 FABRIC BRIEF */
.brief{ position:fixed; inset:0; z-index:120; display:flex; }
.brief[hidden]{ display:none; }
.brief__scrim{
  position:absolute; inset:0; background:rgba(12,20,17,.55);
  backdrop-filter:blur(3px);
  opacity:0; transition:opacity .35s var(--ease);
}
.brief.is-open .brief__scrim{ opacity:1; }

.brief__panel{
  position:relative; margin-left:auto;
  width:min(620px,100%); height:100%;
  background:var(--bleach);
  display:flex; flex-direction:column;
  transform:translateX(28px); opacity:0;
  transition:transform .4s var(--ease), opacity .3s var(--ease);
  box-shadow:-40px 0 90px -50px rgba(0,0,0,.6);
}
.brief.is-open .brief__panel{ transform:none; opacity:1; }

.brief__head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:20px;
  padding:26px 32px 20px;
  background:var(--loom); color:var(--paper);
}
.brief__kicker{
  font-size:11.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--brass-lt); margin:0 0 8px;
}
.brief__title{ font-family:var(--serif); font-weight:400; font-size:1.6rem; margin:0; line-height:1.15; }
.brief__close{
  flex:none; width:42px; height:42px; border-radius:var(--r-sm);
  background:none; border:1px solid rgba(236,232,223,.3); color:var(--paper);
  cursor:pointer; display:grid; place-items:center;
  transition:background .25s var(--ease);
}
.brief__close:hover{ background:rgba(236,232,223,.14); }
.brief__close svg{ width:18px; height:18px; }

.brief__progress{
  display:flex; align-items:center; gap:16px;
  padding:16px 32px; border-bottom:1px solid var(--line);
  background:var(--paper);
}
.brief__progress[hidden]{ display:none; }
.brief__count{
  font-family:var(--mono); font-size:12.5px; letter-spacing:.1em; color:var(--ink-60);
  flex:none; font-variant-numeric:tabular-nums;
}
.brief__bar{ flex:1; height:2px; background:var(--line); }
.brief__bar i{ display:block; height:100%; background:var(--brass); transition:width .45s var(--ease); }

.brief__body{
  flex:1; overflow-y:auto; padding:34px 32px 40px;
  -webkit-overflow-scrolling:touch;
}
.brief__body:focus{ outline:none; }

.step{ animation:stepIn .38s var(--ease) both; }
@keyframes stepIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

.step__q{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.5rem,3.4vw,1.9rem); line-height:1.18;
  margin:0 0 10px;
}
.step__hint{ color:var(--ink-60); font-size:14.5px; margin:0 0 26px; }

.choices{ display:grid; gap:12px; margin:0; padding:0; border:0; }
.choice{
  display:flex; align-items:center; gap:14px;
  padding:18px 20px; min-height:60px;
  border:1px solid var(--line); border-radius:var(--r-sm);
  cursor:pointer; background:#fff;
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.choice:hover{ border-color:var(--ink-35); }
.choice input{ position:absolute; opacity:0; width:0; height:0; }
.choice__mark{
  flex:none; width:18px; height:18px; border-radius:50%;
  border:1px solid var(--ink-35); position:relative;
  transition:border-color .2s var(--ease);
}
.choice__mark::after{
  content:""; position:absolute; inset:3px; border-radius:50%;
  background:var(--loom); transform:scale(0); transition:transform .2s var(--ease);
}
.choice__label{ font-size:16px; }
.choice.is-selected{ border-color:var(--loom); background:rgba(30,58,49,.05); }
.choice.is-selected .choice__mark{ border-color:var(--loom); }
.choice.is-selected .choice__mark::after{ transform:scale(1); }
.choice:focus-within{ outline:2px solid var(--brass); outline-offset:2px; }

.fields{ display:grid; gap:18px; }
.fields--2{ grid-template-columns:1fr 1fr; }
.field{ display:flex; flex-direction:column; gap:7px; }
.field__label{ font-size:13px; letter-spacing:.05em; color:var(--ink-60); }
.field__label .opt{ color:var(--ink-35); }
.field input, .field select{
  font:400 16px var(--sans); color:var(--ink);
  padding:14px 15px; min-height:52px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-sm);
  transition:border-color .25s var(--ease);
  width:100%;
}
.field input:hover, .field select:hover{ border-color:var(--ink-35); }
.field input:focus, .field select:focus{ outline:none; border-color:var(--loom); box-shadow:0 0 0 3px rgba(30,58,49,.12); }
.field.has-error input, .field.has-error select{ border-color:#9B3A2C; }
.field__error{ font-size:13px; color:#9B3A2C; min-height:0; }

.skip-spec{
  margin-top:22px; padding:18px 20px;
  border:1px dashed var(--line); border-radius:var(--r-sm);
  background:var(--paper);
}
.skip-spec p{ font-size:14.5px; margin:0 0 12px; color:var(--ink-60); }
.link-btn{
  background:none; border:0; padding:0; cursor:pointer;
  font:500 14.5px var(--sans); color:var(--brass);
  border-bottom:1px solid currentColor;
}
.link-btn:hover{ color:var(--ink); }

/* Summary */
.summary__title{
  font-family:var(--serif); font-size:1.75rem; margin:0 0 6px; font-weight:400;
}
.summary__sub{ color:var(--ink-60); font-size:14.5px; margin-bottom:26px; }
.summary__list{ margin:0 0 30px; border-top:1px solid var(--line); }
.summary__row{
  display:grid; grid-template-columns:150px 1fr auto; gap:16px; align-items:baseline;
  padding:14px 0; border-bottom:1px solid var(--line);
}
.summary__k{ font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-35); }
.summary__v{ font-family:var(--mono); font-size:15px; color:var(--ink); word-break:break-word; }
.summary__edit{
  background:none; border:0; cursor:pointer; padding:0;
  font:400 13px var(--sans); color:var(--brass); border-bottom:1px solid transparent;
}
.summary__edit:hover{ border-bottom-color:currentColor; }

.send{ border-top:2px solid var(--ink); padding-top:26px; }
.send__title{
  font-size:12.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-60); margin:0 0 18px;
}
.send__actions{ display:grid; gap:12px; }
.send__note{ margin-top:18px; font-size:13px; color:var(--ink-35); }

.btn--wa{ --btn-bg:#1F7A4D; --btn-fg:#F4FBF7; --btn-bd:#1F7A4D; }
.btn--wa:hover{ --btn-bg:#186139; --btn-bd:#186139; }

.brief__foot{
  display:flex; gap:12px; justify-content:space-between;
  padding:18px 32px calc(18px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line); background:var(--paper);
}
.brief__foot .btn{ flex:1; }
.brief__foot[hidden]{ display:none; }

/* ---------------------------------------------------------- 8 FOOTER */
.site-footer{ background:var(--ink); color:var(--paper); padding-top:82px; }
.footer-grid{
  display:grid; grid-template-columns:1.4fr .8fr 1fr; gap:48px;
  padding-bottom:56px;
}
.footer-brand__name{ font-family:var(--serif); font-size:1.7rem; margin:0 0 10px; }
.footer-brand__line{ margin:0 0 4px; font-size:14px; color:rgba(236,232,223,.6); }
.footer-brand .btn{ margin-top:22px; }
.footer-heading{
  font-size:11.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--brass-lt); margin:0 0 18px; font-weight:500;
}
.footer-nav ul, .footer-contact ul{ list-style:none; margin:0; padding:0; }
.footer-nav li, .footer-contact li{ margin-bottom:11px; font-size:15px; color:rgba(236,232,223,.72); }
.footer-nav a, .footer-contact a{
  text-decoration:none; color:rgba(236,232,223,.72);
  transition:color .25s var(--ease);
}
.footer-nav a:hover, .footer-contact a:hover{ color:var(--paper); }
.footer-social{ display:flex; gap:20px; margin-top:22px !important; }
.footer-social li{ margin:0; }

.footer-base{
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding-block:24px; border-top:1px solid rgba(236,232,223,.14);
}
.footer-base p{ margin:0; font-size:13px; color:rgba(236,232,223,.45); }
.footer-base__note{ font-family:var(--serif); font-style:italic; }

/* --- Mobile action bar ------------------------------------ */
.mobile-bar{
  display:none;
  position:fixed; left:0; right:0; bottom:0; z-index:95;
  background:var(--bleach); border-top:1px solid var(--line);
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  gap:10px;
}
.mobile-bar__btn{
  flex:1; min-height:50px;
  display:flex; align-items:center; justify-content:center;
  font:500 15px var(--sans); letter-spacing:.04em;
  border-radius:var(--r-sm); text-decoration:none; border:1px solid;
  cursor:pointer;
}
.mobile-bar__btn--wa{ background:#1F7A4D; border-color:#1F7A4D; color:#F4FBF7; }
.mobile-bar__btn--enq{ background:var(--loom); border-color:var(--loom); color:var(--paper); }

/* --- Scroll reveal ---------------------------------------- */
.reveal{ opacity:0; transform:translateY(16px); }
.reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}

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