/* =========================================================
   LOOM & LORE — Tailoring & Dress Stitching Studio
   style.css — base tokens, reset, header/nav, sections
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  /* ---- brand colors (base / light mode) ---- */
  --cream:#F1F3EA;
  --paper:#FAFBF7;
  --coral:#2E5C46;
  --ink:#0D1411;
  --ink-soft:#23352B;
  --gold:#9A7E3E;
  --plum:#1F362C;
  --line: rgba(13, 20, 17, 0.16);
  --bg: var(--cream);
  --surface: var(--paper);
  --text: var(--ink);
  --text-soft: var(--ink-soft);
  --accent: var(--coral);
  --accent-ink:#FAFBF7;

  /* ---- type ---- */
  --font-display:"Fraunces", Georgia, 'Iowan Old Style', serif;
  --font-body:"Manrope", 'Segoe UI', Helvetica, Arial, sans-serif;

  --fs-display: clamp(2.6rem, 5.2vw, 5.2rem);
  --fs-h2: clamp(2rem, 3.6vw, 3.4rem);
  --fs-h3: clamp(1.35rem, 2.1vw, 1.9rem);
  --fs-lead: clamp(1.05rem, 1.4vw, 1.25rem);
  --fs-body: 1rem;
  --fs-small: 0.9rem;

  --container: 1240px;
  --radius-s: 8px;
  --radius-m: 16px;
  --radius-l: 28px;

  --ease: cubic-bezier(.22,.68,.24,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
  transition:background .35s var(--ease), color .35s var(--ease);
}
img{max-width:100%;display:block;}
a{text-decoration:none;color:inherit;}
ul{list-style:none;margin:0;padding:0;}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit;}
input,select,textarea{font:inherit;color:inherit;}
h1,h2,h3,h4{font-family:var(--font-display);margin:0;line-height:1.12;font-weight:600;color:var(--text);}
p{margin:0;}
.container{width:min(100% - 48px, var(--container));margin-inline:auto;}
section{position:relative;}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

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

/* focus visibility */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
}

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

/* =========================================================
   HEADER / NAV
   ========================================================= */
.site-header{
  position:sticky;top:0;z-index:500;
  background:rgba(241,243,234,.88);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--line);
  transition:background .35s var(--ease), border-color .35s var(--ease);
}
.header-inner{
  width:min(100% - 40px, 1320px);
  margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;
  min-height:82px;
}
.brand{display:flex;align-items:center;gap:12px;flex:none;}
.brand-mark{
  width:42px;height:42px;border-radius:50%;
  background:var(--ink);color:var(--cream);
  display:grid;place-items:center;
  font-size:16px;flex:none;
}
.brand-text{
  font-family:var(--font-display);
  font-size:1.28rem;font-weight:600;letter-spacing:.01em;color:var(--text);
  white-space:nowrap;
}
.brand-text em{font-style:italic;color:var(--coral);font-weight:500;}

.main-nav{flex:1;display:flex;justify-content:center;}
.main-nav>ul{display:flex;align-items:center;gap:6px;}
.nav-link{
  display:flex;align-items:center;gap:6px;
  padding:10px 16px;border-radius:999px;
  font-size:15px;font-weight:600;color:var(--text);
  transition:background .25s var(--ease), color .25s var(--ease);
  white-space:nowrap;
}
.nav-link i{font-size:11px;margin-top:1px;transition:transform .25s var(--ease);}
.nav-link:hover,.nav-link.active{background:var(--ink);color:var(--cream);}
.nav-drop{position:relative;}
.nav-drop:hover .nav-link i,.nav-drop.open .nav-link i{transform:rotate(180deg);}
.drop-menu{
  position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(6px);
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-m);padding:8px;min-width:190px;
  box-shadow:0 24px 48px rgba(29,41,35,.16);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
  z-index:1000;
}
.drop-menu::before{
  content:'';position:absolute;top:-16px;left:0;right:0;height:16px;background:transparent;
}
.nav-drop:hover .drop-menu,.nav-drop.open .drop-menu{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);
}
.drop-menu a{
  display:block;padding:10px 14px;border-radius:10px;font-size:14px;font-weight:600;
  color:var(--text-soft);cursor:pointer;position:relative;z-index:1001;
  transition:background .2s var(--ease), color .2s var(--ease);
}
.drop-menu a:hover,.drop-menu a.active{background:var(--cream);color:var(--text);}

.header-actions{display:flex;align-items:center;gap:10px;flex:none;}
.btn-login{
  display:flex;align-items:center;gap:8px;
  padding:10px 20px;border-radius:999px;
  background:var(--ink);color:var(--cream);
  font-size:14px;font-weight:700;
  transition:transform .25s var(--ease), background .25s var(--ease);
}
.btn-login:hover{transform:translateY(-2px);background:var(--coral);}
.btn-login i{font-size:13px;}
.icon-toggle{
  width:42px;height:42px;border-radius:50%;
  border:1px solid var(--line);
  display:grid;place-items:center;
  font-size:15px;color:var(--text);
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
  flex:none;
}
.icon-toggle:hover{background:var(--ink);color:var(--cream);border-color:var(--ink);}
.menu-btn{
  display:none;
  width:44px;height:44px;border-radius:50%;
  background:var(--ink);color:var(--cream);
  align-items:center;justify-content:center;font-size:17px;flex:none;
}

/* =========================================================
   MOBILE DRAWER
   ========================================================= */
.drawer-overlay{
  position:fixed;inset:0;background:rgba(29,41,35,.45);
  opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s;
  z-index:600;
}
.drawer-overlay.show{opacity:1;visibility:visible;}
.mobile-drawer{
  position:fixed;top:0;right:0;bottom:0;
  width:min(420px, 100%);
  background:var(--surface);
  z-index:700;
  display:flex;flex-direction:column;
  transform:translateX(100%);
  transition:transform .4s var(--ease);
  box-shadow:-24px 0 60px rgba(29,41,35,.2);
}
.mobile-drawer.open{transform:translateX(0);}
.drawer-top{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 22px;border-bottom:1px solid var(--line);flex:none;
}
.drawer-close{
  width:38px;height:38px;border-radius:50%;background:var(--cream);
  display:grid;place-items:center;font-size:15px;color:var(--text);flex:none;
}
.drawer-nav{flex:1;overflow-y:auto;padding:12px 10px;}
.drawer-nav>li{border-bottom:1px solid var(--line);}
.drawer-nav>li>a,.drawer-group-btn{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;padding:17px 12px;font-size:17px;font-weight:700;color:var(--text);
}
.drawer-group-btn i{font-size:12px;transition:transform .25s var(--ease);color:var(--text-soft);}
.drawer-group.open .drawer-group-btn i{transform:rotate(180deg);}
.drawer-sub{max-height:0;overflow:hidden;transition:max-height .3s var(--ease);}
.drawer-group.open .drawer-sub{max-height:200px;}
.drawer-sub a{display:block;padding:12px 12px 12px 22px;font-size:15px;font-weight:600;color:var(--text-soft);}
.drawer-sub a.active,.drawer-sub a:hover{color:var(--coral);}
.drawer-nav li>a.active{color:var(--coral);}
.drawer-actions{padding:18px 22px 26px;border-top:1px solid var(--line);flex:none;display:flex;flex-direction:column;gap:14px;}
.btn-login-full{
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:14px;border-radius:999px;background:var(--ink);color:var(--cream);
  font-weight:700;font-size:15px;
}
.drawer-toggles{display:flex;gap:10px;}
.drawer-toggles .icon-toggle{flex:1;width:auto;border-radius:999px;gap:8px;font-size:14px;font-weight:700;}

/* =========================================================
   BACK TO TOP
   ========================================================= */
.back-to-top{
  position:fixed !important;
  right:24px !important;
  bottom:24px !important;
  z-index:99999 !important;
  width:50px !important;
  height:50px !important;
  border-radius:50% !important;
  background:var(--ink) !important;
  color:var(--cream) !important;
  display:grid !important;
  place-items:center !important;
  font-size:17px !important;
  line-height:1 !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  transform:translateY(12px) !important;
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s, background .3s var(--ease) !important;
  box-shadow:0 14px 30px rgba(29,41,35,.25) !important;
}
.back-to-top.show{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  transform:translateY(0) !important;
}
.back-to-top:hover{background:var(--coral) !important;}
/* =========================================================
   HERO
   ========================================================= */
.hero{
  padding:64px 0 96px;
  overflow:hidden;
}
.hero-inner{
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:56px;align-items:center;
}
.hero-kicker{
  display:inline-flex;align-items:center;gap:10px;
  font-size:14px;font-weight:700;color:var(--coral);
  margin-bottom:22px;
}
.hero-kicker::before{content:"";width:28px;height:2px;background:var(--coral);}
.hero-copy h1{font-size:var(--fs-display);letter-spacing:-.01em;}
.hero-copy h1 .accent{color:var(--coral);font-style:italic;}
.hero-copy p{
  margin-top:24px;max-width:46ch;font-size:var(--fs-lead);color:var(--text-soft);font-weight:500;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px;}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:16px 28px;border-radius:999px;
  font-weight:700;font-size:15px;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.btn-primary{background:var(--ink);color:var(--cream);}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 18px 34px rgba(43,23,16,.3);}
.btn-outline{border:1.5px solid var(--ink);color:var(--ink);}
.btn-outline:hover{background:var(--ink);color:var(--cream);transform:translateY(-3px);}
.hero-stats{display:flex;gap:34px;margin-top:48px;padding-top:32px;border-top:1px solid var(--line);}
.hero-stats div strong{display:block;font-family:var(--font-display);font-size:1.7rem;color:var(--text);}
.hero-stats div span{font-size:13.5px;color:var(--text-soft);}

.hero-visual{position:relative;}
.hero-frame{
  position:relative;border-radius:var(--radius-l);overflow:hidden;
  aspect-ratio:4/5;
}
.hero-frame img{width:100%;height:100%;object-fit:cover;}
.hero-thread{
  position:absolute;inset:0;pointer-events:none;
}
.hero-thread svg{width:100%;height:100%;}
.hero-thread path{
  fill:none;stroke:var(--gold);stroke-width:2.5;stroke-linecap:round;
  stroke-dasharray:8 10;
}
.hero-badge{
  position:absolute;left:-34px;bottom:36px;
  width:132px;height:132px;border-radius:50%;
  background:var(--coral);color:#fff;
  display:grid;place-items:center;text-align:center;
  font-family:var(--font-display);font-size:14px;font-weight:600;line-height:1.3;
  box-shadow:0 20px 40px rgba(239,99,81,.4);
}

/* =========================================================
   CURVED GALLERY — signature section
   ========================================================= */
.curve-section{
  padding:110px 0 130px;
  background:var(--coral);
  color:#fff;
  overflow:hidden;
}
.curve-head{text-align:center;max-width:640px;margin:0 auto 70px;}
.curve-head span.kicker{font-size:14px;font-weight:700;letter-spacing:.02em;color:rgba(255,255,255,.78);}
.curve-head h2{color:#fff;margin-top:14px;font-size:var(--fs-h2);}
.curve-head p{color:rgba(255,255,255,.82);margin-top:16px;font-size:var(--fs-lead);}

.curve-stage{
  position:relative;
  height:460px;
  perspective:1900px;
  display:flex;align-items:center;justify-content:center;
}
.curve-ring{
  position:relative;width:100%;height:100%;
  transform-style:preserve-3d;
  transition:transform .7s var(--ease);
}
.curve-item{
  position:absolute;top:50%;left:50%;
  width:280px;height:400px;
  margin:-200px 0 0 -140px;
  border-radius:18px;overflow:hidden;
  box-shadow:0 30px 60px rgba(0,0,0,.35);
  backface-visibility:hidden;
}
.curve-item img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease);}
.curve-item.is-front img{transform:scale(1.02);}
.curve-item .curve-cap{
  position:absolute;left:0;right:0;bottom:0;
  padding:20px 18px;
  background:linear-gradient(0deg, rgba(20,8,6,.75), transparent);
  color:#fff;font-size:14px;font-weight:700;
  opacity:0;transition:opacity .35s var(--ease);
}
.curve-item.is-front .curve-cap{opacity:1;}
.curve-drag-hint{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:78px;height:78px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.7);
  display:grid;place-items:center;
  font-size:11px;font-weight:700;letter-spacing:.12em;color:#fff;
  opacity:0;transition:opacity .3s var(--ease);
  pointer-events:none;z-index:20;
}
.curve-stage:hover .curve-drag-hint{opacity:.85;}
.curve-side{
  position:absolute;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;align-items:center;gap:16px;
  z-index:1;pointer-events:none;
}
.curve-side-left{left:7%;}
.curve-side-right{right:7%;}
.curve-side span{
  writing-mode:vertical-rl;text-orientation:mixed;
  text-transform:uppercase;letter-spacing:.32em;
  font-size:13px;font-weight:700;color:rgba(255,255,255,.7);
}
.curve-side i{
  font-size:22px;color:var(--gold);
  animation:curveSideFloat 3.4s ease-in-out infinite;
}
.curve-side-right i{animation-delay:1.7s;}
@keyframes curveSideFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
@media (max-width:1199px){.curve-side{display:none;}}
@media (prefers-reduced-motion:reduce){.curve-side i{animation:none;}}
.curve-controls{
  display:flex;align-items:center;justify-content:center;gap:18px;margin-top:56px;
}
.curve-arrow{
  width:54px;height:54px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.55);color:#fff;
  display:grid;place-items:center;font-size:16px;
  transition:background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.curve-arrow:hover{background:#fff;color:var(--coral);transform:translateY(-2px);}
.curve-dots{display:flex;gap:8px;}
.curve-dots span{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.4);transition:background .25s var(--ease), width .25s var(--ease);}
.curve-dots span.active{background:#fff;width:22px;border-radius:5px;}

/* =========================================================
   SERVICES DUO — asymmetric split band
   ========================================================= */
.duo-section{padding:120px 0;}
.duo-eyebrow{text-align:center;margin-bottom:60px;}
.duo-eyebrow span{font-size:14px;font-weight:700;color:var(--coral);}
.duo-eyebrow h2{margin-top:14px;font-size:var(--fs-h2);}
.duo-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;}
.duo-panel{
  position:relative;border-radius:var(--radius-l);overflow:hidden;
  aspect-ratio:3/4;isolation:isolate;
}
.duo-panel img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease);}
.duo-panel:hover img{transform:scale(1.06);}
.duo-panel::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(0deg, rgba(18,28,23,.86) 0%, rgba(18,28,23,.18) 55%, transparent 75%);
}
.duo-panel-copy{
  position:absolute;left:0;right:0;bottom:0;padding:38px;color:#fff;z-index:2;
}
.duo-panel-copy span{font-size:13.5px;font-weight:700;letter-spacing:.03em;color:rgba(255,255,255,.75);}
.duo-panel-copy h3{color:#fff;font-size:var(--fs-h3);margin-top:10px;}
.duo-panel-copy p{color:rgba(255,255,255,.82);margin-top:12px;max-width:32ch;font-size:14.5px;}
.duo-panel-link{
  margin-top:20px;display:inline-flex;align-items:center;gap:10px;
  font-weight:700;font-size:14.5px;color:#fff;
  padding-bottom:2px;border-bottom:1.5px solid rgba(255,255,255,.6);
}
.duo-panel-link i{font-size:12px;transition:transform .3s var(--ease);}
.duo-panel:hover .duo-panel-link i{transform:translateX(5px);}

/* =========================================================
   FABRIC MARQUEE
   ========================================================= */
.fabric-section{padding:100px 0;background:var(--surface);}
.fabric-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:52px;}
.fabric-head h2{font-size:var(--fs-h2);max-width:20ch;}
.fabric-head p{max-width:34ch;color:var(--text-soft);font-size:15px;font-weight:500;}
.fabric-rail{width:100%;overflow:hidden;position:relative;}
.fabric-rail::before,.fabric-rail::after{
  content:"";position:absolute;top:0;bottom:0;width:8%;z-index:3;pointer-events:none;
}
.fabric-rail::before{left:0;background:linear-gradient(90deg,var(--surface),transparent);}
.fabric-rail::after{right:0;background:linear-gradient(-90deg,var(--surface),transparent);}
.fabric-track{display:flex;gap:22px;width:max-content;animation:fabricScroll 34s linear infinite;}
.fabric-rail:hover .fabric-track{animation-play-state:paused;}
@keyframes fabricScroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.fabric-card{
  flex:none;width:260px;
  border-radius:var(--radius-m);overflow:hidden;position:relative;
  aspect-ratio:4/5;
}
.fabric-card img{width:100%;height:100%;object-fit:cover;}
.fabric-card span{
  position:absolute;left:16px;bottom:16px;
  background:rgba(250,251,247,.94);color:var(--ink);
  font-size:14px;font-weight:700;padding:8px 14px;border-radius:999px;
}

/* =========================================================
   PROCESS TIMELINE
   ========================================================= */
.process-section{padding:120px 0;}
.process-head{text-align:center;max-width:600px;margin:0 auto 76px;}
.process-head span{font-size:14px;font-weight:700;color:var(--coral);}
.process-head h2{margin-top:14px;font-size:var(--fs-h2);}
.process-track{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:20px;}
.process-track::before{
  content:"";position:absolute;top:27px;left:6%;right:6%;height:2px;
  background:var(--line);
}
.process-line-fill{
  position:absolute;top:27px;left:6%;height:2px;width:0;
  background:var(--coral);transform-origin:left center;
}
.process-step{position:relative;text-align:center;padding-top:0;}
.process-num{
  width:56px;height:56px;border-radius:50%;
  background:var(--surface);border:2px solid var(--line);
  display:grid;place-items:center;margin:0 auto 24px;
  font-family:var(--font-display);font-size:19px;font-weight:600;color:var(--text);
  position:relative;z-index:2;transition:background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.process-step.is-lit .process-num{background:var(--coral);border-color:var(--coral);color:#fff;}
.process-step h3{font-size:17px;margin-bottom:8px;}
.process-step p{font-size:14px;color:var(--text-soft);max-width:22ch;margin-inline:auto;font-weight:500;}

/* =========================================================
   STATS BAND
   ========================================================= */
.stats-section{
  position:relative;padding:110px 0;color:#fff;overflow:hidden;
}
.stats-section .bg-img{position:absolute;inset:0;z-index:0;}
.stats-section .bg-img img{width:100%;height:100%;object-fit:cover;}
.stats-section .bg-img::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg, rgba(43,23,16,.92), rgba(75,33,56,.86));}
.stats-inner{position:relative;z-index:1;}
.stats-top{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:64px;flex-wrap:wrap;}
.stats-top h2{color:#fff;font-size:var(--fs-h2);max-width:22ch;}
.stats-top p{color:rgba(255,255,255,.75);max-width:32ch;font-size:15px;font-weight:500;}
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);}
.stat-item{padding:0 28px;border-left:1px solid rgba(255,255,255,.22);}
.stat-item:first-child{padding-left:0;}
.stat-num{
  font-family:var(--font-display);font-size:clamp(2.4rem,4vw,3.6rem);font-weight:600;
  display:flex;align-items:baseline;gap:4px;color:#fff;
}
.stat-num .suffix{font-size:1.6rem;color:var(--gold);}
.stat-item span{display:block;margin-top:10px;font-size:14px;font-weight:500;color:rgba(255,255,255,.72);}

/* =========================================================
   MOSAIC — recent work
   ========================================================= */
.mosaic-section{padding:120px 0;}
.mosaic-head{text-align:center;max-width:600px;margin:0 auto 60px;}
.mosaic-head span{font-size:14px;font-weight:700;color:var(--coral);}
.mosaic-head h2{margin-top:14px;font-size:var(--fs-h2);}
.mosaic-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  grid-auto-rows:130px;
  grid-auto-flow:dense;
  gap:16px;
}
.mosaic-item{position:relative;border-radius:14px;overflow:hidden;}
.mosaic-item img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease);}
.mosaic-item:hover img{transform:scale(1.08);}
.mosaic-item.g-a{grid-column:span 2;grid-row:span 3;}
.mosaic-item.g-b{grid-column:span 2;grid-row:span 2;}
.mosaic-item.g-c{grid-column:span 2;grid-row:span 3;}
.mosaic-item.g-d{grid-column:span 2;grid-row:span 2;}
.mosaic-item.g-e{grid-column:span 2;grid-row:span 2;}
.mosaic-item.g-f{grid-column:span 2;grid-row:span 3;}
.mosaic-item.g-g{grid-column:span 2;grid-row:span 3;}
.mosaic-item.g-h{grid-column:span 2;grid-row:span 2;}
.mosaic-item.g-i{grid-column:span 2;grid-row:span 1;}

/* =========================================================
   CTA BAND
   ========================================================= */
.cta-section{position:relative;padding:140px 0;overflow:hidden;}
.cta-section .bg-img{position:absolute;inset:0;}
.cta-section .bg-img img{width:100%;height:100%;object-fit:cover;}
.cta-section .bg-img::after{content:"";position:absolute;inset:0;background:rgba(43,23,16,.68);}
.cta-inner{position:relative;z-index:1;text-align:center;max-width:680px;margin:0 auto;}
.cta-inner span{font-size:14px;font-weight:700;color:var(--gold);}
.cta-inner h2{color:#fff;font-size:var(--fs-h2);margin-top:16px;}
.cta-inner p{color:rgba(255,255,255,.82);margin-top:18px;font-size:var(--fs-lead);font-weight:500;}
.cta-inner .hero-actions{justify-content:center;margin-top:36px;}
.cta-section .btn-outline{border-color:rgba(255,255,255,.7);color:#fff;}
.cta-section .btn-outline:hover{background:#fff;color:var(--ink);}
.cta-section .btn-primary{background:#fff;color:var(--ink);}
.cta-section .btn-primary:hover{background:var(--coral);color:#fff;}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{background:var(--ink);color:var(--cream);padding:88px 0 0;}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:64px;border-bottom:1px solid rgba(255,229,217,.15);}
.footer-brand .brand-text{color:var(--cream);}
.footer-brand .brand-mark{background:var(--cream);color:var(--ink);}
.footer-brand p{margin-top:18px;color:rgba(255,229,217,.68);font-size:14.5px;max-width:32ch;}
.footer-social{display:flex;gap:10px;margin-top:22px;}
.footer-social a{
  width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,229,217,.3);
  display:grid;place-items:center;font-size:14px;color:var(--cream);
  transition:background .25s var(--ease), border-color .25s var(--ease);
}
.footer-social a:hover{background:var(--coral);border-color:var(--coral);}
.footer-col h4{font-size:14px;font-weight:700;color:var(--cream);margin-bottom:20px;letter-spacing:.02em;}
.footer-col ul li{margin-bottom:13px;}
.footer-col a{font-size:14.5px;color:rgba(255,229,217,.72);transition:color .2s var(--ease);}
.footer-col a:hover{color:#fff;}
.footer-col .contact-line{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:rgba(255,229,217,.78);margin-bottom:15px;}
.footer-col .contact-line i{margin-top:3px;color:var(--gold);font-size:13px;flex:none;width:14px;}
.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:26px 0;font-size:13.5px;color:rgba(255,229,217,.6);flex-wrap:wrap;
}
.footer-bottom .legal-links{display:flex;gap:22px;}
.footer-bottom a:hover{color:#fff;}

/* =========================================================
   PLACEHOLDER / STUB PAGE
   ========================================================= */
.stub-hero{padding:140px 0 130px;text-align:center;}
.stub-hero span{font-size:14px;font-weight:700;color:var(--coral);}
.stub-hero h1{font-size:var(--fs-h2);margin-top:16px;}
.stub-hero p{max-width:50ch;margin:20px auto 0;color:var(--text-soft);font-size:var(--fs-lead);}
.stub-hero .hero-actions{justify-content:center;margin-top:34px;}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1280px){
  .mosaic-grid{grid-auto-rows:110px;}
}

@media (max-width:1023px){
  .main-nav,.header-actions .btn-login{display:none;}
  .header-actions .icon-toggle{display:grid;}
  .menu-btn{display:flex;}
  .header-inner{min-height:74px;}
  .hero-inner{grid-template-columns:1fr;gap:48px;}
  .hero-visual{order:-1;max-width:440px;margin-inline:auto;width:100%;}
  .duo-grid{grid-template-columns:1fr;}
  .stats-row{grid-template-columns:repeat(2,1fr);row-gap:36px;}
  .stat-item{border-left:none;padding-left:0;}
  .footer-top{grid-template-columns:1fr 1fr;row-gap:44px;}
  .process-track{grid-template-columns:repeat(3,1fr);row-gap:44px;}
  .process-track::before,.process-line-fill{display:none;}
  .mosaic-grid{grid-template-columns:repeat(4,1fr);}
  .mosaic-item.g-a,.mosaic-item.g-c,.mosaic-item.g-f,.mosaic-item.g-g{grid-row:span 2;}
}

@media (max-width:767px){
  .container{width:min(100% - 36px, var(--container));}
  .header-inner{width:min(100% - 28px,1320px);}
  :root{--fs-display:2.4rem;--fs-h2:1.9rem;}
  .hero{padding:36px 0 64px;}
  .hero-badge{display:none;}
  .hero-stats{flex-wrap:wrap;gap:24px;}
  .curve-section{padding:80px 0 90px;}
  .curve-stage{height:360px;}
  .curve-item{width:220px;height:310px;margin:-155px 0 0 -110px;}
  .duo-section,.fabric-section,.process-section,.mosaic-section{padding:72px 0;}
  .stats-section{padding:72px 0;}
  .fabric-head{flex-direction:column;align-items:flex-start;}
  .process-track{grid-template-columns:1fr 1fr;}
  .stats-row{grid-template-columns:1fr 1fr;}
  .mosaic-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px;}
  .mosaic-item.g-a,.mosaic-item.g-c,.mosaic-item.g-f,.mosaic-item.g-g{grid-column:span 2;grid-row:span 2;}
  .mosaic-item.g-b,.mosaic-item.g-d,.mosaic-item.g-e,.mosaic-item.g-h{grid-column:span 1;}
  .footer-top{grid-template-columns:1fr;gap:40px;}
  .footer-bottom{flex-direction:column;text-align:center;}
  .cta-section{padding:90px 0;}
  .back-to-top{right:16px !important;bottom:16px !important;width:46px !important;height:46px !important;}
}

@media (max-width:420px){
  .curve-item{width:180px;height:260px;margin:-130px 0 0 -90px;}
  .hero-actions .btn,.cta-inner .btn{width:100%;justify-content:center;}
  .hero-actions,.cta-inner .hero-actions{flex-direction:column;}
}

/* =========================================================
   FORMS (contact / login)
   ========================================================= */
.form-section{padding:100px 0 130px;}
.form-shell{display:grid;grid-template-columns:.9fr 1.1fr;gap:0;border-radius:var(--radius-l);overflow:hidden;box-shadow:0 30px 70px rgba(43,23,16,.12);}
.form-visual{position:relative;min-height:100%;}
.form-visual img{width:100%;height:100%;object-fit:cover;}
.form-visual::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg, rgba(43,23,16,.75), transparent 55%);}
.form-visual-copy{position:absolute;left:0;right:0;bottom:0;padding:36px;color:#fff;}
.form-visual-copy h3{color:#fff;font-size:1.4rem;}
.form-visual-copy p{color:rgba(255,255,255,.8);margin-top:10px;font-size:14px;max-width:30ch;}
.form-panel{background:var(--surface);padding:52px;}
.form-panel h2{font-size:var(--fs-h3);}
.form-panel > p{margin-top:10px;color:var(--text-soft);font-size:14.5px;}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:32px;}
.field{display:flex;flex-direction:column;gap:8px;}
.field.full{grid-column:1/-1;}
.field label{font-size:13.5px;font-weight:700;color:var(--text);}
.field label .req{color:var(--coral);}
.field input,.field select,.field textarea{
  padding:13px 15px;border-radius:10px;border:1.5px solid var(--line);
  background:var(--bg);font-size:14.5px;color:var(--text);
  transition:border-color .2s var(--ease);
}
.field textarea{resize:vertical;min-height:100px;}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--coral);outline:none;}
.field input.invalid,.field select.invalid,.field textarea.invalid{border-color:#D93B2B;}
.field-error{
  font-size:12.5px;color:#D93B2B;font-weight:600;min-height:15px;
  display:none;
}
.field.has-error .field-error{display:block;}
.form-panel .btn-primary{margin-top:8px;width:100%;justify-content:center;}
.form-note{margin-top:16px;font-size:12.5px;color:var(--text-soft);text-align:center;}
.form-success{
  display:none;margin-top:20px;padding:16px 18px;border-radius:12px;
  background:rgba(46,140,90,.12);color:#1F6E44;font-size:14px;font-weight:600;
  align-items:center;gap:10px;
}
.form-success.show{display:flex;}

@media (max-width:1024px){
  .form-shell{grid-template-columns:1fr;}
  .form-visual{min-height:260px;}
  .form-panel{padding:40px 28px;}
}
@media (max-width:600px){
  .form-grid{grid-template-columns:1fr;}
}


/* =========================================================
   RESPONSIVE HEADER REFINEMENT — desktop begins at 1024px
   ========================================================= */
@media (max-width:1023px){
  .header-inner{
    min-height:74px;
    gap:8px;
    direction:ltr;
  }
  .header-actions{
    margin-left:auto;
    gap:7px;
    direction:ltr;
  }
  .header-actions .icon-toggle{
    width:40px;
    height:40px;
    display:grid;
  }
  .menu-btn{display:flex;width:40px;height:40px;}
  .mobile-drawer{
    width:min(430px,100%);
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  .mobile-drawer .drawer-nav{
    overflow-y:auto;
    flex:1 1 auto;
    min-height:0;
  }
  .mobile-drawer .drawer-actions{
    flex:none;
    padding-bottom:24px;
  }
  /* RTL/theme controls stay in the sticky header; menu contains navigation + login. */
  .mobile-drawer .drawer-toggles{display:none;}
}

@media (min-width:1024px){
  .menu-btn{display:none !important;}
  .main-nav{display:flex;}
  .header-actions .btn-login,
  .header-actions .icon-toggle{display:grid;}
  .header-actions .btn-login{display:flex;}
}


/* =========================================================
   ICON FONT — bundled Font Awesome-compatible glyphs
   ========================================================= */
@font-face{font-family:"Loom Icons";font-style:normal;font-weight:900;font-display:block;src:url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/webfonts/fa-solid-900.woff2") format("woff2");}
@font-face{font-family:"Loom Icons Brands";font-style:normal;font-weight:400;font-display:block;src:url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/webfonts/fa-brands-400.woff2") format("woff2");}
.fa-solid,.fas{font-family:"Loom Icons";font-weight:900;font-style:normal;font-variant:normal;text-rendering:auto;line-height:1;display:inline-block;-webkit-font-smoothing:antialiased;}
.fa-brands,.fab{font-family:"Loom Icons Brands";font-weight:400;font-style:normal;font-variant:normal;text-rendering:auto;line-height:1;display:inline-block;-webkit-font-smoothing:antialiased;}
.fa-bars:before,.fa-navicon:before{content:"\f0c9"}
.fa-close:before,.fa-multiply:before,.fa-remove:before,.fa-times:before,.fa-xmark:before{content:"\f00d"}
.fa-moon:before{content:"\f186"}
.fa-sun:before{content:"\f185"}
.fa-arrow-right:before{content:"\f061"}
.fa-arrow-left:before{content:"\f060"}
.fa-chevron-down:before{content:"\f078"}
.fa-chevron-left:before{content:"\f053"}
.fa-chevron-right:before{content:"\f054"}
.fa-arrow-up:before{content:"\f062"}
.fa-phone:before{content:"\f095"}
.fa-envelope:before{content:"\f0e0"}
.fa-location-dot:before,.fa-map-marker-alt:before{content:"\f3c5"}
.fa-clock-four:before,.fa-clock:before{content:"\f017"}
.fa-calendar-check:before{content:"\f274"}
.fa-user:before{content:"\f007"}
.fa-heart:before{content:"\f004"}
.fa-star:before{content:"\f005"}
.fa-quote-left-alt:before,.fa-quote-left:before{content:"\f10d"}
.fa-quote-right-alt:before,.fa-quote-right:before{content:"\f10e"}
.fa-check:before{content:"\f00c"}
.fa-language:before{content:"\f1ab"}
.fa-cut:before,.fa-scissors:before{content:"\f0c4"}
.fa-ruler:before{content:"\f545"}
.fa-ruler-combined:before{content:"\f546"}
.fa-shirt:before,.fa-t-shirt:before,.fa-tshirt:before{content:"\f553"}
.fa-gem:before{content:"\f3a5"}
.fa-leaf:before{content:"\f06c"}
.fa-thumb-tack:before,.fa-thumbtack:before{content:"\f08d"}
.fa-circle:before{content:"\f111"}
.fa-check-circle:before,.fa-circle-check:before{content:"\f058"}
.fa-add:before,.fa-plus:before{content:"\2b"}
.fa-minus:before,.fa-subtract:before{content:"\f068"}
.fa-magnifying-glass:before,.fa-search:before{content:"\f002"}
.fa-hand-pointer:before{content:"\f25a"}
.fa-award:before{content:"\f559"}
.fa-seedling:before,.fa-sprout:before{content:"\f4d8"}
.fa-vest:before{content:"\e085"}
.fa-vest-patches:before{content:"\e086"}
.fa-comment-dots:before,.fa-commenting:before{content:"\f4ad"}
.fa-map-pin:before{content:"\f276"}
.fa-compass-drafting:before,.fa-drafting-compass:before{content:"\f568"}
.fa-swatchbook:before{content:"\f5c3"}
.fa-hourglass-2:before,.fa-hourglass-half:before{content:"\f252"}
.fa-hourglass-empty:before,.fa-hourglass:before{content:"\f254"}
.fa-home-alt:before,.fa-home-lg-alt:before,.fa-home:before,.fa-house:before{content:"\f015"}
.fa-angle-down:before{content:"\f107"}
.fa-angle-right:before{content:"\f105"}
.fa-angle-left:before{content:"\f104"}
.fa-globe:before{content:"\f0ac"}.fa-facebook-f:before{content:"\f39e"}
.fa-instagram:before{content:"\f16d"}
.fa-pinterest-p:before{content:"\f231"}
.fa-whatsapp:before{content:"\f232"}
.fa-eye:before{content:"\f06e"}
.fa-eye-slash:before{content:"\f070"}
.fa-lock:before{content:"\f023"}
.fa-triangle-exclamation:before,.fa-exclamation-triangle:before{content:"\f071"}
.fa-rocket:before{content:"\f135"}
.fa-paper-plane:before{content:"\f1d8"}
.fa-circle-exclamation:before,.fa-exclamation-circle:before{content:"\f06a"}
.fa-arrows-left-right:before,.fa-arrows-h:before{content:"\f07e"}
.fa-google:before{content:"\f1a0"}


/* =========================================================
   LOOM & LORE — FINAL VISUAL REFINEMENT
   Warm ivory + sage + champagne; no coral/purple cast.
   ========================================================= */
:root{
  --cream:#F4F0E7;
  --paper:#FBF9F3;
  --coral:#66816F;
  --ink:#24342D;
  --ink-soft:#5D6B63;
  --gold:#B79A5A;
  --plum:#3D5A4D;
  --line:rgba(36,52,45,.14);
  --bg:#F4F0E7;
  --surface:#FBF9F3;
  --text:#24342D;
  --text-soft:#5D6B63;
  --accent:#66816F;
  --accent-ink:#FBF9F3;
}

/* Consistent type scale across every Home 1 section */
.hero-copy h1{font-size:var(--fs-display);}
.curve-head h2,.duo-eyebrow h2,.fabric-head h2,.process-head h2,
.stats-top h2,.mosaic-head h2,.cta-inner h2{font-size:var(--fs-h2);}
.curve-head p,.fabric-head p,.cta-inner p,.hero-copy p{font-size:var(--fs-lead);}
.duo-panel-copy h3{font-size:var(--fs-h3);}
.process-step h3{font-size:var(--fs-h3);}

/* ---------- HERO: layered editorial motion ---------- */
.hero-v2{
  min-height:calc(100svh - 82px);
  display:flex;align-items:center;overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(circle at 82% 28%, rgba(183,154,90,.14), transparent 22%),
    radial-gradient(circle at 8% 82%, rgba(102,129,111,.12), transparent 25%),
    linear-gradient(135deg,#F4F0E7 0%,#FBF9F3 48%,#EAEDE2 100%);
}
.hero-v2::before{
  content:"";position:absolute;inset:0;z-index:-2;opacity:.45;pointer-events:none;
  background-image:radial-gradient(rgba(36,52,45,.11) .7px,transparent .7px);
  background-size:18px 18px;
  mask-image:linear-gradient(90deg,rgba(0,0,0,.35),transparent 70%);
}
.hero-ambient{position:absolute;inset:0;z-index:-1;pointer-events:none;}
.hero-orbit{
  position:absolute;border:1px solid rgba(102,129,111,.22);border-radius:50%;
  transform:rotate(-18deg);animation:heroOrbit 18s linear infinite;
}
.hero-orbit-a{width:560px;height:560px;right:-150px;top:-120px;}
.hero-orbit-b{width:370px;height:370px;right:80px;bottom:-170px;border-color:rgba(183,154,90,.22);animation-duration:12s;animation-direction:reverse;}
.hero-glow{position:absolute;border-radius:50%;filter:blur(1px);animation:heroFloat 6s ease-in-out infinite;}
.hero-glow-a{width:180px;height:180px;right:37%;top:12%;background:rgba(183,154,90,.12);}
.hero-glow-b{width:130px;height:130px;left:8%;bottom:15%;background:rgba(102,129,111,.10);animation-delay:-2s;}
.hero-thread-dot{
  position:absolute;width:9px;height:9px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 0 7px rgba(183,154,90,.12);animation:heroPulse 2.6s ease-in-out infinite;
}
.hero-dot-a{right:24%;top:24%;}
.hero-dot-b{left:46%;bottom:18%;animation-delay:-1.2s;}
.hero-v2 .hero-inner{position:relative;z-index:2;}
.hero-v2 .hero-copy{position:relative;z-index:3;}
.hero-v2 .hero-frame{
  border:1px solid rgba(36,52,45,.10);
  box-shadow:0 34px 80px rgba(36,52,45,.18);
  transform:rotate(1.2deg);
  transition:transform .7s var(--ease),box-shadow .7s var(--ease);
}
.hero-v2 .hero-frame:hover{transform:rotate(0deg) translateY(-6px);box-shadow:0 42px 90px rgba(36,52,45,.23);}
.hero-image-glow{position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.20),transparent 45%,rgba(183,154,90,.14));z-index:1;pointer-events:none;}
.hero-image-sheen{
  position:absolute;inset:-30% -60%;z-index:2;pointer-events:none;
  background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.28) 49%,transparent 56%);
  transform:translateX(-45%) rotate(7deg);animation:heroSheen 7s ease-in-out infinite;
}
.hero-v2 .hero-thread{z-index:3;}
.hero-v2 .hero-thread path{filter:drop-shadow(0 2px 3px rgba(183,154,90,.35));}
.hero-measure{
  position:absolute;z-index:4;
  display:flex;align-items:center;gap:7px;
  font:700 14px/1.2 var(--font-body);letter-spacing:.1em;
  color:#fff;background:rgba(36,52,45,.84);
  border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(8px);
  padding:10px 12px;border-radius:999px;
}
.hero-measure-one{left:18px;top:18px;animation:heroFloat 5s ease-in-out infinite;}
.hero-measure-two{right:18px;bottom:18px;animation:heroFloat 5s ease-in-out infinite -2.5s;}
.hero-floating-mark{
  position:absolute;right:-18px;top:22%;
  width:58px;height:58px;border-radius:50%;
  display:grid;place-items:center;background:var(--gold);color:#fff;
  border:5px solid var(--cream);box-shadow:0 15px 35px rgba(36,52,45,.20);
  animation:heroFloat 4.5s ease-in-out infinite -1s;z-index:5;
}
.hero-v2 .hero-badge{
  background:var(--ink);box-shadow:0 20px 45px rgba(36,52,45,.24);
  animation:heroFloat 5s ease-in-out infinite;
}
.hero-scroll-cue{
  position:absolute;left:50%;bottom:22px;transform:translateX(-50%);
  display:flex;align-items:center;gap:9px;color:var(--text-soft);
  font-size:14px;font-weight:700;letter-spacing:.04em;z-index:3;
}
.hero-scroll-cue i{animation:scrollNudge 1.6s ease-in-out infinite;}
@keyframes heroOrbit{to{transform:rotate(342deg);}}
@keyframes heroFloat{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-10px,0)}}
@keyframes heroPulse{0%,100%{transform:scale(.8);opacity:.65}50%{transform:scale(1.25);opacity:1}}
@keyframes heroSheen{0%,20%{transform:translateX(-48%) rotate(7deg)}55%,100%{transform:translateX(48%) rotate(7deg)}}
@keyframes scrollNudge{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

/* ---------- active navigation ---------- */
.nav-link.active{box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);}
.drawer-group-btn.active,
.drawer-nav>li>a.active{
  background:var(--ink);color:var(--cream);border-radius:12px;
}
.drawer-sub a.active{background:rgba(102,129,111,.14);color:var(--ink);font-weight:800;}

/* ---------- responsive drawer: full mobile, compact tablet ---------- */
@media (min-width:768px) and (max-width:1023px){
  .mobile-drawer{
    width:50vw;
    min-width:360px;
    max-width:520px;
  }
  .drawer-nav>li>a,.drawer-group-btn{font-size:16px;padding:14px 12px;}
  .drawer-top{padding:16px 20px;}
  .drawer-actions{padding:16px 20px 22px;}
}
@media (max-width:767px){
  .mobile-drawer{width:100%;max-width:420px;}
}
@media (min-width:1024px){
  .hero-v2{min-height:calc(100svh - 82px);}
}
@media (max-width:767px){
  .hero-v2{min-height:auto;padding:38px 0 82px;}
  .hero-v2 .hero-inner{gap:38px;}
  .hero-v2 .hero-frame{transform:none;}
  .hero-floating-mark{right:8px;top:18%;}
  .hero-measure{font-size:14px;padding:9px 10px;letter-spacing:.08em;}
  .hero-measure-two{right:10px;bottom:12px;}
  .hero-measure-one{left:10px;top:12px;}
  .hero-scroll-cue{bottom:18px;font-size:14px;}
  .hero-orbit-a{width:330px;height:330px;right:-150px;top:-60px;}
  .hero-orbit-b{width:250px;height:250px;right:-80px;bottom:-100px;}
}
@media (prefers-reduced-motion:reduce){
  .hero-orbit,.hero-glow,.hero-thread-dot,.hero-image-sheen,.hero-floating-mark,.hero-v2 .hero-badge,.hero-scroll-cue i{animation:none;}
}


/* =========================================================
   LOOM & LORE — RESPONSIVE DRAWER FINAL
   Mobile + tablet drawer intentionally fills the viewport.
   ========================================================= */
@media (max-width:1023px){
  .mobile-drawer{
    position:fixed !important;
    inset:0 !important;
    top:0 !important;
    right:0 !important;
    bottom:0 !important;
    left:0 !important;
    width:100vw !important;
    max-width:none !important;
    min-width:0 !important;
    height:100dvh !important;
    max-height:100dvh !important;
    border-radius:0 !important;
    transform:translate3d(100%,0,0) !important;
    overflow:hidden !important;
    z-index:700;
  }

  .mobile-drawer.open{
    transform:translate3d(0,0,0) !important;
  }

  .mobile-drawer .drawer-top{
    min-height:76px;
    padding:16px 22px;
  }

  .mobile-drawer .drawer-nav{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    overflow-x:hidden;
    padding:14px 22px;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
  }

  .mobile-drawer .drawer-actions{
    flex:0 0 auto;
    padding:16px 22px 24px;
  }

  .mobile-drawer .drawer-nav>li>a,
  .mobile-drawer .drawer-group-btn{
    min-height:54px;
    padding:15px 14px;
  }

  body.drawer-open{
    overflow:hidden !important;
  }
}

@media (max-width:767px){
  .mobile-drawer .drawer-top{
    min-height:70px;
    padding:14px 18px;
  }

  .mobile-drawer .drawer-nav{
    padding:12px 16px;
  }

  .mobile-drawer .drawer-actions{
    padding:14px 16px 20px;
  }
}

/* RTL drawer remains visually coherent while the page direction flips. */
html[dir="rtl"] .mobile-drawer{
  direction:rtl;
}
html[dir="rtl"] .mobile-drawer .drawer-nav,
html[dir="rtl"] .mobile-drawer .drawer-actions,
html[dir="rtl"] .mobile-drawer .drawer-top{
  text-align:right;
}


/* =========================================================
   FINAL RESPONSIVE + SECTION 2 ENHANCEMENT
   ========================================================= */
html,body{width:100%;max-width:100%;overflow-x:hidden;}
main{width:100%;overflow-x:clip;}
.site-header{width:100%;}
.header-inner{max-width:1320px;width:calc(100% - 40px);}
.container{width:calc(100% - 48px);max-width:var(--container);}

/* Section 2 — animated atelier wall, edge-to-edge background */
.curve-section{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:clamp(78px,8vw,110px) 0 clamp(86px,9vw,130px);
  background:
    radial-gradient(circle at 8% 18%,rgba(181,154,91,.16),transparent 22%),
    radial-gradient(circle at 92% 82%,rgba(85,122,104,.15),transparent 25%),
    linear-gradient(135deg,#304B40 0%,#557A68 52%,#3C5E50 100%);
}
.curve-section::before{
  content:"";position:absolute;inset:-20%;z-index:-2;pointer-events:none;
  opacity:.42;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:42px 42px;
  transform:rotate(-7deg) scale(1.12);
  animation:atelierGrid 20s linear infinite;
}
.curve-section::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  width:42vw;height:42vw;min-width:280px;min-height:280px;
  right:-16vw;top:-20vw;border-radius:50%;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 0 0 34px rgba(255,255,255,.025),0 0 0 70px rgba(255,255,255,.018);
  animation:atelierOrbit 18s ease-in-out infinite alternate;
}
.curve-section .container,.curve-stage,.curve-controls{position:relative;z-index:2;}
.curve-head{margin-bottom:clamp(48px,6vw,70px);}
.curve-head::after{
  content:"";display:block;width:72px;height:2px;margin:24px auto 0;
  background:var(--gold);transform-origin:center;animation:atelierLine 2.8s ease-in-out infinite;
}
.curve-stage{width:100%;max-width:none;}
.curve-ring{will-change:transform;}
.curve-item{will-change:transform;}
.curve-item::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.16) 48%,transparent 64%);
  transform:translateX(-130%);animation:garmentSheen 6.5s ease-in-out infinite;
}
.curve-item:nth-child(2)::before{animation-delay:1.1s}.curve-item:nth-child(3)::before{animation-delay:2.2s}.curve-item:nth-child(4)::before{animation-delay:3.3s}.curve-item:nth-child(5)::before{animation-delay:4.4s}
.curve-drag-hint{backdrop-filter:blur(5px);}
@keyframes atelierGrid{from{transform:rotate(-7deg) translate3d(0,0,0) scale(1.12)}to{transform:rotate(-7deg) translate3d(42px,42px,0) scale(1.12)}}
@keyframes atelierOrbit{from{transform:translate3d(0,0,0) rotate(0deg)}to{transform:translate3d(-34px,42px,0) rotate(18deg)}}
@keyframes atelierLine{0%,100%{transform:scaleX(.65);opacity:.65}50%{transform:scaleX(1.25);opacity:1}}
@keyframes garmentSheen{0%,48%{transform:translateX(-130%)}68%,100%{transform:translateX(130%)}}

/* Responsive widths: never allow a section or media object to create a horizontal page gap */
@media (max-width:1023px){
  .header-inner{width:calc(100% - 28px);}
  .hero-inner,.curve-section .container,.duo-section .container,.fabric-section .container,.process-section .container,.mosaic-section .container,.stats-section .container,.cta-section .container{min-width:0;}
  .hero-copy,.hero-visual,.curve-head,.duo-grid,.fabric-head,.process-track,.mosaic-grid{min-width:0;max-width:100%;}
  .curve-section{padding-left:0;padding-right:0;}
  .curve-stage{height:clamp(340px,58vw,460px);}
}
@media (max-width:767px){
  .container{width:calc(100% - 28px);}
  .header-inner{width:calc(100% - 20px);}
  .hero-inner{width:100%;}
  .hero-copy h1,.hero-copy p{max-width:100%;overflow-wrap:break-word;}
  .curve-section{padding-top:68px;padding-bottom:76px;}
  .curve-head{padding-inline:0;}
  .curve-stage{height:340px;margin-inline:0;width:100%;}
  .curve-controls{margin-top:34px;}
  .curve-section::after{width:70vw;height:70vw;right:-38vw;top:-24vw;}
}
@media (max-width:380px){
  .container{width:calc(100% - 22px);}
  .curve-stage{height:315px;}
  .curve-item{width:170px;height:245px;margin:-122.5px 0 0 -85px;}
  .curve-arrow{width:48px;height:48px;}
}
@media (prefers-reduced-motion:reduce){
  .curve-section::before,.curve-section::after,.curve-head::after,.curve-item::before{animation:none;}
}

/* =========================================================
   LOOM & LORE — RESPONSIVE / STICKY / SECTION 2 HARD FIX
   This block intentionally sits last so no earlier media rule
   can override the final responsive behavior.
   ========================================================= */
html, body { width:100%; max-width:100%; overflow-x:hidden; }
body { min-width:0; }
.site-header {
  position:sticky !important;
  top:0 !important;
  left:0;
  right:0;
  width:100% !important;
  z-index:5000 !important;
  isolation:isolate;
}
.header-inner { min-width:0; }
.brand, .brand-text, .header-actions, .main-nav { min-width:0; }

/* Desktop begins at exactly 1024px. */
@media (min-width:1024px) {
  .main-nav { display:flex !important; }
  .header-actions .btn-login { display:flex !important; }
  .header-actions .icon-toggle { display:grid !important; }
  .menu-btn { display:none !important; }
  .mobile-drawer, .drawer-overlay { display:none; }
}

/* 320–1023px: mobile/tablet navigation. */
@media (max-width:1023px) {
  .main-nav { display:none !important; }
  .header-actions .btn-login { display:none !important; }
  .header-actions { display:flex !important; align-items:center; gap:7px; flex:0 0 auto; }
  .header-actions .icon-toggle { display:grid !important; }
  .menu-btn { display:flex !important; }
  .header-inner { width:calc(100% - 20px) !important; min-height:72px; gap:8px; }

  /* Full-screen menu at BOTH mobile and tablet sizes. */
  .mobile-drawer {
    position:fixed !important;
    inset:0 !important;
    width:100vw !important;
    max-width:none !important;
    min-width:0 !important;
    height:100dvh !important;
    max-height:none !important;
    border-radius:0 !important;
    transform:translate3d(100%,0,0) !important;
    overflow:hidden !important;
    z-index:6000 !important;
  }
  .mobile-drawer.open { transform:translate3d(0,0,0) !important; }
  .drawer-overlay { z-index:5900 !important; }
  .mobile-drawer .drawer-nav {
    min-height:0;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch;
  }

  /* Prevent the header from ever creating horizontal overflow. */
  .brand { flex:1 1 auto; overflow:hidden; }
  .brand-text { overflow:hidden; text-overflow:ellipsis; }
  .brand-mark { flex:0 0 42px; }
  .icon-toggle, .menu-btn { flex:0 0 42px; width:42px; height:42px; }
}

@media (max-width:767px) {
  .header-inner { width:calc(100% - 16px) !important; min-height:68px; }
  .brand { gap:8px; }
  .brand-mark { width:40px; height:40px; flex-basis:40px; }
  .brand-text { font-size:1.08rem; }
  .header-actions { gap:5px; }
  .icon-toggle, .menu-btn { width:40px; height:40px; flex-basis:40px; }
  .hero-v2 { width:100%; min-width:0; }
  .hero-v2 .hero-inner { width:100%; max-width:100%; min-width:0; }
  .hero-copy, .hero-visual { min-width:0; width:100%; max-width:100%; }
  .hero-frame { max-width:100%; }
}

/* RTL: page direction changes, while the utility controls stay together on the right. */
html[dir="rtl"] .header-inner { direction:ltr !important; }
html[dir="rtl"] .brand { direction:rtl; }
html[dir="rtl"] .header-actions { direction:ltr !important; }
html[dir="rtl"] .mobile-drawer { direction:rtl !important; }
html[dir="rtl"] .drawer-top { direction:rtl; }
html[dir="rtl"] .drawer-nav { text-align:right; }

/* Section 2 — stronger animated atelier atmosphere, without adding layout gaps. */
.curve-section {
  isolation:isolate;
  background:
    radial-gradient(ellipse at 15% 25%, rgba(201,173,112,.22), transparent 28%),
    radial-gradient(ellipse at 86% 68%, rgba(135,162,143,.18), transparent 30%),
    linear-gradient(135deg,#294238 0%,#3E5C4D 48%,#243A31 100%);
}
.curve-section::before {
  opacity:.55;
  background-image:
    linear-gradient(rgba(245,241,231,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,241,231,.07) 1px, transparent 1px),
    radial-gradient(circle, rgba(201,173,112,.30) 1px, transparent 1.5px);
  background-size:44px 44px,44px 44px,70px 70px;
  animation:atelierGrid 15s linear infinite, atelierStars 9s ease-in-out infinite alternate;
}
.curve-section::after {
  width:min(58vw,760px);
  height:min(58vw,760px);
  right:-18vw;
  top:-34vw;
  border:1px solid rgba(245,241,231,.20);
  box-shadow:
    0 0 0 34px rgba(201,173,112,.045),
    0 0 0 72px rgba(245,241,231,.035),
    0 0 90px rgba(201,173,112,.10);
  animation:atelierOrbit 14s ease-in-out infinite alternate, atelierPulse 6s ease-in-out infinite;
}
.curve-head::before {
  content:"";
  position:absolute;
  width:180px;
  height:180px;
  left:8%;
  top:16%;
  border:1px solid rgba(245,241,231,.12);
  border-radius:50%;
  box-shadow:0 0 0 22px rgba(245,241,231,.025);
  pointer-events:none;
  animation:atelierFloat 8s ease-in-out infinite;
}
.curve-stage::before,
.curve-stage::after {
  content:"";
  position:absolute;
  pointer-events:none;
  border-radius:50%;
  filter:blur(1px);
}
.curve-stage::before {
  width:12px;height:12px;
  left:16%;top:22%;
  background:var(--gold);
  box-shadow:0 0 0 9px rgba(201,173,112,.10), 0 0 28px rgba(201,173,112,.35);
  animation:atelierDot 3.2s ease-in-out infinite;
}
.curve-stage::after {
  width:8px;height:8px;
  right:19%;bottom:20%;
  background:#F5F1E7;
  box-shadow:0 0 0 8px rgba(245,241,231,.08),0 0 22px rgba(245,241,231,.22);
  animation:atelierDot 4.1s ease-in-out infinite -1.4s;
}
@keyframes atelierStars { from{background-position:0 0,0 0,0 0} to{background-position:44px 44px,-44px 44px,35px -35px} }
@keyframes atelierPulse { 0%,100%{opacity:.72;transform:scale(1)} 50%{opacity:1;transform:scale(1.04)} }
@keyframes atelierFloat { 0%,100%{transform:translate3d(0,0,0) rotate(0)} 50%{transform:translate3d(22px,-16px,0) rotate(12deg)} }
@keyframes atelierDot { 0%,100%{transform:translate3d(0,0,0);opacity:.55} 50%{transform:translate3d(20px,-24px,0);opacity:1} }

@media (max-width:767px) {
  .curve-head::before { width:110px;height:110px;left:-25px;top:8%; }
  .curve-section::after { width:95vw;height:95vw;right:-55vw;top:-35vw; }
  .curve-stage::before { left:8%;top:18%; }
  .curve-stage::after { right:8%;bottom:14%; }
}
@media (prefers-reduced-motion:reduce) {
  .curve-section::before,.curve-section::after,.curve-head::before,.curve-stage::before,.curve-stage::after { animation:none !important; }
}
.curve-head{position:relative;}

/* =========================================================
   LOOM & LORE — FINAL RESPONSIVE POLISH
   1) fixed/sticky header
   2) compact desktop navigation at 1024–1150px
   3) tighter mobile hero copy
   4) shorter Section 2
   ========================================================= */

/* Keep the navigation locked to the viewport while scrolling. */
.site-header{
  position:fixed !important;
  inset:0 0 auto 0 !important;
  width:100% !important;
  z-index:9000 !important;
}
body:has(.site-header){
  padding-top:82px;
}

/* Desktop navbar must fit cleanly at exactly 1024px. */
@media (min-width:1024px) and (max-width:1150px){
  .header-inner{
    width:calc(100% - 20px) !important;
    gap:8px !important;
    min-height:74px !important;
  }
  .brand{gap:8px !important;}
  .brand-mark{width:40px;height:40px;}
  .brand-text{font-size:1.08rem;}
  .main-nav{min-width:0;overflow:visible;}
  .main-nav>ul{gap:1px !important;}
  .nav-link{
    padding:9px 8px !important;
    font-size:13.5px !important;
    gap:4px !important;
  }
  .header-actions{gap:5px !important;}
  .btn-login{padding:9px 12px !important;font-size:13.5px !important;}
  .icon-toggle{width:38px;height:38px;}
  body:has(.site-header){padding-top:74px;}
}

/* Mobile/tablet fixed header heights. */
@media (max-width:1023px){
  .header-inner{min-height:72px !important;}
  body:has(.site-header){padding-top:72px;}
}
@media (max-width:767px){
  .header-inner{min-height:68px !important;}
  body:has(.site-header){padding-top:68px;}
}

/* Section 1: remove excessive side padding on narrow screens. */
@media (max-width:767px){
  .hero-v2{
    padding:24px 0 56px !important;
    min-height:auto !important;
  }
  .hero-v2 .hero-inner{
    width:calc(100% - 24px) !important;
    margin-inline:auto !important;
    gap:26px !important;
  }
  .hero-v2 .hero-copy{
    padding-inline:0 !important;
    width:100% !important;
  }
  .hero-copy h1{
    font-size:clamp(2rem,9.5vw,2.45rem) !important;
    line-height:1.08 !important;
  }
  .hero-copy p{
    max-width:none !important;
    font-size:14.5px !important;
    line-height:1.65 !important;
    margin-top:16px !important;
  }
  .hero-kicker{margin-bottom:14px !important;}
  .hero-actions{margin-top:22px !important;}
  .hero-stats{margin-top:28px !important;padding-top:22px !important;gap:18px !important;}
}

/* Section 2: deliberately shorter, denser and still animated. */
.curve-section{
  padding:70px 0 72px !important;
}
.curve-head{
  margin-bottom:28px !important;
}
.curve-stage{
  height:315px !important;
}
.curve-item{
  width:220px !important;
  height:300px !important;
  margin:-150px 0 0 -110px !important;
}
.curve-controls{
  margin-top:24px !important;
}
@media (max-width:1023px){
  .curve-section{padding:58px 0 60px !important;}
  .curve-stage{height:290px !important;}
  .curve-item{
    width:200px !important;
    height:270px !important;
    margin:-135px 0 0 -100px !important;
  }
}
@media (max-width:767px){
  .curve-section{padding:48px 0 52px !important;}
  .curve-head{
    width:calc(100% - 24px) !important;
    margin-inline:auto !important;
    margin-bottom:18px !important;
  }
  .curve-head h2{font-size:1.85rem !important;}
  .curve-head p{font-size:14px !important;}
  .curve-stage{
    height:260px !important;
  }
  .curve-item{
    width:170px !important;
    height:230px !important;
    margin:-115px 0 0 -85px !important;
  }
  .curve-controls{margin-top:14px !important;}
  .curve-arrow{width:44px;height:44px;}
}

/* Never let the fixed header or sections create a horizontal scrollbar. */
.site-header,.header-inner,.main-nav,.header-actions,
.hero-v2,.curve-section,.curve-stage{max-width:100vw;}

/* =========================================================
   CUSTOM CURSOR — Magic Wand + Stardust / Dynamic Hover Ring
   Desktop precision cursor only; native cursor remains on touch
   and reduced-motion devices.
   ========================================================= */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  html.has-custom-cursor, html.has-custom-cursor body,
  html.has-custom-cursor a, html.has-custom-cursor button,
  html.has-custom-cursor input, html.has-custom-cursor textarea,
  html.has-custom-cursor select { cursor:none !important; }

  .custom-cursor{
    position:fixed;left:0;top:0;width:0;height:0;
    z-index:99999;pointer-events:none;
    opacity:0;transition:opacity .18s ease;
  }
  .custom-cursor.is-visible{opacity:1;}
  .cursor-wand{
    position:absolute;left:0;top:0;
    width:34px;height:34px;
    transform:translate(-2px,-2px) rotate(-22deg);
    transform-origin:9px 9px;
  }
  .cursor-wand::before{
    content:"";position:absolute;
    left:7px;top:9px;width:22px;height:4px;
    border-radius:999px;
    background:var(--gold);
    box-shadow:0 0 8px rgba(201,173,112,.55);
  }
  .cursor-wand::after{
    content:"✦";position:absolute;
    left:-1px;top:-6px;
    font-size:19px;line-height:1;
    color:var(--gold);
    text-shadow:0 0 10px rgba(201,173,112,.85);
  }
  .cursor-ring{
    position:absolute;left:0;top:0;
    width:30px;height:30px;border:1.5px solid var(--gold);
    border-radius:50%;transform:translate(-50%,-50%) scale(.72);
    opacity:.58;transition:transform .25s var(--ease),opacity .25s ease,border-color .25s ease;
  }
  .custom-cursor.is-hover .cursor-ring{
    transform:translate(-50%,-50%) scale(1.55);
    opacity:.95;
  }
  .cursor-spark{
    position:absolute;left:0;top:0;width:5px;height:5px;
    border-radius:50%;background:var(--gold);
    box-shadow:0 0 9px var(--gold);
    animation:cursorSpark .65s ease-out forwards;
  }
  @keyframes cursorSpark{
    from{opacity:.95;transform:translate(-50%,-50%) scale(1);}
    to{opacity:0;transform:translate(var(--sx),var(--sy)) scale(.15);}
  }
  .cursor-ripple{
    position:absolute;left:0;top:0;width:12px;height:12px;
    border:1px solid var(--gold);border-radius:50%;
    animation:cursorRipple .45s ease-out forwards;
  }
  @keyframes cursorRipple{
    from{opacity:.8;transform:translate(-50%,-50%) scale(.5);}
    to{opacity:0;transform:translate(-50%,-50%) scale(4);}
  }
}


/* =========================================================
   FINAL FIX — MOBILE DRAWER CLOSE + MINIMAL CURSOR
   ========================================================= */

/* Keep the mobile drawer as a true, full-screen layer so its
   header and close button can never be hidden behind the nav. */
@media (max-width:1023px){
  .mobile-drawer{
    position:fixed !important;
    inset:0 !important;
    width:100vw !important;
    height:100dvh !important;
    max-width:none !important;
    max-height:none !important;
    display:flex !important;
    flex-direction:column !important;
    overflow:hidden !important;
    z-index:10001 !important;
    transform:translate3d(100%,0,0) !important;
    visibility:hidden !important;
  }

  .mobile-drawer.open{
    transform:translate3d(0,0,0) !important;
    visibility:visible !important;
  }

  .mobile-drawer .drawer-top{
    position:relative !important;
    z-index:2 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    flex:0 0 74px !important;
    min-height:74px !important;
    width:100% !important;
    padding:14px 18px !important;
    background:var(--surface) !important;
    border-bottom:1px solid var(--line) !important;
  }

  .mobile-drawer .drawer-close{
    position:relative !important;
    z-index:5 !important;
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    border:1px solid var(--line) !important;
    border-radius:50% !important;
    display:grid !important;
    place-items:center !important;
    visibility:visible !important;
    opacity:1 !important;
    background:var(--ink) !important;
    color:var(--cream) !important;
    font-size:18px !important;
    line-height:1 !important;
    cursor:pointer !important;
  }

  .mobile-drawer .drawer-close i{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    color:inherit !important;
  }

  .mobile-drawer .drawer-nav{
    position:relative !important;
    z-index:1 !important;
    flex:1 1 auto !important;
    min-height:0 !important;
    overflow-y:auto !important;
    padding:12px 16px !important;
  }

  .mobile-drawer .drawer-actions{
    flex:0 0 auto !important;
    padding:14px 16px 20px !important;
    background:var(--surface) !important;
  }

  .drawer-overlay{
    z-index:10000 !important;
  }
}

/* Header hamburger becomes a proper X while the drawer is open. */
.menu-btn[aria-expanded="true"]{
  background:var(--cream) !important;
  color:var(--ink) !important;
}

/* Modern/minimal cursor: precise center dot + smooth expanding ring.
   No wand, no spark trail — cleaner for the fashion/luxury theme. */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  html.has-custom-cursor,
  html.has-custom-cursor body,
  html.has-custom-cursor a,
  html.has-custom-cursor button,
  html.has-custom-cursor [role="button"]{
    cursor:none !important;
  }

  html.has-custom-cursor input,
  html.has-custom-cursor textarea{
    cursor:text !important;
  }

  html.has-custom-cursor select{
    cursor:pointer !important;
  }

  .custom-cursor{
    position:fixed !important;
    left:0 !important;
    top:0 !important;
    width:0 !important;
    height:0 !important;
    z-index:2147483647 !important;
    pointer-events:none !important;
    opacity:0 !important;
    transform:translate3d(-100px,-100px,0);
    transition:opacity .16s ease !important;
  }

  .custom-cursor.is-visible{opacity:1 !important;}

  .custom-cursor .cursor-dot{
    position:absolute;
    left:0;
    top:0;
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--gold);
    box-shadow:0 0 0 2px rgba(201,173,112,.12),0 0 10px rgba(201,173,112,.45);
    transform:translate(-50%,-50%);
    transition:transform .18s ease,opacity .18s ease;
  }

  .custom-cursor .cursor-ring{
    position:absolute;
    left:0;
    top:0;
    width:30px;
    height:30px;
    border:1.5px solid var(--gold);
    border-radius:50%;
    transform:translate(-50%,-50%) scale(.72);
    opacity:.72;
    transition:
      transform .25s cubic-bezier(.2,.8,.2,1),
      opacity .2s ease,
      border-color .2s ease;
  }

  .custom-cursor.is-hover .cursor-ring{
    transform:translate(-50%,-50%) scale(1.65);
    opacity:1;
  }

  .custom-cursor.is-hover .cursor-dot{
    transform:translate(-50%,-50%) scale(.65);
  }

  .custom-cursor.is-click .cursor-ring{
    transform:translate(-50%,-50%) scale(2);
    opacity:0;
  }

  .custom-cursor.is-click .cursor-dot{
    transform:translate(-50%,-50%) scale(1.45);
  }

  /* The old cursor elements are intentionally disabled. */
  .custom-cursor .cursor-wand,
  .custom-cursor .cursor-spark,
  .cursor-ripple{
    display:none !important;
  }
}
  /* =========================================================
   LOOM & LORE — HOME PAGE 1
   SECTION 3 — CRAFT JOURNEY
/* =========================================================
   HOME PAGE 1 — SECTION 3 : THE CRAFT (ATELIER JOURNEY REDESIGN)
   Architectural bespoke cards, high contrast, smooth sticky intro,
   and interactive progress tracking.
   ========================================================= */

.home-s3 {
  position: relative;
  min-height: 900px;
  padding: 110px 0 90px;
  overflow: visible;
  background: var(--surface);
  color: var(--text);
}

.home-s3 * {
  min-width: 0;
  box-sizing: border-box;
}

.home-s3-inner {
  position: relative;
  z-index: 2;
  width: min(100% - 48px, 1280px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 370px 1fr;
  gap: 52px;
  align-items: start;
}

/* ---------------------------------------------------------
   BACKGROUND WATERMARK
   --------------------------------------------------------- */
.home-s3-bg-word {
  position: absolute;
  left: -2vw;
  top: 5%;
  font-family: var(--font-display);
  font-size: clamp(140px, 22vw, 320px);
  line-height: .75;
  font-weight: 800;
  letter-spacing: -.08em;
  color: transparent;
  -webkit-text-stroke: 1.5px color-mix(in srgb, var(--coral) 12%, transparent);
  pointer-events: none;
  user-select: none;
  z-index: 1;
}

/* ---------------------------------------------------------
   STICKY INTRO (LEFT COLUMN)
   --------------------------------------------------------- */
.home-s3-intro {
  position: -webkit-sticky;
  position: sticky;
  top: 95px;
  align-self: start;
  height: fit-content;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.home-s3-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--coral);
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.home-s3-eyebrow-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 0 10px var(--coral);
  animation: s3DotPulse 2s ease-in-out infinite;
}

@keyframes s3DotPulse {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.3); opacity: 1; }
}

.home-s3-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(40px, 4.2vw, 60px);
  line-height: 1.02;
  letter-spacing: -.04em;
  color: var(--text);
  font-weight: 700;
}

.home-s3-title em {
  display: block;
  font-family: Georgia, serif;
  font-style: italic;
  font-weight: 400;
  color: var(--coral);
  letter-spacing: -.03em;
}

.home-s3-description {
  margin: 0;
  color: var(--text-soft);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.75;
}

.home-s3-link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  width: fit-content;
  padding: 11px 22px 11px 18px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--coral) 12%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--coral) 30%, transparent);
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: all .4s cubic-bezier(.16,1,.3,1);
}

.home-s3-link-arrow {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--coral);
  color: #fff;
  font-size: 11px;
  transition: transform .4s ease, background .3s ease;
}

.home-s3-link:hover {
  background: var(--coral);
  color: #fff;
  border-color: var(--coral);
  box-shadow: 0 10px 25px color-mix(in srgb, var(--coral) 35%, transparent);
  transform: translateY(-2px);
}

.home-s3-link:hover .home-s3-link-arrow {
  background: #fff;
  color: var(--coral);
  transform: translateX(4px);
}

/* ---------------------------------------------------------
   INTERACTIVE PROCESS NAV TRACKER
   --------------------------------------------------------- */
.home-s3-nav-tracker {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
  padding: 12px;
  background: color-mix(in srgb, var(--cream) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--coral) 18%, transparent);
  border-radius: 18px;
  backdrop-filter: blur(8px);
}

.home-s3-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--text);
  transition: all .35s ease;
  border: 1px solid transparent;
}

.home-s3-nav-num {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--text) 8%, transparent);
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 800;
  color: var(--text);
  transition: all .35s ease;
  flex-shrink: 0;
}

.home-s3-nav-text strong {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}

.home-s3-nav-text small {
  display: block;
  font-size: 11.5px;
  color: var(--text-soft);
}

.home-s3-nav-item:hover {
  background: color-mix(in srgb, var(--coral) 10%, transparent);
  border-color: color-mix(in srgb, var(--coral) 25%, transparent);
}

.home-s3-nav-item.is-active {
  background: var(--surface);
  border-color: var(--coral);
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}

.home-s3-nav-item.is-active .home-s3-nav-num {
  background: var(--coral);
  color: #fff;
}

.home-s3-nav-item.is-active .home-s3-nav-text strong {
  color: var(--coral);
}

/* ---------------------------------------------------------
   HERITAGE ATELIER PROOF CAPSULE
   --------------------------------------------------------- */
.home-s3-heritage-pill {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--cream) 80%, transparent);
  border: 1px solid color-mix(in srgb, var(--coral) 18%, transparent);
  box-shadow: 0 8px 20px rgba(0,0,0,0.04);
}

.home-s3-heritage-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--coral) 14%, transparent);
  color: var(--coral);
  font-size: 14px;
  flex-shrink: 0;
}

.home-s3-heritage-info strong {
  display: block;
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.25;
}

.home-s3-heritage-info span {
  display: block;
  font-size: 11.5px;
  color: var(--text-soft);
  font-weight: 600;
  margin-top: 2px;
}

/* ---------------------------------------------------------
   RIGHT COLUMN JOURNEY AREA
   --------------------------------------------------------- */
.home-s3-scroll-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
}

.home-s3-scroll-label {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
  color: var(--coral);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.home-s3-scroll-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--coral), transparent);
}

.home-s3-journey {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

/* Vertical glowing thread */
.home-s3-thread {
  position: absolute;
  left: 24px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: color-mix(in srgb, var(--text) 10%, transparent);
  z-index: 1;
  border-radius: 999px;
  pointer-events: none;
}

.home-s3-thread span {
  display: block;
  width: 100%;
  height: 0;
  background: linear-gradient(180deg, var(--coral), var(--gold));
  box-shadow: 0 0 12px var(--coral);
  border-radius: 999px;
  transition: height .2s ease;
}

/* ---------------------------------------------------------
   ATELIER PROCESS CARDS
   --------------------------------------------------------- */
.home-s3-step {
  position: relative;
  z-index: 2;
  margin-left: 0;
  padding: 32px 36px;
  background: var(--cream);
  border: 1.5px solid color-mix(in srgb, var(--coral) 22%, transparent);
  box-shadow: 0 20px 48px rgba(22, 40, 32, 0.08);
  transition: transform .6s cubic-bezier(.16,1,.3,1), box-shadow .6s ease, border-color .4s ease;
}

.home-s3-step:hover {
  transform: translateY(-6px);
  box-shadow: 0 32px 75px rgba(22, 40, 32, 0.14);
  border-color: color-mix(in srgb, var(--coral) 45%, transparent);
}

/* Distinct Bespoke Architectural Shapes */
.home-s3-step-1 {
  border-radius: 40px 14px 40px 14px;
}

.home-s3-step-2 {
  border-radius: 14px 40px 14px 40px;
}

.home-s3-step-3 {
  border-radius: 36px 14px 14px 36px;
}

/* Card Header */
.home-s3-step-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 22px;
  border-bottom: 1px dashed color-mix(in srgb, var(--coral) 25%, transparent);
  margin-bottom: 26px;
}

.home-s3-number {
  position: static;
  transform: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--coral);
  color: var(--coral);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 800;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--coral) 25%, transparent);
  flex-shrink: 0;
}

.home-s3-phase-tag {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--coral);
}

.home-s3-phase-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--coral);
}

.home-s3-meta-badge {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 6%, transparent);
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
}

.home-s3-meta-badge i {
  color: var(--coral);
}

/* Card Content Grid */
.home-s3-step-content {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 32px;
  align-items: center;
}

/* Visual frame inside card */
.home-s3-image {
  position: relative;
  width: 100%;
  height: 240px;
  overflow: hidden;
  margin: 0;
  box-shadow: 0 16px 36px rgba(0,0,0,0.12);
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  transition: transform .6s cubic-bezier(.16,1,.3,1);
}

.home-s3-step-1 .home-s3-image {
  border-radius: 28px 8px 16px 8px;
}

.home-s3-step-2 .home-s3-image {
  border-radius: 8px 28px 8px 16px;
}

.home-s3-step-3 .home-s3-image {
  border-radius: 16px 8px 28px 8px;
}

.home-s3-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(.16,1,.3,1);
}

.home-s3-step:hover .home-s3-image img {
  transform: scale(1.08);
}

.home-s3-image-tag {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(13, 20, 17, 0.82);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 7px;
}

.home-s3-image-tag i {
  color: var(--gold);
}

/* Narrative copy inside card */
.home-s3-copy {
  position: static;
  width: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}

.home-s3-kicker {
  display: block;
  color: var(--coral);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.home-s3-heading {
  margin: 0;
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1.15;
  color: var(--text);
  font-weight: 700;
}

.home-s3-para {
  margin: 0;
  color: var(--text-soft);
  font-size: 14.5px;
  line-height: 1.75;
  font-weight: 500;
}

/* Micro Feature Chips */
.home-s3-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.home-s3-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  border: 1px solid color-mix(in srgb, var(--coral) 18%, transparent);
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}

.home-s3-chip i {
  color: var(--coral);
  font-size: 11px;
}

/* Scroll Progress Bar */
.home-s3-scroll-progress {
  position: relative;
  width: 100%;
  height: 4px;
  background: color-mix(in srgb, var(--text) 8%, transparent);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 36px;
}

.home-s3-scroll-progress span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--coral), var(--gold));
  border-radius: 999px;
  transition: width .15s ease;
}

/* ---------------------------------------------------------
   BOTTOM BAR
   --------------------------------------------------------- */
.home-s3-bottom {
  position: relative;
  width: min(100% - 48px, 1280px);
  margin: 50px auto 0;
  padding-top: 24px;
  border-top: 1px solid color-mix(in srgb, var(--coral) 18%, transparent);
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--text-soft);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.home-s3-bottom-badge {
  padding: 6px 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--coral) 12%, transparent);
  color: var(--coral);
}

/* =========================================================
   DARK MODE REFINEMENTS
   ========================================================= */
html.dark .home-s3 {
  background: var(--surface);
}

html.dark .home-s3-step {
  background: var(--surface);
  border-color: color-mix(in srgb, var(--coral) 28%, transparent);
  box-shadow: 0 20px 50px rgba(0,0,0,0.35);
}

html.dark .home-s3-step:hover {
  box-shadow: 0 30px 75px rgba(0,0,0,0.5);
  border-color: var(--coral);
}

html.dark .home-s3-nav-tracker {
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  border-color: color-mix(in srgb, var(--coral) 25%, transparent);
}

html.dark .home-s3-nav-item.is-active {
  background: color-mix(in srgb, var(--coral) 15%, transparent);
}

html.dark .home-s3-intro-card {
  background: var(--surface);
  border-color: color-mix(in srgb, var(--coral) 25%, transparent);
}

html.dark .home-s3-chip {
  background: color-mix(in srgb, #fff 5%, transparent);
}

html.dark .home-s3-heritage-pill {
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  border-color: color-mix(in srgb, var(--coral) 25%, transparent);
}

/* =========================================================
   RESPONSIVE (TABLET & MOBILE)
   ========================================================= */
@media (max-width: 1080px) and (min-width: 861px) {
  .home-s3-inner {
    grid-template-columns: 300px 1fr;
    gap: 32px;
  }
}

@media (max-width: 860px) {
  .home-s3 {
    padding: 95px 0 80px;
  }

  .home-s3-inner {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .home-s3-intro {
    position: relative;
    top: auto;
    max-width: 680px;
  }

  .home-s3-thread {
    display: none;
  }

  .home-s3-step-content {
    grid-template-columns: 240px 1fr;
    gap: 24px;
  }
}

@media (max-width: 768px) {
  .home-s3 {
    padding: 75px 0 60px;
  }

  .home-s3-inner {
    width: min(100% - 32px, var(--container));
    gap: 40px;
  }

  .home-s3-title {
    font-size: 38px;
  }

  .home-s3-step {
    padding: 24px 20px;
  }

  .home-s3-step-content {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .home-s3-image {
    height: 200px;
  }

  .home-s3-step-header {
    flex-wrap: wrap;
    gap: 12px;
  }

  .home-s3-meta-badge {
    margin-left: 0;
  }

  .home-s3-bottom {
    flex-direction: column;
    gap: 14px;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-s3-image img,
  .home-s3-link {
    transition: none;
  }
}
 /* =========================================================
   LOOM & LORE — FABRICS PAGE
   SECTION 01 — EDITORIAL FABRIC HERO
   Uses existing Loom & Lore theme colors
   ========================================================= */

.fabric-hero {
  position: relative;
  min-height: calc(100vh - 82px);
  width: 100%;
  overflow: hidden;
  isolation: isolate;
  padding: 70px 5vw 34px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--bg, #FFE3E0);
  color: var(--text, #2b1710);
}

/* ---------- BIG BACKGROUND WORD ---------- */

.fabric-hero-word {
  position: absolute;
  z-index: -2;
  top: 50%;
  left: 48%;
  transform: translate(-50%, -50%);
  font-size: clamp(130px, 20vw, 330px);
  line-height: .75;
  font-weight: 900;
  letter-spacing: -.09em;
  white-space: nowrap;
  opacity: .055;
  pointer-events: none;
  user-select: none;
  will-change: transform;
}

/* ---------- THREADS ---------- */

.fabric-thread {
  position: absolute;
  pointer-events: none;
  z-index: -1;
  width: 42vw;
  height: 1px;
  transform-origin: left center;
  opacity: .38;
}

.fabric-thread::before,
.fabric-thread::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform-origin: left center;
}

.fabric-thread::before {
  background: currentColor;
}

.fabric-thread::after {
  width: 9px;
  height: 9px;
  top: -4px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 6px color-mix(in srgb, currentColor 8%, transparent);
}

.fabric-thread-1 {
  left: -4%;
  top: 25%;
  transform: rotate(13deg);
}

.fabric-thread-2 {
  right: -8%;
  bottom: 27%;
  transform: rotate(-18deg);
}

/* ---------- MAIN INNER ---------- */

.fabric-hero-inner {
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(430px, 1.1fr);
  align-items: center;
  gap: clamp(35px, 6vw, 100px);
  flex: 1;
}

/* ---------- LEFT CONTENT ---------- */

.fabric-hero-content {
  position: relative;
  z-index: 5;
  max-width: 650px;
  padding-bottom: 15px;
}

.fabric-hero-kicker {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 26px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.fabric-hero-line {
  width: 62px;
  height: 2px;
  display: block;
  background: currentColor;
  transform-origin: left center;
}

/* ---------- TITLE ---------- */

.fabric-hero-title {
  margin: 0;
  font-size: clamp(58px, 7vw, 112px);
  line-height: .84;
  letter-spacing: -.065em;
  font-weight: 900;
  text-transform: uppercase;
}

.fabric-title-line {
  display: block;
  overflow: hidden;
  padding-bottom: .06em;
}

.fabric-title-line:nth-child(1) {
  padding-left: 0;
}

.fabric-title-line:nth-child(2) {
  padding-left: clamp(25px, 4vw, 75px);
}

.fabric-title-line:nth-child(3) {
  padding-left: clamp(8px, 2vw, 35px);
}

.fabric-title-accent {
  font-style: italic;
  font-weight: 700;
  letter-spacing: -.08em;
}

/* ---------- DESCRIPTION ---------- */

.fabric-hero-text {
  max-width: 540px;
  margin: 30px 0 28px;
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.75;
  font-weight: 600;
}

/* ---------- ACTIONS ---------- */

.fabric-hero-actions {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

.fabric-hero-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 15px;
  min-height: 54px;
  padding: 0 23px;
  color: inherit;
  text-decoration: none;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-bottom: 2px solid currentColor;
  transition:
    gap .35s ease,
    transform .35s ease;
}

.fabric-hero-btn i {
  transition: transform .4s cubic-bezier(.16,1,.3,1);
}

.fabric-hero-btn:hover {
  gap: 24px;
  transform: translateY(-3px);
}

.fabric-hero-btn:hover i {
  transform: translateY(5px);
}

.fabric-hero-note {
  font-size: 11px;
  line-height: 1.5;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .72;
}

/* =========================================================
   RIGHT VISUAL
   ========================================================= */

.fabric-hero-visual {
  position: relative;
  min-height: clamp(480px, 68vh, 720px);
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1200px;
}

/* ---------- MAIN IMAGE ---------- */

.fabric-hero-image-wrap {
  position: relative;
  width: min(100%, 650px);
  height: clamp(430px, 64vh, 670px);
  overflow: hidden;
  clip-path: polygon(
    7% 0,
    94% 0,
    100% 8%,
    95% 94%,
    84% 100%,
    5% 96%,
    0 87%,
    4% 7%
  );
  transform: rotate(2deg);
  will-change: transform;
}

.fabric-hero-image {
  width: 100%;
  height: 115%;
  display: block;
  object-fit: cover;
  transform: scale(1.12);
  will-change: transform;
  filter: saturate(.9);
}

.fabric-image-shine {
  position: absolute;
  inset: -20%;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 30%,
    rgba(255,255,255,.24) 48%,
    transparent 64%
  );
  transform: translateX(-100%) rotate(5deg);
}

/* ---------- IMAGE LABEL ---------- */

.fabric-image-label {
  position: absolute;
  right: 7%;
  bottom: 7%;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 12px 16px;
  background: rgba(255,255,255,.82);
  color: #2b1710;
  backdrop-filter: blur(8px);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .14em;
}

.fabric-image-label strong {
  font-size: 20px;
  line-height: 1;
}

/* =========================================================
   FLOATING DETAIL IMAGE
   ========================================================= */

.fabric-floating-image {
  position: absolute;
  z-index: 5;
  left: -7%;
  bottom: 8%;
  width: clamp(130px, 15vw, 220px);
  aspect-ratio: .8;
  overflow: hidden;
  clip-path: polygon(
    0 8%,
    91% 0,
    100% 88%,
    12% 100%
  );
  transform: rotate(-7deg);
  box-shadow: 18px 25px 50px rgba(43,23,16,.18);
  will-change: transform;
}

.fabric-floating-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s cubic-bezier(.16,1,.3,1);
}

.fabric-floating-image:hover img {
  transform: scale(1.12);
}

.fabric-floating-image span {
  position: absolute;
  left: 12px;
  bottom: 11px;
  color: white;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .12em;
  text-shadow: 0 2px 8px rgba(0,0,0,.5);
}

/* =========================================================
   ROTATING STUDIO CIRCLE
   ========================================================= */

.fabric-hero-circle {
  position: absolute;
  right: -3%;
  top: 8%;
  width: clamp(85px, 9vw, 125px);
  aspect-ratio: 1;
  border: 1px solid currentColor;
  border-radius: 50%;
  display: grid;
  place-items: center;
  animation: fabricCircleSpin 16s linear infinite;
  opacity: .78;
}

.fabric-hero-circle::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px dashed currentColor;
  border-radius: 50%;
}

.fabric-hero-circle span {
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .16em;
  text-align: center;
  line-height: 1.5;
  transform: rotate(-18deg);
}

@keyframes fabricCircleSpin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* =========================================================
   BOTTOM FABRIC RAIL
   ========================================================= */

.fabric-hero-bottom {
  width: 100%;
  max-width: 1500px;
  margin: 18px auto 0;
  padding-top: 20px;
  display: grid;
  grid-template-columns: repeat(4, 1fr) auto;
  align-items: end;
  border-top: 1px solid currentColor;
  position: relative;
  z-index: 5;
}

.fabric-hero-bottom > div:not(.fabric-scroll-indicator) {
  position: relative;
  padding: 0 18px;
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.fabric-hero-bottom > div:not(.fabric-scroll-indicator)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 1px;
  height: 25px;
  background: currentColor;
  opacity: .35;
}

.fabric-hero-bottom span {
  font-size: 10px;
  font-weight: 800;
  opacity: .55;
}

.fabric-hero-bottom strong {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .14em;
}

.fabric-scroll-indicator {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-left: 25px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .14em;
}

.fabric-scroll-indicator i {
  animation: fabricArrowMove 1.5s ease-in-out infinite;
}

@keyframes fabricArrowMove {
  0%, 100% {
    transform: translateY(-2px);
  }

  50% {
    transform: translateY(5px);
  }
}

/* =========================================================
   JS ANIMATION INITIAL STATES
   ========================================================= */

.fabric-hero-kicker,
.fabric-hero-text,
.fabric-hero-actions,
.fabric-hero-visual,
.fabric-hero-bottom {
  will-change: transform, opacity;
}

.fabric-title-line {
  will-change: transform, opacity;
}

/* =========================================================
   DARK MODE
   Keep existing dark-mode background/color variables.
   ========================================================= */

html.dark .fabric-image-label {
  background: rgba(30,18,14,.84);
  color: #fff;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

  .fabric-hero {
    min-height: auto;
    padding: 55px 4vw 30px;
  }

  .fabric-hero-inner {
    grid-template-columns: .85fr 1fr;
    gap: 35px;
  }

  .fabric-hero-title {
    font-size: clamp(52px, 7vw, 82px);
  }

  .fabric-hero-visual {
    min-height: 560px;
  }

  .fabric-hero-image-wrap {
    height: 530px;
  }

  .fabric-floating-image {
    left: -3%;
  }

  .fabric-hero-circle {
    right: -1%;
  }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

  .fabric-hero {
    padding: 42px 20px 25px;
    min-height: auto;
  }

  .fabric-hero-inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 30px;
  }

  .fabric-hero-content {
    max-width: none;
  }

  .fabric-hero-kicker {
    margin-bottom: 20px;
    font-size: 10px;
  }

  .fabric-hero-line {
    width: 38px;
  }

  .fabric-hero-title {
    font-size: clamp(48px, 15vw, 72px);
    line-height: .87;
  }

  .fabric-title-line:nth-child(2) {
    padding-left: 18px;
  }

  .fabric-title-line:nth-child(3) {
    padding-left: 5px;
  }

  .fabric-hero-text {
    margin: 22px 0;
    font-size: 14px;
    line-height: 1.65;
    max-width: 520px;
  }

  .fabric-hero-actions {
    gap: 18px;
  }

  .fabric-hero-btn {
    min-height: 48px;
    padding: 0 8px 0 0;
    font-size: 11px;
  }

  .fabric-hero-note {
    font-size: 9px;
  }

  .fabric-hero-visual {
    min-height: 430px;
    margin-top: 3px;
  }

  .fabric-hero-image-wrap {
    width: 88%;
    height: 410px;
    margin-left: auto;
  }

  .fabric-floating-image {
    width: 115px;
    left: 0;
    bottom: 3%;
  }

  .fabric-hero-circle {
    width: 82px;
    right: 0;
    top: 2%;
  }

  .fabric-hero-circle span {
    font-size: 6px;
  }

  .fabric-image-label {
    right: 5%;
    bottom: 5%;
    padding: 9px 11px;
  }

  .fabric-image-label strong {
    font-size: 16px;
  }

  .fabric-hero-bottom {
    margin-top: 25px;
    padding-top: 16px;
    grid-template-columns: repeat(2, 1fr);
    row-gap: 15px;
  }

  .fabric-hero-bottom > div:not(.fabric-scroll-indicator) {
    padding-left: 10px;
  }

  .fabric-scroll-indicator {
    display: none;
  }

  .fabric-hero-word {
    font-size: 29vw;
    top: 42%;
    left: 50%;
  }

  .fabric-thread {
    width: 75vw;
  }

}

/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 430px) {

  .fabric-hero {
    padding-left: 16px;
    padding-right: 16px;
  }

  .fabric-hero-title {
    font-size: 45px;
  }

  .fabric-hero-visual {
    min-height: 380px;
  }

  .fabric-hero-image-wrap {
    height: 360px;
    width: 87%;
  }

  .fabric-floating-image {
    width: 98px;
  }

  .fabric-hero-bottom strong {
    font-size: 10px;
  }

}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .fabric-hero-circle,
  .fabric-scroll-indicator i {
    animation: none;
  }

  .fabric-hero *,
  .fabric-hero *::before,
  .fabric-hero *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}    

/* =========================================================
   FABRICS — SECTION 2
   FABRIC LIBRARY / EDITORIAL SCROLL
   ========================================================= */

.fabric-library {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
  padding: 110px 5vw 80px;
  background: var(--bg);
  color: var(--text);
}

.fabric-library-inner {
  width: min(1450px, 100%);
  min-height: 760px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.8fr 1.35fr 0.85fr;
  align-items: center;
  gap: 4vw;
  position: relative;
  z-index: 3;
}


/* ---------- BACKGROUND WORD ---------- */

.fabric-library-bg-word {
  position: absolute;
  left: -3vw;
  top: 18%;
  font-size: clamp(100px, 18vw, 280px);
  font-weight: 900;
  line-height: .8;
  letter-spacing: -.08em;
  white-space: nowrap;
  opacity: .035;
  pointer-events: none;
  z-index: -1;
  user-select: none;
}


/* ---------- MOVING THREAD ---------- */

.fabric-library-thread {
  position: absolute;
  left: 50%;
  top: 4%;
  bottom: 5%;
  width: 2px;
  transform: translateX(-50%);
  z-index: 0;
  overflow: hidden;
}

.fabric-library-thread::before {
  content: "";
  position: absolute;
  inset: 0;
  border-left: 1px dashed currentColor;
  opacity: .18;
}

.fabric-library-thread span {
  position: absolute;
  left: -2px;
  top: 0;
  width: 5px;
  height: 120px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 18px currentColor;
}


/* ---------- INTRO ---------- */

.fabric-library-intro {
  position: relative;
  align-self: center;
  padding-right: 1vw;
}

.fabric-section-index {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 35px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.fabric-section-index i {
  width: 42px;
  height: 1px;
  display: block;
  background: currentColor;
  opacity: .5;
}

.fabric-library-intro h2 {
  margin: 0;
  max-width: 450px;
  font-size: clamp(58px, 6vw, 100px);
  line-height: .88;
  letter-spacing: -.055em;
  font-weight: 900;
}

.fabric-library-intro h2 span {
  display: block;
  font-style: italic;
  font-weight: 500;
  transform: translateX(45px);
}

.fabric-library-intro p {
  max-width: 390px;
  margin: 38px 0 0;
  font-size: 16px;
  line-height: 1.8;
  font-weight: 600;
  opacity: .78;
}

.fabric-library-meta {
  margin-top: 48px;
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: 11px;
  letter-spacing: .13em;
}

.fabric-library-meta span {
  font-size: 22px;
  font-weight: 900;
}

.fabric-library-meta strong {
  font-size: 11px;
  opacity: .6;
}


/* ---------- VISUAL ---------- */

.fabric-library-visual {
  position: relative;
  width: 100%;
  max-width: 620px;
  justify-self: center;
}

.fabric-image-frame {
  position: relative;
  width: 100%;
  aspect-ratio: .82;
  overflow: hidden;

  clip-path: polygon(
    7% 0,
    94% 4%,
    100% 91%,
    88% 100%,
    5% 95%,
    0 10%
  );

  transform: rotate(-2deg);
}

.fabric-image-inner {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.fabric-library-image {
  position: absolute;
  inset: -5%;
  width: 110%;
  height: 110%;
  object-fit: cover;

  opacity: 0;
  transform:
    scale(1.12)
    translateY(30px);

  transition:
    opacity .7s ease,
    transform 1.2s cubic-bezier(.16,1,.3,1);
}

.fabric-library-image.active {
  opacity: 1;
  transform:
    scale(1)
    translateY(0);
}

.fabric-image-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      140deg,
      transparent 45%,
      rgba(255,255,255,.16) 50%,
      transparent 55%
    );
  transform: translateX(-120%);
  pointer-events: none;
}

.fabric-image-frame.is-shining .fabric-image-overlay {
  animation: fabricShine 1s ease forwards;
}

@keyframes fabricShine {
  to {
    transform: translateX(120%);
  }
}


/* ---------- IMAGE LABEL ---------- */

.fabric-image-number {
  position: absolute;
  right: 7%;
  top: 7%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  z-index: 5;
  color: #fff;
  text-shadow: 0 2px 15px rgba(0,0,0,.35);
}

.fabric-image-number span {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
}

.fabric-image-number strong {
  font-size: 46px;
  line-height: .9;
  font-weight: 900;
}


/* ---------- FLOATING NOTE ---------- */

.fabric-floating-note {
  position: absolute;
  right: -7%;
  bottom: 8%;
  max-width: 230px;
  padding: 16px 20px;

  background: var(--bg);
  border-left: 2px solid currentColor;

  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 12px;
  align-items: center;

  transform: rotate(3deg);
  z-index: 7;
}

.fabric-floating-note span {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .15em;
}

.fabric-floating-note i {
  font-size: 12px;
}

.fabric-floating-note strong {
  grid-column: 1 / -1;
  margin-top: 5px;
  font-size: 12px;
  letter-spacing: .08em;
}


/* ---------- RIGHT LIST ---------- */

.fabric-library-list {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
}

.fabric-library-item {
  position: relative;
  width: 100%;
  min-height: 105px;

  display: grid;
  grid-template-columns: 45px 1fr 40px;
  align-items: center;
  gap: 12px;

  border: 0;
  border-bottom: 1px solid currentColor;
  background: transparent;
  color: inherit;

  padding: 0;
  text-align: left;
  cursor: pointer;

  opacity: .38;
  transition:
    opacity .4s ease,
    padding-left .45s cubic-bezier(.16,1,.3,1);
}

.fabric-library-item:first-child {
  border-top: 1px solid currentColor;
}

.fabric-library-item.active {
  opacity: 1;
  padding-left: 18px;
}

.fabric-item-number {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
}

.fabric-item-name {
  font-size: clamp(28px, 3vw, 50px);
  line-height: 1;
  font-weight: 900;
  letter-spacing: -.045em;
}

.fabric-item-arrow {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  border: 1px solid currentColor;
  transform: scale(.7);
  opacity: 0;
  transition:
    transform .4s ease,
    opacity .4s ease;
}

.fabric-library-item.active .fabric-item-arrow {
  opacity: 1;
  transform: scale(1);
}


/* ---------- SCROLL RAIL ---------- */

.fabric-library-scroll {
  position: absolute;
  left: 5vw;
  bottom: 35px;
  display: flex;
  align-items: center;
  gap: 15px;

  font-size: 10px;
  font-weight: 900;
  letter-spacing: .18em;
  z-index: 5;
}

.fabric-scroll-line {
  width: 100px;
  height: 1px;
  overflow: hidden;
  background: currentColor;
  opacity: .25;
}

.fabric-scroll-line span {
  display: block;
  width: 35%;
  height: 100%;
  background: currentColor;
  animation: scrollLineMove 1.8s ease-in-out infinite;
}

@keyframes scrollLineMove {
  0% {
    transform: translateX(-120%);
  }

  50% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(250%);
  }
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {

  .fabric-library {
    padding: 90px 4vw 70px;
  }

  .fabric-library-inner {
    grid-template-columns: .8fr 1.2fr;
    gap: 35px;
  }

  .fabric-library-list {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-top: -10px;
  }

  .fabric-library-item,
  .fabric-library-item:first-child {
    min-height: 85px;
    border-top: 1px solid currentColor;
  }

  .fabric-library-item.active {
    padding-left: 8px;
  }

  .fabric-item-name {
    font-size: 28px;
  }

  .fabric-library-thread {
    left: 50%;
  }
}


@media (max-width: 767px) {

  .fabric-library {
    min-height: auto;
    padding: 80px 20px 90px;
  }

  .fabric-library-inner {
    display: flex;
    flex-direction: column;
    gap: 35px;
    min-height: auto;
  }

  .fabric-library-bg-word {
    top: 8%;
    left: -15%;
    font-size: 110px;
  }

  .fabric-library-thread {
    left: 22px;
    top: 5%;
    bottom: 5%;
    opacity: .5;
  }

  .fabric-library-intro {
    width: 100%;
    padding-left: 30px;
  }

  .fabric-section-index {
    margin-bottom: 25px;
  }

  .fabric-library-intro h2 {
    font-size: clamp(54px, 16vw, 80px);
  }

  .fabric-library-intro h2 span {
    transform: translateX(25px);
  }

  .fabric-library-intro p {
    margin-top: 25px;
    font-size: 15px;
    line-height: 1.65;
  }

  .fabric-library-meta {
    margin-top: 25px;
  }

  .fabric-library-visual {
    width: calc(100% - 25px);
    margin-left: 25px;
  }

  .fabric-image-frame {
    aspect-ratio: .86;
  }

  .fabric-floating-note {
    right: -5px;
    bottom: 20px;
    max-width: 195px;
  }

  .fabric-library-list {
    width: 100%;
    display: flex;
    gap: 0;
    margin: 0;
    padding-left: 30px;
  }

  .fabric-library-item,
  .fabric-library-item:first-child {
    min-height: 78px;
    grid-template-columns: 38px 1fr 35px;
  }

  .fabric-library-item.active {
    padding-left: 10px;
  }

  .fabric-item-name {
    font-size: 30px;
  }

  .fabric-library-scroll {
    position: relative;
    left: auto;
    bottom: auto;
    margin: 35px 0 0 30px;
  }
}


@media (prefers-reduced-motion: reduce) {

  .fabric-library-image,
  .fabric-library-item,
  .fabric-item-arrow {
    transition: none;
  }

  .fabric-scroll-line span {
    animation: none;
  }
}
/* ==========================================================
   MERGED FROM home2.css (single style.css structure)
   ========================================================== */

/* =========================================================
   LOOM & LORE — HOME 2 (v2)
   9 unique sections. No repeated layouts. GSAP + AOS driven.
   ========================================================= */

.home2-page{overflow:hidden;background:var(--bg);color:var(--text)}
.home2-page *{min-width:0}
.home2-page h1,.home2-page h2,.home2-page h3,.home2-page p{margin-top:0}
.home2-page h2 em,.home2-page h1 em{font-family:Georgia,serif;font-weight:400;font-style:italic}
.h2-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:14px;letter-spacing:.22em;font-weight:800;color:var(--coral);text-transform:uppercase}
.h2-eyebrow::before{content:"";width:26px;height:1px;background:var(--coral)}
.h2-title{font-size:clamp(34px,4.6vw,62px);line-height:1.04;letter-spacing:-.03em;margin:16px 0 0}
.h2-lead{font-size:16px;line-height:1.8;color:var(--text-soft);max-width:520px}
.h2-btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.home2-page section{position:relative}

/* ---------------------------------------------------------
   01 — HERO : oversized outline word behind portrait image
   --------------------------------------------------------- */
.h2-s1{padding:64px 0 28px;background:var(--bg)}
.h2-s1-frame{position:relative;display:grid;grid-template-columns:1fr;min-height:86vh;align-items:center}
.h2-s1-word{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);font-family:var(--font-display);font-weight:700;font-size:clamp(70px,17vw,240px);letter-spacing:-.04em;color:color-mix(in srgb, var(--text) 8%, transparent);white-space:nowrap;pointer-events:none;z-index:0;line-height:1}
@supports (-webkit-text-stroke:1px black){.h2-s1-word{color:transparent;-webkit-text-stroke:1.5px color-mix(in srgb, var(--text) 24%, transparent)}}
.h2-s1-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.02fr .98fr;gap:5vw;align-items:center;width:min(100% - 48px,var(--container));margin-inline:auto}
.h2-s1-copy{padding-top:10px}
.h2-s1-copy h1{font-size:clamp(46px,5.6vw,80px);line-height:.98;letter-spacing:-.045em;margin:18px 0 24px}
.h2-s1-meta{display:flex;gap:22px;margin-top:46px;padding-top:26px;border-top:1px solid var(--line)}
.h2-s1-meta div{display:flex;flex-direction:column;gap:4px}
.h2-s1-meta strong{font-family:var(--font-display);font-size:22px}
.h2-s1-meta span{font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-soft)}
.h2-s1-visual{position:relative}
.h2-s1-photo{position:relative;height:min(640px,68vh);border-radius:4px 120px 4px 4px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.18)}
.h2-s1-photo img{width:100%;height:100%;object-fit:cover}
.h2-s1-chip{position:absolute;left:-28px;bottom:44px;background:var(--surface);border:1px solid var(--line);padding:16px 20px;display:flex;align-items:center;gap:12px;box-shadow:0 18px 40px rgba(0,0,0,.14)}
.h2-s1-chip i{color:var(--coral);font-size:18px}
.h2-s1-chip span{font-size:14px;letter-spacing:.06em;line-height:1.4}
.h2-s1-chip b{display:block;font-family:var(--font-display);font-size:15px}
.h2-s1-scroll{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);z-index:1;display:flex;align-items:center;gap:10px;font-size:14px;letter-spacing:.22em;color:var(--text-soft)}
.h2-s1-scroll span{width:1px;height:30px;background:var(--line);position:relative;overflow:hidden}
.h2-s1-scroll span::after{content:"";position:absolute;left:0;top:-100%;width:100%;height:100%;background:var(--coral);animation:h2ScrollLine 1.8s ease-in-out infinite}
@keyframes h2ScrollLine{0%{top:-100%}60%{top:100%}100%{top:100%}}
@keyframes h2NodePulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb, var(--coral) 35%, transparent)}50%{box-shadow:0 0 0 8px color-mix(in srgb, var(--coral) 0%, transparent)}}
.h2-s1-photo{transition:transform .5s var(--ease)}
.h2-s1-visual:hover .h2-s1-photo{transform:translateY(-6px)}

/* ---------------------------------------------------------
   02 — PHILOSOPHY : split, circular-masked image, ring motif
   --------------------------------------------------------- */
.h2-s2{padding:90px 0;background:var(--surface)}
.h2-s2 .container{width:min(100% - 48px,var(--container));margin-inline:auto;display:grid;grid-template-columns:1fr .82fr;gap:6vw;align-items:center}
.h2-s2-copy p{margin-top:22px}
.h2-s2-copy .text-link{margin-top:8px}
.h2-s2-visual{position:relative;display:flex;justify-content:center}
.h2-s2-ring{position:absolute;inset:0;margin:auto;width:104%;height:104%;border:1px dashed color-mix(in srgb, var(--coral) 45%, transparent);border-radius:50%}
.h2-s2-photo{width:min(420px,90%);aspect-ratio:1/1;border-radius:50%;overflow:hidden;position:relative;box-shadow:0 26px 60px rgba(0,0,0,.16)}
.h2-s2-photo img{width:100%;height:100%;object-fit:cover}
.h2-s2-tag{position:absolute;right:2%;bottom:6%;background:var(--bg);border:1px solid var(--line);border-radius:50%;width:96px;height:96px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:14px;letter-spacing:.1em;line-height:1.4;text-transform:uppercase;box-shadow:0 14px 34px rgba(0,0,0,.14)}

/* ---------------------------------------------------------
   03 — SIGNATURE LOOK : editorial poster banner
   (photo breaking out of an outline frame, oversized stacked
   headline, dark badge, vertical brand mark on the left edge)
   --------------------------------------------------------- */
.h2-s3{padding:100px 0}
.h2-s3 .container{width:min(100% - 48px,var(--container));margin-inline:auto}
.h2-s3-poster-inner{
  display:grid;
  grid-template-columns:56px minmax(280px,420px) 1fr;
  gap:5vw;
  align-items:center;
}
.h2-s3-poster-vertical{
  display:flex;align-items:center;justify-content:center;height:100%;min-height:420px;
}
.h2-s3-poster-vertical span{
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-size:13px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--text-soft);white-space:nowrap;
}
.h2-s3-poster-visual{position:relative;aspect-ratio:3/4;max-width:440px;margin-inline:auto;}
.h2-s3-poster-frame{
  position:absolute;right:0;top:0;width:82%;height:84%;
  border:3px solid var(--ink);pointer-events:none;
}
.h2-s3-poster-photo{
  position:absolute;left:0;bottom:4%;width:64%;height:80%;
  overflow:hidden;box-shadow:0 30px 65px rgba(0,0,0,.22);z-index:1;
}
.h2-s3-poster-photo img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.16,1,.3,1)}
.h2-s3-poster-visual:hover .h2-s3-poster-photo img{transform:scale(1.06)}
.h2-s3-poster-copy .h2-eyebrow{justify-content:flex-start}
.h2-s3-poster-title{
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(38px,5vw,64px);line-height:.98;letter-spacing:-.02em;
  margin:16px 0 22px;
}
.h2-s3-poster-title em{font-family:var(--font-display);font-style:normal;font-weight:700;color:var(--coral)}
.h2-s3-poster-badge{
  display:inline-block;background:var(--ink);color:var(--cream);
  font-size:13.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  padding:12px 20px;margin-bottom:22px;
}
.h2-s3-poster-copy .h2-lead{font-weight:500}
.h2-s3-poster-copy .text-link{margin-top:22px;display:inline-flex}


/* ---------------------------------------------------------
   04 — FABRIC ARC : fanned semi-circle gallery
   --------------------------------------------------------- */
.h2-s4{padding:150px 0 110px;background:var(--surface);text-align:center}
.h2-s4 .container{width:min(100% - 48px,var(--container));margin-inline:auto}
.h2-s4-head{max-width:600px;margin:0 auto}
.h2-s4-head .h2-lead{margin-inline:auto}
.h2-s4-arc{position:relative;display:flex;justify-content:center;align-items:flex-end;gap:0;margin:90px auto 50px;height:340px;max-width:920px}
.h2-s4-piece{position:relative;width:150px;height:220px;border-radius:14px;overflow:hidden;box-shadow:0 20px 46px rgba(0,0,0,.18);margin:0 -18px;transition:transform .5s var(--ease),z-index 0s;transform-origin:bottom center}
.h2-s4-piece img{width:100%;height:100%;object-fit:cover}
.h2-s4-piece:hover{transform:translateY(-18px) scale(1.04) !important;z-index:9}
.h2-s4-piece:nth-child(1){transform:rotate(-24deg) translateY(46px)}
.h2-s4-piece:nth-child(2){transform:rotate(-12deg) translateY(14px)}
.h2-s4-piece:nth-child(3){transform:rotate(0deg) translateY(-6px);z-index:2}
.h2-s4-piece:nth-child(4){transform:rotate(12deg) translateY(14px)}
.h2-s4-piece:nth-child(5){transform:rotate(24deg) translateY(46px)}
.h2-s4-piece span{position:absolute;left:10px;bottom:10px;color:#fff;font-size:14px;letter-spacing:.14em}

/* ---------------------------------------------------------
   05 — COLLECTIONS : offset diagonal frames, not cards
   --------------------------------------------------------- */
.h2-s5{padding:150px 0}
.h2-s5 .container{width:min(100% - 48px,var(--container));margin-inline:auto}
.h2-s5-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:100px}
.h2-s5-head h2{margin-top:16px}
.h2-s5-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:56px;align-items:start}
.h2-s5-item{position:relative;display:block;color:var(--text)}
.h2-s5-item:nth-child(1){transform:translateY(0)}
.h2-s5-item:nth-child(2){transform:translateY(70px)}
.h2-s5-item:nth-child(3){transform:translateY(20px)}
.h2-s5-frame{position:relative;height:390px;border-radius:2px;overflow:hidden;transform:rotate(-2deg);transition:transform .5s var(--ease);box-shadow:0 24px 50px rgba(0,0,0,.16)}
.h2-s5-item:nth-child(2) .h2-s5-frame{transform:rotate(2deg)}
.h2-s5-item:nth-child(3) .h2-s5-frame{transform:rotate(-1.4deg)}
.h2-s5-item:hover .h2-s5-frame{transform:rotate(0deg) scale(1.02)}
.h2-s5-frame img{width:100%;height:100%;object-fit:cover}
.h2-s5-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.5))}
.h2-s5-num{position:absolute;z-index:2;left:16px;top:14px;font-family:var(--font-display);font-size:14px;color:#fff}
.h2-s5-label{position:absolute;z-index:2;left:18px;bottom:16px;color:#fff}
.h2-s5-label small{display:block;font-size:14px;letter-spacing:.18em;opacity:.85}
.h2-s5-label strong{display:block;font-family:var(--font-display);font-size:21px;margin-top:4px}

/* ---------------------------------------------------------
   06 — SERVICES CONSTELLATION : zigzag connected icon nodes
   --------------------------------------------------------- */
.h2-s6{padding:150px 0;background:var(--surface);position:relative;overflow:hidden}
.h2-s6::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 88% 14%,color-mix(in srgb,var(--coral) 10%,transparent),transparent 30%)}
.h2-s6 .container{position:relative;width:min(100% - 48px,var(--container));margin-inline:auto}
.h2-s6-head{max-width:600px;margin:0 auto 80px;text-align:center}
.h2-s6-head .h2-lead{margin-inline:auto}
.h2-s6-map{position:relative;max-width:760px;margin:0 auto}
.h2-s6-path{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.h2-s6-path path{fill:none;stroke:var(--coral);stroke-width:2;stroke-dasharray:8 10;opacity:.55}
.h2-s6-node{position:relative;display:flex;align-items:center;gap:20px;padding:16px 0}
.h2-s6-node:nth-child(even){justify-content:flex-end;text-align:right;flex-direction:row-reverse}
.h2-s6-bubble{width:74px;height:74px;flex:0 0 auto;border-radius:50%;background:var(--bg);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:24px;color:var(--coral);box-shadow:0 16px 34px rgba(0,0,0,.12)}
.h2-s6-node a.h2-s6-bubble:hover{background:var(--coral);color:#fff;border-color:var(--coral)}
.h2-s6-copy b{display:block;font-family:var(--font-display);font-size:19px}
.h2-s6-copy span{font-size:14px;color:var(--text-soft)}

/* ---------------------------------------------------------
   07 — GALLERY : asymmetric arch grid with bold overlay type
   --------------------------------------------------------- */
.h2-s7{padding:150px 0 160px}
.h2-s7 .container{width:min(100% - 48px,var(--container));margin-inline:auto;position:relative}
.h2-s7-headline{position:relative;z-index:2;font-size:clamp(34px,5.4vw,72px);line-height:1;letter-spacing:-.03em;max-width:760px;margin:16px 0 70px}
.h2-s7-grid{display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(2,190px);gap:20px}
.h2-s7-cell{position:relative;overflow:hidden;box-shadow:0 18px 40px rgba(0,0,0,.14)}
.h2-s7-cell img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.h2-s7-cell:hover img{transform:scale(1.07)}
.h2-s7-cell.arch{border-radius:220px 220px 6px 6px}
.h2-s7-c1{grid-column:1/4;grid-row:1/3}
.h2-s7-c2{grid-column:4/6;grid-row:1/2}
.h2-s7-c3{grid-column:6/7;grid-row:1/3}
.h2-s7-c4{grid-column:4/6;grid-row:2/3}

/* ---------------------------------------------------------
   08 — TESTIMONIALS : perforated postcard scroller
   --------------------------------------------------------- */
.h2-s8{padding:140px 0;background:var(--surface)}
.h2-s8-head{width:min(100% - 48px,var(--container));margin:0 auto 60px;display:flex;justify-content:space-between;align-items:flex-end;gap:30px}
.h2-s8-head h2{margin-top:16px}
.h2-s8-rail{display:flex;gap:26px;overflow-x:auto;padding:10px 24px 30px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.h2-s8-rail::-webkit-scrollbar{height:6px}
.h2-s8-rail::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px}
.h2-s8-card{flex:0 0 auto;width:300px;scroll-snap-align:start;background:var(--bg);border-radius:4px;padding:30px 26px 26px;position:relative;box-shadow:0 20px 46px rgba(0,0,0,.12)}
.h2-s8-card::before{content:"";position:absolute;left:0;right:0;top:-1px;height:14px;background-image:radial-gradient(circle,var(--surface) 6px,transparent 6.5px);background-size:20px 20px;background-position:0 -8px;background-repeat:repeat-x}
.h2-s8-stamp{position:absolute;top:22px;right:22px;width:44px;height:44px;border:1.5px dashed color-mix(in srgb, var(--coral) 60%, transparent);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--coral)}
.h2-s8-stars{display:flex;gap:3px;color:var(--gold);font-size:14px;margin-bottom:16px}
.h2-s8-card p{font-family:var(--font-display);font-size:17px;line-height:1.55;color:var(--text)}
.h2-s8-who{display:flex;align-items:center;gap:12px;margin-top:22px;padding-top:16px;border-top:1px dashed var(--line)}
.h2-s8-who b{display:block;font-size:14px}
.h2-s8-who span{font-size:14px;color:var(--text-soft)}

/* ---------------------------------------------------------
   09 — CTA : infinite marquee background
   --------------------------------------------------------- */
.h2-s9{position:relative;min-height:600px;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;background:var(--ink);color:#fff;padding:120px 24px}
.h2-s9-marquee{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-evenly;opacity:.14;pointer-events:none;z-index:0}
.h2-s9-marquee div{white-space:nowrap;font-family:var(--font-display);font-weight:700;font-size:96px;display:flex;gap:44px}
.h2-s9-inner{position:relative;z-index:1;max-width:800px}
.h2-s9 .h2-eyebrow{color:var(--gold)}
.h2-s9 .h2-eyebrow::before{background:var(--gold)}
.h2-s9 h2{font-size:clamp(40px,6vw,80px);margin:18px 0;color:#fff;letter-spacing:-.03em;line-height:1.02}
.h2-s9 p{max-width:600px;margin:0 auto 10px;line-height:1.8;color:rgba(255,255,255,.72)}
.h2-s9 .h2-btn-row{justify-content:center}
.h2-s9-chip{position:absolute;z-index:1;width:60px;height:60px;border-radius:50%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;color:var(--gold);font-size:18px}
.h2-s9-chip.c1{top:14%;left:9%}
.h2-s9-chip.c2{bottom:16%;right:10%}
.h2-s9-chip.c3{top:20%;right:15%}

/* ---------------------------------------------------------
   shared buttons (reuses site .btn, extends variants)
   --------------------------------------------------------- */
.home2-page .btn{display:inline-flex;align-items:center;gap:10px;padding:16px 28px;border-radius:999px;font-weight:700;font-size:15px;transition:transform .3s,box-shadow .3s,background .3s,color .3s}
.home2-page .btn-primary{background:var(--ink);color:var(--cream)}
.home2-page .btn-primary:hover{transform:translateY(-3px);box-shadow:0 18px 34px rgba(0,0,0,.22)}
.home2-page .btn-outline{border:1.5px solid var(--ink);color:var(--ink)}
.home2-page .btn-outline:hover{background:var(--ink);color:var(--cream);transform:translateY(-3px)}
.h2-s9 .btn-outline{border-color:rgba(255,255,255,.5);color:#fff}
.h2-s9 .btn-outline:hover{background:#fff;color:var(--ink)}
.h2-s9 .btn-primary{background:var(--gold);color:#241d10}
.h2-s9 .btn-primary:hover{background:#fff;color:var(--ink)}
.home2-page .text-link{display:inline-flex;align-items:center;gap:12px;margin-top:10px;color:var(--text);font-weight:800;text-transform:uppercase;font-size:14px;letter-spacing:.16em;border-bottom:1px solid var(--line);padding-bottom:9px}
.home2-page .text-link i{transition:transform .3s}
.home2-page .text-link:hover i{transform:translateX(7px)}

/* ---------------------------------------------------------
   dark mode touches (base tokens already flip; these refine)
   --------------------------------------------------------- */
html.dark .h2-s1-word{-webkit-text-stroke-color:rgba(245,241,231,.22)}
html.dark .h2-s1-chip,html.dark .h2-s6-bubble{background:#1D2923}
html.dark .h2-s3-poster-frame{border-color:var(--text)}
html.dark .h2-s3-poster-badge{background:var(--cream);color:var(--ink)}
html.dark .h2-s2-tag{background:#1D2923}
html.dark .h2-s8-card{background:#1D2923}
html.dark .h2-s8-card::before{background-image:radial-gradient(circle,#1D2923 6px,transparent 6.5px)}
html.dark .h2-s9{background:#0B110E}
html.dark .h2-s9-chip{background:rgba(255,255,255,.05)}
html.dark .home2-page .btn-primary{background:var(--gold);color:#141B18}
html.dark .home2-page .btn-outline{border-color:var(--gold);color:var(--text)}
html.dark .home2-page .btn-outline:hover{background:var(--gold);color:#141B18}

/* ---------------------------------------------------------
   motion base states (JS adds .h2-motion-ready before hiding)
   --------------------------------------------------------- */
.h2-motion-ready .h2-fade,.h2-motion-ready .h2-s3-poster-reveal,.h2-motion-ready .h2-s4-piece,.h2-motion-ready .h2-s5-item,.h2-motion-ready .h2-s6-node,.h2-motion-ready .h2-s7-cell,.h2-motion-ready .h2-s8-card{opacity:0}
.h2-page-loaded .h2-fade,.h2-page-loaded .h2-s3-poster-reveal,.h2-page-loaded .h2-s4-piece,.h2-page-loaded .h2-s5-item,.h2-page-loaded .h2-s6-node,.h2-page-loaded .h2-s7-cell,.h2-page-loaded .h2-s8-card{opacity:1}

/* ---------------------------------------------------------
   RESPONSIVE — Large devices 1025–1280
   --------------------------------------------------------- */
@media(max-width:1280px){
  .h2-s1-grid{gap:4vw}
  .h2-s7-grid{grid-template-rows:repeat(2,160px)}
  .h2-s9-marquee div{font-size:78px}
}

/* ---------------------------------------------------------
   RESPONSIVE — Tablet 768–1024
   --------------------------------------------------------- */
@media(max-width:1024px){
  .h2-s1{padding:40px 0 48px}
  .h2-s1-frame{min-height:auto}
  .h2-s1-grid{grid-template-columns:1fr;gap:50px;padding:40px 0 0}
  .h2-s1-word{top:8%;transform:translate(-50%,0);font-size:clamp(60px,14vw,150px)}
  .h2-s1-copy{order:2;padding-top:0}
  .h2-s1-visual{order:1}
  .h2-s1-photo{height:56vh}
  .h2-s1-chip{left:16px}
  .h2-s1-meta{margin-top:32px}
  .h2-s2{padding:72px 0}
  .h2-s2 .container{grid-template-columns:1fr;gap:60px;text-align:center}
  .h2-s2-copy .h2-lead,.h2-s2-copy p{margin-inline:auto}
  .h2-s2-copy .h2-eyebrow{justify-content:center}
  .h2-s2-copy .h2-eyebrow::before{display:none}
  .h2-s3{padding:70px 0}
  .h2-s3-poster-inner{grid-template-columns:40px 1fr;grid-template-areas:"vert visual" "vert copy";gap:30px 6vw}
  .h2-s3-poster-vertical{min-height:0;grid-area:vert}
  .h2-s3-poster-visual{grid-area:visual;max-width:360px}
  .h2-s3-poster-copy{grid-area:copy}
  .h2-s4{padding:110px 0 90px}
  .h2-s4-arc{height:auto;flex-wrap:wrap;max-width:560px;gap:18px;margin-top:60px}
  .h2-s4-piece{margin:0;transform:none !important;width:130px;height:190px}
  .h2-s5{padding:110px 0}
  .h2-s5-head{margin-bottom:60px}
  .h2-s5-strip{grid-template-columns:1fr 1fr;gap:36px}
  .h2-s5-item:nth-child(1),.h2-s5-item:nth-child(2),.h2-s5-item:nth-child(3){transform:none}
  .h2-s5-item:nth-child(3){grid-column:1/3;max-width:420px;margin-inline:auto}
  .h2-s6{padding:110px 0}
  .h2-s6-path{display:none}
  .h2-s6-node,.h2-s6-node:nth-child(even){flex-direction:row;justify-content:flex-start;text-align:left}
  .h2-s7{padding:110px 0 120px}
  .h2-s7-grid{grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,160px)}
  .h2-s7-c1{grid-column:1/5;grid-row:1/2}
  .h2-s7-c2{grid-column:1/3;grid-row:2/3}
  .h2-s7-c3{grid-column:3/5;grid-row:2/4}
  .h2-s7-c4{grid-column:1/3;grid-row:3/4}
  .h2-s8{padding:100px 0}
  .h2-s9{padding:100px 24px;min-height:500px}
  .h2-s9-marquee div{font-size:56px}
}

/* ---------------------------------------------------------
   RESPONSIVE — Mobile 320–767
   --------------------------------------------------------- */
@media(max-width:767px){
  .h2-s1{padding:28px 0 44px}
  .h2-s1-word{font-size:clamp(44px,17vw,90px);top:2%}
  .h2-s1-copy h1{font-size:38px}
  .h2-s1-meta{flex-wrap:wrap;gap:16px}
  .h2-s1-photo{height:44vh;border-radius:4px 60px 4px 4px}
  .h2-s1-chip{position:static;margin-top:16px;left:auto;bottom:auto;justify-content:center}
  .h2-s1-scroll{display:none}
  .h2-s2{padding:56px 0}
  .h2-s2-photo{width:240px}
  .h2-s2-tag{width:76px;height:76px;font-size:14px}
  .h2-s3{padding:56px 0}
  .h2-s3-poster-inner{grid-template-columns:1fr;grid-template-areas:"visual" "copy";gap:34px;text-align:center}
  .h2-s3-poster-vertical{display:none}
  .h2-s3-poster-visual{margin-inline:auto;max-width:300px}
  .h2-s3-poster-copy .h2-eyebrow{justify-content:center}
  .h2-s3-poster-copy .h2-eyebrow::before{display:none}
  .h2-s3-poster-copy .h2-lead{margin-inline:auto}
  .h2-s4{padding:80px 0 60px}
  .h2-s4-piece{width:44%;height:150px}
  .h2-s5{padding:80px 0}
  .h2-s5-head{flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:44px}
  .h2-s5-strip{grid-template-columns:1fr;gap:28px}
  .h2-s5-item:nth-child(3){grid-column:auto;max-width:none}
  .h2-s5-frame{height:320px}
  .h2-s6{padding:80px 0}
  .h2-s6-bubble{width:58px;height:58px;font-size:19px}
  .h2-s6-copy b{font-size:16px}
  .h2-s7{padding:80px 0 70px}
  .h2-s7-headline{font-size:32px;margin-bottom:36px}
  .h2-s7-grid{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(4,140px);gap:12px}
  .h2-s7-c1{grid-column:1/3;grid-row:1/2}
  .h2-s7-c2{grid-column:1/2;grid-row:2/3}
  .h2-s7-c3{grid-column:2/3;grid-row:2/4}
  .h2-s7-c4{grid-column:1/2;grid-row:3/4}
  .h2-s7-cell.arch{border-radius:120px 120px 6px 6px}
  .h2-s8{padding:70px 0}
  .h2-s8-head{flex-direction:column;align-items:flex-start;gap:14px}
  .h2-s8-card{width:250px}
  .h2-s9{padding:70px 20px;min-height:420px}
  .h2-s9 h2{font-size:34px}
  .h2-s9-marquee div{font-size:34px}
  .h2-s9-chip{width:44px;height:44px;font-size:14px}
  .h2-btn-row .btn{width:100%;justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  .h2-page-loaded .h2-fade,.h2-page-loaded .h2-s3-poster-reveal,.h2-page-loaded .h2-s4-piece,.h2-page-loaded .h2-s5-item,.h2-page-loaded .h2-s6-node,.h2-page-loaded .h2-s7-cell,.h2-page-loaded .h2-s8-card{opacity:1!important;transform:none!important}
  .h2-s9-marquee{animation:none!important}
}

/* =========================================================
   FINAL RESPONSIVE POLISH — requested home2 fixes
   ========================================================= */
/* 01: remove the oversized background word that collided with foreground copy */
.h2-s1-word{display:none !important;}
.h2-s1-frame{overflow:hidden;}

/* 03: keep the poster section flush so there is no visible side gutter */
.h2-s3{overflow:hidden;}
.h2-s3 .container{width:100%;max-width:none;padding-inline:24px;}

/* 04: larger fabric imagery */
.h2-s4-piece{height:500px;}
.h2-s4-piece img{width:100%;height:100%;object-fit:cover;}

/* 06: expand the constellation map to eliminate the right-side dead space */
.h2-s6 .container{width:100%;max-width:1120px;}
.h2-s6-map{width:100%;max-width:960px;}

/* 09: background marquee stays atmospheric instead of competing with the message */
.h2-s9-marquee{opacity:.055;}
.h2-s9-inner{max-width:900px;padding:44px 38px;background:rgba(29,41,35,.72);border:1px solid rgba(255,255,255,.10);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);border-radius:28px;box-shadow:0 28px 80px rgba(0,0,0,.20);}
.h2-s9 p{font-size:16px;color:rgba(255,255,255,.82);}

@media(max-width:767px){
  .h2-s3 .container{padding-inline:14px;}
  .h2-s4-piece{height:420px;}
  .h2-s6 .container{padding-inline:14px;}
  .h2-s6-map{max-width:none;}
  .h2-s9-inner{padding:32px 18px;border-radius:20px;}
  .h2-s9-marquee div{font-size:64px;}
}

/* =========================================================
   HOME2 CREATIVE REWORK — material + fit sections
   ========================================================= */
.h2-material-editorial{padding:145px 0 115px;overflow:hidden;}
.h2-s4-gallery{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;align-items:start;max-width:1120px;margin:80px auto 42px;}
.h2-s4-piece{width:100%;height:390px!important;margin:0!important;border-radius:2px!important;transform:none!important;position:relative;overflow:hidden;box-shadow:0 22px 46px rgba(0,0,0,.15);}.h2-s4-piece:nth-child(odd){margin-top:48px!important;}.h2-s4-piece-tall{height:470px!important;}.h2-s4-piece img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--ease);}.h2-s4-piece:hover img{transform:scale(1.06);}.h2-s4-piece::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.48),transparent 55%);pointer-events:none;}.h2-s4-piece span{left:16px!important;bottom:16px!important;font-size:14px!important;z-index:2;}
.h2-s4-caption{display:flex;align-items:center;justify-content:space-between;gap:24px;max-width:1120px;margin:0 auto;border-top:1px solid var(--line);padding-top:24px;}.h2-s4-caption>span{font-size:15px;color:var(--text-soft);}.h2-s4-caption .btn{white-space:nowrap;}
.h2-fit-editorial{padding:145px 0;background:var(--surface);overflow:hidden;}.h2-s6-grid{position:relative;display:grid;grid-template-columns:repeat(2,1fr);gap:18px;max-width:1120px;margin:70px auto 0;}.h2-s6-grid::before{content:"";position:absolute;left:50%;top:0;bottom:0;border-left:1px dashed color-mix(in srgb,var(--coral) 38%,transparent);transform:translateX(-50%);pointer-events:none;}
.h2-s6-node{position:relative;z-index:1;display:grid;grid-template-columns:44px 72px 1fr 28px;align-items:center;gap:16px;min-height:132px;padding:22px 24px;background:var(--bg);border:1px solid var(--line);box-shadow:0 16px 38px rgba(0,0,0,.07);text-decoration:none;color:var(--text);transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease);}.h2-s6-node:hover{transform:translateY(-7px);box-shadow:0 24px 50px rgba(0,0,0,.12);border-color:var(--coral);}.h2-s6-index{font-family:var(--font-display);font-size:14px;color:var(--coral);font-weight:800;}.h2-s6-bubble{width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--surface);border:1px solid var(--line);font-size:23px;color:var(--coral);}.h2-s6-copy b{display:block;font-family:var(--font-display);font-size:21px;line-height:1.2;}.h2-s6-copy span{display:block;margin-top:6px;font-size:14px;color:var(--text-soft);}.h2-s6-arrow{font-size:14px;color:var(--coral);transition:transform .3s var(--ease);}.h2-s6-node:hover .h2-s6-arrow{transform:translate(4px,-4px);}
html.dark .h2-s4-piece,html.dark .h2-s6-node{box-shadow:0 18px 42px rgba(0,0,0,.25);}html.dark .h2-s6-node{background:#1b2520;}
@media(max-width:767px){
 .h2-material-editorial{padding:82px 0 70px}.h2-s4-gallery{grid-template-columns:repeat(2,1fr);gap:12px;margin-top:48px}.h2-s4-piece,.h2-s4-piece-tall{height:300px!important}.h2-s4-piece:nth-child(odd){margin-top:30px!important}.h2-s4-piece:nth-child(5){grid-column:1/-1;width:54%;justify-self:center;margin-top:0!important;height:320px!important}.h2-s4-caption{display:grid;justify-items:start;gap:16px}.h2-s4-caption .btn{width:100%;justify-content:center}.h2-fit-editorial{padding:82px 0}.h2-s6-grid{grid-template-columns:1fr;gap:12px;margin-top:48px}.h2-s6-grid::before{display:none}.h2-s6-node{grid-template-columns:34px 58px 1fr 22px;min-height:100px;padding:16px 14px;gap:11px}.h2-s6-bubble{width:58px;height:58px;font-size:19px}.h2-s6-copy b{font-size:18px}.h2-s6-copy span{font-size:14px}.h2-s6-index{font-size:14px}
}

/* =========================================================
   HOME 2 — organic image reveals, no boxes
   ========================================================= */
.h2-material-editorial{padding:145px 0 115px;background:
 radial-gradient(circle at 10% 20%,color-mix(in srgb,var(--gold) 8%,transparent),transparent 25%),
 radial-gradient(circle at 90% 75%,color-mix(in srgb,var(--accent) 9%,transparent),transparent 28%),var(--surface);overflow:hidden}
.h2-swatch-meta{display:flex;align-items:center;justify-content:center;gap:14px;margin:56px auto 0;font-family:var(--font-display);font-size:14px;letter-spacing:.28em;color:var(--text-soft);text-transform:uppercase}
.h2-swatch-meta span:nth-child(1){color:var(--gold);font-weight:700}
.h2-swatch-dot{width:5px;height:5px;border-radius:50%;background:color-mix(in srgb,var(--text) 30%,transparent);display:inline-block}
.h2-swatchrow{position:relative;display:flex;align-items:flex-end;justify-content:center;flex-wrap:wrap;gap:20px;max-width:1160px;margin:34px auto 0}
.h2-swatch{position:relative;width:calc(20% - 16px);min-width:150px;border-radius:18px;overflow:hidden;box-shadow:0 24px 48px rgba(0,0,0,.16);transform-origin:bottom center}
.h2-swatch figure{margin:0;aspect-ratio:3/4.4;overflow:hidden}
.h2-swatch img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s var(--ease)}
.h2-swatch:hover img{transform:scale(1.09)}
.h2-swatch::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.55),transparent 55%);pointer-events:none}
.h2-swatch-tag{position:absolute;left:16px;bottom:14px;z-index:2;display:flex;align-items:baseline;gap:8px;color:#fff;font-size:13px;font-weight:800;letter-spacing:.14em;text-shadow:0 2px 12px rgba(0,0,0,.55)}
.h2-swatch-tag em{font-style:normal;color:var(--gold);font-family:var(--font-display);font-size:15px}
.h2-swatch-1{margin-bottom:26px}
.h2-swatch-2{margin-bottom:0}
.h2-swatch-3{margin-bottom:44px}
.h2-swatch-4{margin-bottom:0}
.h2-swatch-5{margin-bottom:26px}
.h2-material-foot{display:flex;justify-content:center;align-items:center;gap:32px;margin-top:56px;flex-wrap:wrap}
.h2-material-foot strong{font-family:var(--font-display);font-size:21px}

.h2-fit-editorial{padding:145px 0 130px;background:
 radial-gradient(circle at 80% 12%,color-mix(in srgb,var(--coral) 10%,transparent),transparent 28%),var(--surface);overflow:hidden}
.h2-thread-map{position:relative;max-width:1120px;height:610px;margin:10px auto 0}
.h2-thread-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:0}
.h2-thread-svg path{fill:none;stroke:color-mix(in srgb,var(--gold) 65%,transparent);stroke-width:2;stroke-dasharray:9 12}
.h2-thread-item{position:absolute;z-index:2;color:var(--text);text-decoration:none;width:220px;transition:transform .5s var(--ease)}
.h2-thread-item:hover{transform:translateY(-9px) rotate(-2deg)}
.h2-thread-item span{display:block;font-family:var(--font-display);font-size:14px;color:var(--gold);letter-spacing:.15em;margin-bottom:7px}
.h2-thread-item b{display:block;font-family:var(--font-display);font-size:25px;line-height:1.05}
.h2-thread-item small{display:block;color:var(--text-soft);font-size:14px;line-height:1.5;margin-top:7px}
.h2-thread-item i{display:block;color:var(--gold);font-size:14px;margin-top:10px}
.ti-1{left:1%;top:55px}.ti-2{left:27%;top:105px}.ti-3{left:57%;top:85px}.ti-4{right:0;top:205px;text-align:right}.ti-5{left:20%;bottom:65px}.ti-6{right:4%;bottom:20px;text-align:right}
.h2-thread-needle{position:absolute;z-index:3;left:51%;top:51%;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;color:var(--gold);border:1px solid color-mix(in srgb,var(--gold) 55%,transparent);background:var(--surface);box-shadow:0 0 0 10px color-mix(in srgb,var(--surface) 65%,transparent)}
.h2-thread-needle i{font-size:17px;transform:rotate(45deg)}
@media(max-width:1024px){
 .h2-swatch{width:calc(33.33% - 14px)}
 .h2-swatch-4,.h2-swatch-5{width:calc(50% - 10px)}
 .h2-thread-item{width:190px}.ti-2{left:25%}.ti-3{left:55%}
}
@media(max-width:767px){
 .h2-material-editorial,.h2-fit-editorial{padding:88px 0 80px}
 .h2-swatch-meta{font-size:12px;letter-spacing:.2em;gap:10px}
 .h2-swatchrow{gap:14px;margin-top:26px}
 .h2-swatch{width:calc(50% - 7px);margin-bottom:0!important}
 .h2-swatch-5{width:100%}
 .h2-swatch-tag{font-size:12px}
 .h2-material-foot{flex-direction:column;gap:15px;text-align:center}
 .h2-thread-map{height:980px;margin-top:35px}.h2-thread-svg{opacity:.65}
 .h2-thread-item{width:155px}.h2-thread-item b{font-size:20px}.h2-thread-item small{font-size:14px}.ti-1{left:0;top:25px}.ti-2{right:0;left:auto;top:145px;text-align:right}.ti-3{left:0;top:310px}.ti-4{right:0;left:auto;top:450px}.ti-5{left:0;bottom:210px}.ti-6{right:0;bottom:45px}.h2-thread-needle{left:50%;top:52%;transform:translate(-50%,-50%)}
}

/* ==========================================================
   MERGED FROM services.css (single style.css structure)
   ========================================================== */
/* =========================================================
   LOOM & LORE — SERVICE PAGES
   8 distinct editorial sections • responsive 320–1280+
   ========================================================= */
.service-page{overflow:hidden;background:var(--bg);}
.service-page main{overflow:hidden;}
.service-section{position:relative;isolation:isolate;}
.service-container{width:min(100% - 48px,var(--container));margin-inline:auto;}
.service-kicker{display:inline-flex;align-items:center;gap:10px;color:var(--accent);font-size:14px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;}
.service-kicker::before{content:"";width:30px;height:1px;background:currentColor;}
.service-display{font-family:var(--font-display);font-size:clamp(42px,6.2vw,88px);line-height:.98;letter-spacing:-.045em;color:var(--text);}
.service-display em,.service-title em{font-style:italic;color:var(--accent);}
.service-title{font-family:var(--font-display);font-size:clamp(34px,4.5vw,64px);line-height:1.02;letter-spacing:-.035em;color:var(--text);}
.service-lead{font-size:17px;line-height:1.8;color:var(--text-soft);}
.service-copy{font-size:15px;line-height:1.8;color:var(--text-soft);}
.service-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:13px 22px;border-radius:999px;font-size:15px;font-weight:800;transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .35s var(--ease),color .35s var(--ease);}
.service-btn-primary{background:var(--ink);color:var(--cream);}
.service-btn-primary:hover{transform:translateY(-4px);box-shadow:0 18px 36px rgba(0,0,0,.18);}
.service-btn-ghost{border:1px solid var(--line);color:var(--text);background:transparent;}
.service-btn-ghost:hover{transform:translateY(-4px);border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent);}

/* 01 — editorial hero (full-bleed background image) */
.svc-hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;padding:0 0 100px;overflow:hidden;isolation:isolate;background:var(--ink);}
.svc-hero-bg{position:absolute;inset:0;z-index:0;}
.svc-hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform 1.6s var(--ease);}
.svc-hero:hover .svc-hero-bg img{transform:scale(1.045);}
.svc-hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,10,8,.88) 0%,rgba(10,10,8,.5) 42%,rgba(10,10,8,.2) 64%,rgba(10,10,8,.46) 100%);}
.svc-hero-grid{position:relative;z-index:1;width:min(100% - 48px,var(--container));margin-inline:auto;display:block;}
.svc-hero-copy{max-width:680px;color:#fdfcf9;}
.svc-hero-copy .service-kicker{color:var(--gold);}
.svc-hero-copy .service-display{color:#fdfcf9;}
.svc-hero-copy .service-display em{color:var(--gold);}
.svc-hero-copy .service-lead{max-width:590px;margin-top:26px;color:rgba(253,252,249,.82);}
.svc-hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px;}
.svc-hero .service-btn-ghost{border-color:rgba(253,252,249,.5);color:#fdfcf9;}
.svc-hero .service-btn-ghost:hover{border-color:var(--gold);background:rgba(253,252,249,.12);}
.svc-hero-note{display:flex;align-items:center;gap:12px;margin-top:32px;font-size:14px;color:rgba(253,252,249,.72);}
.svc-hero-note i{color:var(--gold);}
.svc-floating-label{position:absolute;right:0;bottom:0;z-index:2;background:var(--ink);color:var(--cream);padding:17px 24px;border-left:3px solid var(--gold);box-shadow:0 20px 42px rgba(0,0,0,.3);}
.svc-floating-label strong{display:block;font-family:var(--font-display);font-size:22px;}
.svc-floating-label span{display:block;font-size:14px;margin-top:3px;color:rgba(255,255,255,.72);}

/* 02 — service index */
.svc-index{padding:132px 0;background:var(--surface);}
.svc-index-head{display:grid;grid-template-columns:.8fr 1.2fr;gap:50px;align-items:end;margin-bottom:70px;}
.svc-index-intro{max-width:520px;}
.svc-index-list{border-top:1px solid var(--line);}
.svc-index-row{display:grid;grid-template-columns:70px 64px 1fr 1.2fr 60px;gap:24px;align-items:center;padding:27px 0;border-bottom:1px solid var(--line);position:relative;transition:padding .4s var(--ease);}
.svc-index-row::before{content:"";position:absolute;left:0;right:0;top:0;bottom:0;background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 7%,transparent),transparent 70%);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease);z-index:-1;}
.svc-index-row:hover{padding-inline:18px;}
.svc-index-row:hover::before{transform:scaleX(1);}
.svc-index-num{font-family:var(--font-display);font-size:22px;color:var(--gold);}
.svc-index-thumb{width:64px;height:64px;border-radius:50%;overflow:hidden;box-shadow:0 8px 20px rgba(0,0,0,.14);}
.svc-index-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.16,1,.3,1);}
.svc-index-row:hover .svc-index-thumb img{transform:scale(1.18) rotate(2deg);}
.svc-index-row h3{font-size:24px;color:var(--text);}

/* 02 — service index (WOMEN) : asymmetric editorial grid — different layout to the men's list */
.svc-index-grid{display:grid;grid-template-columns:1.25fr 1fr;grid-template-areas:"bridal everyday" "bridal occasion" "refits refits";gap:22px;}
.svc-index-card{position:relative;overflow:hidden;border-radius:10px;min-height:210px;isolation:isolate;}
.svc-card-bridal{grid-area:bridal;min-height:460px;}
.svc-card-everyday{grid-area:everyday;}
.svc-card-occasion{grid-area:occasion;}
.svc-card-refits{grid-area:refits;min-height:230px;}
.svc-index-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.16,1,.3,1);}
.svc-index-card:hover img{transform:scale(1.08);}
.svc-index-card-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,14,10,0) 38%,rgba(20,14,10,.86) 100%);transition:background .4s var(--ease);}
.svc-index-card:hover .svc-index-card-overlay{background:linear-gradient(180deg,rgba(20,14,10,.1) 20%,rgba(20,14,10,.9) 100%);}
.svc-index-card-num{position:absolute;top:18px;left:18px;z-index:2;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.16);backdrop-filter:blur(6px);color:#fff;font-family:var(--font-display);font-size:14px;}
.svc-index-card-copy{position:absolute;left:22px;right:22px;bottom:20px;z-index:2;color:#fff;}
.svc-index-card-copy h3{margin:0 0 6px;font-size:22px;color:#fff;}
.svc-index-card-copy p{font-size:14px;line-height:1.6;color:rgba(255,255,255,.86);max-width:360px;margin:0;max-height:0;opacity:0;overflow:hidden;transition:max-height .45s var(--ease),opacity .35s ease,margin .45s var(--ease);}
.svc-index-card:hover .svc-index-card-copy p{max-height:130px;opacity:1;margin-bottom:14px;}
.svc-index-card-copy a{display:flex;width:38px;height:38px;border:1px solid rgba(255,255,255,.55);border-radius:50%;align-items:center;justify-content:center;color:#fff;transition:.35s var(--ease);}
.svc-index-card:hover .svc-index-card-copy a{background:#fff;color:var(--ink,#2b2118);transform:rotate(-45deg);}

/* 02 — WOMENSWEAR : editorial rotated card collage (distinct from men's strip list) */
.svc-index-grid{gap:26px;perspective:1400px;}
.svc-index-card{box-shadow:0 18px 40px rgba(20,14,10,.12);transform:rotate(var(--tilt,0deg));transition:transform .5s var(--ease),box-shadow .5s var(--ease);border:6px solid var(--surface);}
.svc-index-card:hover{transform:rotate(0deg) scale(1.015);box-shadow:0 26px 60px rgba(20,14,10,.22);}
.svc-card-bridal{--tilt:-1.4deg;}
.svc-card-everyday{--tilt:1.1deg;}
.svc-card-occasion{--tilt:-1deg;}
.svc-card-refits{--tilt:.8deg;}
.svc-index-card-num{border:1px solid rgba(255,255,255,.4);}
.svc-index-row p{font-size:15px;color:var(--text-soft);}
.svc-index-row a{width:46px;height:46px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;color:var(--text);transition:.35s var(--ease);}
.svc-index-row:hover a{background:var(--ink);color:var(--cream);transform:rotate(-45deg);}

/* 02 — MENSWEAR : hover-reveal strip list (distinct from women's card grid) */
.svc-index-strip-list{border-top:1px solid var(--line);}
.svc-index-strip{position:relative;border-bottom:1px solid var(--line);isolation:isolate;overflow:hidden;}
.svc-index-strip-inner{position:relative;z-index:2;display:grid;grid-template-columns:70px 1fr 60px;align-items:center;gap:24px;padding:34px 4px;transition:padding .45s var(--ease);}
.svc-index-strip-inner::after{content:"";position:absolute;inset:0;left:-4px;right:-4px;background:linear-gradient(90deg,rgba(20,14,10,.72) 0%,rgba(20,14,10,.86) 42%,rgba(20,14,10,.94) 100%);opacity:0;transition:opacity .5s ease;z-index:-1;pointer-events:none;}
.svc-index-strip-num{grid-column:1;font-family:var(--font-display);font-size:32px;color:var(--gold);transition:color .4s ease,transform .45s var(--ease);}
.svc-index-strip-media{position:absolute;top:0;right:0;bottom:0;width:0;overflow:hidden;z-index:-1;transition:width .6s cubic-bezier(.16,1,.3,1);}
.svc-index-strip-media img{display:block;width:380px;max-width:62vw;height:100%;object-fit:cover;filter:grayscale(.2) brightness(.86);transform:scale(1.18);transition:transform .9s cubic-bezier(.16,1,.3,1);}
.svc-index-strip-text{grid-column:2;}
.svc-index-strip-text h3{margin:0 0 8px;font-size:25px;transition:color .4s ease;}
.svc-index-strip-text p{margin:0;font-size:15px;line-height:1.65;color:var(--text-soft);max-width:440px;transition:color .4s ease;}
.svc-index-strip-arrow{grid-column:3;justify-self:end;width:46px;height:46px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;color:var(--text);transition:.4s var(--ease);}
.svc-index-strip-arrow i{transition:transform .4s var(--ease);}
.svc-index-strip:hover .svc-index-strip-inner{padding-left:14px;}
.svc-index-strip:hover .svc-index-strip-inner::after{opacity:1;}
.svc-index-strip:hover .svc-index-strip-media{width:380px;}
.svc-index-strip:hover .svc-index-strip-media img{transform:scale(1);}
.svc-index-strip:hover .svc-index-strip-num{color:#fff;transform:translateX(6px);}
.svc-index-strip:hover .svc-index-strip-text h3,.svc-index-strip:hover .svc-index-strip-text p{color:#fff;}
.svc-index-strip:hover .svc-index-strip-arrow{background:#fff;border-color:#fff;}
.svc-index-strip:hover .svc-index-strip-arrow i{transform:rotate(-45deg);color:#141010;}

/* 03 — measurement canvas */
.svc-measure{padding:150px 0;overflow:hidden;background:var(--bg);}
.svc-measure::after{content:"FIT";position:absolute;right:-8vw;top:4%;font-family:var(--font-display);font-weight:700;font-size:clamp(180px,28vw,420px);line-height:1;color:transparent;-webkit-text-stroke:1px color-mix(in srgb,var(--text) 10%,transparent);z-index:-1;}
.svc-measure-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(45px,8vw,120px);align-items:center;}
.svc-measure-art{position:relative;min-height:620px;}
.svc-measure-art img{position:absolute;inset:0 15% 8% 0;width:78%;height:88%;object-fit:cover;filter:saturate(.82);box-shadow:0 30px 70px rgba(0,0,0,.18);}
.svc-measure-ring{position:absolute;right:2%;top:8%;width:48%;aspect-ratio:1;border:1px solid color-mix(in srgb,var(--accent) 65%,transparent);border-radius:50%;}
.svc-measure-ring::before,.svc-measure-ring::after{content:"";position:absolute;inset:13%;border:1px dashed color-mix(in srgb,var(--gold) 70%,transparent);border-radius:50%;}
.svc-measure-ring::after{inset:28%;}
.svc-measure-tag{position:absolute;right:0;bottom:10%;padding:20px 22px;background:var(--surface);border:1px solid var(--line);box-shadow:0 20px 40px rgba(0,0,0,.12);}
.svc-measure-tag strong{font-family:var(--font-display);font-size:27px;display:block;}
.svc-measure-tag span{font-size:14px;color:var(--text-soft);}
.svc-stat-line{display:flex;gap:35px;margin-top:36px;padding-top:24px;border-top:1px solid var(--line);}
.svc-stat-line strong{font-family:var(--font-display);font-size:29px;display:block;}
.svc-stat-line span{font-size:14px;color:var(--text-soft);}

/* 04 — image/copy editorial split */
.svc-lookbook{padding:0;background:var(--ink);color:var(--cream);}
.svc-lookbook-grid{display:grid;grid-template-columns:1.15fr .85fr;min-height:780px;}
.svc-lookbook-image{position:relative;min-height:780px;overflow:hidden;}
.svc-lookbook-image img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease);}
.svc-lookbook-image::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 55%,var(--ink) 100%);}
.svc-lookbook:hover img{transform:scale(1.04);}
.svc-lookbook-copy{display:flex;flex-direction:column;justify-content:center;padding:80px clamp(30px,6vw,90px) 80px 30px;}
.svc-lookbook-copy .service-kicker{color:var(--gold);}
.svc-lookbook-copy .service-title{color:var(--cream);margin-top:18px;}
.svc-lookbook-copy .service-copy{color:rgba(245,241,231,.76);margin-top:22px;max-width:470px;}
.svc-feature-lines{margin-top:34px;display:grid;gap:0;max-width:520px;}
.svc-feature-line{display:flex;gap:18px;align-items:flex-start;padding:18px 0;border-top:1px solid rgba(245,241,231,.14);}
.svc-feature-line i{color:var(--gold);font-size:17px;margin-top:4px;}
.svc-feature-line strong{display:block;font-size:16px;color:var(--cream);}
.svc-feature-line span{display:block;font-size:14px;color:rgba(245,241,231,.66);margin-top:3px;}

/* 05 — process timeline */
.svc-process{padding:145px 0;background:var(--surface);}
.svc-process-head{display:flex;justify-content:space-between;gap:50px;align-items:end;margin-bottom:80px;}
.svc-process-head .service-lead{max-width:430px;}
.svc-timeline{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line);}
.svc-timeline::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:linear-gradient(90deg,var(--accent),var(--gold));transform:scaleX(0);transform-origin:left;transition:transform 1s var(--ease);}.svc-timeline.is-live::before{transform:scaleX(1);}
.svc-step{padding:38px 28px 10px 0;position:relative;min-height:280px;}
.svc-step:not(:last-child){border-right:1px solid var(--line);padding-right:32px;margin-right:32px;}
.svc-step-dot{width:16px;height:16px;border-radius:50%;background:var(--bg);border:3px solid var(--accent);position:absolute;top:-8px;left:0;box-shadow:0 0 0 7px color-mix(in srgb,var(--accent) 9%,transparent);}
.svc-step-num{font-family:var(--font-display);font-size:16px;color:var(--gold);}
.svc-step h3{font-size:28px;margin-top:22px;}
.svc-step p{font-size:15px;color:var(--text-soft);margin-top:12px;max-width:260px;}
.svc-step i{font-size:20px;color:var(--accent);margin-top:30px;}

/* 06 — fabric selector, no cards */
.svc-fabric{padding:150px 0;background:var(--bg);}
.svc-fabric-head{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:end;margin-bottom:65px;}
.svc-fabric-head .service-copy{max-width:520px;justify-self:end;}
.svc-fabric-band{display:grid;grid-template-columns:repeat(5,1fr);height:420px;overflow:hidden;}
.svc-fabric-slice{position:relative;overflow:hidden;border-right:1px solid rgba(255,255,255,.55);}
.svc-fabric-slice img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease),filter .5s var(--ease);}
.svc-fabric-slice::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.58),transparent 50%);}
.svc-fabric-slice:hover img{transform:scale(1.08);filter:saturate(1.12);}
.svc-fabric-slice span{position:absolute;left:18px;bottom:18px;z-index:2;color:#fff;font-family:var(--font-display);font-size:20px;letter-spacing:.04em;}
.svc-fabric-footer{display:flex;justify-content:space-between;gap:30px;align-items:center;margin-top:28px;}
.svc-fabric-footer p{font-size:15px;color:var(--text-soft);}

/* 07 — fitting promise / accordion */
.svc-fit{padding:145px 0;background:var(--surface);}
.svc-fit-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:80px;align-items:start;}
.svc-fit-quote{position:sticky;top:120px;padding:42px 0 20px;border-top:1px solid var(--line);}
.svc-fit-quote blockquote{font-family:var(--font-display);font-size:clamp(30px,3.6vw,50px);line-height:1.08;letter-spacing:-.025em;margin:18px 0 24px;}
.svc-fit-quote cite{font-size:14px;color:var(--text-soft);font-style:normal;}
.svc-accord{border-top:1px solid var(--line);}
.svc-accord-item{border-bottom:1px solid var(--line);}
.svc-accord-button{width:100%;display:grid;grid-template-columns:58px 1fr 30px;align-items:center;text-align:left;padding:25px 0;font-size:19px;font-weight:800;color:var(--text);}
.svc-accord-button span:first-child{font-family:var(--font-display);font-size:16px;color:var(--gold);}
.svc-accord-button i{transition:transform .35s var(--ease);font-size:15px;}
.svc-accord-item.open .svc-accord-button i{transform:rotate(45deg);}
.svc-accord-panel{height:0;overflow:hidden;transition:height .45s var(--ease);}
.svc-accord-panel p{font-size:15px;line-height:1.8;color:var(--text-soft);padding:0 30px 24px 58px;max-width:680px;}

/* 08 — closing CTA */
.svc-cta{min-height:610px;display:grid;place-items:center;text-align:center;padding:110px 0;background:var(--ink);color:#fff;overflow:hidden;}
.svc-cta::before{content:"MADE TO MEASURE";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-7deg);white-space:nowrap;font-family:var(--font-display);font-size:clamp(90px,16vw,220px);font-weight:700;color:transparent;translate:var(--cta-shift,0) 0;-webkit-text-stroke:1px rgba(255,255,255,.10);z-index:0;}
.svc-cta::after{content:"";position:absolute;width:55vw;aspect-ratio:1;border-radius:50%;border:1px solid rgba(201,173,112,.24);box-shadow:0 0 0 80px rgba(201,173,112,.025),0 0 0 160px rgba(201,173,112,.02);}
.svc-cta-inner{position:relative;z-index:2;max-width:800px;padding:46px 36px;background:rgba(20,27,24,.64);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.10);}
.svc-cta .service-kicker{justify-content:center;color:var(--gold);}
.svc-cta .service-kicker::before{display:none;}
.svc-cta h2{font-family:var(--font-display);font-size:clamp(42px,6vw,78px);line-height:1;letter-spacing:-.04em;color:#fff;margin:16px 0 20px;}
.svc-cta p{font-size:16px;line-height:1.8;color:rgba(255,255,255,.75);max-width:620px;margin:0 auto;}
.svc-cta-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:32px;}
.svc-cta .service-btn-primary{background:var(--gold);color:#151b17;}
.svc-cta .service-btn-ghost{border-color:rgba(255,255,255,.35);color:#fff;}

/* contrast / dark mode */
html.dark .service-page{background:var(--bg);}
html.dark .svc-hero-bg::after{background:linear-gradient(0deg,rgba(6,8,7,.92) 0%,rgba(6,8,7,.55) 42%,rgba(6,8,7,.24) 64%,rgba(6,8,7,.5) 100%);}
html.dark .svc-index-row:hover::before{background:linear-gradient(90deg,rgba(201,173,112,.10),transparent 70%);}
html.dark .svc-measure{background:#141b18;}
html.dark .svc-measure-art img{box-shadow:0 30px 70px rgba(0,0,0,.35);}
html.dark .svc-measure-tag{background:#1d2923;border-color:rgba(245,241,231,.15);}
html.dark .svc-fit{background:#19231f;}
html.dark .service-btn-primary{background:var(--gold);color:#141b18;}
html.dark .service-btn-ghost{border-color:rgba(245,241,231,.22);}

/* responsive: 1024–1280 */
@media (max-width:1280px){
  .svc-timeline{grid-template-columns:repeat(2,1fr);row-gap:34px;}
  .svc-step:nth-child(2){border-right:0;margin-right:0;}
  .svc-step:nth-child(3){border-top:1px solid var(--line);padding-top:42px;}
  .svc-step:nth-child(4){border-top:1px solid var(--line);padding-top:42px;}
}

/* tablet: 768–1024 */
@media (min-width:768px) and (max-width:1024px){
  .service-container{width:min(100% - 40px,var(--container));}
  .svc-hero{min-height:auto;padding:0 0 80px;}
  .svc-hero-grid,.svc-measure-grid,.svc-lookbook-grid,.svc-fit-grid{grid-template-columns:1fr;}
  .svc-index-head,.svc-fabric-head{grid-template-columns:1fr;gap:24px;}
  .svc-index-head{margin-bottom:50px;}
  .svc-index-row{grid-template-columns:52px 52px 1fr 1fr 46px;gap:16px;}
  .svc-index-thumb{width:52px;height:52px;}
  .svc-index-strip-inner{grid-template-columns:52px 60px 1fr 44px;gap:16px;padding:24px 4px;}
  .svc-index-strip-media{position:static;width:60px;height:60px;border-radius:50%;grid-column:2;align-self:center;}
  .svc-index-strip-media img{width:100%;height:100%;transform:none!important;filter:none!important;}
  .svc-index-strip-text{grid-column:3;}
  .svc-index-strip-arrow{grid-column:4;width:40px;height:40px;}
  .svc-index-strip-inner::after{display:none;}
  .svc-index-strip:hover .svc-index-strip-text h3,.svc-index-strip:hover .svc-index-strip-text p{color:inherit;}
  .svc-index-strip:hover .svc-index-strip-num{color:var(--gold);}
  .svc-index-strip:hover .svc-index-strip-arrow{background:transparent;border-color:var(--line);}
  .svc-index-strip:hover .svc-index-strip-arrow i{color:var(--text);}
  .svc-index-grid{grid-template-columns:1fr 1fr;}
  .svc-card-bridal{min-height:380px;}
  .svc-index-card-copy p{max-width:none;}
  .svc-measure-art{min-height:560px;max-width:720px;width:100%;margin:auto;}
  .svc-lookbook-image{min-height:620px;}
  .svc-lookbook-copy{padding:70px 40px 90px;}
  .svc-process-head{display:block;}
  .svc-process-head .service-lead{margin-top:22px;}
  .svc-fabric-head .service-copy{justify-self:start;}
  .svc-fabric-band{height:340px;}
  .svc-fit-quote{position:relative;top:auto;}
}

/* mobile: 320–767 */
@media (max-width:767px){
  .service-container{width:100%;padding-inline:18px;}
  .service-kicker{font-size:14px;letter-spacing:.10em;}
  .service-display{font-size:clamp(40px,13vw,62px);}
  .service-title{font-size:clamp(34px,10vw,48px);}
  .service-lead{font-size:16px;line-height:1.75;}
  .service-copy{font-size:15px;}
  .service-btn{font-size:14px;width:100%;}
  .svc-hero{min-height:100svh;padding:0 0 56px;align-items:flex-end;}
  .svc-hero-grid{display:flex;flex-direction:column;gap:0;}
  .svc-hero-copy .service-lead{margin-top:20px;}
  .svc-hero-actions{display:grid;grid-template-columns:1fr;}
  .svc-hero-note{font-size:14px;align-items:flex-start;}
  .svc-floating-label{display:none;}
  .svc-index,.svc-measure,.svc-process,.svc-fabric,.svc-fit{padding:90px 0;}
  .svc-index-head,.svc-fabric-head{grid-template-columns:1fr;gap:22px;margin-bottom:42px;}
  .svc-index-row{grid-template-columns:38px 1fr 34px;gap:12px;padding:22px 0;}
  .svc-index-thumb{display:none;}
  .svc-index-row p{grid-column:2/3;font-size:14px;line-height:1.65;}
  .svc-index-row h3{font-size:21px;}
  .svc-index-row a{width:34px;height:34px;font-size:13px;}
  .svc-index-strip-inner{grid-template-columns:38px 1fr 34px;gap:12px;padding:20px 4px;}
  .svc-index-strip-media{display:none;}
  .svc-index-strip-text{grid-column:2/3;}
  .svc-index-strip-text h3{font-size:20px;}
  .svc-index-strip-text p{font-size:14px;line-height:1.6;}
  .svc-index-strip-arrow{grid-column:3;width:34px;height:34px;font-size:13px;}
  .svc-index-strip-inner::after{display:none;}
  .svc-index-strip:hover .svc-index-strip-text h3,.svc-index-strip:hover .svc-index-strip-text p{color:inherit;}
  .svc-index-strip:hover .svc-index-strip-num{color:var(--gold);transform:none;}
  .svc-index-strip:hover .svc-index-strip-arrow{background:transparent;border-color:var(--line);}
  .svc-index-strip:hover .svc-index-strip-arrow i{color:var(--text);transform:none;}
  .svc-index-grid{grid-template-columns:1fr;grid-template-areas:"bridal" "everyday" "occasion" "refits";gap:16px;}
  .svc-index-card{--tilt:0deg;}
  .svc-card-bridal,.svc-card-refits{min-height:260px;}
  .svc-index-card{min-height:220px;}
  .svc-index-card-copy p{max-height:none;opacity:1;margin-bottom:14px;font-size:14px;}
  .svc-index-card-overlay{background:linear-gradient(180deg,rgba(20,14,10,.05) 25%,rgba(20,14,10,.88) 100%) !important;}
  .svc-measure-grid{grid-template-columns:1fr;gap:42px;}
  .svc-measure-art{min-height:460px;}
  .svc-measure-art img{inset:0 12% 8% 0;width:86%;height:86%;}
  .svc-measure-ring{right:0;top:12%;width:46%;}
  .svc-measure-tag{right:0;bottom:4%;padding:15px 16px;}
  .svc-measure-tag strong{font-size:22px;}
  .svc-stat-line{gap:20px;flex-wrap:wrap;}
  .svc-stat-line strong{font-size:25px;}
  .svc-lookbook-grid{grid-template-columns:1fr;min-height:0;}
  .svc-lookbook-image{min-height:560px;}
  .svc-lookbook-image::after{background:linear-gradient(0deg,var(--ink),transparent 60%);}
  .svc-lookbook-copy{padding:65px 18px 82px;}
  .svc-process-head{display:block;margin-bottom:55px;}
  .svc-process-head .service-lead{margin-top:20px;}
  .svc-timeline{grid-template-columns:1fr;border-top:0;}
  .svc-timeline::before{display:none;}
  .svc-step,.svc-step:nth-child(3),.svc-step:nth-child(4){min-height:0;border-right:0;border-top:1px solid var(--line);padding:28px 0 34px;margin:0;}
  .svc-step-dot{top:-8px;}
  .svc-step h3{font-size:25px;margin-top:16px;}
  .svc-step p{max-width:none;font-size:14px;}
  .svc-fabric-head .service-copy{justify-self:start;}
  .svc-fabric-band{grid-template-columns:repeat(5,1fr);height:300px;}
  .svc-fabric-slice span{font-size:15px;left:8px;bottom:12px;writing-mode:vertical-rl;transform:rotate(180deg);}
  .svc-fabric-footer{display:grid;gap:18px;}
  .svc-fit-grid{grid-template-columns:1fr;gap:50px;}
  .svc-fit-quote{position:relative;top:auto;padding-top:28px;}
  .svc-fit-quote blockquote{font-size:34px;}
  .svc-accord-button{grid-template-columns:42px 1fr 24px;font-size:16px;padding:21px 0;}
  .svc-accord-panel p{padding:0 0 22px 42px;font-size:14px;}
  .svc-cta{min-height:560px;padding:80px 0;}
  .svc-cta::before{font-size:92px;transform:translate(-50%,-50%) rotate(-10deg);}
  .svc-cta::after{width:105vw;}
  .svc-cta-inner{padding:38px 18px;}
  .svc-cta h2{font-size:clamp(40px,12vw,58px);}
  .svc-cta p{font-size:15px;}
  .svc-cta-actions{display:grid;grid-template-columns:1fr;}
}

@media (max-width:380px){
  .service-container{padding-inline:14px;}
  .svc-measure-art{min-height:410px;}
  .svc-fabric-band{height:260px;}
}

@media (prefers-reduced-motion:reduce){
  .service-page *, .service-page *::before,.service-page *::after{scroll-behavior:auto !important;transition-duration:.001ms !important;animation-duration:.001ms !important;}
}

/* =========================================================
   CREATIVE SERVICE RESTRUCTURE — 2026-09-15
   Replaces the old left-image/right-copy treatment.
   ========================================================= */
.svc-editorial-fit{padding:145px 0 120px;background:var(--surface);overflow:hidden;}
.svc-editorial-head{max-width:820px;margin:0 auto 72px;text-align:center;}
.svc-editorial-head .service-kicker{justify-content:center;}
.svc-editorial-head .service-kicker::before{display:none;}
.svc-editorial-head .service-lead{max-width:680px;margin:24px auto 0;}
.svc-fit-stage{position:relative;min-height:690px;max-width:1120px;margin:0 auto;display:grid;place-items:center;}
.svc-fit-photo-main{position:relative;width:min(56vw,590px);height:620px;z-index:2;clip-path:polygon(8% 0,100% 7%,92% 100%,0 93%);filter:drop-shadow(0 30px 55px rgba(0,0,0,.18));}
.svc-fit-photo-main img{width:100%;height:100%;object-fit:cover;display:block;}
.svc-fit-orbit{position:absolute;width:730px;height:730px;border:1px solid color-mix(in srgb,var(--gold) 55%,transparent);border-radius:50%;z-index:1;animation:svcOrbit 18s linear infinite;}
.svc-fit-orbit::before,.svc-fit-orbit::after{content:"";position:absolute;border-radius:50%;border:1px dashed color-mix(in srgb,var(--gold) 35%,transparent);}
.svc-fit-orbit::before{inset:70px;}.svc-fit-orbit::after{inset:150px;}
.svc-fit-orbit span{position:absolute;background:var(--surface);padding:8px 12px;font-size:14px;letter-spacing:.12em;font-weight:800;color:var(--text);}
.svc-fit-orbit span:nth-child(1){top:8%;left:10%;}.svc-fit-orbit span:nth-child(2){right:3%;top:46%;}.svc-fit-orbit span:nth-child(3){left:12%;bottom:10%;}
.svc-fit-note{position:absolute;z-index:4;width:270px;padding:22px 22px 24px;background:color-mix(in srgb,var(--bg) 88%,transparent);border:1px solid var(--line);backdrop-filter:blur(12px);box-shadow:0 22px 50px rgba(0,0,0,.10);}
.svc-fit-note-a{left:0;top:18%;}.svc-fit-note-b{right:0;bottom:15%;}
.svc-fit-note b{display:block;font-family:var(--font-display);font-size:14px;color:var(--gold);margin-bottom:12px;}.svc-fit-note strong{display:block;font-family:var(--font-display);font-size:22px;margin-bottom:8px;}.svc-fit-note span{display:block;font-size:15px;line-height:1.65;color:var(--text-soft);}
.svc-fit-metrics{display:grid;grid-template-columns:repeat(3,1fr);max-width:780px;margin:35px auto 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.svc-fit-metrics div{padding:25px;text-align:center;border-right:1px solid var(--line);}.svc-fit-metrics div:last-child{border-right:0;}.svc-fit-metrics strong{display:block;font-family:var(--font-display);font-size:34px;color:var(--gold);}.svc-fit-metrics span{font-size:14px;color:var(--text-soft);}
@keyframes svcOrbit{to{transform:rotate(360deg)}}
.svc-editorial-silhouette{padding:140px 0 120px;background:var(--bg);overflow:hidden;}
.svc-silhouette-intro{max-width:900px;margin:0 auto 70px;text-align:center;}.svc-silhouette-intro .service-kicker{justify-content:center;}.svc-silhouette-intro .service-kicker::before{display:none;}.svc-silhouette-intro .service-copy{max-width:680px;margin:24px auto 0;font-size:16px;line-height:1.8;}
.svc-silhouette-board{display:grid;grid-template-columns:1fr .72fr 1fr;align-items:stretch;max-width:1180px;margin:0 auto;min-height:590px;}
.svc-board-image{margin:0;position:relative;overflow:hidden;min-height:590px;background:var(--surface);}.svc-board-image img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--ease);}.svc-board-image:hover img{transform:scale(1.06);}.svc-board-a{clip-path:polygon(0 0,94% 0,100% 100%,0 94%);}.svc-board-b{clip-path:polygon(6% 0,100% 0,100% 94%,0 100%);}.svc-board-image figcaption{position:absolute;left:22px;right:22px;bottom:20px;display:flex;justify-content:space-between;color:#fff;font-size:14px;letter-spacing:.13em;font-weight:800;text-shadow:0 2px 12px rgba(0,0,0,.35);}
.svc-board-center{position:relative;z-index:3;margin:42px -16px;background:var(--surface);border:1px solid var(--line);box-shadow:0 30px 70px rgba(0,0,0,.13);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:42px 32px;}.svc-board-center>i{font-size:30px;color:var(--gold);margin:20px 0 18px;}.svc-board-number{font-family:var(--font-display);font-size:14px;color:var(--text-soft);letter-spacing:.14em;}.svc-board-center strong{font-family:var(--font-display);font-size:31px;line-height:1.08;}.svc-board-center p{font-size:15px;line-height:1.75;color:var(--text-soft);margin:16px 0 24px;}.svc-board-center .service-btn{font-size:14px;width:auto;}
.svc-silhouette-rail{display:grid;grid-template-columns:repeat(3,1fr);max-width:900px;margin:44px auto 0;border-top:1px solid var(--line);}.svc-silhouette-rail div{display:flex;align-items:center;justify-content:center;gap:12px;padding:22px 15px;border-right:1px solid var(--line);font-size:15px;font-weight:700;}.svc-silhouette-rail div:last-child{border-right:0;}.svc-silhouette-rail i{color:var(--gold);}
html.dark .svc-fit-note,html.dark .svc-board-center{background:#1b2520;}.dark .svc-fit-orbit span{background:#1b2520;}

@media (max-width:1024px){
 .svc-fit-stage{min-height:760px}.svc-fit-orbit{width:610px;height:610px}.svc-fit-photo-main{width:min(58vw,500px);height:590px}.svc-fit-note-a{left:20px}.svc-fit-note-b{right:20px}.svc-silhouette-board{grid-template-columns:1fr 1fr;gap:0}.svc-board-center{grid-column:1/-1;grid-row:2;margin:0;min-height:300px}.svc-board-b{grid-column:2;grid-row:1}.svc-board-a{grid-column:1;grid-row:1}
}
@media (max-width:767px){
 .svc-editorial-fit{padding:90px 0 75px}.svc-editorial-head{margin-bottom:42px}.svc-fit-stage{min-height:690px;display:block}.svc-fit-photo-main{width:88%;height:480px;margin:0 auto;clip-path:polygon(6% 0,100% 5%,94% 100%,0 94%);}.svc-fit-orbit{width:420px;height:420px;left:50%;top:30px;transform:translateX(-50%);opacity:.8;}.svc-fit-orbit span{font-size:14px;padding:6px 8px}.svc-fit-note{width:220px;padding:17px;}.svc-fit-note-a{left:0;top:430px}.svc-fit-note-b{right:0;bottom:auto;top:535px}.svc-fit-note strong{font-size:19px}.svc-fit-note span{font-size:14px}.svc-fit-metrics{grid-template-columns:1fr;max-width:300px;margin-top:8px}.svc-fit-metrics div{border-right:0;border-bottom:1px solid var(--line);padding:17px}.svc-fit-metrics div:last-child{border-bottom:0}.svc-fit-metrics strong{font-size:27px}.svc-editorial-silhouette{padding:85px 0 75px}.svc-silhouette-intro{margin-bottom:42px}.svc-silhouette-board{display:flex;flex-direction:column;min-height:0}.svc-board-image{min-height:390px}.svc-board-a,.svc-board-b{clip-path:none}.svc-board-center{order:2;margin:0;min-height:340px;padding:32px 22px}.svc-board-b{order:3}.svc-board-center strong{font-size:27px}.svc-silhouette-rail{grid-template-columns:1fr;margin-top:28px}.svc-silhouette-rail div{justify-content:flex-start;border-right:0;border-bottom:1px solid var(--line);padding:16px 0}.svc-silhouette-rail div:last-child{border-bottom:0}
}

/* =========================================================
   CREATIVE IMAGE REVEALS — no card/box layouts
   ========================================================= */
.svc-creative-reveal{padding:135px 0 110px;background:
 radial-gradient(circle at 15% 25%,color-mix(in srgb,var(--gold) 9%,transparent),transparent 24%),
 radial-gradient(circle at 85% 75%,color-mix(in srgb,var(--accent) 8%,transparent),transparent 28%),var(--surface);overflow:hidden;}
.svc-creative-wrap,.svc-silhouette-wrap{width:min(100% - 48px,var(--container));margin-inline:auto}
.svc-creative-intro{max-width:760px;margin:0 auto 70px;text-align:center}
.svc-creative-intro .service-kicker,.svc-silhouette-top .service-kicker{justify-content:center}
.svc-creative-intro .service-kicker::before,.svc-silhouette-top .service-kicker::before{display:none}
.svc-creative-intro .service-lead{max-width:650px;margin:22px auto 0}
.svc-reveal-scene{position:relative;max-width:1180px;height:690px;margin:auto}
.svc-reveal-image{position:absolute;left:50%;top:20px;transform:translateX(-50%);width:min(48vw,560px);height:630px;overflow:hidden;z-index:2;clip-path:polygon(9% 0,100% 5%,94% 100%,0 93%);filter:drop-shadow(0 35px 60px rgba(0,0,0,.2))}
.svc-reveal-image img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.06);transition:transform 1.2s var(--ease)}
.svc-reveal-image:hover img{transform:scale(1.13)}
.svc-reveal-image::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,transparent 50%,rgba(0,0,0,.28));pointer-events:none}
.svc-reveal-image figcaption{position:absolute;z-index:2;left:28px;bottom:24px;color:#fff;font-size:14px;letter-spacing:.18em;font-weight:800;text-shadow:0 2px 12px rgba(0,0,0,.45)}
.svc-reveal-copy{position:absolute;z-index:4;width:270px}
.svc-reveal-copy span{display:block;font-size:14px;letter-spacing:.2em;color:var(--gold);font-weight:800;margin-bottom:10px}
.svc-reveal-copy strong{display:block;font-family:var(--font-display);font-size:25px;line-height:1.1}
.svc-reveal-copy p{font-size:15px;line-height:1.7;color:var(--text-soft);margin-top:10px}
.reveal-copy-a{left:2%;top:170px;text-align:right}
.reveal-copy-b{right:2%;bottom:135px}
.svc-reveal-number{position:absolute;left:50%;top:0;transform:translateX(-50%);font-family:var(--font-display);font-size:14px;letter-spacing:.18em;color:var(--gold);z-index:5}
.svc-reveal-word{position:absolute;left:50%;top:43%;transform:translate(-50%,-50%);font-family:var(--font-display);font-size:clamp(80px,13vw,170px);line-height:.8;white-space:nowrap;color:transparent;-webkit-text-stroke:1px color-mix(in srgb,var(--text) 16%,transparent);z-index:1;pointer-events:none}
.svc-measure-stats{display:grid;grid-template-columns:repeat(3,1fr);max-width:820px;margin:0 auto;border-top:1px solid var(--line)}
.svc-measure-stats div{text-align:center;padding:24px 12px}
.svc-measure-stats strong{display:block;font-family:var(--font-display);font-size:32px;color:var(--gold)}
.svc-measure-stats span{font-size:14px;color:var(--text-soft);letter-spacing:.08em}

.svc-creative-silhouette{padding:145px 0 110px;background:var(--bg);overflow:hidden}
.svc-silhouette-top{max-width:800px;text-align:center;margin:0 auto 75px}
.svc-silhouette-top .service-copy{max-width:680px;margin:22px auto 0;font-size:16px;line-height:1.8;color:var(--text-soft)}
.svc-image-reveal-grid{max-width:1180px;min-height:610px;margin:auto;position:relative;display:grid;grid-template-columns:1fr .72fr 1fr;align-items:center;gap:0}
.svc-slice{height:560px;position:relative;overflow:hidden}
.svc-slice img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--ease)}
.svc-slice:hover img{transform:scale(1.08)}
.svc-slice-one{clip-path:polygon(0 4%,92% 0,100% 94%,8% 100%);margin-right:-30px}
.svc-slice-two{clip-path:polygon(8% 0,100% 5%,92% 100%,0 94%);margin-left:-30px}
.svc-slice figcaption{position:absolute;left:25px;bottom:24px;color:#fff;font-size:14px;letter-spacing:.2em;font-weight:800;text-shadow:0 2px 12px rgba(0,0,0,.5)}
.svc-slice-center{position:relative;z-index:3;text-align:center;padding:44px 30px}
.svc-slice-center::before{content:"";position:absolute;width:280px;height:280px;border:1px solid color-mix(in srgb,var(--gold) 45%,transparent);border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%);z-index:-1}
.svc-slice-center i{display:block;color:var(--gold);font-size:27px;margin:24px 0 18px}
.svc-big-index{font-family:var(--font-display);font-size:14px;letter-spacing:.2em;color:var(--text-soft)}
.svc-slice-center strong{display:block;font-family:var(--font-display);font-size:31px;line-height:1.08}
.svc-slice-center p{font-size:15px;line-height:1.75;color:var(--text-soft);margin:16px auto 24px;max-width:300px}
.svc-slice-center .service-btn{font-size:14px}
.svc-word-rail{display:flex;justify-content:center;gap:clamp(24px,6vw,80px);margin-top:45px;color:var(--text-soft);font-size:14px;letter-spacing:.2em}
.svc-word-rail span{position:relative}
.svc-word-rail span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold);position:absolute;left:-14px;top:50%;transform:translateY(-50%)}

.svc-creative-process{padding:145px 0 125px;background:var(--surface)}
.svc-process-head{max-width:760px;margin:0 auto 80px;text-align:center}
.svc-process-head .service-kicker{justify-content:center}.svc-process-head .service-kicker::before{display:none}
.svc-process-head .service-lead{max-width:650px;margin:22px auto 0}
.svc-thread{max-width:920px;margin:auto;position:relative}
.svc-thread-line{position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--line);transform:translateX(-50%);overflow:hidden}
.svc-thread-line span{display:block;height:100%;width:100%;background:var(--gold);transform-origin:top;transform:scaleY(0)}
.svc-thread-step{position:relative;min-height:145px;display:grid;grid-template-columns:80px 1fr 70px;gap:25px;align-items:center;width:50%;padding:24px 0}
.svc-thread-step:nth-child(odd){margin-left:50%;padding-left:50px}
.svc-thread-step:nth-child(even){text-align:right;padding-right:50px;grid-template-columns:70px 1fr 80px}
.svc-thread-step:nth-child(even) i{grid-column:1;grid-row:1}
.svc-thread-step:nth-child(even)>div{grid-column:2}
.svc-thread-no{font-family:var(--font-display);font-size:18px;color:var(--gold)}
.svc-thread-step small{font-size:14px;letter-spacing:.18em;color:var(--gold);font-weight:800}
.svc-thread-step h3{font-family:var(--font-display);font-size:24px;margin:7px 0}
.svc-thread-step p{font-size:15px;line-height:1.7;color:var(--text-soft);margin:0}
.svc-thread-step i{width:58px;height:58px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;color:var(--gold);background:var(--surface)}

.svc-creative-cloth{padding:145px 0 125px;background:
 radial-gradient(circle at 12% 80%,color-mix(in srgb,var(--accent) 9%,transparent),transparent 28%),
 radial-gradient(circle at 90% 20%,color-mix(in srgb,var(--gold) 10%,transparent),transparent 25%),var(--bg);overflow:hidden}
.svc-cloth-head{text-align:center;max-width:760px;margin:0 auto 65px}
.svc-cloth-head .service-kicker{justify-content:center}.svc-cloth-head .service-kicker::before{display:none}
.svc-cloth-head .service-lead{max-width:650px;margin:22px auto 0}
.svc-cloth-stage{height:670px;max-width:1120px;margin:auto;position:relative}
.svc-cloth-image{position:absolute;overflow:hidden;filter:drop-shadow(0 25px 45px rgba(0,0,0,.18))}
.svc-cloth-image img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s var(--ease)}
.svc-cloth-image:hover img{transform:scale(1.08)}
.svc-cloth-image span{position:absolute;left:22px;bottom:20px;color:#fff;font-size:14px;letter-spacing:.16em;font-weight:800;text-shadow:0 2px 12px rgba(0,0,0,.5)}
.cloth-main{left:50%;top:0;transform:translateX(-50%);width:min(46vw,510px);height:560px;clip-path:polygon(6% 0,100% 8%,94% 100%,0 92%)}
.cloth-small{width:230px;height:230px;border-radius:50%}
.cloth-a{left:2%;top:70px}.cloth-b{right:2%;bottom:70px}
.svc-cloth-caption{position:absolute;left:50%;bottom:0;transform:translateX(-50%);text-align:center;z-index:5}
.svc-cloth-caption b{display:block;font-family:var(--font-display);font-size:25px}
.svc-cloth-caption span{display:block;font-size:14px;letter-spacing:.1em;color:var(--text-soft);margin:8px 0 14px}

@media(max-width:1024px){
 .svc-reveal-scene{height:650px}.svc-reveal-image{width:50vw;height:570px}.reveal-copy-a{left:0}.reveal-copy-b{right:0}
 .svc-image-reveal-grid{min-height:560px}.svc-slice{height:510px}
 .svc-thread-step{width:52%}.svc-thread-step:nth-child(odd){margin-left:48%}
 .cloth-small{width:190px;height:190px}
}
@media(max-width:767px){
 .svc-creative-reveal,.svc-creative-silhouette,.svc-creative-process,.svc-creative-cloth{padding:88px 0 78px}
 .svc-creative-wrap,.svc-silhouette-wrap{width:min(100% - 32px,var(--container))}
 .svc-creative-intro,.svc-silhouette-top{margin-bottom:48px}
 .svc-reveal-scene{height:790px}.svc-reveal-image{top:20px;width:88vw;height:500px}.svc-reveal-word{font-size:76px;top:35%;transform:translate(-50%,-50%) rotate(-90deg)}
 .svc-reveal-copy{width:45%;bottom:auto}.reveal-copy-a{left:0;top:555px;text-align:left}.reveal-copy-b{right:0;top:555px}
 .svc-reveal-copy strong{font-size:19px}.svc-reveal-copy p{font-size:14px}
 .svc-reveal-image figcaption{font-size:14px;left:18px}
 .svc-measure-stats{grid-template-columns:1fr;max-width:300px}.svc-measure-stats div{padding:16px;border-bottom:1px solid var(--line)}.svc-measure-stats div:last-child{border-bottom:0}
 .svc-image-reveal-grid{display:block;min-height:0}.svc-slice{height:430px;margin:0!important}.svc-slice-one{clip-path:polygon(0 2%,94% 0,100% 96%,6% 100%)}.svc-slice-two{clip-path:polygon(6% 0,100% 4%,94% 100%,0 96%)}
 .svc-slice-center{padding:60px 10px}.svc-slice-center::before{width:210px;height:210px}.svc-word-rail{flex-wrap:wrap;gap:18px 28px;font-size:14px}
 .svc-thread{padding-left:26px}.svc-thread-line{left:5px;transform:none}.svc-thread-step,.svc-thread-step:nth-child(odd),.svc-thread-step:nth-child(even){width:100%;margin:0;padding:25px 0 25px 25px;text-align:left;display:grid;grid-template-columns:42px 1fr 45px;gap:12px}
 .svc-thread-step:nth-child(even) i{grid-column:3;grid-row:1}.svc-thread-step:nth-child(even)>div{grid-column:2}.svc-thread-step h3{font-size:20px}.svc-thread-step p{font-size:14px}.svc-thread-step i{width:45px;height:45px}
 .svc-cloth-stage{height:780px}.cloth-main{width:88vw;height:500px}.cloth-small{width:170px;height:170px}.cloth-a{left:0;top:410px}.cloth-b{right:0;top:510px}.svc-cloth-caption{bottom:0;width:100%}
}
/* If CDN animation libraries are unavailable on file://, never leave content hidden. */
html.aos-fallback [data-aos]{opacity:1!important;transform:none!important}

/* =========================================================
   FABRICS — SECTION 3
   THE HAND FEEL
   ========================================================= */

.fabric-feel-section {
  position: relative;
  min-height: 100vh;
  padding: 130px 7vw 100px;
  overflow: hidden;
  background: var(--bg, #ffe3e0);
  color: var(--text, #2b1710);
  isolation: isolate;
}

.fabric-feel-bg-word {
  position: absolute;
  top: 12%;
  left: -3%;
  z-index: -1;
  font-size: clamp(90px, 18vw, 270px);
  line-height: .75;
  font-weight: 900;
  letter-spacing: -.08em;
  opacity: .055;
  white-space: nowrap;
  pointer-events: none;
}

.fabric-feel-head {
  display: grid;
  grid-template-columns: .5fr 1.4fr 1fr;
  gap: 40px;
  align-items: end;
  max-width: 1450px;
  margin: 0 auto 90px;
}

.fabric-feel-index {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .15em;
}

.fabric-feel-eyebrow {
  display: inline-block;
  margin-bottom: 15px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .18em;
}

.fabric-feel-heading h2 {
  margin: 0;
  font-size: clamp(48px, 6vw, 88px);
  line-height: .92;
  letter-spacing: -.055em;
  font-weight: 900;
}

.fabric-feel-heading h2 em {
  font-family: Georgia, serif;
  font-weight: 400;
}

.fabric-feel-intro {
  max-width: 400px;
  margin: 0;
  font-size: 16px;
  line-height: 1.8;
  font-weight: 600;
}

/* ---------- STAGE ---------- */

.fabric-feel-stage {
  position: relative;
  max-width: 1250px;
  margin: auto;
  padding: 20px 0;
}

.fabric-feel-thread {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: currentColor;
  opacity: .14;
  transform: translateX(-50%);
}

.fabric-feel-thread span {
  position: absolute;
  inset: 0 0 auto;
  width: 100%;
  height: 0;
  background: currentColor;
  transform-origin: top;
}

/* ---------- ITEMS ---------- */

.fabric-feel-item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 90px;
  align-items: center;
  min-height: 500px;
  margin-bottom: 40px;
}

.fabric-feel-item:nth-child(even) {
  direction: rtl;
}

.fabric-feel-item:nth-child(even) > * {
  direction: ltr;
}

.fabric-feel-number {
  position: absolute;
  top: 35px;
  left: 50%;
  z-index: 4;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: var(--bg, #ffe3e0);
  font-size: 13px;
  font-weight: 900;
  transform: translateX(-50%);
}

/* ---------- IMAGE ---------- */

.fabric-feel-image {
  position: relative;
  height: 430px;
  overflow: hidden;
  clip-path: polygon(
    5% 0,
    94% 3%,
    100% 48%,
    95% 96%,
    7% 100%,
    0 48%
  );
}

.fabric-feel-item:nth-child(3) .fabric-feel-image {
  clip-path: polygon(
    0 7%,
    90% 0,
    100% 50%,
    91% 100%,
    8% 94%,
    0 45%
  );
}

.fabric-feel-item:nth-child(4) .fabric-feel-image {
  clip-path: polygon(
    8% 0,
    100% 8%,
    94% 94%,
    15% 100%,
    0 45%
  );
}

.fabric-feel-item:nth-child(5) .fabric-feel-image {
  clip-path: polygon(
    4% 5%,
    92% 0,
    100% 91%,
    7% 100%,
    0 45%
  );
}

.fabric-feel-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    transparent 35%,
    rgba(255,255,255,.3) 50%,
    transparent 65%
  );
  transform: translateX(-130%);
  pointer-events: none;
}

.fabric-feel-image:hover::after {
  animation: fabricFeelShine 1s ease;
}

@keyframes fabricFeelShine {
  to {
    transform: translateX(130%);
  }
}

.fabric-feel-image img {
  width: 100%;
  height: 115%;
  display: block;
  object-fit: cover;
  transform: scale(1.08);
}

/* ---------- COPY ---------- */

.fabric-feel-copy {
  max-width: 460px;
}

.fabric-feel-copy > span {
  display: block;
  margin-bottom: 13px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .15em;
}

.fabric-feel-copy h3 {
  margin: 0 0 18px;
  font-size: clamp(42px, 5vw, 72px);
  line-height: .95;
  letter-spacing: -.045em;
  font-weight: 900;
}

.fabric-feel-copy p {
  max-width: 410px;
  margin: 0 0 24px;
  font-size: 16px;
  line-height: 1.75;
  font-weight: 600;
}

.fabric-feel-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.fabric-feel-tags span {
  padding: 8px 12px;
  border: 1px solid currentColor;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
}

/* ---------- FOOTER LINE ---------- */

.fabric-feel-footer {
  max-width: 1250px;
  margin: 50px auto 0;
  padding-top: 20px;
  border-top: 1px solid currentColor;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .13em;
}

/* ---------- DARK MODE ---------- */

html.dark .fabric-feel-section {
  background: var(--dark-bg);
  color: #fff8f3;
}

html.dark .fabric-feel-number {
  background: var(--dark-bg);
}
/* ---------- TABLET ---------- */

@media (max-width: 1023px) {

  .fabric-feel-section {
    padding: 100px 5vw 80px;
  }

  .fabric-feel-head {
    grid-template-columns: 1fr 1fr;
  }

  .fabric-feel-intro {
    grid-column: 2;
  }

  .fabric-feel-item {
    gap: 50px;
    min-height: 420px;
  }

  .fabric-feel-image {
    height: 350px;
  }

  .fabric-feel-thread {
    left: 50%;
  }
}

/* ---------- MOBILE ---------- */

@media (max-width: 767px) {

  .fabric-feel-section {
    min-height: auto;
    padding: 80px 20px 60px;
  }

  .fabric-feel-bg-word {
    top: 8%;
    left: -10%;
    font-size: 100px;
  }

  .fabric-feel-head {
    display: block;
    margin-bottom: 55px;
  }

  .fabric-feel-index {
    margin-bottom: 28px;
  }

  .fabric-feel-heading h2 {
    font-size: clamp(42px, 13vw, 62px);
  }

  .fabric-feel-intro {
    margin-top: 25px;
    font-size: 15px;
    line-height: 1.7;
  }

  .fabric-feel-stage {
    padding: 0;
  }

  .fabric-feel-thread {
    display: none;
  }

  .fabric-feel-item,
  .fabric-feel-item:nth-child(even) {
    display: flex;
    flex-direction: column;
    direction: ltr;
    gap: 25px;
    min-height: auto;
    margin-bottom: 75px;
    align-items: stretch;
  }

  .fabric-feel-item:nth-child(even) > * {
    direction: ltr;
  }

  .fabric-feel-number {
    top: -14px;
    left: 20px;
    width: 40px;
    height: 40px;
    font-size: 12px;
    transform: none;
  }

  .fabric-feel-image {
    height: 330px;
    width: 100%;
  }

  .fabric-feel-copy {
    max-width: none;
  }

  .fabric-feel-copy h3 {
    font-size: 48px;
  }

  .fabric-feel-copy p {
    font-size: 15px;
  }

  .fabric-feel-footer {
    display: block;
    line-height: 2;
  }

  .fabric-feel-footer span {
    display: block;
  }

}

/* =========================================================
   FABRICS — SECTION 04
   THE FABRIC EDIT
========================================================= */

.fabric-s4 {
  position: relative;
  min-height: 100vh;
  padding: 120px 5vw 70px;
  overflow: hidden;
  isolation: isolate;
  background: var(--bg, #ffe3e0);
  color: var(--text, #2b1710);
}

.dark .fabric-s4 {
  background: var(--dark-bg);
  color: #fff8f5;
}

/* ---------- BACKGROUND ---------- */

.fabric-s4-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.fabric-s4-glow {
  position: absolute;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .18;
}

.fabric-s4-glow-a {
  left: -150px;
  top: 25%;
  background: currentColor;
}

.fabric-s4-glow-b {
  right: -180px;
  bottom: 5%;
  background: currentColor;
  opacity: .10;
}

.fabric-s4-thread {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .13;
  overflow: visible;
}

.fabric-s4-thread path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  stroke-dasharray: 8 12;
}


/* ---------- MAIN WRAP ---------- */

.fabric-s4-wrap {
  position: relative;
  max-width: 1450px;
  margin: 0 auto;
}


/* ---------- HEADER ---------- */

.fabric-s4-head {
  display: grid;
  grid-template-columns: 150px minmax(300px, 1fr) 150px;
  align-items: end;
  gap: 40px;
  margin-bottom: 70px;
}

.fabric-s4-index {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.fabric-s4-index span {
  font-size: clamp(42px, 5vw, 72px);
  font-weight: 800;
  line-height: .8;
  letter-spacing: -.06em;
}

.fabric-s4-index i {
  width: 45px;
  height: 1px;
  background: currentColor;
  opacity: .5;
}

.fabric-s4-index small {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  opacity: .7;
}

.fabric-s4-heading {
  max-width: 720px;
}

.fabric-s4-kicker {
  display: block;
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .2em;
}

.fabric-s4-heading h2 {
  margin: 0;
  font-size: clamp(46px, 6vw, 86px);
  line-height: .9;
  letter-spacing: -.055em;
  font-weight: 800;
}

.fabric-s4-heading h2 em {
  font-family: Georgia, serif;
  font-weight: 400;
}

.fabric-s4-heading p {
  max-width: 580px;
  margin: 25px 0 0;
  font-size: 15px;
  line-height: 1.75;
  font-weight: 600;
  opacity: .78;
}

.fabric-s4-mark {
  text-align: right;
}

.fabric-s4-mark span {
  display: block;
  font-family: Georgia, serif;
  font-size: 50px;
  line-height: .8;
}

.fabric-s4-mark small {
  display: block;
  margin-top: 12px;
  font-size: 10px;
  letter-spacing: .2em;
  font-weight: 800;
}


/* ---------- MAIN STAGE ---------- */

.fabric-s4-stage {
  position: relative;
  min-height: 610px;
  display: grid;
  grid-template-columns: minmax(190px, 1fr) minmax(380px, 560px) minmax(190px, 1fr);
  align-items: center;
  gap: 50px;
}


/* ---------- INFORMATION ---------- */

.fabric-s4-info {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.fabric-s4-info-left {
  align-items: flex-end;
}

.fabric-s4-info-right {
  align-items: flex-start;
}

.fabric-s4-note {
  width: min(260px, 100%);
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 17px 0;
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  border-color: color-mix(in srgb, currentColor 22%, transparent);
}

.fabric-s4-note-no {
  font-size: 11px;
  font-weight: 800;
  opacity: .55;
}

.fabric-s4-note div {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.fabric-s4-note strong {
  font-size: 14px;
  letter-spacing: .13em;
}

.fabric-s4-note small {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  opacity: .6;
}

.fabric-s4-side-copy {
  max-width: 230px;
  margin-top: 30px;
}

.fabric-s4-side-copy span,
.fabric-s4-material span {
  display: block;
  margin-bottom: 9px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
}

.fabric-s4-side-copy p {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  font-weight: 600;
  opacity: .7;
}

.fabric-s4-material {
  margin-top: 35px;
}

.fabric-s4-material strong {
  display: block;
  font-size: 27px;
  line-height: .95;
  letter-spacing: -.03em;
}


/* ---------- CENTRAL ART ---------- */

.fabric-s4-art {
  position: relative;
  height: 610px;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1000px;
}

.fabric-s4-art-shadow {
  position: absolute;
  width: 70%;
  height: 75%;
  border-radius: 50%;
  background: currentColor;
  filter: blur(70px);
  opacity: .10;
}

.fabric-s4-image-wrap {
  position: relative;
  width: 82%;
  height: 88%;
  overflow: visible;
  transform: rotate(-3deg);
  clip-path: polygon(
    7% 4%,
    89% 0,
    97% 10%,
    92% 91%,
    82% 98%,
    10% 94%,
    0 83%,
    4% 14%
  );
}

.fabric-s4-image-inner {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #222;
}

.fabric-s4-image-inner img {
  width: 100%;
  height: 115%;
  object-fit: cover;
  display: block;
  transform: scale(1.08);
  will-change: transform;
}


/* ---------- STITCH DETAILS ---------- */

.fabric-s4-stitch {
  position: absolute;
  width: 85px;
  height: 85px;
  border: 1px dashed currentColor;
  border-radius: 50%;
  opacity: .65;
  z-index: 4;
}

.stitch-a {
  top: -25px;
  right: 5px;
}

.stitch-b {
  bottom: -20px;
  left: -10px;
  width: 65px;
  height: 65px;
}


/* ---------- FLOATING LABEL ---------- */

.fabric-s4-floating-label {
  position: absolute;
  right: 2%;
  bottom: 8%;
  z-index: 5;
  padding: 13px 16px;
  background: var(--bg, #ffe3e0);
  border: 1px solid currentColor;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transform: rotate(4deg);
}

.dark .fabric-s4-floating-label {
  background: var(--dark-bg);
}

.fabric-s4-floating-label span {
  font-size: 9px;
  letter-spacing: .18em;
  font-weight: 800;
}

.fabric-s4-floating-label strong {
  font-size: 12px;
}


/* ---------- ROUND LABEL ---------- */

.fabric-s4-round-label {
  position: absolute;
  left: -30px;
  top: 30px;
  width: 100px;
  height: 100px;
  z-index: 5;
  display: grid;
  place-items: center;
}

.fabric-s4-round-label svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: fabricS4Rotate 18s linear infinite;
}

.fabric-s4-round-label text {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 2px;
  fill: currentColor;
}

.fabric-s4-round-label > span {
  font-size: 22px;
}

@keyframes fabricS4Rotate {
  to {
    transform: rotate(360deg);
  }
}


/* ---------- BOTTOM ---------- */

.fabric-s4-bottom {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  margin-top: 50px;
  padding-top: 22px;
  border-top: 1px solid currentColor;
  opacity: .75;
}

.fabric-s4-bottom span {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .13em;
}


/* =========================================================
   FABRIC S4 — TABLET
========================================================= */

@media (max-width: 1023px) {

  .fabric-s4 {
    padding: 100px 5vw 60px;
  }

  .fabric-s4-head {
    grid-template-columns: 90px 1fr;
    gap: 25px;
  }

  .fabric-s4-mark {
    display: none;
  }

  .fabric-s4-stage {
    grid-template-columns: 1fr;
    min-height: auto;
    gap: 45px;
  }

  .fabric-s4-art {
    order: 1;
    height: 560px;
  }

  .fabric-s4-info-left {
    order: 2;
    align-items: flex-start;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .fabric-s4-info-right {
    order: 3;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .fabric-s4-side-copy,
  .fabric-s4-material {
    margin-top: 0;
  }

  .fabric-s4-bottom {
    margin-top: 40px;
  }
}


/* =========================================================
   FABRIC S4 — MOBILE
========================================================= */

@media (max-width: 767px) {

  .fabric-s4 {
    padding: 80px 20px 45px;
  }

  .fabric-s4-head {
    display: block;
    margin-bottom: 45px;
  }

  .fabric-s4-index {
    margin-bottom: 28px;
  }

  .fabric-s4-index span {
    font-size: 52px;
  }

  .fabric-s4-heading h2 {
    font-size: clamp(43px, 14vw, 65px);
  }

  .fabric-s4-heading p {
    font-size: 14px;
    line-height: 1.65;
  }

  .fabric-s4-stage {
    gap: 30px;
  }

  .fabric-s4-art {
    height: 430px;
  }

  .fabric-s4-image-wrap {
    width: 86%;
    height: 86%;
  }

  .fabric-s4-round-label {
    width: 75px;
    height: 75px;
    left: -3px;
    top: 15px;
  }

  .fabric-s4-floating-label {
    right: -2px;
    bottom: 5%;
  }

  .fabric-s4-info-left,
  .fabric-s4-info-right {
    display: flex;
    align-items: stretch;
  }

  .fabric-s4-note {
    width: 100%;
  }

  .fabric-s4-side-copy,
  .fabric-s4-material {
    max-width: 100%;
    width: 100%;
    margin-top: 5px;
  }

  .fabric-s4-bottom {
    grid-template-columns: 1fr 1fr;
    row-gap: 15px;
    margin-top: 35px;
  }

  .fabric-s4-bottom span {
    font-size: 9px;
  }

  .fabric-s4-glow {
    width: 240px;
    height: 240px;
    filter: blur(70px);
  }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .fabric-s4-round-label svg {
    animation: none;
  }

  .fabric-s4-image-inner img {
    transform: scale(1.04);
  }
}
/* =========================================================
   FABRICS — SECTION 5
   FABRIC STORIES
========================================================= */

.fabric-s5 {
    position: relative;
    min-height: 100vh;
    padding: 120px 6vw 90px;
    overflow: hidden;
    isolation: isolate;

    background: var(--bg, #ffe3e0);
    color: var(--text, #2b1710);
}


/* ---------- BACKGROUND ---------- */

.fabric-s5-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    pointer-events: none;
}

.fabric-s5-orb {
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .13;
    background: currentColor;
    animation: fabricOrbMove 12s ease-in-out infinite alternate;
}

.fabric-s5-orb.orb-one {
    top: 8%;
    left: -180px;
}

.fabric-s5-orb.orb-two {
    right: -180px;
    bottom: 8%;
    animation-delay: -5s;
}

@keyframes fabricOrbMove {
    from {
        transform: translate3d(0, 0, 0) scale(1);
    }

    to {
        transform: translate3d(70px, -35px, 0) scale(1.15);
    }
}


/* ---------- GRAIN ---------- */

.fabric-s5-grain {
    position: absolute;
    inset: 0;
    opacity: .045;
    pointer-events: none;

    background-image:
        repeating-linear-gradient(
            0deg,
            transparent 0,
            transparent 2px,
            currentColor 3px,
            transparent 4px
        ),
        repeating-linear-gradient(
            90deg,
            transparent 0,
            transparent 3px,
            currentColor 4px,
            transparent 5px
        );

    mix-blend-mode: multiply;
}


/* ---------- WRAP ---------- */

.fabric-s5-wrap {
    width: min(1400px, 100%);
    margin: 0 auto;
}


/* ---------- HEADER ---------- */

.fabric-s5-header {
    display: grid;
    grid-template-columns: 170px 1fr;
    gap: 60px;
    align-items: end;
    margin-bottom: 110px;
}

.fabric-s5-index {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.fabric-s5-index span {
    font-size: 70px;
    line-height: .8;
    font-weight: 900;
    letter-spacing: -.07em;
}

.fabric-s5-index i {
    width: 48px;
    height: 1px;
    background: currentColor;
    opacity: .45;
}

.fabric-s5-index small {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .16em;
}

.fabric-s5-title {
    max-width: 850px;
}

.fabric-s5-kicker {
    display: block;
    margin-bottom: 16px;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .2em;
}

.fabric-s5-title h2 {
    margin: 0;
    font-size: clamp(55px, 8vw, 115px);
    line-height: .82;
    letter-spacing: -.065em;
    font-weight: 900;
}

.fabric-s5-title h2 em {
    font-family: Georgia, serif;
    font-weight: 400;
}

.fabric-s5-title p {
    max-width: 510px;
    margin: 30px 0 0;
    font-size: 16px;
    line-height: 1.8;
    font-weight: 600;
}


/* =========================================================
   STORY
========================================================= */

.fabric-s5-story {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 9vw;
    align-items: center;
    margin-bottom: 150px;
}

.fabric-s5-story.story-reverse {
    grid-template-columns: .9fr 1.1fr;
}

.fabric-s5-story.story-reverse .fabric-s5-visual {
    order: 2;
}

.fabric-s5-story.story-reverse .fabric-s5-content {
    order: 1;
}


/* =========================================================
   IMAGE AREA
========================================================= */

.fabric-s5-visual {
    position: relative;
    min-height: 570px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fabric-s5-image-shape {
    position: relative;
    width: min(580px, 100%);
    height: 520px;
    overflow: hidden;

    /*
       TOP HALF-CIRCLE + SOFT LOWER SHAPE
    */
    clip-path: polygon(
        0 17%,
        7% 8%,
        18% 3%,
        32% 0,
        50% 0,
        68% 0,
        82% 4%,
        93% 11%,
        100% 20%,
        100% 82%,
        96% 91%,
        88% 97%,
        75% 100%,
        25% 100%,
        12% 97%,
        4% 91%,
        0 82%
    );
}


/* BIG HALF CIRCLE */

.fabric-s5-image-shape::before {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    left: 50%;
    top: -90px;
    transform: translateX(-50%);
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.65);
    z-index: 4;
    pointer-events: none;
}


/* IMAGE */

.fabric-s5-image-shape img {
    width: 100%;
    height: 115%;
    object-fit: cover;
    display: block;

    transform: scale(1.08);
    transition:
        transform 1.2s cubic-bezier(.2,.7,.2,1),
        filter .7s ease;
}


/* IMAGE OVERLAY */

.fabric-s5-image-shape::after {
    content: "";
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            120deg,
            transparent 25%,
            rgba(255,255,255,.28) 50%,
            transparent 75%
        );

    transform: translateX(-120%);
    transition: transform 1s ease;
    pointer-events: none;
}

.fabric-s5-visual:hover .fabric-s5-image-shape::after {
    transform: translateX(120%);
}

.fabric-s5-visual:hover img {
    transform: scale(1.15);
    filter: saturate(1.08);
}


/* ---------- FLOATING LABEL ---------- */

.fabric-s5-floating {
    position: absolute;
    right: 30px;
    bottom: 35px;
    z-index: 5;

    padding: 13px 17px;

    background: rgba(255,255,255,.78);
    color: #2b1710;

    font-size: 10px;
    font-weight: 900;
    letter-spacing: .18em;

    transform: rotate(-4deg);
    backdrop-filter: blur(8px);
}


/* ---------- NUMBER ---------- */

.fabric-s5-image-number {
    position: absolute;
    left: -20px;
    top: 50%;
    z-index: 6;

    width: 72px;
    height: 72px;

    display: grid;
    place-items: center;

    border-radius: 50%;
    border: 1px solid currentColor;

    background: var(--bg, #ffe3e0);

    font-size: 17px;
    font-weight: 900;

    transform: translateY(-50%);
}


/* =========================================================
   CONTENT
========================================================= */

.fabric-s5-content {
    max-width: 520px;
}

.fabric-s5-label {
    display: block;
    margin-bottom: 18px;

    font-size: 12px;
    font-weight: 900;
    letter-spacing: .18em;
}

.fabric-s5-content h3 {
    margin: 0;

    font-size: clamp(48px, 6vw, 85px);
    line-height: .88;
    letter-spacing: -.055em;
    font-weight: 900;
}

.fabric-s5-content h3 em {
    display: block;

    font-family: Georgia, serif;
    font-weight: 400;
    margin-left: 55px;
}

.fabric-s5-content p {
    max-width: 440px;
    margin: 30px 0 35px;

    font-size: 16px;
    line-height: 1.8;
    font-weight: 600;
}


/* ---------- DETAILS ---------- */

.fabric-s5-details {
    display: flex;
    gap: 35px;

    padding: 20px 0;

    border-top: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
}

.fabric-s5-details div {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.fabric-s5-details strong {
    font-size: 18px;
    font-weight: 900;
}

.fabric-s5-details span {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .13em;
}


/* ---------- LINK ---------- */

.fabric-s5-link {
    display: inline-flex;
    align-items: center;
    gap: 16px;

    margin-top: 30px;

    color: inherit;
    text-decoration: none;

    font-size: 12px;
    font-weight: 900;
    letter-spacing: .13em;
}

.fabric-s5-link i {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    border: 1px solid currentColor;
    border-radius: 50%;

    transition:
        transform .4s ease,
        background .4s ease;
}

.fabric-s5-link:hover i {
    transform: translateX(7px);
}


/* =========================================================
   MARQUEE
========================================================= */

.fabric-s5-marquee {
    overflow: hidden;
    padding: 25px 0;

    border-top: 1px solid currentColor;
    border-bottom: 1px solid currentColor;

    white-space: nowrap;
}

.fabric-s5-marquee div {
    display: inline-block;

    font-size: clamp(18px, 2vw, 26px);
    font-weight: 900;
    letter-spacing: .12em;

    animation: fabricMarquee 18s linear infinite;
}

.fabric-s5-marquee span {
    margin: 0 25px;
    font-family: Georgia, serif;
}

@keyframes fabricMarquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}


/* =========================================================
   DARK MODE
========================================================= */

html.dark .fabric-s5 {
    background: var(--bg-dark);
    color: var(--text-dark);
}

html.dark .fabric-s5-floating {
    background: color-mix(in srgb, var(--bg-dark) 85%, transparent);
    color: var(--text-dark);
}

html.dark .fabric-s5-image-number {
    background: var(--bg-dark);
}

html.dark .fabric-s5-grain {
    opacity: .025;
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1023px) {

    .fabric-s5 {
        padding: 100px 5vw 70px;
    }

    .fabric-s5-header {
        grid-template-columns: 100px 1fr;
        gap: 35px;
        margin-bottom: 80px;
    }

    .fabric-s5-index span {
        font-size: 55px;
    }

    .fabric-s5-story,
    .fabric-s5-story.story-reverse {
        grid-template-columns: 1fr;
        gap: 50px;
        margin-bottom: 100px;
    }

    .fabric-s5-story.story-reverse .fabric-s5-visual,
    .fabric-s5-story.story-reverse .fabric-s5-content {
        order: initial;
    }

    .fabric-s5-visual {
        min-height: 480px;
    }

    .fabric-s5-image-shape {
        height: 450px;
        width: min(600px, 90%);
    }

    .fabric-s5-content {
        max-width: 650px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .fabric-s5 {
        padding: 75px 20px 55px;
    }

    .fabric-s5-header {
        display: block;
        margin-bottom: 70px;
    }

    .fabric-s5-index {
        margin-bottom: 30px;
    }

    .fabric-s5-title h2 {
        font-size: clamp(48px, 15vw, 70px);
    }

    .fabric-s5-title p {
        font-size: 15px;
    }

    .fabric-s5-story,
    .fabric-s5-story.story-reverse {
        gap: 35px;
        margin-bottom: 90px;
    }

    .fabric-s5-visual {
        min-height: 370px;
    }

    .fabric-s5-image-shape {
        width: 100%;
        height: 350px;
    }

    .fabric-s5-image-number {
        left: 5px;
        top: 15px;
        width: 55px;
        height: 55px;
        font-size: 14px;
        transform: none;
    }

    .fabric-s5-floating {
        right: 18px;
        bottom: 20px;
        font-size: 9px;
    }

    .fabric-s5-content h3 {
        font-size: 48px;
    }

    .fabric-s5-content h3 em {
        margin-left: 25px;
    }

    .fabric-s5-content p {
        font-size: 15px;
    }

    .fabric-s5-details {
        gap: 18px;
        justify-content: space-between;
    }

    .fabric-s5-details span {
        font-size: 9px;
    }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .fabric-s5-orb,
    .fabric-s5-marquee div {
        animation: none;
    }

    .fabric-s5-image-shape img {
        transition: none;
    }
}

/* =========================================================
   FABRICS — SECTION 6
   FABRIC FLOW
========================================================= */

.fabric-s6 {
    position: relative;
    min-height: 100vh;
    padding: 110px 6vw 75px;
    overflow: hidden;
    isolation: isolate;
    background: var(--surface, #eee3d5);
    color: var(--text, #2b1710);
}

/* =========================================================
   BACKGROUND
========================================================= */

.fabric-s6::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    opacity: .055;
    background:
        linear-gradient(90deg, transparent 49.8%, currentColor 50%, transparent 50.2%),
        linear-gradient(0deg, transparent 49.8%, currentColor 50%, transparent 50.2%);
    background-size: 80px 80px;
}

.fabric-s6::after {
    content: "FABRIC";
    position: absolute;
    right: -4vw;
    bottom: -5vw;
    z-index: -1;
    font-size: clamp(130px, 22vw, 360px);
    line-height: .7;
    font-weight: 900;
    letter-spacing: -.08em;
    opacity: .035;
    pointer-events: none;
}

/* =========================================================
   WRAPPER
========================================================= */

.fabric-s6-wrap {
    width: min(1450px, 100%);
    margin: 0 auto;
}

/* =========================================================
   HEADER
========================================================= */

.fabric-s6-head {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 40px;
    margin-bottom: 65px;
}

.fabric-s6-number {
    font-size: 68px;
    line-height: .8;
    font-weight: 900;
    letter-spacing: -.07em;
}

.fabric-s6-kicker {
    display: block;
    margin-bottom: 15px;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .2em;
}

.fabric-s6-head h2 {
    margin: 0;
    max-width: 850px;
    font-size: clamp(52px, 7vw, 105px);
    line-height: .86;
    letter-spacing: -.065em;
    font-weight: 900;
}

.fabric-s6-head h2 em {
    font-family: Georgia, serif;
    font-weight: 400;
}

.fabric-s6-head p {
    max-width: 520px;
    margin: 25px 0 0;
    font-size: 16px;
    line-height: 1.75;
    font-weight: 600;
}

/* =========================================================
   MAIN FABRIC DISPLAY
========================================================= */

.fabric-s6-display {
    position: relative;
    width: 100%;
}

/* =========================================================
   IMAGE FRAME
========================================================= */

.fabric-s6-main-image {
    position: relative;
    width: 100%;
    height: min(62vh, 650px);
    min-height: 430px;
    overflow: hidden;
    background: #30231e;

    clip-path: polygon(
        0 5%,
        8% 1%,
        22% 3%,
        38% 0,
        56% 3%,
        72% 1%,
        88% 4%,
        100% 0,
        98% 92%,
        88% 96%,
        70% 94%,
        53% 100%,
        36% 96%,
        19% 98%,
        4% 94%
    );
}

.fabric-s6-main-image img {
    width: 100%;
    height: 115%;
    object-fit: cover;
    display: block;
    transform: scale(1.06);
    transition:
        transform 1.2s cubic-bezier(.2,.7,.2,1),
        filter .8s ease;
}

.fabric-s6-display:hover .fabric-s6-main-image img {
    transform: scale(1.12);
    filter: saturate(1.08);
}

/* =========================================================
   IMAGE OVERLAY
========================================================= */

.fabric-s6-main-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            transparent 45%,
            rgba(0,0,0,.58) 100%
        );
    pointer-events: none;
}

/* =========================================================
   IMAGE LABEL
========================================================= */

.fabric-s6-image-label {
    position: absolute;
    left: 35px;
    bottom: 42px;
    z-index: 3;
    color: #fff;
}

.fabric-s6-image-label span {
    display: block;
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .18em;
}

.fabric-s6-image-label strong {
    display: block;
    font-size: clamp(42px, 6vw, 82px);
    line-height: .85;
    font-weight: 900;
    letter-spacing: -.06em;
}

/* =========================================================
   IMAGE INDEX
========================================================= */

.fabric-s6-image-index {
    position: absolute;
    top: 28px;
    right: 30px;
    z-index: 3;

    width: 58px;
    height: 58px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(255,255,255,.7);
    border-radius: 50%;

    color: #fff;
    background: rgba(0,0,0,.18);

    backdrop-filter: blur(8px);

    font-size: 12px;
    font-weight: 900;
}

/* =========================================================
   FABRIC SELECTOR
========================================================= */

.fabric-s6-selector {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-bottom: 1px solid currentColor;
}

.fabric-s6-option {
    position: relative;
    padding: 25px 15px 22px;
    cursor: pointer;
    color: inherit;
    background: transparent;
    border: 0;
    text-align: left;
}

.fabric-s6-option::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .5s ease;
}

.fabric-s6-option.active::before,
.fabric-s6-option:hover::before {
    transform: scaleX(1);
}

.fabric-s6-option-number {
    display: block;
    margin-bottom: 13px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .16em;
    opacity: .7;
}

.fabric-s6-option strong {
    display: block;
    margin-bottom: 7px;
    font-size: 23px;
    line-height: 1;
    font-weight: 900;
}

.fabric-s6-option span {
    display: block;
    font-size: 13px;
    line-height: 1.5;
    font-weight: 600;
}

/* =========================================================
   MATERIAL STRIP
========================================================= */

.fabric-s6-material {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    padding: 22px 0 0;
}

.fabric-s6-material-title {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .18em;
}

.fabric-s6-material-items {
    display: flex;
    align-items: center;
    gap: 28px;
}

.fabric-s6-material-items span {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
}

.fabric-s6-material-items i {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
}

/* =========================================================
   ACTIVE IMAGE TRANSITION
========================================================= */

.fabric-s6-main-image.is-changing img {
    animation: fabricImageChange .7s ease both;
}

@keyframes fabricImageChange {
    0% {
        opacity: .3;
        transform: scale(1.13) translateX(25px);
    }

    100% {
        opacity: 1;
        transform: scale(1.06) translateX(0);
    }
}

/* =========================================================
   DARK MODE
   SAME THEME SYSTEM AS SECTION 1
========================================================= */

html.dark .fabric-s6 {
    background: var(--bg-dark);
    color: var(--text-dark);
}

html.dark .fabric-s6-circle {
    background: var(--bg-dark);
    color: var(--text-dark);
}

html.dark .fabric-s6-center {
    background: transparent;
    color: var(--text-dark);
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1023px) {

    .fabric-s6 {
        padding: 95px 5vw 65px;
    }

    .fabric-s6-head {
        grid-template-columns: 80px 1fr;
        gap: 30px;
        margin-bottom: 55px;
    }

    .fabric-s6-number {
        font-size: 55px;
    }

    .fabric-s6-head h2 {
        font-size: clamp(48px, 8vw, 80px);
    }

    .fabric-s6-main-image {
        height: 520px;
        min-height: 0;
    }

    .fabric-s6-option {
        padding: 22px 12px;
    }

    .fabric-s6-option strong {
        font-size: 20px;
    }

    .fabric-s6-material {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .fabric-s6 {
        padding: 70px 20px 55px;
    }

    .fabric-s6-head {
        display: block;
        margin-bottom: 40px;
    }

    .fabric-s6-number {
        margin-bottom: 25px;
        font-size: 48px;
    }

    .fabric-s6-kicker {
        font-size: 11px;
        margin-bottom: 12px;
    }

    .fabric-s6-head h2 {
        font-size: clamp(45px, 14vw, 68px);
        line-height: .88;
    }

    .fabric-s6-head p {
        margin-top: 22px;
        font-size: 15px;
        line-height: 1.7;
    }

    .fabric-s6-main-image {
        height: 410px;
        min-height: 0;

        clip-path: polygon(
            0 3%,
            18% 0,
            38% 2%,
            60% 0,
            82% 2%,
            100% 0,
            97% 96%,
            78% 100%,
            58% 97%,
            38% 100%,
            18% 97%,
            3% 100%
        );
    }

    .fabric-s6-image-label {
        left: 22px;
        bottom: 30px;
    }

    .fabric-s6-image-label span {
        font-size: 10px;
    }

    .fabric-s6-image-label strong {
        font-size: 48px;
    }

    .fabric-s6-image-index {
        top: 20px;
        right: 18px;
        width: 48px;
        height: 48px;
        font-size: 11px;
    }

    .fabric-s6-selector {
        grid-template-columns: 1fr 1fr;
    }

    .fabric-s6-option {
        padding: 20px 10px;
        border-bottom: 1px solid currentColor;
    }

    .fabric-s6-option:nth-child(odd) {
        border-right: 1px solid currentColor;
    }

    .fabric-s6-option strong {
        font-size: 21px;
    }

    .fabric-s6-option span {
        font-size: 13px;
    }

    .fabric-s6-material {
        gap: 15px;
        padding-top: 20px;
    }

    .fabric-s6-material-items {
        flex-wrap: wrap;
        gap: 12px;
    }

    .fabric-s6-material-items span {
        font-size: 10px;
    }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .fabric-s6-main-image img,
    .fabric-s6-option::before {
        transition: none;
    }

    .fabric-s6-main-image.is-changing img {
        animation: none;
    }
}
/* =========================================================
   FABRICS SECTION 6 — INTERACTIVE MATERIAL SELECTOR
========================================================= */

.fabric-s6-interactive {
    display: grid;
    grid-template-columns: 260px minmax(360px, 520px) 1fr;
    align-items: center;
    gap: 70px;
    min-height: 600px;
}


/* =========================================================
   MATERIAL LIST
========================================================= */

.fabric-s6-list {
    display: flex;
    flex-direction: column;
    border-top: 1px solid currentColor;
}

.fabric-s6-item {
    position: relative;
    display: grid;
    grid-template-columns: 45px 1fr 30px;
    align-items: center;
    gap: 15px;

    width: 100%;
    min-height: 82px;

    padding: 0;

    border: 0;
    border-bottom: 1px solid currentColor;

    background: transparent;
    color: inherit;

    text-align: left;
    cursor: pointer;

    transition:
        padding .4s ease,
        opacity .4s ease;
}

.fabric-s6-item span {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .12em;
}

.fabric-s6-item strong {
    font-size: 24px;
    font-weight: 900;
}

.fabric-s6-item i {
    font-size: 13px;
    opacity: .4;

    transform: translateX(-8px);

    transition:
        transform .4s ease,
        opacity .4s ease;
}

.fabric-s6-item:hover,
.fabric-s6-item.active {
    padding-left: 12px;
}

.fabric-s6-item:hover i,
.fabric-s6-item.active i {
    opacity: 1;
    transform: translateX(0);
}


/* =========================================================
   IMAGE
========================================================= */

.fabric-s6-showcase {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.fabric-s6-image {
    position: relative;

    width: min(100%, 460px);
    height: 520px;

    overflow: hidden;

    clip-path: polygon(
        8% 4%,
        88% 0,
        100% 13%,
        96% 88%,
        82% 100%,
        13% 95%,
        0 80%,
        4% 16%
    );
}

.fabric-s6-image::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            135deg,
            transparent 45%,
            rgba(255,255,255,.16) 50%,
            transparent 55%
        );

    transform: translateX(-120%);
    transition: transform .9s ease;
}

.fabric-s6-showcase:hover .fabric-s6-image::after {
    transform: translateX(120%);
}

.fabric-s6-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    display: block;

    transform: scale(1.04);

    transition:
        opacity .25s ease,
        transform 1s cubic-bezier(.2,.7,.2,1);
}

.fabric-s6-image img.is-changing {
    opacity: 0;
    transform: scale(1.12);
}


/* =========================================================
   NUMBER BADGE
========================================================= */

.fabric-s6-number-badge {
    position: absolute;

    right: -18px;
    top: 30px;

    width: 78px;
    height: 78px;

    display: grid;
    place-items: center;

    border: 1px solid currentColor;
    border-radius: 50%;

    background: var(--surface, #eee3d5);

    z-index: 3;
}

.fabric-s6-number-badge span {
    font-size: 15px;
    font-weight: 900;
}


/* =========================================================
   INFORMATION
========================================================= */

.fabric-s6-info {
    max-width: 430px;
}

.fabric-s6-info > span {
    display: block;

    margin-bottom: 20px;

    font-size: 11px;
    font-weight: 900;

    letter-spacing: .18em;
}

.fabric-s6-info h3 {
    margin: 0;

    font-size: clamp(55px, 7vw, 100px);
    line-height: .82;

    font-weight: 900;
    letter-spacing: -.07em;

    transition:
        opacity .25s ease,
        transform .4s ease;
}

.fabric-s6-info h3.is-changing,
.fabric-s6-info p.is-changing {
    opacity: 0;
    transform: translateY(15px);
}

.fabric-s6-info p {
    max-width: 400px;

    margin: 30px 0 40px;

    font-size: 16px;
    line-height: 1.8;

    font-weight: 600;

    transition:
        opacity .25s ease,
        transform .4s ease;
}


/* =========================================================
   META
========================================================= */

.fabric-s6-meta {
    display: flex;

    border-top: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
}

.fabric-s6-meta div {
    flex: 1;

    padding: 18px 15px;

    border-right: 1px solid currentColor;
}

.fabric-s6-meta div:last-child {
    border-right: 0;
}

.fabric-s6-meta strong {
    display: block;

    margin-bottom: 7px;

    font-size: 16px;
    font-weight: 900;
}

.fabric-s6-meta span {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .13em;
}


/* =========================================================
   DARK MODE
========================================================= */

html.dark .fabric-s6 {
    background: var(--bg-dark);
    color: var(--text-dark);
}

html.dark .fabric-s6-circle {
    background: var(--bg-dark);
    color: var(--text-dark);
}

html.dark .fabric-s6-center {
    background: transparent;
    color: var(--text-dark);
}

html.dark .fabric-s6-number-badge {
    background: #241713;
    color: #fff8f3;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1023px) {

    .fabric-s6 {
        padding: 100px 5vw 70px;
    }

    .fabric-s6-interactive {
        grid-template-columns: 190px 1fr;
        gap: 45px;
    }

    .fabric-s6-list {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
    }

    .fabric-s6-item {
        min-height: 65px;
        grid-template-columns: 30px 1fr;
    }

    .fabric-s6-item i {
        display: none;
    }

    .fabric-s6-item strong {
        font-size: 20px;
    }

    .fabric-s6-showcase {
        grid-column: 1;
    }

    .fabric-s6-info {
        grid-column: 2;
    }

    .fabric-s6-image {
        height: 450px;
    }

    .fabric-s6-number-badge {
        right: -10px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .fabric-s6 {
        padding: 75px 20px 55px;
    }

    .fabric-s6-head {
        display: block;
        margin-bottom: 55px;
    }

    .fabric-s6-number {
        margin-bottom: 25px;
        font-size: 52px;
    }

    .fabric-s6-head h2 {
        font-size: clamp(48px, 14vw, 70px);
    }

    .fabric-s6-head p {
        font-size: 15px;
    }

    .fabric-s6-interactive {
        display: flex;
        flex-direction: column;
        gap: 40px;

        min-height: auto;
    }

    .fabric-s6-list {
        width: 100%;

        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .fabric-s6-item {
        min-height: 68px;

        grid-template-columns: 30px 1fr;

        gap: 8px;

        padding: 0 5px;
    }

    .fabric-s6-item:hover,
    .fabric-s6-item.active {
        padding-left: 10px;
    }

    .fabric-s6-item strong {
        font-size: 21px;
    }

    .fabric-s6-showcase {
        width: 100%;
    }

    .fabric-s6-image {
        width: 100%;
        height: 390px;
    }

    .fabric-s6-number-badge {
        right: 5px;
        top: 15px;

        width: 62px;
        height: 62px;
    }

    .fabric-s6-info {
        width: 100%;
        max-width: none;
    }

    .fabric-s6-info h3 {
        font-size: 58px;
    }

    .fabric-s6-info p {
        font-size: 15px;
        margin: 25px 0 30px;
    }

    .fabric-s6-meta div {
        padding: 15px 8px;
    }

    .fabric-s6-meta strong {
        font-size: 14px;
    }

    .fabric-s6-meta span {
        font-size: 9px;
    }

    .fabric-s6-footer {
        margin-top: 60px;
        grid-template-columns: 1fr 1fr;
    }
}
/* =========================================================
   FABRICS — SECTION 7
   FABRIC JOURNAL
========================================================= */

.fabric-s7 {
    position: relative;
    width: 100%;
    overflow: hidden;
    isolation: isolate;

    padding: 110px 6vw 90px;

    background: var(--surface);
    color: var(--text);
}

html.dark .fabric-s7 {
    background: #141B18;
    color: #F5F1E7;
}

.fabric-s7-wrap {
    width: min(1400px, 100%);
    margin: 0 auto;
}


/* =========================================================
   TOP
========================================================= */

.fabric-s7-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding-bottom: 25px;
    margin-bottom: 70px;

    border-bottom: 1px solid var(--line);
}

html.dark .fabric-s7-top {
    border-bottom-color: rgba(245, 241, 231, 0.16);
}

.fabric-s7-number {
    font-size: 64px;
    line-height: .8;
    font-weight: 900;
    letter-spacing: -.08em;
    color: var(--gold);
}

.fabric-s7-top-info {
    display: flex;
    align-items: center;
    gap: 18px;
    color: var(--text-soft);
}

html.dark .fabric-s7-top-info {
    color: rgba(245, 241, 231, 0.75);
}

.fabric-s7-top-info span {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .18em;
}

.fabric-s7-top-info i {
    width: 35px;
    height: 1px;
    background: var(--line);
}

html.dark .fabric-s7-top-info i {
    background: rgba(245, 241, 231, 0.2);
}


/* =========================================================
   FEATURE
========================================================= */

.fabric-s7-feature {
    display: grid;
    grid-template-columns: 1.15fr .85fr;

    gap: clamp(45px, 8vw, 120px);

    align-items: center;

    margin-bottom: 100px;
}


/* IMAGE */

.fabric-s7-feature-image {
    position: relative;

    width: 100%;
    height: 600px;

    overflow: hidden;

    clip-path: polygon(
        0 4%,
        94% 0,
        100% 92%,
        8% 100%
    );
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.16);
}

.fabric-s7-feature-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transform: scale(1.08);

    transition:
        transform 1.2s cubic-bezier(.2,.7,.2,1),
        filter .7s ease;
}

.fabric-s7-feature-image:hover img {
    transform: scale(1.15);
    filter: saturate(1.08);
}


/* IMAGE NUMBER */

.fabric-s7-image-index {
    position: absolute;

    left: 25px;
    top: 25px;

    width: 58px;
    height: 58px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(255,255,255,.8);
    border-radius: 50%;

    color: #fff;

    font-size: 13px;
    font-weight: 900;

    background: rgba(0,0,0,.3);

    backdrop-filter: blur(8px);
}


/* =========================================================
   FEATURE COPY
========================================================= */

.fabric-s7-feature-copy {
    max-width: 520px;
}

.fabric-s7-label {
    display: block;

    margin-bottom: 25px;

    font-size: 11px;
    font-weight: 900;
    letter-spacing: .2em;
    color: var(--gold);
}

.fabric-s7-feature-copy h2 {
    margin: 0;

    font-size: clamp(58px, 7vw, 105px);
    line-height: .82;

    font-weight: 900;
    letter-spacing: -.07em;
    color: var(--text);
}

html.dark .fabric-s7-feature-copy h2 {
    color: #F5F1E7;
}

.fabric-s7-feature-copy h2 em {
    display: block;

    padding-left: 55px;

    font-family: var(--font-display);
    font-weight: 500;
    font-style: italic;
    color: var(--coral);
}

html.dark .fabric-s7-feature-copy h2 em {
    color: #6EAA86;
}

.fabric-s7-feature-copy p {
    max-width: 430px;

    margin: 35px 0;

    font-size: 16px;
    line-height: 1.8;
    font-weight: 650;
    color: var(--text-soft);
}

html.dark .fabric-s7-feature-copy p {
    color: rgba(245, 241, 231, 0.78);
}


/* =========================================================
   ARROW
========================================================= */

.fabric-s7-arrow {
    display: inline-flex;
    align-items: center;
    gap: 15px;

    color: var(--text);
    text-decoration: none;

    font-size: 11px;
    font-weight: 900;
    letter-spacing: .16em;
    transition: color .3s ease;
}

html.dark .fabric-s7-arrow {
    color: #F5F1E7;
}

.fabric-s7-arrow i {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    border: 1px solid var(--line);
    border-radius: 50%;

    transition:
        transform .4s ease,
        background .3s ease,
        color .3s ease;
}

html.dark .fabric-s7-arrow i {
    border-color: rgba(245, 241, 231, 0.2);
}

.fabric-s7-arrow:hover i {
    transform: translateX(8px);
    background: var(--coral);
    color: #fff;
    border-color: var(--coral);
}


/* =========================================================
   MATERIAL INDEX
========================================================= */

.fabric-s7-index {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);

    margin-bottom: 100px;
}

html.dark .fabric-s7-index {
    border-color: rgba(245, 241, 231, 0.16);
}

.fabric-s7-material {
    padding: 30px 28px 35px;

    min-height: 190px;
}

.fabric-s7-material + .fabric-s7-material {
    border-left: 1px solid var(--line);
}

html.dark .fabric-s7-material + .fabric-s7-material {
    border-left-color: rgba(245, 241, 231, 0.16);
}

.fabric-s7-material-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.fabric-s7-material-head span {
    font-size: 12px;
    font-weight: 900;
    color: var(--gold);
}

.fabric-s7-material-head b {
    font-size: 25px;
    font-weight: 900;
    letter-spacing: -.03em;
    color: var(--text);
}

html.dark .fabric-s7-material-head b {
    color: #F5F1E7;
}

.fabric-s7-line {
    width: 100%;
    height: 1px;

    margin: 28px 0 22px;

    background: var(--line);
}

html.dark .fabric-s7-line {
    background: rgba(245, 241, 231, 0.16);
}

.fabric-s7-material p {
    margin: 0;

    max-width: 260px;

    font-size: 14px;
    line-height: 1.7;
    font-weight: 600;
    color: var(--text-soft);
}

html.dark .fabric-s7-material p {
    color: rgba(245, 241, 231, 0.75);
}


/* =========================================================
   STORY
========================================================= */

.fabric-s7-story {
    max-width: 850px;

    margin: 0 auto 90px;

    text-align: center;
}

.fabric-s7-story > span {
    display: block;

    margin-bottom: 25px;

    font-size: 10px;
    font-weight: 900;
    letter-spacing: .2em;
    color: var(--gold);
}

.fabric-s7-story h3 {
    margin: 0;

    font-size: clamp(42px, 6vw, 82px);
    line-height: .95;

    font-weight: 900;
    letter-spacing: -.06em;
    color: var(--text);
}

html.dark .fabric-s7-story h3 {
    color: #F5F1E7;
}

.fabric-s7-story h3 em {
    display: block;

    font-family: var(--font-display);
    font-weight: 500;
    font-style: italic;
    color: var(--coral);
}

html.dark .fabric-s7-story h3 em {
    color: #6EAA86;
}


/* =========================================================
   FOOTER
========================================================= */

.fabric-s7-footer {
    display: grid;

    grid-template-columns: 1fr 1fr 1fr auto;

    align-items: center;

    gap: 25px;

    padding-top: 25px;

    border-top: 1px solid var(--line);
    color: var(--text-soft);
}

html.dark .fabric-s7-footer {
    border-top-color: rgba(245, 241, 231, 0.16);
    color: rgba(245, 241, 231, 0.75);
}

.fabric-s7-footer > span {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .18em;
}

.fabric-s7-footer a {
    display: inline-flex;
    align-items: center;
    gap: 15px;

    color: var(--text);
    text-decoration: none;

    font-size: 10px;
    font-weight: 900;
    letter-spacing: .16em;
}

html.dark .fabric-s7-footer a {
    color: #F5F1E7;
}

.fabric-s7-footer a i {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    border: 1px solid var(--line);
    border-radius: 50%;

    transition: transform .4s ease, background .3s ease, color .3s ease;
}

html.dark .fabric-s7-footer a i {
    border-color: rgba(245, 241, 231, 0.2);
}

.fabric-s7-footer a:hover i {
    transform: translateX(7px);
    background: var(--coral);
    color: #fff;
    border-color: var(--coral);
}


/* =========================================================
   REVEAL
========================================================= */

.reveal-s7 {
    opacity: 0;
    transform: translateY(30px);
    transition:
        opacity .75s var(--ease),
        transform .85s var(--ease);
}

.reveal-s7.is-visible {
    opacity: 1 !important;
    transform: none !important;
}


/* STAGGER */

.fabric-s7-material:nth-child(1) {
    transition-delay: .05s;
}

.fabric-s7-material:nth-child(2) {
    transition-delay: .15s;
}

.fabric-s7-material:nth-child(3) {
    transition-delay: .25s;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1023px) {

    .fabric-s7 {
        padding: 95px 5vw 75px;
    }

    .fabric-s7-feature {
        gap: 45px;
    }

    .fabric-s7-feature-image {
        height: 480px;
    }

    .fabric-s7-feature-copy h2 {
        font-size: clamp(52px, 8vw, 78px);
    }

    .fabric-s7-feature-copy h2 em {
        padding-left: 30px;
    }

    .fabric-s7-index {
        margin-bottom: 75px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .fabric-s7 {
        padding: 70px 20px 55px;
    }


    /* TOP */

    .fabric-s7-top {
        align-items: flex-start;

        margin-bottom: 50px;
    }

    .fabric-s7-number {
        font-size: 48px;
    }

    .fabric-s7-top-info {
        flex-direction: column;
        align-items: flex-end;

        gap: 8px;
    }

    .fabric-s7-top-info i {
        display: none;
    }

    .fabric-s7-top-info span {
        font-size: 9px;
        text-align: right;
    }


    /* FEATURE */

    .fabric-s7-feature {
        display: flex;
        flex-direction: column;

        gap: 40px;

        margin-bottom: 70px;
    }


    /* IMAGE */

    .fabric-s7-feature-image {
        width: 94%;
        height: 390px;

        align-self: flex-start;
    }

    .fabric-s7-image-index {
        left: 15px;
        top: 15px;

        width: 48px;
        height: 48px;

        font-size: 11px;
    }


    /* COPY */

    .fabric-s7-feature-copy {
        width: 100%;
        max-width: none;
    }

    .fabric-s7-feature-copy h2 {
        font-size: clamp(48px, 14vw, 68px);
    }

    .fabric-s7-feature-copy h2 em {
        padding-left: 25px;
    }

    .fabric-s7-feature-copy p {
        margin: 28px 0;

        font-size: 15px;
        line-height: 1.75;
    }


    /* MATERIALS */

    .fabric-s7-index {
        display: block;

        margin-bottom: 70px;
    }

    .fabric-s7-material {
        min-height: auto;

        padding: 25px 5px 28px;
    }

    .fabric-s7-material + .fabric-s7-material {
        border-left: 0;

        border-top: 1px solid currentColor;
    }

    .fabric-s7-material-head b {
        font-size: 23px;
    }

    .fabric-s7-material p {
        font-size: 14px;
    }


    /* STORY */

    .fabric-s7-story {
        margin-bottom: 65px;
    }

    .fabric-s7-story h3 {
        font-size: clamp(38px, 10vw, 55px);
    }


    /* FOOTER */

    .fabric-s7-footer {
        grid-template-columns: 1fr 1fr;

        row-gap: 20px;
    }

    .fabric-s7-footer > span {
        font-size: 9px;
    }

    .fabric-s7-footer a {
        grid-column: 1 / -1;

        margin-top: 12px;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .fabric-s7 {
        padding-left: 16px;
        padding-right: 16px;
    }

    .fabric-s7-feature-image {
        width: 100%;
        height: 340px;
    }

    .fabric-s7-feature-copy h2 {
        font-size: 45px;
    }

    .fabric-s7-story h3 {
        font-size: 36px;
    }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .reveal-s7,
    .fabric-s7-feature-image img {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* =========================================================
   ALTERATIONS — SECTION 1
   REFINED FIT
   GLOBAL FABRICS COLOR SYSTEM
========================================================= */

.alteration-s1 {

    /* GLOBAL WEBSITE COLORS */
    --site-light: #ffffff;
    --site-dark: #6C7A89;

    position: relative;

    min-height: 100vh;

    padding: 110px 6vw 45px;

    overflow: hidden;

    isolation: isolate;

    background: var(--site-light);

    color: #17212a;
}


/* =========================================================
   BACKGROUND
========================================================= */

.alteration-s1-bg {

    position: absolute;

    inset: 0;

    z-index: -2;

    overflow: hidden;

    pointer-events: none;
}


/* =========================================================
   FLOATING ORBS
========================================================= */

.alteration-s1-orb {

    position: absolute;

    width: 420px;

    height: 420px;

    border-radius: 50%;

    background: #6C7A89;

    opacity: .07;

    filter: blur(100px);

    animation:
        alterationOrbFloat
        14s ease-in-out
        infinite alternate;
}


.alteration-orb-one {

    top: -220px;

    left: -160px;
}


.alteration-orb-two {

    right: -220px;

    bottom: -240px;

    animation-delay: -6s;
}


@keyframes alterationOrbFloat {

    0% {

        transform:
            translate3d(0, 0, 0)
            scale(1);

    }

    100% {

        transform:
            translate3d(80px, 55px, 0)
            scale(1.2);

    }

}


/* =========================================================
   LARGE BACKGROUND WORD
========================================================= */

.alteration-s1-word {

    position: absolute;

    left: -5%;

    bottom: -4%;

    font-size:
        clamp(
            150px,
            25vw,
            400px
        );

    line-height: .7;

    font-weight: 950;

    letter-spacing: -.1em;

    white-space: nowrap;

    color: currentColor;

    opacity: .025;

    animation:
        alterationWordMove
        16s ease-in-out
        infinite alternate;
}


@keyframes alterationWordMove {

    from {

        transform:
            translateX(-20px);

    }

    to {

        transform:
            translateX(35px);

    }

}


/* =========================================================
   GRAIN
========================================================= */

.alteration-s1-grain {

    position: absolute;

    inset: 0;

    opacity: .018;

    background-image:

        repeating-linear-gradient(
            0deg,
            transparent 0,
            transparent 4px,
            currentColor 5px,
            transparent 6px
        ),

        repeating-linear-gradient(
            90deg,
            transparent 0,
            transparent 5px,
            currentColor 6px,
            transparent 7px
        );
}


/* =========================================================
   CONTAINER
========================================================= */

.alteration-s1-container {

    width:
        min(
            1450px,
            100%
        );

    min-height:
        calc(
            100vh - 155px
        );

    margin: 0 auto;

    display: flex;

    flex-direction: column;
}


/* =========================================================
   TOP BAR
========================================================= */

.alteration-s1-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding-bottom: 18px;

    border-bottom:
        1px solid
        currentColor;

    animation:
        alterationTopReveal
        .9s
        cubic-bezier(.16,1,.3,1)
        both;
}


@keyframes alterationTopReveal {

    from {

        opacity: 0;

        transform:
            translateY(-25px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


/* =========================================================
   NUMBER
========================================================= */

.alteration-s1-number {

    font-size: 16px;

    font-weight: 950;

    letter-spacing: .1em;
}


/* =========================================================
   CATEGORY
========================================================= */

.alteration-s1-category {

    display: flex;

    align-items: center;

    gap: 16px;

    font-size: 14px;

    font-weight: 900;

    letter-spacing: .13em;
}


.alteration-s1-category i {

    width: 35px;

    height: 1px;

    background:
        currentColor;

    display: block;
}


.alteration-s1-category strong {

    font-size: 14px;

    font-weight: 950;
}


/* =========================================================
   MAIN GRID
========================================================= */

.alteration-s1-main {

    flex: 1;

    display: grid;

    grid-template-columns:
        minmax(0, .9fr)
        minmax(0, 1.1fr);

    gap: clamp(
        50px,
        8vw,
        130px
    );

    align-items: center;

    padding:
        55px
        0
        65px;
}


/* =========================================================
   TEXT AREA
========================================================= */

.alteration-s1-copy {

    position: relative;

    z-index: 3;

    max-width: 650px;

    animation:
        alterationCopyReveal
        1.1s
        .15s
        cubic-bezier(.16,1,.3,1)
        both;
}


@keyframes alterationCopyReveal {

    from {

        opacity: 0;

        transform:
            translateX(-60px);

    }

    to {

        opacity: 1;

        transform:
            translateX(0);

    }

}


/* =========================================================
   EYEBROW
========================================================= */

.alteration-s1-eyebrow {

    display: inline-block;

    margin-bottom: 28px;

    font-size: 14px;

    font-weight: 950;

    letter-spacing: .18em;

    border-left:
        3px solid
        currentColor;

    padding-left: 13px;
}


/* =========================================================
   TITLE
========================================================= */

.alteration-s1-title {

    margin: 0;

    display: flex;

    flex-direction: column;

    font-size:
        clamp(
            68px,
            8vw,
            125px
        );

    line-height: .82;

    letter-spacing: -.07em;

    font-weight: 950;
}


.alteration-s1-title span,
.alteration-s1-title em {

    display: block;

    overflow: hidden;

    font-style: normal;
}


.alteration-s1-title em {

    font-family:
        Georgia,
        serif;

    font-weight: 400;

    padding-left:
        clamp(
            30px,
            4vw,
            70px
        );
}


/* =========================================================
   DESCRIPTION
========================================================= */

.alteration-s1-description {

    display: flex;

    align-items: flex-start;

    gap: 20px;

    max-width: 480px;

    margin-top: 40px;
}


.alteration-s1-rule {

    flex: 0 0 45px;

    width: 45px;

    height: 2px;

    margin-top: 12px;

    background:
        currentColor;

    transform-origin: left;

    animation:
        alterationRuleDraw
        1.1s
        .8s
        cubic-bezier(.16,1,.3,1)
        both;
}


@keyframes alterationRuleDraw {

    from {

        transform:
            scaleX(0);

    }

    to {

        transform:
            scaleX(1);

    }

}


.alteration-s1-description p {

    margin: 0;

    font-size: 16px;

    line-height: 1.8;

    font-weight: 750;
}


/* =========================================================
   CTA
========================================================= */

.alteration-s1-cta {

    position: relative;

    display: inline-flex;

    align-items: center;

    gap: 18px;

    margin-top: 35px;

    padding:
        15px
        0;

    color: inherit;

    text-decoration: none;

    font-size: 14px;

    font-weight: 950;

    letter-spacing: .12em;

    overflow: hidden;
}


.alteration-s1-cta::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 100%;

    height: 2px;

    background:
        currentColor;

    transform:
        scaleX(.35);

    transform-origin: left;

    transition:
        transform
        .45s
        cubic-bezier(.16,1,.3,1);
}


.alteration-s1-cta:hover::after {

    transform:
        scaleX(1);
}


.alteration-s1-cta i {

    width: 40px;

    height: 40px;

    display: grid;

    place-items: center;

    border:
        1px solid
        currentColor;

    border-radius: 50%;

    transition:
        transform
        .4s ease;
}


.alteration-s1-cta:hover i {

    transform:
        translateX(8px);
}


/* =========================================================
   VISUAL AREA
========================================================= */

.alteration-s1-visual {

    position: relative;

    min-width: 0;

    display: flex;

    justify-content: center;

    animation:
        alterationVisualReveal
        1.2s
        .2s
        cubic-bezier(.16,1,.3,1)
        both;
}


@keyframes alterationVisualReveal {

    from {

        opacity: 0;

        transform:
            translateX(70px);

    }

    to {

        opacity: 1;

        transform:
            translateX(0);

    }

}


/* =========================================================
   IMAGE FRAME
========================================================= */

.alteration-s1-image-frame {

    position: relative;

    width:
        min(
            100%,
            620px
        );

    height:
        min(
            650px,
            65vh
        );

    overflow: visible;
}


/* =========================================================
   IMAGE
========================================================= */

.alteration-s1-image {

    position: relative;

    width: 100%;

    height: 100%;

    overflow: hidden;

    clip-path:
        polygon(
            9% 0,
            91% 4%,
            100% 17%,
            96% 86%,
            84% 100%,
            7% 94%,
            0 76%,
            4% 12%
        );

    background:
        #6C7A89;

    animation:
        alterationImageReveal
        1.4s
        .35s
        cubic-bezier(.16,1,.3,1)
        both;
}


@keyframes alterationImageReveal {

    from {

        clip-path:
            polygon(
                50% 0,
                50% 0,
                50% 0,
                50% 100%,
                50% 100%,
                50% 100%,
                50% 0,
                50% 0
            );

    }

    to {

        clip-path:
            polygon(
                9% 0,
                91% 4%,
                100% 17%,
                96% 86%,
                84% 100%,
                7% 94%,
                0 76%,
                4% 12%
            );

    }

}


/* =========================================================
   IMAGE
========================================================= */

.alteration-s1-image img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

    transform:
        scale(1.08);

    transition:
        transform
        1.4s
        cubic-bezier(.16,1,.3,1),

        filter
        .8s ease;
}


.alteration-s1-image-frame:hover
.alteration-s1-image img {

    transform:
        scale(1.15);

    filter:
        saturate(1.08);
}


/* =========================================================
   IMAGE OVERLAY
========================================================= */

.alteration-s1-image-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.08),
            transparent 45%,
            rgba(0,0,0,.12)
        );

    pointer-events: none;
}


/* =========================================================
   IMAGE LABEL
========================================================= */

.alteration-s1-image-label {

    position: absolute;

    top: 35px;

    right: -18px;

    width: 85px;

    height: 85px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    gap: 4px;

    background:
        #ffffff;

    color:
        #17212a;

    border-radius: 50%;

    box-shadow:
        0 15px 40px
        rgba(0,0,0,.12);

    animation:
        alterationLabelFloat
        5s ease-in-out
        infinite;
}


.alteration-s1-image-label span {

    font-size: 10px;

    font-weight: 950;

    letter-spacing: .12em;
}


.alteration-s1-image-label strong {

    font-size: 18px;

    font-weight: 950;
}


@keyframes alterationLabelFloat {

    0%,
    100% {

        transform:
            translateY(0)
            rotate(0deg);

    }

    50% {

        transform:
            translateY(-10px)
            rotate(4deg);

    }

}


/* =========================================================
   DECORATIVE LINE
========================================================= */

.alteration-s1-image-line {

    position: absolute;

    left: -30px;

    bottom: 40px;

    width: 90px;

    height: 1px;

    background:
        currentColor;

    transform:
        rotate(-90deg);

    transform-origin: left center;
}


/* =========================================================
   SIDE TEXT
========================================================= */

.alteration-s1-side-text {

    position: absolute;

    right: -50px;

    bottom: 100px;

    writing-mode: vertical-rl;

    font-size: 12px;

    font-weight: 950;

    letter-spacing: .16em;

    white-space: nowrap;

    opacity: .8;
}


/* =========================================================
   BOTTOM
========================================================= */

.alteration-s1-bottom {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding-top: 20px;

    border-top:
        1px solid
        currentColor;

    animation:
        alterationBottomReveal
        1s
        .7s
        ease
        both;
}


@keyframes alterationBottomReveal {

    from {

        opacity: 0;

        transform:
            translateY(25px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


/* =========================================================
   PROCESS
========================================================= */

.alteration-s1-process {

    display: flex;

    align-items: center;

    gap: 18px;
}


.alteration-process-item {

    display: flex;

    align-items: center;

    gap: 9px;
}


.alteration-process-item strong {

    font-size: 15px;

    font-weight: 950;
}


.alteration-process-item span {

    font-size: 14px;

    font-weight: 900;

    letter-spacing: .12em;
}


.alteration-process-item.active {

    opacity: 1;
}


.alteration-process-line {

    width: 45px;

    height: 1px;

    background:
        currentColor;

    opacity: .5;
}


/* =========================================================
   SCROLL
========================================================= */

.alteration-s1-scroll {

    display: flex;

    align-items: center;

    gap: 14px;

    font-size: 13px;

    font-weight: 900;

    letter-spacing: .13em;
}


.alteration-s1-scroll i {

    animation:
        alterationScrollBounce
        1.6s
        ease-in-out
        infinite;
}


@keyframes alterationScrollBounce {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(7px);

    }

}


/* =========================================================
   DARK MODE
   SAME COLOR AS FABRICS SECTION 1
========================================================= */

html.dark .alteration-s1 {

    background:
        #6C7A89;

    color:
        #ffffff;
}


/* Dark background effects */

html.dark .alteration-s1-orb {

    background:
        #ffffff;

    opacity: .045;
}


/* Dark background word */

html.dark .alteration-s1-word {

    color:
        #ffffff;

    opacity: .045;
}


/* Dark image placeholder */

html.dark .alteration-s1-image {

    background:
        #55636f;
}


/* Dark image circle */

html.dark .alteration-s1-image-label {

    background:
        #ffffff;

    color:
        #17212a;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1023px) {

    .alteration-s1 {

        min-height: auto;

        padding:
            100px
            5vw
            55px;
    }


    .alteration-s1-main {

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr);

        gap: 45px;

        padding:
            55px
            0
            60px;
    }


    .alteration-s1-title {

        font-size:
            clamp(
                58px,
                8vw,
                85px
            );
    }


    .alteration-s1-image-frame {

        height:
            530px;
    }


    .alteration-s1-side-text {

        right: -30px;

        font-size: 10px;
    }


    .alteration-s1-image-label {

        width: 70px;

        height: 70px;

        right: -10px;
    }


    .alteration-s1-process {

        gap: 12px;
    }


    .alteration-process-line {

        width: 25px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .alteration-s1 {

        min-height: auto;

        padding:
            75px
            20px
            45px;
    }


    /* TOP */

    .alteration-s1-top {

        align-items: flex-start;

        gap: 15px;
    }


    .alteration-s1-category {

        flex-wrap: wrap;

        justify-content: flex-end;

        gap: 8px;

        max-width: 220px;

        text-align: right;

        font-size: 12px;
    }


    .alteration-s1-category strong {

        font-size: 12px;
    }


    .alteration-s1-category i {

        width: 22px;
    }


    /* MAIN */

    .alteration-s1-main {

        display: flex;

        flex-direction: column;

        gap: 55px;

        padding:
            50px
            0
            55px;
    }


    /* TEXT */

    .alteration-s1-copy {

        width: 100%;

        max-width: none;
    }


    .alteration-s1-eyebrow {

        margin-bottom: 22px;

        font-size: 13px;

        letter-spacing: .12em;
    }


    .alteration-s1-title {

        font-size:
            clamp(
                55px,
                17vw,
                82px
            );

        line-height: .84;
    }


    .alteration-s1-title em {

        padding-left: 25px;
    }


    /* DESCRIPTION */

    .alteration-s1-description {

        max-width: none;

        margin-top: 30px;

        gap: 15px;
    }


    .alteration-s1-rule {

        flex-basis: 30px;

        width: 30px;
    }


    .alteration-s1-description p {

        font-size: 15px;

        line-height: 1.75;
    }


    /* CTA */

    .alteration-s1-cta {

        margin-top: 28px;

        font-size: 13px;
    }


    /* IMAGE */

    .alteration-s1-visual {

        width: 100%;

        padding:
            0
            8px;
    }


    .alteration-s1-image-frame {

        width: 100%;

        height: 430px;
    }


    .alteration-s1-image-label {

        top: 18px;

        right: -5px;

        width: 68px;

        height: 68px;
    }


    .alteration-s1-image-label span {

        font-size: 9px;
    }


    .alteration-s1-image-label strong {

        font-size: 16px;
    }


    .alteration-s1-image-line {

        left: -5px;

        bottom: 30px;

        width: 65px;
    }


    .alteration-s1-side-text {

        position: relative;

        right: auto;

        bottom: auto;

        margin-top: 17px;

        writing-mode: horizontal-tb;

        text-align: right;

        font-size: 10px;

        letter-spacing: .12em;
    }


    /* BOTTOM */

    .alteration-s1-bottom {

        align-items: flex-start;

        flex-direction: column;

        gap: 28px;
    }


    .alteration-s1-process {

        width: 100%;

        justify-content:
            space-between;

        gap: 7px;
    }


    .alteration-process-item {

        gap: 5px;

        flex-direction: column;

        align-items: flex-start;
    }


    .alteration-process-item strong {

        font-size: 14px;
    }


    .alteration-process-item span {

        font-size: 11px;

        letter-spacing: .08em;
    }


    .alteration-process-line {

        flex: 1;

        width: auto;

        margin-top: 7px;
    }


    .alteration-s1-scroll {

        font-size: 11px;
    }


    /* BACKGROUND WORD */

    .alteration-s1-word {

        font-size: 110px;

        bottom: 3%;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .alteration-s1 {

        padding-left: 16px;

        padding-right: 16px;
    }


    .alteration-s1-title {

        font-size: 52px;
    }


    .alteration-s1-image-frame {

        height: 370px;
    }


    .alteration-s1-description p {

        font-size: 14px;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .alteration-s1-orb,
    .alteration-s1-word,
    .alteration-s1-image-label,
    .alteration-s1-scroll i {

        animation: none;
    }


    .alteration-s1-copy,
    .alteration-s1-visual,
    .alteration-s1-top,
    .alteration-s1-bottom {

        animation: none;
    }


    .alteration-s1-image {

        animation: none;

        clip-path:
            polygon(
                9% 0,
                91% 4%,
                100% 17%,
                96% 86%,
                84% 100%,
                7% 94%,
                0 76%,
                4% 12%
            );
    }


    .alteration-s1-image img {

        transition: none;

        transform: scale(1.05);
    }

}

/* =========================================================
   HOME PAGE 1 — FINAL POLISH OVERRIDES
   Section 2 / Section 3 / Section 7
   ========================================================= */

/* SECTION 2 — replace the old vertical labels with compact horizontal atelier cards */
.curve-side{
  top:auto;
  bottom:28px;
  transform:none;
  flex-direction:row;
  align-items:center;
  gap:12px;
  padding:10px 15px;
  min-width:150px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  background:rgba(9,25,19,.42);
  backdrop-filter:blur(10px);
  box-shadow:0 12px 30px rgba(0,0,0,.14);
  pointer-events:none;
  animation:atelierCardFloat 4s ease-in-out infinite;
}
.curve-side-left{left:5%;}
.curve-side-right{right:5%;animation-delay:1.5s;}
.curve-side span{writing-mode:horizontal-tb;text-orientation:initial;}
.curve-side-icon{
  width:34px;height:34px;display:grid;place-items:center;flex:none;
  border:1px solid rgba(255,255,255,.28);border-radius:50%;
  color:var(--gold);font-size:14px;
}
.curve-side-copy{display:flex;flex-direction:column;gap:2px;line-height:1;text-align:left;}
.curve-side-right .curve-side-copy{text-align:right;}
.curve-side-copy strong{font-size:10px;letter-spacing:.18em;color:#fff;}
.curve-side-copy small{font-size:8px;letter-spacing:.16em;color:rgba(255,255,255,.62);}
@keyframes atelierCardFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}



/* SECTION 7 — tighter composition + filled visual treatment, so no large dead zone */
.mosaic-section{
  position:relative;
  overflow:hidden;
  padding:88px 0 105px;
  background:
    radial-gradient(circle at 12% 18%, color-mix(in srgb,var(--coral) 9%,transparent) 0 9%, transparent 28%),
    radial-gradient(circle at 88% 76%, color-mix(in srgb,var(--gold) 7%,transparent) 0 8%, transparent 26%),
    var(--surface);
}
.mosaic-section::before,
.mosaic-section::after{
  content:"";position:absolute;pointer-events:none;border:1px solid color-mix(in srgb,var(--text) 8%,transparent);border-radius:50%;
}
.mosaic-section::before{width:360px;height:360px;left:-210px;top:180px;animation:mosaicOrb 9s ease-in-out infinite;}
.mosaic-section::after{width:260px;height:260px;right:-150px;bottom:80px;animation:mosaicOrb 7s ease-in-out infinite reverse;}
.mosaic-section .container{position:relative;z-index:1;}
.mosaic-head{margin-bottom:30px;}
.mosaic-head h2{margin-bottom:0;}
.mosaic-grid{gap:12px;grid-auto-rows:118px;}
.mosaic-item{border-radius:18px;box-shadow:0 16px 35px rgba(0,0,0,.10);transform-origin:center;}
.mosaic-item::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(10,18,14,.18));opacity:0;transition:opacity .5s ease;pointer-events:none;}
.mosaic-item:hover::after{opacity:1;}
.mosaic-item:hover{z-index:2;}
@keyframes mosaicOrb{0%,100%{transform:translate3d(0,0,0) rotate(0deg)}50%{transform:translate3d(18px,-12px,0) rotate(8deg)}}

@media (max-width:1199px){
  .curve-side{display:flex;bottom:16px;}
}

@media (max-width:1024px){
  .curve-side{display:flex;bottom:16px;}
  .curve-side-left{left:3%;}.curve-side-right{right:3%;}
  .mosaic-section{padding:72px 0 85px;}
  .mosaic-head{margin-bottom:26px;}
  .mosaic-grid{grid-auto-rows:108px;gap:10px;}
}
@media (max-width:767px){
  .curve-side{min-width:0;padding:8px 11px;gap:8px;}
  .curve-side-icon{width:29px;height:29px;font-size:12px;}
  .curve-side-copy strong{font-size:8px;}
  .curve-side-copy small{font-size:7px;}
  .curve-side-left{left:12px;}.curve-side-right{right:12px;}
  .mosaic-section{padding:64px 0 75px;}
  .mosaic-head{margin-bottom:22px;}
  .mosaic-grid{grid-auto-rows:135px;gap:9px;}
}
@media (prefers-reduced-motion:reduce){
  .curve-side,.mosaic-section::before,.mosaic-section::after{animation:none;}
}




/* SECTION 7 — remove dead space and finish with a dense highlight strip */
.mosaic-section{padding-bottom:70px !important;}
.mosaic-grid{margin-bottom:18px !important;}
.mosaic-footer-strip{
  display:grid;
  grid-template-columns:repeat(3,1fr) minmax(190px,.9fr);
  gap:1px;
  margin-top:18px;
  border:1px solid color-mix(in srgb,var(--text) 12%,transparent);
  background:color-mix(in srgb,var(--text) 8%,transparent);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 18px 45px rgba(0,0,0,.08);
}
.mosaic-footer-strip>div,
.mosaic-footer-strip>a{
  min-height:92px;
  padding:20px 22px;
  background:var(--surface);
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--text);
  text-decoration:none;
  font-weight:800;
  letter-spacing:.04em;
  transition:transform .35s ease,background .35s ease,color .35s ease;
}
.mosaic-footer-strip i{color:var(--coral);font-size:18px;}
.mosaic-footer-strip>a{justify-content:center;background:var(--text);color:var(--surface);}
.mosaic-footer-strip>a i{color:var(--gold);transition:transform .35s ease;}
.mosaic-footer-strip>div:hover{transform:translateY(-4px);}
.mosaic-footer-strip>a:hover i{transform:translateX(6px);}
@media(max-width:1024px){
  .mosaic-footer-strip{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:600px){
  .mosaic-footer-strip{grid-template-columns:1fr;margin-top:12px;}
  .mosaic-footer-strip>div,.mosaic-footer-strip>a{min-height:66px;padding:15px 18px;}
}

/* =========================================================
   HOME 1 — SECTION 2 CREATIVE ATELIER BLUEPRINT
   ========================================================= */
.atelier-blueprint{
  position:relative;
  overflow:hidden;
  padding:120px 0 92px;
  background:var(--surface);
  color:var(--text);
  isolation:isolate;
}
.atelier-blueprint::before{
  content:"";position:absolute;inset:0;z-index:-2;opacity:.42;pointer-events:none;
  background-image:linear-gradient(color-mix(in srgb,var(--text) 5%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--text) 5%,transparent) 1px,transparent 1px);
  background-size:46px 46px;
  mask-image:linear-gradient(to bottom,transparent 0%,#000 14%,#000 84%,transparent 100%);
}
.atelier-blueprint::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(circle at 50% 44%,color-mix(in srgb,var(--coral) 7%,transparent),transparent 38%),linear-gradient(115deg,transparent 42%,color-mix(in srgb,var(--gold) 5%,transparent) 50%,transparent 58%);
}
.atelier-blueprint-orb{position:absolute;border:1px solid color-mix(in srgb,var(--text) 9%,transparent);border-radius:50%;pointer-events:none;z-index:-1;animation:blueprintOrbit 10s ease-in-out infinite;}
.orb-one{width:440px;height:440px;left:-260px;top:90px}.orb-two{width:300px;height:300px;right:-150px;bottom:40px;animation-delay:-4s}
.atelier-blueprint-head{display:grid;grid-template-columns:1.2fr .8fr;gap:60px;align-items:end;max-width:1060px;margin:0 auto 62px;}
.atelier-blueprint-head .kicker{display:inline-block;color:var(--coral);font-size:13px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;}
.atelier-blueprint-head h2{max-width:720px;margin:14px 0 0;font-family:var(--font-display);font-size:clamp(42px,5.4vw,72px);line-height:.98;letter-spacing:-.055em;}
.atelier-blueprint-head p{max-width:390px;margin:0 0 5px;color:var(--text-soft);font-size:15px;line-height:1.8;}
.atelier-blueprint-board{position:relative;display:grid;grid-template-columns:1.15fr .62fr .62fr;gap:22px;align-items:stretch;max-width:1120px;min-height:570px;margin:0 auto;}
.blueprint-line{position:absolute;left:3%;right:3%;top:50%;height:1px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--coral) 45%,transparent),transparent);z-index:-1;}
.blueprint-line span{position:absolute;left:50%;top:50%;width:9px;height:9px;border:1px solid var(--coral);border-radius:50%;background:var(--surface);transform:translate(-50%,-50%);animation:blueprintPulse 2.2s ease-in-out infinite;}
.blueprint-card{position:relative;border:1px solid color-mix(in srgb,var(--text) 11%,transparent);background:color-mix(in srgb,var(--surface) 88%,transparent);box-shadow:0 25px 65px rgba(0,0,0,.09);backdrop-filter:blur(10px);overflow:hidden;transition:transform .65s cubic-bezier(.16,1,.3,1),box-shadow .65s ease,border-color .4s ease;}
.blueprint-card:hover{transform:translateY(-12px) rotate(.4deg);box-shadow:0 38px 80px rgba(0,0,0,.15);border-color:color-mix(in srgb,var(--coral) 38%,transparent);}
.blueprint-card-main{border-radius:28px;display:grid;grid-template-rows:390px 1fr;}
.blueprint-card-media{position:relative;overflow:hidden;}
.blueprint-card-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(10,20,15,.55));}
.blueprint-card-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.16,1,.3,1);}
.blueprint-card-main:hover .blueprint-card-media img{transform:scale(1.08);}
.blueprint-index{position:absolute;right:18px;top:18px;z-index:2;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;color:#fff;border:1px solid rgba(255,255,255,.55);background:rgba(18,35,27,.42);backdrop-filter:blur(8px);font-weight:800;font-size:12px;letter-spacing:.08em;}
.blueprint-card-copy{padding:25px 28px 28px;}
.blueprint-kicker{color:var(--coral);font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;}
.blueprint-card-copy h3{margin:8px 0 8px;font-family:var(--font-display);font-size:31px;letter-spacing:-.035em;}
.blueprint-card-copy p{margin:0;color:var(--text-soft);font-size:14px;line-height:1.7;max-width:38ch;}
.blueprint-card-small{border-radius:22px;padding:28px;display:flex;flex-direction:column;justify-content:center;}
.blueprint-card-a{transform:translateY(52px) rotate(-1.2deg);}.blueprint-card-b{transform:translateY(-20px) rotate(1.2deg);}
.blueprint-card-small:hover{transform:translateY(-30px) rotate(0deg);}
.blueprint-mini-icon{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;margin-bottom:30px;border:1px solid color-mix(in srgb,var(--coral) 40%,transparent);color:var(--coral);animation:blueprintFloat 3.8s ease-in-out infinite;}
.blueprint-card-small span{font-size:10px;font-weight:800;letter-spacing:.18em;color:var(--coral);text-transform:uppercase;}
.blueprint-card-small strong{margin:12px 0 15px;font-family:var(--font-display);font-size:30px;line-height:1.02;letter-spacing:-.04em;}
.blueprint-card-small small{color:var(--text-soft);font-size:13px;line-height:1.7;}
.blueprint-stamp{position:absolute;right:5%;bottom:20px;width:110px;height:110px;border:1px dashed color-mix(in srgb,var(--text) 28%,transparent);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;transform:rotate(-12deg);font-size:8px;letter-spacing:.24em;color:var(--text-soft);animation:blueprintSpin 16s linear infinite;}
.blueprint-stamp b{font-family:Georgia,serif;font-size:20px;color:var(--coral);font-weight:400;}
.blueprint-footer{display:flex;justify-content:center;gap:40px;margin:56px auto 0;color:var(--text-soft);font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;}
.blueprint-footer i{margin-right:7px;color:var(--gold);font-size:6px;vertical-align:middle;}
@keyframes blueprintFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes blueprintPulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--coral) 0%,transparent)}50%{box-shadow:0 0 0 9px color-mix(in srgb,var(--coral) 12%,transparent)}}
@keyframes blueprintOrbit{0%,100%{transform:translate3d(0,0,0) rotate(0)}50%{transform:translate3d(20px,-18px,0) rotate(8deg)}}
@keyframes blueprintSpin{to{transform:rotate(348deg)}}

/* =========================================================
   HOME 1 — SECTION 3: sticky left / real page-scroll right
   The left intro pins in place; the right "journey" column is
   a normal, natural-height block that scrolls with the page
   (no inner scrollbox, no hijacked wheel events).
   ========================================================= */
@media (min-width:1025px){
  .home-s3-scroll-wrap{position:relative;min-width:0;}
  .home-s3-scroll-label{height:34px;display:flex;align-items:center;justify-content:space-between;padding:0 16px 10px 4px;color:var(--text-soft);font-size:14px;font-weight:800;letter-spacing:.18em;}
  .home-s3-scroll-label i{color:var(--coral);animation:craftScrollArrow 1.5s ease-in-out infinite;}
  .home-s3-scroll-progress{height:3px;margin:12px 30px 0 8px;background:color-mix(in srgb,var(--text) 8%,transparent);border-radius:5px;overflow:hidden;}
  .home-s3-scroll-progress span{display:block;width:0;height:100%;background:var(--coral);transition:width .15s linear;}
  .home-s3-step.is-active .home-s3-image{box-shadow:0 35px 80px rgba(0,0,0,.2);}
  .home-s3-step.is-active .home-s3-number{transform:translateX(-50%) scale(1.08);box-shadow:0 0 0 9px color-mix(in srgb,var(--coral) 13%,transparent),0 12px 30px rgba(0,0,0,.16);}
  .home-s3-number{transition:transform .45s ease,background .45s ease,color .45s ease,box-shadow .45s ease;}
}
@keyframes craftScrollArrow{0%,100%{transform:translateY(0);opacity:.65}50%{transform:translateY(5px);opacity:1}}

@media (max-width:1024px){
  .atelier-blueprint{padding:82px 0 70px}.atelier-blueprint-head{grid-template-columns:1fr;gap:18px;margin-bottom:42px}.atelier-blueprint-board{grid-template-columns:1fr 1fr;min-height:0}.blueprint-card-main{grid-column:1/-1}.blueprint-card-a,.blueprint-card-b{transform:none}.blueprint-stamp{right:3%;bottom:12px}.blueprint-footer{gap:18px;flex-wrap:wrap;line-height:1.7}
  .home-s3-scroll-wrap{min-width:0}.home-s3-scroll-label{display:none}.home-s3-journey{overflow:visible!important;height:auto!important;max-height:none!important;min-height:0!important}.home-s3-scroll-progress{display:none}.home-s3-intro{position:relative!important;top:auto!important;height:auto!important;min-height:0!important}.home-s3{min-height:0!important}.home-s3-inner{min-height:0!important}.home-s3-step{scroll-snap-align:none!important;}
}
@media (max-width:700px){
  .atelier-blueprint{padding:68px 0 58px}.atelier-blueprint-head h2{font-size:42px}.atelier-blueprint-board{grid-template-columns:1fr;gap:14px}.blueprint-card-main{grid-column:auto;grid-template-rows:300px 1fr}.blueprint-card-small{min-height:270px}.blueprint-stamp{width:88px;height:88px;right:12px;bottom:12px}.blueprint-footer{display:grid;grid-template-columns:1fr;justify-content:start;margin-top:30px;gap:10px}
}
@media (prefers-reduced-motion:reduce){.atelier-blueprint-orb,.blueprint-line span,.blueprint-mini-icon,.blueprint-stamp,.home-s3-scroll-label i{animation:none!important}.home-s3-journey{scroll-behavior:auto!important}}


/* =========================================================
   HOME 1 — SECTION 2 FINAL: ATELIER ORBIT
   ========================================================= */
.atelier-orbit{
  position:relative;
  overflow:hidden;
  padding:118px 0 76px;
  background:var(--surface);
  color:var(--text);
  isolation:isolate;
}
.atelier-orbit-grid{
  position:absolute;inset:0;z-index:-3;opacity:.28;pointer-events:none;
  background-image:
    linear-gradient(color-mix(in srgb,var(--text) 5%,transparent) 1px,transparent 1px),
    linear-gradient(90deg,color-mix(in srgb,var(--text) 5%,transparent) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent);
}
.atelier-orbit-bg{
  position:absolute;border:1px solid color-mix(in srgb,var(--coral) 16%,transparent);
  border-radius:50%;pointer-events:none;z-index:-2;
}
.atelier-orbit-bg-a{width:600px;height:600px;left:-390px;top:90px;animation:orbitBgFloat 11s ease-in-out infinite;}
.atelier-orbit-bg-b{width:430px;height:430px;right:-280px;bottom:-30px;animation:orbitBgFloat 9s ease-in-out infinite reverse;}
.atelier-orbit-head{
  display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:50px;
  align-items:end;max-width:1120px;margin:0 auto 50px;
}
.atelier-orbit-kicker{
  display:inline-block;color:var(--coral);font-size:13.5px;font-weight:800;
  letter-spacing:.2em;text-transform:uppercase;
}
.atelier-orbit-head h2{
  margin:13px 0 0;font-family:var(--font-display);
  font-size:clamp(44px,5.4vw,76px);line-height:.96;letter-spacing:-.055em;
}
.atelier-orbit-head h2 em{
  font-family:Georgia,serif;font-weight:400;color:var(--coral);
}
.atelier-orbit-intro{padding-bottom:5px;}
.atelier-orbit-count{
  display:block;margin-bottom:10px;color:var(--gold);font-size:13.5px;font-weight:900;letter-spacing:.18em;
}
.atelier-orbit-intro p{margin:0;color:var(--text-soft);font-size:14px;line-height:1.8;font-weight:500;}

.atelier-orbit-stage{
  position:relative;
  max-width:1160px;
  min-height:560px;
  margin:0 auto;
  display:grid;
  grid-template-columns: 280px minmax(320px, 380px) 280px;
  grid-template-rows: 1fr 1fr;
  justify-content: center;
  align-items: center;
  gap: 24px 40px;
}
.atelier-orbit-ring{
  position:absolute;left:50%;top:50%;border:1px solid color-mix(in srgb,var(--text) 10%,transparent);
  border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;
}
.atelier-ring-one{width:510px;height:510px;animation:orbitSpin 26s linear infinite;}
.atelier-ring-two{width:690px;height:690px;border-style:dashed;opacity:.65;animation:orbitSpinReverse 34s linear infinite;}
.atelier-orbit-center{
  position:relative;
  z-index:4;
  grid-column: 2;
  grid-row: 1 / span 2;
  width:100%;
  max-width:370px;
  margin:0 auto;
}
.atelier-orbit-image{
  position:relative;width:100%;height:450px;overflow:hidden;
  border-radius:190px 190px 18px 18px;
  box-shadow:0 34px 90px rgba(0,0,0,.18);
  transform:rotate(-2deg);
  transition:transform .8s cubic-bezier(.16,1,.3,1),box-shadow .8s ease;
}
.atelier-orbit-center:hover .atelier-orbit-image{
  transform:rotate(0deg) scale(1.025);
  box-shadow:0 42px 105px rgba(0,0,0,.23);
}
.atelier-orbit-image img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.16,1,.3,1);}
.atelier-orbit-center:hover .atelier-orbit-image img{transform:scale(1.08);}
.atelier-orbit-image-shine{
  position:absolute;inset:-40% -100%;transform:translateX(-60%) rotate(18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
  animation:orbitShine 5.5s ease-in-out infinite;pointer-events:none;
}
.atelier-orbit-pin{
  position:absolute;right:-14px;top:36px;width:54px;height:54px;border-radius:50%;
  background:var(--surface);border:1px solid var(--gold);display:grid;place-items:center;
  box-shadow:0 12px 30px rgba(0,0,0,.12);
}
.atelier-orbit-pin span{width:9px;height:9px;border-radius:50%;background:var(--gold);animation:orbitPulse 2s ease-in-out infinite;}
.atelier-orbit-caption{
  position:absolute;left:34px;bottom:28px;color:#fff;text-shadow:0 2px 16px rgba(0,0,0,.35);
}
.atelier-orbit-caption span{display:block;font-size:13.5px;font-weight:900;letter-spacing:.16em;margin-bottom:5px;}
.atelier-orbit-caption strong{font-family:var(--font-display);font-size:25px;}

.atelier-orbit-card{
  position:relative;z-index:5;width:100%;min-height:140px;padding:22px;
  border:1.5px solid color-mix(in srgb,var(--coral) 30%,transparent);
  border-radius:18px;background:var(--cream);
  backdrop-filter:blur(12px);box-shadow:0 22px 50px rgba(29,41,35,.18);
  transition:transform .6s cubic-bezier(.16,1,.3,1),box-shadow .6s ease,border-color .4s ease;
}
.atelier-orbit-card:hover{
  box-shadow:0 30px 70px rgba(0,0,0,.17);
  border-color:color-mix(in srgb,var(--coral) 35%,transparent);
}
.atelier-orbit-card-left{
  grid-column: 1;
  grid-row: 1;
  position: relative;
  left: auto; top: auto;
  animation: orbitCardFloat 4.5s ease-in-out infinite;
}
.atelier-orbit-card-bottom{
  grid-column: 1;
  grid-row: 2;
  position: relative;
  left: auto; bottom: auto; transform: none;
  animation: orbitCardFloat 5.2s ease-in-out infinite;
}
.atelier-orbit-card-bottom:hover{transform: translateY(-8px);}
.atelier-orbit-card-right{
  grid-column: 3;
  grid-row: 1 / span 2;
  position: relative;
  right: auto; top: auto;
  animation: orbitCardFloat 4.8s ease-in-out infinite reverse;
}
.atelier-orbit-card i{
  width:38px;height:38px;display:grid;place-items:center;border-radius:50%;
  border:1px solid color-mix(in srgb,var(--coral) 35%,transparent);
  color:var(--coral);margin-bottom:16px;
}
.atelier-orbit-num{position:absolute;right:18px;top:18px;color:var(--gold);font-size:13.5px;font-weight:900;letter-spacing:.1em;}
.atelier-orbit-card strong{display:block;font-family:var(--font-display);font-size:27px;margin-bottom:8px;font-weight:700;}
.atelier-orbit-card small{display:block;color:var(--text-soft);font-size:14.5px;line-height:1.6;font-weight:500;}
.atelier-orbit-thread{
  position:absolute;left:50%;top:50%;z-index:2;width:780px;height:260px;
  transform:translate(-50%,-50%) rotate(-12deg);pointer-events:none;
}
.atelier-orbit-thread span{
  position:absolute;width:8px;height:8px;border-radius:50%;background:var(--coral);
  box-shadow:0 0 0 7px color-mix(in srgb,var(--coral) 9%,transparent);
}
.atelier-orbit-thread span:nth-child(1){left:4%;top:70%;animation:threadDot 3s ease-in-out infinite;}
.atelier-orbit-thread span:nth-child(2){left:50%;top:16%;animation:threadDot 3s ease-in-out .8s infinite;}
.atelier-orbit-thread span:nth-child(3){right:4%;top:68%;animation:threadDot 3s ease-in-out 1.6s infinite;}
.atelier-orbit-footer{
  max-width:1120px;margin:42px auto 0;display:flex;align-items:center;justify-content:center;
  flex-wrap:wrap;gap:30px;color:var(--text-soft);font-size:13.5px;font-weight:900;
  letter-spacing:.14em;text-transform:uppercase;
}
.atelier-orbit-footer i{color:var(--gold);font-size:6px;margin-right:7px;}
.atelier-orbit-footer a{color:var(--text);text-decoration:none;border-bottom:1px solid var(--text);padding-bottom:7px;}
.atelier-orbit-footer a i{font-size:11px;color:var(--coral);transition:transform .35s ease;}
.atelier-orbit-footer a:hover i{transform:translateX(6px);}
@keyframes orbitBgFloat{0%,100%{transform:translate(0,0)}50%{transform:translate(18px,-15px)}}
@keyframes orbitSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes orbitSpinReverse{to{transform:translate(-50%,-50%) rotate(-360deg)}}
@keyframes orbitShine{0%,55%{transform:translateX(-60%) rotate(18deg)}75%,100%{transform:translateX(60%) rotate(18deg)}}
@keyframes orbitPulse{0%,100%{transform:scale(1);box-shadow:0 0 0 0 color-mix(in srgb,var(--gold) 0%,transparent)}50%{transform:scale(1.35);box-shadow:0 0 0 9px color-mix(in srgb,var(--gold) 15%,transparent)}}
@keyframes orbitCardFloat{0%,100%{margin-top:0}50%{margin-top:-9px}}
@keyframes threadDot{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.7);opacity:1}}

@media(max-width:1024px){
  .atelier-orbit{padding:88px 0 65px;}
  .atelier-orbit-head{grid-template-columns:1fr;gap:18px;margin-bottom:30px;}
  .atelier-orbit-stage{
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 20px;
    min-height: 0;
  }
  .atelier-orbit-center{
    grid-column: 1 / span 2;
    grid-row: 1;
    margin-bottom: 10px;
  }
  .atelier-orbit-card-left{
    grid-column: 1;
    grid-row: 2;
  }
  .atelier-orbit-card-right{
    grid-column: 2;
    grid-row: 2;
  }
  .atelier-orbit-card-bottom{
    grid-column: 1 / span 2;
    grid-row: 3;
  }
}
@media(max-width:700px){
  .atelier-orbit{padding:70px 0 55px;}
  .atelier-orbit-head h2{font-size:42px;}
  .atelier-orbit-stage{display:flex;flex-direction:column;gap:16px;min-height:0;height:auto;padding:20px 0;}
  .atelier-ring-one,.atelier-ring-two,.atelier-orbit-thread{display:none;}
  .atelier-orbit-center{width:min(100%,340px);margin:0 auto 10px;order:1;}
  .atelier-orbit-image{width:100%;height:390px;}
  .atelier-orbit-card-left{order:2;}
  .atelier-orbit-card-right{order:3;}
  .atelier-orbit-card-bottom{order:4;}
  .atelier-orbit-card{position:relative;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
    width:100%;min-height:0;margin:0;transform:none!important;animation:none!important;}
  .atelier-orbit-card-bottom{transform:none!important;}
  .atelier-orbit-footer{display:grid;grid-template-columns:1fr;gap:12px;justify-content:start;margin-top:20px;}
}

@media(max-width:1024px){
  .home-s3-journey{overflow:visible!important;height:auto!important;max-height:none!important;}
}
@media(prefers-reduced-motion:reduce){
  .atelier-orbit-bg,.atelier-orbit-ring,.atelier-orbit-image-shine,.atelier-orbit-card,.atelier-orbit-pin span,.atelier-orbit-thread span{animation:none!important;}
}

/* =========================================================
   MEN'S SERVICES — 01 / 03 / 05 / 06 / 08
   Editorial layouts inspired by the supplied reference boards.
   Each selected section has a different composition + motion system.
   ========================================================= */

/* shared tokens + readable type */
.service-men .menx-wrap,.service-men .service-container{width:min(100% - 48px,1240px);margin-inline:auto}
.service-men .menx-kicker,.service-men .menx-overline,
.service-men .menx-process-item small,.service-men .menx-image-stamp,
.service-men .menx-hero-index,.service-men .menx-swatch-overlay span,
.service-men .menx-swatch-card span,.service-men .menx-note-number,
.service-men .menx-cta-index,.service-men .menx-cta-signature{font-size:14px}
.service-men .menx-section-head p,.service-men .menx-anatomy-point p,
.service-men .menx-process-copy p,.service-men .menx-swatch-note p,
.service-men .menx-cta-copy p{font-size:16px;line-height:1.8}

/* 01 — asymmetric magazine cover */
.menx-hero{min-height:calc(100svh - 82px);display:grid;align-items:center;overflow:hidden;background:var(--bg);isolation:isolate}
.menx-hero-bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.menx-grid-lines{position:absolute;inset:0;opacity:.12;background-image:linear-gradient(var(--text) 1px,transparent 1px),linear-gradient(90deg,var(--text) 1px,transparent 1px);background-size:90px 90px;mask-image:linear-gradient(90deg,#000,transparent 75%);animation:menGridDrift 18s linear infinite}
.menx-orb{position:absolute;border-radius:50%;filter:blur(1px);border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);animation:menFloat 8s ease-in-out infinite}
.menx-orb-a{width:38vw;height:38vw;right:-12vw;top:-12vw}
.menx-orb-b{width:18vw;height:18vw;left:-6vw;bottom:5vw;animation-delay:-3s;border-color:color-mix(in srgb,var(--gold) 45%,transparent)}
.menx-hero-media{position:absolute;right:5vw;top:7%;width:min(44vw,600px);height:86%;z-index:-1;overflow:hidden;clip-path:polygon(9% 0,100% 5%,94% 100%,0 93%);box-shadow:0 35px 80px rgba(0,0,0,.20);animation:menHeroIn 1.2s var(--ease) both}
.menx-hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--bg) 0%,transparent 38%),linear-gradient(0deg,rgba(0,0,0,.55),transparent 45%)}
.menx-hero-media img{width:100%;height:100%;object-fit:cover;filter:saturate(.78) contrast(1.05);animation:menSlowZoom 14s ease-in-out infinite alternate}
.menx-image-stamp{position:absolute;right:24px;top:24px;z-index:2;color:#fff;letter-spacing:.15em;text-align:right;text-shadow:0 2px 10px #000}
.menx-image-stamp b{font-family:var(--font-display);font-size:26px}
.menx-hero-content{position:relative;padding:80px 0}
.menx-hero-copy{max-width:700px}
.menx-hero-index{display:flex;align-items:center;gap:13px;letter-spacing:.17em;color:var(--gold);font-weight:800;margin-bottom:26px}
.menx-hero-index span{font-family:var(--font-display);font-size:22px}
.menx-hero-index i{width:58px;height:1px;background:currentColor}
.menx-overline{letter-spacing:.18em;font-weight:800;color:var(--accent);margin-bottom:14px}
.menx-hero h1{font-size:clamp(52px,7.5vw,104px);max-width:800px;letter-spacing:-.055em;line-height:.9}
.menx-hero h1 em,.menx-section-head h2 em,.menx-cta-copy h2 em{font-weight:400}
.menx-hero-lead{max-width:590px;margin:28px 0 0;color:var(--text-soft);font-size:18px;line-height:1.75}
.menx-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.menx-actions .service-btn{min-height:48px}
.menx-hero-meta{display:flex;flex-wrap:wrap;gap:12px 24px;margin-top:34px;color:var(--text-soft)}
.menx-hero-meta span{font-size:14px;display:flex;align-items:center;gap:8px}
.menx-hero-meta i{color:var(--gold)}
.menx-scroll-cue{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);display:flex;align-items:center;gap:12px;font-size:14px;letter-spacing:.16em;color:var(--text-soft);animation:menPulse 2.4s ease-in-out infinite}
.menx-scroll-cue i{width:45px;height:1px;background:currentColor;position:relative}
.menx-scroll-cue i::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-right:1px solid;border-bottom:1px solid;transform:rotate(-45deg)}

/* 03 — anatomy / editorial split */
.menx-anatomy{padding:145px 0 115px;background:var(--surface);overflow:hidden;isolation:isolate}
.menx-ambient{position:absolute;inset:0;z-index:-1;pointer-events:none}
.menx-ambient span{position:absolute;border-radius:50%;filter:blur(70px);opacity:.18;animation:menFloat 9s ease-in-out infinite}
.menx-ambient span:nth-child(1){width:260px;height:260px;background:var(--gold);left:-80px;top:20%}
.menx-ambient span:nth-child(2){width:320px;height:320px;background:var(--accent);right:-100px;bottom:5%;animation-delay:-4s}
.menx-ambient span:nth-child(3){width:120px;height:120px;border:1px solid var(--gold);right:28%;top:12%;filter:none;opacity:.35}
.menx-section-head{display:grid;grid-template-columns:1.1fr .7fr;gap:60px;align-items:end;margin-bottom:72px}
.menx-kicker{display:block;letter-spacing:.18em;font-weight:900;color:var(--gold);margin-bottom:15px}
.menx-section-head h2{font-family:var(--font-display);font-size:clamp(48px,6.2vw,86px);letter-spacing:-.055em;line-height:.91}
.menx-section-head>p{max-width:430px;color:var(--text-soft);margin-left:auto}
.menx-anatomy-layout{display:grid;grid-template-columns:.78fr 1.22fr;gap:70px;align-items:center;min-height:650px}
.menx-anatomy-copy{display:grid;gap:0}
.menx-anatomy-point{display:grid;grid-template-columns:54px 1fr;gap:20px;padding:30px 0;border-top:1px solid var(--line);position:relative;transition:transform .5s var(--ease),opacity .5s}
.menx-anatomy-point:last-child{border-bottom:1px solid var(--line)}
.menx-anatomy-point>span{font-family:var(--font-display);font-size:22px;color:var(--gold)}
.menx-anatomy-point b{font-size:14px;letter-spacing:.18em;color:var(--accent)}
.menx-anatomy-point h3{font-size:28px;margin:7px 0 8px}
.menx-anatomy-point p{color:var(--text-soft);max-width:390px}
.menx-anatomy-point:hover,.menx-anatomy-point.is-active{transform:translateX(12px)}
.menx-anatomy-point::after{content:"";position:absolute;left:0;bottom:-1px;width:0;height:2px;background:var(--gold);transition:width .7s var(--ease)}
.menx-anatomy-point:hover::after,.menx-anatomy-point.is-active::after{width:80px}
.menx-anatomy-visual{height:640px;position:relative;display:grid;place-items:center}
.menx-anatomy-visual figure{width:min(80%,520px);height:580px;position:relative;overflow:hidden;clip-path:polygon(8% 0,100% 8%,92% 100%,0 92%);box-shadow:0 35px 70px rgba(0,0,0,.22);z-index:2;animation:menPhotoFloat 7s ease-in-out infinite}
.menx-anatomy-visual figure::after{content:"";position:absolute;inset:0;background:linear-gradient(140deg,transparent 48%,rgba(0,0,0,.3))}
.menx-anatomy-visual img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.menx-anatomy-visual figure:hover img{transform:scale(1.09)}
.menx-anatomy-visual figcaption{position:absolute;left:24px;bottom:22px;color:#fff;font-size:14px;letter-spacing:.14em;font-weight:800;z-index:3}
.menx-visual-ring{position:absolute;border:1px solid color-mix(in srgb,var(--gold) 55%,transparent);border-radius:50%;animation:menSpin 22s linear infinite}
.ring-one{width:540px;height:540px}
.ring-two{width:410px;height:410px;border-style:dashed;animation-direction:reverse;animation-duration:16s}
.menx-vertical-label{position:absolute;right:-5px;top:25%;writing-mode:vertical-rl;font-size:14px;letter-spacing:.2em;color:var(--text-soft);z-index:4}
.menx-corner-note{position:absolute;left:4%;bottom:3%;font-size:14px;line-height:1.8;color:var(--text-soft);z-index:4}
.menx-corner-note b{color:var(--text);font-family:var(--font-display);font-size:20px}
.menx-stat-strip{display:grid;grid-template-columns:repeat(3,1fr);max-width:860px;margin:40px auto 0;border-top:1px solid var(--line)}
.menx-stat-strip div{text-align:center;padding:25px 12px;border-right:1px solid var(--line)}
.menx-stat-strip div:last-child{border-right:0}
.menx-stat-strip strong{display:block;font-family:var(--font-display);font-size:34px;color:var(--gold)}
.menx-stat-strip span{font-size:14px;color:var(--text-soft);letter-spacing:.08em}

/* 05 — staggered numbered editorial process */
.menx-process{padding:145px 0 120px;background:var(--bg);overflow:hidden;isolation:isolate}
.menx-process-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.menx-process-bg>span{position:absolute;right:-6vw;top:12%;font-family:var(--font-display);font-size:clamp(120px,22vw,310px);font-weight:700;color:transparent;-webkit-text-stroke:1px color-mix(in srgb,var(--text) 10%,transparent);transform:rotate(-7deg);animation:menDrift 12s ease-in-out infinite}
.menx-process-bg i{position:absolute;width:30vw;aspect-ratio:1;border:1px solid color-mix(in srgb,var(--gold) 25%,transparent);border-radius:50%;left:-15vw;bottom:-20vw;animation:menSpin 28s linear infinite}
.menx-process-bg i:last-child{width:18vw;left:7vw;bottom:-8vw;border-style:dashed;animation-direction:reverse}
.menx-process .menx-wrap{position:relative;z-index:2}
.menx-process-head{grid-template-columns:1fr .6fr;margin-bottom:70px}
.menx-process-list{max-width:1050px;margin:auto;display:grid;gap:0}
.menx-process-item{position:relative;display:grid;grid-template-columns:70px 72px minmax(0,1fr) 130px;gap:24px;align-items:center;padding:32px 0;border-top:1px solid var(--line);min-height:165px;overflow:hidden;transition:padding .55s var(--ease)}
.menx-process-item:last-child{border-bottom:1px solid var(--line)}
.menx-process-item::before{content:"";position:absolute;inset:8px -100% 8px 0;background:linear-gradient(90deg,color-mix(in srgb,var(--gold) 10%,transparent),transparent 70%);transform:translateX(-105%);transition:transform .8s var(--ease);z-index:-1}
.menx-process-item:hover::before{transform:translateX(0)}
.menx-process-item:hover{padding-left:18px}
.menx-process-no{font-family:var(--font-display);font-size:26px;color:var(--gold)}
.menx-process-icon{width:58px;height:58px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;color:var(--gold);transition:transform .5s var(--ease),background .4s}
.menx-process-item:hover .menx-process-icon{transform:rotate(12deg) scale(1.08);background:var(--surface)}
.menx-process-copy small{display:block;letter-spacing:.16em;font-weight:900;color:var(--accent)}
.menx-process-copy h3{font-size:29px;margin:6px 0}
.menx-process-copy p{color:var(--text-soft);max-width:610px}
.menx-process-word{font-family:var(--font-display);font-size:22px;letter-spacing:.08em;color:transparent;-webkit-text-stroke:1px color-mix(in srgb,var(--text) 22%,transparent);text-align:right;transition:letter-spacing .5s var(--ease),color .5s}
.menx-process-item:hover .menx-process-word{letter-spacing:.18em;color:var(--gold)}

/* 06 — floating swatch laboratory */
.menx-cloth{padding:145px 0 120px;background:var(--surface);overflow:hidden;isolation:isolate}
.menx-cloth-glow{position:absolute;width:65vw;height:65vw;right:-30vw;top:-20vw;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--gold) 15%,transparent),transparent 65%);animation:menFloat 11s ease-in-out infinite}
.menx-cloth-head{margin-bottom:60px}
.menx-swatch-lab{position:relative;max-width:1120px;height:680px;margin:auto}
.menx-swatch-main{position:absolute;left:50%;top:0;transform:translateX(-50%);width:min(49vw,560px);height:570px;overflow:hidden;clip-path:polygon(7% 0,100% 7%,93% 100%,0 92%);box-shadow:0 30px 65px rgba(0,0,0,.2)}
.menx-swatch-main img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease);animation:menSlowZoom 15s ease-in-out infinite alternate}
.menx-swatch-main:hover img{transform:scale(1.1)}
.menx-swatch-main::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.6),transparent 55%)}
.menx-swatch-overlay{position:absolute;left:28px;bottom:26px;z-index:2;color:#fff}
.menx-swatch-overlay span{display:block;letter-spacing:.18em;font-weight:800}
.menx-swatch-overlay b{display:block;font-family:var(--font-display);font-size:28px;margin-top:5px}
.menx-swatch-card{position:absolute;width:245px;height:245px;overflow:hidden;border-radius:50%;box-shadow:0 24px 50px rgba(0,0,0,.2);border:8px solid var(--surface);z-index:4}
.menx-swatch-card img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.menx-swatch-card::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.6),transparent 60%)}
.menx-swatch-card:hover img{transform:scale(1.12)}
.swatch-a{left:1%;top:70px;animation:menOrbitA 7s ease-in-out infinite}
.swatch-b{right:1%;bottom:90px;animation:menOrbitB 8s ease-in-out infinite}
.menx-swatch-card>div{position:absolute;left:18px;bottom:17px;color:#fff;z-index:2}
.menx-swatch-card span{display:block;letter-spacing:.14em;font-weight:800}
.menx-swatch-card b{font-family:var(--font-display);font-size:20px}
.menx-swatch-note{position:absolute;left:50%;bottom:0;transform:translateX(-50%);text-align:center;z-index:5;padding:18px 25px;min-width:340px;background:color-mix(in srgb,var(--surface) 86%,transparent);backdrop-filter:blur(12px);border:1px solid var(--line)}
.menx-note-number{font-family:var(--font-display);color:var(--gold);margin-right:10px}
.menx-swatch-note b{font-size:15px;letter-spacing:.13em}
.menx-swatch-note p{font-size:14px!important;color:var(--text-soft);margin:7px 0 10px}
.menx-swatch-note .text-link{font-size:14px;color:var(--text);font-weight:800}
.menx-fabric-marquee{position:absolute;left:0;right:0;bottom:120px;white-space:nowrap;overflow:hidden;pointer-events:none;z-index:0}
.menx-fabric-marquee span{display:inline-block;font-family:var(--font-display);font-size:clamp(55px,9vw,120px);color:transparent;-webkit-text-stroke:1px color-mix(in srgb,var(--text) 10%,transparent);animation:menMarquee 18s linear infinite}

/* 08 — dark/light adaptive closing statement */
.menx-cta{min-height:670px;display:grid;align-items:center;overflow:hidden;background:var(--ink);color:var(--cream);isolation:isolate}
.menx-cta-noise{position:absolute;inset:0;opacity:.13;background-image:radial-gradient(rgba(255,255,255,.7) .7px,transparent .7px);background-size:8px 8px;animation:menNoise 7s steps(6) infinite}
.menx-cta-orbit{position:absolute;border:1px solid rgba(201,173,112,.28);border-radius:50%;animation:menSpin 24s linear infinite}
.menx-cta-orbit::after{content:"";position:absolute;width:9px;height:9px;background:var(--gold);border-radius:50%;left:12%;top:7%;box-shadow:0 0 25px var(--gold)}
.orbit-a{width:58vw;height:58vw;right:-22vw;top:-15vw}
.orbit-b{width:32vw;height:32vw;left:-13vw;bottom:-16vw;animation-direction:reverse}
.menx-cta-grid{display:grid;grid-template-columns:120px minmax(0,800px) 120px;gap:35px;align-items:center}
.menx-cta-index{align-self:start;display:flex;flex-direction:column;gap:13px;letter-spacing:.16em;color:var(--gold);font-weight:800}
.menx-cta-index span{font-family:var(--font-display);font-size:30px}
.menx-cta-index i{width:55px;height:1px;background:currentColor}
.menx-cta-copy{text-align:center;position:relative;z-index:2}
.menx-cta-copy .menx-kicker{color:var(--gold)}
.menx-cta-copy h2{font-family:var(--font-display);font-size:clamp(50px,7vw,94px);line-height:.91;letter-spacing:-.055em;color:var(--cream);margin:15px 0 22px}
.menx-cta-copy p{max-width:620px;margin:auto;color:rgba(245,241,231,.82)}
.menx-cta-copy .svc-cta-actions{margin-top:30px}
.menx-cta-copy .service-btn-primary{background:var(--gold);color:#141b18}
.menx-cta-copy .service-btn-ghost{color:var(--cream);border-color:rgba(245,241,231,.35)}
.menx-cta-signature{display:flex;flex-direction:column;gap:10px;align-self:end;color:rgba(245,241,231,.65);letter-spacing:.17em;text-align:right}
.menx-cta-signature span{position:relative}
.menx-cta-signature span::before{content:"";display:inline-block;width:24px;height:1px;background:var(--gold);margin-right:8px;vertical-align:middle}

/* scroll reveal — staggered and always visible after observation */
[data-men-reveal]{opacity:0;transform:translateY(38px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
[data-men-reveal].men-visible{opacity:1;transform:none}
.menx-process-item:nth-child(2){transition-delay:.08s}.menx-process-item:nth-child(3){transition-delay:.16s}.menx-process-item:nth-child(4){transition-delay:.24s}
.menx-swatch-card.swatch-a{transition-delay:.1s}.menx-swatch-card.swatch-b{transition-delay:.2s}

/* motion library */
@keyframes menHeroIn{from{opacity:0;transform:translateX(90px) scale(.96)}to{opacity:1;transform:none}}
@keyframes menSlowZoom{from{transform:scale(1.03)}to{transform:scale(1.12)}}
@keyframes menGridDrift{to{background-position:90px 90px}}
@keyframes menFloat{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(18px,-22px,0)}}
@keyframes menPhotoFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(.4deg)}}
@keyframes menSpin{to{transform:rotate(360deg)}}
@keyframes menPulse{0%,100%{opacity:.45}50%{opacity:1}}
@keyframes menDrift{0%,100%{transform:rotate(-7deg) translateY(0)}50%{transform:rotate(-5deg) translateY(18px)}}
@keyframes menOrbitA{0%,100%{transform:translate(0,0) rotate(-3deg)}50%{transform:translate(10px,-18px) rotate(3deg)}}
@keyframes menOrbitB{0%,100%{transform:translate(0,0) rotate(3deg)}50%{transform:translate(-10px,14px) rotate(-3deg)}}
@keyframes menMarquee{to{transform:translateX(-55%)}}
@keyframes menNoise{0%,100%{transform:translate(0,0)}25%{transform:translate(2px,-1px)}50%{transform:translate(-1px,2px)}75%{transform:translate(1px,1px)}}

/* dark mode: preserve the same compositions while improving contrast */
html.dark .menx-hero{background:var(--bg)}
html.dark .menx-hero-media{box-shadow:0 35px 85px rgba(0,0,0,.5)}
html.dark .menx-anatomy{background:var(--surface)}
html.dark .menx-anatomy-visual figure{box-shadow:0 35px 75px rgba(0,0,0,.5)}
html.dark .menx-process{background:var(--bg)}
html.dark .menx-cloth{background:var(--surface)}
html.dark .menx-swatch-card{border-color:var(--surface)}
html.dark .menx-swatch-note{background:rgba(29,41,35,.88)}
html.dark .menx-cta{background:#101613}
html.dark .menx-cta-copy h2{color:#F5F1E7}
html.dark .menx-cta-copy p{color:rgba(245,241,231,.86)}

/* RTL — layouts stay intact, direction changes only where content needs it */
html[dir="rtl"] .menx-hero-media{right:auto;left:5vw}
html[dir="rtl"] .menx-image-stamp{right:auto;left:24px;text-align:left}
html[dir="rtl"] .menx-hero-index{flex-direction:row-reverse;justify-content:flex-end}
html[dir="rtl"] .menx-hero-index i{transform:scaleX(-1)}
html[dir="rtl"] .menx-hero-meta{justify-content:flex-start}
html[dir="rtl"] .menx-anatomy-point:hover,html[dir="rtl"] .menx-anatomy-point.is-active{transform:translateX(-12px)}
html[dir="rtl"] .menx-vertical-label{right:auto;left:-5px}
html[dir="rtl"] .menx-corner-note{left:auto;right:4%}
html[dir="rtl"] .menx-process-item:hover{padding-left:0;padding-right:18px}
html[dir="rtl"] .menx-process-word{text-align:left}
html[dir="rtl"] .menx-swatch-main{left:auto;right:50%;transform:translateX(50%)}
html[dir="rtl"] .swatch-a{left:auto;right:1%}
html[dir="rtl"] .swatch-b{right:auto;left:1%}
html[dir="rtl"] .menx-swatch-overlay{left:auto;right:28px}
html[dir="rtl"] .menx-swatch-card>div{left:auto;right:18px}
html[dir="rtl"] .menx-cta-signature{text-align:left}
html[dir="rtl"] .menx-cta-signature span::before{margin-right:0;margin-left:8px}
html[dir="rtl"] .menx-hero-media::after{background:linear-gradient(270deg,var(--bg) 0%,transparent 38%),linear-gradient(0deg,rgba(0,0,0,.55),transparent 45%)}

/* staggered elements that do not use the shared reveal class */
.alt-flow-word,.alt-step{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .8s var(--ease);}
.alt-flow-word.is-visible,.alt-step.is-visible{opacity:1;transform:none;}
.alt-hotspot.is-active{color:var(--alt-accent);}
.alt-hotspot.is-active span{background:var(--alt-accent);color:#fff;box-shadow:0 0 18px rgba(85,122,104,.28);}
.alt-info-pulse{animation:altInfoPulse .45s var(--ease);}
@keyframes altInfoPulse{50%{transform:translateX(4px);opacity:.65}}

/* responsive */
@media (max-width:1024px){
  .menx-hero-media{width:48vw;right:2vw}
  .menx-hero-copy{max-width:62vw}
  .menx-anatomy-layout{gap:40px}
  .menx-anatomy-visual{height:570px}
  .menx-anatomy-visual figure{height:510px}
  .ring-one{width:460px;height:460px}.ring-two{width:350px;height:350px}
  .menx-process-item{grid-template-columns:55px 62px minmax(0,1fr) 90px;gap:18px}
  .menx-swatch-card{width:190px;height:190px}
  .menx-swatch-main{width:48vw;height:520px}
  .menx-swatch-lab{height:630px}
  .menx-cta-grid{grid-template-columns:75px 1fr 75px}
}
@media (max-width:767px){
  .service-men .menx-wrap,.service-men .service-container{width:min(100% - 32px,1240px)}
  .menx-hero{min-height:100svh;align-items:end}
  .menx-hero-media{position:absolute;inset:0;width:100%;height:100%;right:auto;clip-path:none;opacity:.92}
  .menx-hero-media::after{background:linear-gradient(0deg,rgba(20,27,24,.96) 0%,rgba(20,27,24,.70) 42%,rgba(20,27,24,.12) 80%),linear-gradient(90deg,transparent,rgba(0,0,0,.2))}
  .menx-hero-content{padding:100px 0 85px}
  .menx-hero h1{font-size:clamp(46px,13vw,68px);color:#fff}
  .menx-hero-lead{font-size:16px;color:rgba(255,255,255,.86)}
  .menx-hero-index{color:#fff}.menx-overline{color:#e2c989}
  .menx-actions{display:grid;grid-template-columns:1fr}
  .menx-hero-meta{display:grid;gap:9px;color:#fff}
  .menx-hero-meta span{font-size:14px}
  .menx-scroll-cue{display:none}
  .menx-section-head{grid-template-columns:1fr;gap:24px;margin-bottom:48px}
  .menx-section-head>p{margin:0;font-size:16px}
  .menx-section-head h2{font-size:clamp(44px,13vw,64px)}
  .menx-anatomy{padding:90px 0 75px}
  .menx-anatomy-layout{grid-template-columns:1fr;min-height:0;gap:45px}
  .menx-anatomy-visual{height:480px;order:-1}
  .menx-anatomy-visual figure{width:86%;height:430px}
  .ring-one{width:360px;height:360px}.ring-two{width:280px;height:280px}
  .menx-vertical-label{right:0;top:22%}
  .menx-corner-note{left:0;bottom:0}
  .menx-anatomy-point{grid-template-columns:42px 1fr;padding:25px 0}
  .menx-anatomy-point h3{font-size:24px}
  .menx-anatomy-point p{font-size:15px}
  .menx-stat-strip{grid-template-columns:1fr;max-width:330px}
  .menx-stat-strip div{border-right:0;border-bottom:1px solid var(--line);padding:18px}
  .menx-stat-strip div:last-child{border-bottom:0}
  .menx-process{padding:90px 0 78px}
  .menx-process-head{margin-bottom:45px}
  .menx-process-item{grid-template-columns:42px 48px 1fr;gap:13px;padding:24px 0;min-height:0}
  .menx-process-no{font-size:20px}.menx-process-icon{width:44px;height:44px}
  .menx-process-copy h3{font-size:23px}
  .menx-process-copy p{font-size:15px}
  .menx-process-word{display:none}
  .menx-cloth{padding:90px 0 80px}
  .menx-swatch-lab{height:730px}
  .menx-swatch-main{width:88vw;height:490px}
  .menx-swatch-card{width:150px;height:150px;border-width:5px}
  .swatch-a{left:0;top:375px}.swatch-b{right:0;bottom:auto;top:470px}
  .menx-swatch-note{min-width:0;width:calc(100% - 12px);bottom:0;padding:15px}
  .menx-fabric-marquee{bottom:80px}
  .menx-fabric-marquee span{font-size:60px}
  .menx-cta{min-height:620px}
  .menx-cta-grid{grid-template-columns:1fr;gap:25px;text-align:center}
  .menx-cta-index{flex-direction:row;justify-content:center;align-items:center}
  .menx-cta-index i{width:35px}
  .menx-cta-signature{display:none}
  .menx-cta-copy h2{font-size:clamp(44px,13vw,66px)}
  .menx-cta-copy p{font-size:16px}
  .menx-cta-copy .svc-cta-actions{display:grid;grid-template-columns:1fr}
  .orbit-a{width:115vw;height:115vw;right:-50vw;top:-10vw}.orbit-b{width:75vw;height:75vw;left:-42vw;bottom:-30vw}
  html[dir="rtl"] .menx-vertical-label{right:auto;left:0}
  html[dir="rtl"] .menx-corner-note{left:auto;right:0}
  html[dir="rtl"] .swatch-a{left:auto;right:0}
  html[dir="rtl"] .swatch-b{right:auto;left:0}
}
@media (prefers-reduced-motion:reduce){
  [data-men-reveal]{opacity:1;transform:none}
  .menx-hero-media img,.menx-grid-lines,.menx-orb,.menx-ambient span,.menx-anatomy-visual figure,
  .menx-process-bg>span,.menx-process-bg i,.menx-swatch-card,.menx-swatch-main img,.menx-fabric-marquee span,
  .menx-cta-noise,.menx-cta-orbit{animation:none!important}
}

/* =========================================================
   MEN'S SERVICES V2 — DENSER EDITORIAL COMPOSITIONS
   Sections 01 / 03 / 05 / 06 / 08
   ========================================================= */
.service-men .lx1-hero,.service-men .lx3-fit,.service-men .lx5-process,.service-men .lx6-cloth,.service-men .lx8-cta{position:relative;overflow:hidden;isolation:isolate}
.service-men .lx1-hero p,.service-men .lx3-fit p,.service-men .lx5-process p,.service-men .lx6-cloth p,.service-men .lx8-cta p{font-size:16px;line-height:1.75}
.service-men .lx1-hero a,.service-men .lx3-fit a,.service-men .lx5-process a,.service-men .lx6-cloth a,.service-men .lx8-cta a{font-size:14px}
/* 01 */
.lx1-hero{min-height:calc(100svh - 82px);background:var(--bg);display:grid;align-items:center}
.lx1-bg{position:absolute;inset:0;z-index:-3;overflow:hidden}.lx1-line{position:absolute;background:var(--line);opacity:.7}.lx1-line.l1{width:1px;height:100%;left:12%}.lx1-line.l2{width:70%;height:1px;left:0;top:76%}.lx1-circle{position:absolute;border:1px solid color-mix(in srgb,var(--gold) 35%,transparent);border-radius:50%;animation:lxFloat 8s ease-in-out infinite}.lx1-circle.c1{width:38vw;height:38vw;right:-13vw;top:-12vw}.lx1-circle.c2{width:16vw;height:16vw;left:-5vw;bottom:5vw;animation-delay:-3s}.lx1-no{position:absolute;right:4vw;bottom:-8vw;font:700 25vw/.7 var(--font-display);color:transparent;-webkit-text-stroke:1px color-mix(in srgb,var(--text) 9%,transparent);transform:rotate(-8deg);animation:lxDrift 12s ease-in-out infinite}
.lx1-image{position:absolute;right:5vw;top:6%;width:min(43vw,600px);height:88%;z-index:-1;overflow:hidden;clip-path:polygon(8% 0,100% 6%,94% 100%,0 93%);box-shadow:0 35px 90px rgba(0,0,0,.24);animation:lxRevealRight 1.1s ease both}.lx1-image:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--bg),transparent 32%),linear-gradient(0deg,rgba(0,0,0,.65),transparent 55%)}.lx1-image img{width:100%;height:100%;object-fit:cover;filter:saturate(.78) contrast(1.08);animation:lxZoom 14s ease-in-out infinite alternate}.lx1-image-caption{position:absolute;left:28px;bottom:25px;color:#fff;z-index:2;display:grid;gap:5px}.lx1-image-caption span,.lx1-image-caption b{font-size:14px;letter-spacing:.14em}.lx1-image-caption b{font-family:var(--font-display);font-size:20px}
.lx1-inner{position:relative;padding:85px 0}.lx1-vertical{position:absolute;left:0;top:100px;writing-mode:vertical-rl;font-size:14px;letter-spacing:.18em;color:var(--text-soft);display:flex;gap:10px;align-items:center}.lx1-vertical i{width:1px;height:50px;background:var(--gold)}.lx1-copy{max-width:720px;margin-left:8%}.lx1-kicker{display:flex;align-items:center;gap:12px;color:var(--gold);font-size:14px;letter-spacing:.16em;font-weight:900;margin-bottom:25px}.lx1-kicker i{width:55px;height:1px;background:currentColor}.lx1-eyebrow{font-size:14px!important;letter-spacing:.2em;font-weight:900;color:var(--accent);margin:0 0 14px}.lx1-copy h1{font:700 clamp(58px,8vw,112px)/.86 var(--font-display);letter-spacing:-.06em;margin:0;max-width:780px}.lx1-copy h1 em{font-weight:400}.lx1-lead{max-width:600px;color:var(--text-soft);margin:28px 0 0}.lx1-buttons{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}.lx1-facts{display:grid;grid-template-columns:repeat(3,1fr);max-width:620px;margin-top:42px;border-top:1px solid var(--line)}.lx1-facts div{padding:18px 15px;border-right:1px solid var(--line)}.lx1-facts div:last-child{border-right:0}.lx1-facts strong{display:block;font:700 27px var(--font-display);color:var(--gold)}.lx1-facts span{font-size:14px;color:var(--text-soft)}.lx1-bottom{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);display:flex;gap:13px;align-items:center;font-size:14px;letter-spacing:.14em;color:var(--text-soft);white-space:nowrap}.lx1-bottom i{width:42px;height:1px;background:currentColor}.lx1-bottom b{color:var(--text)}
/* 03 */
.lx3-fit{padding:135px 0 95px;background:var(--surface)}.lx3-bg{position:absolute;inset:0;z-index:-1}.lx3-word{position:absolute;right:-5vw;top:2%;font:700 24vw/.8 var(--font-display);color:transparent;-webkit-text-stroke:1px color-mix(in srgb,var(--text) 8%,transparent);transform:rotate(-7deg);animation:lxDrift 13s ease-in-out infinite}.lx3-dot{position:absolute;border-radius:50%;filter:blur(55px);opacity:.2;animation:lxFloat 9s ease-in-out infinite}.lx3-dot.d1{width:280px;height:280px;background:var(--gold);left:-80px;top:18%}.lx3-dot.d2{width:300px;height:300px;background:var(--accent);right:-90px;bottom:0;animation-delay:-4s}.lx3-wrap{width:min(100% - 48px,1240px);margin:auto}.lx3-head{display:grid;grid-template-columns:1.1fr .75fr;gap:60px;align-items:end;margin-bottom:60px}.lx3-kicker,.lx5-kicker,.lx6-kicker,.lx8-kicker{display:block;color:var(--gold);font-size:14px;letter-spacing:.18em;font-weight:900;margin-bottom:14px}.lx3-head h2,.lx5-head h2,.lx6-head h2{font:700 clamp(50px,6.5vw,88px)/.9 var(--font-display);letter-spacing:-.055em;margin:0}.lx3-head h2 em,.lx5-head h2 em,.lx6-head h2 em,.lx8-copy h2 em{font-weight:400}.lx3-intro{max-width:440px;margin-left:auto;color:var(--text-soft)}.lx3-rule{display:block;width:100%;height:1px;background:var(--line);margin-top:24px}.lx3-grid{display:grid;grid-template-columns:1fr 1fr;gap:55px;align-items:stretch}.lx3-photo{min-height:560px;position:relative;overflow:hidden;box-shadow:0 30px 65px rgba(0,0,0,.18);clip-path:polygon(0 5%,94% 0,100% 94%,7% 100%);animation:lxPhotoFloat 7s ease-in-out infinite}.lx3-photo img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}.lx3-photo:hover img{transform:scale(1.08)}.lx3-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(140deg,transparent 40%,rgba(0,0,0,.55))}.lx3-photo-label{position:absolute;left:25px;bottom:24px;color:#fff;z-index:2;font-size:14px;letter-spacing:.14em;font-weight:800}.lx3-scan{position:absolute;left:0;right:0;top:15%;height:1px;background:rgba(255,255,255,.7);z-index:2;box-shadow:0 0 18px rgba(255,255,255,.55);animation:lxScan 5s ease-in-out infinite}.lx3-cards{display:grid;border-top:1px solid var(--line)}.lx3-cards article{display:grid;grid-template-columns:48px 1fr 24px;gap:18px;padding:27px 0;border-bottom:1px solid var(--line);position:relative;transition:transform .45s ease,padding .45s ease}.lx3-cards article:hover{transform:translateX(12px);padding-left:12px}.lx3-cards article>span{font:700 22px var(--font-display);color:var(--gold)}.lx3-cards article b{font-size:14px;letter-spacing:.16em;color:var(--accent)}.lx3-cards h3{font-size:27px;margin:6px 0}.lx3-cards p{color:var(--text-soft);margin:0}.lx3-cards article>i{color:var(--gold);font-size:14px;margin-top:5px}.lx3-metrics{display:grid;grid-template-columns:repeat(3,1fr) 1.4fr;border-top:1px solid var(--line);margin-top:42px}.lx3-metrics div{padding:20px;border-right:1px solid var(--line)}.lx3-metrics strong{display:block;font:700 31px var(--font-display);color:var(--gold)}.lx3-metrics span{font-size:14px;letter-spacing:.1em;color:var(--text-soft)}.lx3-metrics a{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--text);font-weight:800;text-decoration:none}.lx3-metrics a i{color:var(--gold)}
/* 05 */
.lx5-process{padding:135px 0 100px;background:var(--bg)}.lx5-bg{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}.lx5-bg>span{position:absolute;font:700 16vw/.8 var(--font-display);color:transparent;-webkit-text-stroke:1px color-mix(in srgb,var(--text) 8%,transparent);animation:lxDrift 14s ease-in-out infinite}.lx5-bg>span:first-child{right:-3vw;top:3%;transform:rotate(-8deg)}.lx5-bg>span:nth-child(2){left:-7vw;bottom:-5%;transform:rotate(7deg);animation-delay:-5s}.lx5-bg i{position:absolute;width:380px;height:380px;border:1px solid color-mix(in srgb,var(--gold) 25%,transparent);border-radius:50%;left:-150px;top:35%;animation:lxSpin 24s linear infinite}.lx5-wrap{width:min(100% - 48px,1200px);margin:auto;position:relative;z-index:1}.lx5-head{display:grid;grid-template-columns:1fr .65fr;gap:60px;align-items:end;margin-bottom:58px}.lx5-head>p{color:var(--text-soft);max-width:410px;margin:0 0 6px auto}.lx5-timeline{border-top:1px solid var(--line)}.lx5-step{display:grid;grid-template-columns:105px 1fr 110px;gap:30px;min-height:170px;padding:27px 0;border-bottom:1px solid var(--line);align-items:center;position:relative;transition:padding .5s ease}.lx5-step:before{content:"";position:absolute;inset:9px 0;background:linear-gradient(90deg,color-mix(in srgb,var(--gold) 9%,transparent),transparent 70%);transform:scaleX(0);transform-origin:left;transition:transform .65s ease;z-index:-1}.lx5-step:hover{padding-left:16px}.lx5-step:hover:before{transform:scaleX(1)}.lx5-marker{height:100%;display:grid;grid-template-columns:42px 1fr;align-items:center;gap:12px}.lx5-marker span{font:700 25px var(--font-display);color:var(--gold)}.lx5-marker i{width:50px;height:50px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;color:var(--gold);transition:transform .5s ease,background .4s}.lx5-step:hover .lx5-marker i{transform:rotate(12deg) scale(1.12);background:var(--surface)}.lx5-content>span{font-size:14px;letter-spacing:.16em;font-weight:900;color:var(--accent)}.lx5-content h3{font-size:29px;margin:5px 0}.lx5-content p{max-width:680px;color:var(--text-soft);margin:0}.lx5-tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:14px}.lx5-tags b{font-size:14px;border:1px solid var(--line);padding:5px 9px;letter-spacing:.08em}.lx5-side{font:700 22px var(--font-display);letter-spacing:.12em;text-align:right;color:transparent;-webkit-text-stroke:1px color-mix(in srgb,var(--text) 22%,transparent);transition:color .4s,letter-spacing .4s}.lx5-step:hover .lx5-side{color:var(--gold);letter-spacing:.2em}.lx5-footer{display:grid;grid-template-columns:150px 1fr auto;gap:20px;align-items:center;margin-top:32px}.lx5-footer span{font-size:14px;color:var(--gold);letter-spacing:.15em;font-weight:900}.lx5-footer strong{font:400 25px var(--font-display)}.lx5-footer a{font-size:14px;font-weight:800;color:var(--text);text-decoration:none}.lx5-footer a i{color:var(--gold)}
/* 06 */
.lx6-cloth{padding:135px 0 100px;background:var(--surface)}.lx6-glow{position:absolute;width:60vw;height:60vw;right:-25vw;top:-15vw;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--gold) 18%,transparent),transparent 68%);animation:lxFloat 10s ease-in-out infinite}.lx6-outline{position:absolute;width:500px;height:500px;border:1px solid color-mix(in srgb,var(--gold) 22%,transparent);border-radius:50%;left:-230px;bottom:-180px;animation:lxSpin 26s linear infinite}.lx6-wrap{width:min(100% - 48px,1240px);margin:auto;position:relative}.lx6-head{display:grid;grid-template-columns:1fr .65fr;gap:60px;align-items:end;margin-bottom:55px}.lx6-head>p{max-width:440px;margin:0 0 5px auto;color:var(--text-soft)}.lx6-collage{height:620px;position:relative}.lx6-main{position:absolute;left:50%;top:0;transform:translateX(-50%);width:min(50vw,590px);height:520px;overflow:hidden;clip-path:polygon(7% 0,100% 8%,93% 100%,0 92%);box-shadow:0 30px 70px rgba(0,0,0,.2);animation:lxPhotoFloat 8s ease-in-out infinite}.lx6-main img{width:100%;height:100%;object-fit:cover;transition:transform 1s ease;animation:lxZoom 15s ease-in-out infinite alternate}.lx6-main:hover img{transform:scale(1.08)}.lx6-main:after,.lx6-card:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.68),transparent 55%)}.lx6-main figcaption,.lx6-card figcaption{position:absolute;left:28px;bottom:24px;color:#fff;z-index:2;display:grid;gap:4px}.lx6-main figcaption span,.lx6-card figcaption span{font-size:14px;letter-spacing:.15em;font-weight:800}.lx6-main figcaption b{font:700 28px var(--font-display)}.lx6-main figcaption small{font-size:14px;opacity:.88}.lx6-card{position:absolute;width:230px;height:230px;overflow:hidden;border:8px solid var(--surface);box-shadow:0 25px 50px rgba(0,0,0,.2);border-radius:50%;z-index:3}.lx6-card img{width:100%;height:100%;object-fit:cover;transition:transform .9s ease}.lx6-card:hover img{transform:scale(1.12)}.lx6-card figcaption{left:17px;bottom:15px}.lx6-card figcaption b{font:700 19px var(--font-display)}.card-a{left:2%;top:70px;animation:lxOrbitA 7s ease-in-out infinite}.card-b{right:2%;bottom:60px;animation:lxOrbitB 8s ease-in-out infinite}.lx6-note{position:absolute;left:50%;bottom:15px;transform:translateX(-50%);display:flex;align-items:center;gap:15px;min-width:360px;padding:16px 23px;background:color-mix(in srgb,var(--surface) 88%,transparent);border:1px solid var(--line);backdrop-filter:blur(14px);z-index:4}.lx6-note>span{font:700 30px var(--font-display);color:var(--gold)}.lx6-note b{font-size:15px;letter-spacing:.13em}.lx6-note p{font-size:14px!important;color:var(--text-soft);margin:5px 0 0}.lx6-swatch-row{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:center;gap:18px;align-items:center;font:700 14px var(--font-display);letter-spacing:.12em;color:var(--text-soft);z-index:0}.lx6-swatch-row i{width:35px;height:1px;background:var(--line)}.lx6-bottom{display:grid;grid-template-columns:repeat(3,1fr) 1.3fr;border-top:1px solid var(--line);margin-top:10px}.lx6-bottom div{padding:18px;border-right:1px solid var(--line)}.lx6-bottom strong{font:700 25px var(--font-display);color:var(--gold);margin-right:8px}.lx6-bottom span{font-size:14px;color:var(--text-soft)}.lx6-bottom a{display:flex;align-items:center;justify-content:center;gap:9px;text-decoration:none;color:var(--text);font-weight:800}.lx6-bottom a i{color:var(--gold)}
/* 08 */
.lx8-cta{min-height:760px;background:var(--ink);color:var(--cream);display:flex;align-items:center}.lx8-bg{position:absolute;inset:0;z-index:0;overflow:hidden}.lx8-ring{position:absolute;border:1px solid rgba(201,173,112,.28);border-radius:50%;animation:lxSpin 25s linear infinite}.lx8-ring.r1{width:70vw;height:70vw;right:-28vw;top:-25vw}.lx8-ring.r2{width:35vw;height:35vw;left:-15vw;bottom:-16vw;animation-direction:reverse}.lx8-grid{position:absolute;inset:0;opacity:.11;background-image:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);background-size:80px 80px;mask-image:linear-gradient(90deg,#000,transparent 80%);animation:lxGrid 18s linear infinite}.lx8-number{position:absolute;right:3vw;bottom:-8vw;font:700 30vw/.7 var(--font-display);color:transparent;-webkit-text-stroke:1px rgba(245,241,231,.08);transform:rotate(-8deg)}.lx8-wrap{width:min(100% - 48px,1240px);margin:auto;position:relative;z-index:2}.lx8-top{display:flex;align-items:center;gap:15px;font-size:14px;letter-spacing:.14em;color:rgba(245,241,231,.7);border-bottom:1px solid rgba(245,241,231,.2);padding-bottom:18px}.lx8-top i{width:50px;height:1px;background:var(--gold)}.lx8-main{display:grid;grid-template-columns:380px 1fr;gap:75px;align-items:center;padding:70px 0}.lx8-image{height:500px;position:relative;overflow:hidden;clip-path:polygon(7% 0,100% 7%,94% 100%,0 93%);box-shadow:0 30px 70px rgba(0,0,0,.45);animation:lxPhotoFloat 8s ease-in-out infinite}.lx8-image img{width:100%;height:100%;object-fit:cover;filter:saturate(.7);animation:lxZoom 15s ease-in-out infinite alternate}.lx8-image:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.65),transparent 55%)}.lx8-image>span{position:absolute;left:25px;bottom:25px;z-index:2;color:#fff;font:700 18px/1.1 var(--font-display);letter-spacing:.08em}.lx8-copy{max-width:760px}.lx8-copy h2{font:700 clamp(55px,7.5vw,100px)/.87 var(--font-display);letter-spacing:-.06em;margin:10px 0 25px;color:var(--cream)}.lx8-copy p{max-width:620px;color:rgba(245,241,231,.84)}.lx8-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}.lx8-copy .service-btn-primary{background:var(--gold);color:#141b18}.lx8-copy .service-btn-ghost{color:var(--cream);border-color:rgba(245,241,231,.35)}.lx8-points{display:flex;gap:20px;flex-wrap:wrap;margin-top:25px;color:rgba(245,241,231,.72)}.lx8-points span{font-size:14px}.lx8-points i{color:var(--gold);margin-right:6px}.lx8-bottom{display:flex;justify-content:space-between;align-items:center;border-top:1px solid rgba(245,241,231,.2);padding-top:18px;font-size:14px;letter-spacing:.12em;color:rgba(245,241,231,.62)}.lx8-bottom strong{color:var(--gold)}
/* guaranteed visible + entrance animation; JS can still add men-visible */
.service-men [data-men-reveal]{opacity:1!important;transform:none!important}
.service-men .lx1-copy,.service-men .lx3-head,.service-men .lx3-photo,.service-men .lx3-cards,.service-men .lx3-metrics,.service-men .lx5-head,.service-men .lx5-step,.service-men .lx6-head,.service-men .lx6-main,.service-men .lx6-card,.service-men .lx6-note,.service-men .lx6-bottom,.service-men .lx8-main,.service-men .lx8-top,.service-men .lx8-bottom{animation:lxContentIn .8s cubic-bezier(.2,.7,.2,1) both}
.service-men .lx5-step:nth-child(2){animation-delay:.08s}.service-men .lx5-step:nth-child(3){animation-delay:.16s}.service-men .lx5-step:nth-child(4){animation-delay:.24s}.service-men .lx6-card.card-a{animation:lxOrbitA 7s ease-in-out infinite, lxContentIn .8s .12s both}.service-men .lx6-card.card-b{animation:lxOrbitB 8s ease-in-out infinite, lxContentIn .8s .2s both}
@keyframes lxContentIn{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}@keyframes lxRevealRight{from{opacity:0;transform:translateX(80px) scale(.97)}to{opacity:1;transform:none}}@keyframes lxZoom{from{transform:scale(1.03)}to{transform:scale(1.12)}}@keyframes lxFloat{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(18px,-22px,0)}}@keyframes lxDrift{0%,100%{translate:0 0}50%{translate:0 18px}}@keyframes lxPhotoFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-9px) rotate(.35deg)}}@keyframes lxScan{0%,100%{top:12%;opacity:.2}50%{top:85%;opacity:1}}@keyframes lxSpin{to{transform:rotate(360deg)}}@keyframes lxOrbitA{0%,100%{transform:translate(0,0)}50%{transform:translate(12px,-17px)}}@keyframes lxOrbitB{0%,100%{transform:translate(0,0)}50%{transform:translate(-10px,15px)}}@keyframes lxGrid{to{background-position:80px 80px}}
/* dark mode keeps the same compositions */
html.dark .lx3-fit,html.dark .lx6-cloth{background:var(--surface)}html.dark .lx1-hero{background:var(--bg)}html.dark .lx5-process{background:var(--bg)}html.dark .lx8-cta{background:#101613}.service-men .lx8-copy h2{color:var(--cream)}
@media(max-width:1024px){.lx1-image{width:50vw}.lx1-copy{margin-left:0;max-width:65vw}.lx3-head,.lx5-head,.lx6-head{grid-template-columns:1fr;gap:25px}.lx3-intro,.lx5-head>p,.lx6-head>p{margin:0}.lx3-grid{grid-template-columns:1fr}.lx3-photo{min-height:480px}.lx6-main{width:55vw}.lx8-main{grid-template-columns:300px 1fr;gap:45px}.lx8-image{height:440px}}
@media(max-width:700px){.service-men .lx1-hero{min-height:850px;align-items:end}.lx1-image{inset:0;width:100%;height:100%;right:auto;top:auto;clip-path:none;opacity:.75}.lx1-image:after{background:linear-gradient(0deg,rgba(20,27,24,.97),rgba(20,27,24,.55) 50%,rgba(20,27,24,.1))}.lx1-copy{max-width:none;padding-bottom:35px}.lx1-copy h1{font-size:clamp(48px,15vw,70px);color:#fff}.lx1-lead{font-size:16px;color:rgba(255,255,255,.88)}.lx1-eyebrow,.lx1-kicker{color:#e2c989}.lx1-facts{grid-template-columns:1fr}.lx1-facts div{border-right:0;border-bottom:1px solid rgba(255,255,255,.2);padding:12px 0}.lx1-facts div:last-child{border-bottom:0}.lx1-vertical,.lx1-bottom{display:none}.lx1-buttons{display:grid}.lx3-fit,.lx5-process,.lx6-cloth{padding:90px 0 75px}.lx3-wrap,.lx5-wrap,.lx6-wrap,.lx8-wrap{width:min(100% - 30px,1240px)}.lx3-head h2,.lx5-head h2,.lx6-head h2{font-size:clamp(46px,14vw,64px)}.lx3-grid{gap:28px}.lx3-photo{min-height:420px}.lx3-cards article{grid-template-columns:38px 1fr 18px;padding:22px 0}.lx3-cards h3{font-size:23px}.lx3-metrics{grid-template-columns:1fr 1fr}.lx3-metrics div:nth-child(2){border-right:0}.lx3-metrics div:nth-child(3){border-top:1px solid var(--line)}.lx3-metrics a{grid-column:1/-1;border-top:1px solid var(--line);padding:18px}.lx5-step{grid-template-columns:52px 1fr;gap:15px;min-height:0;padding:25px 0}.lx5-marker{grid-template-columns:1fr;align-content:start;gap:8px}.lx5-side{display:none}.lx5-content h3{font-size:23px}.lx5-footer{grid-template-columns:1fr;gap:10px}.lx6-collage{height:720px}.lx6-main{width:88vw;height:500px}.lx6-card{width:145px;height:145px;border-width:5px}.card-a{left:0;top:90px}.card-b{right:0;bottom:115px}.lx6-note{min-width:0;width:calc(100% - 10px);bottom:25px}.lx6-swatch-row{bottom:0;gap:9px;font-size:13px}.lx6-bottom{grid-template-columns:1fr}.lx6-bottom div{border-right:0;border-bottom:1px solid var(--line)}.lx6-bottom a{padding:18px}.lx8-cta{min-height:800px}.lx8-top{font-size:13px}.lx8-top span:last-child{display:none}.lx8-main{grid-template-columns:1fr;gap:30px;padding:45px 0}.lx8-image{height:320px}.lx8-copy h2{font-size:clamp(48px,14vw,70px)}.lx8-points{display:grid;gap:9px}.lx8-bottom{display:grid;gap:9px}.lx8-number{font-size:55vw}}
@media(prefers-reduced-motion:reduce){.service-men .lx1-circle,.service-men .lx1-no,.service-men .lx1-image img,.service-men .lx3-word,.service-men .lx3-dot,.service-men .lx3-photo,.service-men .lx3-scan,.service-men .lx5-bg>span,.service-men .lx5-bg i,.service-men .lx6-glow,.service-men .lx6-outline,.service-men .lx6-main,.service-men .lx6-main img,.service-men .lx6-card,.service-men .lx8-ring,.service-men .lx8-grid,.service-men .lx1-copy,.service-men .lx3-head,.service-men .lx3-photo,.service-men .lx3-cards,.service-men .lx3-metrics,.service-men .lx5-head,.service-men .lx5-step,.service-men .lx6-head,.service-men .lx6-main,.service-men .lx6-card,.service-men .lx6-note,.service-men .lx6-bottom,.service-men .lx8-main,.service-men .lx8-top,.service-men .lx8-bottom{animation:none!important}}

/* =========================================================
   FIX PACK — requested corrections
   1) Home 2 / Section 03 — balanced poster layout (no clash, no dead gutter)
   2) Home 1 — type never below 14px, heavier weight, stronger contrast
   3) Responsive — fabric swatches, collections strip, thread map
   ========================================================= */

/* ---------------------------------------------------------
   1. HOME 2 — SECTION 03 (poster)
   The photo used to sit in the bottom-left of an oversized
   3/4 box while the outline frame cut across it, which left a
   large empty wedge on the left and made the two elements
   collide. The photo now fills the block and the outline sits
   behind it as an offset frame.
   --------------------------------------------------------- */
.h2-s3{padding:110px 0;overflow:hidden}
.h2-s3 .container{width:min(100% - 48px,var(--container));max-width:var(--container);margin-inline:auto;padding-inline:0}
.h2-s3-poster-inner{
  display:grid;
  grid-template-columns:44px minmax(280px,420px) minmax(0,1fr);
  gap:clamp(28px,4vw,64px);
  align-items:center;
}
.h2-s3-poster-vertical{min-height:0;height:auto;align-self:stretch}
.h2-s3-poster-visual{position:relative;aspect-ratio:4/5;width:100%;max-width:420px;margin-inline:0}
.h2-s3-poster-frame{
  position:absolute;inset:auto;left:auto;bottom:auto;right:-18px;top:-18px;
  width:100%;height:100%;border:3px solid var(--ink);z-index:0;
}
.h2-s3-poster-photo{
  position:relative;left:auto;bottom:auto;width:100%;height:100%;
  overflow:hidden;z-index:1;box-shadow:0 26px 60px rgba(0,0,0,.20);
}
.h2-s3-poster-copy{max-width:640px}

@media(max-width:1024px){
  .h2-s3{padding:80px 0}
  .h2-s3-poster-inner{grid-template-columns:40px minmax(0,1fr);grid-template-areas:"vert visual" "vert copy";gap:32px 34px;align-items:start}
  .h2-s3-poster-visual{grid-area:visual;max-width:360px}
  .h2-s3-poster-copy{grid-area:copy}
  .h2-s3-poster-frame{right:-14px;top:-14px}
}
@media(max-width:767px){
  .h2-s3{padding:62px 0}
  .h2-s3-poster-inner{grid-template-columns:minmax(0,1fr);grid-template-areas:"visual" "copy";gap:32px;text-align:center}
  .h2-s3-poster-vertical{display:none}
  .h2-s3-poster-visual{max-width:290px;margin-inline:auto}
  .h2-s3-poster-frame{right:-10px;top:-10px;border-width:2px}
  .h2-s3-poster-copy{margin-inline:auto}
}

/* ---------------------------------------------------------
   2. HOME 1 — readable typography + contrast
   --------------------------------------------------------- */
/* secondary text: noticeably darker in light mode, brighter in dark mode */
:root{--ink-soft:#3D4C44}
html.dark{--text-soft:rgba(245,241,231,.88)}
html:not(.dark) .home1-page{--text-soft:#39473F}
html.dark .home1-page{--text-soft:rgba(245,241,231,.9)}

.home1-page{color:var(--text)}
.home1-page p,
.home1-page li{font-size:16px;font-weight:500;line-height:1.72}

/* body / description copy — bigger and heavier */
.home1-page .hero-copy p{font-size:17px;font-weight:600;color:var(--text)}
.home1-page .fabric-head p,
.home1-page .stats-top p,
.home1-page .cta-inner p,
.home1-page .home-s3-description,
.home1-page .atelier-orbit-intro p,
.home1-page .process-step p,
.home1-page .home-s3-copy p{font-size:16px;font-weight:600;line-height:1.7}
.home1-page .atelier-orbit-card small{font-size:15px;font-weight:600;line-height:1.6}

/* small labels / eyebrows / captions — never below 14px, always bold */
.home1-page .hero-kicker,
.home1-page .hero-badge,
.home1-page .hero-scroll-cue,
.home1-page .hero-measure,
.home1-page .hero-stats div span,
.home1-page .process-head span,
.home1-page .mosaic-head span,
.home1-page .cta-inner span,
.home1-page .stat-item span,
.home1-page .fabric-card span,
.home1-page .home-s3-eyebrow,
.home1-page .home-s3-link,
.home1-page .home-s3-number,
.home1-page .home-s3-copy span,
.home1-page .home-s3-bottom,
.home1-page .home-s3-scroll-label,
.home1-page .home-s3-intro-image figcaption,
.home1-page .mosaic-footer-strip,
.home1-page .atelier-orbit-kicker,
.home1-page .atelier-orbit-count,
.home1-page .atelier-orbit-num,
.home1-page .atelier-orbit-footer,
.home1-page .atelier-orbit-caption span{font-size:14.5px}
.home1-page .hero-stats div span,
.home1-page .stat-item span,
.home1-page .home-s3-intro-image figcaption{font-weight:600}
.home1-page .hero-kicker,
.home1-page .hero-badge,
.home1-page .hero-scroll-cue,
.home1-page .hero-measure,
.home1-page .process-head span,
.home1-page .mosaic-head span,
.home1-page .cta-inner span,
.home1-page .fabric-card span,
.home1-page .home-s3-eyebrow,
.home1-page .home-s3-link,
.home1-page .home-s3-copy span,
.home1-page .home-s3-scroll-label,
.home1-page .atelier-orbit-kicker,
.home1-page .atelier-orbit-count,
.home1-page .atelier-orbit-num,
.home1-page .atelier-orbit-footer,
.home1-page .atelier-orbit-caption span{font-weight:800}
.home1-page .hero-stats div strong,
.home1-page .atelier-orbit-card strong{font-weight:800}
.home1-page .atelier-orbit-footer a i{font-size:14px}
.home1-page .mosaic-footer-strip>div,
.home1-page .mosaic-footer-strip>a{font-size:15px;font-weight:700}

/* shared chrome: nav, login, footer line */
.nav-link,.btn-login,.footer-bottom{font-size:14.5px}
.nav-link{font-weight:700}
.footer-col .contact-line,.footer-col a,.footer-brand p{font-size:15px;font-weight:500}
.footer-col .contact-line i{font-size:14px}

/* light mode — push body copy darker still */
html:not(.dark) .home1-page .hero-copy p,
html:not(.dark) .home1-page .fabric-head p,
html:not(.dark) .home1-page .home-s3-description,
html:not(.dark) .home1-page .home-s3-copy p,
html:not(.dark) .home1-page .process-step p,
html:not(.dark) .home1-page .atelier-orbit-intro p,
html:not(.dark) .home1-page .atelier-orbit-card small{color:#2B3831}
html:not(.dark) .home1-page h1,
html:not(.dark) .home1-page h2,
html:not(.dark) .home1-page h3{color:var(--ink)}

/* dark mode — make sure nothing sinks into the background */
html.dark .home1-page p,
html.dark .home1-page li,
html.dark .home1-page .hero-copy p,
html.dark .home1-page .home-s3-description,
html.dark .home1-page .home-s3-copy p,
html.dark .home1-page .process-step p,
html.dark .home1-page .atelier-orbit-intro p,
html.dark .home1-page .atelier-orbit-card small,
html.dark .home1-page .atelier-orbit-footer,
html.dark .home1-page .home-s3-bottom,
html.dark .home1-page .home-s3-scroll-label,
html.dark .home1-page .hero-stats div span{color:rgba(245,241,231,.92)}
html.dark .home1-page h1,
html.dark .home1-page h2,
html.dark .home1-page h3,
html.dark .home1-page .home-s3-link,
html.dark .home1-page .atelier-orbit-footer a,
html.dark .home1-page .atelier-orbit-card strong,
html.dark .home1-page .hero-stats div strong{color:var(--text)}
html.dark .home1-page .stats-top p,
html.dark .home1-page .stat-item span,
html.dark .home1-page .cta-inner p{color:rgba(255,255,255,.9)}
html.dark .home1-page .mosaic-footer-strip>div{background:var(--surface);color:var(--text)}
html.dark .home1-page .fabric-card span{background:rgba(245,241,231,.95);color:#141B18}

/* ---------------------------------------------------------
   3a. RESPONSIVE — fabric swatch row (all five the same size)
   --------------------------------------------------------- */
@media(max-width:1024px){
  .h2-swatch{width:calc(33.333% - 14px);min-width:0}
  .h2-swatch-4,.h2-swatch-5{width:calc(33.333% - 14px)}
}
@media(max-width:767px){
  .h2-swatchrow{gap:12px;justify-content:center}
  .h2-swatch,
  .h2-swatch-1,.h2-swatch-2,.h2-swatch-3,.h2-swatch-4,.h2-swatch-5{
    width:calc(50% - 6px);min-width:0;margin-bottom:0;
  }
  .h2-swatch figure{aspect-ratio:3/4.2}
}
@media(max-width:400px){
  .h2-swatch,
  .h2-swatch-1,.h2-swatch-2,.h2-swatch-3,.h2-swatch-4,.h2-swatch-5{width:calc(50% - 5px)}
  .h2-swatchrow{gap:10px}
}

/* ---------------------------------------------------------
   3b. RESPONSIVE — collections strip (no overlapping cards)
   --------------------------------------------------------- */
@media(max-width:1024px){
  .h2-s5-strip{gap:34px}
  .h2-s5-item,
  .h2-s5-item:nth-child(1),
  .h2-s5-item:nth-child(2),
  .h2-s5-item:nth-child(3){transform:none!important;margin:0}
  .h2-s5-frame{transform:rotate(0deg)!important}
}
@media(max-width:767px){
  .h2-s5-strip{grid-template-columns:minmax(0,1fr);gap:26px}
  .h2-s5-item:nth-child(3){grid-column:auto;max-width:none}
  .h2-s5-frame{height:300px}
}

/* ---------------------------------------------------------
   3c. RESPONSIVE — thread map becomes a clean stacked list
   (the absolutely-positioned nodes used to run into each
   other and into the needle on narrow screens)
   --------------------------------------------------------- */
@media(max-width:1024px){
  .h2-thread-map{
    position:relative;height:auto;display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:44px auto 0;
  }
  .h2-thread-svg,.h2-thread-needle{display:none}
  .h2-thread-item,
  .ti-1,.ti-2,.ti-3,.ti-4,.ti-5,.ti-6{
    position:static;width:auto;left:auto;right:auto;top:auto;bottom:auto;
    text-align:left;padding:20px 18px;
    border:1px solid var(--line);border-radius:14px;background:var(--bg);
    box-shadow:0 12px 30px rgba(0,0,0,.06);
  }
  .h2-thread-item:hover{transform:translateY(-5px)}
  .h2-thread-item b{font-size:20px}
  .h2-thread-item small{font-size:14px}
  .h2-thread-item i{font-size:14px}
}
@media(max-width:767px){
  .h2-thread-map{grid-template-columns:minmax(0,1fr);gap:12px;margin-top:36px}
  .h2-thread-item,
  .ti-1,.ti-2,.ti-3,.ti-4,.ti-5,.ti-6{padding:18px 16px}
}
@media(max-width:1024px){
  html.dark .h2-thread-item{background:#1B2520;box-shadow:0 14px 32px rgba(0,0,0,.28)}
}

/* =========================================================
   FIX PACK 2
   1) Home 2 — same typography treatment as Home 1
   2) Home 2 / Section 01 — atmospheric hero visual
   ========================================================= */

/* ---------------------------------------------------------
   1. HOME 2 — readable typography (matches Home 1)
   --------------------------------------------------------- */
html:not(.dark) .home2-page{--text-soft:#39473F}
html.dark .home2-page{--text-soft:rgba(245,241,231,.9)}

.home2-page{color:var(--text)}
.home2-page p,
.home2-page li{font-size:16px;font-weight:500;line-height:1.72}

/* lead / body copy */
.home2-page .h2-lead{font-size:17px;font-weight:600;line-height:1.75}
.home2-page .h2-s1 .h2-lead{font-size:17px;font-weight:600}
.home2-page .h2-s2-copy p,
.home2-page .h2-s8-card p,
.home2-page .h2-s9 p,
.home2-page .h2-material-foot strong,
.home2-page .h2-s4-caption>span{font-size:16px;font-weight:600;line-height:1.7}
.home2-page .h2-s3-poster-copy .h2-lead{font-weight:600}

/* small labels / eyebrows / captions — nothing under 14.5px, all bold */
.home2-page .h2-eyebrow,
.home2-page .h2-s1-meta span,
.home2-page .h2-s1-chip span,
.home2-page .h2-s1-scroll,
.home2-page .h2-s2-tag,
.home2-page .h2-s3-poster-vertical span,
.home2-page .h2-s3-poster-badge,
.home2-page .h2-s4-piece span,
.home2-page .h2-s5-num,
.home2-page .h2-s5-label small,
.home2-page .h2-s6-index,
.home2-page .h2-s6-copy span,
.home2-page .h2-s8-who b,
.home2-page .h2-s8-who span,
.home2-page .h2-swatch-meta,
.home2-page .h2-swatch-tag,
.home2-page .h2-thread-item span,
.home2-page .h2-thread-item small{font-size:14.5px}
.home2-page .h2-eyebrow,
.home2-page .h2-s1-meta span,
.home2-page .h2-s1-chip span,
.home2-page .h2-s1-scroll,
.home2-page .h2-s3-poster-vertical span,
.home2-page .h2-s3-poster-badge,
.home2-page .h2-s4-piece span,
.home2-page .h2-s5-num,
.home2-page .h2-s5-label small,
.home2-page .h2-s6-index,
.home2-page .h2-swatch-tag,
.home2-page .h2-thread-item span{font-weight:800}
.home2-page .h2-s6-copy span,
.home2-page .h2-s8-who span,
.home2-page .h2-thread-item small,
.home2-page .h2-s1-meta span{font-weight:600}
.home2-page .h2-s1-chip b,
.home2-page .h2-s5-label strong,
.home2-page .h2-s6-copy b,
.home2-page .h2-thread-item b,
.home2-page .h2-s8-who b,
.home2-page .h2-s1-meta strong{font-weight:700}
.home2-page .h2-swatch-tag em,
.home2-page .h2-s1-chip b{font-size:16px}
.home2-page .h2-s6-copy b{font-size:21px}

/* light mode — darker body copy */
html:not(.dark) .home2-page .h2-lead,
html:not(.dark) .home2-page .h2-s2-copy p,
html:not(.dark) .home2-page .h2-s8-card p,
html:not(.dark) .home2-page .h2-thread-item small,
html:not(.dark) .home2-page .h2-s6-copy span{color:#2B3831}
html:not(.dark) .home2-page h1,
html:not(.dark) .home2-page h2,
html:not(.dark) .home2-page h3{color:var(--ink)}

/* dark mode — keep everything legible */
html.dark .home2-page p,
html.dark .home2-page li,
html.dark .home2-page .h2-lead,
html.dark .home2-page .h2-s2-copy p,
html.dark .home2-page .h2-s8-card p,
html.dark .home2-page .h2-s1-meta span,
html.dark .home2-page .h2-s1-scroll,
html.dark .home2-page .h2-s6-copy span,
html.dark .home2-page .h2-thread-item small,
html.dark .home2-page .h2-s8-who span,
html.dark .home2-page .h2-s4-caption>span{color:rgba(245,241,231,.92)}
html.dark .home2-page h1,
html.dark .home2-page h2,
html.dark .home2-page h3,
html.dark .home2-page .h2-s1-meta strong,
html.dark .home2-page .h2-s6-copy b,
html.dark .home2-page .h2-thread-item b,
html.dark .home2-page .h2-s8-who b,
html.dark .home2-page .h2-material-foot strong{color:var(--text)}
html.dark .home2-page .h2-s9 p{color:rgba(255,255,255,.9)}

@media(max-width:767px){
  .home2-page p,.home2-page li,.home2-page .h2-lead{font-size:15.5px}
  .home2-page .h2-s1 .h2-lead{font-size:16px}
}

/* ---------------------------------------------------------
   2. HOME 2 — SECTION 01 hero: atmosphere behind the image
   --------------------------------------------------------- */
.h2-s1{
  position:relative;isolation:isolate;
  background:
    radial-gradient(circle at 78% 18%,color-mix(in srgb,var(--gold) 16%,transparent),transparent 34%),
    radial-gradient(circle at 8% 78%,color-mix(in srgb,var(--coral) 14%,transparent),transparent 36%),
    var(--bg);
}
/* fine dotted grid over the whole hero */
.h2-s1::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(color-mix(in srgb,var(--text) 16%,transparent) .8px,transparent .8px);
  background-size:24px 24px;
  -webkit-mask-image:radial-gradient(ellipse at 60% 45%,#000 20%,transparent 72%);
  mask-image:radial-gradient(ellipse at 60% 45%,#000 20%,transparent 72%);
  opacity:.5;
}

.h2-s1-visual{position:relative;z-index:1}

/* soft colour bloom sitting behind the photo */
.h2-s1-visual::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  left:-12%;top:-8%;width:118%;height:112%;
  border-radius:50%;
  background:
    radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--gold) 34%,transparent),transparent 58%),
    radial-gradient(circle at 70% 75%,color-mix(in srgb,var(--coral) 30%,transparent),transparent 60%);
  filter:blur(46px);
  animation:h2HeroBloom 11s ease-in-out infinite alternate;
}
/* offset outline frame behind the photo */
.h2-s1-visual::after{
  content:"";position:absolute;z-index:0;pointer-events:none;
  right:-20px;top:26px;width:72%;height:min(640px,68vh);
  border:1px solid color-mix(in srgb,var(--gold) 58%,transparent);
  border-radius:4px 120px 4px 4px;
  animation:h2HeroFrameFloat 7s ease-in-out infinite alternate;
}
@keyframes h2HeroBloom{
  from{transform:translate3d(0,0,0) scale(1);opacity:.75}
  to{transform:translate3d(2%,-3%,0) scale(1.07);opacity:1}
}
@keyframes h2HeroFrameFloat{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-10px,12px,0)}
}

/* the photo itself: depth, tint and a slow sweeping sheen */
.h2-s1-photo{
  position:relative;z-index:2;
  box-shadow:0 40px 90px rgba(0,0,0,.26),0 0 0 1px color-mix(in srgb,var(--text) 8%,transparent);
}
.h2-s1-photo img{transform:scale(1.02);transition:transform 1.4s var(--ease),filter .6s var(--ease)}
.h2-s1-visual:hover .h2-s1-photo img{transform:scale(1.08)}
.h2-s1-photo::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(0,0,0,.16) 0%,transparent 34%,transparent 62%,rgba(0,0,0,.30) 100%),
    linear-gradient(115deg,color-mix(in srgb,var(--coral) 22%,transparent),transparent 52%);
}
.h2-s1-photo::after{
  content:"";position:absolute;z-index:3;pointer-events:none;
  top:-60%;left:-70%;width:60%;height:220%;
  transform:rotate(18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.30),transparent);
  animation:h2HeroSheen 6.5s ease-in-out infinite;
}
@keyframes h2HeroSheen{
  0%{left:-70%}
  55%,100%{left:160%}
}

/* chip floats above everything */
.h2-s1-chip{z-index:4;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);background:color-mix(in srgb,var(--surface) 88%,transparent)}
.h2-s1-grid{z-index:2}

html.dark .h2-s1{
  background:
    radial-gradient(circle at 78% 18%,rgba(201,173,112,.15),transparent 34%),
    radial-gradient(circle at 8% 78%,rgba(135,162,143,.13),transparent 36%),
    var(--bg);
}
html.dark .h2-s1::before{opacity:.35}
html.dark .h2-s1-photo{box-shadow:0 40px 90px rgba(0,0,0,.5),0 0 0 1px rgba(245,241,231,.1)}

@media(max-width:1024px){
  .h2-s1-visual::after{width:66%;height:56vh;right:-12px;top:18px}
}
@media(max-width:767px){
  .h2-s1::before{background-size:20px 20px;opacity:.35}
  .h2-s1-visual::before{filter:blur(34px)}
  .h2-s1-visual::after{display:none}
  .h2-s1-photo{box-shadow:0 26px 56px rgba(0,0,0,.24)}
}
@media(prefers-reduced-motion:reduce){
  .h2-s1-visual::before,.h2-s1-visual::after,.h2-s1-photo::after{animation:none!important}
}

/* =========================================================
   FIX PACK v5 — Men's services page
   1) Services (men + women) — typography matches Home 2:
      body copy 16px/500, leads 17px/600, every label/kicker
      lifted to a 14.5px floor, darker light-mode secondary
      text, brighter dark-mode ivory — same treatment as Home 2.
   2) "06 / THE CLOTH" — rebuilt as a circular fabric-card
      gallery (no absolute-position dead gaps), full entrance
      + ambient background animation.
   3) "06 / FABRIC EDIT" — rebuilt on the previously-unused
      lx6 orbit-gallery composition (already has background
      glow/ring motion + dark mode + reduced-motion support).
   4) Old duplicate "03 / THE FIT" and "05 / THE JOURNEY"
      sections were removed from services-men.html; only the
      redesigned re3-cards / re5-process versions remain.
   ========================================================= */

/* --- 1. typography -------------------------------------- */
html:not(.dark) .service-page{--text-soft:#39473F}
html.dark .service-page{--text-soft:rgba(245,241,231,.9)}

.service-men .service-section p,
.service-men .service-section li{font-size:16px;font-weight:500;line-height:1.72}
.service-men .service-section span,
.service-men .service-section a,
.service-men .service-section small{font-size:14.5px;font-weight:700}
.service-men .service-section .service-lead{font-size:17px;font-weight:600;line-height:1.75}
.service-page .service-kicker{font-size:14.5px}

@media(max-width:767px){
  .service-men .service-section p,
  .service-men .service-section li{font-size:15.5px}
}

.lx3-head h2 em,.lx5-head h2 em,.lx6-head h2 em,.lx8-copy h2 em{font-family:Georgia,serif}

/* --- 2. "06 / THE CLOTH" — circular fabric-card gallery -- */
.mfab-cloth{padding:145px 0 120px;background:var(--surface);overflow:hidden;isolation:isolate}
.mfab-ambient{position:absolute;inset:0;z-index:-1;pointer-events:none}
.mfab-ambient span{position:absolute;border-radius:50%;filter:blur(75px);opacity:.20;animation:menFloat 10s ease-in-out infinite}
.mfab-ambient span:nth-child(1){width:280px;height:280px;background:var(--gold);left:-90px;top:10%}
.mfab-ambient span:nth-child(2){width:340px;height:340px;background:var(--accent);right:-110px;bottom:0;animation-delay:-4s}
.mfab-ambient span:nth-child(3){width:150px;height:150px;border:1px solid var(--gold);right:30%;top:8%;filter:none;opacity:.32}
.mfab-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:34px;margin-top:14px}
.mfab-card{background:var(--surface);border:1px solid var(--line);border-radius:26px;padding:96px 22px 30px;text-align:center;position:relative;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.mfab-card:hover{transform:translateY(-10px);box-shadow:0 25px 50px rgba(0,0,0,.16)}
.mfab-photo{position:absolute;left:50%;top:-44px;transform:translateX(-50%);width:128px;height:128px;border-radius:50%;overflow:hidden;border:6px solid var(--surface);box-shadow:0 16px 32px rgba(0,0,0,.20)}
.mfab-photo img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.mfab-card:hover .mfab-photo img{transform:scale(1.12)}
.mfab-body i{color:var(--gold);font-size:16px;margin-bottom:8px;display:inline-block}
.mfab-body h3{font-family:var(--font-display);font-size:24px;margin:4px 0 6px}
.mfab-body span{display:block;font-size:14.5px;font-weight:700;color:var(--text-soft);letter-spacing:.02em}
.mfab-footnote{text-align:center;margin-top:48px;color:var(--text-soft);font-size:16px;max-width:640px;margin-inline:auto}
.mfab-footnote .text-link{margin-left:6px}
@media(max-width:1024px){.mfab-grid{grid-template-columns:repeat(2,1fr);gap:28px}}
@media(max-width:620px){.mfab-cloth{padding:90px 0 80px}.mfab-grid{grid-template-columns:1fr;max-width:320px;margin-inline:auto;gap:56px}}
@media(prefers-reduced-motion:reduce){.mfab-ambient span{animation:none!important}}

/* --- 3. "06 / FABRIC EDIT" — rebuilt on a plain CSS grid,
   so nothing is absolutely-positioned and no dead gaps can
   appear regardless of image size ---------------------- */
.fed-cloth{padding:145px 0 120px;background:var(--surface);overflow:hidden;isolation:isolate}
.fed-ambient{position:absolute;inset:0;z-index:-1;pointer-events:none}
.fed-ambient span{position:absolute;border-radius:50%;filter:blur(85px);opacity:.2;animation:menFloat 12s ease-in-out infinite}
.fed-ambient span:nth-child(1){width:380px;height:380px;background:var(--gold);right:-130px;top:-90px}
.fed-ambient span:nth-child(2){width:320px;height:320px;background:var(--accent);left:-110px;bottom:-70px;animation-delay:-5s}
.fed-grid{display:grid;grid-template-columns:1.3fr 1fr;grid-template-rows:1fr 1fr;gap:22px;min-height:400px;max-width:980px;margin:14px auto 0}
.fed-main{grid-row:1/3;position:relative;border-radius:26px;overflow:hidden;margin:0}
.fed-card{position:relative;border-radius:26px;overflow:hidden;margin:0}
.fed-main img,.fed-card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s ease}
.fed-main:hover img,.fed-card:hover img{transform:scale(1.08)}
.fed-main::after,.fed-card::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.62),transparent 55%)}
.fed-main figcaption,.fed-card figcaption{position:absolute;left:22px;bottom:18px;z-index:2;color:#fff;display:grid;gap:4px}
.fed-main figcaption span,.fed-card figcaption span{font-size:14.5px;font-weight:800;letter-spacing:.12em}
.fed-main figcaption b{font-family:var(--font-display);font-size:26px}
.fed-card figcaption b{font-family:var(--font-display);font-size:20px}
.fed-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px;margin-top:34px}
.fed-swatches{display:flex;align-items:center;gap:10px}
.fed-swatches span{width:28px;height:28px;border-radius:50%;border:1px solid var(--line)}
.fed-swatches span:nth-child(1){background:#efe7d8}
.fed-swatches span:nth-child(2){background:#b7a88a}
.fed-swatches span:nth-child(3){background:#7d6b52}
.fed-swatches span:nth-child(4){background:#2c2419}
.fed-swatches p{margin:0 0 0 8px;font-size:14.5px;font-weight:700;color:var(--text-soft)}
@media(max-width:900px){
  .fed-grid{grid-template-columns:1fr;grid-template-rows:none;min-height:0;max-width:520px}
  .fed-main{grid-row:auto;min-height:260px}
  .fed-card{min-height:170px}
}
@media(prefers-reduced-motion:reduce){.fed-ambient span{animation:none!important}}


/* =========================================================
   LOOM & LORE — FABRICS / FINAL VISUAL PASS
   Editorial typography + no-gap hero + luminous light mode
   ========================================================= */

.fabric-page{
  --fabric-green:#557A68;
  --fabric-deep:#1D2923;
  --fabric-ivory:#F1F3EA;
  --fabric-paper:#FAFBF7;
}
.fabric-page main{overflow:hidden}
.fabric-page section{isolation:isolate}

/* Home 1 typography scale — reused consistently across the entire Fabrics page */
.fabric-page h1,
.fabric-page h2,
.fabric-page h3{
  font-family:var(--font-display)!important;
  font-weight:700!important;
}
.fabric-page p,
.fabric-page li,
.fabric-page a,
.fabric-page span,
.fabric-page small,
.fabric-page strong,
.fabric-page button{
  font-family:var(--font-body);
}
.fabric-page .fabric-hero-title{font-size:var(--fs-display)!important;line-height:.94!important;font-weight:800!important}
.fabric-page .fabric-hero-text{font-size:var(--fs-lead)!important;line-height:1.7!important;font-weight:600!important}
.fabric-page .fabric-library-intro h2,
.fabric-page .fabric-feel-heading h2,
.fabric-page .fabric-s4-heading h2,
.fabric-page .fabric-s5-title h2,
.fabric-page .fabric-s6-title h2,
.fabric-page .fabric-s7-title h2{
  font-size:var(--fs-h2)!important;
  line-height:1.05!important;
  font-weight:700!important;
}
.fabric-page .fabric-library-intro p,
.fabric-page .fabric-feel-intro,
.fabric-page .fabric-s4-heading p,
.fabric-page .fabric-s5-title p,
.fabric-page .fabric-s6-title p,
.fabric-page .fabric-s7-title p{
  font-size:var(--fs-lead)!important;
  line-height:1.72!important;
  font-weight:600!important;
}

/* ---------- Section 1: full, energetic, zero dead-space editorial hero ---------- */
.fabric-page .fabric-hero{
  min-height:calc(100svh - 82px)!important;
  padding:34px clamp(20px,4vw,64px) 22px!important;
  background:
    radial-gradient(circle at 8% 14%,rgba(85,122,104,.16),transparent 24%),
    radial-gradient(circle at 86% 20%,rgba(181,154,91,.10),transparent 22%),
    radial-gradient(circle at 72% 88%,rgba(85,122,104,.10),transparent 28%),
    var(--bg)!important;
}
.fabric-page .fabric-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:
    radial-gradient(circle,rgba(85,122,104,.28) 0 1px,transparent 1.5px),
    linear-gradient(115deg,transparent 0 47%,rgba(85,122,104,.055) 48%,transparent 49%),
    linear-gradient(25deg,transparent 0 48%,rgba(181,154,91,.045) 49%,transparent 50%);
  background-size:74px 74px,180px 180px,230px 230px;
  animation:fabricHeroAtmosphere 18s linear infinite;
}
.fabric-page .fabric-hero-inner{
  max-width:1500px!important;
  grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr)!important;
  gap:clamp(18px,3.5vw,58px)!important;
}
.fabric-page .fabric-hero-content{max-width:650px;padding:8px 0 20px!important}
.fabric-page .fabric-hero-kicker{font-size:13px!important;font-weight:800!important;margin-bottom:22px!important}
.fabric-page .fabric-hero-title .fabric-title-line{
  padding-left:0!important;
  transform-origin:left center;
}
.fabric-page .fabric-hero-title .fabric-title-line:nth-child(2){
  padding-left:clamp(16px,3vw,52px)!important;
}
.fabric-page .fabric-hero-text{max-width:52ch!important;margin:25px 0 27px!important}
.fabric-page .fabric-hero-actions{gap:18px!important}
.fabric-page .fabric-hero-btn{
  min-height:54px!important;
  padding:0 4px 0 0!important;
  font-size:14px!important;
  font-weight:800!important;
}
.fabric-page .fabric-hero-note{font-size:11px!important;font-weight:800!important}

.fabric-page .fabric-hero-visual{
  min-height:min(68vh,700px)!important;
  overflow:visible!important;
}
.fabric-page .fabric-hero-image-wrap{
  width:min(100%,680px)!important;
  height:min(70vh,680px)!important;
  border-radius:34px!important;
  clip-path:polygon(3% 0,96% 2%,100% 9%,97% 94%,90% 100%,4% 97%,0 89%,2% 7%)!important;
  transform:rotate(1.5deg)!important;
  box-shadow:0 34px 90px rgba(29,41,35,.18)!important;
  border:1px solid rgba(85,122,104,.18);
}
.fabric-page .fabric-hero-image{transform:scale(1.06)!important;filter:saturate(.96) contrast(1.02)!important}
.fabric-page .fabric-image-shine{animation:fabricHeroShine 5s ease-in-out infinite!important}
.fabric-page .fabric-floating-image{
  width:clamp(150px,15vw,225px)!important;
  left:-5%!important;
  bottom:4%!important;
  border-radius:20px!important;
  clip-path:none!important;
  border:7px solid var(--paper)!important;
  box-shadow:0 25px 55px rgba(29,41,35,.22)!important;
}
.fabric-page .fabric-floating-image::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(135deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 64%);
  transform:translateX(-120%);
  animation:fabricFloatShine 4.5s ease-in-out infinite;
}
.fabric-page .fabric-hero-circle{
  width:clamp(105px,10vw,145px)!important;
  right:-2%!important;top:3%!important;
  border:2px solid currentColor!important;
  box-shadow:0 0 0 12px rgba(85,122,104,.06),0 0 45px rgba(85,122,104,.13);
}
.fabric-page .fabric-hero-circle::before{inset:9px!important}
.fabric-page .fabric-hero-circle span{font-size:9px!important;font-weight:900!important}
.fabric-page .fabric-hero-bottom{
  margin-top:8px!important;
  padding-top:16px!important;
}
.fabric-page .fabric-hero-bottom strong{font-size:13px!important;font-weight:900!important}
.fabric-page .fabric-hero-bottom span{font-size:11px!important;font-weight:800!important}

@keyframes fabricHeroAtmosphere{
  from{background-position:0 0,0 0,0 0}
  to{background-position:74px 74px,180px -180px,-230px 230px}
}
@keyframes fabricHeroShine{
  0%,65%,100%{transform:translateX(-100%) rotate(5deg);opacity:.2}
  76%{transform:translateX(100%) rotate(5deg);opacity:.65}
}
@keyframes fabricFloatShine{
  0%,55%,100%{transform:translateX(-120%)}
  72%{transform:translateX(120%)}
}

/* Every light section receives the same subtle glowing/glitter atmosphere */
.fabric-page:not(.dark) section::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.34;
  background-image:
    radial-gradient(circle,rgba(85,122,104,.34) 0 1px,transparent 1.7px),
    radial-gradient(circle,rgba(181,154,91,.22) 0 1px,transparent 1.8px);
  background-size:96px 96px,151px 151px;
  animation:fabricSectionGlitter 16s linear infinite;
  mix-blend-mode:multiply;
}
@keyframes fabricSectionGlitter{
  0%{background-position:0 0,30px 70px;opacity:.22}
  50%{background-position:30px -25px,-15px 100px;opacity:.42}
  100%{background-position:0 0,30px 70px;opacity:.22}
}

/* Section 2: make the library feel layered rather than flat */
.fabric-page .fabric-library,
.fabric-page .fabric-feel-section,
.fabric-page .fabric-s4,
.fabric-page .fabric-s5,
.fabric-page .fabric-s6,
.fabric-page .fabric-s7{
  overflow:hidden;
}
.fabric-page .fabric-library::before,
.fabric-page .fabric-feel-section::before,
.fabric-page .fabric-s4::before,
.fabric-page .fabric-s5::before,
.fabric-page .fabric-s6::before,
.fabric-page .fabric-s7::before{
  content:"";
  position:absolute;
  width:38vw;height:38vw;
  max-width:520px;max-height:520px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(85,122,104,.12),transparent 68%);
  filter:blur(10px);
  pointer-events:none;
  animation:fabricGlowDrift 10s ease-in-out infinite;
  z-index:-1;
}
.fabric-page .fabric-library::before{left:-12%;top:12%}
.fabric-page .fabric-feel-section::before{right:-10%;top:18%}
.fabric-page .fabric-s4::before{left:5%;bottom:-18%}
.fabric-page .fabric-s5::before{right:-12%;bottom:-15%}
.fabric-page .fabric-s6::before{left:-10%;top:25%}
.fabric-page .fabric-s7::before{right:-8%;top:10%}
@keyframes fabricGlowDrift{
  0%,100%{transform:translate3d(0,0,0) scale(.92);opacity:.55}
  50%{transform:translate3d(24px,-18px,0) scale(1.08);opacity:1}
}

/* Stronger, readable small text across fabric cards */
.fabric-page .fabric-library-item,
.fabric-page .fabric-feel-copy,
.fabric-page .fabric-s4-note,
.fabric-page .fabric-s5-content,
.fabric-page .fabric-s6-card,
.fabric-page .fabric-s7-card{
  font-weight:600;
}
.fabric-page .fabric-library-item .fabric-item-name,
.fabric-page .fabric-feel-copy h3,
.fabric-page .fabric-s4-note strong,
.fabric-page .fabric-s5-content h3,
.fabric-page .fabric-s6-card h3,
.fabric-page .fabric-s7-card h3{
  font-weight:800!important;
}
.fabric-page .fabric-feel-copy p,
.fabric-page .fabric-s5-content p,
.fabric-page .fabric-s6-card p,
.fabric-page .fabric-s7-card p{
  font-size:var(--fs-body)!important;
  line-height:1.72!important;
  font-weight:600!important;
}

/* ---------- Women's screenshot corrections ---------- */
.service-women .wv4-fit-center{
  box-sizing:border-box!important;
  width:170px!important;
  height:170px!important;
  padding:20px 16px!important;
  overflow:hidden!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-items:center!important;
  text-align:center!important;
  border-radius:50%!important;
}
.service-women .wv4-fit-center span{
  font-size:12px!important;
  line-height:1!important;
  margin-bottom:4px!important;
  color:inherit!important;
}
.service-women .wv4-fit-center i{
  margin:5px 0 6px!important;
  font-size:27px!important;
  line-height:1!important;
}
.service-women .wv4-fit-center strong{
  display:block!important;
  max-width:132px!important;
  font-size:18px!important;
  line-height:1.08!important;
  letter-spacing:-.02em!important;
  font-weight:900!important;
  color:#fff!important;
}
.service-women .wv4-fit-center small{
  display:block!important;
  max-width:135px!important;
  margin-top:7px!important;
  font-size:10px!important;
  line-height:1.35!important;
  font-weight:800!important;
  color:#fff!important;
}
.service-women .svc-slice-center{
  position:relative!important;
  overflow:hidden!important;
  z-index:2!important;
  color:var(--text)!important;
}
.service-women .svc-slice-center::before{
  z-index:0!important;
  pointer-events:none!important;
}
.service-women .svc-slice-center > *{
  position:relative!important;
  z-index:3!important;
  opacity:1!important;
  visibility:visible!important;
}
.service-women .svc-slice-center .svc-big-index{
  font-weight:800!important;
  color:var(--text)!important;
}
.service-women .svc-slice-center i{
  color:var(--accent)!important;
}
.service-women .svc-slice-center strong{
  color:var(--text)!important;
  max-width:270px!important;
  padding:0 12px!important;
  font-weight:900!important;
  text-align:center!important;
}
.service-women .svc-slice-center p{
  color:var(--text)!important;
  font-weight:700!important;
  text-align:center!important;
}
.service-women .wv4-cta-side,
.service-women .wv4-vertical-label,
.service-women .wv4-collage-word{
  display:none!important;
}

@media (max-width:1100px){
  .fabric-page .fabric-hero{
    min-height:auto!important;
    padding-top:28px!important;
  }
  .fabric-page .fabric-hero-inner{
    grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)!important;
    gap:20px!important;
  }
  .fabric-page .fabric-hero-title{font-size:clamp(44px,6.2vw,76px)!important}
  .fabric-page .fabric-hero-visual{min-height:560px!important}
  .fabric-page .fabric-hero-image-wrap{height:540px!important}
}
@media (max-width:767px){
  .fabric-page .fabric-hero{
    min-height:calc(100svh - 70px)!important;
    padding:28px 16px 18px!important;
  }
  .fabric-page .fabric-hero-inner{
    display:flex!important;
    flex-direction:column!important;
    gap:0!important;
  }
  .fabric-page .fabric-hero-content{
    padding:10px 4px 22px!important;
  }
  .fabric-page .fabric-hero-kicker{margin-bottom:17px!important}
  .fabric-page .fabric-hero-title{
    font-size:clamp(42px,13vw,62px)!important;
    line-height:.94!important;
  }
  .fabric-page .fabric-hero-text{
    font-size:16px!important;
    line-height:1.68!important;
    margin:19px 0 20px!important;
  }
  .fabric-page .fabric-hero-actions{gap:15px!important}
  .fabric-page .fabric-hero-btn{font-size:12px!important}
  .fabric-page .fabric-hero-visual{
    min-height:390px!important;
    margin:0!important;
  }
  .fabric-page .fabric-hero-image-wrap{
    width:calc(100% - 22px)!important;
    height:390px!important;
    margin:0 0 0 auto!important;
    border-radius:24px!important;
  }
  .fabric-page .fabric-floating-image{
    width:108px!important;
    left:0!important;
    bottom:14px!important;
    border-width:5px!important;
  }
  .fabric-page .fabric-hero-circle{
    width:86px!important;
    right:0!important;
    top:8px!important;
  }
  .fabric-page .fabric-hero-circle span{font-size:6.5px!important}
  .fabric-page .fabric-hero-bottom{
    margin-top:8px!important;
    padding-top:12px!important;
    grid-template-columns:repeat(2,1fr)!important;
    row-gap:11px!important;
  }
  .fabric-page .fabric-hero-bottom > div:not(.fabric-scroll-indicator){
    padding:0 8px!important;
  }
  .fabric-page .fabric-hero-bottom strong{font-size:10px!important}
  .fabric-page .fabric-hero-bottom span{font-size:9px!important}
  .fabric-page .fabric-hero-word{font-size:31vw!important;opacity:.045!important}
}
@media (max-width:430px){
  .fabric-page .fabric-hero-title{font-size:42px!important}
  .fabric-page .fabric-hero-text{font-size:15px!important}
  .fabric-page .fabric-hero-visual{min-height:350px!important}
  .fabric-page .fabric-hero-image-wrap{height:350px!important}
  .fabric-page .fabric-floating-image{width:92px!important}
}
@media (prefers-reduced-motion:reduce){
  .fabric-page::before,
  .fabric-page section::after,
  .fabric-page .fabric-hero::before,
  .fabric-page .fabric-image-shine,
  .fabric-page .fabric-floating-image::after,
  .fabric-page .fabric-library::before,
  .fabric-page .fabric-feel-section::before,
  .fabric-page .fabric-s4::before,
  .fabric-page .fabric-s5::before,
  .fabric-page .fabric-s6::before,
  .fabric-page .fabric-s7::before{
    animation:none!important;
  }
}



/* =========================================================
   LOOM & LORE — ABOUT US
   Kept in the shared style.css intentionally.
   About-page rules are fully scoped so other pages remain untouched.
   ========================================================= */
.about-page .about-main{overflow:hidden;background:var(--bg);color:var(--text)}
.about-page .about-section{position:relative;isolation:isolate;overflow:hidden;margin:0;padding:76px 0}
.about-page .about-wrap{width:min(calc(100% - 48px),1240px);margin-inline:auto;position:relative;z-index:3}
.about-page .about-section h1,
.about-page .about-section h2,
.about-page .about-section h3{color:var(--text)}
.about-page .about-section p{font-size:15px;line-height:1.75}
.about-page .about-eyebrow,
.about-page .about-section-number,
.about-page .about-hero-meta,
.about-page .about-scroll-cue,
.about-page .about-story-facts,
.about-page .about-value-number,
.about-page .about-craft-image-label,
.about-page .about-craft-marquee,
.about-page .about-expertise-meta b,
.about-page .about-testimonial-index,
.about-page .about-testimonial-head>span,
.about-page .about-cta-top>span,
.about-page .about-cta-signature span{font-family:var(--font-body);font-size:14px;line-height:1.3;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.about-page .about-eyebrow{margin:0;color:var(--text-soft)}
.about-page .about-eyebrow:before{content:"";display:inline-block;width:30px;height:1px;margin:0 10px 4px 0;background:var(--accent);box-shadow:0 0 12px color-mix(in srgb,var(--accent) 55%,transparent)}
.about-page .about-section h2{font:600 clamp(2.25rem,4.2vw,4.4rem)/.98 var(--font-display);letter-spacing:-.045em;margin:16px 0 14px}
.about-page .about-section h2 em{font-style:italic;color:var(--accent);font-weight:500}
.about-page .about-lead{max-width:650px;color:var(--text-soft);margin:0}
.about-page .about-text-link{display:inline-flex;align-items:center;gap:13px;margin-top:24px;color:var(--text);font:700 14px/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid color-mix(in srgb,var(--accent) 55%,transparent);padding-bottom:9px;transition:color .35s ease,gap .45s var(--ease),border-color .35s ease}
.about-page .about-text-link i{color:var(--accent);font-size:15px;transition:transform .45s var(--ease)}
.about-page .about-text-link:hover{color:var(--accent);gap:18px;border-color:var(--accent)}
.about-page .about-text-link:hover i{transform:translateY(4px)}

.about-page .about-hero{min-height:760px;display:flex;align-items:center;background:var(--bg)}
.about-page .about-ambient{position:absolute;pointer-events:none;border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);z-index:0}
.about-page .about-ambient-one{width:460px;height:460px;right:-210px;top:-170px;transform:rotate(18deg)}
.about-page .about-ambient-two{width:260px;height:260px;left:-150px;bottom:-130px;transform:rotate(-14deg)}
.about-page .about-hero-thread{position:absolute;left:4%;right:4%;top:58%;height:1px;background:var(--accent);opacity:.42;box-shadow:0 0 12px var(--accent),0 0 36px color-mix(in srgb,var(--accent) 40%,transparent);transform:rotate(-4deg);transform-origin:center;z-index:1}
.about-page .about-hero-wrap{padding:46px 0 68px}
.about-page .about-hero-meta{display:flex;justify-content:space-between;color:var(--text-soft);border-bottom:1px solid color-mix(in srgb,var(--text) 13%,transparent);padding-bottom:16px}
.about-page .about-hero-meta span:first-child{color:var(--accent)}
.about-page .about-hero-copy{position:relative;z-index:5;max-width:790px;margin:58px 0 0}
.about-page .about-display{font:600 clamp(3.1rem,6.2vw,6rem)/.92 var(--font-display)!important;letter-spacing:-.06em;margin:14px 0 18px!important;max-width:790px}
.about-page .about-display em{color:var(--accent);font-style:italic;font-weight:500}
.about-page .about-hero-visual{height:330px;max-width:1050px;margin:54px auto 0;position:relative;z-index:2}
.about-page .about-hero-main{position:absolute;left:7%;top:0;width:65%;height:300px;margin:0;overflow:hidden;border:1px solid color-mix(in srgb,var(--accent) 32%,transparent);box-shadow:0 0 45px color-mix(in srgb,var(--accent) 14%,transparent)}
.about-page .about-hero-side{position:absolute;right:3%;bottom:0;width:28%;height:185px;margin:0;overflow:hidden;border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);box-shadow:0 0 42px color-mix(in srgb,var(--accent) 15%,transparent);transform:rotate(2deg)}
.about-page .about-hero-main img,.about-page .about-hero-side img{width:100%;height:100%;object-fit:cover;transition:transform 1.15s var(--ease),filter .7s ease}
.about-page .about-hero-main img{filter:saturate(.82)}
.about-page .about-hero-side img{filter:saturate(.78)}
.about-page .about-hero-main:hover img,.about-page .about-hero-side:hover img{transform:scale(1.07);filter:saturate(1)}
.about-page .about-image-light{position:absolute;inset:0;background:radial-gradient(circle at 70% 45%,color-mix(in srgb,var(--accent) 18%,transparent),transparent 45%);mix-blend-mode:screen;pointer-events:none;opacity:.75}
.about-page .about-hero-caption{position:absolute;left:3%;bottom:10px;z-index:4;display:flex;align-items:center;gap:18px;color:var(--text);background:color-mix(in srgb,var(--bg) 88%,transparent);padding:10px 14px;border-left:2px solid var(--accent);backdrop-filter:blur(8px)}
.about-page .about-hero-caption span{font:700 14px/1 var(--font-body);letter-spacing:.1em}
.about-page .about-hero-caption strong{font:500 17px/1 var(--font-display);font-style:italic;color:var(--accent)}
.about-page .about-scroll-cue{position:absolute;right:0;bottom:12px;display:flex;align-items:center;gap:10px;color:var(--text-soft)}
.about-page .about-scroll-cue i{color:var(--accent);animation:about-bob 1.6s ease-in-out infinite}

.about-page .about-story{min-height:650px;padding:0;background:var(--plum);color:var(--cream);display:flex;align-items:stretch}
.about-page .about-story-image{position:absolute;inset:0;z-index:0}
.about-page .about-story-image img{width:100%;height:100%;object-fit:cover;filter:brightness(.56) saturate(.72);transform:scale(1.04);transition:transform 1.5s var(--ease),filter 1s ease}
.about-page .about-story:hover .about-story-image img{transform:scale(1.08);filter:brightness(.62) saturate(.86)}
.about-page .about-story-shade{position:absolute;inset:0;background:linear-gradient(90deg,color-mix(in srgb,var(--plum) 94%,transparent) 0%,color-mix(in srgb,var(--plum) 72%,transparent) 48%,color-mix(in srgb,var(--plum) 42%,transparent) 100%)}
.about-page .about-story-glow{position:absolute;width:420px;height:420px;right:8%;top:12%;background:var(--accent);filter:blur(120px);opacity:.12}
.about-page .about-story-inner{min-height:650px;display:flex;flex-direction:column;justify-content:space-between;padding:78px 0 70px}
.about-page .about-story-top{display:flex;align-items:center;gap:16px;color:var(--cream)}
.about-page .about-story-top .about-eyebrow{color:color-mix(in srgb,var(--cream) 76%,transparent)}
.about-page .about-section-number{color:var(--accent);letter-spacing:.14em}
.about-page .about-story-rule{height:1px;flex:1;max-width:360px;background:color-mix(in srgb,var(--cream) 25%,transparent);margin-left:10px}
.about-page .about-story-title{max-width:720px}
.about-page .about-story-title h2{font-size:clamp(2.7rem,5vw,5.2rem);color:var(--cream)}
.about-page .about-story-title h2 em{color:var(--accent)}
.about-page .about-story-bottom{display:grid;grid-template-columns:minmax(280px,1fr) minmax(420px,1.25fr);align-items:end;gap:70px}
.about-page .about-story-note{max-width:470px}
.about-page .about-story-note span{font:700 14px/1.3 var(--font-body);letter-spacing:.12em;color:var(--accent)}
.about-page .about-story-note p{margin-top:12px;color:color-mix(in srgb,var(--cream) 82%,transparent)}
.about-page .about-story-facts{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid color-mix(in srgb,var(--cream) 26%,transparent);border-bottom:1px solid color-mix(in srgb,var(--cream) 18%,transparent)}
.about-page .about-story-facts div{padding:15px 12px 14px;display:flex;flex-direction:column;gap:6px;border-left:1px solid color-mix(in srgb,var(--cream) 15%,transparent)}
.about-page .about-story-facts div:first-child{border-left:0}
.about-page .about-story-facts strong{font:700 15px/1 var(--font-body);color:var(--accent)}
.about-page .about-story-facts span{font-size:14px;letter-spacing:.05em;color:var(--cream)}

.about-page .about-values{background:var(--bg)}
.about-page .about-section-head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);align-items:end;gap:70px;padding-bottom:28px;border-bottom:1px solid color-mix(in srgb,var(--text) 15%,transparent)}
.about-page .about-section-head h2{margin-bottom:0}
.about-page .about-head-copy{max-width:510px;color:var(--text-soft);margin:0 0 2px}
.about-page .about-value-rail{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid color-mix(in srgb,var(--text) 15%,transparent)}
.about-page .about-value{position:relative;min-height:300px;padding:30px 25px 34px 0;border-left:1px solid color-mix(in srgb,var(--text) 13%,transparent);transition:transform .55s var(--ease),border-color .35s ease}
.about-page .about-value:first-child{border-left:0}
.about-page .about-value+.about-value{padding-left:25px}
.about-page .about-value:hover{transform:translateY(-8px);border-color:var(--accent)}
.about-page .about-value-number{display:block;color:var(--accent)}
.about-page .about-value>i{display:block;margin:22px 0 18px;font-size:22px;color:var(--accent);filter:drop-shadow(0 0 9px color-mix(in srgb,var(--accent) 35%,transparent));transition:transform .45s var(--ease)}
.about-page .about-value:hover>i{transform:translateY(-5px) rotate(-8deg)}
.about-page .about-value h3{font:600 clamp(1.65rem,2.2vw,2.25rem)/1 var(--font-display);letter-spacing:-.03em;margin:0 0 12px}
.about-page .about-value p{max-width:260px;color:var(--text-soft);margin:0}
.about-page .about-value a{display:inline-flex;gap:9px;align-items:center;margin-top:19px;color:var(--text);font:700 14px/1 var(--font-body);border-bottom:1px solid color-mix(in srgb,var(--accent) 45%,transparent);padding-bottom:7px;transition:gap .35s var(--ease),color .3s ease}
.about-page .about-value a b{color:var(--accent)}
.about-page .about-value a:hover{gap:14px;color:var(--accent)}

.about-page .about-craft{background:var(--surface)}
.about-page .about-craft-head{display:grid;grid-template-columns:1fr .9fr;gap:80px;align-items:end;margin-bottom:42px}
.about-page .about-craft-head>p:last-child{max-width:480px;color:var(--text-soft);margin:0 0 3px}
.about-page .about-craft-layout{display:grid;grid-template-columns:minmax(330px,.85fr) minmax(0,1.15fr);gap:70px;align-items:start}
.about-page .about-craft-image{height:480px;position:relative;overflow:hidden;border-left:3px solid var(--accent);box-shadow:18px 18px 0 color-mix(in srgb,var(--accent) 8%,transparent),0 0 55px color-mix(in srgb,var(--accent) 14%,transparent)}
.about-page .about-craft-image img{width:100%;height:100%;object-fit:cover;filter:saturate(.78);transition:transform 1.25s var(--ease),filter .7s ease}
.about-page .about-craft-image:hover img{transform:scale(1.07);filter:saturate(1)}
.about-page .about-craft-image-label{position:absolute;left:18px;bottom:17px;color:var(--cream);background:var(--plum);padding:8px 11px}
.about-page .about-process-list{border-top:1px solid color-mix(in srgb,var(--text) 16%,transparent)}
.about-page .about-process-item{display:grid;grid-template-columns:54px 1fr 28px;align-items:center;gap:18px;min-height:86px;border-bottom:1px solid color-mix(in srgb,var(--text) 13%,transparent);transition:padding .45s var(--ease),background .35s ease}
.about-page .about-process-item:hover{padding-left:12px;background:color-mix(in srgb,var(--accent) 5%,transparent)}
.about-page .about-process-item>span{font:700 14px/1 var(--font-body);color:var(--accent)}
.about-page .about-process-item h3{font:600 1.55rem/1 var(--font-display);margin:0 0 5px}
.about-page .about-process-item p{font-size:14px;margin:0;color:var(--text-soft)}
.about-page .about-process-item>i{color:var(--accent);font-size:15px;transition:transform .4s var(--ease)}
.about-page .about-process-item:hover>i{transform:translateX(7px)}
.about-page .about-craft-marquee{margin-top:36px;padding:14px 0;border-top:1px solid color-mix(in srgb,var(--text) 13%,transparent);border-bottom:1px solid color-mix(in srgb,var(--text) 13%,transparent);display:flex;justify-content:space-between;align-items:center;color:var(--text-soft);overflow:hidden}
.about-page .about-craft-marquee i{width:7px;height:7px;background:var(--accent);box-shadow:0 0 13px var(--accent);transform:rotate(45deg);flex:none}

.about-page .about-expertise{background:var(--bg)}
.about-page .about-expertise-head{display:grid;grid-template-columns:70px minmax(0,1fr) minmax(270px,.65fr);gap:24px;align-items:end;padding-bottom:27px;border-bottom:1px solid color-mix(in srgb,var(--text) 15%,transparent)}
.about-page .about-expertise-head h2{margin-bottom:0}
.about-page .about-expertise-head>p{color:var(--text-soft);margin:0 0 2px}
.about-page .about-expertise-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;padding-top:40px}
.about-page .about-expertise-item{display:block;color:var(--text);min-width:0}
.about-page .about-expertise-photo{height:390px;overflow:hidden;border-bottom:2px solid var(--accent);box-shadow:0 0 38px color-mix(in srgb,var(--accent) 10%,transparent);position:relative}
.about-page .about-expertise-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 48%,color-mix(in srgb,var(--accent) 15%,transparent));opacity:.65;transition:opacity .4s ease}
.about-page .about-expertise-photo img{width:100%;height:100%;object-fit:cover;filter:saturate(.78);transition:transform 1.1s var(--ease),filter .7s ease}
.about-page .about-expertise-item:nth-child(2) .about-expertise-photo{height:330px;margin-top:60px}
.about-page .about-expertise-item:nth-child(3) .about-expertise-photo{height:420px;margin-top:0}
.about-page .about-expertise-item:nth-child(4) .about-expertise-photo{height:350px;margin-top:44px}
.about-page .about-expertise-item:hover .about-expertise-photo img{transform:scale(1.08);filter:saturate(1)}
.about-page .about-expertise-item:hover .about-expertise-photo:after{opacity:.9}
.about-page .about-expertise-meta{display:grid;grid-template-columns:35px 1fr auto;gap:10px;align-items:center;padding-top:15px;border-bottom:1px solid color-mix(in srgb,var(--text) 13%,transparent);padding-bottom:13px}
.about-page .about-expertise-meta span{font:700 14px/1 var(--font-body);color:var(--accent)}
.about-page .about-expertise-meta h3{font:600 1.4rem/1.15 var(--font-display);margin:0}
.about-page .about-expertise-meta b{color:var(--text-soft);font-size:14px;letter-spacing:.05em}
.about-page .about-expertise-meta b i{color:var(--accent);font-size:13px;margin-left:4px;transition:transform .4s var(--ease)}
.about-page .about-expertise-item:hover .about-expertise-meta b i{transform:translate(3px,-3px)}

.about-page .about-philosophy{background:var(--plum);color:var(--cream);padding:84px 0 78px}
.about-page .about-philosophy-glow{position:absolute;width:500px;height:500px;left:-180px;top:-170px;background:var(--accent);filter:blur(130px);opacity:.12;pointer-events:none}
.about-page .about-philosophy-line{position:absolute;left:-5%;right:-5%;top:30%;height:1px;background:color-mix(in srgb,var(--accent) 48%,transparent);box-shadow:0 0 16px color-mix(in srgb,var(--accent) 38%,transparent);transform:rotate(-5deg);pointer-events:none}
.about-page .about-philosophy-top{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid color-mix(in srgb,var(--cream) 20%,transparent);padding-bottom:17px}
.about-page .about-philosophy-top .about-eyebrow{color:color-mix(in srgb,var(--cream) 78%,transparent)}
.about-page .about-philosophy-top>span{color:var(--accent)}
.about-page .about-philosophy-statement{max-width:1000px;margin:76px auto 0;text-align:center;position:relative;z-index:2}
.about-page .about-philosophy-statement span{display:block;font:600 clamp(2.25rem,4.7vw,4.8rem)/1 var(--font-display);letter-spacing:-.05em}
.about-page .about-philosophy-statement strong{display:block;margin-top:7px;font:500 italic clamp(2rem,4vw,4.2rem)/1 var(--font-display);color:var(--accent)}
.about-page .about-philosophy-statement strong em{font-weight:600}
.about-page .about-philosophy-images{display:grid;grid-template-columns:1.1fr 1.4fr 1fr;gap:18px;margin:62px auto 0;max-width:1050px;align-items:end}
.about-page .about-philosophy-images figure{margin:0;position:relative;overflow:hidden;border-left:1px solid color-mix(in srgb,var(--accent) 60%,transparent);border-right:1px solid color-mix(in srgb,var(--accent) 18%,transparent);box-shadow:0 0 45px color-mix(in srgb,var(--accent) 12%,transparent)}
.about-page .about-philosophy-images figure:nth-child(1){height:180px}
.about-page .about-philosophy-images figure:nth-child(2){height:245px}
.about-page .about-philosophy-images figure:nth-child(3){height:205px}
.about-page .about-philosophy-images img{width:100%;height:100%;object-fit:cover;filter:brightness(.75) saturate(.7);transition:transform 1.1s var(--ease),filter .7s ease}
.about-page .about-philosophy-images figure:hover img{transform:scale(1.08);filter:brightness(.92) saturate(.95)}
.about-page .about-philosophy-images figcaption{position:absolute;left:13px;bottom:12px;color:var(--cream);font:700 14px/1 var(--font-body);letter-spacing:.1em;text-transform:uppercase;text-shadow:0 1px 9px #000}
.about-page .about-philosophy-bottom{display:grid;grid-template-columns:1fr auto;gap:50px;align-items:end;margin-top:38px;padding-top:19px;border-top:1px solid color-mix(in srgb,var(--cream) 18%,transparent)}
.about-page .about-philosophy-bottom p{max-width:620px;color:color-mix(in srgb,var(--cream) 80%,transparent);margin:0}
.about-page .about-philosophy-bottom>span{font:700 14px/1 var(--font-body);color:var(--accent);letter-spacing:.12em}

.about-page .about-testimonials{background:var(--surface)}
.about-page .about-testimonial-head{display:grid;grid-template-columns:1fr auto;align-items:end;gap:30px;padding-bottom:25px;border-bottom:1px solid color-mix(in srgb,var(--text) 15%,transparent)}
.about-page .about-testimonial-head h2{margin-bottom:0}
.about-page .about-testimonial-head>span{color:var(--accent)}
.about-page .about-testimonial-stage{min-height:430px;display:grid;grid-template-columns:90px 300px minmax(0,1fr);gap:50px;align-items:center;padding:52px 0 40px;position:relative}
.about-page .about-testimonial-index{display:flex;flex-direction:column;align-items:flex-start;gap:10px;color:var(--text-soft)}
.about-page .about-testimonial-index span:first-child{color:var(--accent);font-size:18px}
.about-page .about-testimonial-index i{width:1px;height:55px;background:var(--accent)}
.about-page .about-testimonial-photo{height:330px;position:relative;overflow:visible}
.about-page .about-testimonial-photo img{width:100%;height:100%;object-fit:cover;filter:saturate(.78);border-left:3px solid var(--accent);box-shadow:0 0 55px color-mix(in srgb,var(--accent) 19%,transparent);transition:transform .9s var(--ease),filter .7s ease,box-shadow .5s ease}
.about-page .about-testimonial-photo:hover img{transform:translateY(-7px) scale(1.025);filter:saturate(1);box-shadow:0 0 75px color-mix(in srgb,var(--accent) 32%,transparent)}
.about-page .about-photo-glow{position:absolute;inset:-18px -20px 18px -16px;border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);box-shadow:0 0 35px color-mix(in srgb,var(--accent) 16%,transparent);pointer-events:none;z-index:-1;animation:about-pulse 3.6s ease-in-out infinite}
.about-page .about-testimonial-copy{position:relative;min-width:0}
.about-page .about-quote-mark{position:absolute;left:-22px;top:-66px;font:500 7rem/.8 var(--font-display);color:color-mix(in srgb,var(--accent) 27%,transparent)}
.about-page .about-testimonial-slide{display:none}
.about-page .about-testimonial-slide.is-active{display:block;animation:about-quote-in .7s var(--ease) both}
.about-page .about-testimonial-slide blockquote{font:600 clamp(2rem,3.6vw,3.7rem)/1.05 var(--font-display);letter-spacing:-.045em;color:var(--text);margin:0 0 23px}
.about-page .about-testimonial-slide p{font:700 14px/1.5 var(--font-body);color:var(--text);letter-spacing:.05em;margin:0}
.about-page .about-testimonial-slide p span{display:block;margin-top:4px;font-weight:500;color:var(--text-soft)}
.about-page .about-testimonial-controls{display:flex;gap:13px;margin-top:28px}
.about-page .about-testimonial-controls button{width:46px;height:40px;border:1px solid color-mix(in srgb,var(--text) 18%,transparent);background:transparent;color:var(--text);font-size:15px;transition:transform .35s var(--ease),background .3s ease,color .3s ease,border-color .3s ease}
.about-page .about-testimonial-controls button:hover{transform:translateY(-4px);background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}

.about-page .about-cta{min-height:610px;display:flex;align-items:center;color:var(--cream);background:var(--plum)}
.about-page .about-cta-bg{position:absolute;inset:0}
.about-page .about-cta-bg img{width:100%;height:100%;object-fit:cover;filter:brightness(.5) saturate(.65);transform:scale(1.04);transition:transform 1.5s var(--ease),filter 1s ease}
.about-page .about-cta:hover .about-cta-bg img{transform:scale(1.09);filter:brightness(.58) saturate(.82)}
.about-page .about-cta-overlay{position:absolute;inset:0;background:linear-gradient(90deg,color-mix(in srgb,var(--plum) 94%,transparent),color-mix(in srgb,var(--plum) 65%,transparent) 58%,color-mix(in srgb,var(--plum) 36%,transparent))}
.about-page .about-cta-glow{position:absolute;width:460px;height:460px;left:3%;top:5%;background:var(--accent);filter:blur(120px);opacity:.13}
.about-page .about-cta-inner{padding:80px 0}
.about-page .about-cta-top{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid color-mix(in srgb,var(--cream) 22%,transparent);padding-bottom:17px}
.about-page .about-cta-top .about-eyebrow{color:color-mix(in srgb,var(--cream) 78%,transparent)}
.about-page .about-cta-top>span{color:var(--accent)}
.about-page .about-cta-copy{max-width:780px;margin-top:70px}
.about-page .about-cta-copy h2{font:600 clamp(2.9rem,5.8vw,5.7rem)/.91 var(--font-display)!important;letter-spacing:-.06em;color:var(--cream)!important;margin:0 0 20px!important}
.about-page .about-cta-copy h2 em{color:var(--accent)}
.about-page .about-cta-copy>p{max-width:550px;color:color-mix(in srgb,var(--cream) 80%,transparent);margin:0}
.about-page .about-cta-actions{display:flex;gap:25px;align-items:center;flex-wrap:wrap;margin-top:28px}
.about-page .about-cta-actions a{display:inline-flex;align-items:center;gap:12px;font:700 14px/1 var(--font-body);letter-spacing:.07em;text-transform:uppercase;transition:transform .4s var(--ease),color .3s ease,box-shadow .4s ease}
.about-page .about-cta-actions a:first-child{background:var(--accent);color:var(--accent-ink);padding:14px 18px;box-shadow:0 0 28px color-mix(in srgb,var(--accent) 23%,transparent)}
.about-page .about-cta-actions a:first-child:hover{transform:translateY(-5px);box-shadow:0 0 52px color-mix(in srgb,var(--accent) 42%,transparent)}
.about-page .about-cta-secondary{color:var(--cream);border-bottom:1px solid color-mix(in srgb,var(--cream) 55%,transparent);padding-bottom:8px}
.about-page .about-cta-secondary:hover{color:var(--accent);border-color:var(--accent)}
.about-page .about-cta-signature{position:absolute;right:0;bottom:30px;font:500 22px/1 var(--font-display);color:var(--cream);text-align:right}
.about-page .about-cta-signature span{display:block;margin-top:7px;color:color-mix(in srgb,var(--cream) 58%,transparent);font-size:14px}

.about-page .about-reveal{opacity:0;will-change:transform,opacity}
.about-page .about-reveal.about-visible{opacity:1}
.about-page [data-about-reveal="fade"]{transition:opacity .8s ease}
.about-page [data-about-reveal="up"]{transform:translateY(35px);transition:opacity .8s ease,transform .95s var(--ease)}
.about-page [data-about-reveal="up"].about-visible{transform:none}
.about-page [data-about-reveal="text"]{transform:translateY(28px);transition:opacity .85s ease,transform 1.05s var(--ease)}
.about-page [data-about-reveal="text"].about-visible{transform:none}
.about-page [data-about-reveal="hero-image"]{transform:translateY(45px) scale(.965);transition:opacity 1s ease,transform 1.2s var(--ease)}
.about-page [data-about-reveal="hero-image"].about-visible{transform:none}
.about-page [data-about-reveal="image"]{transform:translateY(38px) scale(.975);transition:opacity .9s ease,transform 1.15s var(--ease)}
.about-page [data-about-reveal="image"].about-visible{transform:none}
.about-page [data-about-reveal="stagger"]{transform:translateY(30px);transition:opacity .75s ease,transform .9s var(--ease)}
.about-page [data-about-reveal="stagger"].about-visible{transform:none}
.about-page [data-about-reveal="process"]{transform:translateX(28px);transition:opacity .75s ease,transform .85s var(--ease)}
.about-page [data-about-reveal="process"].about-visible{transform:none}
.about-page [data-about-reveal="testimonial"]{transform:translateY(35px);transition:opacity .9s ease,transform 1s var(--ease)}
.about-page [data-about-reveal="testimonial"].about-visible{transform:none}

@keyframes about-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
@keyframes about-pulse{0%,100%{opacity:.45;transform:scale(1)}50%{opacity:.9;transform:scale(1.018)}}
@keyframes about-quote-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

@media (max-width:1023px){
  .about-page .about-section{padding:66px 0}
  .about-page .about-wrap{width:min(calc(100% - 38px),900px)}
  .about-page .about-hero{min-height:720px}
  .about-page .about-display{font-size:clamp(3rem,8vw,5rem)!important}
  .about-page .about-hero-visual{height:285px}
  .about-page .about-hero-main{left:2%;width:72%;height:260px}
  .about-page .about-hero-side{width:29%;height:160px;right:0}
  .about-page .about-story{min-height:610px}
  .about-page .about-story-inner{min-height:610px;padding:68px 0 62px}
  .about-page .about-story-bottom{grid-template-columns:1fr;gap:32px}
  .about-page .about-section-head{grid-template-columns:1fr .8fr;gap:35px}
  .about-page .about-value-rail{grid-template-columns:repeat(2,1fr)}
  .about-page .about-value:nth-child(3){border-left:0}
  .about-page .about-value:nth-child(n+3){border-top:1px solid color-mix(in srgb,var(--text) 13%,transparent)}
  .about-page .about-craft-layout{grid-template-columns:1fr 1.1fr;gap:35px}
  .about-page .about-craft-image{height:430px}
  .about-page .about-expertise-grid{grid-template-columns:repeat(2,1fr);gap:34px}
  .about-page .about-expertise-item:nth-child(2) .about-expertise-photo,.about-page .about-expertise-item:nth-child(4) .about-expertise-photo{margin-top:0}
  .about-page .about-expertise-item:nth-child(1) .about-expertise-photo,.about-page .about-expertise-item:nth-child(2) .about-expertise-photo,.about-page .about-expertise-item:nth-child(3) .about-expertise-photo,.about-page .about-expertise-item:nth-child(4) .about-expertise-photo{height:360px}
  .about-page .about-testimonial-stage{grid-template-columns:70px 250px 1fr;gap:30px}
}
@media (max-width:767px){
  .about-page .about-section{padding:58px 0}
  .about-page .about-wrap{width:calc(100% - 30px)}
  .about-page .about-section p{font-size:14px}
  .about-page .about-eyebrow,.about-page .about-section-number,.about-page .about-hero-meta,.about-page .about-scroll-cue,.about-page .about-story-facts,.about-page .about-value-number,.about-page .about-craft-image-label,.about-page .about-craft-marquee,.about-page .about-expertise-meta b,.about-page .about-testimonial-index,.about-page .about-testimonial-head>span,.about-page .about-cta-top>span,.about-page .about-cta-signature span{font-size:14px}
  .about-page .about-hero{min-height:690px}
  .about-page .about-hero-wrap{padding:35px 0 55px}
  .about-page .about-hero-meta{font-size:14px}
  .about-page .about-hero-copy{margin-top:42px}
  .about-page .about-display{font-size:clamp(2.65rem,12vw,4.3rem)!important;line-height:.94!important}
  .about-page .about-lead{font-size:14px}
  .about-page .about-hero-visual{height:250px;margin-top:38px}
  .about-page .about-hero-main{left:0;width:78%;height:210px}
  .about-page .about-hero-side{right:0;width:30%;height:145px;bottom:0}
  .about-page .about-hero-caption{left:0;bottom:2px;gap:8px;padding:8px 9px}
  .about-page .about-hero-caption span{font-size:14px}
  .about-page .about-hero-caption strong{font-size:14px}
  .about-page .about-scroll-cue{display:none}
  .about-page .about-story{min-height:620px}
  .about-page .about-story-inner{min-height:620px;padding:58px 0 50px}
  .about-page .about-story-top{gap:10px}
  .about-page .about-story-rule{max-width:none;margin-left:4px}
  .about-page .about-story-title h2{font-size:clamp(2.35rem,10vw,3.7rem)}
  .about-page .about-story-bottom{gap:28px}
  .about-page .about-story-facts{grid-template-columns:repeat(2,1fr)}
  .about-page .about-story-facts div:nth-child(3){border-left:0;border-top:1px solid color-mix(in srgb,var(--cream) 15%,transparent)}
  .about-page .about-story-facts div:nth-child(4){border-top:1px solid color-mix(in srgb,var(--cream) 15%,transparent)}
  .about-page .about-section-head{display:block;padding-bottom:20px}
  .about-page .about-head-copy{margin-top:18px}
  .about-page .about-value-rail{grid-template-columns:1fr}
  .about-page .about-value,.about-page .about-value+.about-value{border-left:0;border-top:1px solid color-mix(in srgb,var(--text) 13%,transparent);padding:25px 0 28px;min-height:0}
  .about-page .about-value:first-child{border-top:0}
  .about-page .about-value p{max-width:100%}
  .about-page .about-craft-head{display:block;margin-bottom:30px}
  .about-page .about-craft-head>p:last-child{margin-top:18px}
  .about-page .about-craft-layout{grid-template-columns:1fr;gap:28px}
  .about-page .about-craft-image{height:320px;box-shadow:10px 10px 0 color-mix(in srgb,var(--accent) 8%,transparent)}
  .about-page .about-process-item{grid-template-columns:42px 1fr 22px;gap:10px;min-height:92px}
  .about-page .about-process-item h3{font-size:1.45rem}
  .about-page .about-process-item p{font-size:14px}
  .about-page .about-craft-marquee{gap:20px;justify-content:flex-start;white-space:nowrap}
  .about-page .about-expertise-head{grid-template-columns:45px 1fr;gap:12px}
  .about-page .about-expertise-head>p{grid-column:2;margin-top:6px}
  .about-page .about-expertise-grid{grid-template-columns:1fr 1fr;gap:22px;padding-top:30px}
  .about-page .about-expertise-item:nth-child(1) .about-expertise-photo,.about-page .about-expertise-item:nth-child(2) .about-expertise-photo,.about-page .about-expertise-item:nth-child(3) .about-expertise-photo,.about-page .about-expertise-item:nth-child(4) .about-expertise-photo{height:285px}
  .about-page .about-expertise-meta{grid-template-columns:28px 1fr;padding-top:11px}
  .about-page .about-expertise-meta h3{font-size:1.25rem}
  .about-page .about-expertise-meta b{grid-column:2;margin-top:2px}
  .about-page .about-philosophy{padding:64px 0}
  .about-page .about-philosophy-top{display:block}
  .about-page .about-philosophy-top>span{display:block;margin-top:12px}
  .about-page .about-philosophy-statement{margin-top:54px}
  .about-page .about-philosophy-statement span{font-size:clamp(2.15rem,10vw,3.5rem)}
  .about-page .about-philosophy-statement strong{font-size:clamp(1.95rem,8.8vw,3.1rem)}
  .about-page .about-philosophy-images{grid-template-columns:1fr 1.2fr 1fr;gap:9px;margin-top:45px}
  .about-page .about-philosophy-images figure:nth-child(1){height:125px}
  .about-page .about-philosophy-images figure:nth-child(2){height:165px}
  .about-page .about-philosophy-images figure:nth-child(3){height:140px}
  .about-page .about-philosophy-images figcaption{font-size:14px;left:7px;bottom:8px}
  .about-page .about-philosophy-bottom{display:block;margin-top:28px}
  .about-page .about-philosophy-bottom>span{display:block;margin-top:18px}
  .about-page .about-testimonial-head{display:block}
  .about-page .about-testimonial-head>span{display:block;margin-top:12px}
  .about-page .about-testimonial-stage{min-height:0;display:grid;grid-template-columns:40px 1fr;gap:18px;padding:42px 0 22px}
  .about-page .about-testimonial-index{padding-top:5px}
  .about-page .about-testimonial-photo{grid-column:2;height:330px}
  .about-page .about-testimonial-copy{grid-column:2;margin-top:22px}
  .about-page .about-quote-mark{left:-5px;top:-47px;font-size:5.8rem}
  .about-page .about-testimonial-slide blockquote{font-size:clamp(1.85rem,8.3vw,2.8rem)}
  .about-page .about-testimonial-controls{margin-top:22px}
  .about-page .about-cta{min-height:620px}
  .about-page .about-cta-inner{padding:62px 0}
  .about-page .about-cta-top{display:block}
  .about-page .about-cta-top>span{display:block;margin-top:12px}
  .about-page .about-cta-copy{margin-top:52px}
  .about-page .about-cta-copy h2{font-size:clamp(2.7rem,12vw,4.6rem)!important}
  .about-page .about-cta-copy>p{font-size:14px}
  .about-page .about-cta-actions{align-items:flex-start;gap:20px}
  .about-page .about-cta-actions a{font-size:14px}
  .about-page .about-cta-signature{right:0;bottom:20px;font-size:18px}
  .about-page .about-cta-signature span{font-size:14px}
}
@media (max-width:430px){
  .about-page .about-hero{min-height:670px}
  .about-page .about-display{font-size:2.55rem!important}
  .about-page .about-hero-visual{height:225px}
  .about-page .about-hero-main{height:188px}
  .about-page .about-hero-side{height:132px}
  .about-page .about-story{min-height:610px}
  .about-page .about-story-inner{min-height:610px}
  .about-page .about-expertise-grid{gap:16px}
  .about-page .about-expertise-item:nth-child(1) .about-expertise-photo,.about-page .about-expertise-item:nth-child(2) .about-expertise-photo,.about-page .about-expertise-item:nth-child(3) .about-expertise-photo,.about-page .about-expertise-item:nth-child(4) .about-expertise-photo{height:245px}
  .about-page .about-testimonial-stage{grid-template-columns:1fr}
  .about-page .about-testimonial-index{grid-column:1;flex-direction:row;align-items:center}
  .about-page .about-testimonial-index i{width:45px;height:1px}
  .about-page .about-testimonial-photo,.about-page .about-testimonial-copy{grid-column:1}
  .about-page .about-testimonial-photo{height:290px}
}
@media (prefers-reduced-motion:reduce){
  .about-page *,.about-page *::before,.about-page *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .about-page .about-reveal{opacity:1!important;transform:none!important}
}


.about-page .about-word{display:inline-block;opacity:0;transform:translateY(105%);clip-path:inset(0 0 100% 0);transition:opacity .7s ease,transform .8s var(--ease),clip-path .8s var(--ease)}
.about-page .about-word-visible{opacity:1;transform:none;clip-path:inset(0 0 0 0)}
.about-page .about-hero-main img,.about-page .about-hero-side img,.about-page .about-craft-image img,.about-page .about-expertise-photo img,.about-page .about-philosophy-images img{transform:translate3d(var(--mx,0),var(--my,0),0) scale(1.001)}
.about-page .about-craft-marquee{transform:translateX(var(--craft-shift,0));transition:transform .2s linear}
.about-page .about-testimonial-stage:focus-visible{outline:2px solid var(--accent);outline-offset:8px}
.about-page .about-image-changing{opacity:.15!important;transform:scale(.985)!important;transition:opacity .18s ease,transform .35s ease!important}

/* =========================================================
   LOOM & LORE — ALTERATIONS PAGE / 8-SECTION SYSTEM
   Scoped to .alterations-page so existing pages remain intact.
   ========================================================= */
.alterations-page{
  --alt-bg:var(--bg);
  --alt-surface:var(--surface);
  --alt-text:var(--ink);
  --alt-soft:var(--ink-soft);
  --alt-accent:var(--accent);
  --alt-gold:var(--gold);
  --alt-line:rgba(29,41,35,.14);
  --alt-deep:#17372f;
  color:var(--alt-text);
  background:var(--alt-bg);
  overflow:hidden;
}
.alterations-page *{min-width:0;}
.alterations-page p,
.alterations-page li,
.alterations-page button,
.alterations-page a,
.alterations-page span,
.alterations-page small,
.alterations-page strong{font-size:14px;}
.alterations-page h1,.alterations-page h2,.alterations-page h3{color:var(--ink);}
.alt-wrap{width:min(calc(100% - 56px),1240px);margin-inline:auto;}
.alt-section{position:relative;isolation:isolate;overflow:hidden;border-bottom:1px solid var(--alt-line);}
.alt-kicker,.alt-index,.alt-overline{font-family:var(--font-body);font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-size:14px!important;color:var(--alt-soft);}
.alt-kicker{display:flex;align-items:center;gap:11px;}
.alt-kicker i{display:block;width:34px;height:1px;background:var(--alt-gold);}
.alt-index{display:block;margin-bottom:18px;}
.alt-overline{margin:0 0 17px;color:var(--alt-accent);}
.alt-section h2{font-size:clamp(2rem,3.8vw,3.35rem);line-height:1.08;letter-spacing:-.035em;font-weight:650;margin:0;}
.alt-section h2 em{font-family:var(--font-display);font-weight:500;color:var(--alt-accent);}
.alt-lead{font-size:17px!important;line-height:1.75;max-width:560px;color:var(--alt-soft);}

/* shared reveal */
.alt-reveal{opacity:0;transform:translateY(30px);transition:opacity .8s var(--ease),transform .9s var(--ease);}
.alt-reveal.is-visible{opacity:1;transform:none;}
.alt-delay-1{transition-delay:.12s}.alt-delay-2{transition-delay:.22s}.alt-delay-3{transition-delay:.34s}

/* 01 */
.alt-hero{min-height:calc(100vh - 82px);display:flex;align-items:center;background:var(--alt-bg);}
.alt-hero-bg{position:absolute;inset:0;pointer-events:none;z-index:-1;}
.alt-ghost{position:absolute;right:2%;bottom:-8%;font-family:var(--font-display);font-size:clamp(9rem,22vw,20rem);font-weight:600;line-height:.7;color:rgba(85,122,104,.055);}
.alt-glow{position:absolute;border-radius:50%;filter:blur(60px);background:var(--alt-accent);opacity:.16;}
.alt-glow-a{width:320px;height:320px;right:30%;top:4%}.alt-glow-b{width:260px;height:260px;left:-90px;bottom:5%;opacity:.09;}
.alt-thread{position:absolute;height:1px;background:linear-gradient(90deg,transparent,var(--alt-gold),transparent);transform-origin:left center;opacity:.65;}
.alt-thread-a{width:55%;right:8%;top:28%;transform:rotate(-13deg);animation:altThread 7s ease-in-out infinite;}
.alt-thread-b{width:35%;left:5%;bottom:17%;transform:rotate(12deg);animation:altThread 9s ease-in-out infinite reverse;}
@keyframes altThread{50%{transform:scaleX(.7) rotate(-9deg);opacity:.28}}
.alt-hero-grid{display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);gap:clamp(30px,5vw,76px);align-items:center;padding:72px 0 36px;}
.alt-hero-copy{position:relative;z-index:2;padding-block:24px;}
.alt-hero h1{font-size:clamp(3rem,6vw,5.6rem);line-height:.98;letter-spacing:-.055em;font-weight:650;margin:10px 0 24px;}
.alt-hero h1 em{display:inline-block;color:var(--alt-accent);font-weight:500;font-style:italic;}
.alt-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:30px;}
.alt-btn{display:inline-flex;align-items:center;gap:12px;padding:13px 18px;border:1px solid transparent;border-radius:8px;font-size:14px!important;font-weight:800;letter-spacing:.01em;transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease);}
.alt-btn i{transition:transform .3s var(--ease);}
.alt-btn:hover{transform:translateY(-3px);}
.alt-btn:hover i{transform:translateX(6px);}
.alt-btn-primary{background:var(--alt-accent);color:#fff;box-shadow:0 12px 30px rgba(85,122,104,.18);}
.alt-text-link,.alt-light-link,.alt-line-cta{font-size:14px!important;font-weight:800;display:inline-flex;gap:10px;align-items:center;color:var(--alt-text);}
.alt-text-link span,.alt-light-link span{color:var(--alt-accent);transition:transform .3s}.alt-text-link:hover span,.alt-light-link:hover span{transform:translate(4px,-3px);}
.alt-hero-art{position:relative;min-height:600px;display:flex;align-items:center;justify-content:center;}
.alt-hero-image-wrap{width:min(100%,650px);height:clamp(500px,62vh,680px);position:relative;overflow:hidden;border-radius:18px 18px 0 18px;box-shadow:0 35px 80px rgba(29,41,35,.16);}
.alt-hero-image-wrap img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 1.2s var(--ease),filter .8s var(--ease);}
.alt-hero-image-wrap:hover img{transform:scale(1.11);filter:saturate(1.06);}
.alt-image-light{position:absolute;inset:0;background:radial-gradient(circle at 38% 45%,rgba(181,154,91,.34),transparent 32%),linear-gradient(120deg,transparent 40%,rgba(255,255,255,.14),transparent 58%);mix-blend-mode:screen;animation:altLight 6s ease-in-out infinite;}
@keyframes altLight{50%{transform:translateX(10%);opacity:.65}}
.alt-image-caption{position:absolute;left:22px;bottom:20px;color:#fff!important;font-weight:800;letter-spacing:.15em;text-shadow:0 2px 16px rgba(0,0,0,.4);}
.alt-measure-tag{position:absolute;left:-20px;top:18%;background:var(--alt-deep);color:#fff;padding:14px 16px;line-height:1.35;letter-spacing:.1em;font-size:14px!important;box-shadow:0 16px 40px rgba(23,55,47,.22);animation:altFloat 4.5s ease-in-out infinite;}
.alt-measure-tag strong{font-size:14px!important;color:#fff;}
@keyframes altFloat{50%{transform:translateY(-10px)}}
.alt-hero-bottom{width:min(calc(100% - 56px),1240px);margin:0 auto;display:flex;justify-content:space-between;align-items:center;padding:16px 0 24px;color:var(--alt-soft);font-weight:700;letter-spacing:.12em;}
.alt-scroll{display:flex;align-items:center;gap:10px;color:var(--alt-accent)!important;cursor:pointer;}.alt-scroll i{animation:altBounce 1.7s infinite}.alt-scroll:hover i{transform:translateY(4px)}@keyframes altBounce{50%{transform:translateY(5px)}}

/* 02 */
.alt-reimagined{padding:82px 0 0;background:var(--alt-surface);}
.alt-section-head{text-align:center;max-width:850px;margin:0 auto;}
.alt-section-head p{font-size:15px!important;color:var(--alt-soft);margin:20px auto 0;max-width:650px;}
.alt-flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;align-items:center;gap:18px;margin:52px 0 60px;}
.alt-flow-word{text-align:center;position:relative;padding:8px 4px;transition:transform .4s var(--ease),color .4s var(--ease);}
.alt-flow-word b{display:block;font-family:var(--font-display);font-size:24px!important;font-weight:650;letter-spacing:.03em;}
.alt-flow-word span{display:block;margin-top:4px;color:var(--alt-soft);font-size:14px!important;}
.alt-flow-word:hover{transform:translateY(-7px);color:var(--alt-accent);}
.alt-flow-line{height:1px;background:linear-gradient(90deg,transparent,var(--alt-gold),transparent);position:relative;}
.alt-flow-line:after{content:"→";position:absolute;right:-3px;top:-11px;color:var(--alt-gold);font-size:16px;}
.alt-reimagined-visual{position:relative;height:360px;overflow:hidden;}
.alt-reimagined-visual img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease);filter:saturate(.85);}
.alt-reimagined-visual:hover img{transform:scale(1.06);}
.alt-visual-copy{position:absolute;left:7%;bottom:42px;color:#fff;z-index:2;text-shadow:0 3px 22px rgba(0,0,0,.35);}
.alt-visual-copy span{display:block;font-weight:800;letter-spacing:.16em;margin-bottom:8px;}
.alt-visual-copy strong{font-family:var(--font-display);font-size:clamp(2rem,4vw,3.4rem)!important;line-height:1.05;font-weight:550;}
.alt-glow-line{position:absolute;width:45%;height:2px;background:var(--alt-gold);left:2%;bottom:25px;box-shadow:0 0 18px var(--alt-gold);animation:altSweep 5s ease-in-out infinite;}
@keyframes altSweep{50%{left:52%;width:28%;opacity:.35}}

/* 03 */
.alt-alter-map{padding:88px 0 82px;background:var(--alt-bg);}
.alt-map-heading{display:grid;grid-template-columns:1fr 1.5fr .9fr;align-items:end;gap:36px;margin-bottom:48px;}
.alt-map-heading p{font-size:15px!important;color:var(--alt-soft);margin:0;max-width:360px;}
.alt-map-stage{height:560px;position:relative;max-width:1100px;margin:0 auto;}
.alt-map-image{position:absolute;width:min(46%,510px);height:510px;left:50%;top:0;transform:translateX(-50%);overflow:hidden;border-radius:12px 0 12px 0;box-shadow:0 24px 60px rgba(29,41,35,.12);}
.alt-map-image img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease);}
.alt-map-image:hover img{transform:scale(1.05);}
.alt-map-sheen{position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.22),transparent 65%);animation:altLight 6s infinite;}
.alt-hotspot{position:absolute;display:flex;align-items:center;gap:9px;color:var(--alt-text);font-weight:800;padding:7px 0;border:0;background:transparent;transition:transform .35s var(--ease),color .35s var(--ease);z-index:3;}
.alt-hotspot span{display:grid;place-items:center;width:30px;height:30px;border:1px solid var(--alt-accent);border-radius:6px;font-size:13px!important;color:var(--alt-accent);}
.alt-hotspot b{font-size:14px!important;letter-spacing:.02em;}
.alt-hotspot:after{content:"";position:absolute;height:1px;width:100px;background:var(--alt-accent);top:50%;opacity:.45;transition:width .35s;}
.alt-hotspot:hover{transform:translateY(-4px);color:var(--alt-accent);}
.alt-hotspot:hover:after{width:145px;opacity:.9;}
.hs-shoulder{left:4%;top:19%}.hs-shoulder:after,.hs-waist:after,.hs-hem:after{left:100%;margin-left:8px;}
.hs-sleeve{right:3%;top:22%}.hs-sleeve:after,.hs-length:after{right:100%;margin-right:8px;}
.hs-waist{left:2%;top:49%}.hs-length{right:2%;top:52%}.hs-hem{left:13%;bottom:13%;}
.alt-map-info{position:absolute;right:0;bottom:0;width:300px;padding:0 0 2px 22px;border-left:2px solid var(--alt-accent);background:linear-gradient(90deg,rgba(241,243,234,.92),transparent);transition:transform .4s var(--ease);}
.alt-map-info span{font-weight:800;letter-spacing:.12em;color:var(--alt-accent);}.alt-map-info strong{display:block;font-family:var(--font-display);font-size:21px!important;margin:7px 0;color:var(--alt-text);}.alt-map-info p{color:var(--alt-soft);line-height:1.55;}

/* 04 */
.alt-pricing{padding:92px 0;background:var(--alt-deep);color:#fff;min-height:680px;}
.alt-pricing .alt-index,.alt-pricing h2,.alt-pricing p{color:#fff;}
.alt-pricing h2 em{color:#d7bd7a;}
.alt-pricing-bg{position:absolute;inset:0;z-index:-1;opacity:.18;}
.alt-pricing-bg img{width:100%;height:100%;object-fit:cover;mix-blend-mode:luminosity;}
.alt-pricing-bg span{position:absolute;inset:0;background:linear-gradient(90deg,var(--alt-deep) 0%,rgba(23,55,47,.94) 34%,rgba(23,55,47,.7) 100%);}
.alt-pricing .alt-wrap{display:grid;grid-template-columns:.75fr 1.25fr;gap:90px;align-items:start;}
.alt-pricing-intro{position:sticky;top:110px;}
.alt-pricing-intro p{max-width:380px;color:rgba(255,255,255,.75);margin:22px 0;font-size:15px!important;}
.alt-line-cta{color:#fff!important;border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:8px;}
.alt-line-cta i{transition:transform .3s}.alt-line-cta:hover i{transform:translateX(6px);}
.alt-price-list{border-top:1px solid rgba(255,255,255,.24);}
.alt-price-row{width:100%;position:relative;display:grid;grid-template-columns:48px 1fr auto 26px;gap:18px;align-items:center;text-align:left;color:#fff;padding:22px 0;border-bottom:1px solid rgba(255,255,255,.18);background:transparent;transition:padding .45s var(--ease),background .35s;}
.alt-price-row:hover,.alt-price-row.is-open{padding-left:12px;padding-right:12px;background:rgba(255,255,255,.045);}
.price-num{font-family:var(--font-display);font-size:20px!important;color:#bca66c;}
.price-name strong{display:block;font-size:16px!important;font-weight:800;text-transform:uppercase;letter-spacing:.04em;}
.price-name small{display:block;color:rgba(255,255,255,.62);margin-top:4px;font-size:14px!important;}
.price-value{font-weight:800;color:#e4cf91;white-space:nowrap;font-size:15px!important;}
.alt-price-row>i{color:#d7bd7a;transition:transform .35s}.alt-price-row:hover>i,.alt-price-row.is-open>i{transform:translateX(6px);}
.price-more{grid-column:2/-1;max-height:0;opacity:0;overflow:hidden;color:rgba(255,255,255,.72);font-size:14px!important;transition:max-height .45s var(--ease),opacity .35s,padding .35s;}
.alt-price-row.is-open .price-more{max-height:70px;opacity:1;padding:6px 0 4px;}

/* 05 */
.alt-before-after{padding:88px 0 82px;background:var(--alt-surface);}
.alt-before-after .alt-wrap{display:grid;grid-template-columns:.55fr 1.45fr;column-gap:60px;align-items:center;}
.alt-before-head p{color:var(--alt-soft);line-height:1.65;margin-top:20px;font-size:15px!important;}
.alt-comparison{height:520px;position:relative;overflow:hidden;border-radius:16px;box-shadow:0 22px 55px rgba(29,41,35,.14);cursor:ew-resize;}
.alt-comparison>div:not(.alt-compare-divider):not(.alt-compare-label){position:absolute;inset:0;}
.alt-comparison img{width:100%;height:100%;object-fit:cover;}
.alt-after img{filter:saturate(.92);}
.alt-before{width:50%;overflow:hidden;z-index:2;}
.alt-before img{width:200%;max-width:none;}
.alt-compare-divider{position:absolute;z-index:4;top:0;bottom:0;left:50%;width:2px;background:#fff;box-shadow:0 0 20px rgba(0,0,0,.25);pointer-events:none;}
.alt-compare-divider span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:42px;height:42px;border:1px solid #fff;background:var(--alt-accent);color:#fff;border-radius:50%;font-size:17px!important;}
.alt-compare-label{position:absolute;z-index:5;top:20px;font-weight:800;letter-spacing:.14em;color:#fff;text-shadow:0 2px 10px #000;}
.alt-label-before{left:22px}.alt-label-after{right:22px;}
.alt-comparison input{position:absolute;inset:0;width:100%;height:100%;opacity:0;z-index:6;cursor:ew-resize;margin:0;}
.alt-before-note{grid-column:2;display:flex;align-items:center;gap:18px;margin-top:17px;color:var(--alt-soft);}
.alt-before-note span{font-weight:800;letter-spacing:.1em;color:var(--alt-accent);}
.alt-before-note strong{font-family:var(--font-display);font-size:18px!important;font-weight:550;color:var(--alt-text);margin-left:auto;}

/* 06 */
.alt-process{padding:94px 0 105px;background:var(--alt-deep);color:#fff;}
.alt-process-bg{position:absolute;inset:0;z-index:-1;opacity:.17;}
.alt-process-bg img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);}
.alt-process:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,var(--alt-deep),rgba(23,55,47,.78),var(--alt-deep));}
.alt-process h2{color:#fff;}.alt-process h2 em{color:#d7bd7a;}
.alt-process-heading{text-align:center;max-width:600px;margin:0 auto 78px;}
.alt-process-track{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:18px;}
.alt-process-thread{position:absolute;left:6%;right:6%;top:28px;height:1px;background:linear-gradient(90deg,transparent,#d7bd7a 10%,#d7bd7a 90%,transparent);box-shadow:0 0 12px rgba(215,189,122,.65);transform-origin:left;animation:altThread 6s ease-in-out infinite;}
.alt-step{position:relative;text-align:center;padding-top:0;transition:transform .45s var(--ease);}
.alt-step:hover{transform:translateY(-10px);}
.alt-step b{display:grid;place-items:center;margin:0 auto 25px;width:56px;height:56px;background:var(--alt-deep);border:1px solid #d7bd7a;color:#d7bd7a;font-family:var(--font-display);font-size:17px!important;position:relative;z-index:2;}
.alt-step strong{display:block;font-size:16px!important;letter-spacing:.12em;}
.alt-step p{color:rgba(255,255,255,.7);line-height:1.55;margin:8px auto 0;max-width:150px;}

/* 07 */
.alt-estimator{padding:88px 0;background:var(--alt-bg);}
.alt-estimator-intro{max-width:700px;margin:0 auto 52px;text-align:center;}
.alt-estimator-intro p{font-size:15px!important;color:var(--alt-soft);margin:18px auto 0;}
.alt-estimator-main{display:grid;grid-template-columns:1.1fr .9fr;gap:70px;align-items:center;}
.alt-selector{padding:4px 0;}
.alt-selector>span{display:block;font-weight:800;letter-spacing:.13em;color:var(--alt-accent);margin:0 0 14px;}
.alt-choice-group{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:30px;}
.alt-choice-group button{border:1px solid var(--alt-line);background:transparent;color:var(--alt-text);padding:10px 15px;border-radius:8px;font-size:14px!important;font-weight:700;transition:background .3s,color .3s,border-color .3s,transform .3s;}
.alt-choice-group button:hover,.alt-choice-group button.is-selected{background:var(--alt-accent);color:#fff;border-color:var(--alt-accent);transform:translateY(-2px);}
.alt-estimate{margin-top:8px;padding:22px 0;border-top:1px solid var(--alt-line);border-bottom:1px solid var(--alt-line);display:grid;grid-template-columns:1fr auto;align-items:center;gap:14px;}
.alt-estimate small{font-size:14px!important;font-weight:800;letter-spacing:.1em;color:var(--alt-soft);}
.alt-estimate strong{font-family:var(--font-display);font-size:32px!important;color:var(--alt-text);font-weight:600;}
.alt-estimate a{grid-column:1/-1;display:inline-flex;align-items:center;gap:10px;color:var(--alt-accent);font-weight:800;font-size:14px!important;}
.alt-estimate a i{transition:transform .3s}.alt-estimate a:hover i{transform:translateX(6px);}
.alt-testimonial{position:relative;border-left:2px solid var(--alt-accent);padding:14px 0 14px 34px;min-height:280px;display:flex;flex-direction:column;justify-content:center;}
.alt-quote-mark{font-family:var(--font-display);font-size:68px!important;line-height:.6;color:var(--alt-gold);opacity:.65;}
.alt-testimonial blockquote{font-family:var(--font-display);font-size:25px!important;line-height:1.3;color:var(--alt-text);margin:18px 0 22px;max-width:510px;}
.alt-quote-person{display:flex;align-items:center;gap:12px;}
.alt-quote-person img{width:48px;height:48px;object-fit:cover;border-radius:8px;filter:saturate(.8);}
.alt-quote-person strong{display:block;font-size:14px!important}.alt-quote-person small{display:block;color:var(--alt-soft);font-size:14px!important;}
.alt-quote-count{margin-left:auto;color:var(--alt-soft);font-weight:800;}
.alt-quote-controls{display:flex;gap:7px;margin-top:20px;}
.alt-quote-controls button{width:38px;height:34px;border:1px solid var(--alt-line);color:var(--alt-text);font-size:17px!important;transition:background .3s,color .3s,transform .3s;}
.alt-quote-controls button:hover{background:var(--alt-accent);color:#fff;transform:translateY(-2px);}

/* 08 */
.alt-final{min-height:610px;display:flex;align-items:center;color:#fff;}
.alt-final-bg{position:absolute;inset:0;z-index:-1;}
.alt-final-bg img{width:100%;height:100%;object-fit:cover;filter:brightness(.48) saturate(.8);transform:scale(1.04);animation:altFinalZoom 12s ease-in-out infinite alternate;}
@keyframes altFinalZoom{to{transform:scale(1.1)}}
.alt-final-bg:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(17,36,31,.92),rgba(17,36,31,.58),rgba(17,36,31,.28));}
.alt-final-light{position:absolute;width:420px;height:420px;right:15%;top:5%;background:var(--alt-gold);filter:blur(100px);opacity:.13;border-radius:50%;animation:altFloat 6s ease-in-out infinite;}
.alt-final-thread{position:absolute;width:75%;height:1px;left:-5%;bottom:25%;background:linear-gradient(90deg,transparent,#d7bd7a,transparent);box-shadow:0 0 16px rgba(215,189,122,.8);transform:rotate(-7deg);animation:altSweep 7s ease-in-out infinite;}
.alt-final-content{padding:105px 0;}
.alt-final h2{color:#fff;font-size:clamp(2.8rem,6vw,5.3rem);font-weight:600;line-height:1.02;}
.alt-final h2 em{color:#d7bd7a;}
.alt-final p{font-size:17px!important;color:rgba(255,255,255,.78);max-width:550px;margin-top:20px;}
.alt-btn-light{background:#fff;color:var(--alt-deep);box-shadow:0 16px 34px rgba(0,0,0,.18);}
.alt-light-link{color:#fff!important;}

/* staggered elements that do not use the shared reveal class */
.alt-flow-word,.alt-step{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .8s var(--ease);}
.alt-flow-word.is-visible,.alt-step.is-visible{opacity:1;transform:none;}
.alt-hotspot.is-active{color:var(--alt-accent);}
.alt-hotspot.is-active span{background:var(--alt-accent);color:#fff;box-shadow:0 0 18px rgba(85,122,104,.28);}
.alt-info-pulse{animation:altInfoPulse .45s var(--ease);}
@keyframes altInfoPulse{50%{transform:translateX(4px);opacity:.65}}

/* responsive */
@media (max-width:1050px){
  .alt-wrap{width:min(calc(100% - 42px),980px);}
  .alt-hero-grid{gap:35px}.alt-hero-art{min-height:520px}.alt-hero-image-wrap{height:530px;}
  .alt-map-heading{grid-template-columns:1fr 1.3fr}.alt-map-heading p{grid-column:2;}
  .alt-map-stage{height:540px}.alt-map-image{height:480px;width:48%;}
  .alt-pricing .alt-wrap{gap:48px}.alt-before-after .alt-wrap{grid-template-columns:.5fr 1.5fr;gap:36px;}
}
@media (max-width:820px){
  .alt-wrap{width:min(calc(100% - 32px),700px);}
  .alt-hero{min-height:auto}.alt-hero-grid{grid-template-columns:1fr;padding:56px 0 25px;}
  .alt-hero-copy{text-align:center}.alt-kicker{justify-content:center}.alt-lead{margin-inline:auto}.alt-actions{justify-content:center;}
  .alt-hero-art{min-height:430px}.alt-hero-image-wrap{height:500px;width:88%;margin-left:auto;margin-right:0}.alt-measure-tag{left:0;}
  .alt-hero-bottom{width:min(calc(100% - 32px),700px);}
  .alt-flow{grid-template-columns:repeat(4,1fr);gap:5px;margin:42px 0 48px}.alt-flow-line{display:none;}
  .alt-reimagined-visual{height:320px;}
  .alt-map-heading{grid-template-columns:1fr;text-align:center}.alt-map-heading p{grid-column:auto;margin-inline:auto;}
  .alt-map-stage{height:680px}.alt-map-image{width:min(62%,430px);height:500px;}
  .hs-shoulder{left:0;top:17%}.hs-waist{left:0;top:48%}.hs-hem{left:5%;bottom:17%}
  .hs-sleeve{right:0;top:20%}.hs-length{right:0;top:50%}
  .alt-map-info{right:50%;transform:translateX(50%);bottom:0;width:min(430px,100%);border-left:0;border-top:2px solid var(--alt-accent);padding:15px 0 0;background:var(--alt-bg);}
  .alt-pricing .alt-wrap{grid-template-columns:1fr;gap:42px}.alt-pricing-intro{position:relative;top:auto;text-align:center}.alt-pricing-intro p{margin-inline:auto;}
  .alt-price-row{grid-template-columns:42px 1fr auto 22px;gap:10px;}
  .alt-before-after .alt-wrap{grid-template-columns:1fr;gap:35px}.alt-before-note{grid-column:auto}.alt-before-note strong{margin-left:auto;}
  .alt-comparison{height:450px;}
  .alt-process-track{grid-template-columns:1fr;gap:0;padding-left:34px}.alt-process-thread{top:20px;bottom:20px;left:12px;right:auto;width:1px;height:auto;background:linear-gradient(180deg,transparent,#d7bd7a 10%,#d7bd7a 90%,transparent);animation:altThreadVertical 6s ease-in-out infinite;}
  @keyframes altThreadVertical{50%{transform:scaleY(.7);opacity:.35}}
  .alt-step{text-align:left;display:grid;grid-template-columns:60px 1fr;column-gap:18px;padding:0 0 34px;align-items:start}.alt-step b{margin:0}.alt-step strong{padding-top:14px}.alt-step p{grid-column:2;margin:4px 0 0;max-width:none;}
  .alt-estimator-main{grid-template-columns:1fr;gap:45px}.alt-testimonial{min-height:250px;}
}
@media (max-width:560px){
  .alt-section h2{font-size:clamp(1.85rem,9vw,2.5rem);}
  .alt-hero h1{font-size:clamp(2.65rem,13vw,4rem);}
  .alt-hero-image-wrap{width:100%;height:410px;border-radius:14px 14px 0 14px}.alt-hero-art{min-height:420px;}
  .alt-measure-tag{left:8px;top:12%;}.alt-hero-bottom{flex-direction:column;gap:12px;align-items:flex-start;}
  .alt-reimagined,.alt-alter-map,.alt-before-after,.alt-estimator{padding:64px 0;}
  .alt-flow{grid-template-columns:1fr 1fr;row-gap:22px;margin:35px 0 40px;}
  .alt-reimagined-visual{height:290px}.alt-visual-copy{left:6%;bottom:30px}.alt-visual-copy strong{font-size:28px!important;}
  .alt-map-stage{height:620px}.alt-map-image{width:72%;height:420px;top:0}.alt-hotspot b{font-size:14px!important;}
  .hs-shoulder{top:10%}.hs-sleeve{top:15%}.hs-waist{top:40%}.hs-length{top:43%}.hs-hem{bottom:26%;}
  .alt-map-info{bottom:0;}
  .alt-pricing{padding:70px 0}.alt-price-row{grid-template-columns:30px 1fr 20px;padding:18px 0}.price-value{grid-column:2;grid-row:2;margin-top:-4px}.alt-price-row>i{grid-column:3;grid-row:1/3}.price-name small{line-height:1.45;}
  .alt-comparison{height:360px}.alt-before-note{flex-wrap:wrap}.alt-before-note strong{width:100%;margin-left:0;}
  .alt-process{padding:70px 0 78px}.alt-process-heading{margin-bottom:52px;}
  .alt-choice-group{gap:7px}.alt-choice-group button{padding:9px 11px;}
  .alt-estimate{grid-template-columns:1fr}.alt-estimate strong{grid-column:1;}
  .alt-testimonial{padding-left:22px}.alt-testimonial blockquote{font-size:21px!important;}
  .alt-final{min-height:560px}.alt-final-content{padding:75px 0}.alt-final h2{font-size:clamp(2.5rem,12vw,4rem);}
}
@media (prefers-reduced-motion:reduce){
  .alt-reveal{opacity:1;transform:none;transition:none}
  .alt-thread,.alt-image-light,.alt-final-bg img,.alt-final-light,.alt-final-thread,.alt-process-thread,.alt-glow-line{animation:none!important}
}


/* =========================================================
   ALTERATIONS V5 — HERO / CTA RESTRUCTURE + DARK CONTRAST
   Scoped to .alterations-page. No other page is affected.
   ========================================================= */
.alterations-page{
  --alt-bg:var(--bg);
  --alt-surface:var(--surface);
  --alt-text:var(--text);
  --alt-soft:var(--text-soft);
  --alt-accent:var(--accent);
  --alt-gold:var(--gold);
  --alt-line:var(--line);
  --alt-deep:#17372f;
  color:var(--alt-text);
  background:var(--alt-bg);
}
.alterations-page .alt-section{color:var(--alt-text);}
.alterations-page .alt-section p,
.alterations-page .alt-section .alt-flow-word span,
.alterations-page .alt-section .alt-map-heading p,
.alterations-page .alt-section .alt-before-head p,
.alterations-page .alt-section .alt-estimator-intro p{color:var(--alt-soft);}
.alterations-page .alt-section h2,
.alterations-page .alt-section .alt-hotspot,
.alterations-page .alt-section .alt-text-link,
.alterations-page .alt-section .alt-quote-person,
.alterations-page .alt-section .alt-quote-controls button,
.alterations-page .alt-section .alt-choice-group button,
.alterations-page .alt-section .alt-estimate strong{color:var(--alt-text);}
.alterations-page .alt-section h2 em{color:var(--alt-accent);}
.alterations-page .alt-section p,
.alterations-page .alt-section span,
.alterations-page .alt-section a,
.alterations-page .alt-section button,
.alterations-page .alt-section figcaption{font-size:max(14px, 1em);}
.alterations-page .alt-section .alt-index,
.alterations-page .alt-section .alt-kicker,
.alterations-page .alt-section .alt-overline{font-size:14px!important;}

/* HERO: layered editorial composition, no oval forms */
.alt-hero-v2{min-height:calc(100svh - 82px);display:block;padding:0 0 22px;overflow:hidden;background:var(--alt-bg);}
.alt-hero-v2-atmosphere{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0;}
.alt-hero-orb{position:absolute;width:380px;height:380px;border-radius:50%;filter:blur(80px);opacity:.12;background:var(--alt-accent);animation:altV5Float 9s ease-in-out infinite;}
.orb-one{right:8%;top:8%;}.orb-two{left:-150px;bottom:4%;width:300px;height:300px;animation-delay:-3s;opacity:.07;}
.alt-hero-gridline{position:absolute;height:1px;background:linear-gradient(90deg,transparent,var(--alt-gold),transparent);opacity:.45;transform-origin:left;}
.gridline-one{width:64%;right:0;top:24%;transform:rotate(-11deg);animation:altV5Line 8s ease-in-out infinite;}
.gridline-two{width:50%;left:0;bottom:18%;transform:rotate(8deg);animation:altV5Line 10s ease-in-out infinite reverse;}
.alt-hero-stitch{position:absolute;width:140px;height:1px;border-top:1px dashed var(--alt-accent);opacity:.35;transform:rotate(90deg);}
.stitch-one{right:12%;bottom:22%;}.stitch-two{left:7%;top:34%;transform:rotate(-20deg);}
.alt-hero-v2-top,.alt-hero-v2-bottom,.alt-hero-v2-stage{position:relative;z-index:2;max-width:1320px;width:calc(100% - 48px);margin-inline:auto;}
.alt-hero-v2-top{display:flex;justify-content:space-between;align-items:center;padding-top:20px;border-bottom:1px solid var(--alt-line);padding-bottom:12px;}
.alt-hero-v2-note{font-size:14px!important;font-weight:800;letter-spacing:.13em;color:var(--alt-soft);}
.alt-hero-v2-stage{min-height:calc(100svh - 175px);display:grid;grid-template-columns:minmax(330px,.72fr) minmax(560px,1.28fr);align-items:center;gap:5vw;padding:36px 0 18px;}
.alt-hero-v2-copy{position:relative;z-index:5;max-width:560px;}
.alt-hero-v2-copy h1{font-size:clamp(3.6rem,6.8vw,7.4rem);line-height:.86;letter-spacing:-.065em;font-weight:650;margin:8px 0 28px;color:var(--alt-text);}
.alt-hero-v2-copy h1 span{display:block;overflow:hidden;}
.alt-hero-v2-copy h1 span::after{content:"";display:block;height:100%;transform:translateY(105%);background:var(--alt-bg);animation:altV5TextReveal 1.1s var(--ease) .15s forwards;}
.alt-hero-v2-copy h1 .alt-word-accent{font-family:var(--font-display);font-style:italic;font-weight:500;color:var(--alt-accent);}
.alt-hero-v2-copy .alt-lead{font-size:17px!important;max-width:500px;line-height:1.7;}
.alt-hero-v2-visual{position:relative;min-height:650px;height:clamp(620px,78vh,780px);}
.alt-hero-v2-frame{position:absolute;overflow:hidden;box-shadow:0 28px 75px rgba(29,41,35,.18);border:1px solid color-mix(in srgb,var(--alt-text) 10%,transparent);}
.alt-hero-v2-frame img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease),filter .8s var(--ease);}
.alt-hero-v2-frame:hover img{transform:scale(1.06);filter:saturate(1.08);}
.frame-main{width:61%;height:78%;left:15%;top:10%;z-index:3;border-radius:12px 12px 0 12px;}
.frame-detail{width:31%;height:42%;right:0;top:3%;z-index:4;border-radius:0 0 12px 12px;}
.frame-tools{width:29%;height:34%;right:4%;bottom:7%;z-index:4;border-radius:12px 0 12px 0;}
.alt-hero-v2-frame span{position:absolute;left:14px;bottom:12px;color:#fff;font-size:14px!important;font-weight:800;letter-spacing:.12em;text-shadow:0 2px 12px rgba(0,0,0,.5);}
.alt-hero-v2-image-shine{position:absolute;inset:-20%;background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.24) 49%,transparent 56%);animation:altV5Shine 6s ease-in-out infinite;pointer-events:none;}
.alt-hero-v2-label{position:absolute;left:5%;bottom:8%;z-index:5;display:flex;align-items:baseline;gap:10px;color:var(--alt-text);}
.alt-hero-v2-label b{font-family:var(--font-display);font-size:clamp(2.5rem,4vw,4.2rem);font-weight:600;line-height:1;}
.alt-hero-v2-label span{font-size:14px!important;letter-spacing:.15em;font-weight:800;color:var(--alt-accent);}
.alt-hero-v2-bottom{display:flex;justify-content:space-between;align-items:center;font-weight:800;letter-spacing:.12em;color:var(--alt-soft);font-size:14px!important;}
.alt-hero-v2-bottom i{color:var(--alt-accent);animation:altV5Bounce 1.8s ease-in-out infinite;}

/* Make dark sections readable; fixes the previous --ink contrast bug */
html.dark .alterations-page{--alt-text:#F5F1E7;--alt-soft:rgba(245,241,231,.78);--alt-bg:#141B18;--alt-surface:#1D2923;--alt-line:rgba(245,241,231,.16);--alt-accent:#6EAA86;--alt-gold:#79B995;--alt-deep:#102019;}
html.dark .alterations-page .alt-reimagined,
html.dark .alterations-page .alt-alter-map,
html.dark .alterations-page .alt-before-after,
html.dark .alterations-page .alt-estimator{color:#F5F1E7;}
html.dark .alterations-page .alt-reimagined,
html.dark .alterations-page .alt-before-after{background:#1D2923;}
html.dark .alterations-page .alt-alter-map,
html.dark .alterations-page .alt-estimator{background:#141B18;}
html.dark .alterations-page .alt-map-info{background:linear-gradient(90deg,rgba(20,27,24,.96),transparent);}
html.dark .alterations-page .alt-choice-group button{background:transparent;color:#F5F1E7;border-color:rgba(245,241,231,.22);}
html.dark .alterations-page .alt-choice-group button:hover,html.dark .alterations-page .alt-choice-group button.is-selected{background:#6EAA86;color:#102019;border-color:#6EAA86;}
html.dark .alterations-page .alt-estimate{border-color:rgba(245,241,231,.18);}
html.dark .alterations-page .alt-hero-v2-copy h1{color:#F5F1E7;}
html.dark .alterations-page .alt-hero-v2-copy h1 span::after{background:#141B18;}

/* CTA V2: gallery-driven, dense and cinematic */
.alt-final-v2{min-height:760px;display:flex;align-items:center;overflow:hidden;background:#102019;color:#fff;}
.alt-final-v2-bg{position:absolute;inset:0;z-index:-1;overflow:hidden;}
.alt-final-v2-bg img{width:100%;height:100%;object-fit:cover;filter:brightness(.34) saturate(.72);transform:scale(1.05);animation:altV5FinalZoom 14s ease-in-out infinite alternate;}
.alt-final-v2-wash{position:absolute;inset:0;background:linear-gradient(110deg,rgba(9,22,17,.96) 0%,rgba(9,22,17,.78) 43%,rgba(9,22,17,.40) 100%);}
.alt-final-v2-line{position:absolute;height:1px;background:linear-gradient(90deg,transparent,#79B995,transparent);box-shadow:0 0 18px #79B995;opacity:.75;}
.line-a{width:70%;left:-8%;top:22%;transform:rotate(-7deg);animation:altV5Line 8s ease-in-out infinite;}.line-b{width:52%;right:-8%;bottom:22%;transform:rotate(6deg);animation:altV5Line 9s ease-in-out infinite reverse;}
.alt-final-v2-inner{padding:92px 0 28px;color:#fff;}
.alt-final-v2-kicker{display:flex;align-items:center;gap:12px;font-size:14px!important;font-weight:800;letter-spacing:.15em;color:rgba(255,255,255,.75);}
.alt-final-v2-kicker i{width:48px;height:1px;background:#79B995;}
.alt-final-v2-heading{margin-top:34px;position:relative;z-index:2;}
.alt-final-v2-small{display:block;font-size:18px!important;letter-spacing:.06em;color:rgba(255,255,255,.7);margin-bottom:4px;}
.alt-final-v2-heading h2{font-size:clamp(4rem,9vw,9.5rem)!important;line-height:.78!important;letter-spacing:-.07em;color:#fff!important;font-weight:600!important;}
.alt-final-v2-heading h2 em{color:#79B995!important;font-style:italic;font-weight:500;}
.alt-final-v2-content{display:grid;grid-template-columns:.72fr 1.28fr;gap:7vw;align-items:end;margin-top:54px;}
.alt-final-v2-copy p{font-size:17px!important;line-height:1.7;color:rgba(255,255,255,.78)!important;max-width:480px;}
.alt-final-v2 .alt-light-link{color:#fff!important;font-size:14px!important;}
.alt-final-v2-gallery{height:300px;position:relative;display:flex;align-items:flex-end;justify-content:flex-end;gap:12px;}
.final-shot{margin:0;position:relative;overflow:hidden;height:100%;width:31%;border:1px solid rgba(255,255,255,.18);box-shadow:0 24px 60px rgba(0,0,0,.28);}
.final-shot img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease),filter .6s var(--ease);}
.final-shot:hover img{transform:scale(1.08);filter:saturate(1.12);}
.shot-one{height:82%;}.shot-two{height:68%;}.shot-three{height:92%;}
.final-shot figcaption{position:absolute;left:12px;bottom:10px;color:#fff;font-size:14px!important;font-weight:800;letter-spacing:.12em;text-shadow:0 2px 12px #000;}
.alt-final-v2-footer{margin-top:52px;padding-top:16px;border-top:1px solid rgba(255,255,255,.18);display:flex;justify-content:space-between;font-size:14px!important;font-weight:800;letter-spacing:.12em;color:rgba(255,255,255,.62);}

/* More visible motion */
@keyframes altV5TextReveal{to{transform:translateY(-105%);}}
@keyframes altV5Float{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(0,-18px,0) scale(1.04)}}
@keyframes altV5Line{0%,100%{opacity:.25;transform:rotate(-11deg) translateX(0)}50%{opacity:.7;transform:rotate(-9deg) translateX(25px)}}
@keyframes altV5Shine{0%,65%{transform:translateX(-65%);opacity:0}78%{opacity:1}100%{transform:translateX(65%);opacity:0}}
@keyframes altV5Bounce{50%{transform:translateY(6px)}}
@keyframes altV5FinalZoom{to{transform:scale(1.11)}}

@media (max-width:1050px){
  .alt-hero-v2-stage{grid-template-columns:.82fr 1.18fr;gap:24px;}
  .alt-hero-v2-copy h1{font-size:clamp(3.2rem,6.4vw,5.8rem);}
  .alt-hero-v2-visual{min-height:570px;height:650px;}.frame-main{width:64%;height:74%;left:9%;}.frame-detail{width:33%;height:40%;}.frame-tools{width:31%;height:32%;}
  .alt-final-v2-content{gap:40px;}
}
@media (max-width:820px){
  .alt-hero-v2{min-height:auto;padding-bottom:28px;}
  .alt-hero-v2-stage{grid-template-columns:1fr;min-height:auto;padding:48px 0 10px;}
  .alt-hero-v2-copy{text-align:center;max-width:720px;margin-inline:auto;}.alt-hero-v2-copy .alt-lead{margin-inline:auto;}.alt-hero-v2-copy h1{font-size:clamp(3.3rem,11vw,5.6rem);}
  .alt-actions{justify-content:center;}
  .alt-hero-v2-visual{height:600px;min-height:560px;margin-top:12px;}.frame-main{width:61%;height:78%;left:15%;}.frame-detail{width:30%;height:40%;right:2%;}.frame-tools{width:29%;height:31%;right:5%;bottom:7%;}
  .alt-final-v2{min-height:900px;}.alt-final-v2-inner{padding-top:78px;}.alt-final-v2-heading h2{font-size:clamp(4rem,16vw,7rem)!important;}.alt-final-v2-content{grid-template-columns:1fr;gap:42px;}.alt-final-v2-gallery{height:280px;}.alt-final-v2-footer{margin-top:38px;gap:20px;flex-wrap:wrap;}
}
@media (max-width:560px){
  .alt-hero-v2-top,.alt-hero-v2-bottom{width:calc(100% - 28px);}.alt-hero-v2-top{align-items:flex-start;gap:12px;}.alt-hero-v2-note{font-size:13px!important;text-align:right;}.alt-hero-v2-copy h1{font-size:clamp(3rem,15vw,4.5rem);line-height:.9;}.alt-hero-v2-copy .alt-lead{font-size:15px!important;}.alt-hero-v2-visual{height:470px;min-height:470px;}.frame-main{width:67%;height:76%;left:6%;top:9%;}.frame-detail{width:34%;height:38%;right:0;top:2%;}.frame-tools{width:33%;height:30%;right:2%;bottom:6%;}.alt-hero-v2-label{left:3%;bottom:7%;}.alt-hero-v2-label b{font-size:2.3rem;}.alt-hero-v2-bottom{font-size:13px!important;gap:10px;}.alt-hero-v2-bottom span:last-child{display:none;}
  .alt-final-v2{min-height:860px;}.alt-final-v2-inner{padding-top:66px;}.alt-final-v2-kicker{font-size:13px!important;}.alt-final-v2-heading{margin-top:25px;}.alt-final-v2-small{font-size:15px!important;}.alt-final-v2-heading h2{font-size:clamp(3.7rem,18vw,5.5rem)!important;}.alt-final-v2-copy p{font-size:15px!important;}.alt-final-v2-gallery{height:235px;gap:7px;}.final-shot{width:32%;}.final-shot figcaption{font-size:12px!important;left:7px;bottom:7px;}.alt-final-v2-footer{font-size:12px!important;line-height:1.5;}
}
@media (prefers-reduced-motion:reduce){
  .alt-hero-orb,.alt-hero-gridline,.alt-hero-stitch,.alt-hero-v2-image-shine,.alt-hero-v2-bottom i,.alt-final-v2-bg img,.alt-final-v2-line{animation:none!important;}
  .alt-hero-v2-copy h1 span::after{animation:none!important;transform:translateY(-105%);}
}
/* Home Page 1 - Stats heading */
.home1-page .stats-section .stats-top h2 {
    color: #ffffff !important;
}
/* Home 1 - light mode heading fixes */
body:not(.dark-mode) .stats-top h2,
body:not(.dark-mode) .cta-inner h2 {
  color: #ffffff !important;
}
/* Home 2 — Section 9 heading visibility */
.h2-s9 .h2-s9-inner h2 {
  color: #FFF8E7 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.h2-s9 .h2-s9-inner h2 em {
  color: #FFF8E7 !important;
  opacity: 1 !important;
  visibility: visible !important;
}
/* =========================================================
   ABOUT US — SECTION 02 — BRIGHT WHITE TEXT
   ========================================================= */

.about-story .about-eyebrow,
.about-story .about-section-number,
.about-story .about-story-note > span,
.about-story .about-story-note p,
.about-story .about-story-facts span,
.about-story .about-story-title h2,
.about-story .about-story-title h2 em {
    color: #FFFFFF !important;
    opacity: 1 !important;
}

/* Numbers */
.about-story .about-story-facts strong {
    color: #FFFFFF !important;
    opacity: 1 !important;
}

/* Horizontal line */
.about-story .about-story-rule {
    background: #FFFFFF !important;
    opacity: 0.85 !important;
}

/* Make paragraph slightly stronger */
.about-story .about-story-note p {
    font-weight: 500 !important;
}

/* Keep the four process items clearly visible */
.about-story .about-story-facts > div {
    border-color: rgba(255, 255, 255, 0.45) !important;
}

/* =========================================================
   TURNAROUND PAGE — 8 sections, no left/right splits, no box
   cards. Sections butt directly against each other (padding
   only, zero margin) and alternate --bg / --surface so the
   seams read as intentional, not gappy.
   ========================================================= */
.tn-page{overflow:hidden;background:var(--bg);color:var(--text)}
.tn-page section{position:relative;margin:0;}
.tn-page h1,.tn-page h2,.tn-page h3,.tn-page p{margin-top:0}
.tn-page em{font-family:var(--font-display);font-style:italic;font-weight:600;color:var(--coral)}
.tn-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--coral)}
.tn-eyebrow::before{content:"";width:26px;height:2px;background:var(--coral)}
.tn-title{font-family:var(--font-display);font-weight:700;font-size:clamp(32px,4.4vw,58px);line-height:1.06;letter-spacing:-.02em;margin:16px 0 0;color:var(--text)}
.tn-lead{font-size:16px;font-weight:600;line-height:1.8;color:var(--text);max-width:560px}
.tn-lead-invert{color:#F5F1E7}
.tn-head{max-width:660px;margin:0 auto 50px;text-align:center}
.tn-head .tn-lead{margin-inline:auto}
.tn-btn-row{display:flex;flex-wrap:wrap;gap:16px;margin-top:32px}
.tn-text-link{display:inline-flex;align-items:center;gap:10px;margin-top:26px;font-size:15px;font-weight:800;letter-spacing:.02em;color:var(--text);border-bottom:2px solid var(--coral);padding-bottom:4px}
.tn-text-link i{color:var(--coral);transition:transform .3s var(--ease)}
.tn-text-link:hover i{transform:translateX(6px)}

/* ---------------------------------------------------------
   01 — MASTHEAD : full-bleed cover + rotating stamp + marquee
   --------------------------------------------------------- */
.tn-s1{min-height:92vh;display:flex;flex-direction:column;justify-content:center;padding:120px 0 0;background:var(--ink)}
.tn-s1-bg{position:absolute;inset:0;z-index:0}
.tn-s1-bg img{width:100%;height:100%;object-fit:cover}
.tn-s1-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(16,22,19,.55) 0%,rgba(16,22,19,.72) 55%,rgba(16,22,19,.92) 100%)}
.tn-s1-content{position:relative;z-index:2;max-width:820px;padding-bottom:90px}
.tn-s1-content .tn-eyebrow{color:#C9AD70}
.tn-s1-content .tn-eyebrow::before{background:#C9AD70}
.tn-s1-title{color:#F5F1E7;font-family:var(--font-display);font-weight:700;font-size:clamp(40px,6vw,80px);line-height:1;letter-spacing:-.02em;margin:18px 0 24px}
.tn-s1-title em{color:#C9AD70;font-style:italic}
.tn-s1-badge{position:absolute;z-index:3;top:130px;right:6%;width:118px;height:118px}
.tn-s1-badge-ring{position:absolute;inset:0;border:2px dashed rgba(245,241,231,.55);border-radius:50%;animation:tnSpin 16s linear infinite}
.tn-s1-badge-core{position:absolute;inset:8px;border-radius:50%;background:rgba(20,27,24,.7);backdrop-filter:blur(6px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#F5F1E7}
.tn-s1-badge-core strong{font-family:var(--font-display);font-size:26px;font-weight:700;line-height:1}
.tn-s1-badge-core span{font-size:13.5px;font-weight:700;letter-spacing:.04em;margin-top:4px}
@keyframes tnSpin{to{transform:rotate(360deg)}}
.tn-s1-marquee{position:relative;z-index:2;overflow:hidden;border-top:1px solid rgba(245,241,231,.22);padding:20px 0;background:rgba(16,22,19,.55)}
.tn-s1-marquee-track{display:flex;align-items:center;gap:26px;width:max-content;animation:tnMarquee 26s linear infinite}
.tn-s1-marquee-track span{font-size:15px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#F5F1E7;white-space:nowrap}
.tn-s1-marquee-track i{width:6px;height:6px;border-radius:50%;background:#C9AD70;display:inline-block}
@keyframes tnMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------------------------------------------------------
   02 — AT A GLANCE : animated scale line, no boxes
   --------------------------------------------------------- */
.tn-s2{padding:110px 0 140px;background:var(--surface)}
.tn-gauge{position:relative;max-width:980px;margin:0 auto;padding:0 10px 90px}
.tn-gauge-track{position:relative;height:3px;background:var(--line);border-radius:3px;overflow:hidden}
.tn-gauge-fill{display:block;height:100%;width:0%;background:linear-gradient(90deg,var(--coral),var(--gold));box-shadow:0 0 18px 2px color-mix(in srgb, var(--coral) 45%, transparent)}
.tn-gauge-point{position:absolute;top:-7px;display:flex;flex-direction:column;align-items:center;transform:translateX(-50%);text-align:center}
.tn-gauge-dot{display:block;width:17px;height:17px;border-radius:50%;background:var(--surface);border:3px solid var(--coral);margin-bottom:18px}
.tn-gauge-point strong{display:block;font-family:var(--font-display);font-size:20px;font-weight:700;color:var(--text)}
.tn-gauge-point span{display:block;margin-top:4px;font-size:14px;font-weight:700;color:var(--text);letter-spacing:.02em;white-space:nowrap}

/* ---------------------------------------------------------
  03 — GARMENT INDEX : asymmetric editorial mosaic
  --------------------------------------------------------- */
.tn-s3{padding:112px 0 118px;background:var(--ink);color:#F5F1E7;overflow:hidden}
.tn-s3 .tn-head{display:grid;grid-template-columns:minmax(260px,.82fr) minmax(280px,1.18fr);column-gap:clamp(40px,8vw,130px);align-items:end;max-width:none;margin:0 0 58px;text-align:left}
.tn-s3 .tn-eyebrow{grid-column:1;grid-row:1;color:#C9AD70}
.tn-s3 .tn-title{grid-column:1;grid-row:2;color:#F5F1E7;margin-top:16px}
.tn-s3 .tn-lead{grid-column:2;grid-row:2;color:rgba(245,241,231,.72);max-width:430px;margin:0 0 3px}
.tn-s3 .tn-eyebrow::before{background:#C9AD70}
.tn-s3-gallery{overflow:visible;padding:0}
.tn-s3-track{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:230px;gap:0;width:min(100% - 48px,var(--container));margin-inline:auto}
.tn-s3-card{position:relative;min-width:0;overflow:hidden;background:#F1F3EA;border:1px solid var(--ink);border-radius:0;color:var(--ink);transition:transform .45s var(--ease),box-shadow .45s var(--ease);will-change:transform}
.tn-s3-card:first-child{grid-column:span 2;grid-row:span 2}
.tn-s3-card:last-child{grid-column:span 2}
.tn-s3-card:hover{transform:translateY(-6px);box-shadow:0 18px 34px rgba(0,0,0,.22);z-index:2}
.tn-s3-card-img{height:100%;overflow:hidden;background:#283a31}
.tn-s3-card-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 42%,rgba(16,22,19,.82))}
.tn-s3-card-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s var(--ease),filter .6s var(--ease);pointer-events:none;filter:saturate(.82)}
.tn-s3-card:hover .tn-s3-card-img img{transform:scale(1.07);filter:saturate(1.05)}
.tn-s3-card-body{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:20px 18px 16px;color:#fff}
.tn-s3-card-name{font-family:var(--font-display);font-weight:700;font-size:clamp(18px,1.8vw,25px);line-height:1.08}
.tn-s3-card-time{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#D9B876;white-space:nowrap}
.tn-s3-card-time em{font-style:normal;color:inherit;margin-left:3px}
.tn-s3-card:not(:first-child) .tn-s3-card-body{padding:14px 14px 12px;display:block}
.tn-s3-card:not(:first-child) .tn-s3-card-time{display:block;margin-top:4px}

/* ---------------------------------------------------------
   04 — EXPRESS LANE : asymmetric split, Ken-Burns photo + dial
   --------------------------------------------------------- */
.tn-s4{padding:120px 0 130px;background:var(--surface)}
.tn-s4-split{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:center}
.tn-s4-photo{position:relative;border-radius:var(--radius-l);overflow:hidden;aspect-ratio:4/5;box-shadow:0 30px 64px rgba(0,0,0,.2)}
.tn-s4-photo img{width:100%;height:100%;object-fit:cover;animation:tnKenBurns 14s ease-in-out infinite alternate}
@keyframes tnKenBurns{from{transform:scale(1) translate(0,0)}to{transform:scale(1.16) translate(-2%,-2%)}}
.tn-s4-badge{position:absolute;left:22px;bottom:22px;width:84px;height:84px;border-radius:50%;background:var(--coral);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 16px 32px rgba(0,0,0,.3)}
.tn-s4-badge strong{font-family:var(--font-display);font-size:24px;font-weight:700;line-height:1}
.tn-s4-badge small{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;margin-top:2px}
.tn-s4-copy{text-align:left}
.tn-s4-dial{position:relative;width:180px;height:180px;margin:30px 0}
.tn-s4-dial svg{width:100%;height:100%;transform:rotate(-90deg)}
.tn-s4-dial-track{fill:none;stroke:var(--line);stroke-width:10}
.tn-s4-dial-fill{fill:none;stroke:var(--coral);stroke-width:10;stroke-linecap:round;stroke-dasharray:603;stroke-dashoffset:603}
.tn-s4-dial-num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.tn-s4-dial-num strong{font-family:var(--font-display);font-size:46px;font-weight:700;color:var(--text);line-height:1}
.tn-s4-dial-num span{margin-top:4px;font-size:14px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--coral)}
.tn-s4-list{display:flex;flex-wrap:wrap;gap:14px 30px;margin-top:22px;padding:0}
.tn-s4-list li{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:700;color:var(--text)}
.tn-s4-list i{color:var(--coral);font-size:14px}

/* ---------------------------------------------------------
   05 — WHAT CAN CHANGE IT : dual scrolling marquee (no boxes)
   --------------------------------------------------------- */
.tn-s5{padding:110px 0 120px;background:var(--bg)}
.tn-s5-marquee{overflow:hidden;padding:14px 0}
.tn-s5-marquee-track{display:flex;align-items:center;gap:46px;width:max-content}
.tn-s5-marquee-track span{font-family:var(--font-display);font-weight:700;font-size:clamp(24px,3.6vw,38px);color:var(--text);white-space:nowrap}
.tn-s5-marquee-track span:nth-child(even){color:var(--coral)}
.tn-s5-marquee-a .tn-s5-marquee-track{animation:tnMarquee 22s linear infinite}
.tn-s5-marquee-b .tn-s5-marquee-track{animation:tnMarqueeRev 24s linear infinite}
@keyframes tnMarqueeRev{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.tn-s5-note{margin:46px auto 0;text-align:center}

/* ---------------------------------------------------------
   06 — WEEK BY WEEK : vertical zig-zag process line
   --------------------------------------------------------- */
.tn-s6{padding:110px 0 130px;background:var(--surface)}
.tn-s6-track{position:relative;max-width:760px;margin:60px auto 0}
.tn-s6-line{position:absolute;left:50%;top:6px;bottom:6px;width:2px;transform:translateX(-50%);background:var(--line)}
.tn-s6-line span{display:block;width:100%;height:0;background:var(--coral);box-shadow:0 0 16px 2px color-mix(in srgb, var(--coral) 55%, transparent)}
.tn-s6-step{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:34px;padding:26px 0}
.tn-s6-step:nth-child(even) .tn-s6-text{grid-column:1;text-align:right}
.tn-s6-step:nth-child(odd) .tn-s6-text{grid-column:3;text-align:left}
.tn-s6-node{position:relative;grid-column:2;width:68px;height:68px;border-radius:50%;overflow:visible;background:var(--surface);border:3px solid var(--coral);z-index:1;box-shadow:0 14px 30px rgba(0,0,0,.18)}
.tn-s6-node img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.tn-s6-badge{position:absolute;bottom:-6px;right:-6px;width:26px;height:26px;border-radius:50%;background:var(--coral);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:13px;font-weight:700;box-shadow:0 6px 14px rgba(0,0,0,.25)}
.tn-s6-text h3{font-size:20px;font-weight:700;color:var(--text);margin-bottom:8px}
.tn-s6-text p{font-size:14.5px;font-weight:600;color:var(--text);line-height:1.7;max-width:280px}
.tn-s6-step:nth-child(even) .tn-s6-text p{margin-left:auto}

/* ---------------------------------------------------------
   07 — TRUST : giant pull-quote (no box, no split)
   --------------------------------------------------------- */
.tn-s7{padding:130px 0;background:var(--bg);text-align:center;overflow:hidden}
.tn-s7-orbit{position:absolute;left:50%;top:50%;width:640px;height:640px;transform:translate(-50%,-50%);border:1px dashed color-mix(in srgb, var(--coral) 35%, transparent);border-radius:50%;animation:tnSpin 60s linear infinite}
.tn-s7-inner{position:relative;z-index:1;max-width:760px;margin:0 auto}
.tn-s7-mark{font-size:34px;color:var(--coral);margin-bottom:20px;display:inline-block}
.tn-s7-quote{font-family:var(--font-display);font-style:italic;font-weight:600;font-size:clamp(22px,3vw,34px);line-height:1.5;color:var(--text)}
.tn-s7-author{margin-top:30px;display:flex;flex-direction:column;gap:4px}
.tn-s7-author strong{font-size:16px;font-weight:800;color:var(--text)}
.tn-s7-author span{font-size:14px;font-weight:700;color:var(--coral);letter-spacing:.04em;text-transform:uppercase}

/* ---------------------------------------------------------
   08 — CLOSING CTA : fixed dark band, always readable
   --------------------------------------------------------- */
.tn-s8{padding:150px 0;text-align:center;overflow:hidden;background:#101613}
.tn-s8-bg{position:absolute;inset:0;z-index:0}
.tn-s8-bg img{width:100%;height:100%;object-fit:cover;opacity:.28}
.tn-s8::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(16,22,19,.55),rgba(16,22,19,.88))}
.tn-s8-ring{position:absolute;left:50%;top:50%;width:520px;height:520px;transform:translate(-50%,-50%);border:2px dashed rgba(245,241,231,.18);border-radius:50%;animation:tnSpin 46s linear infinite reverse;z-index:1}
.tn-s8-inner{position:relative;z-index:2;max-width:680px;margin:0 auto}
.tn-s8 .tn-title{color:#F5F1E7}
.tn-s8 .tn-title em{color:#C9AD70}
.tn-s8 .tn-btn-row{justify-content:center}
.tn-s8 .btn-outline{border-color:rgba(245,241,231,.6);color:#F5F1E7}
.tn-s8 .btn-outline:hover{background:#F5F1E7;color:#101613}
.tn-s8 .btn-primary{background:#F5F1E7;color:#101613}
.tn-s8 .btn-primary:hover{background:var(--coral);color:#F5F1E7}

/* ---------------------------------------------------------
   TURNAROUND — reveal states (paired with JS motion classes)
   --------------------------------------------------------- */
.tn-motion-ready .tn-fade,
.tn-motion-ready .tn-s3-card,
.tn-motion-ready .tn-s6-step,
.tn-motion-ready .tn-gauge-point{opacity:0}
.tn-page-loaded .tn-fade,
.tn-page-loaded .tn-s3-card,
.tn-page-loaded .tn-s6-step,
.tn-page-loaded .tn-gauge-point{opacity:1}

/* ---------------------------------------------------------
   TURNAROUND — responsive
   --------------------------------------------------------- */
@media(max-width:1024px){
  .tn-s1-badge{top:110px;right:5%;width:100px;height:100px}
  .tn-s3 .tn-head{column-gap:44px}
  .tn-s3-track{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:220px}
  .tn-s3-card:first-child{grid-column:span 2;grid-row:span 1}
  .tn-s3-card:last-child{grid-column:span 2}
  .tn-s4-split{grid-template-columns:1fr;gap:40px}
  .tn-s4-photo{max-width:420px;margin:0 auto}
  .tn-s4-copy{text-align:center}
  .tn-s4-dial{margin-inline:auto}
  .tn-s4-list{justify-content:center}
  .tn-s6-step{grid-template-columns:52px 1fr;gap:20px;text-align:left!important}
  .tn-s6-line{left:26px}
  .tn-s6-node{grid-column:1;width:52px;height:52px}
  .tn-s6-badge{width:22px;height:22px;font-size:11px}
  .tn-s6-step:nth-child(even) .tn-s6-text,
  .tn-s6-step:nth-child(odd) .tn-s6-text{grid-column:2;text-align:left!important}
  .tn-s6-step:nth-child(even) .tn-s6-text p{margin-left:0}
}
@media(max-width:767px){
  .tn-s1{min-height:100vh;padding-top:100px}
  .tn-s1-badge{display:none}
  .tn-s2{padding:80px 0 190px}
  .tn-gauge-point span{font-size:14px}
  .tn-s3{padding:88px 0 92px}
  .tn-s3 .tn-head{display:block;margin-bottom:38px}
  .tn-s3 .tn-lead{margin-top:22px}
  .tn-s3-track{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:190px;gap:0;width:calc(100% - 32px)}
  .tn-s3-card:first-child{grid-column:span 2;grid-row:span 1}
  .tn-s3-card-body{padding:14px 12px 11px;display:block}
  .tn-s3-card-name{font-size:18px}
  .tn-s3-card-time{display:block;margin-top:4px}
  .tn-s4{padding:90px 0 100px}
  .tn-s5{padding:80px 0 90px}
  .tn-s6{padding:80px 0 100px}
  .tn-s6-node{width:44px;height:44px}
  .tn-s6-badge{width:20px;height:20px;font-size:10px;bottom:-4px;right:-4px}
  .tn-s7{padding:90px 0}
  .tn-s8{padding:100px 0}
}
/* =========================================================
   LOOM & LORE — CONTACT PAGE
   COMPLETE CONTACT DESIGN
========================================================= */

.contact-page {
    --contact-green: #183A31;
    --contact-green-dark: #102C26;
    --contact-green-soft: #315A4E;
    --contact-ivory: #FFF8E7;
    --contact-white: #FFFFFF;
    --contact-orange: #C65A32;
    --contact-mustard: #D6A63A;
    --contact-text: #183A31;
    --contact-muted: #35564C;

    background: var(--contact-ivory);
    color: var(--contact-text);
    font-family: "DM Sans", sans-serif;
    overflow-x: hidden;
}

.contact-page *,
.contact-page *::before,
.contact-page *::after {
    box-sizing: border-box;
}

.contact-page p,
.contact-page li,
.contact-page label,
.contact-page input,
.contact-page select,
.contact-page textarea,
.contact-page button,
.contact-page a {
    font-family: "DM Sans", sans-serif;
}

.contact-page p {
    font-size: 15px;
    line-height: 1.75;
}

.contact-main {
    overflow: hidden;
}

/* =========================================================
   HERO
========================================================= */

.contact-hero {
    min-height: 820px;
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 10% 20%,
            rgba(214,166,58,.13),
            transparent 28%
        ),
        radial-gradient(
            circle at 85% 75%,
            rgba(198,90,50,.13),
            transparent 30%
        ),
        var(--contact-ivory);
}

.contact-hero-inner {
    width: min(1240px, 92%);
    margin: auto;
    display: grid;
    grid-template-columns: .95fr 1.05fr;
    align-items: center;
    gap: 80px;
    padding: 150px 0 100px;
    position: relative;
    z-index: 3;
}

.contact-kicker {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--contact-orange);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .16em;
}

.contact-kicker span {
    font-size: 14px;
    font-weight: 800;
}

.contact-kicker i {
    width: 34px;
    height: 1px;
    background: currentColor;
    display: block;
}

.contact-hero h1 {
    margin: 24px 0;
    font-family: "Playfair Display", serif;
    font-size: clamp(52px, 6vw, 86px);
    line-height: .98;
    letter-spacing: -.045em;
    color: var(--contact-green);
}

.contact-hero h1 em {
    display: block;
    color: var(--contact-orange);
    font-style: italic;
}

.contact-hero-copy > p {
    max-width: 610px;
    color: var(--contact-muted);
    font-size: 17px;
    font-weight: 600;
}

.contact-hero-buttons,
.final-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 32px;
}

.contact-btn {
    min-height: 54px;
    padding: 0 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border-radius: 100px;
    text-decoration: none;
    font-size: 15px;
    font-weight: 800;
    transition:
        transform .35s ease,
        box-shadow .35s ease,
        background .35s ease,
        color .35s ease;
}

.contact-btn:hover {
    transform: translateY(-5px);
}

.contact-btn-primary {
    background: var(--contact-orange);
    color: #fff;
    box-shadow: 0 16px 35px rgba(198,90,50,.22);
}

.contact-btn-primary:hover {
    background: var(--contact-green);
    color: #fff;
}

.contact-btn-outline {
    border: 1px solid rgba(24,58,49,.35);
    color: var(--contact-green);
    background: transparent;
}

.contact-btn-outline:hover {
    background: var(--contact-green);
    color: #fff;
}

.contact-hero-visual {
    position: relative;
}

.hero-image-frame {
    height: 590px;
    border-radius: 280px 280px 25px 25px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 30px 70px rgba(24,58,49,.18);
    transform: rotate(1deg);
}

.hero-image-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s cubic-bezier(.2,.7,.2,1);
}

.contact-hero-visual:hover .hero-image-frame img {
    transform: scale(1.08);
}

.hero-image-shine {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            115deg,
            transparent 25%,
            rgba(255,255,255,.22) 48%,
            transparent 68%
        );
    transform: translateX(-100%);
    animation: contactShine 6s ease-in-out infinite;
}

@keyframes contactShine {
    0%, 65% {
        transform: translateX(-100%);
    }

    85%, 100% {
        transform: translateX(100%);
    }
}

.hero-floating-card {
    position: absolute;
    left: -45px;
    bottom: 55px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    background: #fff;
    border: 1px solid rgba(24,58,49,.12);
    box-shadow: 0 20px 50px rgba(24,58,49,.16);
    border-radius: 18px;
    animation: floatingCard 4s ease-in-out infinite;
}

.hero-floating-card > i {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    background: var(--contact-mustard);
    color: var(--contact-green);
    border-radius: 50%;
}

.hero-floating-card strong,
.hero-floating-card span {
    display: block;
}

.hero-floating-card strong {
    color: var(--contact-green);
    font-size: 14px;
}

.hero-floating-card span {
    color: var(--contact-muted);
    font-size: 14px;
    margin-top: 3px;
}

@keyframes floatingCard {
    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-12px);
    }
}

.hero-number {
    position: absolute;
    right: -30px;
    top: 50px;
    font-family: "Playfair Display", serif;
    font-size: 110px;
    line-height: 1;
    color: rgba(24,58,49,.08);
    font-weight: 700;
}

.contact-hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(1px);
    pointer-events: none;
}

.orb-one {
    width: 190px;
    height: 190px;
    background: rgba(214,166,58,.12);
    top: 100px;
    left: -80px;
    animation: orbFloat 8s ease-in-out infinite;
}

.orb-two {
    width: 240px;
    height: 240px;
    background: rgba(198,90,50,.08);
    right: -110px;
    bottom: 50px;
    animation: orbFloat 10s ease-in-out infinite reverse;
}

@keyframes orbFloat {
    0%,100% {
        transform: translate(0,0);
    }

    50% {
        transform: translate(30px,-25px);
    }
}

.contact-thread {
    position: absolute;
    width: 400px;
    height: 400px;
    border: 1px dashed rgba(24,58,49,.15);
    border-radius: 50%;
    pointer-events: none;
}

.thread-one {
    left: -220px;
    bottom: -150px;
}

.thread-two {
    right: -200px;
    top: 80px;
}

/* =========================================================
   DETAILS
========================================================= */

.contact-details-section {
    padding: 120px 0;
    background: #fff;
}

.contact-section-wrap {
    width: min(1240px, 92%);
    margin: auto;
}

.contact-section-heading {
    max-width: 760px;
    margin-bottom: 60px;
}

.contact-section-heading h2,
.appointment-intro h2,
.prepare-copy h2,
.studio-copy h2,
.contact-final h2 {
    font-family: "Playfair Display", serif;
    font-size: clamp(42px, 5vw, 70px);
    line-height: 1.02;
    letter-spacing: -.04em;
    color: var(--contact-green);
    margin: 20px 0;
}

.contact-section-heading h2 em,
.appointment-intro h2 em,
.prepare-copy h2 em,
.studio-copy h2 em,
.contact-final h2 em {
    color: var(--contact-orange);
    font-style: italic;
}

.contact-section-heading > p {
    max-width: 680px;
    color: var(--contact-muted);
    font-size: 16px;
    font-weight: 500;
}

.contact-details-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 16px;
}

.contact-detail-card {
    min-height: 320px;
    padding: 30px 26px;
    position: relative;
    background: var(--contact-ivory);
    border: 1px solid rgba(24,58,49,.10);
    overflow: hidden;
    transition:
        transform .4s ease,
        box-shadow .4s ease;
}

.contact-detail-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 50px rgba(24,58,49,.13);
}

.contact-detail-icon {
    width: 55px;
    height: 55px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--contact-green);
    color: #fff;
    font-size: 19px;
    transition: transform .5s ease;
}

.contact-detail-card:hover .contact-detail-icon {
    transform: rotate(12deg) scale(1.1);
}

.contact-detail-number {
    position: absolute;
    right: 20px;
    top: 20px;
    font-family: "Playfair Display", serif;
    font-size: 44px;
    color: rgba(24,58,49,.10);
}

.contact-detail-card h3 {
    margin: 40px 0 10px;
    font-family: "Playfair Display", serif;
    font-size: 27px;
    color: var(--contact-green);
}

.contact-detail-card p {
    color: var(--contact-muted);
    font-size: 15px;
    font-weight: 500;
}

.contact-detail-card a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    color: var(--contact-orange);
    text-decoration: none;
    font-size: 14px;
    font-weight: 800;
}

/* =========================================================
   APPOINTMENT
========================================================= */

.appointment-section {
    position: relative;
    padding: 140px 0;
    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(214,166,58,.14),
            transparent 25%
        ),
        var(--contact-green);
    color: #fff;
    overflow: hidden;
}

.appointment-wrap {
    width: min(1240px,92%);
    margin: auto;
    display: grid;
    grid-template-columns: .75fr 1.25fr;
    gap: 70px;
    position: relative;
    z-index: 2;
}

.appointment-section .contact-kicker {
    color: var(--contact-mustard);
}

.appointment-intro h2 {
    color: #fff;
}

.appointment-intro h2 em {
    color: var(--contact-mustard);
}

.appointment-intro > p {
    color: #EAF3EF;
    font-size: 16px;
    font-weight: 500;
}

.appointment-steps {
    margin-top: 50px;
    display: grid;
    gap: 20px;
}

.appointment-step {
    display: flex;
    align-items: center;
    gap: 16px;
}

.appointment-step strong {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 50%;
    color: var(--contact-mustard);
    font-size: 14px;
}

.appointment-step span {
    color: #fff;
    font-size: 15px;
    font-weight: 600;
}

.appointment-form-card {
    padding: 42px;
    background: #fff;
    color: var(--contact-green);
    border-radius: 24px;
    box-shadow: 0 30px 80px rgba(0,0,0,.25);
}

.form-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 28px;
    margin-bottom: 30px;
    border-bottom: 1px solid rgba(24,58,49,.12);
}

.form-card-top > div:first-child > span {
    color: var(--contact-orange);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .14em;
}

.form-card-top h3 {
    margin: 8px 0 0;
    font-family: "Playfair Display", serif;
    font-size: 34px;
    color: var(--contact-green);
}

.form-ruler {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    background: var(--contact-mustard);
    border-radius: 50%;
    color: var(--contact-green);
    animation: rulerPulse 3s ease-in-out infinite;
}

@keyframes rulerPulse {
    0%,100% {
        transform: rotate(-8deg);
    }

    50% {
        transform: rotate(8deg) scale(1.08);
    }
}

.form-row {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 18px;
}

.form-row.three {
    grid-template-columns: repeat(3,1fr);
}

.form-field {
    margin-bottom: 20px;
}

.form-field label {
    display: block;
    margin-bottom: 8px;
    color: var(--contact-green);
    font-size: 14px;
    font-weight: 800;
}

.form-field label span {
    color: var(--contact-orange);
}

.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    min-height: 52px;
    padding: 13px 15px;
    border: 1px solid rgba(24,58,49,.20);
    border-radius: 10px;
    outline: none;
    background: #FBFCF8;
    color: var(--contact-green);
    font-size: 15px;
    font-weight: 500;
    transition:
        border-color .3s ease,
        box-shadow .3s ease,
        transform .3s ease;
}

.form-field textarea {
    min-height: 130px;
    resize: vertical;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    border-color: var(--contact-orange);
    box-shadow: 0 0 0 4px rgba(198,90,50,.10);
    transform: translateY(-2px);
}

.form-field input::placeholder,
.form-field textarea::placeholder {
    color: #587066;
    opacity: 1;
}

.form-section-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 8px 0 20px;
    padding-top: 15px;
    border-top: 1px solid rgba(24,58,49,.10);
    color: var(--contact-green);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .12em;
}

.form-section-label i {
    color: var(--contact-orange);
}

.form-error {
    display: block;
    min-height: 17px;
    margin-top: 5px;
    color: #C43725;
    font-size: 14px;
    font-weight: 700;
}

.form-field.invalid input,
.form-field.invalid select,
.form-field.invalid textarea {
    border-color: #C43725;
    animation: inputShake .35s ease;
}

@keyframes inputShake {
    0%,100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

.form-check {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 5px 0;
    cursor: pointer;
    color: var(--contact-green);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
}

.form-check input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.check-box {
    width: 21px;
    height: 21px;
    flex: 0 0 21px;
    border: 2px solid rgba(24,58,49,.25);
    border-radius: 5px;
    position: relative;
    transition: .3s ease;
}

.form-check input:checked + .check-box {
    background: var(--contact-orange);
    border-color: var(--contact-orange);
}

.form-check input:checked + .check-box::after {
    content: "\f00c";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #fff;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 11px;
}

.appointment-submit {
    width: 100%;
    min-height: 58px;
    margin-top: 22px;
    border: 0;
    border-radius: 100px;
    background: var(--contact-orange);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 800;
    transition:
        transform .3s ease,
        background .3s ease;
}

.appointment-submit:hover {
    transform: translateY(-4px);
    background: var(--contact-green);
}

.submit-loader {
    width: 17px;
    height: 17px;
    border: 2px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    border-radius: 50%;
    display: none;
    animation: spin .7s linear infinite;
}

.appointment-submit.loading .submit-loader {
    display: block;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.form-success {
    display: none;
    align-items: center;
    gap: 13px;
    margin-top: 18px;
    padding: 16px;
    background: #EAF5EF;
    color: var(--contact-green);
    border-radius: 12px;
    animation: successPop .5s ease;
}

.form-success.show {
    display: flex;
}

.form-success > i {
    color: #2B8159;
    font-size: 24px;
}

.form-success strong,
.form-success span {
    display: block;
}

.form-success strong {
    font-size: 14px;
}

.form-success span {
    margin-top: 3px;
    font-size: 14px;
}

@keyframes successPop {
    0% {
        opacity: 0;
        transform: scale(.9);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.appointment-decoration {
    position: absolute;
    left: -100px;
    top: 100px;
    display: flex;
    gap: 30px;
    transform: rotate(-90deg);
    opacity: .08;
    pointer-events: none;
}

.appointment-decoration span {
    font-size: 80px;
    font-weight: 800;
    letter-spacing: .08em;
}

/* =========================================================
   PREPARE
========================================================= */

.prepare-section {
    padding: 140px 0;
    background: var(--contact-ivory);
}

.prepare-wrap {
    width: min(1240px,92%);
    margin: auto;
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 80px;
    align-items: center;
}

.prepare-image {
    position: relative;
    height: 680px;
    overflow: hidden;
    border-radius: 18px;
}

.prepare-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s ease;
}

.prepare-image:hover img {
    transform: scale(1.07);
}

.prepare-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(16,44,38,.65),
        transparent 50%
    );
}

.prepare-image-label {
    position: absolute;
    left: 28px;
    bottom: 28px;
    z-index: 2;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .12em;
}

.prepare-image-label span {
    display: block;
    margin-bottom: 8px;
    color: var(--contact-mustard);
    font-family: "Playfair Display", serif;
    font-size: 32px;
}

.prepare-copy > p {
    color: var(--contact-muted);
    font-size: 16px;
    font-weight: 500;
}

.prepare-list {
    margin-top: 40px;
    border-top: 1px solid rgba(24,58,49,.15);
}

.prepare-item {
    display: grid;
    grid-template-columns: 45px 1fr 35px;
    align-items: center;
    gap: 15px;
    padding: 22px 0;
    border-bottom: 1px solid rgba(24,58,49,.15);
    transition: padding .35s ease;
}

.prepare-item:hover {
    padding-left: 12px;
    padding-right: 12px;
}

.prepare-item > span {
    font-family: "Playfair Display", serif;
    color: var(--contact-orange);
    font-size: 22px;
    font-weight: 700;
}

.prepare-item h3 {
    margin: 0 0 5px;
    color: var(--contact-green);
    font-size: 17px;
}

.prepare-item p {
    margin: 0;
    color: var(--contact-muted);
    font-size: 14px;
    line-height: 1.6;
}

.prepare-item > i {
    color: var(--contact-mustard);
    font-size: 18px;
}

/* =========================================================
   STUDIO
========================================================= */

.studio-section {
    min-height: 700px;
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.studio-background,
.studio-overlay {
    position: absolute;
    inset: 0;
}

.studio-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.05);
}

.studio-overlay {
    background:
        linear-gradient(
            90deg,
            rgba(16,44,38,.95),
            rgba(16,44,38,.65),
            rgba(16,44,38,.35)
        );
}

.studio-wrap {
    width: min(1240px,92%);
    margin: auto;
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr .55fr;
    gap: 70px;
    align-items: center;
}

.contact-kicker.light {
    color: var(--contact-mustard);
}

.studio-copy h2 {
    color: #fff;
}

.studio-copy h2 em {
    color: var(--contact-mustard);
}

.studio-copy > p {
    max-width: 650px;
    color: #F0F6F3;
    font-size: 16px;
    font-weight: 500;
}

.studio-button {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 25px;
    padding: 15px 23px;
    border-radius: 100px;
    background: var(--contact-mustard);
    color: var(--contact-green);
    text-decoration: none;
    font-size: 15px;
    font-weight: 800;
    transition: .35s ease;
}

.studio-button:hover {
    background: #fff;
    transform: translateY(-4px);
}

.studio-floating-notes {
    padding: 25px;
    background: rgba(255,255,255,.12);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 20px;
}

.studio-note {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 19px 0;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
}

.studio-note + .studio-note {
    border-top: 1px solid rgba(255,255,255,.15);
}

.studio-note i {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--contact-mustard);
    color: var(--contact-green);
}

/* =========================================================
   FINAL CTA
========================================================= */

.contact-final {
    min-height: 600px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 120px 20px;
    background:
        radial-gradient(
            circle at center,
            rgba(214,166,58,.13),
            transparent 35%
        ),
        #fff;
    overflow: hidden;
}

.final-wrap {
    width: min(850px,92%);
    position: relative;
    z-index: 2;
}

.final-wrap .contact-kicker {
    justify-content: center;
}

.contact-final h2 {
    font-size: clamp(45px,6vw,76px);
}

.contact-final p {
    max-width: 700px;
    margin: auto;
    color: var(--contact-muted);
    font-size: 16px;
    font-weight: 500;
}

.final-actions {
    justify-content: center;
}

.final-orbit {
    position: absolute;
    border: 1px dashed rgba(24,58,49,.14);
    border-radius: 50%;
    animation: orbitSpin 18s linear infinite;
}

.orbit-a {
    width: 500px;
    height: 500px;
}

.orbit-b {
    width: 760px;
    height: 760px;
    animation-duration: 28s;
    animation-direction: reverse;
}

@keyframes orbitSpin {
    to {
        transform: rotate(360deg);
    }
}

/* =========================================================
   REVEAL ANIMATIONS
========================================================= */

.reveal,
.reveal-pop,
.reveal-card {
    opacity: 0;
    transform: translateY(45px);
    transition:
        opacity .8s ease,
        transform .8s cubic-bezier(.2,.7,.2,1);
}

.reveal-pop {
    transform: translateY(40px) scale(.92);
}

.reveal-card {
    transform: translateY(35px) scale(.97);
}

.reveal.visible,
.reveal-pop.visible,
.reveal-card.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

    .contact-hero-inner {
        gap: 45px;
    }

    .contact-details-grid {
        grid-template-columns: repeat(2,1fr);
    }

    .appointment-wrap,
    .prepare-wrap,
    .studio-wrap {
        gap: 45px;
    }

    .hero-floating-card {
        left: -15px;
    }

}

@media (max-width: 850px) {

    .contact-hero {
        min-height: auto;
    }

    .contact-hero-inner,
    .appointment-wrap,
    .prepare-wrap,
    .studio-wrap {
        grid-template-columns: 1fr;
    }

    .contact-hero-inner {
        padding: 125px 0 80px;
    }

    .contact-hero-copy {
        text-align: center;
    }

    .contact-kicker {
        justify-content: center;
    }

    .contact-hero-copy > p {
        margin-left: auto;
        margin-right: auto;
    }

    .contact-hero-buttons {
        justify-content: center;
    }

    .hero-image-frame {
        height: 500px;
    }

    .hero-floating-card {
        left: 15px;
        bottom: 25px;
    }

    .hero-number {
        right: 15px;
    }

    .appointment-intro {
        text-align: center;
    }

    .appointment-steps {
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
        text-align: left;
    }

    .prepare-image {
        height: 500px;
    }

    .studio-section {
        min-height: 750px;
    }

}

@media (max-width: 600px) {

    .contact-hero-inner,
    .contact-section-wrap,
    .appointment-wrap,
    .prepare-wrap,
    .studio-wrap {
        width: min(92%, 500px);
    }

    .contact-hero h1 {
        font-size: 48px;
    }

    .contact-hero-buttons,
    .final-actions {
        flex-direction: column;
    }

    .contact-btn {
        width: 100%;
    }

    .hero-image-frame {
        height: 430px;
        border-radius: 190px 190px 18px 18px;
    }

    .hero-floating-card {
        position: relative;
        left: 0;
        bottom: auto;
        margin-top: -45px;
        z-index: 4;
        width: calc(100% - 20px);
        margin-left: 10px;
    }

    .contact-details-section,
    .appointment-section,
    .prepare-section {
        padding: 90px 0;
    }

    .contact-details-grid {
        grid-template-columns: 1fr;
    }

    .contact-detail-card {
        min-height: 270px;
    }

    .appointment-form-card {
        padding: 25px 18px;
        border-radius: 18px;
    }

    .form-row,
    .form-row.three {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .form-card-top h3 {
        font-size: 29px;
    }

    .prepare-image {
        height: 420px;
    }

    .prepare-copy {
        text-align: left;
    }

    .studio-wrap {
        padding: 90px 0;
    }

    .studio-overlay {
        background: rgba(16,44,38,.84);
    }

    .contact-final {
        min-height: 560px;
        padding: 90px 15px;
    }

    .orbit-a {
        width: 350px;
        height: 350px;
    }

    .orbit-b {
        width: 500px;
        height: 500px;
    }

}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }

}
/* ==========================================================
   ABOUT PAGE STYLES (merged in — previously assets/css/about-redesign.css)
   ========================================================== */
/* =========================================================
   LOOM & LORE — ABOUT US PAGE REDESIGN
   7 Distinct Animated Sections | Non-Box Shapes | Zero Gap Layout
   ========================================================= */

:root {
  --ab-gold-glow: rgba(181, 154, 91, 0.28);
  --ab-coral-glow: rgba(85, 122, 104, 0.25);
  --ab-card-border: rgba(43, 23, 16, 0.12);
  --ab-glass-bg: rgba(250, 251, 247, 0.94);
  --ab-glass-border: rgba(255, 255, 255, 0.7);
  --ab-shadow-subtle: 0 6px 20px rgba(29, 41, 35, 0.05);
  --ab-shadow-elevated: 0 14px 32px rgba(29, 41, 35, 0.1);
  --ab-shadow-3d: 0 24px 50px rgba(20, 27, 24, 0.15);
}

html.dark {
  --ab-card-border: rgba(255, 255, 255, 0.12);
  --ab-glass-bg: rgba(26, 36, 31, 0.92);
  --ab-glass-border: rgba(255, 255, 255, 0.12);
  --ab-shadow-subtle: 0 6px 20px rgba(0, 0, 0, 0.35);
  --ab-shadow-elevated: 0 14px 32px rgba(0, 0, 0, 0.5);
  --ab-shadow-3d: 0 24px 50px rgba(0, 0, 0, 0.65);
}

.about-redesign-page {
  overflow-x: hidden;
  background-color: var(--bg);
  color: var(--text);
  position: relative;
  font-family: var(--font-body);
}

.about-redesign-page section {
  position: relative;
  overflow: hidden;
}

/* =========================================================
   GLOBAL ENHANCED FONT WEIGHTS & TYPOGRAPHY
   ========================================================= */
.about-redesign-page h1,
.about-redesign-page h2,
.about-redesign-page h3,
.about-redesign-page h4 {
  font-family: var(--font-display);
  font-weight: 800 !important;
  color: #0b120f;
  line-height: 1.14;
}

html.dark .about-redesign-page h1,
html.dark .about-redesign-page h2,
html.dark .about-redesign-page h3,
html.dark .about-redesign-page h4 {
  color: var(--text);
}

.about-redesign-page p {
  font-weight: 600;
  color: #1c2e25;
  line-height: 1.6;
}

html.dark .about-redesign-page p {
  color: var(--text-soft);
}

.about-redesign-page strong,
.about-redesign-page b {
  font-weight: 800;
  color: #050a08;
}

html.dark .about-redesign-page strong,
html.dark .about-redesign-page b {
  color: var(--text);
}

.about-redesign-page em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  color: #244e3a;
}

html.dark .about-redesign-page em {
  color: var(--gold);
}

.ab-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: rgba(85, 122, 104, 0.14);
  color: var(--coral);
  border: 1.5px solid rgba(85, 122, 104, 0.3);
  backdrop-filter: blur(8px);
}

html.dark .ab-badge-pill {
  background: rgba(181, 154, 91, 0.18);
  color: var(--gold);
  border-color: rgba(181, 154, 91, 0.35);
}

.ab-beacon-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #27ae60;
  box-shadow: 0 0 0 0 rgba(39, 174, 96, 0.7);
  animation: abPulseBeacon 2s infinite;
  flex-shrink: 0;
}

@keyframes abPulseBeacon {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(39, 174, 96, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 9px rgba(39, 174, 96, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(39, 174, 96, 0); }
}

.ab-section-head {
  max-width: 720px;
  margin: 0 auto 40px;
  text-align: center;
}

.ab-section-title {
  font-size: clamp(30px, 3.8vw, 46px);
  margin: 14px 0 12px;
  letter-spacing: -0.01em;
}

.ab-section-desc {
  font-size: clamp(15px, 1.3vw, 17px);
  max-width: 580px;
  margin: 0 auto;
}

/* Primary & Ghost Action Buttons */
.ab-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 26px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff !important;
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: all 0.3s var(--ease);
  box-shadow: 0 6px 18px rgba(20, 27, 24, 0.2);
}

.ab-btn-primary:hover {
  background: var(--coral);
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(85, 122, 104, 0.3);
}

html.dark .ab-btn-primary {
  background: var(--gold);
  color: #141b18 !important;
}

html.dark .ab-btn-primary:hover {
  background: #fff;
  color: #141b18 !important;
}

.ab-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  border-radius: 999px;
  background: transparent;
  color: var(--text) !important;
  font-size: 14.5px;
  font-weight: 800;
  border: 1.5px solid var(--ct-card-border);
  text-decoration: none;
  transition: all 0.3s var(--ease);
}

.ab-btn-ghost:hover {
  border-color: var(--coral);
  color: var(--coral) !important;
  background: rgba(85, 122, 104, 0.08);
  transform: translateY(-3px);
}

html.dark .ab-btn-ghost:hover {
  border-color: var(--gold);
  color: var(--gold) !important;
  background: rgba(181, 154, 91, 0.1);
}

/* =========================================================
   SECTION 1: HERO & GRAND ATELIER TRIPTYCH STAGE
   ========================================================= */
.ab-hero-s1 {
  padding: 50px 0 75px;
  background: radial-gradient(circle at 50% 20%, rgba(181, 154, 91, 0.12) 0%, transparent 60%),
              radial-gradient(circle at 10% 80%, rgba(46, 92, 70, 0.08) 0%, transparent 50%),
              radial-gradient(circle at 90% 80%, rgba(181, 154, 91, 0.08) 0%, transparent 50%);
}

.ab-hero-top-center {
  max-width: 820px;
  margin: 0 auto 45px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.ab-hero-top-center .ab-hero-title {
  font-size: clamp(38px, 5.2vw, 66px);
  margin: 0;
  line-height: 1.1;
}

.ab-hero-top-center .ab-hero-lead {
  font-size: clamp(16px, 1.4vw, 18.5px);
  color: #17261f;
  max-width: 680px;
  line-height: 1.65;
  margin: 0;
}

html.dark .ab-hero-top-center .ab-hero-lead {
  color: var(--text-soft);
}

.ab-hero-actions {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: center;
  margin-top: 6px;
  flex-wrap: wrap;
}

/* 3-Panel Asymmetrical Couture Triptych Stage */
.ab-hero-triptych-stage {
  display: grid;
  grid-template-columns: 1fr 1.45fr 1fr;
  gap: 22px;
  align-items: center;
  perspective: 1200px;
  margin-bottom: 36px;
}

.ab-triptych-panel {
  position: relative;
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}

.ab-triptych-media {
  position: relative;
  overflow: hidden;
  box-shadow: var(--ab-shadow-3d);
  background: var(--ink);
}

.ab-triptych-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}

.ab-triptych-panel:hover .ab-triptych-media img {
  transform: scale(1.08);
}

/* Left Panel */
.ab-panel-left {
  transform: rotate(-2deg);
}

.ab-panel-left .ab-triptych-media {
  height: 380px;
  border-radius: 120px 24px 24px 120px;
  border: 2px solid rgba(181, 154, 91, 0.4);
}

.ab-panel-left:hover {
  transform: rotate(0deg) translateY(-8px);
}

/* Center Panel (Grand Cathedral Arch) */
.ab-panel-center {
  z-index: 3;
}

.ab-panel-center .ab-triptych-media {
  height: 480px;
  border-radius: 200px 200px 28px 28px;
  border: 3px solid var(--gold);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
}

.ab-panel-center:hover {
  transform: translateY(-8px) scale(1.02);
}

.ab-center-tape-border {
  position: absolute;
  inset: 0;
  border: 1px dashed rgba(255, 255, 255, 0.25);
  border-radius: 196px 196px 24px 24px;
  pointer-events: none;
}

/* Right Panel */
.ab-panel-right {
  transform: rotate(2deg);
}

.ab-panel-right .ab-triptych-media {
  height: 380px;
  border-radius: 24px 120px 120px 24px;
  border: 2px solid rgba(181, 154, 91, 0.4);
}

.ab-panel-right:hover {
  transform: rotate(0deg) translateY(-8px);
}

/* Floating Triptych Tags */
.ab-triptych-tag {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--ab-glass-bg);
  border: 1.5px solid var(--ab-glass-border);
  backdrop-filter: blur(12px);
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  box-shadow: var(--ab-shadow-elevated);
}

.ab-triptych-tag i {
  color: var(--coral);
}

html.dark .ab-triptych-tag i {
  color: var(--gold);
}

.ab-floating-center-proof {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 20px;
  border-radius: 999px;
  background: rgba(20, 27, 24, 0.9);
  border: 1.5px solid var(--gold);
  color: #fff;
  font-size: 12.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
}

/* Rotating Golden Seal */
.ab-floating-seal {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 110px;
  height: 110px;
  z-index: 5;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.25));
}

.ab-seal-svg {
  width: 100%;
  height: 100%;
  animation: abRotateSeal 26s linear infinite;
  transform-origin: center;
}

@keyframes abRotateSeal {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.ab-seal-center-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  font-size: 24px;
}

/* Zero-Gap 3-Column Atelier Assurance Rail */
.ab-hero-assurance-rail {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  background: var(--surface);
  border: 1.5px solid var(--ab-card-border);
  border-radius: 28px;
  padding: 22px 28px;
  box-shadow: var(--ab-shadow-subtle);
}

.ab-assurance-item {
  display: flex;
  align-items: center;
  gap: 14px;
}

.ab-assurance-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(46, 92, 70, 0.12);
  color: var(--coral);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

html.dark .ab-assurance-icon {
  background: rgba(181, 154, 91, 0.18);
  color: var(--gold);
}

.ab-assurance-item strong {
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: #0b120f;
  margin-bottom: 2px;
}

html.dark .ab-assurance-item strong {
  color: #fff;
}

.ab-assurance-item span {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: #24362d;
  line-height: 1.4;
}

html.dark .ab-assurance-item span {
  color: var(--text-soft);
}

/* =========================================================
   SECTION 2: 4 FOUNDING PILLARS (ORGANIC ASYMMETRIC SHAPES)
   ========================================================= */
.ab-pillars-s2 {
  padding: 85px 0;
  background: var(--surface);
}

.ab-pillars-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

/* Asymmetric Couture Cards (Card 1 & 3: Top-Left + Bottom-Right Curve; Card 2 & 4: Top-Right + Bottom-Left Curve) */
.ab-pillar-card {
  background: var(--bg);
  border: 1.5px solid var(--ab-card-border);
  padding: 28px 22px 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--ab-shadow-subtle);
  position: relative;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
}

.ab-pillar-card.shape-a {
  border-radius: 64px 18px 64px 18px;
}

.ab-pillar-card.shape-b {
  border-radius: 18px 64px 18px 64px;
}

.ab-pillar-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--ab-shadow-3d);
  border-color: var(--coral);
}

html.dark .ab-pillar-card:hover {
  border-color: var(--gold);
}

/* Top Eyelet & Number Header */
.ab-pillar-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.ab-pillar-eyelet {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--ab-card-border);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.08);
}

.ab-pillar-eyelet-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--coral);
}

html.dark .ab-pillar-eyelet-dot {
  background: var(--gold);
}

.ab-pillar-num {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  color: var(--coral);
}

html.dark .ab-pillar-num {
  color: var(--gold);
}

/* Circular Lens Portal */
.ab-pillar-lens {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 0 auto 16px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid rgba(181, 154, 91, 0.35);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.1);
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease);
}

.ab-pillar-lens img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

.ab-pillar-card:hover .ab-pillar-lens {
  border-color: var(--gold);
  transform: scale(1.05);
}

.ab-pillar-card:hover .ab-pillar-lens img {
  transform: scale(1.12);
}

.ab-pillar-body {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-grow: 1;
}

.ab-pillar-body h3 {
  font-size: 19px;
  font-weight: 800;
  color: var(--text);
  margin: 0;
}

.ab-pillar-body p {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-soft);
  line-height: 1.55;
  margin: 0;
}

/* Bottom Zero-Gap Spec Bar */
.ab-pillar-spec-bar {
  margin-top: 18px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(85, 122, 104, 0.1);
  border: 1px solid rgba(85, 122, 104, 0.22);
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--coral);
  text-align: center;
  transition: all 0.3s var(--ease);
}

html.dark .ab-pillar-spec-bar {
  background: rgba(181, 154, 91, 0.14);
  border-color: rgba(181, 154, 91, 0.3);
  color: var(--gold);
}

.ab-pillar-card:hover .ab-pillar-spec-bar {
  background: var(--coral);
  color: #fff;
  border-color: var(--coral);
}

html.dark .ab-pillar-card:hover .ab-pillar-spec-bar {
  background: var(--gold);
  color: #141b18;
  border-color: var(--gold);
}

/* =========================================================
   SECTION 3: MASTER ARTISANS (INTERACTIVE SPOTLIGHT SUITE)
   ========================================================= */
.ab-artisans-s3 {
  padding: 85px 0;
  background: var(--bg);
}

.ab-artisan-spotlight-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 36px;
  align-items: center;
}

/* Left Column: Spotlight Stage */
.ab-artisan-spotlight-stage {
  background: var(--surface);
  border: 1.5px solid var(--ab-card-border);
  border-radius: 160px 160px 32px 32px;
  padding: 24px;
  box-shadow: var(--ab-shadow-3d);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ab-spotlight-arch-portal {
  position: relative;
  width: 100%;
  height: 380px;
  border-radius: 140px 140px 24px 24px;
  overflow: hidden;
  border: 3px solid var(--gold);
  background: var(--ink);
}

.ab-spotlight-arch-portal img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% 18%;
  transform: scale(1.08);
  transition: transform 0.6s var(--ease), opacity 0.35s var(--ease);
}

.ab-spotlight-seal {
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(20, 27, 24, 0.88);
  border: 1.5px solid var(--gold);
  color: var(--gold);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.05em;
  backdrop-filter: blur(8px);
}

.ab-spotlight-meta-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 6px 8px;
}

.ab-spotlight-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ab-spotlight-role-tag {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--coral);
  display: block;
}

html.dark .ab-spotlight-role-tag {
  color: var(--gold);
}

.ab-spotlight-header h3 {
  font-size: 26px;
  font-weight: 800;
  margin: 2px 0 0;
  color: #0b120f;
}

html.dark .ab-spotlight-header h3 {
  color: #fff;
}

.ab-spotlight-badge {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(46, 92, 70, 0.12);
  color: var(--coral);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

html.dark .ab-spotlight-badge {
  background: rgba(181, 154, 91, 0.18);
  color: var(--gold);
}

.ab-spotlight-quote {
  font-family: var(--font-display);
  font-size: 16.5px;
  font-weight: 700;
  font-style: italic;
  color: #17261f;
  line-height: 1.5;
  margin: 0;
  transition: opacity 0.3s var(--ease);
}

html.dark .ab-spotlight-quote {
  color: rgba(255, 255, 255, 0.9);
}

.ab-spotlight-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

/* Right Column: Interactive Artisan Picker Cards */
.ab-artisan-picker-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ab-artisan-pick-card {
  width: 100%;
  background: var(--surface);
  border: 1.5px solid var(--ab-card-border);
  border-radius: 24px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 18px;
  text-align: left;
  cursor: pointer;
  transition: all 0.35s var(--ease);
  box-shadow: var(--ab-shadow-subtle);
}

.ab-artisan-pick-card:hover {
  transform: translateX(8px);
  border-color: var(--coral);
  box-shadow: var(--ab-shadow-elevated);
}

html.dark .ab-artisan-pick-card:hover {
  border-color: var(--gold);
}

.ab-artisan-pick-card.is-active {
  border-color: var(--coral);
  background: rgba(46, 92, 70, 0.08);
  box-shadow: 0 8px 24px rgba(46, 92, 70, 0.15);
  transform: translateX(10px);
}

html.dark .ab-artisan-pick-card.is-active {
  border-color: var(--gold);
  background: rgba(181, 154, 91, 0.12);
  box-shadow: 0 8px 24px rgba(181, 154, 91, 0.2);
}

.ab-pick-lens {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  border: 2.5px solid var(--ab-card-border);
  flex-shrink: 0;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}

.ab-artisan-pick-card.is-active .ab-pick-lens {
  border-color: var(--gold);
  transform: scale(1.08);
}

.ab-pick-lens img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 56% 18%;
}

.ab-pick-info {
  flex-grow: 1;
}

.ab-pick-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ab-pick-top h4 {
  font-size: 17.5px;
  font-weight: 800;
  margin: 0;
  color: #0b120f;
}

html.dark .ab-pick-top h4 {
  color: #fff;
}

.ab-pick-exp {
  font-size: 12px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(46, 92, 70, 0.12);
  color: var(--coral);
}

html.dark .ab-pick-exp {
  background: rgba(181, 154, 91, 0.18);
  color: var(--gold);
}

.ab-pick-role {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--coral);
  display: block;
  margin-top: 2px;
}

html.dark .ab-pick-role {
  color: var(--gold);
}

.ab-pick-info p {
  font-size: 12.5px;
  font-weight: 600;
  color: #23352b;
  margin: 4px 0 0;
  line-height: 1.45;
}

html.dark .ab-pick-info p {
  color: var(--text-soft);
}

.ab-pick-arrow {
  color: var(--coral);
  font-size: 14px;
  transition: transform 0.3s var(--ease);
}

html.dark .ab-pick-arrow {
  color: var(--gold);
}

.ab-artisan-pick-card.is-active .ab-pick-arrow {
  transform: translateX(4px);
}

.ab-skill-tag {
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(46, 92, 70, 0.08);
  border: 1px solid rgba(46, 92, 70, 0.18);
  font-size: 11px;
  font-weight: 700;
  color: #17261f;
}

html.dark .ab-skill-tag {
  background: rgba(181, 154, 91, 0.12);
  border-color: rgba(181, 154, 91, 0.25);
  color: rgba(255, 255, 255, 0.85);
}

/* =========================================================
   SECTION 4: 6-STAGE BESPOKE ALCHEMY (INTERACTIVE JOURNEY)
   ========================================================= */
.ab-process-s4 {
  padding: 85px 0;
  background: var(--surface);
}

.ab-process-tape-track {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  position: relative;
  margin-top: 20px;
}

/* Measuring Tape Graphic Line in Background */
.ab-process-tape-track::before {
  content: '';
  position: absolute;
  top: 36px;
  left: 30px;
  right: 30px;
  height: 4px;
  background: repeating-linear-gradient(90deg, var(--gold) 0, var(--gold) 8px, transparent 8px, transparent 14px);
  z-index: 0;
  opacity: 0.5;
}

.ab-stage-step-card {
  background: var(--bg);
  border: 1.5px solid var(--ab-card-border);
  border-radius: 20px 20px 50px 20px;
  padding: 22px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: var(--ab-shadow-subtle);
  position: relative;
  z-index: 1;
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.ab-stage-step-card:hover {
  transform: translateY(-8px);
  border-color: var(--coral);
  box-shadow: var(--ab-shadow-3d);
}

html.dark .ab-stage-step-card:hover {
  border-color: var(--gold);
}

.ab-stage-node {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--gold);
  border: 3px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 14px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s var(--ease), background 0.3s var(--ease);
}

html.dark .ab-stage-node {
  background: var(--gold);
  color: #141b18;
  border-color: #141b18;
}

.ab-stage-step-card:hover .ab-stage-node {
  transform: scale(1.15) rotate(6deg);
  background: var(--coral);
  color: #fff;
}

html.dark .ab-stage-step-card:hover .ab-stage-node {
  background: #fff;
  color: #141b18;
}

.ab-stage-step-card h3 {
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 6px;
}

.ab-stage-step-card p {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-soft);
  line-height: 1.5;
  margin: 0;
}

.ab-stage-spec-tag {
  margin-top: 12px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(85, 122, 104, 0.1);
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--coral);
}

html.dark .ab-stage-spec-tag {
  background: rgba(181, 154, 91, 0.16);
  color: var(--gold);
}

/* =========================================================
   SECTION 5: ATELIER MILESTONES & PARALLAX TAPESTRY
   ========================================================= */
.ab-milestones-s5 {
  padding: 90px 0;
  background: var(--ink);
  color: var(--cream);
  position: relative;
}

.ab-milestones-s5 em {
  color: #fff;
}

.ab-milestones-bg {
  position: absolute;
  inset: 0;
  opacity: 0.28;
}

.ab-milestones-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ab-milestones-inner {
  position: relative;
  z-index: 2;
}

.ab-odometer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-bottom: 44px;
}

.ab-odometer-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(14px);
  border-radius: 28px 64px 28px 64px;
  padding: 32px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), background 0.4s var(--ease);
}

.ab-odometer-card:hover {
  transform: translateY(-8px);
  border-color: var(--gold);
  background: rgba(255, 255, 255, 0.08);
}

.ab-odo-icon {
  font-size: 26px;
  color: var(--gold);
  margin-bottom: 12px;
}

.ab-odo-number {
  font-family: var(--font-display);
  font-size: clamp(38px, 4vw, 54px);
  font-weight: 800 !important;
  color: #fff;
  line-height: 1;
  margin-bottom: 8px;
}

.ab-odo-number span {
  color: var(--gold);
}

.ab-odometer-card h3 {
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 6px;
}

.ab-odometer-card p {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.45;
  margin: 0;
}

/* Parallax Manifesto Quote Banner */
.ab-quote-banner {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
  padding: 30px 36px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 24px;
  border: 1px solid rgba(181, 154, 91, 0.35);
}

.ab-quote-banner blockquote {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 700;
  font-style: italic;
  color: #fff;
  line-height: 1.45;
  margin: 0 0 14px;
}

.ab-quote-banner cite {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  font-style: normal;
}

/* =========================================================
   SECTION 6: CLIENT STORIES & HEIRLOOM TESTIMONIALS
   ========================================================= */
.ab-testimonials-s6 {
  padding: 85px 0;
  background: var(--bg);
}

.ab-testimonial-stage {
  max-width: 960px;
  margin: 0 auto;
  background: var(--surface);
  border: 1.5px solid var(--ab-card-border);
  border-radius: 140px 32px 140px 32px;
  padding: 48px;
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 40px;
  align-items: center;
  box-shadow: var(--ab-shadow-3d);
  position: relative;
}

.ab-testimonial-media-portal {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 320px;
  margin: 0 auto;
}

.ab-testimonial-lens {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid var(--gold);
  box-shadow: var(--ab-shadow-3d);
}

.ab-testimonial-lens img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease), opacity 0.4s var(--ease);
}

.ab-testimonial-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ab-quote-mark {
  font-family: var(--font-display);
  font-size: 58px;
  line-height: 1;
  color: var(--coral);
  margin-bottom: -10px;
}

html.dark .ab-quote-mark {
  color: var(--gold);
}

.ab-testi-text {
  font-family: var(--font-display);
  font-size: clamp(19px, 2.2vw, 24px);
  font-weight: 700;
  color: var(--text);
  line-height: 1.45;
  margin: 0;
}

.ab-testi-client-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1.5px dashed var(--ab-card-border);
  padding-top: 16px;
  margin-top: 6px;
}

.ab-client-name {
  font-size: 17px;
  font-weight: 800;
  color: var(--text);
}

.ab-client-detail {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-soft);
  display: block;
}

.ab-testi-nav-btns {
  display: flex;
  gap: 10px;
}

.ab-testi-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--bg);
  border: 1.5px solid var(--ab-card-border);
  color: var(--text);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s var(--ease);
}

.ab-testi-btn:hover {
  background: var(--coral);
  color: #fff;
  border-color: var(--coral);
}

html.dark .ab-testi-btn:hover {
  background: var(--gold);
  color: #141b18;
  border-color: var(--gold);
}

/* =========================================================
   SECTION 7: LIVE ATELIER VISIT & INVITATION BANNER
   ========================================================= */
.ab-invite-s7 {
  padding: 0 0 85px;
  background: var(--bg);
}

.ab-invite-banner {
  background: var(--surface);
  border: 1.5px solid var(--ab-card-border);
  border-radius: 60px 24px 60px 24px;
  padding: 40px 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  box-shadow: var(--ab-shadow-elevated);
}

.ab-invite-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ab-invite-info h3 {
  font-size: 26px;
  font-weight: 800;
  margin: 0;
}

.ab-invite-info p {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-soft);
  margin: 0;
}

.ab-invite-actions {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* =========================================================
   RESPONSIVE DESIGN BREAKPOINTS
   ========================================================= */
@media (max-width: 1024px) {
  .ab-hero-triptych-stage {
    grid-template-columns: 1fr;
    gap: 20px;
    max-width: 520px;
    margin: 0 auto 30px;
  }
  .ab-panel-left, .ab-panel-right {
    display: none;
  }
  .ab-panel-center .ab-triptych-media {
    height: 420px;
  }
  .ab-hero-assurance-rail {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 20px;
  }
  .ab-pillars-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .ab-artisan-spotlight-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .ab-process-tape-track {
    grid-template-columns: repeat(3, 1fr);
  }
  .ab-process-tape-track::before {
    display: none;
  }
  .ab-odometer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .ab-testimonial-stage {
    grid-template-columns: 1fr;
    text-align: center;
    border-radius: 60px 24px 60px 24px;
    padding: 36px 24px;
  }
  .ab-testi-client-meta {
    flex-direction: column;
    gap: 14px;
  }
  .ab-invite-banner {
    flex-direction: column;
    text-align: center;
    padding: 32px 24px;
  }
  .ab-invite-actions {
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .ab-hero-s1 {
    padding: 30px 0 50px;
  }
  .ab-floating-seal,
  .ab-floating-center-proof {
    display: none;
  }
  .ab-panel-center .ab-triptych-media {
    height: 360px;
  }
  .ab-pillars-grid {
    grid-template-columns: 1fr;
  }
  .ab-process-tape-track {
    grid-template-columns: 1fr;
  }
  .ab-odometer-grid {
    grid-template-columns: 1fr;
  }
  .ab-spotlight-arch-portal {
    height: 280px;
  }
  .ab-artisan-pick-card {
    padding: 14px 16px;
    gap: 14px;
  }
  .ab-pick-lens {
    width: 60px;
    height: 60px;
  }
}

/* ==========================================================
   CONTACT PAGE STYLES (merged in — previously assets/css/contact-redesign.css)
   ========================================================== */
/* =========================================================
   LOOM & LORE — CONTACT PAGE REDESIGN
   7 High-Impact Animated Sections | Bespoke Atelier Consultation
   ========================================================= */

:root {
  --ct-gold-glow: rgba(181, 154, 91, 0.28);
  --ct-coral-glow: rgba(85, 122, 104, 0.25);
  --ct-card-border: rgba(43, 23, 16, 0.12);
  --ct-glass-bg: rgba(250, 251, 247, 0.92);
  --ct-glass-border: rgba(255, 255, 255, 0.7);
  --ct-shadow-subtle: 0 6px 20px rgba(29, 41, 35, 0.05);
  --ct-shadow-elevated: 0 14px 32px rgba(29, 41, 35, 0.1);
  --ct-shadow-3d: 0 24px 50px rgba(20, 27, 24, 0.15);
}

html.dark {
  --ct-card-border: rgba(255, 255, 255, 0.12);
  --ct-glass-bg: rgba(26, 36, 31, 0.9);
  --ct-glass-border: rgba(255, 255, 255, 0.12);
  --ct-shadow-subtle: 0 6px 20px rgba(0, 0, 0, 0.35);
  --ct-shadow-elevated: 0 14px 32px rgba(0, 0, 0, 0.5);
  --ct-shadow-3d: 0 24px 50px rgba(0, 0, 0, 0.65);
}

.contact-redesign-page {
  overflow-x: hidden;
  background-color: var(--bg);
  color: var(--text);
  position: relative;
  font-family: var(--font-body);
}

.contact-redesign-page section {
  position: relative;
  overflow: hidden;
}

/* =========================================================
   GLOBAL ENHANCED FONT WEIGHTS & TYPOGRAPHY
   ========================================================= */
.contact-redesign-page h1,
.contact-redesign-page h2,
.contact-redesign-page h3,
.contact-redesign-page h4 {
  font-family: var(--font-display);
  font-weight: 800 !important;
  color: #0b120f;
  line-height: 1.12;
}

html.dark .contact-redesign-page h1,
html.dark .contact-redesign-page h2,
html.dark .contact-redesign-page h3,
html.dark .contact-redesign-page h4 {
  color: var(--text);
}

.contact-redesign-page p {
  font-weight: 600;
  color: #1c2e25;
  line-height: 1.6;
}

html.dark .contact-redesign-page p {
  color: var(--text-soft);
}

.contact-redesign-page strong,
.contact-redesign-page b {
  font-weight: 800;
  color: #050a08;
}

html.dark .contact-redesign-page strong,
html.dark .contact-redesign-page b {
  color: var(--text);
}

.contact-redesign-page em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  color: #244e3a;
}

html.dark .contact-redesign-page em {
  color: var(--gold);
}

.ct-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: rgba(85, 122, 104, 0.14);
  color: var(--coral);
  border: 1.5px solid rgba(85, 122, 104, 0.3);
  backdrop-filter: blur(8px);
}

html.dark .ct-badge-pill {
  background: rgba(181, 154, 91, 0.18);
  color: var(--gold);
  border-color: rgba(181, 154, 91, 0.35);
}

.ct-beacon-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #27ae60;
  box-shadow: 0 0 0 0 rgba(39, 174, 96, 0.7);
  animation: ctPulseBeacon 2s infinite;
  flex-shrink: 0;
}

@keyframes ctPulseBeacon {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(39, 174, 96, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 9px rgba(39, 174, 96, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(39, 174, 96, 0); }
}

.ct-section-head {
  max-width: 720px;
  margin: 0 auto 36px;
  text-align: center;
}

.ct-section-title {
  font-size: clamp(30px, 3.8vw, 46px);
  margin: 12px 0 12px;
}

.ct-section-desc {
  font-size: clamp(15px, 1.15vw, 17px);
  font-weight: 600;
  color: var(--text-soft);
}

/* =========================================================
   SECTION 1: HERO — KINETIC CONSULTATION CHAMBER
   ========================================================= */
.ct-hero-s1 {
  min-height: auto;
  padding: 48px 0 0;
  background: radial-gradient(circle at 85% 20%, rgba(85, 122, 104, 0.12) 0%, transparent 60%),
              radial-gradient(circle at 10% 80%, rgba(181, 154, 91, 0.1) 0%, transparent 50%),
              var(--bg);
}

.ct-hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 40px;
  align-items: center;
  width: 100%;
}

.ct-hero-content {
  position: relative;
  z-index: 2;
}

.ct-hero-title {
  font-size: clamp(34px, 4.2vw, 58px);
  margin: 16px 0 16px;
  letter-spacing: -0.02em;
}

.ct-hero-lead {
  font-size: clamp(15px, 1.15vw, 17.5px);
  font-weight: 600;
  color: var(--text-soft);
  line-height: 1.65;
  max-width: 560px;
  margin-bottom: 24px;
}

.ct-hero-sla-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
}

.ct-sla-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px;
  background: var(--surface);
  border: 1.5px solid var(--ct-card-border);
  border-radius: var(--radius-m);
  font-size: 13.5px;
  font-weight: 800;
  color: var(--text);
  box-shadow: var(--ct-shadow-subtle);
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.ct-sla-chip:hover {
  transform: translateY(-3px);
  border-color: var(--coral);
  box-shadow: var(--ct-shadow-elevated);
}

.ct-sla-chip i {
  color: var(--coral);
  font-size: 14px;
}

html.dark .ct-sla-chip i {
  color: var(--gold);
}

.ct-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.ct-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 30px;
  border-radius: var(--radius-m);
  background: var(--ink);
  color: var(--cream);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow: 0 8px 20px rgba(29, 41, 35, 0.25);
  transition: transform 0.35s var(--ease), background-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.ct-btn-primary:hover {
  background: var(--coral);
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(85, 122, 104, 0.35);
}

html.dark .ct-btn-primary {
  background: var(--gold);
  color: #141b18;
}

html.dark .ct-btn-primary:hover {
  background: #fff;
  color: #141b18;
}

.ct-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: var(--radius-m);
  background: transparent;
  border: 1.5px solid var(--line);
  color: var(--text);
  font-size: 15px;
  font-weight: 800;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease), transform 0.3s var(--ease);
}

.ct-btn-ghost:hover {
  border-color: var(--coral);
  background: rgba(85, 122, 104, 0.08);
  transform: translateY(-3px);
}

/* Hero Right: 3D Stage */
.ct-hero-stage {
  position: relative;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}

.ct-stage-main-card {
  position: relative;
  border-radius: var(--radius-l);
  overflow: hidden;
  box-shadow: var(--ct-shadow-3d);
  border: 2px solid var(--ct-glass-border);
  height: 400px;
  width: 100%;
  background: var(--surface);
}

.ct-stage-main-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s var(--ease);
}

.ct-stage-main-card:hover img {
  transform: scale(1.05);
}

.ct-stage-gradient-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(29, 41, 35, 0.05) 0%, rgba(29, 41, 35, 0.8) 100%);
}

.ct-stage-caption {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  color: #fff;
  z-index: 2;
}

.ct-stage-caption strong {
  display: block;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 800;
  margin-bottom: 2px;
  color: #fff;
}

.ct-stage-caption span {
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
}

.ct-floating-seal {
  position: absolute;
  top: -16px;
  right: -16px;
  width: 95px;
  height: 95px;
  z-index: 3;
}

.ct-seal-svg {
  width: 100%;
  height: 100%;
  animation: ctRotateClockwise 20s linear infinite;
}

@keyframes ctRotateClockwise {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.ct-seal-center-icon {
  position: absolute;
  inset: 18px;
  border-radius: 50%;
  background: var(--gold);
  color: #1a241f;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  box-shadow: 0 6px 18px rgba(181, 154, 91, 0.4);
}

.ct-floating-proof {
  position: absolute;
  bottom: -14px;
  left: -14px;
  background: var(--surface);
  border: 1.5px solid var(--ct-card-border);
  border-radius: var(--radius-m);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: var(--ct-shadow-elevated);
  z-index: 3;
  backdrop-filter: blur(12px);
}

.ct-proof-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(85, 122, 104, 0.15);
  color: var(--coral);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

html.dark .ct-proof-icon {
  background: rgba(181, 154, 91, 0.2);
  color: var(--gold);
}

.ct-proof-text strong {
  display: block;
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
}

.ct-proof-text span {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-soft);
}

.ct-hero-marquee-bar {
  margin-top: 40px;
  padding: 14px 0;
  background: var(--surface);
  border-top: 1px solid var(--ct-card-border);
  border-bottom: 1px solid var(--ct-card-border);
  overflow: hidden;
  white-space: nowrap;
}

.ct-marquee-track {
  display: inline-flex;
  align-items: center;
  gap: 32px;
  animation: ctMarqueeScroll 28s linear infinite;
}

.ct-marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text);
}

.ct-marquee-item i.ct-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--coral);
  display: inline-block;
}

html.dark .ct-marquee-item i.ct-dot {
  background: var(--gold);
}

@keyframes ctMarqueeScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* =========================================================
   SECTION 2: 4-CHANNEL CONCIERGE BENTO GRID
   ========================================================= */
.ct-concierge-s2 {
  padding: 70px 0;
  background: var(--surface);
}

.ct-concierge-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.ct-concierge-card {
  position: relative;
  background: var(--bg);
  border-radius: var(--radius-l);
  border: 1.5px solid var(--ct-card-border);
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  box-shadow: var(--ct-shadow-subtle);
  transform-style: preserve-3d;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}

.ct-concierge-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--ct-shadow-elevated);
  border-color: var(--coral);
}

html.dark .ct-concierge-card:hover {
  border-color: var(--gold);
}

.ct-card-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ct-card-icon {
  width: 46px;
  height: 46px;
  border-radius: var(--radius-m);
  background: rgba(85, 122, 104, 0.12);
  color: var(--coral);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

html.dark .ct-card-icon {
  background: rgba(181, 154, 91, 0.15);
  color: var(--gold);
}

.ct-card-tag {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
  background: var(--surface);
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--ct-card-border);
}

.ct-card-tag.live {
  color: #27ae60;
  border-color: rgba(39, 174, 96, 0.3);
  background: rgba(39, 174, 96, 0.1);
}

.ct-concierge-info h3 {
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 4px;
}

.ct-concierge-info p {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-soft);
  line-height: 1.5;
}

.ct-card-action-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--coral);
  transition: gap 0.25s var(--ease), color 0.25s var(--ease);
}

html.dark .ct-card-action-link {
  color: var(--gold);
}

.ct-card-action-link:hover {
  gap: 12px;
}

/* =========================================================
   SECTION 3: INTERACTIVE BESPOKE APPOINTMENT SUITE
   ========================================================= */
.ct-booking-s3 {
  padding: 75px 0;
  background: var(--bg);
}

.ct-booking-card {
  max-width: 1040px;
  margin: 0 auto;
  background: var(--surface);
  border: 1.5px solid var(--ct-glass-border);
  border-radius: var(--radius-l);
  box-shadow: var(--ct-shadow-3d);
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  overflow: hidden;
}

.ct-booking-form-pane {
  padding: 36px;
}

.ct-form-group {
  margin-bottom: 20px;
}

.ct-form-group-label {
  display: block;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 10px;
}

/* Service Selector Chips */
.ct-service-chips-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 9px;
}

.ct-service-radio {
  position: relative;
}

.ct-service-radio input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.ct-service-radio label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 11px 8px;
  background: var(--bg);
  border: 1.5px solid var(--ct-card-border);
  border-radius: var(--radius-m);
  font-size: 12.5px;
  font-weight: 800;
  color: var(--text);
  cursor: pointer;
  text-align: center;
  transition: all 0.25s var(--ease);
}

.ct-service-radio label i {
  font-size: 16px;
  margin-bottom: 5px;
  color: var(--coral);
}

html.dark .ct-service-radio label i {
  color: var(--gold);
}

.ct-service-radio input:checked + label {
  border-color: var(--coral);
  background: rgba(85, 122, 104, 0.12);
  color: var(--coral);
  box-shadow: 0 4px 14px rgba(85, 122, 104, 0.2);
}

html.dark .ct-service-radio input:checked + label {
  border-color: var(--gold);
  background: rgba(181, 154, 91, 0.18);
  color: var(--gold);
}

/* Time Slots Grid */
.ct-slots-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.ct-slot-btn {
  padding: 10px;
  border-radius: var(--radius-s);
  background: var(--bg);
  border: 1.5px solid var(--ct-card-border);
  font-size: 12.5px;
  font-weight: 800;
  color: var(--text);
  cursor: pointer;
  text-align: center;
  transition: all 0.25s var(--ease);
}

.ct-slot-btn:hover {
  border-color: var(--coral);
}

.ct-slot-btn.active {
  background: var(--coral);
  color: #fff;
  border-color: var(--coral);
}

html.dark .ct-slot-btn.active {
  background: var(--gold);
  color: #141b18;
  border-color: var(--gold);
}

.ct-inputs-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

.ct-input-wrap {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.ct-input-wrap label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text);
}

.ct-input-wrap input,
.ct-input-wrap select,
.ct-input-wrap textarea {
  padding: 11px 14px;
  border-radius: var(--radius-m);
  background: var(--bg);
  border: 1.5px solid var(--ct-card-border);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.ct-input-wrap input:focus,
.ct-input-wrap select:focus,
.ct-input-wrap textarea:focus {
  outline: none;
  border-color: var(--coral);
  box-shadow: 0 0 0 4px rgba(85, 122, 104, 0.15);
}

html.dark .ct-input-wrap input:focus,
html.dark .ct-input-wrap select:focus,
html.dark .ct-input-wrap textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(181, 154, 91, 0.2);
}

/* Booking Summary Side */
.ct-booking-summary-pane {
  background: var(--ink);
  color: var(--cream);
  padding: 34px 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.ct-summary-header span {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
}

.ct-summary-header h3 {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  margin: 3px 0 0;
}

.ct-summary-details {
  margin: 18px 0;
  padding: 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-m);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ct-summary-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 700;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.15);
  padding-bottom: 6px;
}

.ct-summary-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.ct-summary-row span {
  color: rgba(255, 255, 255, 0.75);
}

.ct-summary-row strong {
  color: #fff;
}

.ct-submit-booking-btn {
  width: 100%;
  padding: 15px;
  border-radius: var(--radius-m);
  background: var(--gold);
  color: #141b18;
  font-size: 15.5px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  transition: all 0.3s var(--ease);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.ct-submit-booking-btn:hover {
  background: #fff;
  color: #141b18;
}

/* =========================================================
   SECTION 4: WHAT TO BRING TO YOUR FIRST FITTING
   Couture Arch / Swatch Silhouette (Non-Box Shaped Cards)
   ========================================================= */
.ct-prepare-s4 {
  padding: 85px 0;
  background: var(--surface);
  position: relative;
}

.ct-prepare-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.ct-prepare-card.ct-arch-shape {
  background: var(--bg);
  border: 1.5px solid var(--ct-card-border);
  border-radius: 140px 140px 28px 28px;
  padding: 24px 20px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: var(--ct-shadow-subtle);
  position: relative;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease), background 0.4s var(--ease);
}

/* Hanging Swatch Eyelet */
.ct-arch-tag-eyelet {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--ct-card-border);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}

.ct-eyelet-hole {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink);
  opacity: 0.7;
}

html.dark .ct-eyelet-hole {
  background: var(--gold);
}

/* Circular Media Lens Portal */
.ct-prepare-media-arch {
  position: relative;
  width: 140px;
  height: 140px;
  margin: 0 auto 18px;
}

.ct-arch-lens {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid rgba(181, 154, 91, 0.4);
  position: relative;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  transition: border-color 0.4s var(--ease), transform 0.4s var(--ease);
}

.ct-arch-lens img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

.ct-lens-ring {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1.5px dashed rgba(181, 154, 91, 0.45);
  pointer-events: none;
  animation: ctRotateLensRing 20s linear infinite;
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}

@keyframes ctRotateLensRing {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.ct-prepare-card.ct-arch-shape:hover .ct-lens-ring {
  opacity: 1;
}

.ct-prepare-card.ct-arch-shape:hover .ct-arch-lens {
  border-color: var(--gold);
  transform: scale(1.03);
}

.ct-prepare-card.ct-arch-shape:hover .ct-arch-lens img {
  transform: scale(1.12);
}

/* Step Seal Floating on Circle */
.ct-prepare-card .ct-prepare-step-tag {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--coral);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
  border: 2px solid #fff;
  transition: transform 0.3s var(--ease), background-color 0.3s var(--ease);
}

html.dark .ct-prepare-card .ct-prepare-step-tag {
  background: var(--gold);
  color: #141b18;
  border-color: #141b18;
}

.ct-prepare-card.ct-arch-shape:hover .ct-prepare-step-tag {
  transform: scale(1.1) rotate(6deg);
}

/* Body Content */
.ct-prepare-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.ct-prepare-icon-badge {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(85, 122, 104, 0.12);
  color: var(--coral);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  margin-bottom: 4px;
  transition: transform 0.3s var(--ease), background 0.3s var(--ease);
}

html.dark .ct-prepare-icon-badge {
  background: rgba(181, 154, 91, 0.18);
  color: var(--gold);
}

.ct-prepare-body h3 {
  font-size: 19px;
  font-weight: 800;
  color: var(--text);
  margin: 0;
  line-height: 1.25;
}

.ct-prepare-body p {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-soft);
  line-height: 1.55;
  margin: 0;
}

.ct-prepare-chip {
  margin-top: 8px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(85, 122, 104, 0.1);
  border: 1px solid rgba(85, 122, 104, 0.25);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--coral);
  transition: all 0.3s var(--ease);
}

html.dark .ct-prepare-chip {
  background: rgba(181, 154, 91, 0.14);
  border-color: rgba(181, 154, 91, 0.3);
  color: var(--gold);
}

/* Arch Card Hover Lift */
.ct-prepare-card.ct-arch-shape:hover {
  transform: translateY(-8px);
  box-shadow: var(--ct-shadow-3d);
  border-color: var(--coral);
}

html.dark .ct-prepare-card.ct-arch-shape:hover {
  border-color: var(--gold);
}

.ct-prepare-card.ct-arch-shape:hover .ct-arch-tag-eyelet {
  border-color: var(--coral);
}

html.dark .ct-prepare-card.ct-arch-shape:hover .ct-arch-tag-eyelet {
  border-color: var(--gold);
}

.ct-prepare-card.ct-arch-shape:hover .ct-prepare-icon-badge {
  transform: scale(1.12);
}

.ct-prepare-card.ct-arch-shape:hover .ct-prepare-chip {
  background: var(--coral);
  color: #fff;
  border-color: var(--coral);
}

html.dark .ct-prepare-card.ct-arch-shape:hover .ct-prepare-chip {
  background: var(--gold);
  color: #141b18;
  border-color: var(--gold);
}

/* =========================================================
   SECTION 5: STUDIO EXPERIENCE & 4-POINT FITTING CODE
   ========================================================= */
.ct-experience-s5 {
  padding: 85px 0;
  background: var(--ink);
  color: var(--cream);
  position: relative;
}

.ct-experience-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.ct-experience-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.18;
}

.ct-experience-inner {
  position: relative;
  z-index: 2;
}

.ct-commitments-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 40px;
}

.ct-commit-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-m);
  padding: 24px 20px;
  backdrop-filter: blur(8px);
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease);
}

.ct-commit-card:hover {
  transform: translateY(-4px);
  border-color: var(--gold);
}

.ct-commit-num {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 800;
  color: var(--gold);
  margin-bottom: 6px;
}

.ct-commit-card h3 {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 6px;
}

.ct-commit-card p {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.5;
}

/* =========================================================
   SECTION 6: FITTING GUIDELINES & FAQS (ACCORDION)
   ========================================================= */
.ct-faq-s6 {
  padding: 75px 0;
  background: var(--surface);
}

.ct-accordion-wrap {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ct-accordion-item {
  background: var(--bg);
  border: 1.5px solid var(--ct-card-border);
  border-radius: var(--radius-m);
  overflow: hidden;
  transition: border-color 0.25s var(--ease);
}

.ct-accordion-item.active {
  border-color: var(--coral);
}

html.dark .ct-accordion-item.active {
  border-color: var(--gold);
}

.ct-accordion-header {
  width: 100%;
  padding: 18px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  text-align: left;
}

html[dir="rtl"] .ct-accordion-header {
  text-align: right;
}

.ct-accordion-header h3 {
  font-size: 17px;
  font-weight: 800;
  color: var(--text);
  margin: 0;
}

.ct-accordion-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(85, 122, 104, 0.1);
  color: var(--coral);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  transition: transform 0.3s var(--ease);
  flex-shrink: 0;
}

html.dark .ct-accordion-icon {
  background: rgba(181, 154, 91, 0.15);
  color: var(--gold);
}

.ct-accordion-item.active .ct-accordion-icon {
  transform: rotate(180deg);
}

.ct-accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s var(--ease), padding 0.35s var(--ease);
  padding: 0 22px;
}

.ct-accordion-item.active .ct-accordion-content {
  max-height: 200px;
  padding: 0 22px 18px;
}

.ct-accordion-content p {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-soft);
  line-height: 1.6;
}

/* =========================================================
   SECTION 7: LIVE STUDIO LOCATION & INSTANT CONNECT
   ========================================================= */
.ct-location-s7 {
  padding: 70px 0 80px;
  background: var(--bg);
}

.ct-location-banner {
  background: var(--surface);
  border: 1.5px solid var(--ct-card-border);
  border-radius: var(--radius-l);
  padding: 36px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  box-shadow: var(--ct-shadow-elevated);
}

.ct-loc-info h3 {
  font-size: 24px;
  font-weight: 800;
  margin-bottom: 6px;
}

.ct-loc-info p {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-soft);
}

.ct-loc-actions {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-shrink: 0;
}

/* =========================================================
   RESPONSIVE DESIGN BREAKPOINTS
   ========================================================= */
@media (max-width: 1024px) {
  .ct-hero-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .ct-hero-stage {
    max-width: 400px;
    margin: 0 auto;
  }
  .ct-concierge-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .ct-booking-card {
    grid-template-columns: 1fr;
  }
  .ct-prepare-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .ct-commitments-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .ct-location-banner {
    flex-direction: column;
    text-align: center;
    padding: 28px 20px;
  }
  .ct-loc-actions {
    flex-wrap: wrap;
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .ct-hero-s1 {
    padding: 30px 0 0;
  }
  .ct-floating-seal,
  .ct-floating-proof {
    display: none;
  }
  .ct-concierge-grid {
    grid-template-columns: 1fr;
  }
  .ct-prepare-grid {
    grid-template-columns: 1fr;
  }
  .ct-commitments-grid {
    grid-template-columns: 1fr;
  }
  .ct-inputs-row {
    grid-template-columns: 1fr;
  }
  .ct-booking-form-pane,
  .ct-booking-summary-pane {
    padding: 22px 16px;
  }
}

/* ==========================================================
   TURNAROUND PAGE STYLES (merged in — previously assets/css/turnaround-redesign.css)
   ========================================================== */
/* =========================================================
   LOOM & LORE — TURNAROUND PAGE REDESIGN (ZERO GAP FINAL)
   Absolute Media Positioning • No Empty Spaces • Bold Typography
   ========================================================= */

:root {
  --tn-gold-glow: rgba(181, 154, 91, 0.28);
  --tn-coral-glow: rgba(85, 122, 104, 0.25);
  --tn-card-border: rgba(43, 23, 16, 0.12);
  --tn-glass-bg: rgba(250, 251, 247, 0.92);
  --tn-glass-border: rgba(255, 255, 255, 0.7);
  --tn-shadow-subtle: 0 6px 20px rgba(29, 41, 35, 0.05);
  --tn-shadow-elevated: 0 14px 32px rgba(29, 41, 35, 0.1);
  --tn-shadow-3d: 0 24px 50px rgba(20, 27, 24, 0.15);
}

html.dark {
  --tn-card-border: rgba(255, 255, 255, 0.12);
  --tn-glass-bg: rgba(26, 36, 31, 0.9);
  --tn-glass-border: rgba(255, 255, 255, 0.12);
  --tn-shadow-subtle: 0 6px 20px rgba(0, 0, 0, 0.35);
  --tn-shadow-elevated: 0 14px 32px rgba(0, 0, 0, 0.5);
  --tn-shadow-3d: 0 24px 50px rgba(0, 0, 0, 0.65);
}

.tn-redesign-page {
  overflow-x: hidden;
  background-color: var(--bg);
  color: var(--text);
  position: relative;
  font-family: var(--font-body);
}

.tn-redesign-page section {
  position: relative;
  overflow: hidden;
}

/* =========================================================
   GLOBAL ENHANCED FONT WEIGHTS & TYPOGRAPHY
   ========================================================= */
.tn-redesign-page h1,
.tn-redesign-page h2,
.tn-redesign-page h3,
.tn-redesign-page h4 {
  font-family: var(--font-display);
  font-weight: 800 !important;
  color: #0b120f;
  line-height: 1.12;
}

html.dark .tn-redesign-page h1,
html.dark .tn-redesign-page h2,
html.dark .tn-redesign-page h3,
html.dark .tn-redesign-page h4 {
  color: var(--text);
}

.tn-redesign-page p {
  font-weight: 600;
  color: #1c2e25;
  line-height: 1.6;
}

html.dark .tn-redesign-page p {
  color: var(--text-soft);
}

.tn-redesign-page strong,
.tn-redesign-page b {
  font-weight: 800;
  color: #050a08;
}

html.dark .tn-redesign-page strong,
html.dark .tn-redesign-page b {
  color: var(--text);
}

.tn-redesign-page em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  color: #244e3a;
}

html.dark .tn-redesign-page em {
  color: var(--gold);
}

.tn-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: rgba(85, 122, 104, 0.14);
  color: var(--coral);
  border: 1.5px solid rgba(85, 122, 104, 0.3);
  backdrop-filter: blur(8px);
}

html.dark .tn-badge-pill {
  background: rgba(181, 154, 91, 0.18);
  color: var(--gold);
  border-color: rgba(181, 154, 91, 0.35);
}

.tn-beacon-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #27ae60;
  box-shadow: 0 0 0 0 rgba(39, 174, 96, 0.7);
  animation: tnPulseBeacon 2s infinite;
  flex-shrink: 0;
}

@keyframes tnPulseBeacon {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(39, 174, 96, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 9px rgba(39, 174, 96, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(39, 174, 96, 0); }
}

.tn-section-head {
  max-width: 720px;
  margin: 0 auto 36px;
  text-align: center;
}

.tn-section-title {
  font-size: clamp(30px, 3.8vw, 46px);
  margin: 12px 0 12px;
}

.tn-section-desc {
  font-size: clamp(15px, 1.15vw, 17px);
  font-weight: 600;
  color: var(--text-soft);
}

/* =========================================================
   SECTION 1: HERO
   ========================================================= */
.tn-hero-s1 {
  min-height: auto;
  padding: 48px 0 0;
  background: radial-gradient(circle at 85% 20%, rgba(85, 122, 104, 0.12) 0%, transparent 60%),
              radial-gradient(circle at 10% 80%, rgba(181, 154, 91, 0.1) 0%, transparent 50%),
              var(--bg);
}

.tn-hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 40px;
  align-items: center;
  width: 100%;
}

.tn-hero-content {
  position: relative;
  z-index: 2;
}

.tn-hero-title {
  font-size: clamp(34px, 4.2vw, 58px);
  margin: 16px 0 16px;
  letter-spacing: -0.02em;
}

.tn-hero-lead {
  font-size: clamp(15px, 1.15vw, 17.5px);
  font-weight: 600;
  color: var(--text-soft);
  line-height: 1.65;
  max-width: 560px;
  margin-bottom: 24px;
}

.tn-hero-sla-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
}

.tn-sla-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px;
  background: var(--surface);
  border: 1.5px solid var(--tn-card-border);
  border-radius: var(--radius-m);
  font-size: 13.5px;
  font-weight: 800;
  color: var(--text);
  box-shadow: var(--tn-shadow-subtle);
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.tn-sla-chip:hover {
  transform: translateY(-3px);
  border-color: var(--coral);
  box-shadow: var(--tn-shadow-elevated);
}

.tn-sla-chip i {
  color: var(--coral);
  font-size: 14px;
}

html.dark .tn-sla-chip i {
  color: var(--gold);
}

.tn-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.tn-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 30px;
  border-radius: var(--radius-m);
  background: var(--ink);
  color: var(--cream);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow: 0 8px 20px rgba(29, 41, 35, 0.25);
  transition: transform 0.35s var(--ease), background-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.tn-btn-primary:hover {
  background: var(--coral);
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(85, 122, 104, 0.35);
}

html.dark .tn-btn-primary {
  background: var(--gold);
  color: #141b18;
}

html.dark .tn-btn-primary:hover {
  background: #fff;
  color: #141b18;
}

.tn-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: var(--radius-m);
  background: transparent;
  border: 1.5px solid var(--line);
  color: var(--text);
  font-size: 15px;
  font-weight: 800;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease), transform 0.3s var(--ease);
}

.tn-btn-ghost:hover {
  border-color: var(--coral);
  background: rgba(85, 122, 104, 0.08);
  transform: translateY(-3px);
}

/* Hero Right: 3D Stage */
.tn-hero-stage {
  position: relative;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}

.tn-stage-main-card {
  position: relative;
  border-radius: var(--radius-l);
  overflow: hidden;
  box-shadow: var(--tn-shadow-3d);
  border: 2px solid var(--tn-glass-border);
  height: 400px;
  width: 100%;
  background: var(--surface);
}

.tn-stage-main-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s var(--ease);
}

.tn-stage-main-card:hover img {
  transform: scale(1.05);
}

.tn-stage-gradient-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(29, 41, 35, 0.05) 0%, rgba(29, 41, 35, 0.8) 100%);
}

.tn-stage-caption {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  color: #fff;
  z-index: 2;
}

.tn-stage-caption strong {
  display: block;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 800;
  margin-bottom: 2px;
  color: #fff;
}

.tn-stage-caption span {
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
}

.tn-floating-seal {
  position: absolute;
  top: -16px;
  right: -16px;
  width: 95px;
  height: 95px;
  z-index: 3;
}

.tn-seal-svg {
  width: 100%;
  height: 100%;
  animation: tnRotateClockwise 20s linear infinite;
}

@keyframes tnRotateClockwise {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.tn-seal-center-icon {
  position: absolute;
  inset: 18px;
  border-radius: 50%;
  background: var(--gold);
  color: #1a241f;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  box-shadow: 0 6px 18px rgba(181, 154, 91, 0.4);
}

.tn-floating-proof {
  position: absolute;
  bottom: -14px;
  left: -14px;
  background: var(--surface);
  border: 1.5px solid var(--tn-card-border);
  border-radius: var(--radius-m);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: var(--tn-shadow-elevated);
  z-index: 3;
  backdrop-filter: blur(12px);
}

.tn-proof-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(85, 122, 104, 0.15);
  color: var(--coral);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

html.dark .tn-proof-icon {
  background: rgba(181, 154, 91, 0.2);
  color: var(--gold);
}

.tn-proof-text strong {
  display: block;
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
}

.tn-proof-text span {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-soft);
}

.tn-hero-marquee-bar {
  margin-top: 40px;
  padding: 14px 0;
  background: var(--surface);
  border-top: 1px solid var(--tn-card-border);
  border-bottom: 1px solid var(--tn-card-border);
  overflow: hidden;
  white-space: nowrap;
}

.tn-marquee-track {
  display: inline-flex;
  align-items: center;
  gap: 32px;
  animation: tnMarqueeScroll 28s linear infinite;
}

.tn-marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text);
}

.tn-marquee-item i.tn-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--coral);
  display: inline-block;
}

html.dark .tn-marquee-item i.tn-dot {
  background: var(--gold);
}

/* =========================================================
   SECTION 2: BENTO MATRIX — ABSOLUTE ZERO GAP FIX
   ========================================================= */
.tn-bento-s2 {
  padding: 70px 0;
  background: var(--surface);
}

.tn-filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 30px;
}

.tn-tab-btn {
  padding: 9px 20px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 800;
  background: var(--bg);
  border: 1.5px solid var(--tn-card-border);
  color: var(--text-soft);
  transition: all 0.3s var(--ease);
  cursor: pointer;
}

.tn-tab-btn:hover {
  color: var(--text);
  border-color: var(--coral);
}

.tn-tab-btn.active {
  background: var(--coral);
  color: #fff;
  border-color: var(--coral);
  box-shadow: 0 6px 18px rgba(85, 122, 104, 0.3);
}

html.dark .tn-tab-btn.active {
  background: var(--gold);
  color: #141b18;
  border-color: var(--gold);
  box-shadow: 0 6px 18px rgba(181, 154, 91, 0.3);
}

/* Outer wrapper: stacks the spotlight row above the standard grid.
   Each row manages its own tracks, so hiding cards during filtering
   never leaves the other row's layout broken or gapped. */
.tn-bento-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.tn-bento-card {
  position: relative;
  background: var(--bg);
  border-radius: var(--radius-l);
  border: 1.5px solid var(--tn-card-border);
  overflow: hidden;
  box-shadow: var(--tn-shadow-subtle);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
}

.tn-bento-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--tn-shadow-elevated);
  border-color: var(--coral);
}

html.dark .tn-bento-card:hover {
  border-color: var(--gold);
}

.tn-bento-card.hidden {
  display: none !important;
}

/* SPOTLIGHT ROW — the two signature services. Each spotlight card is a
   full-width row of its own, so filtering one out never shifts or gaps
   the other; a 1-column grid can't produce leftover holes. */
.tn-bento-spotlight-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.tn-bento-card.spotlight-card {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  align-items: stretch;
}

.tn-bento-card.spotlight-card.reverse {
  grid-template-columns: 1.18fr 0.82fr;
}

.tn-bento-card.spotlight-card.reverse .tn-bento-media {
  order: 2;
}

.spotlight-card .tn-bento-info {
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  z-index: 1;
}

.spotlight-card .tn-bento-media {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 300px;
  overflow: hidden;
}

.spotlight-card .tn-bento-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s var(--ease);
}

.spotlight-card:hover .tn-bento-media img {
  transform: scale(1.06);
}

/* STANDARD ROW — uniform equal-width cards. Every card is the same grid
   track, so no matter which subset survives a filter, the row simply
   re-packs left to right with consistent sizing — never a stray gap. */
.tn-bento-standard-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  gap: 20px;
}

.tn-bento-card.standard-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.standard-card .tn-bento-media {
  height: 180px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

.standard-card .tn-bento-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}

.standard-card:hover .tn-bento-media img {
  transform: scale(1.06);
}

.standard-card .tn-bento-info {
  flex-grow: 1;
}

.standard-card .tn-bento-specs {
  margin-top: auto;
}

.tn-bento-media-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(20, 27, 24, 0.85);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  z-index: 2;
}

.tn-bento-media-badge.highlight {
  background: var(--coral);
}

html.dark .tn-bento-media-badge.highlight {
  background: var(--gold);
  color: #141b18;
}

.tn-bento-info {
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 6px;
  flex-grow: 1;
}

.tn-bento-top-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 2px;
}

.tn-bento-title {
  font-size: 19.5px;
  font-weight: 800;
  color: var(--text);
}

.tn-bento-time {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 800;
  color: var(--coral);
  white-space: nowrap;
}

html.dark .tn-bento-time {
  color: var(--gold);
}

.tn-bento-desc {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-soft);
  line-height: 1.5;
  margin-bottom: 4px;
}

.tn-bento-features-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin: 4px 0 6px;
}

.tn-bento-feat-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  background: rgba(85, 122, 104, 0.09);
  padding: 5px 10px;
  border-radius: var(--radius-s);
}

html.dark .tn-bento-feat-chip {
  background: rgba(181, 154, 91, 0.12);
}

.tn-bento-feat-chip i {
  color: var(--coral);
  font-size: 11.5px;
}

html.dark .tn-bento-feat-chip i {
  color: var(--gold);
}

/* Live Speed Gauge / Meter */
.tn-bento-live-meter {
  background: rgba(85, 122, 104, 0.07);
  border: 1px solid var(--tn-card-border);
  border-radius: var(--radius-s);
  padding: 8px 12px;
  margin: 4px 0;
}

html.dark .tn-bento-live-meter {
  background: rgba(181, 154, 91, 0.1);
}

.tn-meter-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11.5px;
  font-weight: 800;
  margin-bottom: 4px;
  color: var(--text);
}

.tn-meter-label span i {
  color: var(--coral);
  margin-right: 4px;
}

html.dark .tn-meter-label span i {
  color: var(--gold);
}

.tn-meter-label strong {
  color: var(--coral);
}

html.dark .tn-meter-label strong {
  color: var(--gold);
}

.tn-meter-track {
  height: 4px;
  background: var(--line);
  border-radius: 999px;
  overflow: hidden;
}

.tn-meter-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--coral), var(--gold));
  border-radius: 999px;
}

.tn-bento-specs {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
}

.tn-bento-spec-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
}

.tn-bento-spec-item i {
  color: var(--coral);
  font-size: 11.5px;
}

html.dark .tn-bento-spec-item i {
  color: var(--gold);
}

/* =========================================================
   SECTION 3: THE EXPRESS ATELIER LANE & RADIAL CLOCK
   ========================================================= */
.tn-express-s3 {
  padding: 70px 0;
  background: var(--bg);
}

.tn-express-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 40px;
  align-items: center;
}

.tn-dial-stage {
  background: var(--surface);
  border: 1.5px solid var(--tn-card-border);
  border-radius: var(--radius-l);
  padding: 30px 20px;
  text-align: center;
  box-shadow: var(--tn-shadow-elevated);
}

.tn-dial-wrapper {
  position: relative;
  width: 180px;
  height: 180px;
  margin: 0 auto 18px;
}

.tn-dial-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.tn-dial-bg-track {
  fill: none;
  stroke: var(--line);
  stroke-width: 12;
}

.tn-dial-progress {
  fill: none;
  stroke: var(--coral);
  stroke-width: 12;
  stroke-linecap: round;
  stroke-dasharray: 565;
  stroke-dashoffset: 280;
  transition: stroke-dashoffset 0.8s var(--ease);
}

html.dark .tn-dial-progress {
  stroke: var(--gold);
}

.tn-dial-center-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.tn-dial-number {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
}

.tn-dial-unit {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--coral);
  margin-top: 3px;
}

html.dark .tn-dial-unit {
  color: var(--gold);
}

.tn-dial-status-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 15px;
  border-radius: 999px;
  background: rgba(39, 174, 96, 0.14);
  color: #27ae60;
  font-size: 12.5px;
  font-weight: 800;
}

.tn-tier-cards-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tn-tier-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 16px 18px;
  border-radius: var(--radius-m);
  background: var(--surface);
  border: 1.5px solid var(--tn-card-border);
  cursor: pointer;
  transition: all 0.35s var(--ease);
}

.tn-tier-card:hover {
  border-color: var(--coral);
  transform: translateX(6px);
  box-shadow: var(--tn-shadow-subtle);
}

html[dir="rtl"] .tn-tier-card:hover {
  transform: translateX(-6px);
}

.tn-tier-card.active {
  border-color: var(--coral);
  background: rgba(85, 122, 104, 0.08);
  box-shadow: 0 6px 20px rgba(85, 122, 104, 0.15);
}

html.dark .tn-tier-card.active {
  border-color: var(--gold);
  background: rgba(181, 154, 91, 0.1);
  box-shadow: 0 6px 20px rgba(181, 154, 91, 0.2);
}

.tn-tier-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-s);
  background: rgba(85, 122, 104, 0.14);
  color: var(--coral);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
}

html.dark .tn-tier-icon {
  background: rgba(181, 154, 91, 0.18);
  color: var(--gold);
}

.tn-tier-info h4 {
  font-size: 17px;
  font-weight: 800;
  margin-bottom: 2px;
  color: var(--text);
}

.tn-tier-info p {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-soft);
}

.tn-tier-meta {
  text-align: right;
}

html[dir="rtl"] .tn-tier-meta {
  text-align: left;
}

.tn-tier-duration {
  font-family: var(--font-display);
  font-size: 18.5px;
  font-weight: 800;
  color: var(--coral);
  display: block;
}

html.dark .tn-tier-duration {
  color: var(--gold);
}

.tn-tier-badge {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-soft);
}

/* =========================================================
   SECTION 4: 5-PHASE BESPOKE TIMELINE PIPELINE
   ========================================================= */
.tn-pipeline-s4 {
  padding: 75px 0;
  background: var(--surface);
}

.tn-pipeline-track {
  position: relative;
  max-width: 860px;
  margin: 36px auto 0;
}

.tn-pipeline-thread-line {
  position: absolute;
  top: 25px;
  bottom: 25px;
  left: 50%;
  width: 3px;
  background: var(--line);
  transform: translateX(-50%);
}

.tn-pipeline-thread-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background: linear-gradient(180deg, var(--coral), var(--gold));
  box-shadow: 0 0 14px 2px rgba(85, 122, 104, 0.4);
  transition: height 0.6s var(--ease);
}

.tn-step-node-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 28px;
  padding: 16px 0;
}

.tn-step-node-row:nth-child(even) .tn-step-card-box {
  grid-column: 1;
  text-align: right;
}

html[dir="rtl"] .tn-step-node-row:nth-child(even) .tn-step-card-box {
  text-align: left;
}

.tn-step-node-row:nth-child(odd) .tn-step-card-box {
  grid-column: 3;
  text-align: left;
}

html[dir="rtl"] .tn-step-node-row:nth-child(odd) .tn-step-card-box {
  text-align: right;
}

.tn-step-center-pin {
  grid-column: 2;
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--bg);
  border: 3px solid var(--coral);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  cursor: pointer;
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease);
}

.tn-step-center-pin:hover {
  transform: scale(1.12);
  border-color: var(--gold);
}

.tn-step-center-pin img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.tn-step-num-badge {
  position: absolute;
  bottom: -4px;
  right: -4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg);
}

html.dark .tn-step-num-badge {
  background: var(--gold);
  color: #141b18;
}

.tn-step-card-box {
  background: var(--bg);
  border: 1.5px solid var(--tn-card-border);
  border-radius: var(--radius-m);
  padding: 18px 20px;
  box-shadow: var(--tn-shadow-subtle);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.tn-step-card-box:hover {
  transform: translateY(-4px);
  box-shadow: var(--tn-shadow-elevated);
}

.tn-step-time-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--coral);
  margin-bottom: 3px;
}

html.dark .tn-step-time-tag {
  color: var(--gold);
}

.tn-step-card-box h3 {
  font-size: 18.5px;
  font-weight: 800;
  margin-bottom: 4px;
}

.tn-step-card-box p {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-soft);
  line-height: 1.5;
}

/* =========================================================
   SECTION 5: INTERACTIVE ESTIMATOR & MILESTONE SIMULATOR
   ========================================================= */
.tn-calc-s5 {
  padding: 75px 0;
  background: radial-gradient(circle at 10% 20%, rgba(85, 122, 104, 0.08) 0%, transparent 50%),
              radial-gradient(circle at 90% 80%, rgba(181, 154, 91, 0.08) 0%, transparent 50%),
              var(--bg);
}

.tn-calc-card {
  max-width: 1040px;
  margin: 0 auto;
  background: var(--surface);
  border: 1.5px solid var(--tn-glass-border);
  border-radius: var(--radius-l);
  box-shadow: var(--tn-shadow-3d);
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  overflow: hidden;
}

.tn-calc-form-side {
  padding: 32px 34px;
}

.tn-calc-group {
  margin-bottom: 18px;
}

.tn-calc-label {
  display: block;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 8px;
}

.tn-calc-options-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
}

.tn-calc-pill-radio {
  position: relative;
}

.tn-calc-pill-radio input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.tn-calc-pill-radio label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 6px;
  background: var(--bg);
  border: 1.5px solid var(--tn-card-border);
  border-radius: var(--radius-m);
  font-size: 12px;
  font-weight: 800;
  color: var(--text);
  cursor: pointer;
  text-align: center;
  transition: all 0.25s var(--ease);
}

.tn-calc-pill-radio label i {
  font-size: 16px;
  margin-bottom: 4px;
  color: var(--coral);
}

html.dark .tn-calc-pill-radio label i {
  color: var(--gold);
}

.tn-calc-pill-radio input:checked + label {
  border-color: var(--coral);
  background: rgba(85, 122, 104, 0.12);
  color: var(--coral);
  box-shadow: 0 4px 14px rgba(85, 122, 104, 0.2);
}

html.dark .tn-calc-pill-radio input:checked + label {
  border-color: var(--gold);
  background: rgba(181, 154, 91, 0.18);
  color: var(--gold);
}

.tn-calc-result-side {
  background: var(--ink);
  color: var(--cream);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.tn-calc-result-head span {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
}

.tn-calc-result-head h3 {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  margin: 3px 0 0;
}

.tn-calc-big-estimate {
  margin: 18px 0;
  padding: 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-m);
}

.tn-calc-est-days {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.4vw, 40px);
  font-weight: 800;
  color: var(--gold);
  line-height: 1;
}

.tn-calc-est-date {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
}

.tn-calc-milestones {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
}

.tn-milestone-item {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  font-weight: 700;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.15);
  padding-bottom: 4px;
}

.tn-milestone-item span {
  color: rgba(255, 255, 255, 0.75);
}

.tn-milestone-item strong {
  color: #fff;
}

.tn-calc-book-btn {
  width: 100%;
  justify-content: center;
  background: var(--gold);
  color: #141b18;
}

.tn-calc-book-btn:hover {
  background: #fff;
  color: #141b18;
}

/* =========================================================
   SECTION 6: TIMELINE VARIABLES & ARTISAN SPEED RULES
   ========================================================= */
.tn-variables-s6 {
  padding: 70px 0;
  background: var(--surface);
}

.tn-opposing-marquees {
  margin-bottom: 36px;
  overflow: hidden;
}

.tn-marquee-line {
  padding: 8px 0;
  white-space: nowrap;
}

.tn-marquee-line.top-line .tn-marquee-track {
  animation: tnMarqueeScroll 32s linear infinite;
}

.tn-marquee-line.bottom-line .tn-marquee-track {
  animation: tnMarqueeScrollRev 36s linear infinite;
}

@keyframes tnMarqueeScrollRev {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}

.tn-marquee-line span {
  font-family: var(--font-display);
  font-size: clamp(18px, 2.1vw, 26px);
  font-weight: 800;
  color: var(--text-soft);
  margin-right: 32px;
}

.tn-marquee-line span.accent {
  color: var(--coral);
}

html.dark .tn-marquee-line span.accent {
  color: var(--gold);
}

.tn-variables-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.tn-var-card {
  padding: 26px;
  border-radius: var(--radius-l);
  background: var(--bg);
  border: 1.5px solid var(--tn-card-border);
  box-shadow: var(--tn-shadow-subtle);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.tn-var-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--tn-shadow-elevated);
}

.tn-var-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.tn-var-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-m);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.tn-var-icon.green {
  background: rgba(39, 174, 96, 0.14);
  color: #27ae60;
}

.tn-var-icon.amber {
  background: rgba(243, 156, 18, 0.14);
  color: #e67e22;
}

.tn-var-card-header h3 {
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
}

.tn-var-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tn-var-list li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.45;
}

.tn-var-list li i {
  margin-top: 3px;
  font-size: 13px;
}

.tn-var-list li i.fa-circle-check { color: #27ae60; }
.tn-var-list li i.fa-clock { color: #e67e22; }

/* =========================================================
   SECTION 7: STUDIO TRUST & TIMELINE CONSULTATION HUB
   ========================================================= */
.tn-hub-s7 {
  padding: 75px 0 85px;
  background: var(--ink-soft);
  color: var(--cream);
}

.tn-stats-4col {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 45px;
}

.tn-stat-cell {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-m);
  padding: 22px 14px;
  text-align: center;
  backdrop-filter: blur(8px);
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease);
}

.tn-stat-cell:hover {
  transform: translateY(-4px);
  border-color: var(--gold);
}

.tn-stat-num {
  font-family: var(--font-display);
  font-size: clamp(32px, 3.4vw, 44px);
  font-weight: 800;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 4px;
}

.tn-stat-label {
  font-size: 13px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.8);
}

.tn-trust-booking-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 36px;
  align-items: center;
}

.tn-client-quote-box {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-l);
  padding: 30px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.3);
}

.tn-quote-icon {
  font-size: 32px;
  color: var(--gold);
  margin-bottom: 12px;
  opacity: 0.85;
}

.tn-quote-text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(17px, 1.8vw, 21.5px);
  font-weight: 700;
  line-height: 1.5;
  color: #fff;
  margin-bottom: 18px;
}

.tn-quote-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tn-author-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--gold);
  color: #141b18;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
  flex-shrink: 0;
}

.tn-author-info strong {
  display: block;
  font-size: 14.5px;
  font-weight: 800;
  color: #fff;
}

.tn-author-info span {
  font-size: 12px;
  font-weight: 700;
  color: var(--gold);
}

.tn-inquiry-form-card {
  background: var(--surface);
  color: var(--text);
  border-radius: var(--radius-l);
  padding: 30px;
  box-shadow: var(--tn-shadow-3d);
}

.tn-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 10px;
}

.tn-form-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}

.tn-form-field label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text);
}

.tn-form-field input,
.tn-form-field select,
.tn-form-field textarea {
  padding: 11px 14px;
  border-radius: var(--radius-m);
  background: var(--bg);
  border: 1.5px solid var(--tn-card-border);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.tn-form-field input:focus,
.tn-form-field select:focus,
.tn-form-field textarea:focus {
  outline: none;
  border-color: var(--coral);
  box-shadow: 0 0 0 4px rgba(85, 122, 104, 0.15);
}

html.dark .tn-form-field input:focus,
html.dark .tn-form-field select:focus,
html.dark .tn-form-field textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(181, 154, 91, 0.2);
}

.tn-submit-btn {
  width: 100%;
  padding: 14px;
  border-radius: var(--radius-m);
  background: var(--ink);
  color: var(--cream);
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.3s var(--ease);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.tn-submit-btn:hover {
  background: var(--coral);
  color: #fff;
  transform: translateY(-2px);
}

html.dark .tn-submit-btn {
  background: var(--gold);
  color: #141b18;
}

html.dark .tn-submit-btn:hover {
  background: #fff;
}

.tn-toast-notification {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background: var(--ink);
  color: #fff;
  border-left: 5px solid var(--gold);
  padding: 14px 20px;
  border-radius: var(--radius-m);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 9999;
  transform: translateY(120px);
  opacity: 0;
  transition: transform 0.4s var(--ease), opacity 0.4s var(--ease);
}

.tn-toast-notification.show {
  transform: translateY(0);
  opacity: 1;
}

/* =========================================================
   RESPONSIVE DESIGN BREAKPOINTS
   ========================================================= */
@media (max-width: 1024px) {
  .tn-hero-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .tn-hero-stage {
    max-width: 400px;
    margin: 0 auto;
  }
  .tn-bento-standard-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: auto;
  }
  .tn-bento-card.spotlight-card,
  .tn-bento-card.spotlight-card.reverse {
    grid-template-columns: 1fr;
  }
  .spotlight-card.reverse .tn-bento-media {
    order: 0;
  }
  .spotlight-card .tn-bento-media {
    position: relative;
    min-height: 190px;
    height: 190px;
  }
  .spotlight-card .tn-bento-media img {
    position: relative;
    height: 100%;
    width: 100%;
  }
  .tn-express-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .tn-calc-card {
    grid-template-columns: 1fr;
  }
  .tn-variables-cards-grid {
    grid-template-columns: 1fr;
  }
  .tn-stats-4col {
    grid-template-columns: repeat(2, 1fr);
  }
  .tn-trust-booking-grid {
    grid-template-columns: 1fr;
  }
  .tn-step-node-row {
    grid-template-columns: 48px 1fr;
    gap: 14px;
  }
  .tn-pipeline-thread-line {
    left: 24px;
  }
  .tn-step-center-pin {
    grid-column: 1;
    width: 48px;
    height: 48px;
  }
  .tn-step-node-row:nth-child(even) .tn-step-card-box,
  .tn-step-node-row:nth-child(odd) .tn-step-card-box {
    grid-column: 2;
    text-align: left !important;
  }
  html[dir="rtl"] .tn-step-node-row:nth-child(even) .tn-step-card-box,
  html[dir="rtl"] .tn-step-node-row:nth-child(odd) .tn-step-card-box {
    text-align: right !important;
  }
}

@media (max-width: 768px) {
  .tn-hero-s1 {
    padding: 30px 0 0;
  }
  .tn-floating-seal,
  .tn-floating-proof {
    display: none;
  }
  .tn-bento-features-grid {
    grid-template-columns: 1fr;
  }
  .tn-bento-standard-grid {
    grid-template-columns: 1fr;
  }
  .tn-form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .tn-calc-form-side,
  .tn-calc-result-side,
  .tn-inquiry-form-card,
  .tn-client-quote-box {
    padding: 22px 14px;
  }
  .tn-stats-4col {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================
   AUTH PAGES STYLES: login / signup / 404 / coming-soon (merged in — previously assets/css/auth-pages.css)
   ========================================================== */
/* =========================================================
   LOOM & LORE — auth-pages.css
   Shared styles for Login, Signup, 404 and Coming Soon:
   minimal top bar (logo left, RTL + dark-mode right), rich
   ambient motion, and the extra widgets those pages need
   (password toggle, strength meter, countdown, progress
   bar, 404 search).
   ========================================================= */

/* ---------- MINI TOP BAR ---------- */
.mini-topbar{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  padding:18px 0;
}
.mini-topbar::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:linear-gradient(90deg, transparent, var(--coral), var(--gold), var(--coral), transparent);
  background-size:200% 100%;
  animation:stitchSlide 6s linear infinite;
  opacity:.75;
}
.mini-topbar-inner{display:flex;align-items:center;justify-content:space-between;direction:ltr}
.mini-topbar-actions{display:flex;align-items:center;gap:10px;direction:ltr}
html[dir="rtl"] .mini-topbar-inner{direction:ltr}
@keyframes stitchSlide{to{background-position:-200% 0;}}

/* ---------- AMBIENT BACKGROUND (blobs + thread grid) ---------- */
body.aux-page{position:relative;}
body.aux-page .mini-topbar,
body.aux-page main,
body.aux-page .site-footer{position:relative;z-index:1;}
.bg-blobs{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;}
.bg-blobs span{
  position:absolute;border-radius:50%;filter:blur(70px);opacity:.32;
  animation:blobDrift 22s ease-in-out infinite;
}
.bg-blobs span:nth-child(1){
  width:420px;height:420px;left:-120px;top:-100px;
  background:radial-gradient(circle at 30% 30%, var(--coral), transparent 70%);
  animation-duration:24s;
}
.bg-blobs span:nth-child(2){
  width:380px;height:380px;right:-140px;top:20%;
  background:radial-gradient(circle at 60% 40%, var(--gold), transparent 70%);
  animation-duration:19s;animation-delay:-6s;
}
.bg-blobs span:nth-child(3){
  width:340px;height:340px;left:20%;bottom:-160px;
  background:radial-gradient(circle at 50% 50%, var(--coral), transparent 70%);
  animation-duration:27s;animation-delay:-11s;
}
@keyframes blobDrift{
  0%,100%{transform:translate(0,0) scale(1);}
  33%{transform:translate(40px,-30px) scale(1.12);}
  66%{transform:translate(-30px,25px) scale(.94);}
}
@media (prefers-reduced-motion:reduce){
  .bg-blobs span,.mini-topbar::after{animation:none;}
}

/* floating theme icons (needle / thread / ruler chips) */
.deco-float{
  position:absolute;display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:50%;
  background:color-mix(in srgb, var(--surface) 82%, transparent);
  border:1px solid var(--line);
  color:var(--coral);font-size:16px;
  box-shadow:0 14px 30px rgba(0,0,0,.10);
  animation:decoFloat 6.5s ease-in-out infinite;
  pointer-events:none;z-index:1;backdrop-filter:blur(6px);
}
.deco-float.f1{top:6%;left:4%;animation-delay:0s;}
.deco-float.f2{top:70%;left:8%;animation-delay:-2.1s;color:var(--gold);}
.deco-float.f3{top:14%;right:6%;animation-delay:-3.4s;color:var(--gold);}
.deco-float.f4{top:66%;right:4%;animation-delay:-1.2s;}
@keyframes decoFloat{
  0%,100%{transform:translateY(0) rotate(0deg);}
  50%{transform:translateY(-16px) rotate(6deg);}
}
@media (max-width:900px){.deco-float{display:none;}}

/* ---------- SHELL used by 404 / coming-soon ---------- */
.status-page{min-height:calc(100svh - 78px);display:flex;align-items:center;padding:60px 0 90px;position:relative;overflow:hidden}
.status-shell{
  max-width:640px;margin:0 auto;text-align:center;position:relative;z-index:1;
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  border:1px solid var(--line);
  border-radius:var(--radius-l);
  padding:56px 46px;
  box-shadow:0 30px 80px rgba(0,0,0,.12);
  backdrop-filter:blur(8px);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.status-shell:hover{transform:translateY(-4px);box-shadow:0 40px 90px rgba(0,0,0,.16);}
.status-ring{
  position:absolute;left:50%;top:50%;width:640px;height:640px;transform:translate(-50%,-50%);
  border-radius:50%;pointer-events:none;
  background:conic-gradient(from 0deg, color-mix(in srgb, var(--coral) 30%, transparent), transparent 20%, transparent 80%, color-mix(in srgb, var(--gold) 30%, transparent));
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  mask:radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  animation:tnSpin 70s linear infinite;
}
.status-ring::after{
  content:"";position:absolute;inset:60px;border-radius:50%;
  border:1px dashed color-mix(in srgb, var(--gold) 40%, transparent);
  animation:tnSpin 40s linear infinite reverse;
}
.status-icon{
  width:104px;height:104px;border-radius:50%;margin:0 auto 30px;
  display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb, var(--coral) 14%, transparent);
  color:var(--coral);font-size:40px;position:relative;
  box-shadow:0 0 0 0 color-mix(in srgb, var(--coral) 45%, transparent);
}
.status-icon::before{
  content:"";position:absolute;inset:-14px;border-radius:50%;
  border:1.5px solid color-mix(in srgb, var(--coral) 35%, transparent);
  animation:haloPulse 2.6s ease-out infinite;
}
@keyframes haloPulse{
  0%{transform:scale(.82);opacity:.9;}
  100%{transform:scale(1.35);opacity:0;}
}
.status-code{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(64px,12vw,140px);line-height:1;
  letter-spacing:-.02em;
  background:linear-gradient(100deg, var(--text) 30%, var(--coral) 50%, var(--gold) 65%, var(--text) 85%);
  background-size:260% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:codeShine 5s ease-in-out infinite;
}
.status-code em{font-style:normal}
@keyframes codeShine{0%{background-position:0% 0;}50%{background-position:100% 0;}100%{background-position:0% 0;}}
.status-title{font-size:var(--fs-h3);margin-top:6px;font-weight:700;}
.status-lead{margin-top:14px;color:var(--ink);font-weight:600;font-size:var(--fs-lead);max-width:46ch;margin-inline:auto}
.status-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:32px}
.status-actions .btn{position:relative;overflow:hidden;}
.status-actions .btn::after,
.status-notify-box .btn::after,
.form-panel .btn-primary::after{
  content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(115deg, transparent, rgba(255,255,255,.45), transparent);
  transform:skewX(-20deg);transition:left .6s var(--ease);
}
.status-actions .btn:hover::after,
.status-notify-box .btn:hover::after,
.form-panel .btn-primary:hover::after{left:130%;}

/* 404 quick-search */
.status-search{margin-top:34px;max-width:420px;margin-inline:auto}
.status-search-box{display:flex;align-items:center;gap:10px;background:var(--bg);border:1.5px solid var(--line);border-radius:999px;padding:8px 8px 8px 20px;transition:border-color .25s var(--ease), box-shadow .25s var(--ease);}
.status-search-box:focus-within{border-color:var(--coral);box-shadow:0 0 0 4px color-mix(in srgb, var(--coral) 16%, transparent);}
.status-search-box input{flex:1;border:none;background:transparent;font-size:15px;font-weight:600;color:var(--text);outline:none}
.status-search-box input::placeholder{color:var(--text-soft);font-weight:500;}
.status-search-box button{
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:50%;background:var(--coral);color:#fff;flex:none;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.status-search-box button:hover{transform:scale(1.1) rotate(8deg);box-shadow:0 10px 22px color-mix(in srgb, var(--coral) 45%, transparent);}
.status-search-results{
  margin-top:14px;text-align:left;max-height:0;opacity:0;overflow:hidden;
  transform:translateY(-6px);
  transition:max-height .4s var(--ease), opacity .3s var(--ease), transform .35s var(--ease);
}
.status-search-results.show{display:block;max-height:340px;opacity:1;transform:translateY(0);}
.status-search-results a{
  display:flex;align-items:center;gap:10px;padding:11px 16px;border-radius:10px;
  font-size:14.5px;font-weight:700;color:var(--text);
  transition:background .2s var(--ease), transform .2s var(--ease), padding-left .2s var(--ease);
}
.status-search-results a:hover{background:var(--bg);transform:translateX(4px);}
.status-search-results a i{color:var(--coral);font-size:13.5px}
.status-search-empty{font-size:14px;font-weight:600;color:var(--ink);padding:6px 16px}

/* coming-soon eyebrow */
.tn-eyebrow{position:relative;}
.status-shell .tn-eyebrow{
  display:inline-flex;align-items:center;gap:8px;font-weight:800;
  box-shadow:0 0 0 0 color-mix(in srgb, var(--coral) 40%, transparent);
  animation:eyebrowGlow 2.4s ease-in-out infinite;
}
@keyframes eyebrowGlow{
  0%,100%{box-shadow:0 0 0 0 color-mix(in srgb, var(--coral) 35%, transparent);}
  50%{box-shadow:0 0 0 8px color-mix(in srgb, var(--coral) 0%, transparent);}
}

/* coming-soon countdown */
.status-countdown{display:flex;gap:14px;justify-content:center;margin:36px 0 8px;flex-wrap:wrap}
.status-countdown div{
  min-width:84px;padding:16px 10px;border-radius:14px;
  background:var(--surface);border:1px solid var(--line);
  box-shadow:0 16px 34px rgba(0,0,0,.08);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.status-countdown div:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(0,0,0,.14);}
.status-countdown strong{
  display:block;font-family:var(--font-display);font-size:32px;font-weight:700;
  color:var(--text);
  animation:digitPulse 1s var(--ease) infinite;
}
@keyframes digitPulse{0%,80%,100%{transform:scale(1);}88%{transform:scale(1.08);}}
.status-countdown span{display:block;margin-top:4px;font-size:14px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--coral)}

.status-progress{max-width:420px;margin:34px auto 0}
.status-progress-top{display:flex;justify-content:space-between;font-size:13.5px;font-weight:700;color:var(--ink);margin-bottom:8px}
.status-progress-track{height:10px;border-radius:999px;background:var(--line);overflow:hidden;position:relative;}
.status-progress-fill{
  display:block;height:100%;width:0%;border-radius:999px;
  background:linear-gradient(90deg,var(--coral),var(--gold));
  box-shadow:0 0 14px 1px color-mix(in srgb, var(--coral) 45%, transparent);
  transition:width 1.4s var(--ease);
  position:relative;overflow:hidden;
}
.status-progress-fill::after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(115deg, rgba(255,255,255,.35) 0 10px, transparent 10px 20px);
  background-size:200% 100%;
  animation:progressShimmer 1.4s linear infinite;
}
@keyframes progressShimmer{to{background-position:-40px 0;}}

.status-notify{margin-top:34px;max-width:420px;margin-inline:auto}
.status-notify-box{display:flex;gap:10px}
.status-notify-box input{flex:1;padding:13px 16px;border-radius:999px;border:1.5px solid var(--line);background:var(--bg);font-size:15px;font-weight:600;color:var(--text);outline:none;transition:border-color .2s var(--ease), box-shadow .2s var(--ease)}
.status-notify-box input:focus{border-color:var(--coral);box-shadow:0 0 0 4px color-mix(in srgb, var(--coral) 16%, transparent);}
.status-notify-box .btn{position:relative;overflow:hidden;}
.status-notify-note{margin-top:10px;font-size:13.5px;font-weight:600;color:var(--ink);}
.status-notify-success{
  display:none;margin-top:14px;padding:12px 16px;border-radius:12px;
  background:rgba(46,140,90,.12);color:#1F6E44;font-size:14.5px;font-weight:700;
  align-items:center;gap:8px;
}
.status-notify-success.show{display:flex;animation:successPopAuth .5s var(--ease);}

/* ---------- AUTH FORM SHELL (login / signup) ---------- */
.form-section{position:relative;}
.form-shell{
  position:relative;transition:box-shadow .4s var(--ease), transform .4s var(--ease);
}
.form-shell:hover{box-shadow:0 40px 90px rgba(43,23,16,.18);}
.form-visual{overflow:hidden;}
.form-visual img{transition:transform 6s var(--ease);}
.form-shell:hover .form-visual img{transform:scale(1.08);}
.form-visual::after{
  background:linear-gradient(0deg, rgba(10,15,12,.94) 0%, rgba(10,15,12,.72) 38%, rgba(10,15,12,.28) 65%, rgba(10,15,12,.05) 85%);
}
.form-visual-copy{padding:40px;}
.form-visual-copy h3{font-weight:800;font-size:1.7rem;text-shadow:0 3px 14px rgba(0,0,0,.55);}
.fv-badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 16px;border-radius:999px;margin-bottom:16px;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.4);
  color:#fff;font-size:14px;font-weight:800;letter-spacing:.03em;
  backdrop-filter:blur(6px);
}
.fv-points{margin-top:18px;display:flex;flex-direction:column;gap:11px;}
.fv-points li{
  display:flex;align-items:center;gap:11px;
  font-size:15px;font-weight:700;color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.55);
}
.fv-points li i{
  flex:none;width:22px;height:22px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb, var(--gold) 55%, transparent);
  color:#1a1f1c;font-size:11px;
}
.form-panel{position:relative;}
.fp-eyebrow{
  display:inline-block;font-size:14px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--coral);margin-bottom:10px;
}
.form-panel h2{font-weight:700;font-size:calc(var(--fs-h3) + 2px);}
.form-panel > p{margin-top:10px;color:var(--ink);font-weight:600;font-size:14.5px;}
.form-panel > p a{color:var(--coral);font-weight:800;}

/* divider + secondary switch button */
.form-divider{display:flex;align-items:center;gap:14px;margin:22px 0;color:var(--text-soft);font-size:14px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;}
.form-divider::before,.form-divider::after{content:"";flex:1;height:1px;background:var(--line);}
.btn-switch{width:100%;justify-content:center;position:relative;overflow:hidden;}
.btn-switch::after{
  content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(115deg, transparent, rgba(0,0,0,.12), transparent);
  transform:skewX(-20deg);transition:left .6s var(--ease);
}
.btn-switch:hover::after{left:130%;}

.field label{font-size:14px;font-weight:800;color:var(--text);}
.field input,.field select,.field textarea{
  font-weight:600;
  transition:border-color .2s var(--ease), box-shadow .25s var(--ease), transform .2s var(--ease);
}
.field input:focus,.field select:focus,.field textarea:focus{
  box-shadow:0 0 0 4px color-mix(in srgb, var(--coral) 16%, transparent);
  transform:translateY(-1px);
}
.field-error{
  font-size:14px;color:#D93B2B;font-weight:700;min-height:17px;
  display:none;
}
.field.has-error .field-error{display:block;animation:shakeErr .35s var(--ease);}
@keyframes shakeErr{0%,100%{transform:translateX(0);}30%{transform:translateX(-4px);}60%{transform:translateX(4px);}}
.form-note{margin-top:16px;font-size:13.5px;font-weight:600;color:var(--ink);text-align:center;}
.form-success{
  font-size:14.5px;font-weight:700;
  animation:none;
}
.form-success.show{animation:successPopAuth .5s var(--ease);}
@keyframes successPopAuth{
  0%{opacity:0;transform:scale(.85) translateY(6px);}
  60%{opacity:1;transform:scale(1.03) translateY(0);}
  100%{opacity:1;transform:scale(1) translateY(0);}
}

/* ---------- PASSWORD FIELD (show / hide) ---------- */
.field-password{position:relative}
.field-password input{padding-right:44px}
.field-eye{
  position:absolute;right:6px;top:50%;transform:translateY(0);
  width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--text-soft);cursor:pointer;background:transparent;
  transition:background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.field-password label + .field-eye,
.field-password{display:flex;flex-direction:column;position:relative}
.field-password .field-eye{top:38px}
.field-password .field-eye:hover{background:var(--bg);color:var(--coral);transform:translateY(-50%) scale(1.1);}

/* password strength meter */
.pw-strength{margin-top:9px}
.pw-strength-track{display:flex;gap:5px}
.pw-strength-track span{flex:1;height:6px;border-radius:4px;background:var(--line);transition:background .35s var(--ease), transform .35s var(--ease);}
.pw-strength[data-level="1"] .pw-strength-track span:nth-child(1){background:#D93B2B}
.pw-strength[data-level="2"] .pw-strength-track span:nth-child(-n+2){background:#E0A030}
.pw-strength[data-level="3"] .pw-strength-track span:nth-child(-n+3){background:#4C9A5D}
.pw-strength[data-level="4"] .pw-strength-track span{background:#1F8A4C;animation:strengthPulse .8s var(--ease);}
@keyframes strengthPulse{0%{transform:scaleY(.4);}100%{transform:scaleY(1);}}
.pw-strength-label{display:block;margin-top:6px;font-size:14px;font-weight:700;color:var(--ink);}

/* signup extra bits */
.field-check{display:flex;align-items:flex-start;gap:10px;font-size:14px;font-weight:600;color:var(--ink);line-height:1.5}
.field-check input{margin-top:3px;accent-color:var(--coral);width:16px;height:16px;}
.field-check a{color:var(--coral);font-weight:700}

@keyframes tnSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}

/* ---------- entrance animations (no scroll-lib needed on these short pages) ---------- */
@keyframes fadeUpIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeInSoft{from{opacity:0}to{opacity:1}}
@keyframes popIn{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.anim-in{opacity:0;animation:fadeUpIn .7s var(--ease) forwards}
.anim-pop{opacity:0;animation:popIn .6s var(--ease) forwards}
.anim-fade{opacity:0;animation:fadeInSoft .9s ease forwards}
.anim-in.d1,.anim-pop.d1,.anim-fade.d1{animation-delay:.06s}
.anim-in.d2,.anim-pop.d2,.anim-fade.d2{animation-delay:.14s}
.anim-in.d3,.anim-pop.d3,.anim-fade.d3{animation-delay:.22s}
.anim-in.d4,.anim-pop.d4,.anim-fade.d4{animation-delay:.3s}
.anim-in.d5,.anim-pop.d5,.anim-fade.d5{animation-delay:.38s}
.anim-in.d6,.anim-pop.d6,.anim-fade.d6{animation-delay:.46s}
.status-icon{animation:popIn .6s var(--ease) .1s both, floatY 3.4s ease-in-out 1s infinite}
.form-visual{animation:fadeInSoft 1s ease both}
@media (prefers-reduced-motion:reduce){
  .anim-in,.anim-pop,.anim-fade,.status-icon,.form-visual{animation:none;opacity:1}
  .status-code,.status-ring,.status-ring::after,.status-countdown strong,.status-progress-fill::after,.deco-float,.status-shell{animation:none;}
}

@media(max-width:600px){
  .status-shell{padding:40px 24px;}
  .status-countdown div{min-width:70px;padding:12px 8px}
  .status-countdown strong{font-size:24px}
  .status-notify-box{flex-direction:column}
}

/* =========================================================
   DARK MODE — stronger, denser text + richer glow accents
   ========================================================= */
html.dark .mini-topbar::after{opacity:.55;}
html.dark .bg-blobs span{opacity:.22;}
html.dark .deco-float{background:color-mix(in srgb, var(--surface) 70%, transparent);box-shadow:0 14px 30px rgba(0,0,0,.4);}
html.dark .status-shell{
  background:color-mix(in srgb, var(--surface) 78%, transparent);
  box-shadow:0 30px 80px rgba(0,0,0,.45);
}
html.dark .status-shell:hover{box-shadow:0 40px 100px rgba(0,0,0,.55);}
html.dark .status-lead,
html.dark .form-panel > p,
html.dark .form-note,
html.dark .status-notify-note,
html.dark .pw-strength-label,
html.dark .field-check,
html.dark .status-search-empty,
html.dark .status-progress-top{
  color:rgba(245,241,231,.94);
  font-weight:700;
}
html.dark .status-code{
  background:linear-gradient(100deg, var(--text) 30%, var(--gold) 55%, var(--coral) 75%, var(--text) 90%);
  background-size:260% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
}
html.dark .field label{color:#fff;font-weight:800;}
html.dark .field input,html.dark .field select,html.dark .field textarea{font-weight:700;}
html.dark .status-search-box input,html.dark .status-notify-box input{font-weight:700;}
html.dark .status-search-results a{color:#fff;font-weight:800;}
html.dark .status-countdown div{background:#1D2923;border-color:var(--line);box-shadow:0 16px 34px rgba(0,0,0,.4);}
html.dark .status-countdown strong{color:#fff;}
html.dark .status-icon{background:color-mix(in srgb, var(--gold) 18%, transparent);color:var(--gold);}
html.dark .status-icon::before{border-color:color-mix(in srgb, var(--gold) 45%, transparent);}
html.dark .status-ring{background:conic-gradient(from 0deg, color-mix(in srgb, var(--gold) 34%, transparent), transparent 20%, transparent 80%, color-mix(in srgb, var(--coral) 34%, transparent));}
html.dark .status-notify-success{background:rgba(46,140,90,.22);color:#8FDCB0;}
html.dark .form-success{color:#8FDCB0;background:rgba(46,140,90,.18) !important;}


/* =========================================================
   LOOM & LORE — FINAL LIGHT-MODE VISIBILITY CORRECTIONS
   Requested page-specific fixes only.
   ========================================================= */

/* 01 — ABOUT US
   Keep readable body/content typography above 14px in every section. */
main.about-redesign-page section p,
main.about-redesign-page section li{
  font-size:16px !important;
}

/* 02 — TURNAROUND / SECTION 7
   The page-wide light-mode paragraph/strong rules were overriding
   the dark consultation hub text. Keep this dark section readable. */
html:not(.dark) main.tn-redesign-page .tn-hub-s7 .tn-stat-label,
html:not(.dark) main.tn-redesign-page .tn-hub-s7 .tn-quote-text,
html:not(.dark) main.tn-redesign-page .tn-hub-s7 .tn-author-info strong{
  color:#fff !important;
}

html:not(.dark) main.tn-redesign-page .tn-hub-s7 .tn-author-info span,
html:not(.dark) main.tn-redesign-page .tn-hub-s7 .tn-stat-num,
html:not(.dark) main.tn-redesign-page .tn-hub-s7 .tn-quote-icon{
  color:var(--gold) !important;
}

html:not(.dark) main.tn-redesign-page .tn-hub-s7 .tn-client-quote-box{
  color:#fff !important;
}

/* 03 — CONTACT / SECTION 5
   Restore high-contrast white type over the photographic dark section. */
html:not(.dark) main.contact-redesign-page .ct-experience-s5 .ct-section-title,
html:not(.dark) main.contact-redesign-page .ct-experience-s5 .ct-section-desc,
html:not(.dark) main.contact-redesign-page .ct-experience-s5 .ct-commit-card h3,
html:not(.dark) main.contact-redesign-page .ct-experience-s5 .ct-commit-card p{
  color:#fff !important;
}

html:not(.dark) main.contact-redesign-page .ct-experience-s5 .ct-badge-pill{
  color:var(--gold) !important;
}

/* 04 — ALTERATIONS / SECTIONS 4 & 6
   These sections intentionally use a deep green background, so all
   primary copy must stay light in light mode. */
html:not(.dark) main.alterations-page .alt-pricing .alt-index,
html:not(.dark) main.alterations-page .alt-pricing h2,
html:not(.dark) main.alterations-page .alt-pricing p,
html:not(.dark) main.alterations-page .alt-pricing .alt-line-cta,
html:not(.dark) main.alterations-page .alt-pricing .price-name strong,
html:not(.dark) main.alterations-page .alt-pricing .price-name small,
html:not(.dark) main.alterations-page .alt-pricing .price-more,
html:not(.dark) main.alterations-page .alt-pricing .alt-price-row{
  color:#fff !important;
}

html:not(.dark) main.alterations-page .alt-pricing .price-num,
html:not(.dark) main.alterations-page .alt-pricing .price-value,
html:not(.dark) main.alterations-page .alt-pricing .alt-price-row > i,
html:not(.dark) main.alterations-page .alt-pricing h2 em{
  color:#d7bd7a !important;
}

html:not(.dark) main.alterations-page .alt-process .alt-index,
html:not(.dark) main.alterations-page .alt-process h2,
html:not(.dark) main.alterations-page .alt-process .alt-step strong,
html:not(.dark) main.alterations-page .alt-process .alt-step p{
  color:#fff !important;
}

html:not(.dark) main.alterations-page .alt-process h2 em,
html:not(.dark) main.alterations-page .alt-process .alt-step b{
  color:#d7bd7a !important;
}


/* =========================================================
   AUTH PAGES — FINAL LIGHT/DARK VISIBILITY + HOME BUTTON
   ========================================================= */
body.aux-page .form-section{
  color:var(--text);
}
body.aux-page .form-panel{
  background:#fbfaf5 !important;
  color:#1d2923 !important;
}
body.aux-page .form-panel h2{
  color:#1d2923 !important;
  font-weight:800 !important;
}
body.aux-page .form-panel > p,
body.aux-page .form-note,
body.aux-page .form-divider,
body.aux-page .pw-strength-label,
body.aux-page .field-check{
  color:#33433c !important;
  opacity:1 !important;
}
body.aux-page .fp-eyebrow{color:#3f7e61 !important;font-weight:900 !important;}
body.aux-page .field label{color:#1d2923 !important;font-weight:800 !important;}
body.aux-page .field input,
body.aux-page .field select,
body.aux-page .field textarea{
  background:#f7f5ee !important;
  color:#1d2923 !important;
  border-color:#bfc7c1 !important;
  font-weight:650 !important;
}
body.aux-page .field input::placeholder,
body.aux-page .field textarea::placeholder{color:#68736e !important;opacity:1 !important;}
body.aux-page .field-eye{color:#46564f !important;}
body.aux-page .form-divider::before,
body.aux-page .form-divider::after{background:#c7cec8 !important;}
body.aux-page .btn-switch,
body.aux-page .btn-home{
  color:#24362f !important;
  border-color:#31483e !important;
  background:transparent !important;
  min-height:52px;
}
body.aux-page .btn-switch:hover,
body.aux-page .btn-home:hover{
  background:#1d2923 !important;
  color:#fff !important;
}
body.aux-page .btn-home{margin-top:12px;}

/* Keep the image-side copy readable in both themes. */
body.aux-page .form-visual-copy,
body.aux-page .form-visual-copy h3,
body.aux-page .fv-points li,
body.aux-page .fv-badge{color:#fff !important;}

html.dark body.aux-page .form-panel{
  background:#1d2923 !important;
  color:#f5f1e7 !important;
}
html.dark body.aux-page .form-panel h2,
html.dark body.aux-page .form-panel > p,
html.dark body.aux-page .form-note,
html.dark body.aux-page .form-divider,
html.dark body.aux-page .pw-strength-label,
html.dark body.aux-page .field-check{
  color:#f5f1e7 !important;
}
html.dark body.aux-page .fp-eyebrow{color:#8fcca7 !important;}
html.dark body.aux-page .field label{color:#fff !important;}
html.dark body.aux-page .field input,
html.dark body.aux-page .field select,
html.dark body.aux-page .field textarea{
  background:#101613 !important;
  color:#fff !important;
  border-color:rgba(245,241,231,.25) !important;
}
html.dark body.aux-page .field input::placeholder,
html.dark body.aux-page .field textarea::placeholder{color:#b9c8c1 !important;opacity:1 !important;}
html.dark body.aux-page .field-eye{color:#d9e6df !important;}
html.dark body.aux-page .form-divider::before,
html.dark body.aux-page .form-divider::after{background:rgba(245,241,231,.22) !important;}
html.dark body.aux-page .btn-switch,
html.dark body.aux-page .btn-home{
  color:#f5f1e7 !important;
  border-color:rgba(245,241,231,.42) !important;
  background:transparent !important;
}
html.dark body.aux-page .btn-switch:hover,
html.dark body.aux-page .btn-home:hover{
  background:#f5f1e7 !important;
  color:#101613 !important;
}

@media(max-width:600px){
  body.aux-page .form-section{padding:55px 0 80px !important;}
  body.aux-page .form-shell{width:100%;max-width:100% !important;}
  body.aux-page .form-panel{padding:32px 20px !important;}
  body.aux-page .form-visual-copy{padding:28px 22px !important;}
  body.aux-page .form-visual{min-height:300px !important;}
  body.aux-page .form-panel h2{font-size:clamp(28px,8vw,38px) !important;line-height:1.08 !important;}
  body.aux-page .form-panel > p{font-size:15px !important;line-height:1.55 !important;}
  body.aux-page .field label,
  body.aux-page .field input,
  body.aux-page .field select,
  body.aux-page .field textarea,
  body.aux-page .form-note,
  body.aux-page .field-check{font-size:14px !important;}
}

/* =========================================================
   AUTH PAGES — FINAL HIGH-CONTRAST LIGHT + DARK MODE FIX
   Login / Signup only
   ========================================================= */
body.aux-page .form-visual-copy,
body.aux-page .form-visual-copy h3,
body.aux-page .form-visual-copy .fv-badge,
body.aux-page .form-visual-copy .fv-points li,
body.aux-page .form-visual-copy .fv-points li i{
  opacity:1 !important;
  visibility:visible !important;
}
body.aux-page .form-visual::after{
  background:linear-gradient(0deg,rgba(5,12,9,.82) 0%,rgba(5,12,9,.58) 48%,rgba(5,12,9,.18) 100%) !important;
}
body.aux-page .form-visual-copy h3{
  color:#fff !important;
  text-shadow:0 3px 16px rgba(0,0,0,.75) !important;
}
body.aux-page .form-visual-copy .fv-points li{
  color:#fff !important;
  text-shadow:0 2px 12px rgba(0,0,0,.75) !important;
}
body.aux-page .form-visual-copy .fv-badge{
  color:#fff !important;
  background:rgba(10,22,17,.58) !important;
  border-color:rgba(255,255,255,.48) !important;
}
body.aux-page .form-panel h2,
body.aux-page .form-panel > p,
body.aux-page .form-panel .form-note,
body.aux-page .form-panel .form-divider,
body.aux-page .form-panel .field label,
body.aux-page .form-panel .field-check,
body.aux-page .form-panel .pw-strength-label{
  opacity:1 !important;
  visibility:visible !important;
}

/* Light mode: deliberately dark typography on the cream panel. */
html:not(.dark) body.aux-page .form-panel{
  background:#fbfaf5 !important;
  color:#17231e !important;
}
html:not(.dark) body.aux-page .form-panel h2{color:#14221c !important;}
html:not(.dark) body.aux-page .form-panel > p,
html:not(.dark) body.aux-page .form-panel .form-note,
html:not(.dark) body.aux-page .form-panel .form-divider,
html:not(.dark) body.aux-page .form-panel .field-check,
html:not(.dark) body.aux-page .form-panel .pw-strength-label{color:#263a31 !important;}
html:not(.dark) body.aux-page .form-panel .field label{color:#14221c !important;}
html:not(.dark) body.aux-page .form-panel .field input,
html:not(.dark) body.aux-page .form-panel .field select,
html:not(.dark) body.aux-page .form-panel .field textarea{
  color:#17231e !important;
  background:#f5f3eb !important;
  border-color:#aeb9b2 !important;
}
html:not(.dark) body.aux-page .form-panel .field input::placeholder,
html:not(.dark) body.aux-page .form-panel .field textarea::placeholder{color:#68756f !important;opacity:1 !important;}
html:not(.dark) body.aux-page .form-panel .field-eye{color:#30453b !important;}
html:not(.dark) body.aux-page .form-panel .btn-switch,
html:not(.dark) body.aux-page .form-panel .btn-home{
  color:#1b3027 !important;
  border-color:#31483e !important;
  font-weight:800 !important;
}
html:not(.dark) body.aux-page .form-panel .btn-switch:hover,
html:not(.dark) body.aux-page .form-panel .btn-home:hover{
  background:#1b3027 !important;
  color:#fff !important;
}

/* Dark mode: deep green panel + warm white typography. */
html.dark body.aux-page{
  background:#0c1712 !important;
  color:#f5f1e7 !important;
}
html.dark body.aux-page .form-panel{
  background:#14231d !important;
  color:#f5f1e7 !important;
  border-left:1px solid rgba(190,220,202,.10);
}
html.dark body.aux-page .form-panel h2{
  color:#fffdf7 !important;
  font-weight:800 !important;
}
html.dark body.aux-page .form-panel > p,
html.dark body.aux-page .form-panel .form-note,
html.dark body.aux-page .form-panel .form-divider,
html.dark body.aux-page .form-panel .field-check,
html.dark body.aux-page .form-panel .pw-strength-label{
  color:#edf5ef !important;
  font-weight:700 !important;
}
html.dark body.aux-page .form-panel .field label{color:#fff !important;font-weight:800 !important;}
html.dark body.aux-page .form-panel .field input,
html.dark body.aux-page .form-panel .field select,
html.dark body.aux-page .form-panel .field textarea{
  background:#0c1511 !important;
  color:#fff !important;
  border-color:rgba(220,240,227,.30) !important;
  font-weight:700 !important;
}
html.dark body.aux-page .form-panel .field input::placeholder,
html.dark body.aux-page .form-panel .field textarea::placeholder{color:#b9c9c1 !important;opacity:1 !important;}
html.dark body.aux-page .form-panel .field-eye{color:#e2eee7 !important;}
html.dark body.aux-page .form-panel .form-divider::before,
html.dark body.aux-page .form-panel .form-divider::after{background:rgba(235,245,239,.30) !important;}
html.dark body.aux-page .form-panel .btn-switch,
html.dark body.aux-page .form-panel .btn-home{
  color:#fffdf7 !important;
  border-color:rgba(235,245,239,.48) !important;
  background:rgba(255,255,255,.015) !important;
  font-weight:800 !important;
}
html.dark body.aux-page .form-panel .btn-switch:hover,
html.dark body.aux-page .form-panel .btn-home:hover{
  background:#f5f1e7 !important;
  color:#0c1712 !important;
}
html.dark body.aux-page .form-panel .form-success{color:#a9e4bd !important;}

/* Make the Home button clearly separated from the account switch action. */
body.aux-page .form-panel .btn-home{
  display:flex !important;
  width:max-content !important;
  min-width:182px;
  align-items:center;
  justify-content:center;
  gap:9px;
  margin-top:12px !important;
}

@media(max-width:600px){
  body.aux-page .form-panel .btn-switch{width:100% !important;}
  body.aux-page .form-panel .btn-home{width:100% !important;max-width:220px;}
  body.aux-page .form-visual-copy h3{font-size:1.55rem !important;}
  body.aux-page .form-visual-copy .fv-points li{font-size:14px !important;}
}


/* =========================================================
   AUTH VISUAL COPY — STRONG, CLEAR TEXT FOR LOGIN / SIGNUP
   ========================================================= */
body.aux-page .form-visual-copy{
  z-index:5 !important;
  opacity:1 !important;
  visibility:visible !important;
  padding:42px 40px !important;
}
body.aux-page .form-visual-copy h3{
  color:#fff !important;
  font-size:clamp(1.7rem,2.4vw,2.15rem) !important;
  line-height:1.12 !important;
  font-weight:900 !important;
  letter-spacing:-.02em !important;
  text-shadow:0 3px 18px rgba(0,0,0,.9),0 1px 3px rgba(0,0,0,.95) !important;
  opacity:1 !important;
  visibility:visible !important;
}
body.aux-page .form-visual-copy .fv-points{
  margin-top:20px !important;
  gap:13px !important;
  opacity:1 !important;
  visibility:visible !important;
}
body.aux-page .form-visual-copy .fv-points li{
  color:#fff !important;
  font-size:15.5px !important;
  line-height:1.45 !important;
  font-weight:800 !important;
  text-shadow:0 2px 14px rgba(0,0,0,.95),0 1px 3px rgba(0,0,0,.9) !important;
  opacity:1 !important;
  visibility:visible !important;
}
body.aux-page .form-visual-copy .fv-points li i{
  width:25px !important;
  height:25px !important;
  background:#a9d9bc !important;
  color:#102119 !important;
  font-size:11px !important;
  font-weight:900 !important;
  box-shadow:0 0 0 3px rgba(169,217,188,.16),0 5px 16px rgba(0,0,0,.35) !important;
}
body.aux-page .form-visual::after{
  z-index:2 !important;
  background:linear-gradient(0deg,rgba(4,11,8,.88) 0%,rgba(4,11,8,.66) 42%,rgba(4,11,8,.30) 72%,rgba(4,11,8,.08) 100%) !important;
}
body.aux-page .form-visual-copy .fv-badge{
  color:#fff !important;
  background:rgba(8,24,17,.72) !important;
  border:1px solid rgba(255,255,255,.62) !important;
  box-shadow:0 6px 18px rgba(0,0,0,.3) !important;
  font-weight:900 !important;
  opacity:1 !important;
  visibility:visible !important;
}
@media(max-width:600px){
  body.aux-page .form-visual-copy{padding:30px 22px !important;}
  body.aux-page .form-visual-copy h3{font-size:1.7rem !important;}
  body.aux-page .form-visual-copy .fv-points li{font-size:14.5px !important;}
}