:root {
  --paper: #f4eee4;
  --paper-2: #ebe1d3;
  --ink: #22191c;
  --muted: #6f6263;
  --aubergine: #3a1327;
  --aubergine-2: #661f40;
  --indigo: #182846;
  --gold: #b88958;
  --sage: #788071;
  --white: #fffaf3;
  --line: rgba(34,25,28,.16);
  --serif: Iowan Old Style, Baskerville, "Times New Roman", serif;
  --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --shell: min(1380px, calc(100vw - 80px));
  --ease: cubic-bezier(.22,.72,.22,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1000; opacity: .22; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.84' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.14'/%3E%3C/svg%3E"); }
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
a, button, label, input, select, textarea { -webkit-tap-highlight-color: transparent; }
a, button { touch-action: manipulation; }
button { color: inherit; }
img, svg { display: block; max-width: 100%; }
::selection { background: var(--aubergine); color: var(--white); }
.shell { width: var(--shell); margin: 0 auto; }
.section { padding: 140px 0; }
.sr-only { position: absolute!important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 16px; top: -100px; z-index: 2000; background: var(--ink); color: white; padding: 12px 18px; transition: top .2s; }
.skip-link:focus { top: 16px; }
.icon { width: 20px; height: 20px; flex: 0 0 auto; }

.site-header { position: fixed; inset: 0 0 auto; z-index: 100; height: 96px; color: var(--ink); transition: background .45s, height .45s, box-shadow .45s; }
.site-header.scrolled { height: 76px; background: rgba(244,238,228,.88); backdrop-filter: blur(18px); box-shadow: 0 1px 0 var(--line); }
.header-inner { position:relative; z-index:2; height: 100%; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 13px; position: relative; z-index: 2; }
.brand-mark { width: 34px; height: 34px; display: grid; grid-template-columns: repeat(4,1fr); gap: 2px; transform: skewY(-8deg); }
.brand-mark i { display: block; background: var(--aubergine); border-radius: 100% 0 100% 0; }
.brand-mark i:nth-child(2), .brand-mark i:nth-child(4) { background: var(--gold); transform: translateY(4px); }
.brand-copy { display: grid; gap: 2px; }
.brand-copy strong { letter-spacing: .21em; font-size: 15px; font-weight: 700; }
.brand-copy small { font-size: 8px; letter-spacing: .26em; color: var(--muted); }
.desktop-nav { display: flex; align-items: center; gap: 34px; }
.desktop-nav a { font-size: 12px; letter-spacing: .08em; position: relative; padding: 12px 0; }
.desktop-nav a:not(.nav-cta)::after { content:""; position:absolute; height:1px; left:0; right:100%; bottom:6px; background:var(--aubergine); transition:right .35s var(--ease); }
.desktop-nav a:hover::after, .desktop-nav a.active::after { right:0; }
.desktop-nav .nav-cta { color: var(--white); background: var(--aubergine); padding: 13px 20px; transition: transform .3s, background .3s; }
.desktop-nav .nav-cta:hover { transform: translateY(-2px); background: var(--aubergine-2); }
.menu-button { display:none; border:0; background:none; align-items:center; gap:10px; padding:10px 0; }
.mobile-panel { position:fixed; inset:0; min-height:100vh; min-height:100dvh; overflow-y:auto; overscroll-behavior:contain; z-index:1; background:var(--aubergine); color:var(--white); padding:130px 30px 32px; opacity:0; visibility:hidden; transition:opacity .35s; }
.mobile-panel.open { opacity:1; visibility:visible; }
.mobile-nav { display:grid; }
.mobile-nav a { font-family:var(--serif); font-size:clamp(34px,9vw,56px); border-bottom:1px solid rgba(255,255,255,.15); padding:15px 0; display:flex; justify-content:space-between; align-items:center; transform:translateY(16px); opacity:0; transition:transform .4s var(--ease),opacity .4s; transition-delay:calc(var(--i) * 60ms); }
.mobile-panel.open .mobile-nav a { transform:none; opacity:1; }
.mobile-meta { position:sticky; margin-top:40px; inset:auto; inset:auto 30px 30px; display:flex; justify-content:space-between; color:rgba(255,255,255,.55); font-size:11px; text-transform:uppercase; letter-spacing:.12em; }

.eyebrow { margin:0 0 24px; font-size:10px; line-height:1.4; font-weight:700; letter-spacing:.23em; text-transform:uppercase; color:var(--aubergine); display:flex; align-items:center; gap:10px; }
.eyebrow > span { width:32px; height:1px; background:currentColor; }
.eyebrow.light { color:#d9b89d; }
h1,h2,h3,p { margin-top:0; }
h1,h2,h3 { font-family:var(--serif); font-weight:400; }
h1 { font-size:clamp(72px,9vw,146px); line-height:.82; letter-spacing:-.055em; margin-bottom:36px; }
h1 em { font-weight:400; color:var(--aubergine-2); }
h2 { font-size:clamp(52px,6.6vw,98px); line-height:.93; letter-spacing:-.045em; margin-bottom:28px; }
h3 { font-size:30px; line-height:1.08; letter-spacing:-.02em; }
p { line-height:1.7; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:20px; min-height:58px; padding:0 25px; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; border:1px solid transparent; transition:transform .3s var(--ease),background .3s,color .3s; }
.button:hover { transform:translateY(-3px); }
.button-dark { background:var(--aubergine); color:var(--white); }
.button-dark:hover { background:var(--aubergine-2); }
.button-light { border-color:rgba(255,255,255,.38); color:var(--white); }
.button-light:hover { background:var(--white); color:var(--aubergine); }
.text-link { display:inline-flex; align-items:center; gap:16px; padding:10px 0 8px; border-bottom:1px solid currentColor; font-size:12px; font-weight:600; }
.text-link .icon { transition:transform .3s; }
.text-link:hover .icon { transform:translateX(5px); }

.hero { min-height:100vh; padding:128px 0 40px; display:flex; align-items:center; position:relative; overflow:hidden; }
.home-hero::before { content:""; position:absolute; width:60vw; height:60vw; border:1px solid rgba(58,19,39,.08); border-radius:50%; right:-22vw; top:-18vw; }
.home-hero::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg, transparent 0 49.94%, rgba(58,19,39,.07) 50%, transparent 50.06%); }
.hero-grid { display:grid; grid-template-columns:.92fr 1.08fr; align-items:center; position:relative; z-index:1; }
.hero-copy { padding-top:34px; max-width:650px; }
.hero-lead { font-family:var(--serif); font-size:21px; line-height:1.5; max-width:580px; color:#57484a; }
.hero-actions { display:flex; align-items:center; gap:36px; margin-top:38px; }
.hero-note { margin-top:54px; display:flex; align-items:center; gap:16px; max-width:470px; font-size:10px; line-height:1.5; text-transform:uppercase; letter-spacing:.13em; color:var(--muted); }
.thread-sample { width:74px; height:16px; flex:0 0 auto; background:repeating-linear-gradient(0deg,var(--aubergine) 0 1px,transparent 1px 4px); transform:skewX(-18deg); }
.hero-art { min-width:0; }
.cloth-stage { --rx:0deg; --ry:0deg; position:relative; aspect-ratio:1; perspective:1000px; }
.cloth-halo { position:absolute; inset:14%; border-radius:50%; background:radial-gradient(circle,rgba(184,137,88,.25),transparent 67%); filter:blur(18px); }
.cloth-svg { width:100%; height:100%; overflow:visible; transform:rotateX(var(--rx)) rotateY(var(--ry)); transition:transform .28s var(--ease); }
.cloth-form { transform-origin:center; animation:clothFloat 8s ease-in-out infinite; }
.swatch-pin { color:var(--ink); }
.swatch-pin circle { fill:var(--gold); }
.swatch-pin path { stroke:var(--ink); stroke-width:1; }
.swatch-pin rect { fill:rgba(244,238,228,.94); stroke:rgba(34,25,28,.25); }
.swatch-pin text { font-family:var(--sans); font-size:8px; letter-spacing:.08em; fill:var(--ink); }
.pin-one { animation:pinFloat 6s ease-in-out infinite; }
.pin-two { animation:pinFloat 7s ease-in-out infinite reverse; }
.cloth-orbit { position:absolute; border:1px solid rgba(58,19,39,.16); border-radius:50%; display:grid; place-items:center; color:var(--aubergine); font:700 8px/1 var(--sans); letter-spacing:.2em; text-transform:uppercase; }
.orbit-one { width:70px; height:70px; right:4%; top:15%; animation:orbit 14s linear infinite; }
.orbit-two { width:50px; height:50px; left:7%; bottom:12%; animation:orbit 10s linear infinite reverse; }
.cloth-orbit span { background:var(--paper); padding:3px; }
.hero-index { position:absolute; z-index:2; left:50%; transform:translateX(-50%); bottom:28px; display:flex; align-items:center; gap:20px; font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
.hero-index .line { flex:1; height:1px; background:var(--line); }
@keyframes clothFloat { 0%,100%{transform:translateY(0) rotate(-1deg)} 50%{transform:translateY(-15px) rotate(1deg)} }
@keyframes pinFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }
@keyframes orbit { to{transform:rotate(360deg)} }

.confidence-strip { border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.confidence-grid { display:grid; grid-template-columns:repeat(4,1fr); }
.confidence-grid > div { padding:28px 28px; border-right:1px solid var(--line); display:grid; gap:6px; }
.confidence-grid > div:first-child { padding-left:0; }
.confidence-grid > div:last-child { border-right:0; }
.confidence-grid strong { font-family:var(--serif); font-size:19px; font-weight:400; }
.confidence-grid span { font-size:9px; text-transform:uppercase; letter-spacing:.15em; color:var(--muted); }

.split-heading { display:grid; grid-template-columns:1.1fr .7fr; gap:12vw; align-items:end; margin-bottom:76px; }
.split-heading h2 { margin-bottom:0; }
.split-heading > div:last-child p { color:var(--muted); font-size:16px; margin-bottom:30px; }
.fabric-gallery { display:grid; grid-template-columns:repeat(2,1fr); gap:80px 24px; }
.fabric-card:nth-child(even) { margin-top:100px; }
.fabric-image, .catalogue-image { position:relative; overflow:hidden; isolation:isolate; background-color:#ddd; }
.fabric-image { aspect-ratio:1.02; transition:transform .7s var(--ease); }
.fabric-card a:hover .fabric-image { transform:scale(.985); }
.fabric-image::before, .catalogue-image::before { content:""; position:absolute; inset:-10%; background:inherit; transition:transform 1.1s var(--ease); }
.fabric-card a:hover .fabric-image::before { transform:scale(1.06) rotate(.5deg); }
.fabric-image::after, .catalogue-image::after { content:""; position:absolute; inset:0; z-index:1; pointer-events:none; mix-blend-mode:soft-light; opacity:.55; background:repeating-linear-gradient(90deg,transparent 0 3px,rgba(255,255,255,.28) 3px 4px),repeating-linear-gradient(0deg,transparent 0 3px,rgba(0,0,0,.14) 3px 4px); }
.texture-linen { background:radial-gradient(ellipse at 20% 25%,#e7d2b7 0 7%,transparent 8%),radial-gradient(ellipse at 65% 70%,#c09b6d 0 10%,transparent 11%),linear-gradient(135deg,#e7d6bf,#b99165 45%,#e8dac4 66%,#aa7c53); }
.texture-indigo { background:radial-gradient(circle at 80% 20%,#334a78,transparent 25%),repeating-linear-gradient(128deg,#101d37 0 25px,#23385e 26px 50px,#162746 51px 78px); }
.texture-jacquard { background:conic-gradient(from 45deg at 50% 50%,#b5a398 0 25%,#e4d7c8 0 50%,#7a5a65 0 75%,#cab9a9 0); background-size:72px 72px; }
.texture-serein { background:radial-gradient(ellipse at 28% 30%,rgba(255,255,255,.75),transparent 20%),linear-gradient(135deg,#8f435c,#df9eaa 45%,#e9c2ba 67%,#8b394f); }
.texture-dune { background:linear-gradient(120deg,#7e6246 0 18%,#b59874 19% 37%,#796249 38% 55%,#c0a47d 56% 75%,#7d6043 76%); }
.texture-veil { background:repeating-linear-gradient(90deg,rgba(255,255,255,.86) 0 11px,rgba(186,157,133,.54) 12px 15px),linear-gradient(#e8d9ca,#c7a98f); }
.texture-nocturne { background:radial-gradient(ellipse at 40% 30%,#425273,transparent 20%),linear-gradient(140deg,#10192d 0 30%,#34415e 31% 52%,#151d33 53% 75%,#52607c); }
.texture-terra { background:repeating-radial-gradient(ellipse at 50% 50%,#9a513e 0 13px,#c77857 14px 24px,#774131 25px 36px); }
.texture-mulberry { background:linear-gradient(140deg,#4d102c,#772749 42%,#321223 67%,#945f74); }
.fabric-number { position:absolute; z-index:2; left:20px; top:20px; width:42px; height:42px; display:grid; place-items:center; background:rgba(244,238,228,.92); font:700 9px/1 var(--sans); letter-spacing:.08em; }
.fabric-corner { position:absolute; z-index:2; right:0; bottom:0; width:130px; height:130px; background:linear-gradient(135deg,transparent 49%,rgba(244,238,228,.92) 50%); }
.touch-label { position:absolute; z-index:3; right:18px; bottom:18px; font-size:8px; letter-spacing:.18em; text-transform:uppercase; transform:rotate(-45deg) translate(13px,-2px); transform-origin:center; }
.fabric-info { display:grid; grid-template-columns:1fr auto; gap:20px; border-top:1px solid var(--line); padding-top:23px; margin-top:17px; }
.fabric-info h3 { margin-bottom:9px; }
.fabric-info p { max-width:420px; color:var(--muted); font-size:13px; margin-bottom:0; }
.fabric-meta { display:flex; flex-direction:column; align-items:flex-end; gap:7px; font-size:8px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }

.process-section { background:var(--aubergine); color:var(--white); }
.process-layout { display:grid; grid-template-columns:.7fr 1fr; gap:10vw; align-items:start; }
.process-sticky { position:sticky; top:150px; }
.process-sticky h2 { color:var(--white); }
.process-sticky p:not(.eyebrow) { color:rgba(255,255,255,.64); max-width:500px; margin-bottom:34px; }
.process-step { min-height:210px; border-top:1px solid rgba(255,255,255,.2); padding:35px 0; display:grid; grid-template-columns:54px 1fr auto; gap:30px; align-items:start; }
.process-number { font-size:10px; color:#d9b89d; letter-spacing:.15em; }
.process-step h3 { color:var(--white); margin-bottom:15px; font-size:38px; }
.process-step p { max-width:600px; color:rgba(255,255,255,.58); font-size:14px; margin-bottom:0; }
.process-letter { font-family:var(--serif); font-size:80px; color:rgba(255,255,255,.06); line-height:.8; }

.buyer-desk-grid { display:grid; grid-template-columns:1.15fr .75fr; gap:9vw; align-items:center; }
.buyer-desk-card { background:#e8dfd2; padding:26px; border:1px solid rgba(58,19,39,.14); box-shadow:0 35px 90px rgba(58,19,39,.12); transform:rotate(-1deg); }
.desk-top,.desk-footer { display:flex; justify-content:space-between; font-size:8px; letter-spacing:.13em; text-transform:uppercase; }
.status-pill { padding:6px 9px; background:#d9c2ab; color:var(--aubergine); }
.desk-swatch { aspect-ratio:2.1; margin:24px 0; padding:20px; display:flex; align-items:flex-end; color:rgba(255,255,255,.7); font-size:8px; letter-spacing:.16em; }
.swatch-mulberry { background:linear-gradient(125deg,#321020,#7b2e50 45%,#48192f 68%,#a77b76); position:relative; overflow:hidden; }
.swatch-mulberry::after { content:""; position:absolute; inset:0; background:repeating-linear-gradient(90deg,transparent 0 2px,rgba(255,255,255,.1) 2px 3px),repeating-linear-gradient(0deg,transparent 0 4px,rgba(0,0,0,.14) 4px 5px); }
.desk-data { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.desk-data div { border-top:1px solid rgba(58,19,39,.15); padding-top:10px; display:grid; gap:5px; }
.desk-data small { font-size:8px; color:var(--muted); text-transform:uppercase; letter-spacing:.12em; }
.desk-data strong { font-family:var(--serif); font-size:17px; font-weight:400; }
.desk-progress { height:3px; background:rgba(58,19,39,.13); margin:28px 0 14px; }
.desk-progress span { display:block; height:100%; width:var(--w); background:var(--aubergine); }
.desk-footer span { opacity:.45; }
.desk-footer .active { opacity:1; color:var(--aubergine); }
.buyer-desk-copy h2 { font-size:clamp(48px,5vw,78px); }
.buyer-desk-copy > p:not(.eyebrow) { color:var(--muted); }
.quiet-list { list-style:none; padding:0; margin:35px 0 0; display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.quiet-list li { display:flex; gap:10px; align-items:center; font-size:12px; }
.quiet-list .icon { width:15px; color:var(--aubergine); }

.responsibility-preview { padding-top:40px; }
.responsibility-panel { min-height:660px; background:var(--indigo); color:var(--white); display:grid; grid-template-columns:.85fr 1fr .7fr; align-items:center; gap:6vw; padding:70px; position:relative; overflow:hidden; }
.responsibility-panel::before { content:""; position:absolute; width:600px; height:600px; border:1px solid rgba(255,255,255,.08); border-radius:50%; left:-250px; top:-150px; }
.fibre-circle { width:min(32vw,390px); aspect-ratio:1; border:1px solid rgba(255,255,255,.25); border-radius:50%; display:grid; place-items:center; position:relative; font-family:var(--serif); font-size:50px; }
.fibre-circle::before,.fibre-circle::after,.fibre-circle i { content:""; position:absolute; inset:12%; border-radius:50%; border:1px dashed rgba(255,255,255,.15); }
.fibre-circle::after { inset:26%; }
.fibre-circle i:nth-of-type(1) { inset:38%; background:rgba(184,137,88,.25); border:0; }
.fibre-circle i:nth-of-type(2) { inset:-8%; border-color:rgba(255,255,255,.1); animation:orbit 28s linear infinite; }
.fibre-circle i:nth-of-type(3) { inset:20%; border-style:solid; transform:translate(18px,-12px); }
.responsibility-copy { position:relative; z-index:1; }
.responsibility-copy h2 { font-size:clamp(48px,5vw,80px); }
.responsibility-copy p:not(.eyebrow) { color:rgba(255,255,255,.64); }
.responsibility-list { display:grid; align-self:stretch; align-content:center; }
.responsibility-list span { padding:21px 0; border-bottom:1px solid rgba(255,255,255,.17); font-size:10px; text-transform:uppercase; letter-spacing:.13em; }

.closing-cta { padding:150px 0; border-top:1px solid var(--line); }
.closing-grid { display:grid; grid-template-columns:1.2fr .65fr; gap:12vw; align-items:end; }
.closing-grid h2 { margin-bottom:0; }
.closing-grid > div:last-child p { color:var(--muted); margin-bottom:28px; }

.inner-hero { min-height:750px; padding:160px 0 70px; display:flex; flex-direction:column; justify-content:center; position:relative; overflow:hidden; border-bottom:1px solid var(--line); }
.inner-hero::before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent calc(50% - .5px),rgba(58,19,39,.07) 50%,transparent calc(50% + .5px)); }
.inner-hero-grid { display:grid; grid-template-columns:1fr .86fr; gap:7vw; align-items:center; position:relative; z-index:1; }
.inner-hero h1 { font-size:clamp(66px,8vw,126px); line-height:.88; }
.inner-hero-grid > div:first-child > p:last-child { max-width:620px; color:var(--muted); font-family:var(--serif); font-size:20px; }
.inner-hero-visual { min-height:440px; display:grid; place-items:center; }

.textile-stack { --rx:0deg;--ry:0deg; width:min(100%,500px); aspect-ratio:1; position:relative; perspective:1000px; transform-style:preserve-3d; transform:rotateX(var(--rx)) rotateY(var(--ry)); transition:transform .25s var(--ease); }
.stack-card { position:absolute; width:66%; height:68%; left:17%; top:16%; border:8px solid rgba(255,255,255,.32); box-shadow:0 30px 70px rgba(58,19,39,.18); transform-origin:center bottom; overflow:hidden; }
.stack-card::before { content:""; position:absolute; inset:0; background:repeating-linear-gradient(90deg,transparent 0 4px,rgba(255,255,255,.2) 4px 5px),repeating-linear-gradient(0deg,transparent 0 3px,rgba(0,0,0,.14) 3px 4px); }
.stack-card span { position:absolute; left:18px; bottom:18px; font-size:8px; letter-spacing:.16em; color:rgba(255,255,255,.8); }
.card-a { background:linear-gradient(135deg,#d6baa0,#8b6049); transform:translateZ(-80px) rotate(-11deg) translateX(-50px); }
.card-b { background:conic-gradient(from 45deg,#654154 0 25%,#b69291 0 50%,#3b2135 0 75%,#d1b0a0 0); background-size:55px 55px; transform:translateZ(-35px) rotate(6deg) translateX(40px); }
.card-c { background:linear-gradient(145deg,#1b2949,#475d83 48%,#171e35); transform:translateZ(40px) rotate(-2deg); }
.stack-ring { position:absolute; width:130px; height:130px; right:0; bottom:0; border-radius:50%; background:var(--gold); color:var(--aubergine); display:flex; justify-content:center; align-items:center; gap:8px; transform:translateZ(80px); box-shadow:0 20px 50px rgba(58,19,39,.2); }
.stack-ring span { font-family:var(--serif); font-size:44px; }
.stack-ring small { font-size:8px; letter-spacing:.12em; text-transform:uppercase; }

.catalogue-toolbar { display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); padding-bottom:20px; margin-bottom:50px; }
.catalogue-toolbar > div { display:flex; align-items:center; gap:10px; }
.catalogue-toolbar span,.catalogue-toolbar p { font-size:9px; text-transform:uppercase; letter-spacing:.13em; color:var(--muted); margin:0 14px 0 0; }
.catalogue-toolbar button { border:1px solid var(--line); background:transparent; padding:9px 14px; font-size:9px; text-transform:uppercase; letter-spacing:.1em; cursor:pointer; }
.catalogue-toolbar button.active { background:var(--aubergine); color:var(--white); }
.catalogue-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:54px 18px; }
.catalogue-card { transition:opacity .4s,transform .4s; }
.catalogue-card.filtered-out { opacity:.12; transform:scale(.96); pointer-events:none; }
.catalogue-image { aspect-ratio:.78; }
.catalogue-code { position:absolute; z-index:2; left:16px; bottom:16px; color:rgba(255,255,255,.7); font-family:var(--serif); font-size:52px; }
.swatch-add { position:absolute; z-index:3; right:14px; top:14px; width:40px; height:40px; border-radius:50%; border:0; background:rgba(244,238,228,.94); font-size:22px; cursor:pointer; transition:transform .3s,background .3s; }
.swatch-add:hover { transform:rotate(90deg); }
.swatch-add.added { background:var(--aubergine); color:var(--white); transform:none; }
.catalogue-copy { padding-top:18px; }
.catalogue-copy h3 { font-size:27px; margin-bottom:10px; }
.catalogue-copy > p { font-size:12px; color:var(--muted); min-height:64px; }
.catalogue-copy dl { margin:18px 0 0; border-top:1px solid var(--line); }
.catalogue-copy dl div { display:flex; justify-content:space-between; gap:14px; padding:9px 0; border-bottom:1px solid var(--line); }
.catalogue-copy dt,.catalogue-copy dd { margin:0; font-size:8px; text-transform:uppercase; letter-spacing:.1em; }
.catalogue-copy dt { color:var(--muted); }
.development-band { background:var(--aubergine); color:var(--white); }
.development-grid { display:grid; grid-template-columns:.8fr 1fr; gap:10vw; }
.development-specs { display:grid; }
.development-specs div { border-top:1px solid rgba(255,255,255,.2); padding:25px 0; display:grid; grid-template-columns:50px 1fr; gap:22px; }
.development-specs strong { color:#d9b89d; font-size:10px; letter-spacing:.12em; }
.development-specs span { font-family:var(--serif); font-size:25px; }
.swatch-service { padding-bottom:60px; }

.loom-visual { width:min(100%,540px); aspect-ratio:1; position:relative; display:grid; place-items:center; }
.loom-frame { width:82%; height:78%; border:12px solid var(--aubergine); position:relative; box-shadow:inset 0 0 0 2px var(--gold),0 30px 70px rgba(58,19,39,.15); background:#dfd1c0; overflow:hidden; }
.warp-lines { position:absolute; inset:22px; display:flex; justify-content:space-between; }
.warp-lines i { width:1px; background:linear-gradient(var(--gold),var(--aubergine),var(--gold)); opacity:calc(.3 + var(--i) * .025); }
.weft-shuttle { position:absolute; left:0; right:0; top:48%; height:38px; background:var(--indigo); animation:shuttle 4.5s ease-in-out infinite; }
.weft-shuttle span { width:72px; height:20px; background:var(--gold); position:absolute; right:10px; top:9px; clip-path:polygon(0 0,100% 22%,100% 78%,0 100%,12% 50%); }
.loom-label { position:absolute; right:18px; bottom:14px; font-size:8px; line-height:1.5; letter-spacing:.13em; text-align:right; color:var(--aubergine); }
@keyframes shuttle { 0%,100%{transform:translateY(-100px)} 50%{transform:translateY(100px)} }
.capability-map-grid { display:grid; grid-template-columns:.7fr 1fr; align-items:center; gap:9vw; }
.capability-intro p:not(.eyebrow) { color:var(--muted); max-width:500px; }
.capability-wheel { width:min(100%,650px); aspect-ratio:1; margin-left:auto; border:1px solid var(--line); border-radius:50%; position:relative; display:grid; place-items:center; }
.capability-wheel::before,.capability-wheel::after { content:""; position:absolute; border:1px dashed var(--line); border-radius:50%; inset:15%; }
.capability-wheel::after { inset:32%; }
.wheel-node { --angle:0deg; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) rotate(var(--angle)) translateY(-300px) rotate(calc(var(--angle) * -1)); width:94px; height:94px; border-radius:50%; background:var(--paper); border:1px solid var(--line); display:grid; place-items:center; align-content:center; gap:4px; font-size:11px; cursor:pointer; transition:background .3s,color .3s,transform .3s; z-index:2; }
.wheel-node span { font-size:8px; letter-spacing:.12em; color:var(--muted); }
.wheel-node.active { background:var(--aubergine); color:var(--white); transform:translate(-50%,-50%) rotate(var(--angle)) translateY(-300px) rotate(calc(var(--angle) * -1)) scale(1.08); }
.wheel-node.active span { color:#d9b89d; }
.wheel-center { width:240px; text-align:center; position:relative; z-index:1; }
.wheel-center strong { font-family:var(--serif); font-size:28px; font-weight:400; }
.wheel-center p { color:var(--muted); font-size:12px; line-height:1.6; margin:12px 0 0; }
.services-grid-section { padding-top:30px; }
.services-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.service-card { min-height:400px; padding:38px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); display:flex; flex-direction:column; }
.service-top { display:flex; justify-content:space-between; font-size:9px; letter-spacing:.13em; color:var(--aubergine); }
.service-card h3 { margin-top:70px; font-size:37px; }
.service-card p { color:var(--muted); font-size:13px; }
.service-card ul { list-style:none; margin:auto 0 0; padding:0; display:grid; gap:7px; }
.service-card li { font-size:9px; text-transform:uppercase; letter-spacing:.12em; border-top:1px solid var(--line); padding-top:9px; }
.sample-timeline { background:#e5dacb; }
.timeline-track { display:grid; grid-template-columns:repeat(5,1fr); border-top:1px solid var(--line); padding-top:28px; position:relative; }
.timeline-track::before { content:""; position:absolute; top:-4px; left:0; width:80%; height:7px; background:var(--aubergine); transform-origin:left; animation:timelineGrow 2s var(--ease) both; animation-play-state:paused; }
.timeline-track.visible::before { animation-play-state:running; }
@keyframes timelineGrow { from{transform:scaleX(0)} to{transform:scaleX(1)} }
.timeline-track div { padding-right:25px; display:grid; gap:8px; }
.timeline-track span { font-size:9px; color:var(--aubergine); letter-spacing:.13em; }
.timeline-track strong { font-family:var(--serif); font-size:24px; font-weight:400; }
.timeline-track small { color:var(--muted); }

.trace-visual { width:min(100%,560px); aspect-ratio:1; position:relative; border-radius:50%; border:1px solid var(--line); }
.trace-line { position:absolute; left:50%; top:8%; bottom:8%; width:1px; background:linear-gradient(var(--aubergine),var(--gold),var(--indigo)); transform:rotate(46deg); transform-origin:center; }
.trace-point { position:absolute; width:72px; height:72px; border-radius:50%; background:var(--paper); border:1px solid var(--line); display:grid; place-items:center; font-size:9px; letter-spacing:.12em; text-transform:uppercase; box-shadow:0 15px 35px rgba(58,19,39,.08); }
.trace-point::after { content:""; position:absolute; inset:9px; border:1px dashed var(--line); border-radius:50%; }
.p1{left:10%;top:14%}.p2{right:10%;top:24%}.p3{left:16%;bottom:17%}.p4{right:15%;bottom:10%}
.trace-seal { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:170px; height:170px; border-radius:50%; background:var(--aubergine); color:var(--white); display:grid; place-items:center; text-align:center; font-family:var(--serif); font-size:25px; line-height:1.05; letter-spacing:.08em; box-shadow:0 25px 70px rgba(58,19,39,.25); }
.principle-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.principle-card { min-height:350px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); padding:35px; }
.principle-card > div { display:flex; justify-content:space-between; font-size:9px; color:var(--aubergine); }
.principle-card h3 { margin-top:70px; font-size:36px; }
.principle-card p { color:var(--muted); font-size:13px; }
.evidence-section { background:var(--indigo); color:var(--white); }
.evidence-grid { display:grid; grid-template-columns:.85fr 1fr; gap:10vw; align-items:center; }
.evidence-copy p:not(.eyebrow) { color:rgba(255,255,255,.64); max-width:560px; }
.document-stack { height:560px; position:relative; perspective:1200px; }
.doc { position:absolute; width:70%; height:78%; left:15%; top:10%; background:#efe6da; color:var(--ink); padding:30px; box-shadow:0 35px 80px rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.5); }
.doc-back { transform:rotate(-11deg) translate(-45px,20px); background:#c6a47f; }
.doc-mid { transform:rotate(8deg) translate(42px,12px); background:#cdc8bc; }
.doc-front { transform:rotate(-1deg); }
.doc-back span,.doc-mid span { font-size:9px; letter-spacing:.15em; }
.doc-back i,.doc-mid i { display:block; height:1px; background:rgba(34,25,28,.28); margin-top:24px; }
.doc-head { display:flex; justify-content:space-between; padding-bottom:20px; border-bottom:2px solid var(--aubergine); font-size:9px; letter-spacing:.12em; }
.doc-front ul { list-style:none; padding:0; margin:45px 0 0; }
.doc-front li { display:flex; align-items:center; gap:14px; border-bottom:1px solid var(--line); padding:17px 0; font-family:var(--serif); font-size:21px; }
.doc-front .icon { width:16px; color:var(--aubergine); }
.center-heading { text-align:center; max-width:850px; margin:0 auto 65px; }
.center-heading .eyebrow { justify-content:center; }
.question-led { background:#e6dbce; }
.question-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.question-grid div { min-height:220px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); padding:28px; }
.question-grid span { color:var(--aubergine); font-size:9px; letter-spacing:.13em; }
.question-grid p { font-family:var(--serif); font-size:24px; line-height:1.25; margin:65px 0 0; }

.trade-orbit { width:min(100%,560px); aspect-ratio:1; border:1px solid var(--line); border-radius:50%; position:relative; display:grid; place-items:center; }
.globe-lines,.globe-lines::before,.globe-lines::after { position:absolute; inset:12%; border:1px solid var(--line); border-radius:50%; }
.globe-lines::before,.globe-lines::after { content:""; inset:0; transform:scaleX(.45); }
.globe-lines::after { transform:scaleY(.45); }
.globe-lines i { position:absolute; left:0; right:0; top:50%; height:1px; background:var(--line); transform:rotate(calc(var(--i,0)*30deg)); }
.trade-core { width:180px;height:180px;border-radius:50%;background:var(--indigo);color:var(--white);display:grid;place-items:center;align-content:center;font-family:var(--serif);font-size:32px;text-align:center;box-shadow:0 25px 65px rgba(24,40,70,.25); }
.trade-core span { font:700 8px/1.5 var(--sans); letter-spacing:.18em; color:#c8b194; }
.port { position:absolute; padding:8px 10px; background:var(--paper); border:1px solid var(--line); font-size:8px; text-transform:uppercase; letter-spacing:.12em; }
.port-a{left:0;top:20%}.port-b{right:0;top:24%}.port-c{left:-3%;bottom:24%}.port-d{right:4%;bottom:12%}.port-e{left:44%;top:-3%}
.export-steps { border-top:1px solid var(--line); }
.export-step { min-height:155px; display:grid; grid-template-columns:80px 1fr auto; align-items:center; gap:40px; border-bottom:1px solid var(--line); }
.export-step > span { font-size:10px; letter-spacing:.13em; color:var(--aubergine); }
.export-step h3 { font-size:36px; margin:0 0 8px; }
.export-step p { color:var(--muted); margin:0; }
.export-step .icon { transition:transform .3s; }
.export-step:hover .icon { transform:translateX(8px); }
.packing-studio { background:#e5dacc; }
.packing-grid { display:grid; grid-template-columns:1fr .8fr; gap:9vw; align-items:center; }
.packing-visual { min-height:600px; position:relative; perspective:1000px; }
.fabric-roll { position:absolute; width:145px; height:430px; border-radius:74px; box-shadow:0 25px 65px rgba(58,19,39,.2),inset -18px 0 35px rgba(0,0,0,.18); color:rgba(255,255,255,.7); display:flex; align-items:flex-end; padding:30px; font-size:8px; letter-spacing:.12em; background-size:5px 5px; }
.roll-one { left:5%; top:8%; background-color:#482039; background-image:repeating-linear-gradient(90deg,transparent 0 3px,rgba(255,255,255,.08) 3px 4px); transform:rotate(-10deg); }
.roll-two { left:35%; top:4%; background-color:#213456; background-image:repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.09) 3px 4px); transform:rotate(4deg); }
.roll-three { right:6%; top:12%; background-color:#a97758; background-image:repeating-linear-gradient(90deg,transparent 0 2px,rgba(255,255,255,.11) 2px 3px); transform:rotate(12deg); }
.fabric-roll::before { content:""; position:absolute; left:50%; top:16px; transform:translateX(-50%); width:105px; height:34px; border-radius:50%; background:#26191a; border:12px solid #d5c1ab; }
.packing-crate { position:absolute; left:10%; right:8%; bottom:0; height:170px; background:linear-gradient(90deg,#8f6e49 0 8%,#b08a5d 8% 16%,#8f6e49 16% 24%,#b08a5d 24% 32%,#8f6e49 32% 40%,#b08a5d 40% 48%,#8f6e49 48% 56%,#b08a5d 56% 64%,#8f6e49 64% 72%,#b08a5d 72% 80%,#8f6e49 80% 88%,#b08a5d 88%); border:10px solid #6e5033; box-shadow:0 20px 50px rgba(58,19,39,.18); display:grid; place-items:center; }
.packing-crate span { background:#e4d6c5; padding:14px 20px; font-size:10px; letter-spacing:.14em; }
.packing-copy p:not(.eyebrow) { color:var(--muted); }
.packing-copy dl { margin:35px 0 0; }
.packing-copy dl div { display:grid; grid-template-columns:140px 1fr; gap:20px; padding:14px 0; border-top:1px solid var(--line); }
.packing-copy dt { font-size:9px; text-transform:uppercase; letter-spacing:.12em; color:var(--aubergine); }
.packing-copy dd { margin:0; font-family:var(--serif); font-size:19px; }
.trade-notes { background:var(--aubergine); color:var(--white); }
.trade-role-grid { display:grid; grid-template-columns:repeat(5,1fr); border-top:1px solid rgba(255,255,255,.2); border-left:1px solid rgba(255,255,255,.2); }
.trade-role-grid article { min-height:250px; padding:28px; border-right:1px solid rgba(255,255,255,.2); border-bottom:1px solid rgba(255,255,255,.2); }
.trade-role-grid span { color:#d9b89d; font-size:9px; letter-spacing:.14em; text-transform:uppercase; }
.trade-role-grid p { font-family:var(--serif); font-size:21px; line-height:1.35; margin-top:80px; color:rgba(255,255,255,.85); }

.sample-envelope { width:min(100%,530px); aspect-ratio:1; position:relative; perspective:1000px; }
.envelope-back { position:absolute; left:5%; right:5%; top:22%; bottom:6%; background:#b98b62; clip-path:polygon(0 0,50% 42%,100% 0,100% 100%,0 100%); box-shadow:0 30px 70px rgba(58,19,39,.2); }
.envelope-front { position:absolute; left:5%; right:5%; top:22%; bottom:6%; background:#d8b792; clip-path:polygon(0 0,50% 42%,100% 0,100% 100%,0 100%); display:flex; align-items:flex-end; justify-content:flex-end; padding:28px; color:#593420; font:700 10px/1.5 var(--sans); letter-spacing:.15em; }
.sample-card { position:absolute; width:58%; height:58%; left:21%; top:10%; border:8px solid var(--paper); box-shadow:0 20px 45px rgba(58,19,39,.2); display:flex; flex-direction:column; justify-content:flex-end; padding:20px; color:rgba(255,255,255,.9); transition:transform .4s var(--ease); }
.sample-card::after { content:""; position:absolute; inset:0; background:repeating-linear-gradient(90deg,transparent 0 3px,rgba(255,255,255,.13) 3px 4px),repeating-linear-gradient(0deg,transparent 0 4px,rgba(0,0,0,.15) 4px 5px); }
.sample-card span,.sample-card b { position:relative; z-index:1; }
.sample-card span { font-size:8px; letter-spacing:.14em; }
.sample-card b { font-family:var(--serif); font-size:22px; font-weight:400; }
.card-one { background:#7a583f; transform:rotate(-12deg) translate(-60px,-10px); }
.card-two { background:#684154; transform:rotate(8deg) translate(45px,-5px); }
.card-three { background:#27395e; transform:rotate(-1deg) translateY(-35px); }
.sample-envelope:hover .card-one { transform:rotate(-16deg) translate(-85px,-38px); }
.sample-envelope:hover .card-two { transform:rotate(12deg) translate(70px,-32px); }
.sample-envelope:hover .card-three { transform:rotate(-1deg) translateY(-58px); }
.enquiry-grid { display:grid; grid-template-columns:.65fr 1fr; gap:9vw; align-items:start; }
.enquiry-aside { position:sticky; top:130px; }
.enquiry-aside h2 { font-size:clamp(44px,5vw,72px); }
.brief-list { list-style:none; padding:0; margin:45px 0; }
.brief-list li { display:grid; grid-template-columns:42px 1fr; gap:20px; padding:22px 0; border-top:1px solid var(--line); }
.brief-list li > span { color:var(--aubergine); font-size:9px; letter-spacing:.13em; }
.brief-list strong { font-family:var(--serif); font-size:21px; font-weight:400; }
.brief-list p { color:var(--muted); font-size:12px; margin:6px 0 0; }
.contact-note { background:var(--aubergine); color:var(--white); padding:25px; display:grid; gap:6px; }
.contact-note p { margin:0; color:#d9b89d; font-size:9px; text-transform:uppercase; letter-spacing:.12em; }
.contact-note a { font-family:var(--serif); font-size:22px; }
.contact-note span { color:rgba(255,255,255,.5); font-size:9px; }
.enquiry-form { background:#e8ded1; padding:45px; border:1px solid var(--line); }
.form-head { display:flex; justify-content:space-between; border-bottom:2px solid var(--aubergine); padding-bottom:18px; margin-bottom:35px; font-size:8px; letter-spacing:.14em; text-transform:uppercase; }
.field-grid { display:grid; gap:20px; }
.field-grid.two { grid-template-columns:repeat(2,1fr); }
.field-grid.three { grid-template-columns:repeat(3,1fr); }
.enquiry-form label { display:grid; gap:9px; margin-bottom:22px; }
.enquiry-form label > span:first-child { font-size:9px; text-transform:uppercase; letter-spacing:.12em; color:var(--aubergine); }
.enquiry-form input,.enquiry-form select,.enquiry-form textarea { width:100%; border:0; border-bottom:1px solid rgba(58,19,39,.25); background:transparent; padding:12px 0; color:var(--ink); outline:none; border-radius:0; }
.enquiry-form input:focus,.enquiry-form select:focus,.enquiry-form textarea:focus { border-color:var(--aubergine); }
.enquiry-form textarea { resize:vertical; }
.file-field input { position:absolute; opacity:0; pointer-events:none; }
.file-field > span { min-height:110px; border:1px dashed rgba(58,19,39,.32); display:flex!important; align-items:center; justify-content:center; flex-direction:column; gap:5px; cursor:pointer; color:var(--muted)!important; }
.file-field .icon { color:var(--aubergine); margin-bottom:4px; }
.file-field b { color:var(--ink); font-family:var(--serif); font-size:19px; font-weight:400; }
.file-field small { font-size:8px; text-transform:uppercase; letter-spacing:.1em; }
.honeypot { position:absolute!important; left:-9999px!important; }
.consent { display:flex!important; grid-template-columns:20px 1fr; align-items:flex-start; gap:12px!important; }
.consent input { width:18px; margin-top:2px; }
.consent span { color:var(--muted)!important; text-transform:none!important; letter-spacing:0!important; font-size:11px!important; line-height:1.5; }
.form-submit { width:100%; border:0; cursor:pointer; }
.form-submit:disabled { opacity:.65; }
.form-status { min-height:24px; font-size:11px; color:var(--aubergine); margin:15px 0 0; }
.visit-band { background:var(--indigo); color:var(--white); padding:70px 0; }
.visit-grid { display:grid; grid-template-columns:1fr .7fr; gap:10vw; align-items:center; }
.visit-grid > div:first-child { display:flex; align-items:center; gap:25px; }
.visit-grid > div:first-child > .icon { width:42px; height:42px; color:#d9b89d; }
.visit-grid h2 { font-size:48px; margin:0; }
.visit-grid p { color:rgba(255,255,255,.65); }
.visit-grid span { font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:#d9b89d; }

.not-found { min-height:100vh; display:grid; place-items:center; text-align:center; padding:150px 0; position:relative; overflow:hidden; }
.not-found h1 { font-size:clamp(70px,10vw,140px); }
.not-found p:not(.eyebrow) { color:var(--muted); max-width:520px; margin:0 auto 35px; }
.not-found-weave { position:absolute; inset:18%; background:repeating-linear-gradient(90deg,transparent 0 28px,rgba(58,19,39,.08) 29px 30px),repeating-linear-gradient(0deg,transparent 0 28px,rgba(58,19,39,.08) 29px 30px); transform:rotate(8deg); }
.not-found .shell { position:relative; z-index:1; }

.site-footer { background:#191416; color:var(--white); padding:80px 0 24px; position:relative; overflow:hidden; }
.footer-thread { position:absolute; inset:0 0 auto; height:12px; display:grid; grid-template-columns:1fr 1fr 1fr; }
.footer-thread span:nth-child(1){background:var(--aubergine-2)}.footer-thread span:nth-child(2){background:var(--gold)}.footer-thread span:nth-child(3){background:var(--indigo)}
.footer-grid { display:grid; grid-template-columns:1.3fr .55fr .8fr 1fr; gap:7vw; padding-bottom:70px; }
.footer-brand .brand-mark i { background:#fff; }.footer-brand .brand-mark i:nth-child(2),.footer-brand .brand-mark i:nth-child(4){background:var(--gold)}
.footer-brand .brand-copy small { color:rgba(255,255,255,.45); }
.footer-brand p { max-width:380px; color:rgba(255,255,255,.48); font-size:13px; margin:28px 0 0; }
.footer-column { display:flex; flex-direction:column; gap:13px; }
.footer-column .eyebrow { color:#c59c77; margin-bottom:7px; }
.footer-column a,.footer-column span,.footer-column p { color:rgba(255,255,255,.58); font-size:11px; margin:0; }
.footer-column a:hover { color:var(--white); }
.newsletter p { line-height:1.5; }
.inline-field { display:flex; border-bottom:1px solid rgba(255,255,255,.28); margin-top:14px; }
.inline-field input { flex:1; min-width:0; border:0; background:transparent; color:white; padding:12px 0; outline:none; }
.inline-field button { border:0; background:transparent; color:white; padding:8px; cursor:pointer; }
.newsletter small { color:#c59c77; font-size:9px; }
.footer-base { border-top:1px solid rgba(255,255,255,.12); padding-top:22px; display:flex; justify-content:space-between; color:rgba(255,255,255,.35); font-size:8px; text-transform:uppercase; letter-spacing:.14em; }
.cursor-thread { position:fixed; left:-10px; top:-10px; z-index:999; pointer-events:none; width:20px; height:20px; border:1px solid rgba(58,19,39,.35); border-radius:50%; transition:width .2s,height .2s,margin .2s,background .2s; }
.cursor-thread::after { content:""; position:absolute; left:50%; top:50%; width:26px; height:1px; background:var(--aubergine); transform:rotate(-30deg); transform-origin:left; }
.cursor-thread.active { width:42px; height:42px; margin:-11px 0 0 -11px; background:rgba(184,137,88,.12); }

.reveal { opacity:0; transform:translateY(28px); transition:opacity .85s var(--ease),transform .85s var(--ease); transition-delay:var(--delay,0s); }
.reveal.visible { opacity:1; transform:none; }
#app { opacity:0; transition:opacity .18s; }
body.ready #app { opacity:1; }

@media (max-width: 1180px) {
  :root { --shell:min(100% - 48px,1180px); }
  .desktop-nav { gap:20px; }
  .desktop-nav a { font-size:10px; }
  .catalogue-grid { grid-template-columns:repeat(3,1fr); }
  .wheel-node { transform:translate(-50%,-50%) rotate(var(--angle)) translateY(-235px) rotate(calc(var(--angle) * -1)); width:82px;height:82px; }
  .wheel-node.active { transform:translate(-50%,-50%) rotate(var(--angle)) translateY(-235px) rotate(calc(var(--angle) * -1)) scale(1.08); }
  .responsibility-panel { grid-template-columns:.75fr 1fr; }
  .responsibility-list { display:none; }
  .trade-role-grid { grid-template-columns:repeat(3,1fr); }
}

@media (max-width: 900px) {
  :root { --shell:calc(100vw - 36px); }
  .section { padding:95px 0; }
  .site-header { height:76px; }
  .desktop-nav { display:none; }
  .menu-button { display:flex; }
  body.menu-open .site-header { color:var(--white); }
  body.menu-open .brand-mark i { background:var(--white); }
  body.menu-open .brand-copy small { color:rgba(255,255,255,.55); }
  .hero { min-height:auto; padding:130px 0 90px; }
  .hero-grid,.inner-hero-grid { grid-template-columns:1fr; }
  .home-hero::after,.inner-hero::before { display:none; }
  .hero-copy { max-width:none; }
  .hero-art { margin-top:30px; }
  .cloth-stage { max-width:680px; margin:auto; }
  .hero-index { position:relative; bottom:auto; margin-top:35px; }
  .confidence-grid { grid-template-columns:repeat(2,1fr); }
  .confidence-grid > div:nth-child(2) { border-right:0; }
  .confidence-grid > div:nth-child(-n+2) { border-bottom:1px solid var(--line); }
  .confidence-grid > div:first-child { padding-left:28px; }
  .split-heading { grid-template-columns:1fr; gap:35px; margin-bottom:55px; }
  .fabric-gallery { gap:55px 18px; }
  .fabric-card:nth-child(even) { margin-top:60px; }
  .process-layout { grid-template-columns:1fr; }
  .process-sticky { position:relative; top:auto; }
  .buyer-desk-grid { grid-template-columns:1fr; }
  .responsibility-panel { grid-template-columns:1fr; padding:50px 35px; }
  .fibre-circle { width:min(80vw,390px); margin:auto; }
  .closing-grid { grid-template-columns:1fr; gap:35px; }
  .inner-hero { min-height:auto; padding:130px 0 70px; }
  .inner-hero-visual { min-height:420px; }
  .catalogue-grid { grid-template-columns:repeat(2,1fr); }
  .catalogue-toolbar { align-items:flex-start; gap:20px; }
  .catalogue-toolbar > div { flex-wrap:wrap; }
  .catalogue-toolbar p { display:none; }
  .development-grid { grid-template-columns:1fr; }
  .capability-map-grid { grid-template-columns:1fr; }
  .capability-wheel { margin:40px auto 0; }
  .services-grid,.principle-grid { grid-template-columns:repeat(2,1fr); }
  .timeline-track { grid-template-columns:1fr; gap:0; padding-top:0; border-top:0; }
  .timeline-track::before { top:0; left:12px; width:1px; height:80%; transform-origin:top; animation-name:timelineGrowY; }
  @keyframes timelineGrowY { from{transform:scaleY(0)} to{transform:scaleY(1)} }
  .timeline-track div { border-bottom:1px solid var(--line); padding:22px 0 22px 42px; position:relative; }
  .timeline-track div::before { content:""; position:absolute; left:8px; top:28px; width:9px; height:9px; background:var(--aubergine); border-radius:50%; }
  .evidence-grid { grid-template-columns:1fr; }
  .question-grid { grid-template-columns:repeat(2,1fr); }
  .packing-grid { grid-template-columns:1fr; }
  .packing-visual { min-height:520px; }
  .trade-role-grid { grid-template-columns:repeat(2,1fr); }
  .enquiry-grid { grid-template-columns:1fr; }
  .enquiry-aside { position:relative; top:auto; }
  .visit-grid { grid-template-columns:1fr; gap:30px; }
  .footer-grid { grid-template-columns:1.2fr 1fr; }
  .cursor-thread { display:none; }
}

@media (max-width: 620px) {
  :root { --shell:calc(100vw - 28px); }
  h1 { font-size:clamp(62px,19vw,92px); }
  h2 { font-size:clamp(46px,15vw,68px); }
  .section { padding:80px 0; }
  .brand-copy strong { font-size:13px; }
  .brand-mark { width:30px;height:30px; }
  .hero { padding-top:116px; }
  .hero-actions { align-items:flex-start; flex-direction:column; gap:18px; }
  .hero-lead { font-size:18px; }
  .hero-note { margin-top:40px; }
  .cloth-stage { width:110%; margin-left:-5%; }
  .swatch-pin { display:none; }
  .confidence-grid { grid-template-columns:1fr; }
  .confidence-grid > div { border-right:0; border-bottom:1px solid var(--line); padding:22px 0!important; }
  .fabric-gallery { grid-template-columns:1fr; }
  .fabric-card:nth-child(even) { margin-top:0; }
  .fabric-info { grid-template-columns:1fr; }
  .fabric-meta { align-items:flex-start; }
  .process-step { grid-template-columns:36px 1fr; gap:14px; }
  .process-letter { display:none; }
  .process-step h3 { font-size:31px; }
  .buyer-desk-card { padding:16px; }
  .desk-data { grid-template-columns:1fr; }
  .desk-footer span:nth-child(2),.desk-footer span:nth-child(4) { display:none; }
  .quiet-list { grid-template-columns:1fr; }
  .responsibility-panel { margin:0 -14px; }
  .inner-hero h1 { font-size:clamp(58px,18vw,88px); }
  .inner-hero-visual { min-height:330px; }
  .stack-ring { width:100px;height:100px; }
  .catalogue-grid { grid-template-columns:1fr; }
  .catalogue-toolbar { display:block; }
  .catalogue-toolbar > div { gap:7px; }
  .catalogue-toolbar span { flex-basis:100%; margin-bottom:8px; }
  .catalogue-image { aspect-ratio:1; }
  .development-specs span { font-size:20px; }
  .capability-wheel { width:330px; max-width:100%; }
  .wheel-node { width:66px;height:66px; font-size:9px; transform:translate(-50%,-50%) rotate(var(--angle)) translateY(-142px) rotate(calc(var(--angle) * -1)); }
  .wheel-node.active { transform:translate(-50%,-50%) rotate(var(--angle)) translateY(-142px) rotate(calc(var(--angle) * -1)) scale(1.05); }
  .wheel-center { width:145px; }
  .wheel-center strong { font-size:21px; }
  .wheel-center p { font-size:9px; }
  .services-grid,.principle-grid,.question-grid { grid-template-columns:1fr; }
  .service-card { min-height:330px; padding:28px; }
  .service-card h3 { margin-top:50px; }
  .document-stack { height:470px; }
  .doc { width:84%; left:8%; height:76%; padding:20px; }
  .doc-front li { font-size:17px; }
  .trace-visual { width:330px; max-width:100%; }
  .trace-seal { width:125px;height:125px;font-size:20px; }
  .trace-point { width:58px;height:58px;font-size:7px; }
  .trade-orbit { width:330px; max-width:100%; }
  .trade-core { width:130px;height:130px;font-size:25px; }
  .port { font-size:6px; }
  .export-step { grid-template-columns:42px 1fr; gap:15px; padding:25px 0; }
  .export-step .icon { display:none; }
  .export-step h3 { font-size:29px; }
  .packing-visual { min-height:410px; transform:scale(.9); transform-origin:center; }
  .fabric-roll { width:105px;height:310px;padding:18px; }
  .fabric-roll::before { width:70px;height:24px;border-width:8px; }
  .packing-crate { height:115px; }
  .trade-role-grid { grid-template-columns:1fr; }
  .trade-role-grid article { min-height:180px; }
  .trade-role-grid p { margin-top:45px; }
  .field-grid.two,.field-grid.three { grid-template-columns:1fr; gap:0; }
  .enquiry-form { padding:25px 18px; margin:0 -4px; }
  .form-head span:last-child { display:none; }
  .visit-grid h2 { font-size:36px; }
  .footer-grid { grid-template-columns:1fr; gap:45px; }
  .footer-base { flex-direction:column; gap:10px; }
}

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


/* Mobile-native interaction layer */
.mobile-action { display:none; }
:where(a,button,input,select,textarea):focus-visible { outline:2px solid var(--gold); outline-offset:3px; }
.section, .closing-cta, .site-footer { content-visibility:auto; contain-intrinsic-size:1px 900px; }

@media (hover:none), (pointer:coarse) {
  .fabric-card a:hover .fabric-image,
  .fabric-card a:hover .fabric-image::before,
  .sample-envelope:hover .card-one,
  .sample-envelope:hover .card-two,
  .sample-envelope:hover .card-three,
  .button:hover,
  .desktop-nav .nav-cta:hover,
  .text-link:hover .icon,
  .swatch-add:hover { transform:none; }
  .touch-label { display:none; }
  .sample-envelope .card-one { transform:rotate(-14deg) translate(-70px,-22px); }
  .sample-envelope .card-two { transform:rotate(10deg) translate(55px,-18px); }
  .sample-envelope .card-three { transform:rotate(-1deg) translateY(-48px); }
}

@media (max-width: 900px) {
  body::before { position:absolute; opacity:.12; }
  .site-header { padding-top:env(safe-area-inset-top); height:calc(76px + env(safe-area-inset-top)); }
  .site-header.scrolled { height:calc(68px + env(safe-area-inset-top)); }
  .mobile-panel { padding:calc(104px + env(safe-area-inset-top)) 22px calc(30px + env(safe-area-inset-bottom)); }
  .menu-button { min-width:48px; min-height:48px; justify-content:flex-end; cursor:pointer; }
  .mobile-nav a { min-height:64px; }
  .catalogue-toolbar > div { max-width:100%; overflow-x:auto; flex-wrap:nowrap; padding:2px 0 12px; scrollbar-width:none; overscroll-behavior-inline:contain; scroll-snap-type:x proximity; }
  .catalogue-toolbar > div::-webkit-scrollbar { display:none; }
  .catalogue-toolbar button { flex:0 0 auto; min-height:44px; padding:11px 16px; scroll-snap-align:start; }
  .swatch-add { width:48px; height:48px; }
  .wheel-node { min-width:66px; min-height:66px; }
  .enquiry-form input,.enquiry-form select,.enquiry-form textarea,.inline-field input { font-size:16px; }
  .file-field > span { min-height:128px; }
}

@media (max-width: 620px) {
  :root { --shell:100%; --mobile-gutter:18px; }
  body { padding-bottom:calc(76px + env(safe-area-inset-bottom)); }

  /*
   * Use an explicit padded container on phones instead of a 100vw-based
   * width. Some Android browser/viewport combinations can resolve 100vw
   * differently for fixed and scrolling content, which made sections such
   * as the hero appear flush against the left edge while the header remained
   * correctly inset.
   */
  .shell {
    width:100%;
    max-width:none;
    margin-inline:0;
    padding-left:calc(var(--mobile-gutter) + env(safe-area-inset-left));
    padding-right:calc(var(--mobile-gutter) + env(safe-area-inset-right));
  }
  .site-header .shell { width:100%; }

  /* Prevent large editorial type and grid children from forcing the mobile
     grid wider than its padded container. */
  .hero-grid,
  .inner-hero-grid,
  .split-heading,
  .process-layout,
  .buyer-desk-grid,
  .closing-grid,
  .enquiry-grid,
  .visit-grid,
  .footer-grid { min-width:0; width:100%; }
  .hero-grid > *,
  .inner-hero-grid > *,
  .split-heading > *,
  .process-layout > *,
  .buyer-desk-grid > *,
  .closing-grid > *,
  .enquiry-grid > *,
  .visit-grid > *,
  .footer-grid > * { min-width:0; max-width:100%; }
  .hero-copy { width:100%; padding-top:24px; }
  .hero-copy h1,
  .hero-copy .hero-lead,
  .hero-copy .hero-note { max-width:100%; }
  .brand-copy small { display:none; }
  .brand { gap:10px; }
  .hero { min-height:100svh; min-height:100dvh; padding-top:calc(96px + env(safe-area-inset-top)); padding-bottom:64px; align-items:flex-start; }
  .hero h1 { margin-bottom:26px; }
  .hero-actions { width:100%; }
  .hero-actions .button { width:100%; }
  .button { min-height:54px; padding:0 20px; }
  .hero-note { font-size:9px; }
  .cloth-stage { width:106%; margin-left:-3%; }
  .cloth-form,.cloth-orbit,.fibre-circle i:nth-of-type(2),.weft-shuttle { animation-duration:12s; }
  .inner-hero { padding-top:calc(108px + env(safe-area-inset-top)); }
  .inner-hero-grid { gap:26px; }
  .inner-hero-visual { min-height:290px; }
  .hero-index { width:100%; gap:12px; font-size:8px; }
  .split-heading { margin-bottom:40px; }
  .fabric-gallery { gap:44px; }
  .fabric-image { aspect-ratio:1.1; }
  .catalogue-toolbar { margin-bottom:34px; }
  .catalogue-toolbar > div { margin-right:-16px; padding-right:16px; }
  .process-step { min-height:0; }
  .responsibility-panel { min-height:auto; padding:42px 22px; }
  .closing-cta { padding:88px 0; }
  .closing-grid .button { width:100%; }
  .enquiry-form { scroll-margin-top:88px; border-left:0; border-right:0; }
  .enquiry-form input,.enquiry-form select,.enquiry-form textarea { min-height:48px; padding:13px 0; }
  .enquiry-form textarea { min-height:140px; }
  .consent input { min-width:22px; min-height:22px; }
  .form-submit { min-height:58px; }
  .contact-note a { font-size:18px; overflow-wrap:anywhere; }
  .visit-band { padding:54px 0; }
  .site-footer { padding-bottom:36px; }
  .mobile-action { position:fixed; z-index:150; left:10px; right:10px; bottom:calc(8px + env(safe-area-inset-bottom)); min-height:64px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 8px 8px 17px; background:rgba(25,20,22,.94); color:var(--white); border:1px solid rgba(255,255,255,.13); box-shadow:0 16px 45px rgba(25,20,22,.28); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }
  .mobile-action div { min-width:0; display:grid; gap:3px; }
  .mobile-action small { color:#d9b89d; font-size:8px; letter-spacing:.13em; text-transform:uppercase; }
  .mobile-action strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:var(--serif); font-size:17px; font-weight:400; }
  .mobile-action a { min-width:108px; min-height:48px; display:flex; align-items:center; justify-content:center; gap:8px; padding:0 14px; background:var(--gold); color:var(--aubergine); font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
  .mobile-action .icon { width:17px; }
}

@media (max-width: 360px) {
  :root { --shell:100%; --mobile-gutter:14px; }
  h1 { font-size:clamp(55px,18vw,70px); }
  h2 { font-size:clamp(42px,14vw,56px); }
  .mobile-panel { padding-left:18px; padding-right:18px; }
  .mobile-nav a { font-size:32px; }
  .cloth-stage { width:112%; margin-left:-6%; }
  .capability-wheel,.trace-visual,.trade-orbit { transform:scale(.91); margin-left:-4.5%; }
  .packing-visual { transform:scale(.82); }
  .mobile-action div { display:none; }
  .mobile-action a { width:100%; }
}

@media (orientation:landscape) and (max-height:560px) and (pointer:coarse) {
  .mobile-panel { padding-top:76px; }
  .mobile-nav { grid-template-columns:repeat(2,1fr); column-gap:28px; }
  .mobile-nav a { font-size:28px; min-height:52px; }
  .mobile-meta { display:none; }
  .hero { min-height:auto; }
}

/* Mobile home-hero proportion correction
   Force the primary copy to use the full mobile canvas. This avoids a
   narrow, desktop-like content column on Android Chrome and keeps the CTA,
   supporting statement and fabric visual balanced as one composition. */
@media (max-width: 900px) {
  .home-hero .hero-grid {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    inline-size:100%;
  }

  .home-hero .hero-copy {
    flex:0 0 auto;
    inline-size:100%;
    max-inline-size:none;
    justify-self:stretch;
  }

  .home-hero .hero-lead,
  .home-hero .hero-actions,
  .home-hero .hero-note,
  .home-hero .hero-art {
    inline-size:100%;
    max-inline-size:none;
  }
}

@media (max-width: 620px) {
  .home-hero {
    padding-top:calc(92px + env(safe-area-inset-top));
    padding-bottom:46px;
  }

  .home-hero .hero-copy {
    padding-top:18px;
  }

  .home-hero .eyebrow {
    margin-bottom:18px;
    font-size:9px;
    line-height:1.5;
    letter-spacing:.19em;
  }

  .home-hero h1 {
    font-size:clamp(64px,19vw,82px);
    line-height:.85;
    margin-bottom:28px;
  }

  .home-hero .hero-lead {
    font-size:clamp(20px,5.65vw,23px);
    line-height:1.48;
    letter-spacing:-.012em;
  }

  .home-hero .hero-actions {
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:14px;
    margin-top:30px;
  }

  .home-hero .hero-actions .button,
  .home-hero .hero-actions .text-link {
    inline-size:100%;
    min-inline-size:0;
  }

  .home-hero .hero-actions .button {
    justify-content:space-between;
    min-height:60px;
    padding-inline:22px;
    font-size:12px;
  }

  .home-hero .hero-actions .text-link {
    min-height:56px;
    justify-content:space-between;
    padding:0 4px 10px;
    font-size:14px;
  }

  .home-hero .hero-note {
    display:grid;
    grid-template-columns:minmax(96px,42%) minmax(0,1fr);
    align-items:center;
    gap:18px;
    margin-top:36px;
    font-size:10px;
    line-height:1.55;
    letter-spacing:.12em;
  }

  .home-hero .thread-sample {
    inline-size:100%;
    min-inline-size:0;
  }

  .home-hero .hero-art {
    margin-top:14px;
  }

  .home-hero .cloth-stage {
    width:min(108%,430px);
    margin-inline:auto;
  }
}

@media (max-width: 360px) {
  .home-hero h1 {
    font-size:clamp(58px,18vw,68px);
  }

  .home-hero .hero-lead {
    font-size:20px;
  }
}


/* Final mobile hero layout correction
   The home hero is a flex container on desktop. Once the in-flow hero index
   becomes relative on mobile, it must switch to block flow; otherwise the
   main hero grid and index share the row and each receives about half of the
   viewport width. */
@media (max-width: 900px) {
  .home-hero {
    display:block;
    width:100%;
  }

  .home-hero .hero-grid,
  .home-hero .hero-index {
    width:100%;
    max-width:none;
    flex:none;
  }

  .home-hero .hero-index {
    margin-top:30px;
  }
}

@media (max-width: 620px) {
  .home-hero .hero-copy,
  .home-hero .hero-lead,
  .home-hero .hero-actions,
  .home-hero .hero-note,
  .home-hero .hero-art {
    width:100%;
  }

  .home-hero .hero-lead {
    max-width:34rem;
  }

  .home-hero .cloth-stage {
    width:min(112%, 500px);
    max-width:none;
    margin-left:50%;
    transform:translateX(-50%);
  }
}