/* ============ Ron & Rich — bespoke ============ */
:root {
  --cream: #f2ecdf;
  --cream-2: #ece4d3;
  --ink: #241d18;
  --ink-soft: #4c433c;
  --dark: #14100d;
  --dark-2: #1d1815;
  --wine: #8c2f2f;
  --gold: #b9925c;
  --wine-deep: #221813;
  --serif: "Playfair Display", "Cormorant Garamond", serif;     /* headings */
  --serif-2: "Cormorant Garamond", serif;                        /* numerals, quotes, prices */
  --logo: "Cormorant Garamond", serif;                            /* the Ron & Rich wordmark only */
  --sans: "Inter", "Helvetica Neue", Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.65;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(2rem, 4.2vw, 3.6rem); line-height: 1.12; letter-spacing: -0.01em; }
h3 { font-family: var(--serif); font-weight: 500; }

.eyebrow {
  font-size: 0.72rem; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--wine); font-weight: 400; margin-bottom: 1.4rem;
}
.eyebrow--line::after { content: ""; display: block; width: 34px; height: 2px; background: var(--wine); margin-top: 0.9rem; }
.eyebrow--light { color: var(--gold); }
.eyebrow--light::after { background: var(--gold); }

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(36px); transition: opacity 1s cubic-bezier(.2,.6,.2,1), transform 1s cubic-bezier(.2,.6,.2,1); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal--d2 { transition-delay: .18s; }
.reveal--d3 { transition-delay: .32s; }
.reveal--d4 { transition-delay: .46s; }
.reveal--fade { transform: none; } /* opacity only, for blocks whose position is measured in JS */

/* ============ NAV ============ */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  padding: 0 clamp(1.2rem, 4vw, 3.2rem);
  transition: background .5s, box-shadow .5s, transform .5s;
  color: #f5f1e8;
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.nav__brand { display: flex; flex-direction: column; line-height: 1; }
.nav__brand-name { font-family: var(--logo); font-size: 1.28rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 500; }
.nav__brand-sub { font-family: var(--logo); font-style: italic; font-size: 0.8rem; letter-spacing: 0.4em; margin-top: 3px; opacity: .8; text-align: center; }
.nav__links { display: flex; gap: 2rem; list-style: none; }
.nav__links > li { position: relative; }
.nav__links > li > a { display: inline-block; font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase; position: relative; padding: 28px 0; }
.nav__links > li > a::after { content: ""; position: absolute; left: 0; bottom: 22px; height: 1px; width: 0; background: currentColor; transition: width .35s; }
.nav__links > li:hover > a::after, .nav__links > li:focus-within > a::after { width: 100%; }
.nav__has-drop > a::before { content: ""; display: inline-block; width: 5px; height: 5px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg) translateY(-3px); margin-left: .55rem; float: right; margin-top: .3em; opacity: .7; }
.nav__drop {
  position: absolute; top: 100%; left: -1.6rem; padding-top: 0;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .35s, transform .35s, visibility 0s .35s;
}
.nav__links > li:hover .nav__drop, .nav__links > li:focus-within .nav__drop { opacity: 1; visibility: visible; transform: none; transition: opacity .35s, transform .35s, visibility 0s; }
.nav__drop-inner {
  display: grid; grid-template-columns: auto auto; gap: 0 3.2rem;
  background: rgba(20,16,13,.97); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.08); padding: 1.7rem 2rem 1.9rem; min-width: 480px;
  box-shadow: 0 30px 60px rgba(0,0,0,.35);
}
.nav__drop h5 { font-size: .6rem; letter-spacing: .32em; text-transform: uppercase; color: var(--gold); font-weight: 400; margin: 0 0 .7rem; }
.nav__drop h5 + h5, .nav__drop a + h5 { margin-top: 1.3rem; }
.nav__drop a { display: block; font-family: var(--serif-2); font-size: 1.02rem; letter-spacing: .02em; padding: .28rem 0; opacity: .82; transition: opacity .25s, transform .25s; white-space: nowrap; }
.nav__drop a:hover { opacity: 1; transform: translateX(4px); }
.nav__drop-all { margin-top: 1.1rem; font-family: var(--sans) !important; font-size: .66rem !important; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); }
.nav__cta {
  font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase;
  border: 1px solid currentColor; padding: 0.7em 1.6em; transition: background .35s, color .35s, border-color .35s;
}
.nav--solid { background: rgba(20, 16, 13, 0.92); backdrop-filter: blur(10px); box-shadow: 0 1px 0 rgba(255,255,255,.06); }
.nav__cta:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.nav__burger { display: none; background: none; border: 0; width: 34px; height: 30px; flex-direction: column; justify-content: center; gap: 7px; cursor: pointer; }
.nav__burger span { display: block; height: 1px; background: currentColor; transition: transform .35s; }
.mobile-menu {
  position: fixed; inset: 0; z-index: 99; background: var(--dark); color: var(--cream);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2rem;
  opacity: 0; pointer-events: none; transition: opacity .4s;
}
.mobile-menu.is-open { opacity: 1; pointer-events: auto; }
.mobile-menu { padding: 90px 1.6rem 2rem; justify-content: flex-start; gap: 1.2rem; overflow-y: auto; }
.mobile-menu > a { font-family: var(--serif); font-size: 1.6rem; }
.mobile-menu__group { width: 100%; max-width: 420px; border-top: 1px solid rgba(242,236,223,.14); border-bottom: 1px solid rgba(242,236,223,.14); padding: 1.2rem 0 1.3rem; margin-bottom: .6rem; }
.mobile-menu__group > span { display: block; font-size: .62rem; letter-spacing: .32em; text-transform: uppercase; color: var(--gold); margin-bottom: .8rem; }
.mobile-menu__group nav { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem 1.2rem; }
.mobile-menu__group nav a { font-family: var(--serif-2); font-size: 1.08rem; opacity: .88; }
.mobile-menu__group nav a.is-all { grid-column: 1 / -1; font-family: var(--sans); font-size: .66rem; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); margin-top: .6rem; }
.mobile-menu__cta { font-family: var(--sans) !important; font-size: 0.8rem !important; letter-spacing: .24em; text-transform: uppercase; border: 1px solid var(--cream); padding: .9em 2em; }

/* ============ HERO ============ */
.hero { height: 100vh; position: relative; background: var(--dark); }
.hero__sticky { position: relative; height: 100%; overflow: hidden; }
.hero__video, .hero__still {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
/* the still is the video's own last frame, swapped in at the end so it stays sharp */
.hero__still { opacity: 0; transition: opacity .25s linear; }
.hero__still.is-shown { opacity: 1; }
.hero.is-played .hero__shade { opacity: 0; }
.hero__shade { transition: opacity 1.4s ease; }

.hero__mark { transition: opacity 1.2s ease, transform 1.2s ease; }
.hero.is-playing .hero__mark, .hero.is-played .hero__mark { opacity: 0; transform: translateY(-60px); pointer-events: none; }
.hero__shade { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(0,0,0,.12), rgba(0,0,0,.42)); }
.hero__mark {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #f7f3ea; text-align: center; padding: 0 1rem;
}
.hero__wordmark {
  font-family: var(--logo); font-weight: 500; text-transform: uppercase;
  font-size: clamp(1.7rem, 2.8vw, 2.7rem); letter-spacing: 0.22em; margin-left: 0.22em; /* balance tracking */
  text-shadow: 0 2px 30px rgba(0,0,0,.45);
}
.hero__wordmark .amp { font-size: 0.8em; }
.hero__script { font-family: var(--logo); font-style: italic; font-size: clamp(0.8rem, 1.1vw, 1rem); letter-spacing: 0.34em; margin: 0.15rem 0 0 0.34em; opacity: .92; }

/* ============ STATEMENT ============ */
.statement { max-width: 880px; margin: 0 auto; padding: clamp(6rem, 12vw, 10rem) 1.6rem; text-align: center; }
.statement h2 { font-size: clamp(1.7rem, 3.4vw, 2.7rem); font-weight: 400; }
.statement__body { margin-top: 2rem; color: var(--ink-soft); max-width: 620px; margin-inline: auto; }

/* ============ WARDROBE ============ */
.wardrobe {
  display: grid; grid-template-columns: minmax(300px, 420px) 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  padding: clamp(4rem, 8vw, 7rem) clamp(1.2rem, 4vw, 4rem);
  align-items: center; min-height: 100vh;
}
.wardrobe__title { min-height: 3.4em; transition: opacity .4s; }
.wardrobe__sub { margin-top: 1.6rem; color: var(--ink-soft); max-width: 34ch; min-height: 5.2em; transition: opacity .4s; }
.wardrobe__rail.is-fading .wardrobe__title, .wardrobe__rail.is-fading .wardrobe__sub { opacity: 0; }
.wardrobe__counter { margin-top: 2.4rem; font-size: .9rem; letter-spacing: .1em; color: var(--ink-soft); }
.wardrobe__counter span { color: var(--wine); font-size: 1.3rem; }
.wardrobe__progress { width: 1px; height: 120px; background: rgba(36,29,24,.18); margin-top: 1rem; position: relative; }
.wardrobe__progress i { position: absolute; top: 0; left: 0; width: 100%; height: 16.6%; background: var(--wine); transition: transform .5s cubic-bezier(.6,0,.2,1); }

.wardrobe__cards { display: flex; gap: 14px; height: min(78vh, 820px); min-height: 540px; }
.wcard {
  position: relative; overflow: hidden; border-radius: 0; cursor: pointer;
  flex: 1; min-width: 0; background: var(--dark);
  transition: flex 0.9s cubic-bezier(.6,.05,.15,1);
}
.wcard.is-active { flex: 7.5; cursor: default; }
.wcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .92; transition: transform 1.2s cubic-bezier(.3,.6,.2,1); }
.wcard.is-active img { transform: scale(1.03); }
.wcard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,8,6,.82) 0%, rgba(10,8,6,.12) 45%, rgba(10,8,6,.18) 100%); }
.wcard__num {
  position: absolute; top: 26px; left: 26px; z-index: 2; color: #f4efe5;
  font-size: .8rem; letter-spacing: .18em;
}
.wcard__num::after { content: ""; display: block; width: 22px; height: 2px; background: var(--wine); margin-top: 8px; }
.wcard__vtitle {
  position: absolute; z-index: 2; left: 50%; bottom: 34px; transform: translateX(-50%);
  writing-mode: vertical-rl; color: #f4efe5;
  font-size: clamp(1.15rem, 1.7vw, 1.7rem); font-weight: 400; letter-spacing: .12em; text-transform: uppercase;
  white-space: nowrap; opacity: 1; transition: opacity .45s .25s;
}
.wcard.is-active .wcard__vtitle { opacity: 0; transition-delay: 0s; }
.wcard__body {
  position: absolute; z-index: 2; left: clamp(1.4rem, 3vw, 3rem); right: clamp(1.4rem, 3vw, 3rem); bottom: clamp(1.4rem, 3vw, 2.6rem);
  color: #f4efe5; opacity: 0; transform: translateY(24px); transition: opacity .5s, transform .5s; pointer-events: none;
  min-width: 320px;
}
.wcard.is-active .wcard__body { opacity: 1; transform: none; transition-delay: .45s; pointer-events: auto; }
.wcard__body h3 { font-size: clamp(1.9rem, 3.4vw, 3rem); font-weight: 500; letter-spacing: .04em; text-transform: uppercase; font-family: var(--serif); }
.wcard__body p { margin-top: .7rem; font-size: .95rem; opacity: .9; max-width: 46ch; }
.wcard__tags {
  list-style: none; display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; margin-top: 1.3rem; padding-top: 1.1rem;
  border-top: 1px solid rgba(244,239,229,.28);
}
.wcard__tags li { font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.wcard__tags a { border-bottom: 1px solid transparent; transition: color .3s, border-color .3s; }
.wcard__tags a:hover { color: #fff; border-color: rgba(255,255,255,.5); }
.wcard__tags li + li::before { content: "·"; margin-right: 1.6rem; color: rgba(244,239,229,.5); }
.wcard__link { display: inline-flex; align-items: center; gap: .9rem; margin-top: 1.6rem; font-size: .72rem; letter-spacing: .26em; text-transform: uppercase; }
.wcard__link i { font-style: normal; color: var(--wine); transition: transform .35s; }
.wcard__link:hover i { transform: translateX(8px); }

/* ============ HERITAGE — legacy carousel ============ */
.heritage {
  position: relative; background: var(--wine-deep); color: #f2e9dc;
  padding: clamp(5rem, 9vw, 8rem) clamp(1.2rem, 4vw, 4rem) clamp(5rem, 9vw, 7.5rem); overflow: hidden;
}
.heritage::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(255,230,200,.07), transparent),
    radial-gradient(ellipse 80% 40% at 50% 100%, rgba(0,0,0,.4), transparent);
}
.heritage__head { position: relative; text-align: center; max-width: 760px; margin: 0 auto clamp(2.6rem, 5vw, 4rem); }
.heritage__head h2 { color: #f7f0e4; }

/* ornament: ◆——●  TEXT  ●——◆ */
.ornament { display: inline-flex; align-items: center; gap: 1.1rem; font-size: .68rem; letter-spacing: .34em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.4rem; font-weight: 400; }
.ornament span { margin-left: .34em; }
.ornament i { position: relative; width: 72px; height: 1px; background: linear-gradient(to right, var(--gold) 0 60%, rgba(185,146,92,.4)); }
.ornament i::before { content: ""; position: absolute; left: 0; top: 50%; width: 7px; height: 7px; background: var(--gold); transform: translate(0,-50%) rotate(45deg); }
.ornament i::after { content: ""; position: absolute; right: 0; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); transform: translateY(-50%); }
.ornament i + span + i { transform: scaleX(-1); }
.ornament--ink { color: var(--wine); }
.ornament--ink i { background: linear-gradient(to right, var(--wine) 0 60%, rgba(140,47,47,.4)); }
.ornament--ink i::before, .ornament--ink i::after { background: var(--wine); }

/* thread timeline: stitched centre line, scissors ride the tip */
.thread { position: relative; max-width: 1120px; margin: 0 auto; padding: 2rem 0 4rem; }
.thread__line {
  position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%);
  background: repeating-linear-gradient(to bottom, rgba(242,233,220,.16) 0 10px, transparent 10px 20px);
}
.thread__line i { position: absolute; inset: 0; height: 0; background: repeating-linear-gradient(to bottom, var(--gold) 0 10px, transparent 10px 20px); }
.thread__needle { position: absolute; left: 50%; top: 0; width: 30px; height: 48px; transform: translate(-50%, -10px); color: var(--gold); z-index: 3; filter: drop-shadow(0 2px 6px rgba(0,0,0,.45)); }
.shear { transform-box: view-box; transform-origin: 22px 30.5px; transition: transform .5s ease; }
.thread__needle.is-snipping .shear--a { animation: snipA .55s ease-in-out infinite; }
.thread__needle.is-snipping .shear--b { animation: snipB .55s ease-in-out infinite; }
@keyframes snipA { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-12deg); } }
@keyframes snipB { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(12deg); } }
.thread__knot { position: absolute; left: 50%; bottom: 0; width: 12px; height: 12px; background: var(--gold); transform: translateX(-50%) rotate(45deg); box-shadow: 0 0 0 6px rgba(185,146,92,.18); }

.stitch { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(3rem, 8vw, 7rem); align-items: center; margin-bottom: clamp(5rem, 9vw, 8rem); }
.stitch::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px;
  background: var(--wine-deep); border: 1.5px solid var(--gold); transform: translate(-50%, -50%) rotate(45deg) scale(0);
  transition: transform .5s cubic-bezier(.3,1.4,.4,1); z-index: 2;
}
.stitch.is-in::before { transform: translate(-50%, -50%) rotate(45deg) scale(1); }
.stitch__media { position: relative; margin: 11px; }
.stitch__media img { width: 100%; height: clamp(260px, 32vw, 380px); object-fit: cover; display: block; }
.lslide__frame { position: absolute; inset: -11px; border: 1px solid rgba(185,146,92,.85); opacity: 0; transition: opacity .6s .35s; pointer-events: none; }
.lslide__frame::before, .lslide__frame::after {
  content: ""; position: absolute; width: 11px; height: 11px; background: var(--wine-deep); border: 1px solid rgba(185,146,92,.85);
  transform: rotate(45deg);
}
.lslide__frame::before { left: -6px; top: -6px; }
.lslide__frame::after { right: -6px; bottom: -6px; }
.stitch.is-in .lslide__frame { opacity: 1; }

.stitch__text h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 400; letter-spacing: .04em; margin: 1rem 0 .8rem; color: #f7f0e4; }
.stitch__text p { color: rgba(242,233,220,.76); max-width: 46ch; }
.lyear { display: inline-flex; align-items: center; gap: 1.2rem; font-family: var(--serif-2); font-weight: 500; font-size: clamp(2.6rem, 6vw, 4.4rem); line-height: 1; color: var(--gold); }
.lyear::before, .lyear::after { content: ""; width: 44px; height: 1px; background: linear-gradient(to right, transparent, var(--gold)); }
.lyear::after { background: linear-gradient(to left, transparent, var(--gold)); }
.lyear--text { font-size: clamp(1.9rem, 4vw, 3rem); font-style: italic; font-weight: 400; }

.stitch--left .stitch__media { order: 1; }
.stitch--left .stitch__text { order: 2; padding-left: clamp(0rem, 2vw, 2rem); }
.stitch--right .stitch__media { order: 2; }
.stitch--right .stitch__text { order: 1; text-align: right; display: flex; flex-direction: column; align-items: flex-end; padding-right: clamp(0rem, 2vw, 2rem); }
.stitch--right .stitch__text p { text-align: right; }

.stitch__media, .stitch__text { opacity: 0; transition: opacity .9s cubic-bezier(.2,.6,.2,1), transform .9s cubic-bezier(.2,.6,.2,1); }
.stitch--left .stitch__media, .stitch--right .stitch__text { transform: translateX(-48px); }
.stitch--left .stitch__text, .stitch--right .stitch__media { transform: translateX(48px); }
.stitch.is-in .stitch__media, .stitch.is-in .stitch__text { opacity: 1; transform: none; }

/* ============ PROCESS ============ */
.process { background: var(--dark); color: #efe9dc; padding: clamp(5rem, 9vw, 8rem) clamp(1.2rem, 4vw, 4rem); }
.process__head { text-align: center; max-width: 640px; margin: 0 auto clamp(3.5rem, 6vw, 5rem); }
.process__head .eyebrow--line::after { margin-inline: auto; }
.process__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.6rem, 3vw, 3rem); max-width: 1240px; margin: 0 auto; }
.pstep { border-top: 1px solid rgba(239,233,220,.18); padding-top: 1.6rem; }
.pstep span { font-family: var(--serif); font-size: 1.1rem; color: var(--gold); font-style: italic; }
.pstep h3 { font-size: 1.25rem; margin: .8rem 0 .7rem; font-weight: 500; }
.pstep p { font-size: .9rem; opacity: .72; }
.process__cta { text-align: center; margin-top: clamp(3rem, 6vw, 5rem); }
.btn {
  display: inline-block; border: 1px solid var(--gold); color: var(--gold);
  font-size: .74rem; letter-spacing: .26em; text-transform: uppercase; padding: 1.1em 2.8em;
  transition: background .4s, color .4s;
}
.btn:hover { background: var(--gold); color: var(--dark); }
.btn--ink { border-color: var(--ink); color: var(--ink); }
.btn--ink:hover { background: var(--ink); color: var(--cream); }
.btn--cream { border-color: #f4efe5; color: #f4efe5; }
.btn--cream:hover { background: #f4efe5; color: var(--ink); }

/* ============ INSTAGRAM ============ */
.insta { padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 5rem); }
.insta__handle { padding: 0 clamp(1.4rem, 4vw, 4rem); margin-bottom: clamp(1.4rem, 2.5vw, 2.2rem); font-size: clamp(1.5rem, 2.6vw, 2.4rem); letter-spacing: .06em; }
.insta__handle a { text-transform: uppercase; transition: opacity .3s; }
.insta__handle i { font-style: italic; color: var(--gold); }
.insta__handle a:hover { opacity: .7; }
.insta__marquee { overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); }
.insta__track { display: flex; gap: 18px; width: max-content; animation: marquee 48s linear infinite; padding: 4px 0; }
.insta__marquee:hover .insta__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.ipost { position: relative; width: clamp(260px, 28vw, 380px); aspect-ratio: 4 / 5; flex-shrink: 0; overflow: hidden; border-radius: 0; }
.ipost img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2,.6,.2,1); }
.ipost:hover img { transform: scale(1.06); }
.ipost__ig { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(20,16,13,.45); opacity: 0; transition: opacity .4s; }
.ipost:hover .ipost__ig { opacity: 1; }
.ipost__ig::before {
  content: ""; width: 34px; height: 34px;
  border: 2px solid #f4efe5; border-radius: 0;
  background: radial-gradient(circle at center, transparent 7px, transparent 8px),
              radial-gradient(circle at center, #f4efe5 0 2px, transparent 3px) no-repeat 24px 3px;
  box-shadow: inset 0 0 0 0 transparent;
  position: relative;
}
.ipost__ig::after { content: ""; position: absolute; width: 16px; height: 16px; border: 2px solid #f4efe5; border-radius: 50%; }

/* ============ REVIEWS — split dual stream ============ */
.reviews { background: var(--dark-2); color: #efe9dc; padding: clamp(5rem, 9vw, 8rem) clamp(1.4rem, 4vw, 4rem); overflow: hidden; }
.reviews__inner { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: minmax(300px, 440px) 1fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.reviews__side h2 { color: #f7f0e4; }
.reviews__sub { margin-top: 1.4rem; color: rgba(239,233,220,.72); max-width: 38ch; }
.gbadge { display: flex; align-items: center; gap: 1.1rem; margin-top: 2.2rem; padding: 1.1rem 1.3rem; border: 1px solid rgba(239,233,220,.14); border-radius: 0; background: rgba(255,255,255,.025); width: max-content; max-width: 100%; }
.gbadge svg { width: 38px; height: 38px; flex-shrink: 0; }
.gbadge strong { font-family: var(--serif); font-size: 2rem; font-weight: 500; line-height: 1; margin-right: .5rem; vertical-align: -3px; }
.gbadge .stars { color: #f4b400; letter-spacing: .12em; font-size: 1rem; }
.gbadge small { display: block; margin-top: .3rem; font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; opacity: .6; }
.reviews__actions { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; margin-top: 1.8rem; }
.reviews__all { font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; opacity: .7; transition: opacity .3s, color .3s; }
.reviews__all:hover { opacity: 1; color: var(--gold); }

.reviews__streams { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; height: min(640px, 82vh); -webkit-mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent); }
.stream-col { overflow: hidden; }
.stream { display: flex; flex-direction: column; gap: 18px; width: 100%; animation: streamUp 46s linear infinite; }
.stream--down { animation-name: streamDown; animation-duration: 52s; }
.stream-col:hover .stream { animation-play-state: paused; }
@keyframes streamUp { to { transform: translateY(-50%); } }
@keyframes streamDown { from { transform: translateY(-50%); } to { transform: translateY(0); } }

/* stitched card: solid seam + running-stitch inner line */
.rcard {
  position: relative; flex-shrink: 0; margin: 0;
  border: 1px solid rgba(185,146,92,.32); border-radius: 0;
  padding: clamp(1.5rem, 2.2vw, 2rem) clamp(1.5rem, 2.2vw, 2.1rem); background: rgba(255,255,255,.025);
  display: flex; flex-direction: column;
}
.rcard::before {
  content: ""; position: absolute; inset: 7px; pointer-events: none; border-radius: 0;
  --st: rgba(185,146,92,.7);
  background:
    repeating-linear-gradient(90deg, var(--st) 0 7px, transparent 7px 13px) left top / 100% 1.5px no-repeat,
    repeating-linear-gradient(90deg, var(--st) 0 7px, transparent 7px 13px) left bottom / 100% 1.5px no-repeat,
    repeating-linear-gradient(180deg, var(--st) 0 7px, transparent 7px 13px) left top / 1.5px 100% no-repeat,
    repeating-linear-gradient(180deg, var(--st) 0 7px, transparent 7px 13px) right top / 1.5px 100% no-repeat;
}
.rcard::after { content: ""; position: absolute; width: 5px; height: 5px; background: var(--gold); border-radius: 50%; left: 5px; top: 5px; box-shadow: calc(100% + 2px) 0 0 0 var(--gold); opacity: 0; }
.rcard__stars { color: #f4b400; letter-spacing: .26em; font-size: .82rem; }
.rcard blockquote { font-family: var(--serif-2); font-size: 1.08rem; line-height: 1.55; margin-top: .9rem; opacity: .93; }
.rcard figcaption { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid rgba(239,233,220,.12); font-size: .82rem; letter-spacing: .06em; display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.rcard figcaption span { display: inline-flex; align-items: center; gap: .4rem; font-size: .6rem; letter-spacing: .22em; text-transform: uppercase; opacity: .6; }
.rcard figcaption svg { width: 12px; height: 12px; }

/* review gate */
.rgate { position: fixed; inset: 0; z-index: 200; background: rgba(20,16,13,.72); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 1.4rem; opacity: 0; transition: opacity .35s; }
.rgate[hidden] { display: none; }
.rgate.is-open { opacity: 1; }
.rgate__box { position: relative; background: var(--cream); color: var(--ink); max-width: 480px; width: 100%; padding: clamp(2rem, 4vw, 3rem); text-align: center; border-radius: 0; transform: translateY(16px); transition: transform .4s cubic-bezier(.2,.7,.2,1); }
.rgate.is-open .rgate__box { transform: none; }
.rgate__box::before { content: ""; position: absolute; inset: 9px; border: 1.5px dashed rgba(140,47,47,.45); pointer-events: none; border-radius: 0; }
.rgate__close { position: absolute; right: .9rem; top: .6rem; background: none; border: 0; font-size: 1.8rem; line-height: 1; cursor: pointer; color: var(--ink-soft); z-index: 1; }
.rgate__box h3 { font-size: clamp(1.4rem, 2.6vw, 1.8rem); font-weight: 400; }
.rgate__stars { display: flex; justify-content: center; gap: .35rem; margin: 1.5rem 0 .6rem; }
.rgate__star { background: none; border: 0; cursor: pointer; font-size: 2.4rem; line-height: 1; color: rgba(36,29,24,.18); transition: color .15s, transform .15s; padding: 0 .1rem; }
.rgate__star.is-on { color: #f4b400; }
.rgate__star:hover { transform: scale(1.12); }
.rgate__hint { font-size: .7rem; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-soft); }
.rgate__low { margin-top: 1.2rem; }
.rgate__low p { color: var(--ink-soft); font-size: .95rem; max-width: 36ch; margin: 0 auto 1rem; }
.rgate__low textarea { width: 100%; min-height: 96px; border: 1px solid rgba(36,29,24,.25); background: #fff; padding: .8rem .9rem; font: inherit; font-size: .92rem; resize: vertical; margin-bottom: 1rem; }

/* WhatsApp float: icon-only circle */
.wa-float {
  position: fixed; right: 22px; bottom: 22px; z-index: 150; display: flex; align-items: center; justify-content: center;
  width: 58px; height: 58px; border-radius: 50%; background: #25d366; color: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.28); transition: transform .3s, box-shadow .3s;
}
.wa-float svg { width: 32px; height: 32px; fill: #fff; }
@media (min-width: 1081px) {
  .wa-float { width: 62px; height: 62px; right: 28px; bottom: 28px; }
  .wa-float svg { width: 34px; height: 34px; }
}
.wa-float span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* screen readers only */
.wa-float:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 16px 36px rgba(0,0,0,.34); }

/* ============ FOOTER ============ */
.footer { background: var(--dark); color: #d9d1c2; padding: clamp(3.5rem, 7vw, 5.5rem) clamp(1.4rem, 4vw, 4rem) 1.8rem; }
.footer__inner { max-width: 1240px; margin: 0 auto; }
.footer__top { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2rem clamp(1.5rem, 4vw, 4rem); padding-bottom: clamp(2rem, 4vw, 3rem); border-bottom: 1px solid rgba(239,233,220,.14); }
.footer__brand { display: flex; flex-direction: column; line-height: 1; color: #f4efe5; }
.footer__name { font-family: var(--logo); font-size: 1.7rem; letter-spacing: .26em; text-transform: uppercase; font-weight: 500; }
.footer__script { font-family: var(--logo); font-style: italic; font-size: .85rem; letter-spacing: .42em; margin-top: 4px; text-align: center; opacity: .75; }
.footer__tag { font-family: var(--logo); font-style: italic; font-size: 1.05rem; color: rgba(217,209,194,.7); max-width: 40ch; }
.footer__social { display: flex; gap: .7rem; }
.footer__social a { width: 42px; height: 42px; border: 1px solid rgba(239,233,220,.22); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #f4efe5; transition: background .3s, border-color .3s, color .3s, transform .3s; }
.footer__social svg { width: 18px; height: 18px; }
.footer__social a:hover { background: var(--gold); border-color: var(--gold); color: var(--dark); transform: translateY(-2px); }
.footer__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.4rem; padding: clamp(2.2rem, 4vw, 3.2rem) 0; }
.footer__cols h4, .footer__cols .footer__h { font-size: .66rem; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.1rem; font-weight: 400; }
.footer__cols a { display: block; font-size: .92rem; margin-bottom: .5rem; opacity: .82; transition: opacity .3s, color .3s, transform .3s; }
.footer__cols a:hover { opacity: 1; color: #fff; transform: translateX(3px); }
.footer__cols p { font-size: .92rem; opacity: .82; margin-bottom: .6rem; }
.footer__bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1.5rem; padding-top: 1.4rem; border-top: 1px solid rgba(239,233,220,.12); font-size: .72rem; letter-spacing: .12em; opacity: .58; }

/* ============ RESPONSIVE ============ */
@media (max-width: 1080px) {
  .wardrobe { grid-template-columns: 1fr; gap: 2rem; }
  .wardrobe__rail { max-width: 560px; }
  .wardrobe__sub { min-height: 0; }
  .wardrobe__title { min-height: 0; }
  .wardrobe__counter, .wardrobe__progress { display: none; }
}
@media (max-width: 1080px) {
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: flex; }
}
@media (max-width: 900px) {
  .reviews__inner { grid-template-columns: 1fr; }
  .reviews__streams { height: 520px; }
  .process__grid { grid-template-columns: 1fr 1fr; }
  .footer__cols { grid-template-columns: 1fr 1fr; }
  .footer__top { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  /* wardrobe becomes vertical accordion */
  .wardrobe__cards { flex-direction: column; height: auto; }
  .wcard { min-height: 84px; flex: none; height: 84px; transition: height .8s cubic-bezier(.6,.05,.15,1); border-radius: 0; }
  .wcard.is-active { flex: none; height: 460px; }
  .wcard__vtitle { writing-mode: horizontal-tb; left: 76px; transform: none; bottom: auto; top: 50%; translate: 0 -50%; font-size: 1rem; }
  .wcard__num { top: 50%; translate: 0 -50%; left: 22px; }
  .wcard__num::after { display: none; }
  .wcard.is-active .wcard__num { top: 24px; translate: 0 0; }
  .wcard.is-active .wcard__num::after { display: block; }
  .wcard__body { min-width: 0; }
  .wcard__body h3 { font-size: 1.5rem; }
  /* thread timeline stacks, line moves to the left edge */
  .thread__line, .thread__needle, .thread__knot { left: 12px; }
  .stitch { grid-template-columns: 1fr; gap: 1.6rem; padding-left: 44px; margin-bottom: 4rem; }
  .stitch::before { left: 12px; top: 8px; }
  .stitch--right .stitch__text { text-align: left; align-items: flex-start; order: 2; padding: 0; }
  .stitch--right .stitch__text p { text-align: left; }
  .stitch--right .stitch__media { order: 1; }
  .stitch--left .stitch__text { padding: 0; }
  .stitch__media img { height: auto; aspect-ratio: 4 / 3; }
  .stitch--left .stitch__media, .stitch--right .stitch__text,
  .stitch--left .stitch__text, .stitch--right .stitch__media { transform: translateY(30px); }
  .atelier__inner { grid-template-columns: 1fr; }
  .pintro { grid-template-columns: 1fr; }
  .pfeat__grid { grid-template-columns: 1fr 1fr; }
  .related__grid { grid-template-columns: 1fr 1fr; }
  .hub__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .process__grid, .footer__cols { grid-template-columns: 1fr; }
  .pfeat__grid, .related__grid, .hub__grid { grid-template-columns: 1fr; }
  .pgallery { grid-template-columns: 1fr 1fr; }
  .atelier__grid { grid-template-columns: 1fr; }
  .atelier__grid figure:nth-child(1) { grid-row: auto; aspect-ratio: 4 / 5; }
}

@media (prefers-reduced-motion: reduce) {
  .insta__track, .stream { animation: none; }
  .reveal { transition: none; opacity: 1; transform: none; }
  .stitch__media, .stitch__text { transition: none; opacity: 1; transform: none; }
  .thread__needle.is-snipping .shear--a, .thread__needle.is-snipping .shear--b { animation: none; }
}


/* ============ ATELIER ============ */
.atelier { background: var(--cream); padding: clamp(5rem, 9vw, 8rem) clamp(1.2rem, 4vw, 4rem); }
.atelier__inner { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: minmax(280px, 400px) 1fr; gap: clamp(2.4rem, 5vw, 5rem); align-items: center; }
.atelier__text p { color: var(--ink-soft); max-width: 40ch; }
.atelier__text h2 { margin-bottom: 1.4rem; }
.atelier__addr { margin: 1.8rem 0 1rem; font-family: var(--serif-2); font-size: 1.35rem; line-height: 1.4; color: var(--ink) !important; }
.atelier__meta { list-style: none; margin-bottom: 2rem; }
.atelier__meta li { font-size: .88rem; color: var(--ink-soft); padding-left: 1.2rem; position: relative; margin-bottom: .3rem; }
.atelier__meta li::before { content: ""; position: absolute; left: 0; top: .72em; width: 5px; height: 5px; background: var(--wine); transform: rotate(45deg); }
.atelier__map { display: inline-block; margin-left: 1.4rem; font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--wine); border-bottom: 1px solid transparent; transition: border-color .3s; }
.atelier__map:hover { border-color: var(--wine); }
.atelier__grid { display: grid; grid-template-columns: 1fr 1.3fr; grid-template-rows: auto auto; gap: 14px; }
.atelier__grid figure { margin: 0; overflow: hidden; border-radius: 0; background: var(--dark); }
.atelier__grid figure:nth-child(1) { grid-row: 1 / 3; }
.atelier__grid figure:nth-child(n+2) { aspect-ratio: 3 / 2; }
.atelier__grid img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.3s cubic-bezier(.2,.6,.2,1); }
.atelier__grid figure:hover img { transform: scale(1.04); }

/* ============ SERVICE PAGES ============ */
.phero { position: relative; min-height: 78vh; display: flex; align-items: flex-end; background: var(--dark); color: #f4efe5; padding: clamp(7rem, 14vw, 10rem) clamp(1.4rem, 4vw, 4rem) clamp(3.2rem, 6vw, 5rem); overflow: hidden; }
.phero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .82; transform: scale(1.04); animation: heroSettle 2.4s cubic-bezier(.2,.6,.2,1) forwards; }
@keyframes heroSettle { to { transform: none; } }
.phero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,16,13,.92) 0%, rgba(20,16,13,.35) 50%, rgba(20,16,13,.3) 100%); }
.phero__inner { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; width: 100%; }
.crumbs { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem .9rem; font-size: .66rem; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.5rem; }
.crumbs li + li::before { content: "/"; margin-right: .9rem; opacity: .5; }
.crumbs a { opacity: .8; transition: opacity .3s; } .crumbs a:hover { opacity: 1; }
.phero h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(2.5rem, 5.6vw, 4.8rem); line-height: 1.04; letter-spacing: -.01em; max-width: 15ch; }
.phero__lede { margin-top: 1.5rem; max-width: 58ch; font-size: 1.06rem; opacity: .9; font-family: var(--serif-2); font-size: 1.28rem; line-height: 1.5; }
.phero__cta { margin-top: 2.2rem; display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
.phero__cta .btn { border-color: var(--gold); color: var(--gold); }
.phero__cta .btn:hover { background: var(--gold); color: var(--dark); }

.pintro { max-width: 1240px; margin: 0 auto; padding: clamp(4.5rem, 8vw, 7.5rem) clamp(1.4rem, 4vw, 4rem); display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.pintro h2 { font-size: clamp(1.75rem, 3.1vw, 2.6rem); font-weight: 400; }
.pintro p { margin-top: 1.25rem; color: var(--ink-soft); max-width: 56ch; }
.pintro figure { margin: 0; border-radius: 0; overflow: hidden; }
.pintro img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

.pfeat { background: var(--cream-2); padding: clamp(4.5rem, 8vw, 7rem) clamp(1.4rem, 4vw, 4rem); }
.pfeat__inner { max-width: 1240px; margin: 0 auto; }
.pfeat__inner h2 { max-width: 20ch; }
.pfeat__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.6rem, 3vw, 3rem); margin-top: clamp(2.4rem, 4vw, 3.5rem); }
.pfeat__grid > div { border-top: 1px solid rgba(36,29,24,.2); padding-top: 1.4rem; }
.pfeat__grid span { font-family: var(--serif); font-style: italic; color: var(--wine); font-size: 1.05rem; }
.pfeat__grid h3 { font-size: 1.18rem; margin: .7rem 0 .6rem; }
.pfeat__grid p { font-size: .92rem; color: var(--ink-soft); }

.pgallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 1240px; margin: 0 auto; padding: clamp(3rem, 6vw, 5rem) clamp(1.4rem, 4vw, 4rem) clamp(4rem, 8vw, 7rem); }
.pgallery figure { margin: 0; overflow: hidden; border-radius: 0; }
.pgallery img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.6,.2,1); }
.pgallery figure:hover img { transform: scale(1.05); }

.pstrip { background: var(--dark); color: #efe9dc; padding: clamp(4.5rem, 8vw, 7rem) clamp(1.4rem, 4vw, 4rem); }
.pstrip .process__head { margin-bottom: clamp(2.6rem, 5vw, 4rem); }

.faq { max-width: 860px; margin: 0 auto; padding: clamp(4.5rem, 8vw, 7rem) 1.4rem; }
.faq h2 { text-align: center; margin-bottom: clamp(2rem, 4vw, 3rem); font-size: clamp(1.7rem, 3vw, 2.4rem); }
.faq details { border-top: 1px solid rgba(36,29,24,.2); }
.faq details:last-of-type { border-bottom: 1px solid rgba(36,29,24,.2); }
.faq summary { cursor: pointer; list-style: none; font-family: var(--serif); font-size: 1.18rem; padding: 1.3rem 2.6rem 1.3rem 0; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: .2rem; top: 50%; transform: translateY(-50%); color: var(--wine); font-size: 1.6rem; font-weight: 300; line-height: 1; transition: transform .35s; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { color: var(--ink-soft); padding: 0 0 1.5rem; max-width: 66ch; }

.related { background: var(--cream-2); padding: clamp(4.5rem, 8vw, 7rem) clamp(1.4rem, 4vw, 4rem); }
.related__head { text-align: center; }
.related__head .eyebrow--line::after { margin-inline: auto; }
.related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 1240px; margin: clamp(2rem, 4vw, 3rem) auto 0; }
.rel { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 0; background: var(--dark); color: #f4efe5; }
.rel img { width: 100%; height: 100%; object-fit: cover; opacity: .88; transition: transform 1.1s cubic-bezier(.2,.6,.2,1); }
.rel:hover img { transform: scale(1.05); }
.rel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,8,6,.85), rgba(10,8,6,.05) 55%); }
.rel small { position: absolute; z-index: 2; left: 1.4rem; top: 1.3rem; font-size: .64rem; letter-spacing: .28em; text-transform: uppercase; color: var(--gold); }
.rel span { position: absolute; z-index: 2; left: 1.4rem; right: 1.4rem; bottom: 1.3rem; font-family: var(--serif); font-size: 1.35rem; line-height: 1.2; }
.rel span i { font-style: normal; color: var(--gold); margin-left: .5rem; display: inline-block; transition: transform .35s; }
.rel:hover span i { transform: translateX(6px); }

.hub__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 1240px; margin: clamp(2rem, 4vw, 3rem) auto 0; }
.hub { padding: clamp(4.5rem, 8vw, 7rem) clamp(1.4rem, 4vw, 4rem); }
.hub__head { text-align: center; max-width: 720px; margin: 0 auto; }
.hub__head .eyebrow--line::after { margin-inline: auto; }
.hub__lede { margin: 1.2rem auto 0; color: var(--ink-soft); max-width: 56ch; }
.hub__group { grid-column: 1 / -1; text-align: center; max-width: 640px; margin: clamp(2.6rem, 5vw, 4rem) auto .4rem; }
.hub__group h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.5rem, 2.4vw, 2rem); color: var(--ink); }
.hub__group p { margin-top: .7rem; font-size: .98rem; line-height: 1.7; color: var(--ink-soft); }
.hub__group p a { color: var(--ink); border-bottom: 1px solid rgba(36,29,24,.35); white-space: nowrap; }
.hub__group:first-child { margin-top: 0; }
.hub__pair { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.hub__pair .rel { aspect-ratio: 5 / 4; }
.rel--story .rel__story { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 1.3rem 1.4rem; transform: translateY(calc(100% - 3.6rem)); transition: transform .6s cubic-bezier(.2,.6,.2,1); }
.rel--story .rel__story span { position: static; display: block; font-family: var(--serif); font-size: 1.45rem; line-height: 1.2; }
.rel--story .rel__story p { margin-top: .9rem; font-size: .95rem; line-height: 1.65; color: rgba(244,239,229,.88); max-width: 52ch; opacity: 0; transition: opacity .5s ease .1s; }
.rel--story .rel__story em { display: inline-block; margin-top: 1rem; font-style: normal; font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); opacity: 0; transition: opacity .5s ease .15s; }
.rel--story::after { transition: background .6s ease; }
.rel--story:hover::after, .rel--story:focus-visible::after { background: linear-gradient(to top, rgba(10,8,6,.92), rgba(10,8,6,.55) 60%, rgba(10,8,6,.25)); }
.rel--story:hover .rel__story, .rel--story:focus-visible .rel__story { transform: none; }
.rel--story:hover .rel__story p, .rel--story:hover .rel__story em, .rel--story:focus-visible .rel__story p, .rel--story:focus-visible .rel__story em { opacity: 1; }
@media (hover: none) { .rel--story .rel__story { transform: none; } .rel--story .rel__story p, .rel--story .rel__story em { opacity: 1; } .rel--story::after { background: linear-gradient(to top, rgba(10,8,6,.92), rgba(10,8,6,.5) 60%, rgba(10,8,6,.15)); } }
@media (max-width: 700px) { .hub__pair { grid-template-columns: 1fr; } .hub__pair .rel { aspect-ratio: 4 / 5; } }

/* ---- long-form copy on the garment pages: heading left, text right */
/* trouser styles: photo cards, the words rise on hover */
.fcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: clamp(2.2rem, 4vw, 3.2rem); }
.fcard { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--dark); color: #f4efe5; outline: none; }
.fcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.6,.2,1); }
.fcard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(14,11,9,.88) 0%, rgba(14,11,9,.25) 45%, rgba(14,11,9,0) 70%); transition: background .6s ease; }
.fcard__body { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; padding: clamp(1.2rem, 2vw, 1.7rem); transform: translateY(calc(100% - 6.6rem)); transition: transform .6s cubic-bezier(.2,.6,.2,1); }
.fcard__body span { font-family: var(--serif); font-style: italic; color: var(--gold); font-size: 1rem; }
.fcard__body h3 { font-size: clamp(1.25rem, 1.8vw, 1.5rem); margin: .3rem 0 .9rem; color: #fff; }
.fcard__body p { font-size: .92rem; line-height: 1.6; color: rgba(244,239,229,.88); opacity: 0; transition: opacity .5s ease .1s; }
.fcard:hover img, .fcard:focus-visible img { transform: scale(1.06); }
.fcard:hover::after, .fcard:focus-visible::after { background: linear-gradient(to top, rgba(14,11,9,.92) 0%, rgba(14,11,9,.7) 55%, rgba(14,11,9,.35) 100%); }
.fcard:hover .fcard__body, .fcard:focus-visible .fcard__body { transform: none; }
.fcard:hover .fcard__body p, .fcard:focus-visible .fcard__body p { opacity: 1; }
@media (hover: none) {
  .fcard::after { background: linear-gradient(to top, rgba(14,11,9,.92) 0%, rgba(14,11,9,.6) 50%, rgba(14,11,9,.1) 85%); }
  .fcard__body { transform: none; }
  .fcard__body p { opacity: 1; }
}
@media (max-width: 900px) { .fcards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .fcards { grid-template-columns: 1fr; } }

.pfeat__lede { margin-top: 1.1rem; color: var(--ink-soft); max-width: 60ch; }
.pfeat__grid--3 { grid-template-columns: repeat(3, 1fr); }
.pfeat__more { display: inline-block; margin-top: .9rem; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--wine); }
.pfeat__more i { font-style: normal; margin-left: .45rem; display: inline-block; transition: transform .35s; }
.pfeat__more:hover i { transform: translateX(5px); }

.wfor { padding: clamp(4.5rem, 8vw, 7rem) clamp(1.4rem, 4vw, 4rem); text-align: center; }
.wfor__head { max-width: 760px; margin: 0 auto; }
.wfor__head h2 { font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 400; }
.wfor__head p { margin-top: 1.2rem; color: var(--ink-soft); line-height: 1.75; }
.forcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 1240px; margin: clamp(2.4rem, 4vw, 3.4rem) auto 0; }
.forcard { background: #faf7f2; border: 1px solid rgba(36,29,24,.1); padding: clamp(1.8rem, 3vw, 2.6rem) clamp(1.4rem, 2.4vw, 2rem); display: flex; flex-direction: column; align-items: center; transition: box-shadow .5s ease, transform .5s ease; }
.forcard:hover { box-shadow: 0 18px 40px rgba(36,29,24,.08); transform: translateY(-3px); }
.forcard__icon { width: 64px; height: 64px; border-radius: 50%; border: 1px solid rgba(185,146,92,.55); display: inline-flex; align-items: center; justify-content: center; color: var(--gold); margin-bottom: 1.4rem; }
.forcard__icon svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.forcard h3 { font-size: 1.25rem; margin-bottom: .8rem; }
.forcard p { color: var(--ink-soft); font-size: .95rem; line-height: 1.7; }
.forcard a { color: var(--wine); border-bottom: 1px solid rgba(140,47,47,.4); }
@media (max-width: 900px) { .forcards { grid-template-columns: 1fr; max-width: 520px; } }

.pbody { padding: clamp(3rem, 6vw, 5rem) clamp(1.4rem, 4vw, 4rem) 0; }
.process2--page { border-top: 1px solid rgba(36,29,24,.12); margin-top: clamp(2.4rem, 4vw, 3.4rem); }
.process2--page .process2__head h2 { font-size: clamp(2rem, 3.8vw, 3.2rem); max-width: 16ch; }
.pbody + .pgallery { padding-top: 0; }
.pbody__inner { max-width: 1240px; margin: 0 auto; }
.pblock { display: grid; grid-template-columns: 1fr 1.7fr; gap: clamp(1.4rem, 4vw, 5rem); padding: clamp(2.4rem, 4vw, 3.4rem) 0; border-top: 1px solid rgba(36,29,24,.18); }
.pblock:first-child { border-top: 0; padding-top: 0; }
.pblock h2 { font-size: clamp(1.5rem, 2.4vw, 2.1rem); font-weight: 400; line-height: 1.2; max-width: 18ch; }
.pblock__body p { color: var(--ink-soft); max-width: 66ch; }
.pblock__body p + p, .pblock__body p + .pblock__sub, .pblock__body p + ul, .pblock__body p + ol { margin-top: 1.1rem; }
.pblock__body a { color: var(--wine); border-bottom: 1px solid rgba(140,47,47,.4); }
.pblock__sub + .pblock__sub { margin-top: 1.4rem; }
.pblock__sub h3 { font-size: 1.12rem; margin-bottom: .35rem; }
.pblock__list { list-style: none; max-width: 66ch; }
.pblock__list li { color: var(--ink-soft); padding: .8rem 0 .8rem 1.4rem; border-top: 1px solid rgba(36,29,24,.12); position: relative; }
.pblock__list li::before { content: ""; position: absolute; left: 0; top: 1.45rem; width: 6px; height: 6px; background: var(--gold); transform: rotate(45deg); }
.pblock__list strong { color: var(--ink); font-weight: 500; }
.pblock__steps { list-style: none; max-width: 66ch; }
.pblock__steps li { display: grid; grid-template-columns: 2.6rem 1fr; gap: .6rem; padding: 1rem 0; border-top: 1px solid rgba(36,29,24,.12); }
.pblock__steps li:first-child { border-top: 0; padding-top: .2rem; }
.pblock__steps span { font-family: var(--serif-2); font-style: italic; color: var(--wine); font-size: 1.2rem; line-height: 1.3; }
.pblock__steps h3 { font-size: 1.1rem; margin-bottom: .25rem; }
.pblock__steps p { font-size: .94rem; }
.pblock__more { margin-top: 1.4rem !important; }
.pblock__more a { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--wine); border-bottom: 1px solid rgba(140,47,47,.4); padding-bottom: .15rem; }

.pprice { padding: clamp(4rem, 7vw, 6rem) clamp(1.4rem, 4vw, 4rem); background: var(--cream-2); }
.pprice__inner { max-width: 1240px; margin: 0 auto; }
.pprice__head { text-align: center; max-width: 720px; margin: 0 auto clamp(2rem, 4vw, 3rem); }
.pprice__head .eyebrow--line::after { margin-inline: auto; }
.pprice h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
.pprice__lede { margin-top: 1rem; color: var(--ink-soft); }
.pprice .pgrid--4 { grid-template-columns: repeat(4, 1fr); }
.pprice .pgrid--2 { grid-template-columns: repeat(2, 1fr); max-width: 820px; margin: 0 auto; }
.pprice .pcard__from { font-size: 1.5rem; }
.ptable__note { margin: 1.6rem auto 0; font-size: .88rem; color: var(--ink-soft); text-align: center; max-width: 60ch; }
.pprice .pblock__more { text-align: center; }

.dcard { background: rgba(14,11,9,.6); border: 1px solid rgba(244,239,229,.14); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: clamp(1.5rem, 2.6vw, 2.3rem) clamp(1.5rem, 2.8vw, 2.6rem); max-width: 560px; }
.dcard .eyebrow { margin-bottom: .9rem; }
.dcard h2 { color: #fff; font-size: clamp(2rem, 3.4vw, 2.9rem); margin: 0 0 .7rem; }
.dcard__lede { color: rgba(244,239,229,.78); line-height: 1.65; max-width: 46ch; }

.visit { position: relative; min-height: 78vh; display: flex; align-items: center; background: var(--dark); color: #f4efe5; padding: clamp(4rem, 8vw, 7rem) clamp(1.4rem, 5vw, 5rem); overflow: hidden; }
.visit__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.visit::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgba(14,11,9,.78) 0%, rgba(14,11,9,.45) 55%, rgba(14,11,9,.25) 100%); }
.visit__inner { position: relative; z-index: 1; width: 100%; max-width: 1240px; margin: 0 auto; }
@media (max-width: 900px) {
  .pfeat__grid--3 { grid-template-columns: 1fr 1fr; }
  .pblock { grid-template-columns: 1fr; gap: 1rem; }
  .pblock h2 { max-width: none; }
  .pprice .pgrid--4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .pfeat__grid--3 { grid-template-columns: 1fr; }
  .visit { min-height: 0; padding: 3.5rem 1.4rem; }
  .dcard { max-width: none; }
  .pprice .pgrid--4, .pprice .pgrid--2 { grid-template-columns: 1fr; }
}

.cta-band { position: relative; background: var(--wine-deep); color: #f4efe5; text-align: center; padding: clamp(4.5rem, 9vw, 7rem) 1.4rem; overflow: hidden; }
.cta-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 60% at 50% 0%, rgba(255,230,200,.08), transparent); pointer-events: none; }
.cta-band > * { position: relative; }
.cta-band h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); font-weight: 400; max-width: 22ch; margin: 0 auto 1rem; }
.cta-band p { color: rgba(242,233,220,.75); max-width: 50ch; margin: 0 auto 2.2rem; }
.cta-band .btn { border-color: var(--gold); color: var(--gold); }
.cta-band .btn:hover { background: var(--gold); color: var(--wine-deep); }


/* ============ PRICING: grid of cards like the live page, hover showcases the garment ============ */
.pricing { max-width: 1240px; margin: 0 auto; padding: calc(76px + clamp(2.5rem, 5vw, 4rem)) clamp(1.4rem, 4vw, 4rem) clamp(3rem, 6vw, 5rem); }
.page--pricing .nav { background: rgba(20,16,13,.92); }
.pricing__title { font-family: var(--serif-2); font-weight: 500; text-transform: uppercase; letter-spacing: .3em; font-size: clamp(1.8rem, 3.2vw, 2.6rem); text-align: center; margin-left: .3em; }
.pricing__lede { text-align: center; color: var(--ink-soft); max-width: 58ch; margin: 1rem auto clamp(2.2rem, 4vw, 3.4rem); }
.pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.pcard { background: #fff; border: 1px solid rgba(36,29,24,.16); padding: clamp(1rem, 1.6vw, 1.4rem); display: flex; flex-direction: column; transition: box-shadow .3s, transform .3s; }
.pcard:hover { box-shadow: 0 18px 40px rgba(36,29,24,.10); transform: translateY(-3px); }
.pcard__img { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--cream-2); }
.pcard__slides { position: absolute; inset: 0; display: block; }
.pcard__slides img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity .7s ease, transform 1.6s cubic-bezier(.2,.6,.2,1); }
.pcard__slides img.is-on { opacity: 1; transform: none; }
.pcard__over { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .9rem; padding: 1rem; text-align: center;
  background: linear-gradient(to top, rgba(10,8,6,.72), rgba(10,8,6,.3)); opacity: 0; transition: opacity .4s ease; }
.pcard:hover .pcard__over, .pcard:focus-within .pcard__over { opacity: 1; }
.pcard__over .btn { font-size: .66rem; padding: 1em 1.8em; transform: translateY(8px); transition: transform .4s ease, background .4s, color .4s; }
.pcard:hover .pcard__over .btn { transform: none; }
.pcard__explore { font-size: .66rem; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); }
.pcard__explore:hover { text-decoration: underline; text-underline-offset: 4px; }
.pcard__text { display: block; color: var(--ink); }
.pcard__name { display: block; margin-top: 1.3rem; font-size: .78rem; letter-spacing: .28em; text-transform: uppercase; }
.pcard__from { display: block; margin-top: .55rem; font-family: var(--serif-2); font-size: 1.7rem; font-weight: 600; }
.pcard__notes { display: block; margin-top: .5rem; font-size: .8rem; color: var(--ink-soft); line-height: 1.6; }
.pcard__notes p { margin: 0; }
.terms { background: var(--cream-2); padding: clamp(3rem, 6vw, 5rem) clamp(1.4rem, 4vw, 4rem); }
.terms > div { max-width: 860px; margin: 0 auto; }
.terms ul { list-style: none; }
.terms li { position: relative; padding-left: 1.4rem; margin-bottom: .7rem; color: var(--ink-soft); }
.terms li::before { content: ""; position: absolute; left: 0; top: .72em; width: 5px; height: 5px; background: var(--wine); transform: rotate(45deg); }
@media (max-width: 900px) { .pgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pgrid { grid-template-columns: 1fr; } }

/* ============ BLOG: listing (mirrors the live /blogs/news layout) ============ */
.page--blog .nav, .page--post .nav { background: rgba(20,16,13,.92); }
.blog { max-width: 1240px; margin: 0 auto; padding: calc(76px + clamp(2.5rem, 5vw, 4rem)) clamp(1.4rem, 4vw, 4rem) clamp(4rem, 8vw, 6rem); }
.blog__title { font-family: var(--serif-2); font-weight: 500; text-transform: uppercase; letter-spacing: .28em; font-size: clamp(1.7rem, 3vw, 2.4rem); text-align: center; margin: 0 0 1.6rem .28em; }
.btags { display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem 1.3rem; max-width: 1040px; margin: 0 auto clamp(2.2rem, 4vw, 3.4rem); }
.btags a { font-size: .9rem; color: var(--ink-soft); padding-bottom: 1px; border-bottom: 1px solid transparent; transition: color .25s, border-color .25s; }
.btags a:hover { color: var(--ink); border-color: rgba(36,29,24,.4); }
.btags a.is-active { color: var(--ink); border-color: var(--ink); }
.blog__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 3rem) clamp(1.4rem, 3vw, 2rem); }
.bcard__img { display: block; overflow: hidden; }
.bcard__img img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 1.1s cubic-bezier(.2,.6,.2,1); }
.bcard:hover .bcard__img img { transform: scale(1.05); }
.bcard__info { padding-top: 1.3rem; }
.bcard__lang { font-size: .66rem; letter-spacing: .3em; text-transform: uppercase; color: var(--ink-soft); }
.bcard h3 { font-family: var(--serif-2); font-weight: 500; text-transform: uppercase; letter-spacing: .16em; font-size: clamp(1.1rem, 1.6vw, 1.35rem); line-height: 1.45; margin: .6rem 0 .8rem; }
.bcard h3 a:hover { color: var(--wine); }
.bcard p { color: var(--ink-soft); font-size: .95rem; max-width: 60ch; }
.bcard__more { display: inline-block; margin-top: .9rem; font-size: .9rem; border-bottom: 1px solid var(--ink); padding-bottom: 1px; transition: color .25s, border-color .25s; }
.bcard__more:hover { color: var(--wine); border-color: var(--wine); }
.bpager { display: flex; justify-content: center; gap: .4rem; margin-top: clamp(2.5rem, 5vw, 4rem); }
.bpager a { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(36,29,24,.2); font-size: .85rem; transition: background .25s, color .25s; }
.bpager a:hover { background: var(--ink); color: var(--cream); }
.bpager a.is-active { background: var(--ink); color: var(--cream); border-color: var(--ink); }

/* ============ BLOG: post ============ */
.btoolbar { position: sticky; top: 76px; z-index: 90; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; background: var(--dark); color: #efe9dc; padding: .8rem clamp(1.4rem, 4vw, 4rem); font-size: .9rem; }
.btoolbar__title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.btoolbar__title small { opacity: .6; margin-right: .4rem; }
.btoolbar__nav { display: flex; gap: 1.4rem; flex-shrink: 0; }
.btoolbar__nav a { opacity: .85; } .btoolbar__nav a:hover { opacity: 1; color: var(--gold); }
.post { padding-top: 76px; background: #fff; }
.post__banner img { width: 100%; height: clamp(300px, 52vw, 560px); object-fit: cover; display: block; }
.post__wrap { position: relative; max-width: 860px; margin: -70px auto 0; background: #fff; padding: clamp(2rem, 4vw, 3.4rem) clamp(1.4rem, 4vw, 3rem) clamp(2.5rem, 4vw, 3.5rem); }
.post__meta { font-size: .72rem; letter-spacing: .26em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 1.2rem; }
.post__meta .dot { margin: 0 .5rem; }
.post__meta a:hover { color: var(--wine); }
.post h1 { font-family: var(--serif-2); font-weight: 500; text-transform: uppercase; letter-spacing: .14em; font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.35; margin-bottom: 1.8rem; }
.prose { font-size: 1rem; line-height: 1.75; color: var(--ink); }
.prose > * + * { margin-top: 1.1rem; }
.prose h2 { font-family: var(--serif-2); font-weight: 500; text-transform: uppercase; letter-spacing: .16em; font-size: clamp(1.25rem, 2.2vw, 1.6rem); line-height: 1.35; margin-top: 2.4rem; }
.prose h3 { font-family: var(--serif-2); font-weight: 500; font-size: 1.3rem; margin-top: 1.9rem; }
.prose h4 { font-size: 1rem; margin-top: 1.5rem; }
.prose a { text-decoration: underline; text-underline-offset: 3px; } .prose a:hover { color: var(--wine); }
.prose strong { font-weight: 500; }
.prose ul, .prose ol { padding-left: 1.3rem; } .prose li { margin: .35rem 0; }
.prose img { max-width: 100%; height: auto; display: block; margin: 1.8rem auto; border-radius: 0; }
.prose figure { margin: 1.8rem 0; } .prose figcaption { font-size: .8rem; color: var(--ink-soft); text-align: center; margin-top: .5rem; }
.prose blockquote { border-left: 2px solid var(--gold); padding: .4rem 0 .4rem 1.2rem; color: var(--ink-soft); }
.prose blockquote p:first-child { margin-top: 0; }
.prose hr { border: 0; border-top: 1px solid rgba(36,29,24,.16); margin: 2rem 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: .95rem; margin-top: 1.4rem; }
.prose th { font-family: var(--sans); font-weight: 400; font-size: .68rem; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-soft); text-align: left; padding: .6rem .8rem .6rem 0; border-bottom: 1px solid rgba(36,29,24,.25); }
.prose td { padding: .9rem .8rem .9rem 0; border-bottom: 1px solid rgba(36,29,24,.12); vertical-align: top; }
.prose td + td, .prose th + th { padding-left: .8rem; border-left: 1px solid rgba(36,29,24,.12); }
.prose iframe, .prose video { max-width: 100%; }
.post__foot { margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid rgba(36,29,24,.14); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; }
.post__author { font-size: .72rem; letter-spacing: .26em; text-transform: uppercase; color: var(--ink-soft); }
.post__tags { display: flex; flex-wrap: wrap; gap: .5rem; }
.post__tags a { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; border: 1px solid rgba(36,29,24,.25); padding: .35em .8em; transition: background .25s, color .25s; }
.post__tags a:hover { background: var(--ink); color: var(--cream); }
.bmore { background: var(--dark); color: #efe9dc; padding: clamp(3.5rem, 7vw, 5.5rem) clamp(1.4rem, 4vw, 4rem); }
.bmore h2 { font-family: var(--serif-2); font-weight: 500; text-transform: uppercase; letter-spacing: .28em; font-size: clamp(1.4rem, 2.4vw, 1.9rem); text-align: center; margin: 0 auto clamp(2rem, 4vw, 3rem); }
.bmore .blog__grid { max-width: 1240px; margin: 0 auto; }
.bmore .bcard p, .bmore .bcard__lang { color: rgba(239,233,220,.72); }
.bmore .bcard__more { border-color: #efe9dc; } .bmore .bcard__more:hover { color: var(--gold); border-color: var(--gold); }
.bmore .bcard h3 a:hover { color: var(--gold); }

@media (max-width: 900px) {
  .blog__grid { grid-template-columns: 1fr; }
  .btoolbar { top: 76px; font-size: .82rem; }
  .post__wrap { margin-top: -40px; }
}

/* ============ CONTACT / BOOK AN APPOINTMENT ============ */
.contact { padding: clamp(3.5rem, 7vw, 6rem) clamp(1.4rem, 4vw, 4rem); }
.contact__inner { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 1.25fr .85fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.cform label { display: block; font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 1.2rem; }
.cform label span { text-transform: none; letter-spacing: 0; opacity: .7; }
.cform input, .cform select, .cform textarea {
  display: block; width: 100%; margin-top: .5rem; padding: .85rem 1rem; font: inherit; font-size: 1rem; letter-spacing: 0; text-transform: none;
  color: var(--ink); background: #fff; border: 1px solid rgba(36,29,24,.25); border-radius: 0; transition: border-color .25s, box-shadow .25s;
}
.cform input:focus, .cform select:focus, .cform textarea:focus { outline: 0; border-color: var(--wine); box-shadow: 0 0 0 3px rgba(140,47,47,.12); }
.cform select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%), linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 2.4rem; }
.cform textarea { resize: vertical; min-height: 120px; }
.cform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.4rem; }
.cform__err { color: var(--wine); font-size: .92rem; margin: -.4rem 0 1rem; }
.cform__actions { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; margin-top: .4rem; }
.cform button.btn { font-family: var(--sans); cursor: pointer; background: none; }
.cform__alt { font-size: .9rem; color: var(--ink-soft); border-bottom: 1px solid rgba(36,29,24,.35); padding-bottom: 1px; transition: color .25s, border-color .25s; }
.cform__alt:hover { color: var(--wine); border-color: var(--wine); }
.cform__note { margin-top: 1.2rem; font-size: .8rem; color: var(--ink-soft); }
.cinfo { background: var(--cream-2); padding: clamp(1.8rem, 3vw, 2.6rem); border-radius: 0; }
.cinfo__addr { font-family: var(--serif-2); font-size: 1.45rem; line-height: 1.35; margin-bottom: 1.4rem; }
.cinfo__list { display: grid; grid-template-columns: auto 1fr; gap: .55rem 1.2rem; margin-bottom: 1.8rem; font-size: .95rem; }
.cinfo__list dt { font-size: .66rem; letter-spacing: .24em; text-transform: uppercase; color: var(--wine); padding-top: .2em; }
.cinfo__list dd { color: var(--ink-soft); }
.cinfo__list a { color: var(--ink); border-bottom: 1px solid rgba(36,29,24,.3); } .cinfo__list a:hover { color: var(--wine); border-color: var(--wine); }
.cinfo .atelier__map { display: inline-block; margin: 1rem 0 0 0; }
.cinfo__photo { margin: 1.8rem 0 0; border-radius: 0; overflow: hidden; }
.cinfo__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.cmap { max-width: 1240px; margin: 0 auto; padding: 0 clamp(1.4rem, 4vw, 4rem) clamp(2rem, 4vw, 3rem); }
.cmap iframe { width: 100%; height: clamp(300px, 40vw, 460px); border: 0; border-radius: 0; filter: saturate(.85) contrast(1.02); display: block; }
@media (max-width: 900px) {
  .contact__inner { grid-template-columns: 1fr; }
  .cform__row { grid-template-columns: 1fr; }
}

/* ============ ABOUT: scroll-zoom portrait ============ */
.zoom { position: relative; height: 280vh; background: var(--cream); }
.zoom__sticky { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; }
.zoom__frame {
  position: relative; margin: 0; width: min(46vw, 70vh * 0.8); aspect-ratio: 4 / 5;
  padding: 18px; background: #fff; box-shadow: 0 30px 80px rgba(36,29,24,.22);
  transform-origin: center center; will-change: transform;
}
.zoom__frame img { position: absolute; inset: 18px; width: calc(100% - 36px); height: calc(100% - 36px); object-fit: cover; display: block; }
.zoom__b { opacity: 0; }
.zoom__caption { margin-top: 1.4rem; font-size: .7rem; letter-spacing: .3em; text-transform: uppercase; color: var(--ink-soft); transition: opacity .4s; }
@media (max-width: 900px) {
  .zoom { height: 220vh; }
  .zoom__frame { width: min(78vw, 60vh * 0.8); padding: 12px; }
  .zoom__frame img { inset: 12px; width: calc(100% - 24px); height: calc(100% - 24px); }
}

/* ============ BESPOKE PRELOADER ============ */
.preloader { position: fixed; inset: 0; z-index: 400; background: var(--cream); color: var(--ink); overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(1.2rem, 2.5vh, 2rem); padding: 1.4rem; transition: opacity 1.4s ease; }
.preloader.is-done { pointer-events: none; }
.preloader__text { text-align: center; }
.preloader__eyebrow { font-size: .64rem; letter-spacing: .36em; text-transform: uppercase; color: var(--wine); opacity: 0; animation: plFade .9s ease .2s forwards; }
.preloader__title { font-family: var(--serif-2); font-weight: 500; text-transform: uppercase; font-size: clamp(2.4rem, 6vw, 4.6rem); line-height: 1; letter-spacing: .32em; margin: .8rem 0 0 .32em; opacity: 0; animation: plTitle 1.3s cubic-bezier(.2,.7,.2,1) .35s forwards; }
.preloader__pics { position: relative; width: min(36vh, 74vw); aspect-ratio: 3 / 4; }
/* each photo is a print: white border, soft shadow, dealt onto the pile with its own tilt */
.preloader__pics img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; border: 7px solid #fff; box-shadow: 0 14px 34px rgba(36,29,24,.22); will-change: transform, opacity; }
/* white corner brackets: top-left and bottom-right, sitting just outside the photo */
.preloader__pics::before, .preloader__pics::after { content: ""; position: absolute; width: 34px; height: 34px; border: 2px solid var(--ink); pointer-events: none; opacity: 0; animation: plFade .8s ease .6s forwards; }
.preloader__pics::before { left: -12px; top: -12px; border-right: 0; border-bottom: 0; }
.preloader__pics::after { right: -12px; bottom: -12px; border-left: 0; border-top: 0; }
.preloader__sub { font-family: var(--serif-2); font-style: italic; font-size: clamp(1rem, 1.6vw, 1.25rem); color: var(--ink-soft); text-align: center; opacity: 0; animation: plFade .9s ease .9s forwards; }
@keyframes plFade { to { opacity: 1; } }
@keyframes plTitle { from { opacity: 0; letter-spacing: .6em; transform: translateY(14px); } to { opacity: 1; letter-spacing: .32em; transform: none; } }
body.is-preloading { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .preloader { display: none; } }

/* ============ BESPOKE HERO: straight strip, arcs top and bottom make it bow inward ============ */
.shero { background: var(--cream); padding: calc(76px + clamp(3rem, 6vw, 5rem)) 0 clamp(2.5rem, 5vw, 4rem); overflow: hidden; }
.shero__text { position: relative; z-index: 3; text-align: center; max-width: 820px; margin: 0 auto clamp(1.6rem, 3vw, 2.4rem); padding: 0 1.4rem; }
.crumbs--ink { justify-content: center; color: var(--wine); }
.shero h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(2.4rem, 5.4vw, 4.6rem); line-height: 1.04; letter-spacing: -.01em; }
.shero__below { text-align: center; padding: 0 1.4rem; margin-top: clamp(2rem, 4vw, 3rem); }
.shero__lede { margin: 0 auto; max-width: 58ch; font-family: var(--serif-2); font-size: 1.25rem; line-height: 1.5; color: var(--ink-soft); }
.shero__cta { margin-top: 1.8rem; display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.strip { position: relative; overflow: hidden; --h: clamp(300px, 46vh, 520px); --dip: clamp(18px, 2.6vw, 34px); } /* overflow clips the arcs to the strip */
.strip__track { display: flex; gap: 18px; width: max-content; animation: marquee 60s linear infinite; }
.strip:hover .strip__track { animation-play-state: paused; }
.strip__card { position: relative; flex-shrink: 0; width: calc(var(--h) * 0.68); height: var(--h); border-radius: 0; overflow: hidden; background: var(--dark); }
.strip__card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.1s cubic-bezier(.2,.6,.2,1); }
.strip__card:hover img { transform: scale(1.05); }
.strip__card span { position: absolute; left: 0; right: 0; bottom: 0; padding: 2.4rem 1.1rem 1rem; font-size: .66rem; letter-spacing: .26em; text-transform: uppercase; color: #f4efe5; background: linear-gradient(to top, rgba(10,8,6,.75), transparent); opacity: 0; transition: opacity .35s; }
.strip__card:hover span { opacity: 1; }
/* the two cream arcs: wide ellipses sitting above and below, dipping into the strip at the centre */
.strip::before, .strip::after { content: ""; position: absolute; left: 50%; width: 160vw; height: calc(var(--dip) * 6); background: var(--cream); border-radius: 50%; transform: translateX(-50%); pointer-events: none; z-index: 2; }
.strip::before { top: calc(var(--dip) * -6 + var(--dip)); }
.strip::after { bottom: calc(var(--dip) * -6 + var(--dip)); }
@media (max-width: 900px) { .strip { --h: 260px; --dip: 14px; } .shero__lede { font-size: 1.05rem; } }
@media (prefers-reduced-motion: reduce) { .strip__track { animation: none; } }

/* ============ BOOKING: step by step over the atelier photo ============ */
.book { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: calc(76px + clamp(2.5rem, 5vw, 4rem)) 1.4rem clamp(3rem, 6vw, 5rem); background: var(--dark); overflow: hidden; }
.book__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.05); animation: heroSettle 2.4s cubic-bezier(.2,.6,.2,1) forwards; }
.book__veil { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(20,16,13,.62), rgba(20,16,13,.78)); }
.book__inner { position: relative; width: 100%; max-width: 860px; }
.book__head { text-align: center; color: #f4efe5; margin-bottom: clamp(1.8rem, 3vw, 2.4rem); }
.book__head h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(2.2rem, 4.4vw, 3.6rem); line-height: 1.08; }
.book__head > p:last-child { margin-top: .9rem; color: rgba(244,239,229,.78); }
.book__card { position: relative; background: var(--cream); color: var(--ink); border-radius: 0; padding: clamp(1.6rem, 3.6vw, 3rem); box-shadow: 0 40px 90px rgba(0,0,0,.38); }
.book__card::before { content: ""; position: absolute; inset: 10px; border: 1.5px dashed rgba(140,47,47,.22); border-radius: 0; pointer-events: none; }
.book__steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; gap: .8rem; margin-bottom: clamp(1.6rem, 3vw, 2.2rem); }
.book__steps li { font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); opacity: .5; border-top: 2px solid rgba(36,29,24,.14); padding-top: .75rem; transition: opacity .35s, border-color .35s; }
.book__steps li span { display: block; font-family: var(--serif-2); font-size: 1.15rem; letter-spacing: 0; color: var(--wine); margin-bottom: .1rem; }
.book__steps li.is-on, .book__steps li.is-done { opacity: 1; border-color: var(--wine); }
.book__steps li.is-done { cursor: pointer; }
.bstep { display: none; }
.bstep.is-on { display: block; animation: bstepIn .55s cubic-bezier(.2,.7,.2,1); }
@keyframes bstepIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }
.bstep h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 400; margin-bottom: 1.4rem; }
.bopts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cform label.bopt { position: relative; display: block; margin: 0; cursor: pointer; border: 1px solid rgba(36,29,24,.16); border-radius: 0; overflow: hidden; background: #fff; text-transform: none; letter-spacing: 0; font-size: 1rem; color: var(--ink); transition: border-color .25s, box-shadow .25s, transform .25s; }
.cform label.bopt:hover { transform: translateY(-2px); }
.bopt input, .bchip input { position: absolute; opacity: 0; pointer-events: none; }
.bopt img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.bopt > span { display: block; padding: 1rem 1.1rem 1.2rem; }
.bopt strong { display: block; font-family: var(--serif); font-weight: 500; font-size: 1.2rem; }
.bopt small { display: block; margin-top: .25rem; color: var(--ink-soft); font-size: .86rem; }
.bopt::after { content: "\2713"; position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border-radius: 50%; background: var(--wine); color: #fff; display: flex; align-items: center; justify-content: center; font-size: .9rem; opacity: 0; transform: scale(.6); transition: opacity .25s, transform .25s; }
.cform label.bopt.is-checked { border-color: var(--wine); box-shadow: 0 0 0 2px var(--wine); }
.bopt.is-checked::after { opacity: 1; transform: none; }
.bchips { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.6rem; }
.cform label.bchip { margin: 0; text-transform: none; letter-spacing: 0; font-size: .95rem; color: var(--ink); cursor: pointer; }
.bchip span { display: inline-block; padding: .7em 1.25em; border: 1px solid rgba(36,29,24,.25); border-radius: 30px; background: #fff; transition: background .25s, color .25s, border-color .25s; }
.bchip.is-checked span { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.book__cal { min-height: 680px; border-radius: 0; overflow: hidden; background: #fff; }
.book__cal .calendly-inline-widget { min-width: 280px; height: 680px; }
/* the Calendly frame fills the box (Calendly's own stylesheet is not loaded, so size it here) */
.book__cal iframe { display: block; width: 100% !important; min-width: 280px; height: 700px !important; border: 0; }
@media (max-width: 700px) { .book__cal iframe { height: 1000px !important; } .book__cal { min-height: 1000px; } }
.book__loading { padding: 3rem; text-align: center; color: var(--ink-soft); }
.book__nav[hidden] { display: none; }
.book__nav { display: flex; justify-content: space-between; align-items: center; margin-top: 1.8rem; gap: 1rem; }
.book__nav .book__next { margin-left: auto; cursor: pointer; font-family: var(--sans); }
.book__back { background: none; border: 0; font: inherit; font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-soft); cursor: pointer; padding: .6rem 0; }
.book__back:hover { color: var(--wine); }
.bstep--done { text-align: center; padding: 1.5rem 0 .5rem; }
.book__tick { display: inline-flex; width: 64px; height: 64px; border-radius: 50%; background: var(--wine); color: #fff; font-size: 1.7rem; align-items: center; justify-content: center; margin-bottom: 1.2rem; }
.bstep--done p { color: var(--ink-soft); max-width: 46ch; margin: 0 auto; }
.book__done-links { margin-top: 1.8rem; display: flex; gap: 1.4rem; justify-content: center; align-items: center; flex-wrap: wrap; }
.book__wa { font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--wine); }
.book__alt { text-align: center; margin-top: 1.4rem; font-size: .92rem; color: rgba(244,239,229,.8); }
.book__alt a { color: #fff; border-bottom: 1px solid rgba(255,255,255,.5); }
.contact__inner--visit { grid-template-columns: 1fr 1fr; align-items: stretch; }
.visit__photo { margin: 0; border-radius: 0; overflow: hidden; min-height: 360px; }
.visit__photo img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 700px) {
  .bopts { grid-template-columns: 1fr; }
  .bopt img { aspect-ratio: 16 / 9; }
  .book__steps { gap: .4rem; }
  .book__steps li { font-size: 0; }
  .book__steps li span { font-size: 1.05rem; }
  .contact__inner--visit { grid-template-columns: 1fr; }
}


/* ============ TYPE: Playfair headings, Inter text ============ */
body { font-weight: 400; letter-spacing: -.005em; }
.accent { color: var(--wine); }

/* ============ PROCESS: sticky photo, steps light up as you scroll ============ */
.process2 { background: var(--cream); color: var(--ink); padding: clamp(5rem, 9vw, 8rem) clamp(1.4rem, 4vw, 4rem); }
.process2__head { max-width: 1240px; margin: 0 auto clamp(3rem, 6vw, 5rem); display: grid; grid-template-columns: 1.2fr .8fr; gap: 3rem; align-items: start; }
.process2__head h2 { font-size: clamp(2.4rem, 5vw, 4.4rem); line-height: 1.08; }
.process2__head p { color: var(--ink-soft); font-size: 1.05rem; line-height: 1.7; padding-top: .6rem; }
.process2__body { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 6rem); }
.process2__media { position: relative; }
.process2__frame { position: sticky; top: 110px; aspect-ratio: 4 / 5; max-height: calc(100vh - 150px); overflow: hidden; background: var(--cream-2); }
.process2__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity .8s ease, transform 1.4s cubic-bezier(.2,.6,.2,1); }
.process2__frame img.is-on { opacity: 1; transform: none; }
.process2__steps { list-style: none; }
.pstep2 { border-top: 1px solid rgba(36,29,24,.16); padding: clamp(2.2rem, 4vw, 3.2rem) 0 clamp(4rem, 12vh, 9rem); opacity: .28; transition: opacity .5s ease; }
.pstep2:last-child { padding-bottom: clamp(2.2rem, 4vw, 3rem); }
.pstep2.is-on { opacity: 1; }
.pstep2 span { display: block; font-family: var(--sans); font-size: .85rem; font-weight: 500; color: var(--wine); margin-bottom: 1rem; }
.pstep2 h3 { font-family: var(--serif); font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 500; letter-spacing: -.01em; line-height: 1.1; margin-bottom: 1.1rem; }
.pstep2 p { color: var(--ink-soft); font-size: 1.02rem; line-height: 1.75; max-width: 46ch; }
.process2__cta { text-align: center; margin-top: clamp(2rem, 5vw, 4rem); }
@media (max-width: 900px) {
  .process2__head, .process2__body { grid-template-columns: 1fr; gap: 1.6rem; }
  .process2__frame { position: relative; top: 0; aspect-ratio: 4 / 3; }
  .pstep2 { opacity: 1; padding-bottom: 2.2rem; }
}


/* ============ HERO: headline and call to action over the final frame ============ */
.hero__endshade { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 1s ease .2s;
  background: linear-gradient(to right, rgba(14,11,9,.78) 0%, rgba(14,11,9,.45) 38%, rgba(14,11,9,0) 62%),
              linear-gradient(to top, rgba(14,11,9,.55) 0%, rgba(14,11,9,0) 45%); }
.hero__end { position: absolute; left: clamp(1.4rem, 5vw, 5rem); bottom: clamp(5rem, 17vh, 11rem); max-width: 40rem; color: #f7f3ea;
  opacity: 0; transform: translateY(20px); transition: opacity 1s ease .5s, transform 1s cubic-bezier(.2,.6,.2,1) .5s; pointer-events: none; }
.hero.is-played .hero__endshade { opacity: 1; }
.hero.is-played .hero__end { opacity: 1; transform: none; pointer-events: auto; }
.hero__end h2 { color: #fff; font-size: clamp(2.2rem, 4.4vw, 3.8rem); line-height: 1.08; margin-bottom: 1.1rem; }
.hero__end-lede { color: rgba(247,243,234,.85); font-size: 1.02rem; line-height: 1.7; max-width: 44ch; }
.hero__end-cta { display: flex; align-items: center; justify-content: flex-start; gap: 1rem; flex-wrap: wrap; margin-top: 1.8rem; }
.hero__end-cta .btn:hover { color: var(--dark); }
.hero__end-link { font-size: .72rem; letter-spacing: .24em; text-transform: uppercase; color: #f7f3ea; border-bottom: 1px solid rgba(247,243,234,.4); padding-bottom: 2px; transition: border-color .3s; }
.hero__end-link:hover { border-color: #f7f3ea; }
@media (max-width: 700px) {
  .hero__endshade { background: linear-gradient(to top, rgba(14,11,9,.85) 0%, rgba(14,11,9,.45) 55%, rgba(14,11,9,.1) 100%); }
  .hero__end { right: 1.4rem; bottom: 2.4rem; }
  .hero__end h2 { font-size: 1.9rem; }
  .hero__end-lede { font-size: .92rem; }
}


/* ============ REVIEW CARDS: Google-style (avatar, verified tick, G, stars + date, verified footer) ============ */
.rcard { background: #faf7f2; color: var(--ink); border: 1px solid rgba(36,29,24,.08); padding: 1.5rem 1.6rem 1.2rem; font-family: var(--sans); box-shadow: 0 10px 30px rgba(0,0,0,.18); }
.rcard::before, .rcard::after { display: none; }
.rcard__head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .9rem; }
.rcard__avatar { width: 46px; height: 46px; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; font-weight: 500; }
.rcard__who strong { display: flex; align-items: center; gap: .4rem; font-size: 1.05rem; font-weight: 500; color: var(--ink); }
.rcard__tick { width: 18px; height: 18px; flex-shrink: 0; }
.rcard__who small { display: block; margin-top: .15rem; font-size: .84rem; color: #6f6760; }
.rcard__g svg { width: 24px; height: 24px; display: block; }
.rcard__meta { display: flex; justify-content: space-between; align-items: center; margin-top: 1rem; }
.rcard .rcard__stars { color: #f4b400; letter-spacing: .14em; font-size: 1.05rem; }
.rcard__when { font-size: .84rem; color: #6f6760; }
.rcard blockquote { font-family: var(--sans); font-size: .96rem; line-height: 1.6; color: #2c2622; margin-top: .9rem; opacity: 1;
  display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; }
.rcard figcaption { margin-top: 1.1rem; padding-top: .9rem; border-top: 1px solid rgba(36,29,24,.12); display: flex; align-items: center; justify-content: flex-start; gap: .5rem;
  font-size: .7rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: #1e8e3e; }
.rcard figcaption svg { width: 16px; height: 16px; }

/* ============ REVIEWS: compact cards, stitched edge, plain rating, one column on phones ============ */
.gbadge { border: 0; background: none; padding: 0; margin-top: 1.8rem; }
.rcard { position: relative; padding: 1.15rem 1.25rem 1rem; }
.rcard::before { display: block; content: ""; position: absolute; inset: 6px; border: 1.2px dashed rgba(140,47,47,.38); background: none; pointer-events: none; }
.rcard__head { gap: .7rem; }
.rcard__avatar { width: 38px; height: 38px; font-size: .95rem; }
.rcard__who { min-width: 0; }
.rcard__who strong { font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.rcard__tick { width: 15px; height: 15px; vertical-align: -2px; margin-left: .3rem; display: inline-block; }
.rcard__who small { font-size: .76rem; white-space: nowrap; }
.rcard__g svg { width: 20px; height: 20px; }
.rcard__meta { margin-top: .8rem; gap: .8rem; flex-wrap: nowrap; }
.rcard .rcard__stars { font-size: .9rem; letter-spacing: .1em; white-space: nowrap; }
.rcard__when { font-size: .76rem; white-space: nowrap; }
.rcard blockquote { font-size: .88rem; line-height: 1.55; margin-top: .7rem; -webkit-line-clamp: 6; }
.rcard figcaption { margin-top: .9rem; padding-top: .75rem; font-size: .62rem; letter-spacing: .14em; white-space: nowrap; }
.rcard figcaption svg { width: 14px; height: 14px; flex-shrink: 0; }
@media (max-width: 700px) {
  .reviews__streams { grid-template-columns: 1fr; height: 460px; }
  .reviews__streams .stream-col:nth-child(2) { display: none; }
}


/* contact card: no underlines, social icons */
.cinfo__list a { border-bottom: 0; }
.cinfo__list dt { padding-top: .35em; }
.cinfo__social { display: flex; gap: .6rem; }
.cinfo__social a { width: 38px; height: 38px; border: 1px solid rgba(36,29,24,.22); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--ink); transition: background .3s, color .3s, border-color .3s; }
.cinfo__social a:hover { background: var(--wine); border-color: var(--wine); color: #fff; }
.cinfo__social svg { width: 17px; height: 17px; }

/* hero end: smaller headline kept to the left, gold line underneath */
.hero__end { max-width: 26rem; }
.hero__end h2 { font-size: clamp(2rem, 3.2vw, 2.9rem); margin-bottom: 1rem; }
.hero__end-sub { margin: 0; }
.hero__end-sub::after { display: none; }
.hero__end-cta { margin-top: 1.6rem; }
@media (max-width: 700px) { .hero__end h2 { font-size: 1.8rem; } }


/* bespoke strip: hidden until the intro finishes, then cards pop in one by one, then it scrolls */
.strip__card { opacity: 0; transform: translateY(22px) scale(.94); transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.2,1); }
.strip.is-live .strip__card { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * .12s); }
.strip:not(.is-scrolling) .strip__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .strip__card { opacity: 1; transform: none; transition: none; } }


/* ============ JOURNAL: blog layout with sidebar ============ */
.blog__head { text-align: center; margin-bottom: clamp(2rem, 4vw, 3rem); }
.blog__sub { margin-top: .5rem; font-size: .7rem; letter-spacing: .3em; text-transform: uppercase; color: var(--wine); }
.blog__layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.blog__main .blog__grid { grid-template-columns: 1fr 1fr; gap: 1.8rem 1.4rem; }
.blog__main .bcard__img img { aspect-ratio: 16 / 10; }
.blog__main .bcard__info { padding-top: 1rem; }
.blog__main .bcard h3 { font-size: 1.05rem; letter-spacing: .1em; margin: .45rem 0 .5rem; }
.blog__main .bcard p { font-size: .88rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.blog__main .bcard__more { margin-top: .6rem; font-size: .82rem; }
.blog__side { position: sticky; top: 100px; }
.bsearch input { width: 100%; padding: .85rem 1rem .85rem 2.4rem; font: inherit; font-size: .95rem; color: var(--ink); background: #fff; border: 1px solid rgba(36,29,24,.22); appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f6760' stroke-width='1.8'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 16px; background-position: .9rem center; }
.bsearch input:focus { outline: 0; border-color: var(--wine); box-shadow: 0 0 0 3px rgba(140,47,47,.12); }
.bside__block { margin-top: 2rem; }
.bside__block h4 { font-size: .66rem; letter-spacing: .3em; text-transform: uppercase; color: var(--wine); margin-bottom: .9rem; font-weight: 500; }
.btopics { display: flex; flex-direction: column; max-height: 420px; overflow: auto; border-top: 1px solid rgba(36,29,24,.12); }
.btopics a { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; font-size: .9rem; color: var(--ink-soft); border-bottom: 1px solid rgba(36,29,24,.08); transition: color .25s; }
.btopics a small { color: rgba(36,29,24,.4); font-size: .75rem; }
.btopics a:hover, .btopics a.is-active { color: var(--ink); }
.btopics a.is-active { font-weight: 500; }
.bside__cta { background: var(--cream-2); padding: 1.4rem; }
.bside__cta p { font-size: .9rem; color: var(--ink-soft); margin-bottom: 1rem; }
.blog__results-info { font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 1.4rem; }
.blog__main[data-searching] > .blog__grid:first-child, .blog__main[data-searching] > .bpager { display: none; }
@media (max-width: 900px) {
  .blog__layout { grid-template-columns: 1fr; }
  .blog__side { position: static; order: -1; }
  .bside__block { margin-top: 1.4rem; }
  .btopics { max-height: 200px; }
  .blog__main .blog__grid { grid-template-columns: 1fr; }
}


/* pricing: the photo sits in its box, and on hover grows to fill the whole card */
.pcard { position: relative; overflow: hidden; }
.pcard__spacer { display: block; aspect-ratio: 1 / 1; }
.pcard__img { position: absolute; inset: 0; aspect-ratio: auto; z-index: 2;
  clip-path: inset(var(--ct, 0px) var(--cr, 0px) var(--cb, 0px) var(--cl, 0px));
  transition: clip-path .65s cubic-bezier(.2,.7,.2,1); }
.pcard:hover .pcard__img, .pcard:focus-within .pcard__img { clip-path: inset(0); }
.pcard__text { position: relative; z-index: 1; }


/* ============ ATELIER TOUR: scroll walks the camera through the shop ============ */
.tour { position: relative; height: 420vh; background: var(--dark); }
.tour__stage { position: sticky; top: 0; height: 100vh; overflow: hidden; color: #f4efe5; }
.tour__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tour__intro { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; transition: opacity .6s, transform .6s; text-shadow: 0 2px 24px rgba(0,0,0,.5); }
.tour__intro h2 { color: #fff; font-size: clamp(2.4rem, 5vw, 4.2rem); margin: .6rem 0 .8rem; }
.tour__intro > p:last-child { font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; color: rgba(244,239,229,.8); }
@keyframes cue { 0% { transform: scaleY(0); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: top; } 56% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
.tour.is-moving .tour__intro { opacity: 0; transform: translate(-50%, -60%); pointer-events: none; }

/* the arrival: details on the left, a slowly drifting gallery on the right */
.tour__end { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(340px, 1fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center;
  padding: calc(76px + 2rem) clamp(1.4rem, 5vw, 5rem) 2.5rem; background: rgba(14,11,9,.82); opacity: 0; transition: opacity 1.1s ease; pointer-events: none; }
.tour.is-done .tour__end { opacity: 1; pointer-events: auto; }
.tour__details { opacity: 0; transform: translateY(18px); transition: opacity .9s ease .3s, transform .9s ease .3s; }
.tour.is-done .tour__details { opacity: 1; transform: none; }
.tour__details h2 { color: #fff; font-size: clamp(2rem, 3.4vw, 2.9rem); margin: .3rem 0 .7rem; }
.tour__addr { color: rgba(244,239,229,.78); line-height: 1.65; }
.tour__list { display: grid; grid-template-columns: auto 1fr; gap: .55rem 1.6rem; margin: 1.3rem 0 1.4rem; font-size: .95rem; }
.tour__list dt { font-size: .64rem; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); padding-top: .3em; }
.tour__list dd { color: rgba(244,239,229,.85); line-height: 1.6; }
.tour__list a { color: #fff; border-bottom: 1px solid rgba(255,255,255,.35); }
.tour__cta { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.tour__cta .btn:hover { color: var(--dark); }
.tour__map { font-size: .7rem; letter-spacing: .24em; text-transform: uppercase; color: #f4efe5; border-bottom: 1px solid rgba(244,239,229,.4); padding-bottom: 2px; }
.tgal { overflow: hidden; height: min(52vh, 460px); opacity: 0; transition: opacity 1.2s ease .5s;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent); }
.tour.is-done .tgal { opacity: 1; }
.tgal-wrap { position: relative; opacity: 0; transition: opacity 1.2s ease .5s; }
.tour.is-done .tgal-wrap { opacity: 1; }
.tgal { opacity: 1; transition: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.tgal.is-dragging { cursor: grabbing; }
.tgal__track { display: flex; gap: 16px; height: 100%; width: max-content; will-change: transform; }
.tgal__pic img { pointer-events: none; -webkit-user-drag: none; }
.tgal__nav { display: flex; justify-content: center; gap: 12px; margin-top: 16px; }
.tgal__btn { width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(244,239,229,.4); background: rgba(14,11,9,.35); color: #f4efe5; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .3s, border-color .3s, color .3s; }
.tgal__btn:hover { background: var(--gold); border-color: var(--gold); color: var(--dark); }
.tgal__btn svg { width: 16px; height: 16px; }
.tgal__pic { margin: 0; height: 100%; aspect-ratio: 4 / 5; overflow: hidden; flex-shrink: 0; }
.tgal__pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 900px) {
  .tour { height: 320vh; }
  .tour__end { grid-template-columns: 1fr; align-content: center; gap: 1.4rem; padding: calc(76px + 1rem) 1.4rem 1.6rem; overflow: hidden; }
  .tour__details h2 { font-size: 1.9rem; }
  .tour__list { margin: 1rem 0; font-size: .88rem; }
  .tgal { height: 32vh; }
}
@media (prefers-reduced-motion: reduce) { .tour { height: 100vh; } }


/* Instagram row: tiles queue in from left to right each time the row scrolls into view, then it drifts */
.insta__marquee .ipost { opacity: 0; transform: translateX(28px); transition: opacity .6s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.insta__marquee.is-queued .ipost { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * .11s); }
.insta__marquee:not(.is-queued) .insta__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .insta__marquee .ipost { opacity: 1; transform: none; transition: none; } }


/* card grids queue in left to right (main.js adds .qgrid and --q). Uses the
   `translate` property so each card keeps its own hover transform. */
.qgrid > * { opacity: 0; }
.qgrid.is-queued > * { animation: queueIn .95s cubic-bezier(.2,.6,.2,1) both; animation-delay: calc(var(--q, 0) * 130ms); }
@keyframes queueIn { from { opacity: 0; translate: 0 26px; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) { .qgrid > * { opacity: 1; } .qgrid.is-queued > * { animation: none; } }


/* home: the story in two moments, the full timeline lives on About */
.heritage--short .heritage__head { margin-bottom: clamp(2.4rem, 4vw, 3.4rem); }
.hcards { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 1120px; margin: 0 auto; }
.hcard { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--dark); color: #f4efe5; }
.hcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.92); transition: transform 1.4s cubic-bezier(.2,.6,.2,1), filter 1s ease; }
.hcard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(14,11,9,.9) 0%, rgba(14,11,9,.35) 45%, rgba(14,11,9,.05) 75%); }
.hcard__body { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; padding: clamp(1.4rem, 3vw, 2.4rem); }
.hcard__year { display: block; font-family: var(--serif-2); font-size: clamp(3rem, 6vw, 5rem); line-height: .9; color: var(--gold); }
.hcard h3 { font-size: clamp(1.3rem, 2vw, 1.7rem); margin: .7rem 0 .6rem; color: #fff; }
.hcard p { font-size: .95rem; line-height: 1.65; color: rgba(244,239,229,.86); max-width: 44ch; }
.hcard:hover img { transform: scale(1.05); filter: saturate(1); }
.hcards__cta { text-align: center; margin-top: clamp(2.2rem, 4vw, 3rem); }
@media (max-width: 760px) { .hcards { grid-template-columns: 1fr; } }
.hcards__cta .btn { border-color: var(--gold); color: var(--gold); }
.hcards__cta .btn:hover { background: var(--gold); color: var(--wine-deep); }


/* contact: the map sits beside the details card; the atelier photos drift underneath */
.cmap--side { max-width: none; margin: 0; padding: 0; height: 100%; }
.cmap--side iframe { height: 100%; min-height: 420px; }
.contact__gallery { max-width: 1240px; margin: clamp(2.2rem, 4vw, 3.2rem) auto 0; }
.tgal-wrap--static { opacity: 1; }
.tgal-wrap--static .tgal { height: clamp(260px, 30vw, 380px); }
.tgal-wrap--static .tgal__nav { justify-content: center; }
.tgal-wrap--static .tgal__btn { border-color: rgba(36,29,24,.28); background: transparent; color: var(--ink); }
.tgal-wrap--static .tgal__btn:hover { background: var(--ink); border-color: var(--ink); color: #f4efe5; }
@media (max-width: 900px) { .cmap--side iframe { min-height: 320px; } }


/* atelier photos: three different views, one inside and two outside */
.agal { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 14px; height: clamp(260px, 30vw, 380px); }
.agal__pic { margin: 0; overflow: hidden; height: 100%; }
.agal__pic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s cubic-bezier(.2,.6,.2,1); }
.agal__pic:hover img { transform: scale(1.04); }
.agal--tour { height: min(52vh, 460px); opacity: 0; transition: opacity 1.2s ease .5s; }
.tour.is-done .agal--tour { opacity: 1; }
@media (max-width: 900px) {
  .agal--tour { height: 30vh; }
  .agal--contact { grid-template-columns: 1fr 1fr; height: auto; }
  .agal--contact .agal__pic--wide { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
  .agal--contact .agal__pic:not(.agal__pic--wide) { aspect-ratio: 3 / 4; }
}

/* buttons: letters roll up and over on hover (main.js splits the text into letters) */
.roll { display: inline-block; position: relative; vertical-align: top; line-height: 1.25; perspective: 400px; white-space: nowrap; }
.roll__row { display: block; }
.roll__row--b { position: absolute; left: 0; top: 0; }
.roll__ch { display: inline-block; backface-visibility: hidden; transition: transform .6s cubic-bezier(.65,0,.35,1), opacity .6s cubic-bezier(.65,0,.35,1); transition-delay: calc(var(--d) * 22ms); }
.roll__row--a .roll__ch { transform-origin: 50% 0; }
.roll__row--b .roll__ch { transform-origin: 50% 100%; transform: translateY(100%) rotateX(-90deg); opacity: 0; }
:is(a, button):hover > .roll .roll__row--a .roll__ch, :is(a, button):focus-visible > .roll .roll__row--a .roll__ch { transform: translateY(-100%) rotateX(90deg); opacity: 0; }
:is(a, button):hover > .roll .roll__row--b .roll__ch, :is(a, button):focus-visible > .roll .roll__row--b .roll__ch { transform: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .roll__ch { transition: none !important; } }


/* about: the photo opens from a small square to full screen, then the reasons */
.grow { position: relative; height: 230vh; background: var(--cream); }
.grow__stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.grow__frame { --s: min(34vmin, 320px); position: absolute; inset: 0;
  clip-path: inset(calc((100vh - var(--s)) / 2 * (1 - var(--g, 0))) calc((100% - var(--s)) / 2 * (1 - var(--g, 0)))); will-change: clip-path; }
.grow__frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transform: scale(calc(1.18 - .18 * var(--g, 0))); }
.grow__frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(14,11,9,.78) 0%, rgba(14,11,9,.2) 45%, rgba(14,11,9,0) 70%); opacity: var(--g, 0); }
.grow__text { position: absolute; left: 0; right: 0; bottom: clamp(2.4rem, 8vh, 5rem); text-align: center; color: #fff; padding: 0 1.4rem; opacity: 0; transform: translateY(20px); transition: opacity .8s ease, transform .9s cubic-bezier(.2,.6,.2,1); }
.grow.is-full .grow__text { opacity: 1; transform: none; }
.grow__text h2 { color: #fff; max-width: 18ch; margin: 0 auto; }
.grow__text .eyebrow { margin-bottom: 1rem; }
.why { padding: clamp(4.5rem, 8vw, 7rem) clamp(1.4rem, 4vw, 4rem); }
.why__head { text-align: center; }
.why__head h2 { font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 400; }
.why__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.4rem, 2.6vw, 2.6rem); max-width: 1240px; margin: clamp(2.4rem, 4vw, 3.4rem) auto 0; }
.why__grid article { border-top: 1px solid rgba(36,29,24,.2); padding-top: 1.4rem; }
.why__grid span { font-family: var(--serif); font-style: italic; color: var(--gold); font-size: 1.05rem; }
.why__grid h3 { font-size: 1.25rem; margin: .7rem 0 .6rem; }
.why__grid p { font-size: .94rem; line-height: 1.7; color: var(--ink-soft); }
@media (max-width: 900px) { .why__grid { grid-template-columns: 1fr 1fr; } .grow { height: 200vh; } }
@media (max-width: 560px) { .why__grid { grid-template-columns: 1fr; } }


/* footer: logo and socials on the left, page columns flush right */
.footer__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 3rem 4rem; padding-bottom: clamp(2.6rem, 5vw, 4rem); border-bottom: 1px solid rgba(239,233,220,.12); }
.footer__left { display: flex; flex-direction: column; align-items: flex-start; gap: 1.8rem; }
.footer__name { font-size: clamp(1.9rem, 2.6vw, 2.4rem); }
.footer__script { font-size: 1rem; }
.footer .footer__cols { display: grid; grid-template-columns: repeat(3, auto); gap: 2rem clamp(3rem, 6vw, 6rem); padding: 0; margin-left: auto; }
.footer .footer__cols h4, .footer .footer__cols .footer__h { font-family: var(--serif-2); font-size: 1.35rem; font-weight: 500; letter-spacing: .02em; text-transform: none; color: #f4efe5; margin-bottom: 1rem; }
.footer .footer__cols a { font-size: 1rem; margin-bottom: .75rem; }
@media (max-width: 900px) {
  .footer__top { flex-direction: column; }
  .footer .footer__cols { grid-template-columns: 1fr 1fr; margin-left: 0; width: 100%; }
}
@media (max-width: 520px) { .footer .footer__cols { grid-template-columns: 1fr; } }


/* home statement: sewn in word by word near the middle of the screen */
.statement h2 { position: relative; }
.sw { --w: 0; display: inline-block; color: rgba(36,29,24, calc(.12 + .88 * var(--w))); transform: translateY(calc((1 - var(--w)) * .32em)); }
.statement__body { opacity: 0; transform: translateY(14px); transition: opacity .8s ease, transform .9s cubic-bezier(.2,.6,.2,1); }
.statement.is-sewn .statement__body { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .statement__body { opacity: 1; transform: none; } }


/* about header: the growing photo carries the page title */
.grow--header { margin-top: 0; }
.grow__text h1 { color: #fff; font-family: var(--serif); font-weight: 500; font-size: clamp(2.3rem, 5vw, 4.4rem); line-height: 1.05; max-width: 16ch; margin: 0 auto; }
.grow__lede { margin: 1.1rem auto 0; max-width: 52ch; color: rgba(244,239,229,.88); font-size: 1.05rem; line-height: 1.6; }



@media (max-width: 899px) {
  .sw { color: var(--ink) !important; transform: none !important; }
  .statement__body { opacity: 1; transform: none; }
}

/* home hero: the two buttons sit side by side */
.hero__end-cta .btn { padding: 1.05em 2em; white-space: nowrap; }
@media (min-width: 600px) { .hero__end-cta { flex-wrap: nowrap; } }



/* process: the photo pins in the middle of the screen; steps are closer together and the last one
   can reach the middle while the photo is still pinned, so nothing slides away mid-read */
@media (min-width: 901px) {
  .process2__frame { height: min(70vh, 620px); aspect-ratio: auto; max-height: none;
    top: calc((100vh - min(70vh, 620px)) / 2 + 38px); }
  .pstep2 { padding: clamp(1.8rem, 3vw, 2.6rem) 0 clamp(2.4rem, 7vh, 4rem); }
  .pstep2:last-child { padding-bottom: calc(min(70vh, 620px) / 2 + 9.5rem); }
}


/* pricing cards: when the photo fills the card, the name, price and lead time stay readable in the middle */
.pcard__info { display: flex; flex-direction: column; align-items: center; gap: .35rem; margin-bottom: .6rem; color: #f4efe5; transform: translateY(8px); transition: transform .4s ease; }
.pcard:hover .pcard__info, .pcard:focus-within .pcard__info { transform: none; }
.pcard__oname { font-size: .78rem; letter-spacing: .28em; text-transform: uppercase; }
.pcard__ofrom { font-family: var(--serif-2); font-size: clamp(1.6rem, 2.2vw, 2rem); font-weight: 600; line-height: 1.1; color: #fff; }
.pcard__olead { font-size: .8rem; color: rgba(244,239,229,.85); }
.pcard__over { background: rgba(14,11,9,.52); }


/* headings: regular weight with fine smoothing everywhere, so nothing reads too bold */
h1, h2, h3, .phero h1, .shero h1, .book__head h1, .grow__text h1, .hero__end h2, .wcard__body h3, .pstep h3, .pstep2 h3,
.hub__group h3, .pricing__title, .blog__title, .bcard h3, .post h1, .prose h2, .prose h3, .bmore h2, .preloader__title,
.bopt strong, .gbadge strong, .lyear, .pcard__from, .pcard__ofrom, .rel span, .hcard__year {
  font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }


/* footer copyright line in the serif used for the footer titles */
.footer__bottom p { font-family: var(--serif-2); font-size: 1rem; letter-spacing: .03em; }

/* hero: decorative layers never catch clicks; the text block and its buttons sit on top */
.hero__shade, .hero__endshade, .hero__still, .hero__video, .hero video { pointer-events: none; }
.hero__end { z-index: 5; }


/* section labels: no red, no little line underneath; quiet grey on light, gold on dark */
.eyebrow { color: var(--ink-soft); }
.eyebrow--light { color: var(--gold); }
.eyebrow--line::after, .eyebrow--light::after { display: none !important; }


/* "Built on legacy." and "Defined by craftsmanship." each hold one line */
.hline { display: block; }
@media (min-width: 900px) {
  .hline { white-space: nowrap; }
  .hero__end { max-width: min(92vw, 72rem); }
  .grow__text h1 { max-width: none; }
}


/* visit details: no card, the text sits straight on the darkened photo */
.dcard { background: none; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 0; }
.visit::after { background: linear-gradient(to right, rgba(14,11,9,.86) 0%, rgba(14,11,9,.6) 50%, rgba(14,11,9,.3) 100%); }


/* home hero: headline, subtitle and buttons centred at the bottom */
.hero__end { left: 0 !important; right: 0 !important; margin: 0 auto; max-width: min(92vw, 60rem) !important; text-align: center; bottom: clamp(4rem, 11vh, 7rem); }
.hero__end-cta { justify-content: center !important; }
.hero__endshade { background: linear-gradient(to top, rgba(14,11,9,.82) 0%, rgba(14,11,9,.45) 35%, rgba(14,11,9,.05) 65%) !important; }


/* wardrobe cards: no numbers or red lines */
.wcard__num { display: none !important; }
@media (max-width: 900px) { .wcard__vtitle { left: 22px; } }


/* headings never run past two lines: no narrow width caps, side-column headings sit above their text,
   and main.js steps the size down on any heading that would still need a third line */
h1, h2 { text-wrap: balance; }
.phero h1, .pfeat__inner h2, .process2--page .process2__head h2, .pblock h2, .grow__text h1, .grow__text h2,
.cta-band h2, .prev h2, .why__head h2, .hub__head h2, .tour__details h2, .dcard h2 { max-width: none; }
.pblock { grid-template-columns: 1fr; gap: 1rem; }


/* Bespoke dropdown: group titles in the heading serif, page links in plain text (like the footer) */
.nav__drop h5 { font-family: var(--serif-2); font-size: 1.3rem; font-weight: 500; letter-spacing: .02em; text-transform: none; color: #f4efe5; margin: 0 0 .6rem; }
.nav__drop a:not(.nav__drop-all) { font-family: var(--sans); font-size: .92rem; letter-spacing: .01em; padding: .32rem 0; }

/* top menu: thin serif in capitals with wide spacing, like the current ronandrich.com */
.nav__links > li > a, .nav__cta { font-family: var(--serif-2); font-weight: 400; font-size: .8rem; letter-spacing: .18em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* smaller logo in the menu bar */
.nav__brand-name { font-size: 1.1rem; }
.nav__brand-sub { font-size: .69rem; }


/* buttons: white instead of gold (dark ink buttons on light backgrounds stay dark) */
.btn:not(.btn--ink), .phero__cta .btn, .cta-band .btn, .hcards__cta .btn, .tour__cta .btn, .hero__end-cta .btn, .pcard__over .btn {
  border-color: #f4efe5; color: #f4efe5; }
.btn:not(.btn--ink):hover, .phero__cta .btn:hover, .cta-band .btn:hover, .hcards__cta .btn:hover, .tour__cta .btn:hover, .hero__end-cta .btn:hover, .pcard__over .btn:hover {
  background: #f4efe5; border-color: #f4efe5; color: var(--dark); }


/* dropdown: three columns (Suits, Shirts, Trousers), the all-services link along the bottom */
.nav__drop-inner { grid-template-columns: auto auto auto; gap: 0 3rem; min-width: 640px; }
.nav__drop-foot { grid-column: 1 / -1; margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.08); }
.nav__drop-foot .nav__drop-all { margin-top: 0; }


/* Bespoke dropdown: a full-width panel that unrolls from under the menu bar; the columns stay aligned
   with the logo, and fade in one after another */
.nav__links > li.nav__has-drop { position: static; }
.nav__drop { position: absolute; top: 100%; left: 0; right: 0; padding: 0; opacity: 1; transform: none;
  background: rgba(20,16,13,.97); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255,255,255,.06); box-shadow: 0 30px 60px rgba(0,0,0,.35);
  clip-path: inset(0 0 100% 0); visibility: hidden;
  transition: clip-path .5s cubic-bezier(.65,0,.25,1), visibility 0s .5s; }
.nav__links > li:hover .nav__drop, .nav__links > li:focus-within .nav__drop {
  clip-path: inset(0 0 0 0); visibility: visible; opacity: 1; transform: none;
  transition: clip-path .6s cubic-bezier(.65,0,.25,1), visibility 0s; }
.nav__drop-inner { background: none; border: 0; box-shadow: none; backdrop-filter: none; min-width: 0;
  grid-template-columns: repeat(3, minmax(0, 260px)); gap: 0 clamp(2.5rem, 5vw, 5rem);
  padding: clamp(2rem, 3.5vw, 2.8rem) clamp(1.2rem, 4vw, 3.2rem) clamp(1.6rem, 3vw, 2.2rem); }
.nav__drop-inner > * { opacity: 0; transform: translateY(-12px); transition: opacity .35s ease, transform .45s cubic-bezier(.2,.6,.2,1); }
.nav__links > li:hover .nav__drop-inner > *, .nav__links > li:focus-within .nav__drop-inner > * { opacity: 1; transform: none; }
.nav__links > li:hover .nav__drop-inner > :nth-child(1), .nav__links > li:focus-within .nav__drop-inner > :nth-child(1) { transition-delay: .18s; }
.nav__links > li:hover .nav__drop-inner > :nth-child(2), .nav__links > li:focus-within .nav__drop-inner > :nth-child(2) { transition-delay: .26s; }
.nav__links > li:hover .nav__drop-inner > :nth-child(3), .nav__links > li:focus-within .nav__drop-inner > :nth-child(3) { transition-delay: .34s; }
.nav__links > li:hover .nav__drop-inner > :nth-child(4), .nav__links > li:focus-within .nav__drop-inner > :nth-child(4) { transition-delay: .42s; }
.nav__drop-foot { border-top-color: rgba(255,255,255,.1); }
@media (prefers-reduced-motion: reduce) { .nav__drop, .nav__drop-inner > * { transition: none !important; } }


/* Bespoke dropdown: back to a compact box under the link (not full width); it still unrolls from the top */
.nav__links > li.nav__has-drop { position: relative; }
.nav__drop { left: -1.6rem; right: auto; width: max-content; border: 1px solid rgba(255,255,255,.08); }
.nav__drop-inner { grid-template-columns: auto auto auto; gap: 0 2.6rem; padding: 1.5rem 1.8rem 1.4rem; }
.nav__drop-foot { margin-top: .9rem; padding-top: .8rem; }
.nav__drop a:not(.nav__drop-all) { font-weight: 300; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.footer .footer__cols a { font-weight: 300; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }


/* timeline labels: capitals, upright and light */
.lyear, .lyear--text { font-style: normal !important; font-weight: 300 !important; text-transform: uppercase; letter-spacing: .14em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.lyear { font-size: clamp(2.2rem, 4.6vw, 3.4rem); }
.lyear--text { font-size: clamp(1.4rem, 2.8vw, 2.2rem); }

/* Tour intro sits on the page, not the pinned screen, so the browser scrolls it natively over the walk */
.tour__intro { top: 50vh; z-index: 3; width: max-content; max-width: 90vw; transition: none; pointer-events: none; }
.tour.is-moving .tour__intro { opacity: 1; transform: translate(-50%, -50%); }

/* footer logo and copyright at a calmer size */
.footer__name { font-size: clamp(1.25rem, 1.7vw, 1.45rem); letter-spacing: .24em; }
.footer__script { font-size: .78rem; letter-spacing: .4em; margin-top: 5px; }
.footer__bottom p { font-size: .84rem; letter-spacing: .04em; }


/* legal pages: terms and privacy */
.page--legal .nav { background: rgba(20,16,13,.92); }
.legal { max-width: 1180px; margin: 0 auto; padding: calc(76px + clamp(2.5rem, 5vw, 4rem)) clamp(1.4rem, 4vw, 4rem) clamp(4rem, 8vw, 6.5rem); }
.legal__head { text-align: center; margin-bottom: clamp(2rem, 4vw, 3rem); }
.legal__head h1 { font-family: var(--serif-2); font-weight: 400; text-transform: uppercase; letter-spacing: .16em; font-size: clamp(1.7rem, 3.4vw, 2.6rem); line-height: 1.25; }
.legal__date { margin-top: .9rem; font-size: .72rem; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-soft); }
.legal__summary { max-width: 820px; margin: 0 auto clamp(3rem, 6vw, 4.5rem); background: #fff; border: 1px solid rgba(36,29,24,.1); padding: clamp(1.6rem, 3vw, 2.4rem) clamp(1.4rem, 3.5vw, 2.8rem); }
.legal__summary h2 { font-family: var(--serif-2); font-weight: 400; font-size: 1.45rem; margin-bottom: 1rem; }
.legal__summary ul { list-style: none; padding: 0; }
.legal__summary li { position: relative; padding-left: 1.4rem; margin-bottom: .65rem; color: var(--ink-soft); line-height: 1.6; }
.legal__summary li::before { content: ""; position: absolute; left: 0; top: .66em; width: 5px; height: 5px; background: var(--gold); transform: rotate(45deg); }
.legal__summary p { margin-top: 1rem; font-size: .92rem; color: var(--ink-soft); }
.legal__summary a, .terms__more a { text-decoration: underline; text-underline-offset: 3px; }
.legal__grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.legal__toc { position: sticky; top: 110px; max-height: calc(100vh - 140px); overflow: auto; }
.legal__toc p { font-size: .68rem; letter-spacing: .26em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: .9rem; }
.legal__toc ol { list-style: none; padding: 0; counter-reset: toc; border-left: 1px solid rgba(36,29,24,.14); }
.legal__toc li { counter-increment: toc; }
.legal__toc a { display: block; padding: .32rem 0 .32rem 1rem; font-size: .86rem; font-weight: 300; color: var(--ink-soft); transition: color .25s; margin-left: -1px; border-left: 1px solid transparent; }
.legal__toc a::before { content: counter(toc) ". "; }
.legal__toc a:hover, .legal__toc a.is-on { color: var(--ink); border-left-color: var(--ink); }
.legal__body { max-width: 760px; }
.legal__sec { scroll-margin-top: 110px; padding-bottom: 1.4rem; }
.legal__sec + .legal__sec { border-top: 1px solid rgba(36,29,24,.1); padding-top: 1.2rem; }
.legal__body.prose h2 { text-transform: none; letter-spacing: .01em; font-size: clamp(1.35rem, 2.2vw, 1.7rem); font-weight: 400; margin-top: 1rem; }
.legal__body.prose h2 span { color: var(--ink-soft); margin-right: .3rem; }
.legal__body.prose p, .legal__body.prose li { color: var(--ink-soft); }
.legal__body.prose strong { color: var(--ink); }
.terms__more { margin-top: 1.4rem; font-size: .92rem; }
@media (max-width: 860px) {
  .legal__grid { grid-template-columns: 1fr; }
  .legal__toc { position: static; max-height: none; border-bottom: 1px solid rgba(36,29,24,.12); padding-bottom: 1.4rem; }
}
.footer__bottom { align-items: center; }
.footer__legal { display: flex; gap: 1.6rem; }
.footer__legal a { font-family: var(--sans); font-size: .78rem; font-weight: 300; letter-spacing: .04em; transition: opacity .3s; }
.footer__legal a:hover { opacity: 1; color: #fff; }

/* FAQ page: the legal layout with grouped questions */
.faqp__lede { max-width: 560px; margin: 1rem auto 0; color: var(--ink-soft); }
.faqp__lede a { text-decoration: underline; text-underline-offset: 3px; }
.faq.faqp { max-width: 760px; margin: 0; padding: 0; }
.faqp__group { padding-bottom: 2.4rem; }
.faqp__group + .faqp__group { border-top: 0; padding-top: 0; }
.faq.faqp h2 { text-align: left; font-family: var(--serif-2); font-weight: 400; font-size: clamp(1.35rem, 2.2vw, 1.7rem); margin: 0 0 1rem; }
.faqp details:last-of-type { border-bottom: 1px solid rgba(36,29,24,.2); }
.faqp details p a { text-decoration: underline; text-underline-offset: 3px; }
.page--faq .legal__toc a::before { content: none; }

/* footer: the bottom row (copyright, FAQ, terms, privacy) always sits clear above the WhatsApp button */
.footer { padding-bottom: calc(22px + 58px + 1.4rem); }
@media (min-width: 1081px) { .footer { padding-bottom: calc(28px + 62px + 1.2rem); } }
.footer__legal { flex-wrap: wrap; gap: .6rem 1.6rem; }
@media (max-width: 700px) { .footer__bottom { flex-direction: column; align-items: flex-start; } }
/* link from each page's FAQ block to the full FAQ page */
.faq__all { text-align: center; margin-top: 2rem; font-size: .92rem; }
.faq__all a { text-decoration: underline; text-underline-offset: 3px; }

/* timeline (desktop): each entry's text centred in its own column, not pushed against the thread */
@media (min-width: 901px) {
  .stitch .stitch__text, .stitch--left .stitch__text, .stitch--right .stitch__text {
    display: flex; flex-direction: column; align-items: center; text-align: center; padding-left: 0; padding-right: 0; }
  .stitch .stitch__text p, .stitch--right .stitch__text p { text-align: center; margin-left: auto; margin-right: auto; }
  .stitch .lyear { justify-content: center; }
}

/* phones: the intro photo fills the block behind the words, darkened so white text reads over it
   (the two-column rule used to win over the phone override because it came later in the file) */
@media (max-width: 760px) {
  .pintro { position: relative; display: block; isolation: isolate; padding: clamp(4rem, 14vw, 6rem) 1.6rem; min-height: 78vh;
    display: flex; flex-direction: column; justify-content: flex-end; color: #fff; }
  .pintro figure { position: absolute; inset: 0; z-index: -2; margin: 0; }
  .pintro img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: 50% 30%; }
  .pintro::before { content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(to top, rgba(14,11,9,.88) 0%, rgba(14,11,9,.62) 55%, rgba(14,11,9,.28) 100%); }
  .pintro h2, .pintro p, .pintro .eyebrow { color: #fff; }
  .pintro p { color: rgba(244,239,229,.9); }
  .pintro .eyebrow { color: rgba(244,239,229,.8); }
  .pintro .eyebrow--line::after { background: var(--gold); }
  .pintro a { color: #fff; }
  .pintro .reveal, .pintro figure.reveal { opacity: 1; transform: none; }
  /* About header: a full-screen photo straight away, no growing square */
  .grow--header { height: auto; }
  .grow--header .grow__stage { position: relative; height: 92vh; min-height: 560px; }
  .grow--header .grow__frame { --g: 1; clip-path: none; }
  .grow--header .grow__frame img { transform: none; }
  .grow--header .grow__frame::after { opacity: 1; }
  .grow--header .grow__text { opacity: 1; transform: none; }
}


/* phones: the floating WhatsApp button steps aside while the booking calendar is on screen */
.wa-float { transition: transform .3s, box-shadow .3s, opacity .35s, visibility .35s; }
@media (max-width: 900px) { body.wa-yield .wa-float { opacity: 0; visibility: hidden; transform: translateY(20px); pointer-events: none; } }

/* phones: the footer's bottom row (copyright and the FAQ, terms, privacy links) centred */
@media (max-width: 700px) {
  .footer__bottom { align-items: center; text-align: center; }
  .footer__legal { justify-content: center; width: 100%; }
}

/* ================= phones: centred, roomy, thumb-friendly ================= */
@media (max-width: 700px) {
  /* page heroes */
  .phero { min-height: 88svh; padding: 6.5rem 1.4rem 3rem; text-align: center; justify-content: center; }
  .phero__inner { display: flex; flex-direction: column; align-items: center; }
  .crumbs { justify-content: center; font-size: .6rem; letter-spacing: .22em; gap: .3rem .6rem; }
  .crumbs li + li::before { margin-right: .6rem; }
  .phero h1 { max-width: none; margin-left: auto; margin-right: auto; }
  .phero__lede { margin-left: auto; margin-right: auto; font-size: 1rem; line-height: 1.65; }
  .phero__cta { flex-direction: column; align-items: stretch; width: 100%; max-width: 340px; gap: .8rem; }
  .phero__cta .btn { width: 100%; justify-content: center; padding-left: 1rem; padding-right: 1rem; }
  /* section heads, ledes and short blocks */
  .pintro > div, .pfeat__inner > h2, .pfeat__lede, .process2__head, .hub__head, .related__head, .prev__head, .pprice__inner,
  .why__head, .faq > h2, .cta-band, .consult, .statement, .shero__text, .book__head, .legal__head, .blog__head, .pricing__title, .pricing__lede {
    text-align: center; }
  .pintro p, .pfeat__lede, .process2__head p, .hub__lede, .pprice__lede { margin-left: auto; margin-right: auto; }
  .eyebrow--line::after { margin-left: auto; margin-right: auto; }
  .process2__head h2, .pfeat__inner h2, .hub__head h2, .related__head h2 { margin-left: auto; margin-right: auto; }
  .pfeat__grid > div, .fcard__body, .forcard, .pcard__info { text-align: center; }
  .pfeat__more { justify-content: center; }
  .process2__cta, .pblock__more, .faq__all { text-align: center; }
  /* buttons in sections: full width and centred */
  .cta-band .btn, .process2__cta .btn, .consult .btn, .dcard .btn, .tour__cta .btn { width: 100%; max-width: 340px; justify-content: center; }
  .hero__end-cta { flex-direction: column; align-items: center; gap: .8rem; }
  .hero__end-cta .btn { width: 100%; max-width: 320px; justify-content: center; }
  /* footer: everything centred */
  .footer__top { flex-direction: column; align-items: center; text-align: center; gap: 2.4rem; }
  .footer__left { align-items: center; }
  .footer .footer__cols { grid-template-columns: 1fr; margin: 0; gap: 1.8rem; text-align: center; justify-items: center; }
}

/* ================= phones: no sideways scrolling, readable labels ================= */
@media (max-width: 700px) {
  .pfeat__grid, .pfeat__grid--3 { grid-template-columns: minmax(0, 1fr); }
  .blog__layout { grid-template-columns: minmax(0, 1fr); }
  .blog__grid { grid-template-columns: minmax(0, 1fr); }
  .bcard, .bcard__info { min-width: 0; }
  .prose table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: normal; }
  .btn { white-space: normal; text-align: center; line-height: 1.4; font-size: .74rem; }
  h1, h2, h3, p, li, a { overflow-wrap: break-word; }
  .crumbs, .crumbs a, .crumbs li { font-size: .68rem; }
  .eyebrow, .pcard__explore, .ornament span, .tour__map, .bcard__lang, dt, small, .is-all { font-size: max(.72rem, 11.5px); }
  .nav__brand-sub { font-size: .72rem; }
}

@media (max-width: 700px) {
  .tour__list dt, .dcard dt, .reviews__side .ornament, .reviews__side .ornament span, .mobile-menu__group > span, .nav__drop .is-all, a.is-all,
  .pcard__over .btn, .pcard .pcard__explore, .gbadge small, .prev__rating span, .strip__card span { font-size: 11.5px; }
}

/* journal posts written in the CMS: photo + text, galleries, questions, closing invitation */
.prose .cb-img--wide { margin-left: calc(-1 * clamp(1.4rem, 4vw, 3rem)); margin-right: calc(-1 * clamp(1.4rem, 4vw, 3rem)); }
.prose .cb-img--wide img { width: 100%; }
.prose .cb-two { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.2rem, 3vw, 2rem); align-items: center; margin: 2.2rem 0; }
.prose .cb-two figure { margin: 0; }
.prose .cb-two img { margin: 0; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.prose .cb-two--right figure { order: 2; }
.prose .cb-two > div > *:first-child { margin-top: 0; }
.prose .cb-two > div > * + * { margin-top: 1rem; }
.prose .cb-gallery { display: grid; gap: .8rem; margin: 2rem 0; }
.prose .cb-gallery--2 { grid-template-columns: 1fr 1fr; }
.prose .cb-gallery--3 { grid-template-columns: repeat(3, 1fr); }
.prose .cb-gallery figure { margin: 0; }
.prose .cb-gallery img { margin: 0; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.prose blockquote cite { display: block; margin-top: .6rem; font-style: normal; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.prose blockquote p { font-family: var(--serif-2); font-size: 1.35rem; line-height: 1.45; color: var(--ink); }
.prose .cb-faq { margin: 2rem 0; }
.prose .cb-faq details { border-top: 1px solid rgba(36,29,24,.18); }
.prose .cb-faq details:last-child { border-bottom: 1px solid rgba(36,29,24,.18); }
.prose .cb-faq summary { cursor: pointer; list-style: none; font-family: var(--serif-2); font-size: 1.15rem; padding: 1rem 2rem 1rem 0; position: relative; }
.prose .cb-faq summary::-webkit-details-marker { display: none; }
.prose .cb-faq summary::after { content: "+"; position: absolute; right: .2rem; top: 50%; transform: translateY(-50%); font-size: 1.4rem; font-weight: 300; transition: transform .3s; }
.prose .cb-faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.prose .cb-faq details p { margin: 0 0 1.2rem; color: var(--ink-soft); }
.prose .cb-cta { background: var(--dark); color: #f4efe5; text-align: center; padding: clamp(2rem, 5vw, 3rem) 1.6rem; margin: 2.6rem 0 0; }
.prose .cb-cta h3 { color: #fff; margin-top: 0; }
.prose .cb-cta p { color: rgba(244,239,229,.82); margin: .6rem auto 1.4rem; max-width: 46ch; }
.prose .cb-cta .btn { text-decoration: none; border-color: #f4efe5; color: #f4efe5; }
.prose .cb-cta .btn:hover { background: #f4efe5; color: var(--dark); }
@media (max-width: 700px) {
  .prose .cb-two { grid-template-columns: 1fr; }
  .prose .cb-two--right figure { order: 0; }
  .prose .cb-gallery--3 { grid-template-columns: 1fr 1fr; }
}

/* ===== TYPE TRIAL: copy ronandrich.com exactly (serif headings in capitals with wide spacing,
   regular weight, smaller sizes; Cabin text; thin antialiased rendering). To go back, delete this block. ===== */
:root {
  --serif: "New York", "Iowan Old Style", "Apple Garamond", Baskerville, "Source Serif 4", "Times New Roman", serif;
  --serif-2: "New York", "Iowan Old Style", "Apple Garamond", Baskerville, "Source Serif 4", "Times New Roman", serif;
  --sans: "Cabin", "Helvetica Neue", Arial, sans-serif;
}
html, body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { font-weight: 400; }
h1, h2, h3, .phero h1, .grow__text h1, .hero__end h2 { font-family: var(--serif); font-weight: 400 !important; text-transform: uppercase; letter-spacing: .18em; line-height: 1.35; }
h1, .phero h1, .grow__text h1 { font-size: clamp(1.6rem, 2.6vw, 2.3rem) !important; }
h2 { font-size: clamp(1.25rem, 2vw, 1.75rem) !important; }
h3 { font-size: clamp(.95rem, 1.2vw, 1.1rem) !important; letter-spacing: .16em; }
.hero__end h2 { font-size: clamp(1.6rem, 2.6vw, 2.4rem) !important; }
.wcard__body h3 { font-size: clamp(1.2rem, 2vw, 1.6rem) !important; }
.rel span, .rel--story .rel__story span { font-family: var(--serif); text-transform: uppercase; letter-spacing: .16em; font-size: 1rem; }
.pcard__from, .hcard__year { letter-spacing: .04em; }
.phero__lede, .shero__lede, .tour__addr, .grow__lede, .rcard blockquote { font-family: var(--sans); font-size: 1.02rem; line-height: 1.7; }
.footer .footer__cols a { font-size: .95rem; opacity: .68; }
.footer .footer__cols a:hover { opacity: 1; }

/* bespoke page (phones): the suit cards become an accordion like the home wardrobe.
   Title, description and link stack from the bottom, so longer descriptions push the title up instead of overlapping it */
.rel__desc, .rel__go { display: none; }
@media (max-width: 760px) {
  .hub__grid { grid-template-columns: 1fr !important; gap: 8px; }
  .hub__grid .hub__group { margin-top: 1.6rem; }
  .hub__grid > .rel { aspect-ratio: auto; height: 84px; display: flex; flex-direction: column; justify-content: center; align-items: center;
    padding: 0 1.4rem; text-align: center; transition: height .8s cubic-bezier(.6,.05,.15,1); }
  .hub__grid > .rel img { position: absolute; inset: 0; object-position: 50% 25%; }
  .hub__grid > .rel::after { background: linear-gradient(to top, rgba(10,8,6,.9), rgba(10,8,6,.55) 60%, rgba(10,8,6,.35)); }
  .hub__grid > .rel span, .hub__grid > .rel__desc, .hub__grid > .rel__go { position: relative; inset: auto; z-index: 2; left: auto; right: auto; bottom: auto; transform: none; }
  .hub__grid > .rel span { font-size: 1.05rem; letter-spacing: .14em; line-height: 1.25; }
  .hub__grid > .rel span i { display: none; }
  .hub__grid > .rel__desc, .hub__grid > .rel__go { display: block; max-height: 0; overflow: hidden; opacity: 0; margin: 0;
    transition: opacity .4s ease, max-height .6s ease, margin .6s ease; }
  .hub__grid > .rel__desc { font-size: .92rem; line-height: 1.6; color: rgba(244,239,229,.9); max-width: 34ch; }
  .hub__grid > .rel__go { font-style: normal; font-size: .72rem; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); }
  .hub__grid > .rel__go i { font-style: normal; margin-left: .4rem; }
  .hub__grid > .rel.is-open { height: 460px; justify-content: flex-end; padding-bottom: 1.8rem; }
  .hub__grid > .rel.is-open span { font-size: 1.35rem; }
  .hub__grid > .rel.is-open .rel__desc { max-height: 12rem; margin-top: .9rem; opacity: 1; transition-delay: .35s; }
  .hub__grid > .rel.is-open .rel__go { max-height: 2rem; margin-top: 1.1rem; opacity: 1; transition-delay: .45s; }
}

/* ================= phones: everything centred ================= */
@media (max-width: 760px) {
  /* editorial blocks (e.g. "A Singapore tailoring house since 1979") */
  .pblock { text-align: center; }
  .pblock h2 { margin-left: auto; margin-right: auto; }
  .pblock__body p, .pblock__list, .pblock__steps { margin-left: auto; margin-right: auto; }
  .pblock__list li { padding: 1rem 0; }
  .pblock__list li::before { position: static; display: block; margin: 0 auto .7rem; }
  .pblock__sub { text-align: center; }
  .pblock__steps li { flex-direction: column; align-items: center; text-align: center; }
  /* the visit card at the end of each page, and the home tour's last frame */
  .visit { text-align: center; padding-left: 1.4rem; padding-right: 1.4rem; }
  .visit::after { background: linear-gradient(to top, rgba(14,11,9,.88) 0%, rgba(14,11,9,.72) 60%, rgba(14,11,9,.55) 100%); }
  .dcard { text-align: center; margin: 0 auto; }
  .dcard__lede { margin-left: auto; margin-right: auto; }
  .tour__list { display: block !important; text-align: center; }
  .tour__list dt { margin: 1.1rem 0 .3rem; }
  .tour__list dt:first-child { margin-top: 1.4rem; }
  .tour__list dd { margin: 0; }
  .tour__cta { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; }
  .tour__cta .btn { width: 100%; max-width: 340px; }
  /* questions and answers */
  .faq details summary, .cb-faq summary, .faqp summary { text-align: center; padding-left: 2.2rem; padding-right: 2.2rem; }
  .faq details p, .faqp details p { text-align: center; margin-left: auto; margin-right: auto; }
  .faq__all, .faq > h2 { text-align: center; }
  /* reviews, pricing notes, journal cards, related pages */
  .prev, .prev__card, .prev__rating, .pprice, .ptable__note, .bcard__info, .related__head { text-align: center; }
  .prev__rating { justify-content: center; }
  .bcard__info { align-items: center; }
}

/* bespoke process on phones: the photo and the step stay pinned while the section scrolls;
   the photo crossfades and the number and words fade up to the next step (main.js sets .is-on) */
@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
  .process2--page .process2__body { display: block; position: relative; height: calc(100svh - var(--navh, 64px) + var(--n, 4) * 55vh); }
  .process2--page .process2__media { position: sticky; top: var(--navh, 64px); height: 50svh; z-index: 1; }
  .process2--page .process2__frame { position: relative; top: 0; height: 100%; max-height: none; aspect-ratio: auto; }
  .process2--page .process2__steps { position: sticky; top: calc(var(--navh, 64px) + 50svh); height: calc(50svh - var(--navh, 64px)); margin: 0; }
  .process2--page .pstep2 { position: absolute; inset: 0; padding: 1.4rem .4rem 0; border: 0; text-align: center; opacity: 0; transform: translateY(26px);
    transition: opacity .55s ease, transform .7s cubic-bezier(.2,.7,.2,1); pointer-events: none; }
  .process2--page .pstep2.is-on { opacity: 1; transform: none; pointer-events: auto; }
  .process2--page .pstep2 span { margin-bottom: .5rem; }
  .process2--page .pstep2 h3 { font-size: 1.3rem; margin-bottom: .6rem; }
  .process2--page .pstep2 p { font-size: .95rem; line-height: 1.65; margin: 0 auto; max-width: 40ch; }
  .process2--page .process2__dots { position: absolute; left: 50%; bottom: .9rem; transform: translateX(-50%); display: flex; gap: .45rem; z-index: 2; }
  .process2--page .process2__dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.45); transition: background .3s, transform .3s; }
  .process2--page .process2__dots i.is-on { background: #fff; transform: scale(1.3); }
}
.process2__dots { display: none; }
@media (max-width: 900px) and (prefers-reduced-motion: no-preference) { .process2--page .process2__dots { display: flex; } }

/* videos inside articles */
.prose iframe { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; margin: 1.8rem 0; }

/* journal articles: contents list and closing invitation */
.post__toc { border: 1px solid rgba(36,29,24,.14); background: var(--cream); padding: 1.2rem 1.4rem; margin: 0 0 2.2rem; }
.post__toc p { font-size: .7rem; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: .7rem; }
.post__toc ol { padding-left: 1.2rem; margin: 0; }
.post__toc li { margin: .3rem 0; font-size: .95rem; line-height: 1.45; }
.post__toc a { color: var(--ink); border-bottom: 1px solid transparent; transition: border-color .2s, color .2s; }
.post__toc a:hover { color: var(--wine); border-bottom-color: currentColor; }
.prose h2[id] { scroll-margin-top: 100px; }
.post__cta { margin-top: 3rem; background: var(--dark); color: #f4efe5; text-align: center; padding: clamp(2rem, 5vw, 3rem) 1.6rem; }
.post__cta .eyebrow { color: rgba(244,239,229,.7); }
.post__cta h2 { color: #fff; font-family: var(--serif-2); font-weight: 400; font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin: .6rem 0 .8rem; }
.post__cta p { color: rgba(244,239,229,.82); max-width: 46ch; margin: 0 auto; }
.post__cta-btns { margin-top: 1.4rem; display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; align-items: center; justify-content: center; }
.post__cta .btn { border-color: #f4efe5; color: #f4efe5; }
.post__cta .btn:hover { background: #f4efe5; color: var(--dark); }
.post__cta-wa { font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(244,239,229,.85); border-bottom: 1px solid rgba(244,239,229,.4); }

/* shop (only built when switched on in the CMS) */
.page--shop .nav { background: rgba(20,16,13,.92); }
.shop { max-width: 1240px; margin: 0 auto; padding: calc(76px + clamp(2.5rem, 5vw, 4rem)) clamp(1.4rem, 4vw, 4rem) clamp(4rem, 8vw, 6rem); }
.shop__head { text-align: center; max-width: 640px; margin: 0 auto clamp(2rem, 4vw, 3rem); }
.shop__head p { color: var(--ink-soft); margin-top: 1rem; }
.shop__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.2rem, 3vw, 2rem); }
.scard { display: block; text-align: center; }
.scard figure { margin: 0 0 1rem; aspect-ratio: 4 / 5; overflow: hidden; background: var(--cream-2); }
.scard img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.2,.6,.2,1); }
.scard:hover img { transform: scale(1.04); }
.scard h3 { font-family: var(--serif-2); font-weight: 400; font-size: 1.25rem; }
.scard__price, .sprod__price { margin-top: .4rem; letter-spacing: .06em; }
.scard__price s, .sprod__price s { color: var(--ink-soft); margin-right: .4rem; }
.scard__sum { color: var(--ink-soft); font-size: .9rem; margin-top: .4rem; }
.sprod { max-width: 1240px; margin: 0 auto; padding: calc(76px + clamp(2rem, 4vw, 3.5rem)) clamp(1.4rem, 4vw, 4rem) clamp(4rem, 8vw, 6rem); display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.sprod__gal { display: grid; gap: .8rem; }
.sprod__gal img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--cream-2); }
.sprod__info { position: sticky; top: 110px; }
.sprod__info h1 { font-family: var(--serif-2); font-weight: 400; font-size: clamp(1.6rem, 3vw, 2.4rem); margin-top: .8rem; }
.sprod__price { font-size: 1.2rem; }
.sprod__sum { color: var(--ink-soft); margin-top: 1rem; }
.sprod__buy { display: flex; gap: 1rem; align-items: flex-end; margin-top: 1.6rem; flex-wrap: wrap; }
.sprod__buy label { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); }
.sprod__qty { display: block; width: 80px; margin-top: .3rem; padding: .6rem .7rem; border: 1px solid rgba(36,29,24,.25); background: #fff; font: inherit; }
.sprod__err { color: var(--wine); margin-top: .8rem; }
.sprod__safe { font-size: .8rem; color: var(--ink-soft); margin-top: .8rem; }
.sprod__sold { margin-top: 1.4rem; color: var(--wine); }
.sprod__desc { margin-top: 2rem; }
@media (max-width: 860px) { .shop__grid { grid-template-columns: 1fr 1fr; } .sprod { grid-template-columns: 1fr; } .sprod__info { position: static; text-align: center; } .sprod__buy { justify-content: center; } }
@media (max-width: 520px) { .shop__grid { grid-template-columns: 1fr; } }

/* FAQ questions are h3 headings for search engines, styled as before */
summary .faq__q { display: inline; margin: 0; font: inherit !important; letter-spacing: inherit !important; text-transform: none !important; color: inherit; }

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