/* Liza's Locks — shared site styles.
   Foundation build: same layout and words as the Wix site, cleaner execution. */
:root {
  color-scheme: light;
  /* Palette: "Brighter, no navy" with fresh pink header (chosen 2026-11-06) — light yellow, soft pink, the dusty blue of the
     studio's flower wallpaper, white like the chairs and counters, charcoal text. No dark navy, no dusty rose.
     Wix originals for reference: cream #F0ECD7, blush #F1E4E4, rose #DCB1AF, mauve #A28D9C, navy #415A76, ink #2E4157 */
  --cream: #FBF4DC;    /* light yellow background */
  --blush: #F8E6E7;    /* soft pink sections */
  --rose: #F6D3D6;     /* header and accents: fresh light pink */
  --mauve: #A9BFDD;    /* feature sections: the wallpaper blue */
  --navy: #4D6E9A;     /* buttons, footer, hiring banner: lighter wallpaper-toned blue */
  --ink: #3A3A40;      /* text: soft charcoal */
  --accent-text: #4D6E9A;  /* italic accents and subtitles */
  --on-feature: #3A3A40;   /* text on the blue sections */
  --white: #FFFFFF;
  --line: rgba(65, 90, 118, 0.18);

  --display: 'Brygada 1918', Georgia, 'Times New Roman', serif;
  --body: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  --head: 'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif;  /* bold modern headings (soft tech) */
  --soft-text: #6A6A72;
  --shadow: 0 1px 2px rgba(58,58,64,.06), 0 18px 40px -18px rgba(58,58,64,.28);
  --maxw: 1120px;
  --sec: clamp(64px, 9vw, 112px);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--white); color: var(--ink); font-family: var(--body); font-size: 1rem; line-height: 1.65; -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--white); }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--head); font-weight: 700; line-height: 1.04; margin: 0; letter-spacing: -0.03em; text-wrap: balance; }
h1 em, h2 em, h3 em { font-family: var(--display); font-style: italic; font-weight: 400; letter-spacing: -0.01em; color: var(--accent-text); }
p { margin: 0; }
.wrap { max-width: var(--maxw); margin-inline: auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.wrap.narrow { max-width: 860px; }
@media (min-width: 760px) { .wrap { padding-left: max(40px, env(safe-area-inset-left, 0px)); padding-right: max(40px, env(safe-area-inset-right, 0px)); } }
section { padding-block: var(--sec); }
.bg-cream { background: var(--cream); }
.bg-blush { background: var(--blush); }
.bg-rose { background: var(--rose); }
.bg-mauve { background-color: var(--mauve); color: var(--on-feature); }
.bg-navy { background: var(--navy); color: var(--white); }
.bg-white { background: var(--white); }
.center { text-align: center; }
.stack { display: flex; flex-direction: column; gap: 18px; }
.prose { display: flex; flex-direction: column; gap: 1.1em; max-width: 68ch; }
.center .prose, .prose.center { margin-inline: auto; }

.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 0.875rem; font-weight: 500; }
.eyebrow { color: var(--accent-text); font-weight: 600; }
.eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: currentColor; flex: none; }
.eyebrow.caps { font-size: 0.75rem; letter-spacing: .14em; text-transform: uppercase; }
.kicker { font-size: 0.75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); font-weight: 600; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; text-align: center; text-decoration: none; cursor: pointer;
  font: 600 0.9375rem/1.2 var(--body); padding: 0.85em 1.35em; border-radius: 10px; border: 0;
  background: var(--navy); color: var(--white); transition: background .2s, transform .2s, box-shadow .2s;
  box-shadow: 0 6px 16px -8px rgba(77,110,154,.8);
}
.btn:hover { background: #45638B; transform: translateY(-1px); }
.btn.light, .btn.ghost { background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line), 0 1px 2px rgba(0,0,0,.04); }
.btn.light:hover, .btn.ghost:hover { background: var(--white); box-shadow: inset 0 0 0 1px rgba(58,58,64,.28); }
.policies-head { border-bottom: 1px solid var(--line); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.center .btn-row { justify-content: center; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }

.blob { border-radius: 58% 42% 48% 52% / 46% 54% 46% 54%; overflow: hidden; aspect-ratio: 1 / 1.02; max-width: 100%; }
.blob img, .arch img, .circle img { width: 100%; height: 100%; object-fit: cover; }
.arch { border-radius: 999px 999px 18px 18px; overflow: hidden; aspect-ratio: 3 / 4; max-width: 100%; background: var(--blush); }
.circle { border-radius: 50%; overflow: hidden; aspect-ratio: 1; max-width: 100%; }
.wave { height: 14px; background: radial-gradient(circle at 10px -4px, transparent 9px, var(--mauve) 10px, var(--mauve) 11.5px, transparent 12.5px) 0 0 / 20px 14px repeat-x; opacity: .7; }

/* ── Hiring banner ── */
.hiring { background: var(--blush); color: var(--ink); overflow: hidden; font-size: 0.875rem; letter-spacing: .04em; }
.hiring a { display: block; text-decoration: none; padding-block: 9px; }
.ticker { display: flex; width: max-content; animation: tick 40s linear infinite; }
.ticker span { padding-inline: 32px; white-space: nowrap; }
@keyframes tick { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker { animation: none; } * { transition: none !important; } }

/* ── Header ── */
header.site { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: color-mix(in srgb, var(--white) 80%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
header.site .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 18px; }
.logo { font-family: var(--display); font-style: italic; font-weight: 500; font-size: 1.6rem; text-decoration: none; color: var(--ink); }
header.site nav { display: flex; align-items: center; gap: 26px; font-size: 0.9063rem; font-weight: 500; }
header.site nav a:not(.btn) { text-decoration: none; color: var(--soft-text); }
header.site nav a:not(.btn):hover, header.site nav a[aria-current="page"] { color: var(--ink); }
header.site .btn { padding: 0.7em 1.1em; font-size: 0.875rem; }
.menu { display: none; position: relative; }
.menu summary { list-style: none; cursor: pointer; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--blush); }
.menu summary::-webkit-details-marker { display: none; }
.menu summary span, .menu summary span::before, .menu summary span::after { display: block; width: 18px; height: 2px; background: var(--ink); position: relative; }
.menu summary span::before, .menu summary span::after { content: ""; position: absolute; left: 0; }
.menu summary span::before { top: -6px; } .menu summary span::after { top: 6px; }
.menu-panel { position: absolute; right: 0; top: 52px; background: var(--cream); border-radius: 14px; box-shadow: 0 18px 40px -16px rgba(46, 65, 87, .35); padding: 10px; display: grid; min-width: 220px; }
.menu-panel a { text-decoration: none; padding: 12px 14px; border-radius: 8px; }
.menu-panel a:hover { background: var(--blush); }
@media (max-width: 900px) {
  header.site nav a:not(.btn) { display: none; }
  .menu { display: block; }
}
@media (max-width: 420px) { header.site nav .btn { display: none; } .logo { font-size: 1.4rem; } }

/* ── Footer ── */
footer.site { background: var(--blush); color: var(--ink); padding-block: 64px 56px; font-size: 0.9375rem; }
footer.site .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 48px clamp(32px, 6vw, 88px); }
.f-left { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.f-left .logo { color: var(--ink); }
.socials { display: flex; gap: 10px; }
.socials a { width: 40px; height: 40px; border-radius: 50%; background: var(--white); display: grid; place-items: center; transition: background .2s; }
.socials a:hover { background: var(--blush); }
.socials svg { width: 18px; height: 18px; fill: var(--navy); }
.f-left address { font-style: normal; line-height: 1.6; }
.f-left .dir { font-size: 0.875rem; text-underline-offset: 3px; opacity: .85; }
.f-right { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; }
.f-right h3 { font-family: var(--body); font-weight: 500; font-size: 1.5rem; }
.f-right p { max-width: 42ch; opacity: .9; }
.sub-form { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; max-width: 380px; margin-top: 6px; }
.sub-form label { width: 100%; text-align: left; }
.f-right .join { margin-top: 24px; }
@media (max-width: 760px) { footer.site .wrap { grid-template-columns: 1fr; } .f-right { align-items: flex-start; text-align: left; } .sub-form { align-items: flex-start; } }

/* ── Forms ── */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form .full { grid-column: 1 / -1; }
label { display: grid; gap: 6px; font-size: 0.8125rem; font-weight: 500; }
input, textarea, select { font: inherit; font-size: 1rem; color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; width: 100%; }
input:focus, textarea:focus, select:focus { border-color: var(--navy); }
input[type="file"] { padding: 10px; background: var(--white); }
textarea { min-height: 120px; resize: vertical; }
.form .btn { justify-self: start; }
fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
legend { font-size: 0.8125rem; font-weight: 500; margin-bottom: 6px; }
.radio { display: flex; align-items: center; gap: 10px; font-size: 1rem; font-weight: 400; }
.radio input { width: 18px; height: 18px; accent-color: var(--navy); }
.form-note { grid-column: 1 / -1; font-size: 0.8125rem; color: var(--accent-text); min-height: 1.2em; }
.card-form { background: var(--white); border-radius: 18px; padding: clamp(24px, 4vw, 40px); box-shadow: 0 24px 50px -30px rgba(46, 65, 87, .35); }
@media (max-width: 760px) { .form { grid-template-columns: 1fr; } }

/* ── Preview-only placeholders (not part of the live site) ── */
.preview-slot { border: 1.5px dashed var(--mauve); border-radius: 16px; padding: 28px; display: grid; place-items: center; text-align: center; gap: 8px; color: var(--accent-text); font-size: 0.875rem; min-height: 280px; background: color-mix(in srgb, var(--white) 50%, transparent); }
.preview-slot strong { color: var(--ink); font-weight: 500; }

/* ════════ Page sections ════════ */

/* Home */
.hero .wrap { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.hero h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); margin-block: 22px 36px; }
.hero-photo { display: flex; flex-direction: column; gap: 18px; }
.hero-facts { display: flex; justify-content: space-between; gap: 16px; font-size: 0.875rem; line-height: 1.45; padding-inline: 8px; }
@media (max-width: 760px) { .hero .wrap { grid-template-columns: 1fr; } .hero-photo { max-width: 380px; } }

.diy-top { display: grid; grid-template-columns: 1fr 1fr; gap: 24px clamp(32px, 6vw, 88px); align-items: end; }
.diy h2 { font-size: clamp(2.3rem, 5vw, 3.8rem); margin-top: 22px; }
.diy-side { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; font-size: 1.0625rem; }
.classes { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 4vw, 56px); max-width: 860px; margin-inline: auto; }
.diy .classes { margin-block: 64px 56px; }
.class { display: flex; flex-direction: column; gap: 16px; text-align: center; align-items: center; }
.class > a:first-child { display: block; width: 100%; text-decoration: none; position: relative; }
.class .arch { transition: transform .35s; }
.class > a:first-child:hover .arch { transform: translateY(-4px); }
.class .title { font-family: var(--display); font-style: italic; font-size: 1.125rem; line-height: 1.35; }
.class small { display: block; font-family: var(--body); font-style: normal; font-size: 0.8125rem; opacity: .85; margin-top: 4px; }
.price { position: absolute; right: -10px; bottom: 22px; width: 60px; height: 60px; display: grid; place-items: center; font-family: var(--display); font-size: 1.15rem; color: var(--ink); background: var(--white); border-radius: 50%; box-shadow: 0 0 0 4px var(--rose); }
.diy-foot { display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }
.diy-foot p { font-family: var(--display); font-style: italic; font-size: 1.25rem; }
@media (max-width: 760px) { .diy-top { grid-template-columns: 1fr; } .classes { grid-template-columns: 1fr; max-width: 300px; } }

.method-home h2 { font-size: clamp(2.3rem, 5vw, 3.6rem); margin-block: 22px 28px; max-width: 14ch; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 56px; }
.step { padding: 4px 32px 0; border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; }
.step:first-child { border-left: 0; padding-left: 0; }
.step .n { font-size: 0.8125rem; color: var(--accent-text); font-weight: 600; letter-spacing: .08em; }
.step h3 { font-size: 1.4rem; min-height: 2.3em; }
.step p { font-size: 0.9688rem; }
@media (max-width: 760px) {
  .steps { grid-template-columns: 1fr; gap: 0; }
  .step, .step:first-child { padding: 24px 0; border-left: 0; border-top: 1px solid var(--line); }
  .step h3 { min-height: 0; }
}

.studio-top { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.studio-home h2 { font-size: clamp(2.3rem, 5vw, 3.6rem); margin-block: 22px 24px; }
.studio-top p { max-width: 52ch; }
.studio-top .blob { max-width: 380px; justify-self: end; width: 100%; }
.studio-row { display: grid; grid-template-columns: auto repeat(3, 1fr); gap: clamp(20px, 4vw, 48px); align-items: center; margin-top: 64px; }
.studio-card { display: flex; flex-direction: column; gap: 14px; text-align: center; }
.studio-card .arch { max-width: 200px; margin-inline: auto; width: 100%; }
.studio-card p { font-family: var(--display); font-style: italic; font-size: 1.0625rem; line-height: 1.35; }
@media (max-width: 860px) {
  .studio-top { grid-template-columns: 1fr; }
  .studio-top .blob { justify-self: start; }
  .studio-row { grid-template-columns: 1fr; justify-items: center; }
  .studio-row .btn { order: 4; }
}

.faq h2 { font-size: clamp(2.3rem, 5vw, 3.4rem); color: var(--navy); margin-block: 10px 32px; }
details.qa { border-top: 1px solid var(--line); }
details.qa:last-of-type { border-bottom: 1px solid var(--line); }
details.qa summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; font-weight: 500; }
details.qa summary::-webkit-details-marker { display: none; }
details.qa summary::after { content: "+"; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--rose); color: var(--ink); display: grid; place-items: center; font-size: 1.05rem; line-height: 1; transition: transform .25s; }
details.qa[open] summary::after { transform: rotate(45deg); }
details.qa p { padding: 0 40px 22px 0; max-width: 68ch; }
.bg-mauve details.qa { border-color: color-mix(in srgb, var(--on-feature) 22%, transparent); }
.bg-mauve details.qa summary::after { background: var(--white); }

.press { padding-block: clamp(48px, 7vw, 80px); text-align: center; }
.press h2 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin-bottom: 36px; }
.logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 32px clamp(32px, 8vw, 96px); }
.logos a { display: block; transition: opacity .2s; }
.logos a:hover { opacity: .85; }
.logos img { height: clamp(48px, 7vw, 76px); width: auto; }
.logos .allure { filter: invert(1); }

.contact .wrap { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(32px, 6vw, 88px); align-items: start; }
.contact h2 { font-size: clamp(2.1rem, 4.4vw, 3rem); margin-bottom: 20px; }
@media (max-width: 760px) { .contact .wrap { grid-template-columns: 1fr; } }

/* About */
.about .wrap { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 32px clamp(32px, 6vw, 72px); align-items: center; }
.about h1 { font-size: clamp(2.4rem, 5vw, 3.4rem); font-family: var(--display); font-weight: 400; font-style: italic; margin-bottom: 24px; }
.about .after { grid-column: 1 / -1; }
@media (max-width: 760px) { .about .wrap { grid-template-columns: 1fr; } .about .circle { max-width: 320px; } }

/* Studio page */
.page-hero .wrap { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 6vw, 72px); align-items: center; }
.page-hero h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); margin-block: 20px 22px; }
.page-hero h1 em { color: var(--accent-text); }
.page-hero .sub { color: var(--accent-text); line-height: 1.5; }
.page-hero .sub em { font-style: italic; }
.arches { display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: 14px; align-items: end; }
.arches a { display: block; }
.arches a:not(:nth-child(2)) .arch { aspect-ratio: 2 / 3.1; }
.arches a:nth-child(2) .arch { aspect-ratio: 2 / 2.85; }
@media (max-width: 760px) { .page-hero .wrap { grid-template-columns: 1fr; } }
.choose .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 48px; align-items: center; padding-block: 0; }
.choose { padding-block: clamp(44px, 6vw, 64px); }
.choose h2 { font-size: clamp(2.2rem, 4.6vw, 3.2rem); color: var(--ink); }
.choose h2 em { color: var(--accent-text); }
@media (max-width: 760px) { .choose .wrap { grid-template-columns: 1fr; } }
.team-grid { display: grid; gap: 24px; }
.person { background: var(--blush); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; }
.person .photo { aspect-ratio: 1 / 1.05; overflow: hidden; }
.person .photo img { width: 100%; height: 100%; object-fit: cover; }
.person .info { padding: 22px 26px 28px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.badge { align-self: flex-start; font-size: 0.6875rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--navy); background: var(--white); border-radius: 999px; padding: 5px 12px; }
.person h3 { font-size: 1.9rem; font-family: var(--display); font-weight: 400; font-style: italic; letter-spacing: -0.01em; }
.person p { font-size: 0.9375rem; flex: 1; }
.person .btn { align-self: flex-start; }
.person.feature { display: grid; grid-template-columns: 0.9fr 1.1fr; }
.person.feature .photo { aspect-ratio: auto; min-height: 100%; }
.person.feature .info { padding: clamp(24px, 4vw, 44px); justify-content: center; }
.person.feature h3 { font-size: 2.4rem; }
.person.feature p { flex: none; margin-bottom: 12px; }
.menu-panel .btn { margin-top: 6px; color: var(--white); }
.menu-panel .btn:hover { background: var(--ink); }
@media (min-width: 421px) { .menu-panel .btn { display: none; } }
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 860px) { .person.feature { grid-template-columns: 1fr; } .person.feature .photo { aspect-ratio: 1 / 1; } .trio { grid-template-columns: 1fr; max-width: 440px; } }

/* Method page */
.mission h1 { font-size: clamp(2.4rem, 5.4vw, 3.8rem); margin-bottom: 28px; }
.mission .lead { font-family: var(--display); font-weight: 500; font-size: clamp(1.25rem, 2.4vw, 1.6rem); line-height: 1.4; max-width: 34ch; margin-inline: auto; color: var(--navy); }
.prose-section h2 { font-size: clamp(2.2rem, 4.6vw, 3.2rem); margin-bottom: 32px; }
.prose-section .prose { font-size: 1rem; }

/* Cut It Yourself page */
.ciy-hero h1 { font-size: clamp(2.4rem, 5.4vw, 3.6rem); margin-bottom: 14px; }
.ciy-hero h1 em { font-style: italic; }
.ciy-hero .tag { font-size: 1.125rem; margin-bottom: 56px; }
.ciy-hero .classes { margin-bottom: 72px; }
.pain { display: grid; grid-template-columns: 1fr 1fr; gap: 40px clamp(32px, 6vw, 88px); text-align: center; }
.pain h3 { font-family: var(--body); font-weight: 500; font-size: 1.375rem; margin-bottom: 20px; }
.pain .lines { display: flex; flex-direction: column; gap: 6px; font-size: 1.0625rem; }
@media (max-width: 760px) { .pain { grid-template-columns: 1fr; } }
.trailer { margin-top: 80px; text-align: center; }
.trailer h3 { font-size: clamp(1.8rem, 3.6vw, 2.4rem); margin-bottom: 28px; }
.trailer video { width: 100%; max-width: 880px; margin-inline: auto; border-radius: 16px; background: var(--ink); aspect-ratio: 16 / 9; object-fit: cover; }
.learn .wrap { display: grid; grid-template-columns: 1.4fr 0.6fr; gap: 40px clamp(32px, 5vw, 64px); align-items: start; }
.learn.flip .wrap { grid-template-columns: 0.6fr 1.4fr; }
.learn.flip .learn-photo { order: -1; }
.learn h2 { font-size: clamp(1.7rem, 3.2vw, 2.2rem); margin-bottom: 16px; }
.learn .sub { font-size: 1.1875rem; margin-bottom: 20px; }
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; font-size: 1.0625rem; }
.get { grid-column: 1 / -1; background: var(--white); border-radius: 18px; padding: clamp(24px, 4vw, 40px); display: grid; gap: 20px; justify-items: center; text-align: center; }
.get h3 { font-size: clamp(1.7rem, 3vw, 2.1rem); }
.get ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; text-align: left; font-size: 1.0625rem; }
.learn-photo .arch { aspect-ratio: 263 / 347; }
@media (max-width: 760px) { .learn .wrap, .learn.flip .wrap { grid-template-columns: 1fr; } .learn-photo { max-width: 280px; } .learn.flip .learn-photo { order: 0; } }
.why .wrap { max-width: 860px; }
.why h2 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin-bottom: 28px; text-align: center; }
.why ul { list-style: none; padding: 0; margin: 0 auto 24px; display: grid; gap: 10px; font-size: 1.125rem; max-width: 40em; }
.why .closing { font-size: 1.1875rem; max-width: 40em; margin-inline: auto; }
.cta-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 44px; }
.cta-trio .btn { width: 100%; }
@media (max-width: 760px) { .cta-trio { grid-template-columns: 1fr; } }
.split { display: grid; grid-template-columns: 0.7fr 1.3fr; gap: 32px clamp(32px, 5vw, 64px); align-items: start; }
.split.flip { grid-template-columns: 1.3fr 0.7fr; }
.split h2 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin-bottom: 24px; }
.split .prose { font-size: 1.0625rem; }
@media (max-width: 760px) { .split, .split.flip { grid-template-columns: 1fr; } .split .arch, .split .photo-tall { max-width: 300px; } }
.photo-tall { border-radius: 18px; overflow: hidden; aspect-ratio: 283 / 390; }
.photo-tall img { width: 100%; height: 100%; object-fit: cover; }
.ciy-faq h2 { font-size: clamp(1.9rem, 4vw, 2.6rem); text-align: center; margin-bottom: 28px; }
.offer h2 { font-size: clamp(1.8rem, 3.8vw, 2.5rem); max-width: 22ch; margin: 0 auto 18px; }
.offer .lead { font-family: var(--display); font-style: italic; font-size: 1.4rem; margin-bottom: 32px; }
.perks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 48px; max-width: 760px; margin: 0 auto 64px; text-align: left; }
.perks strong { display: block; font-weight: 600; font-size: 1.0625rem; }
.perks span { font-size: 1rem; }
@media (max-width: 760px) { .perks { grid-template-columns: 1fr; } }
.sign-off { margin-top: 48px; font-family: var(--display); font-size: clamp(1.3rem, 2.6vw, 1.7rem); text-align: center; }
.sign-off em { font-style: italic; }

/* Booking pages */
.booking .wrap { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(32px, 6vw, 72px); align-items: start; }
.booking h1 { font-size: clamp(2.6rem, 5.6vw, 4rem); color: var(--navy); margin-block: 20px 22px; }
.booking h1 em { color: var(--accent-text); }
.booking .sub { color: var(--accent-text); line-height: 1.55; }
.booking .prose { color: var(--ink); font-size: 0.9688rem; max-width: 46ch; }
.booking-side { display: grid; gap: 20px; }
.bang-link { display: flex; align-items: center; justify-content: flex-end; gap: 14px; font-family: var(--display); font-style: italic; font-size: 1.125rem; }
@media (max-width: 860px) { .booking .wrap { grid-template-columns: 1fr; } .bang-link { justify-content: flex-start; } }
.policies { border-radius: 14px; overflow: hidden; border: 1px solid var(--line); margin-top: 48px; }
.policies-head { background: var(--rose); padding: 12px 22px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; align-items: center; }
.policies-head span:first-child { font-size: 0.75rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--ink); }
.policies-head span:last-child { font-size: 0.8125rem; color: var(--ink); }
.policies dl { margin: 0; background: var(--blush); padding: 20px 22px; display: grid; grid-template-columns: max-content 1fr; gap: 10px 20px; font-size: 0.875rem; line-height: 1.6; }
.policies dt { font-weight: 600; }
.policies dd { margin: 0; }
.policies-foot { background: var(--blush); border-top: 1px solid var(--line); padding: 12px 22px 16px; font-size: 0.8125rem; font-style: italic; color: var(--accent-text); }
@media (max-width: 640px) { .policies dl { grid-template-columns: 1fr; gap: 2px; } .policies dd { margin-bottom: 10px; } }
.waitlist { border-top: 1px solid var(--line); margin-top: 48px; padding-top: 28px; text-align: center; font-family: var(--display); font-size: clamp(1.15rem, 2.2vw, 1.4rem); color: var(--navy); }
.waitlist a { font-style: italic; color: var(--accent-text); text-underline-offset: 4px; }

.return-gate h1 { font-size: clamp(2.2rem, 4.6vw, 3.2rem); margin-bottom: 22px; }
.return-gate h1 em { font-style: italic; }
.return-gate p { max-width: 60ch; margin: 0 auto 32px; }

.bang .wrap { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(32px, 6vw, 72px); align-items: start; }
.bang h1 { font-size: clamp(2.6rem, 5.6vw, 4rem); color: var(--navy); margin-block: 20px 22px; }
.bang h1 em { color: var(--accent-text); }
.bang .details { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); line-height: 1.8; color: var(--navy); }
@media (max-width: 860px) { .bang .wrap { grid-template-columns: 1fr; } }

/* Join the team */
.join-hero { position: relative; }
.join-hero h1 { font-size: clamp(2.6rem, 6vw, 4.2rem); }
.join-hero .studio-name { font-family: var(--display); font-style: italic; font-size: clamp(1.8rem, 3.6vw, 2.6rem); margin-top: 6px; }
.join-hero .home { font-size: 1.25rem; margin-top: 12px; }
.join-hero .home em { font-family: var(--display); }
.join-hero .tex { font-size: 0.875rem; margin-top: 6px; }
.join-hero .prose { margin: 40px auto 32px; font-size: 1.0625rem; max-width: 52ch; }
.join-title { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
.dot-word { width: clamp(84px, 11vw, 128px); aspect-ratio: 1; border-radius: 50%; background: var(--mauve); color: var(--on-feature); display: grid; place-items: center; font-family: var(--display); font-style: italic; font-size: clamp(1.1rem, 2vw, 1.5rem); }
.join-title .dot-word:first-child { justify-self: end; }
@media (max-width: 640px) { .join-title { grid-template-columns: 1fr; justify-items: center; } .join-title .dot-word { display: none; } }
.join-form { max-width: 680px; margin: 56px auto 0; text-align: left; }
.join-form h2 { font-family: var(--body); font-size: 1.5rem; font-weight: 500; margin-bottom: 22px; }
.join-form .form .btn { justify-self: stretch; }
.join-end { margin-top: 28px; font-size: 1.0625rem; }


/* ════ Soft tech: gradient wash behind page openers ════ */
.page-hero, .booking, .about, .mission, .bang, .join-hero, .return-gate, .ciy-hero {
  background:
    radial-gradient(40% 60% at 85% 20%, color-mix(in srgb, var(--rose) 80%, transparent), transparent 70%),
    radial-gradient(35% 50% at 100% 85%, color-mix(in srgb, var(--mauve) 70%, transparent), transparent 70%),
    radial-gradient(45% 60% at 10% 0%, var(--cream), transparent 70%),
    var(--white);
}
.ciy-hero { background-color: var(--blush); }
.card-form, .get, .person, .policies { box-shadow: var(--shadow); }
.person { border: 1px solid var(--line); }

/* ════════ Homepage: soft tech (Stripe hero + Preply facts/rows + Linear trio) ════════ */
.home .hero { position: relative; overflow: hidden; padding-block: clamp(48px, 7vw, 96px) clamp(64px, 8vw, 110px); }
.home .wash { position: absolute; inset: -20% -10% auto -10%; height: 140%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(40% 50% at 78% 30%, color-mix(in srgb, var(--rose) 95%, transparent), transparent 70%),
    radial-gradient(35% 45% at 95% 70%, color-mix(in srgb, var(--mauve) 95%, transparent), transparent 70%),
    radial-gradient(45% 55% at 60% 85%, var(--cream), transparent 70%),
    radial-gradient(30% 40% at 20% 10%, color-mix(in srgb, var(--cream) 90%, transparent), transparent 70%);
  filter: blur(10px); animation: drift 18s ease-in-out infinite alternate; }
@keyframes drift { to { transform: translate3d(-3%, 2%, 0) scale(1.05); } }
.home .hero .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; }
.home .hero h1 { font-size: clamp(2.8rem, 6.6vw, 5.4rem); margin-block: 22px 18px; font-weight: 800; }
.home .lede { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--soft-text); max-width: 40ch; }
.home .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.home .pill { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-size: 0.8438rem; font-weight: 500; background: color-mix(in srgb, var(--white) 70%, transparent); border: 1px solid var(--line); border-radius: 999px; padding: 5px 14px 5px 5px; }
.home .pill b { background: var(--navy); color: var(--white); font-weight: 600; font-size: 0.75rem; border-radius: 999px; padding: 3px 9px; }
@media (max-width: 900px) { .home .hero .wrap { grid-template-columns: 1fr; } }

.home .stack { position: relative; min-height: 560px; }
.home .st-card { position: absolute; background: var(--white); border-radius: 18px; box-shadow: var(--shadow); border: 1px solid var(--line); }
.home .c-photo { width: 62%; right: 0; top: 0; overflow: hidden; aspect-ratio: 4 / 5; }
.home .c-photo img { width: 100%; height: 100%; object-fit: cover; }
.home .c-book { width: 66%; left: 0; top: 64px; padding: 18px; display: grid; gap: 12px; }
.home .c-book .head { display: flex; justify-content: space-between; gap: 8px; }
.home .tiny { font-size: 0.6875rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--soft-text); }
.home .c-book .ttl { font-family: var(--head); font-weight: 700; font-size: 1.25rem; letter-spacing: -0.02em; }
.home .who { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; border: 1px solid var(--line); text-decoration: none; background: var(--white); }
.home .who:hover, .home .who.on { border-color: var(--navy); box-shadow: 0 0 0 3px color-mix(in srgb, var(--navy) 15%, transparent); }
.home .who img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex: none; }
.home .who b { display: block; font-size: 0.875rem; }
.home .who span { font-size: 0.75rem; color: var(--soft-text); }
.home .dot { margin-left: auto; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); flex: none; }
.home .who.on .dot { border: 5px solid var(--navy); }
.home .c-book .btn { justify-content: center; }
.home .c-class { width: 58%; right: 4%; bottom: 0; z-index: 2; padding: 12px; display: flex; gap: 12px; align-items: center; text-decoration: none; }
.home .c-class img { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; }
.home .c-class b { display: block; font-size: 0.875rem; line-height: 1.3; }
.home .c-class span { font-size: 0.8125rem; color: var(--soft-text); }
.home .amt { margin-left: auto; font-family: var(--head); font-weight: 700; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.home .badge-float { position: absolute; left: 4%; top: 8px; z-index: 3; background: var(--rose); border-radius: 999px; padding: 8px 14px; font-size: 0.8125rem; font-weight: 600; box-shadow: var(--shadow); }
@media (max-width: 520px) {
  .home .stack { min-height: 700px; }
  .home .c-photo { width: 78%; }
  .home .c-book { width: 86%; top: 170px; }
  .home .c-class { width: 88%; right: 0; }
  .home .badge-float { display: none; }
}
@media (prefers-reduced-motion: reduce) { .home .wash { animation: none; } }

.home .facts { border-block: 1px solid var(--line); }
.home .facts .wrap { display: grid; grid-template-columns: repeat(3, 1fr); }
.home .fact { padding: 26px 20px 26px 0; display: grid; gap: 2px; align-content: start; }
.home .fact + .fact { padding-left: 24px; border-left: 1px solid var(--line); }
.home .fact b { font-family: var(--head); font-weight: 800; font-size: clamp(1.4rem, 2.4vw, 1.9rem); letter-spacing: -0.03em; line-height: 1.1; }
.home .fact span { color: var(--soft-text); font-size: 0.9063rem; }
@media (max-width: 760px) { .home .facts .wrap { grid-template-columns: 1fr; } .home .fact { padding: 18px 0; } .home .fact + .fact { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); } }

.home .press-strip .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 56px; padding-block: 30px; }
.press-strip span { font-size: 0.8125rem; color: var(--soft-text); font-weight: 500; }
.press-strip img { height: 30px; width: auto; filter: grayscale(1); opacity: .75; transition: opacity .2s, filter .2s; }
.press-strip a:hover img { opacity: 1; filter: none; }

.home .sec { padding-block: clamp(72px, 9vw, 120px); }
.home .sec.tight { padding-top: 0; }
.home .sec h2 { font-size: clamp(2.2rem, 4.8vw, 3.8rem); margin-block: 14px 16px; }
.home .intro { font-size: 1.15rem; color: var(--soft-text); max-width: 46ch; }

.home .trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 48px; }
.home .feat { border: 1px solid var(--line); border-radius: 16px; padding: 26px; background: linear-gradient(180deg, var(--white), color-mix(in srgb, var(--blush) 45%, var(--white))); display: grid; gap: 10px; align-content: start; }
.home .feat svg { width: 40px; height: 40px; margin-bottom: 10px; }
.home .feat small { font-size: 0.75rem; font-weight: 600; letter-spacing: .1em; color: var(--soft-text); }
.home .feat h3 { font-size: 1.35rem; letter-spacing: -0.02em; }
.home .feat p { color: var(--soft-text); font-size: 0.9375rem; }
.home .textlink { display: inline-flex; gap: 6px; margin-top: 28px; color: var(--navy); font-weight: 600; text-decoration: none; }
.home .textlink:hover { text-decoration: underline; }
@media (max-width: 860px) { .home .trio { grid-template-columns: 1fr; } }

.home .pinkblock { background: var(--rose); border-radius: 28px; padding: clamp(32px, 5vw, 64px); display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 40px; align-items: center; }
.home .pinkblock h2 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); margin-block: 14px 16px; }
.home .pinkblock .eyebrow { color: var(--ink); }
.home .rows { display: grid; gap: 10px; }
.home .st-row { display: flex; align-items: center; gap: 16px; background: var(--white); border-radius: 14px; padding: 12px 16px 12px 12px; text-decoration: none; box-shadow: 0 1px 2px rgba(0,0,0,.05); transition: transform .2s, box-shadow .2s; }
.home .st-row:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.home .st-row img { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; }
.home .st-row b { display: block; font-family: var(--head); font-weight: 700; font-size: 1.15rem; letter-spacing: -0.02em; line-height: 1.2; }
.home .st-row span { font-size: 0.8438rem; color: var(--soft-text); }
.home .chev { font-size: 1.4rem; color: var(--soft-text); }
@media (max-width: 860px) { .home .pinkblock { grid-template-columns: 1fr; } }

.home .st-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; margin-top: 48px; }
.home .st-panel { border: 1px solid var(--line); border-radius: 22px; overflow: hidden; background: var(--white); display: flex; flex-direction: column; min-width: 0; }
.home .st-panel .txt { padding: 28px 28px 22px; display: grid; gap: 10px; }
.home .st-panel h3 { font-size: 1.6rem; letter-spacing: -0.02em; }
.home .st-panel p { color: var(--soft-text); }
.home .st-panel .media { margin-top: auto; background: var(--cream); padding: 22px 22px 0; }
.home .st-panel .media > img { border-radius: 14px 14px 0 0; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; box-shadow: var(--shadow); }
.home .st-panel .media.blue { background: var(--mauve); padding: 22px; display: grid; gap: 10px; }
.home .st-panel .media.blue .btn { margin-left: auto; padding: 8px 12px; font-size: 0.8125rem; flex: none; }
@media (max-width: 860px) { .home .st-grid { grid-template-columns: 1fr; } }

.home .st-faq { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 48px; }
.home .st-faq details { border-bottom: 1px solid var(--line); }
.home .st-faq details:first-of-type { border-top: 1px solid var(--line); }
.home .st-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; padding: 18px 0; font-weight: 600; font-size: 1.05rem; }
.home .st-faq summary::-webkit-details-marker { display: none; }
.home .st-faq summary::after { content: ""; width: 10px; height: 10px; border-right: 2px solid var(--soft-text); border-bottom: 2px solid var(--soft-text); transform: rotate(45deg); margin-top: 4px; transition: transform .2s; flex: none; }
.home .st-faq details[open] summary::after { transform: rotate(-135deg); margin-top: 10px; }
.home .st-faq details p { padding-bottom: 18px; color: var(--soft-text); }
@media (max-width: 860px) { .home .st-faq { grid-template-columns: 1fr; gap: 24px; } }

.home .duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.home .duo .box { border-radius: 22px; padding: clamp(28px, 4vw, 40px); }
.home .duo h3 { font-size: clamp(1.7rem, 3vw, 2.2rem); margin-bottom: 12px; }
.home .duo .form { margin-top: 20px; }
@media (max-width: 760px) { .home .duo { grid-template-columns: 1fr; } }

/* ════════ About page: soft tech ════════ */
.ab-hero { position: relative; overflow: hidden; padding-block: clamp(48px, 7vw, 96px) clamp(56px, 7vw, 96px); }
.ab .wash { position: absolute; inset: -20% -10% auto -10%; height: 140%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(40% 50% at 80% 30%, color-mix(in srgb, var(--rose) 95%, transparent), transparent 70%),
    radial-gradient(35% 45% at 98% 75%, color-mix(in srgb, var(--mauve) 90%, transparent), transparent 70%),
    radial-gradient(40% 55% at 15% 10%, var(--cream), transparent 70%);
  filter: blur(10px); animation: drift 18s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce) { .ab .wash { animation: none; } }
.ab-hero .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; }
.ab-hero h1 { font-size: clamp(3rem, 8vw, 6.2rem); font-weight: 800; margin-block: 18px 18px; }
.ab-hero .lede { font-size: clamp(1.1rem, 1.8vw, 1.35rem); color: var(--soft-text); max-width: 34ch; margin-bottom: 30px; }
.ab-photo { position: relative; padding: 0 0 28px 28px; }
.ab-photo .frame { border-radius: 24px; overflow: hidden; box-shadow: var(--shadow); border: 6px solid var(--white); aspect-ratio: 1 / 1.05; }
.ab-photo .frame img { width: 100%; height: 100%; object-fit: cover; }
.chip { position: absolute; background: var(--white); border-radius: 14px; padding: 10px 14px; box-shadow: var(--shadow); border: 1px solid var(--line); font-size: 0.8125rem; color: var(--soft-text); display: grid; line-height: 1.35; }
.chip b { color: var(--ink); font-size: 0.875rem; }
.chip.c1 { left: 0; bottom: 0; }
.chip.c2 { right: -12px; top: 24px; background: var(--rose); border-color: transparent; color: var(--ink); }
@media (max-width: 860px) { .ab-hero .wrap { grid-template-columns: 1fr; } .ab-photo { max-width: 440px; } .chip.c2 { right: 8px; } }

.ab-facts { border-block: 1px solid var(--line); }
.ab-facts .wrap { display: grid; grid-template-columns: repeat(4, 1fr); }
.ab-facts .wrap > div { padding: 24px 20px 24px 0; display: grid; gap: 2px; align-content: start; }
.ab-facts .wrap > div + div { padding-left: 24px; border-left: 1px solid var(--line); }
.ab-facts b { font-family: var(--head); font-weight: 800; font-size: clamp(1.4rem, 2.4vw, 1.9rem); letter-spacing: -0.03em; line-height: 1.1; }
.ab-facts span { color: var(--soft-text); font-size: 0.9063rem; }
@media (max-width: 760px) { .ab-facts .wrap { grid-template-columns: 1fr 1fr; } .ab-facts .wrap > div:nth-child(3) { padding-left: 0; border-left: 0; } .ab-facts .wrap > div:nth-child(n+3) { border-top: 1px solid var(--line); } }

.ab-story { padding-block: clamp(72px, 9vw, 120px) clamp(48px, 6vw, 72px); }
.ab-story .wrap { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
.ab-pull { position: sticky; top: 110px; display: grid; gap: 18px; }
.ab-pull p { font-family: var(--head); font-weight: 700; font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 1.1; letter-spacing: -0.03em; }
.ab-pull em { font-family: var(--display); font-style: italic; font-weight: 400; color: var(--accent-text); letter-spacing: -0.01em; }
.ab-story .prose { font-size: 1.0938rem; color: var(--ink); gap: 1.3em; }
.ab-social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.ab-social a { text-decoration: none; font-weight: 600; font-size: 0.875rem; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--white); }
.ab-social a:hover { border-color: var(--navy); color: var(--navy); }
@media (max-width: 860px) { .ab-story .wrap { grid-template-columns: 1fr; } .ab-pull { position: static; } }

.ab-today { padding-bottom: clamp(72px, 9vw, 120px); }
.ab-block { background: var(--rose); border-radius: 28px; padding: clamp(32px, 5vw, 60px); display: grid; grid-template-columns: 1.4fr 0.6fr; gap: 32px; align-items: end; }
.ab-block .eyebrow { color: var(--ink); }
.ab-block .big { font-family: var(--head); font-weight: 700; font-size: clamp(1.35rem, 2.6vw, 2rem); line-height: 1.25; letter-spacing: -0.02em; margin-top: 14px; }
.ab-cta { display: grid; gap: 10px; }
.ab-cta .btn { justify-content: center; }
@media (max-width: 860px) { .ab-block { grid-template-columns: 1fr; } }

/* ════════ The Method page: soft tech ════════ */
.me-hero { position: relative; overflow: hidden; padding-block: clamp(48px, 7vw, 96px) clamp(56px, 7vw, 96px); }
.me .wash { position: absolute; inset: -20% -10% auto -10%; height: 140%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(40% 50% at 82% 25%, color-mix(in srgb, var(--mauve) 85%, transparent), transparent 70%),
    radial-gradient(35% 45% at 95% 80%, color-mix(in srgb, var(--rose) 95%, transparent), transparent 70%),
    radial-gradient(40% 55% at 12% 8%, var(--cream), transparent 70%);
  filter: blur(10px); animation: drift 18s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce) { .me .wash { animation: none; } }
.me-hero .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; }
.me-hero h1 { font-size: clamp(2.6rem, 6vw, 4.8rem); font-weight: 800; margin-block: 18px 18px; }
.me-hero .lede { font-size: clamp(1.1rem, 1.8vw, 1.3rem); color: var(--soft-text); max-width: 42ch; margin-bottom: 30px; }
.me-steps { display: grid; gap: 14px; }
.me-step { display: flex; gap: 16px; align-items: flex-start; background: var(--white); border: 1px solid var(--line); border-radius: 18px; padding: 18px 20px; box-shadow: var(--shadow); }
.me-step.s2 { margin-left: 36px; }
.me-step.s3 { margin-left: 72px; }
.me-step .n { font-family: var(--display); font-style: italic; font-size: 1.9rem; line-height: 1; color: var(--accent-text); flex: none; width: 40px; }
.me-step b { display: block; font-family: var(--head); font-weight: 700; font-size: 1.1rem; letter-spacing: -0.02em; line-height: 1.2; }
.me-step p { color: var(--soft-text); font-size: 0.9375rem; margin-top: 4px; }
@media (max-width: 900px) { .me-hero .wrap { grid-template-columns: 1fr; } .me-step.s2 { margin-left: 18px; } .me-step.s3 { margin-left: 36px; } }

.me-statement { border-block: 1px solid var(--line); background: var(--cream); }
.me-statement p { font-family: var(--head); font-weight: 800; font-size: clamp(2rem, 5vw, 3.6rem); letter-spacing: -0.035em; line-height: 1.05; padding-block: clamp(40px, 6vw, 64px); text-align: center; text-wrap: balance; }
.me-statement em { font-family: var(--display); font-style: italic; font-weight: 400; color: var(--accent-text); letter-spacing: -0.01em; }

.me-philo { padding-block: clamp(72px, 9vw, 120px) clamp(48px, 6vw, 72px); }
.me-philo-head { max-width: 760px; }
.me-philo h2 { font-size: clamp(2.2rem, 4.8vw, 3.6rem); margin-block: 14px 16px; }
.me-philo .intro { font-size: 1.15rem; color: var(--soft-text); }
.me-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 44px; }
.me-card { border: 1px solid var(--line); border-radius: 18px; padding: 26px; background: linear-gradient(180deg, var(--white), color-mix(in srgb, var(--blush) 45%, var(--white))); display: grid; gap: 14px; align-content: start; }
.me-card svg { width: 40px; height: 40px; }
.me-card p { color: var(--ink); font-size: 0.9688rem; }
@media (max-width: 860px) { .me-cards { grid-template-columns: 1fr; } }

.me-tech-wrap { padding-bottom: clamp(48px, 6vw, 72px); }
.me-tech { background: var(--mauve); border-radius: 28px; padding: clamp(32px, 5vw, 60px); display: grid; grid-template-columns: 0.75fr 1.25fr; gap: 40px; color: var(--on-feature); }
.me-tech .eyebrow { color: var(--ink); }
.me-tech h2 { font-size: clamp(2.1rem, 4.4vw, 3.3rem); margin-block: 14px 20px; }
.me-tech h2 em { color: var(--ink); }
.me-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.me-tags span { background: var(--white); border-radius: 999px; padding: 6px 14px; font-size: 0.875rem; font-weight: 600; }
.me-tech-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; font-size: 1rem; }
.me-tech-cols p { background: color-mix(in srgb, var(--white) 55%, transparent); border-radius: 16px; padding: 20px; }
@media (max-width: 960px) { .me-tech { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .me-tech-cols { grid-template-columns: 1fr; } }

.me-close { padding-bottom: clamp(72px, 9vw, 120px); }

/* ════════ Cut It Yourself page: soft tech ════════ */
.cy-hero { position: relative; overflow: hidden; padding-block: clamp(48px, 7vw, 96px) clamp(56px, 7vw, 88px); }
.cy .wash { position: absolute; inset: -20% -10% auto -10%; height: 140%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(40% 50% at 80% 30%, color-mix(in srgb, var(--rose) 95%, transparent), transparent 70%),
    radial-gradient(35% 45% at 98% 78%, color-mix(in srgb, var(--mauve) 90%, transparent), transparent 70%),
    radial-gradient(40% 55% at 12% 8%, var(--cream), transparent 70%);
  filter: blur(10px); animation: drift 18s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce) { .cy .wash { animation: none; } }
.cy-hero .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 48px; align-items: center; }
.cy-hero h1 { font-size: clamp(2.6rem, 6vw, 4.8rem); font-weight: 800; margin-block: 18px 16px; }
.cy-hero .lede { font-size: clamp(1.1rem, 1.8vw, 1.3rem); color: var(--soft-text); max-width: 36ch; margin-bottom: 28px; }
.cy-video { position: relative; margin-top: 0; background: var(--white); border-radius: 18px; box-shadow: var(--shadow); border: 1px solid var(--line); overflow: hidden; scroll-margin-top: 100px; }
.cy-video .bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 0.8125rem; color: var(--soft-text); }
.cy-video .bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--rose); }
.cy-video .bar i:nth-child(2) { background: var(--cream); } .cy-video .bar i:nth-child(3) { background: var(--mauve); }
.cy-video .bar span { margin-left: 8px; }
.cy-video .bar em { font-family: var(--display); font-style: italic; }
.cy-video video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--ink); }
.cy-chip { position: absolute; right: 12px; top: 6px; z-index: 2; background: var(--rose); border-radius: 999px; padding: 7px 14px; font-size: 0.8125rem; font-weight: 600; box-shadow: var(--shadow); }
@media (max-width: 900px) { .cy-hero .wrap { grid-template-columns: 1fr; } }

.cy-sec { padding-block: clamp(56px, 7vw, 96px); scroll-margin-top: 90px; }
.cy-sec.tight { padding-top: 0; }
.cy-sec h2 { letter-spacing: -0.03em; }

.cy-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
.plan { border: 1px solid var(--line); border-radius: 22px; padding: 14px 14px 22px; background: var(--white); display: flex; flex-direction: column; gap: 8px; box-shadow: 0 1px 2px rgba(0,0,0,.04); transition: transform .2s, box-shadow .2s; }
.plan:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.plan.best { background: var(--rose); border-color: transparent; }
.plan .pic { display: block; border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 3; margin-bottom: 10px; }
.plan .pic img { width: 100%; height: 100%; object-fit: cover; }
.plan .kick, .plan h2, .plan .amt, .plan .sub { padding-inline: 8px; }
.plan .kick { font-family: var(--display); font-style: italic; color: var(--accent-text); }
.plan h2 { font-size: 1.5rem; }
.plan .amt { font-family: var(--head); font-weight: 800; font-size: 2.4rem; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.plan .amt small { display: block; font-family: var(--body); font-weight: 500; font-size: 0.8125rem; letter-spacing: 0; color: var(--soft-text); }
.plan .sub { color: var(--soft-text); font-size: 0.9375rem; flex: 1; }
.plan.best .sub, .plan.best .amt small { color: var(--ink); }
.plan .btn { margin: 8px 8px 0; justify-content: center; }
@media (max-width: 860px) { .cy-plans { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } }

.cy-pain { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pain-card { border-radius: 22px; padding: clamp(26px, 4vw, 40px); }
.pain-card.a { background: var(--blush); }
.pain-card.b { background: var(--mauve); }
.pain-card h3 { font-size: clamp(1.3rem, 2.2vw, 1.6rem); margin-bottom: 18px; }
.pain-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 1.0625rem; }
.pain-card li { background: color-mix(in srgb, var(--white) 60%, transparent); border-radius: 12px; padding: 10px 14px; }
@media (max-width: 760px) { .cy-pain { grid-template-columns: 1fr; } }

.tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; background: var(--blush); padding: 4px; border-radius: 12px; margin-block: 14px 24px; }
.tabs [role="tab"] { border: 0; background: transparent; font: 600 0.9375rem var(--body); color: var(--soft-text); padding: 10px 16px; border-radius: 9px; cursor: pointer; }
.tabs [role="tab"][aria-selected="true"] { background: var(--white); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.tab-panel { display: grid; grid-template-columns: 1.4fr 0.6fr; gap: 32px; border: 1px solid var(--line); border-radius: 22px; padding: clamp(24px, 4vw, 40px); background: var(--white); box-shadow: var(--shadow); }
.tab-panel[hidden] { display: none; }
.tp-main { display: grid; gap: 16px; align-content: start; }
.tp-main h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.tp-main .sub { font-size: 1.125rem; }
.tp-main .ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.tp-main .btn { justify-self: start; }
.getbox { background: var(--cream); border-radius: 16px; padding: 20px 22px; }
.getbox h3 { font-size: 1.3rem; margin-bottom: 10px; }
.getbox ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.tp-photo { border-radius: 18px; overflow: hidden; align-self: start; aspect-ratio: 263 / 347; }
.tp-photo img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) { .tab-panel { grid-template-columns: 1fr; } .tp-photo { max-width: 260px; order: -1; } }

.cy-why { background: var(--rose); border-radius: 28px; padding: clamp(32px, 5vw, 60px); }
.cy-why h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); margin-bottom: 24px; }
.why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.why-grid p { background: var(--white); border-radius: 14px; padding: 16px 18px; font-weight: 500; }
.cy-why .closing { font-size: 1.1875rem; margin-top: 24px; max-width: 60ch; }
.cy-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 28px; }
.cy-trio .btn { justify-content: center; }
@media (max-width: 760px) { .why-grid, .cy-trio { grid-template-columns: 1fr; } }

.cy-split { display: grid; grid-template-columns: 0.7fr 1.3fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.cy-split.flip { grid-template-columns: 1.3fr 0.7fr; }
.cy-split h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); margin-block: 14px 20px; }
.cy-split .prose { font-size: 1.0625rem; }
.cy-photo { border-radius: 22px; overflow: hidden; aspect-ratio: 283 / 390; box-shadow: var(--shadow); }
.cy-photo img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 760px) { .cy-split, .cy-split.flip { grid-template-columns: 1fr; } .cy-photo { max-width: 300px; } }

.cy-faq { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 48px; }
.cy-faq h2 { font-size: clamp(2.2rem, 4.8vw, 3.4rem); margin-top: 14px; }
.cy-faq details { border-bottom: 1px solid var(--line); }
.cy-faq details:first-of-type { border-top: 1px solid var(--line); }
.cy-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; padding: 18px 0; font-weight: 600; font-size: 1.05rem; }
.cy-faq summary::-webkit-details-marker { display: none; }
.cy-faq summary::after { content: ""; width: 10px; height: 10px; border-right: 2px solid var(--soft-text); border-bottom: 2px solid var(--soft-text); transform: rotate(45deg); margin-top: 4px; transition: transform .2s; flex: none; }
.cy-faq details[open] summary::after { transform: rotate(-135deg); margin-top: 10px; }
.cy-faq details p { padding-bottom: 18px; color: var(--soft-text); }
@media (max-width: 860px) { .cy-faq { grid-template-columns: 1fr; gap: 20px; } }

.cy-offer { background: var(--cream); border-radius: 28px; padding: clamp(32px, 5vw, 60px); text-align: center; }
.cy-offer h2 { font-size: clamp(1.8rem, 3.8vw, 2.6rem); max-width: 22ch; margin: 0 auto 10px; }
.cy-offer .lead { font-family: var(--display); font-style: italic; font-size: 1.4rem; color: var(--accent-text); margin-bottom: 32px; }
.cy-offer .perks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; max-width: none; margin: 0 0 32px; text-align: left; }
.cy-offer .perks div { background: var(--white); border-radius: 16px; padding: 18px; display: grid; gap: 6px; align-content: start; }
.cy-offer .perks b { font-weight: 600; }
.cy-offer .perks span { color: var(--soft-text); font-size: 0.9375rem; }
.cy-offer .rows { display: grid; gap: 10px; text-align: left; }
.cy-row { display: flex; align-items: center; gap: 16px; background: var(--white); border-radius: 14px; padding: 12px 18px 12px 12px; text-decoration: none; box-shadow: 0 1px 2px rgba(0,0,0,.05); transition: transform .2s, box-shadow .2s; }
.cy-row:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.cy-row img { width: 60px; height: 60px; border-radius: 10px; object-fit: cover; }
.cy-row b { display: block; font-family: var(--head); font-weight: 700; font-size: 1.1rem; letter-spacing: -0.02em; }
.cy-row span { font-size: 0.8438rem; color: var(--soft-text); }
.cy-row .amt { margin-left: auto; font-family: var(--head); font-weight: 700; font-size: 1.2rem; color: var(--ink); }
.cy-row .go { color: var(--navy); font-weight: 600; font-size: 0.875rem; }
.cy-offer .sign-off { margin-top: 36px; }
@media (max-width: 900px) { .cy-offer .perks { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .cy-offer .perks { grid-template-columns: 1fr; } .cy-row .go { display: none; } }
@media (max-width: 560px) { .cy-chip { display: none; } }

/* ════════ Studio page: soft tech ════════ */
.sd-hero { position: relative; overflow: hidden; padding-block: clamp(48px, 7vw, 96px) clamp(56px, 7vw, 96px); }
.sd .wash { position: absolute; inset: -20% -10% auto -10%; height: 140%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(40% 50% at 80% 30%, color-mix(in srgb, var(--rose) 95%, transparent), transparent 70%),
    radial-gradient(35% 45% at 98% 78%, color-mix(in srgb, var(--mauve) 90%, transparent), transparent 70%),
    radial-gradient(40% 55% at 12% 8%, var(--cream), transparent 70%);
  filter: blur(10px); animation: drift 18s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce) { .sd .wash { animation: none; } }
.sd-hero .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.sd-hero h1 { font-size: clamp(2.8rem, 6.6vw, 5.2rem); font-weight: 800; margin-block: 18px 16px; }
.sd-hero .lede { font-size: clamp(1.05rem, 1.7vw, 1.25rem); color: var(--soft-text); margin-bottom: 28px; }
.sd-collage { position: relative; display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 12px; align-items: end; }
.sd-collage .ph { display: block; border-radius: 999px 999px 18px 18px; overflow: hidden; box-shadow: var(--shadow); border: 5px solid var(--white); }
.sd-collage .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.sd-collage .ph:hover img { transform: scale(1.05); }
.sd-collage .p1, .sd-collage .p3 { aspect-ratio: 2 / 3.1; }
.sd-collage .p2 { aspect-ratio: 2 / 2.9; transform: translateY(-24px); }
.sd-chip { position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%); white-space: nowrap; background: var(--white); border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; font-size: 0.8438rem; font-weight: 600; box-shadow: var(--shadow); }
@media (max-width: 900px) { .sd-hero .wrap { grid-template-columns: 1fr; } .sd-collage { max-width: 480px; } }

.sd-facts { border-block: 1px solid var(--line); }
.sd-facts .wrap { display: grid; grid-template-columns: repeat(4, 1fr); }
.sd-facts .wrap > div { padding: 24px 20px 24px 0; display: grid; gap: 2px; align-content: start; }
.sd-facts .wrap > div + div { padding-left: 24px; border-left: 1px solid var(--line); }
.sd-facts b { font-family: var(--head); font-weight: 800; font-size: clamp(1.3rem, 2.2vw, 1.75rem); letter-spacing: -0.03em; line-height: 1.1; }
.sd-facts span { color: var(--soft-text); font-size: 0.9063rem; }
@media (max-width: 760px) { .sd-facts .wrap { grid-template-columns: 1fr 1fr; } .sd-facts .wrap > div:nth-child(3) { padding-left: 0; border-left: 0; } .sd-facts .wrap > div:nth-child(n+3) { border-top: 1px solid var(--line); } }

.sd-team { padding-block: clamp(72px, 9vw, 112px) clamp(40px, 5vw, 64px); }
.sd-team h2 { font-size: clamp(2.2rem, 4.8vw, 3.6rem); margin-block: 14px 12px; }
.sd-team .intro { font-size: 1.15rem; color: var(--soft-text); margin-bottom: 40px; }
.sd-feature { display: grid; grid-template-columns: 0.85fr 1.15fr; border-radius: 24px; overflow: hidden; background: var(--rose); box-shadow: var(--shadow); margin-bottom: 16px; }
.sd-feature .photo img { width: 100%; height: 100%; object-fit: cover; min-height: 360px; }
.sd-feature .info { padding: clamp(28px, 4vw, 48px); display: grid; gap: 14px; align-content: center; }
.sd-feature h3 { font-family: var(--display); font-style: italic; font-weight: 400; font-size: 2.6rem; letter-spacing: -0.01em; }
.sd-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sd-card { border: 1px solid var(--line); border-radius: 22px; overflow: hidden; background: var(--white); display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s; }
.sd-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.sd-card .photo { aspect-ratio: 1 / 1; overflow: hidden; }
.sd-card .photo img { width: 100%; height: 100%; object-fit: cover; }
.sd-card .info { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.sd-card h3 { font-family: var(--display); font-style: italic; font-weight: 400; font-size: 1.9rem; letter-spacing: -0.01em; }
.sd-card p { font-size: 0.9375rem; color: var(--soft-text); }
.sd-card p.meta { color: var(--ink); background: var(--cream); border-radius: 10px; padding: 8px 12px; font-size: 0.875rem; font-weight: 500; }
.sd-card .info > p:not(.meta) { flex: 1; }
.sd-card .btn { align-self: flex-start; }
@media (max-width: 900px) { .sd-feature { grid-template-columns: 1fr; } .sd-feature .photo img { min-height: 0; aspect-ratio: 1 / 1; } .sd-trio { grid-template-columns: 1fr; max-width: 460px; } }

.sd-more { padding-bottom: clamp(72px, 9vw, 112px); }
.sd-more .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sd-tile { border-radius: 22px; padding: clamp(26px, 4vw, 40px); text-decoration: none; display: grid; gap: 10px; transition: transform .2s, box-shadow .2s; }
.sd-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.sd-tile.pink { background: var(--blush); } .sd-tile.blue { background: var(--mauve); }
.sd-tile .eyebrow { color: var(--ink); }
.sd-tile h3 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.sd-tile .go { color: var(--navy); font-weight: 600; }
.sd-tile.blue .go { color: var(--ink); }
@media (max-width: 760px) { .sd-more .wrap { grid-template-columns: 1fr; } }
.sd-feature .badge { justify-self: start; }
.sd-card .badge { background: var(--blush); }

/* ════════ Booking pages: soft tech ════════ */
.bk-hero { position: relative; overflow: hidden; padding-block: clamp(28px, 4vw, 48px) clamp(56px, 7vw, 88px); }
.bk .wash { position: absolute; inset: -20% -10% auto -10%; height: 140%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(40% 50% at 82% 25%, color-mix(in srgb, var(--rose) 95%, transparent), transparent 70%),
    radial-gradient(35% 45% at 98% 80%, color-mix(in srgb, var(--mauve) 90%, transparent), transparent 70%),
    radial-gradient(40% 55% at 10% 8%, var(--cream), transparent 70%);
  filter: blur(10px); animation: drift 18s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce) { .bk .wash { animation: none; } }
.bk-hero .wrap { position: relative; z-index: 1; }
.bk-switch { display: flex; flex-wrap: wrap; gap: 6px; background: color-mix(in srgb, var(--white) 70%, transparent); border: 1px solid var(--line); border-radius: 14px; padding: 5px; width: fit-content; max-width: 100%; margin-bottom: clamp(32px, 5vw, 56px); }
.bk-switch a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 600; font-size: 0.875rem; color: var(--soft-text); padding: 6px 12px 6px 6px; border-radius: 10px; }
.bk-switch a:hover { color: var(--ink); background: var(--white); }
.bk-switch img, .bk-switch .ico { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.bk-switch .ico { display: grid; place-items: center; background: var(--blush); font-size: 0.9rem; }
.bk[data-page="new"] [data-bk="new"], .bk[data-page="ally"] [data-bk="ally"], .bk[data-page="faith"] [data-bk="faith"], .bk[data-page="return"] [data-bk="return"] { background: var(--white); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.bk-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(28px, 5vw, 56px); align-items: start; }
.bk-intro { display: grid; gap: 18px; align-content: start; }
.bk-intro h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); font-weight: 800; }
.bk-intro .lede { font-size: 1.125rem; color: var(--soft-text); }
.bk-who { display: inline-flex; align-items: center; gap: 12px; background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 8px 16px 8px 8px; width: fit-content; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.bk-who img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.bk-who b { display: block; font-size: 0.9375rem; } .bk-who span { font-size: 0.8125rem; color: var(--soft-text); }
.bk-meta { background: var(--cream); border-radius: 14px; padding: 14px 16px; font-weight: 500; }
.bk-note { color: var(--soft-text); font-size: 0.9375rem; }
.bk-bang { display: flex; justify-content: space-between; align-items: center; gap: 12px; text-decoration: none; background: var(--blush); border-radius: 14px; padding: 14px 18px; transition: transform .2s; }
.bk-bang:hover { transform: translateY(-2px); }
.bk-bang span { font-family: var(--display); font-style: italic; font-size: 1.15rem; }
.bk-bang b { color: var(--navy); font-size: 0.9375rem; }
.bk-window { background: var(--white); border-radius: 18px; box-shadow: var(--shadow); border: 1px solid var(--line); overflow: hidden; min-width: 0; }
.bk-window .bar { display: flex; align-items: center; gap: 6px; padding: 11px 14px; border-bottom: 1px solid var(--line); font-size: 0.8125rem; color: var(--soft-text); }
.bk-window .bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--rose); }
.bk-window .bar i:nth-child(2) { background: var(--cream); } .bk-window .bar i:nth-child(3) { background: var(--mauve); }
.bk-window .bar span { margin-left: 8px; }
.bk-window .bar em { font-family: var(--display); font-style: italic; }
.bk-window .square-slot { padding: 16px; min-height: 420px; }
.bk-window .preview-slot { min-height: 388px; background: var(--blush); border-color: color-mix(in srgb, var(--accent-text) 40%, transparent); }
.bk-form { padding: clamp(18px, 3vw, 28px); }
.bk-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pick { display: flex !important; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; cursor: pointer; font-size: 0.9375rem; font-weight: 600; }
.pick input { width: 18px; height: 18px; accent-color: var(--navy); }
.pick img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.pick:has(input:checked) { border-color: var(--navy); box-shadow: 0 0 0 3px color-mix(in srgb, var(--navy) 15%, transparent); }
.bk-facts { display: flex; flex-wrap: wrap; gap: 8px; }
.bk-facts span { background: var(--white); border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; font-size: 0.875rem; }
@media (max-width: 900px) { .bk-grid { grid-template-columns: 1fr; } }

.bk-sec { padding-bottom: clamp(72px, 9vw, 112px); }
.bk-policies { border: 1px solid var(--line); border-radius: 24px; padding: clamp(24px, 4vw, 40px); background: linear-gradient(180deg, var(--white), color-mix(in srgb, var(--blush) 40%, var(--white))); }
.bk-pol-head h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-top: 12px; }
.bk-pol-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 24px; }
.pol { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; display: grid; gap: 6px; align-content: start; font-size: 0.9063rem; }
.pol b { font-weight: 600; } .pol p { color: var(--soft-text); }
.pol.wide { grid-column: span 3; }
.pol.agree { background: var(--cream); }
.bk-pol-foot { margin-top: 16px; font-size: 0.8125rem; font-style: italic; color: var(--soft-text); }
@media (max-width: 860px) { .bk-pol-grid { grid-template-columns: 1fr; } .pol.wide { grid-column: auto; } }
.bk-waitlist { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 16px; text-decoration: none; background: var(--mauve); border-radius: 18px; padding: 20px 24px; font-family: var(--head); font-weight: 700; font-size: clamp(1.1rem, 2vw, 1.4rem); letter-spacing: -0.02em; transition: transform .2s; }
.bk-waitlist:hover { transform: translateY(-2px); }
.bk-waitlist em { font-family: var(--display); font-style: italic; font-weight: 400; }
.bk-waitlist .go { width: 40px; height: 40px; border-radius: 50%; background: var(--white); display: grid; place-items: center; flex: none; }

.bk-gate { max-width: 640px; margin: 0 auto; text-align: center; background: var(--white); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow); padding: clamp(28px, 5vw, 56px); display: grid; gap: 18px; justify-items: center; }
.bk-gate .lock { width: 56px; height: 56px; border-radius: 50%; background: var(--blush); display: grid; place-items: center; font-size: 1.5rem; }
.bk-gate h1 { font-size: clamp(2rem, 4.4vw, 3rem); }
.bk-gate p { color: var(--soft-text); }
.bk-email { font-family: var(--head); font-weight: 700; color: var(--ink) !important; background: var(--cream); border-radius: 999px; padding: 8px 16px; user-select: all; }
.bk-gate .preview-slot { width: 100%; }

/* ════════ Join the team: soft tech ════════ */
.jt-hero { position: relative; overflow: hidden; padding-block: clamp(48px, 7vw, 96px) clamp(56px, 7vw, 88px); }
.jt .wash { position: absolute; inset: -20% -10% auto -10%; height: 140%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(40% 50% at 80% 30%, color-mix(in srgb, var(--rose) 95%, transparent), transparent 70%),
    radial-gradient(35% 45% at 98% 78%, color-mix(in srgb, var(--mauve) 90%, transparent), transparent 70%),
    radial-gradient(40% 55% at 10% 8%, var(--cream), transparent 70%);
  filter: blur(10px); animation: drift 18s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce) { .jt .wash { animation: none; } }
.jt-hero .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
.jt-intro { display: grid; gap: 18px; justify-items: start; }
.jt-pill { display: inline-flex; align-items: center; gap: 8px; font-size: 0.875rem; font-weight: 600; background: color-mix(in srgb, var(--white) 70%, transparent); border: 1px solid var(--line); border-radius: 999px; padding: 5px 14px 5px 5px; }
.jt-pill b { background: var(--navy); color: var(--white); border-radius: 999px; padding: 3px 10px; font-size: 0.8125rem; }
.jt-intro h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); font-weight: 800; }
.jt-studio { color: var(--soft-text); font-size: 1.0625rem; line-height: 1.6; }
.jt-studio em { font-family: var(--display); font-style: italic; color: var(--accent-text); }
.jt-intro .prose { font-size: 1.125rem; max-width: 46ch; }
.jt-stack { position: relative; min-height: 440px; }
.jt-photo { position: absolute; right: 0; top: 0; width: 82%; border-radius: 22px; overflow: hidden; box-shadow: var(--shadow); border: 6px solid var(--white); aspect-ratio: 4 / 3.4; }
.jt-photo img { width: 100%; height: 100%; object-fit: cover; }
.jt-team { position: absolute; left: 0; bottom: 0; background: var(--white); border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px; box-shadow: var(--shadow); display: grid; gap: 12px; max-width: 86%; }
.jt-team .tiny { font-size: 0.75rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--soft-text); }
.faces { display: flex; align-items: center; }
.faces img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 3px solid var(--white); margin-left: -10px; }
.faces img:first-child { margin-left: 0; }
.faces span { margin-left: 10px; font-family: var(--display); font-style: italic; font-size: 1.25rem; color: var(--accent-text); }
.jt-chip { position: absolute; right: -8px; top: 18px; background: var(--rose); border-radius: 999px; padding: 8px 14px; font-size: 0.8125rem; font-weight: 600; box-shadow: var(--shadow); }
@media (max-width: 900px) { .jt-hero .wrap { grid-template-columns: 1fr; } .jt-stack { max-width: 520px; width: 100%; } .jt-chip { right: 8px; } }
@media (max-width: 480px) { .jt-stack { min-height: 380px; } }

.jt-apply { padding-bottom: clamp(72px, 9vw, 112px); scroll-margin-top: 90px; }
.jt-window { max-width: 760px; margin: 0 auto; }
.jt-form-wrap { padding: clamp(22px, 4vw, 40px); }
.jt-form-wrap h2 { font-size: clamp(1.7rem, 3.4vw, 2.3rem); margin-bottom: 20px; }
.jt-form-wrap .form .btn { justify-self: stretch; justify-content: center; }
.jt-upload { border: 1.5px dashed var(--line); border-radius: 14px; padding: 14px; background: var(--blush); }
.jt-upload input { background: var(--white); }
.jt-end { text-align: center; margin-top: 32px; font-family: var(--head); font-weight: 700; font-size: clamp(1.5rem, 3vw, 2.2rem); letter-spacing: -0.03em; }
.jt-end em { font-family: var(--display); font-style: italic; font-weight: 400; color: var(--accent-text); }

/* ════════ Footer: soft tech ════════ */
.ft { background: var(--white); border-top: 1px solid var(--line); padding-top: clamp(40px, 6vw, 72px); overflow: hidden; color: var(--ink); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ft-news { position: relative; border-radius: 26px; padding: clamp(26px, 4vw, 44px); display: grid; grid-template-columns: 1fr 1fr; gap: 24px 48px; align-items: center; overflow: hidden;
  background:
    radial-gradient(60% 120% at 0% 0%, var(--cream), transparent 70%),
    radial-gradient(60% 120% at 60% 100%, var(--rose), transparent 70%),
    radial-gradient(50% 120% at 100% 0%, var(--mauve), transparent 70%),
    var(--blush); }
.ft-news h3 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); margin-bottom: 10px; }
.ft-news p { color: var(--ink); max-width: 44ch; }
.ft-field { display: flex; gap: 8px; background: var(--white); border-radius: 14px; padding: 6px; box-shadow: var(--shadow); }
.ft-field input { border: 0; background: transparent; flex: 1; min-width: 0; padding: 10px 12px; font-size: 1rem; }
.ft-field input:focus { outline: none; }
.ft-field:focus-within { box-shadow: var(--shadow), 0 0 0 3px color-mix(in srgb, var(--navy) 25%, transparent); }
.ft-field .btn { flex: none; }
.ft-news .form-note { margin-top: 10px; color: var(--ink); }
@media (max-width: 760px) { .ft-news { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .ft-field { flex-direction: column; } .ft-field .btn { justify-content: center; } }

.ft-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; padding-block: clamp(40px, 6vw, 64px) 8px; }
.ft-brand { display: grid; gap: 12px; align-content: start; }
.ft-brand .logo { font-size: 1.75rem; }
.ft-brand p { color: var(--soft-text); font-size: 0.9375rem; }
.ft .socials { display: flex; gap: 8px; margin-top: 4px; }
.ft .socials a { width: 38px; height: 38px; border-radius: 10px; background: var(--blush); display: grid; place-items: center; transition: background .2s, transform .2s; }
.ft .socials a:hover { background: var(--rose); transform: translateY(-2px); }
.ft .socials svg { width: 17px; height: 17px; fill: var(--ink); }
.ft-col { display: grid; gap: 10px; align-content: start; font-size: 0.9375rem; }
.ft-col h4 { font-family: var(--body); font-size: 0.75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--soft-text); margin-bottom: 4px; }
.ft-col a { text-decoration: none; color: var(--ink); width: fit-content; }
.ft-col a:hover { color: var(--navy); }
.ft-col address { font-style: normal; line-height: 1.6; color: var(--ink); }
.ft-email { user-select: all; color: var(--ink); }
.ft-hiring { display: inline-flex !important; align-items: center; gap: 8px; white-space: nowrap; }
.ft-hiring span { background: var(--rose); border-radius: 999px; padding: 2px 8px; font-size: 0.6875rem; font-weight: 600; }
@media (max-width: 860px) { .ft-grid { grid-template-columns: 1fr 1fr; } .ft-brand { grid-column: 1 / -1; } }
.ft-mark { font-family: var(--display); font-style: italic; font-size: clamp(3.2rem, 13.5vw, 11.5rem); line-height: 1.05; letter-spacing: -0.03em; text-align: center; white-space: nowrap; padding: 0 0.08em 0.12em; margin: clamp(16px, 3vw, 32px) 0 0;
  background: linear-gradient(90deg, var(--cream), var(--rose), var(--mauve)); -webkit-background-clip: text; background-clip: text; color: transparent; user-select: none; }

/* ════════ Header: soft tech (announcement line + floating glass pill) ════════ */
.announce { display: flex; justify-content: center; align-items: center; gap: 10px; text-decoration: none; font-size: 0.8438rem; padding: 9px max(16px, env(safe-area-inset-right, 0px)) 9px max(16px, env(safe-area-inset-left, 0px));
  background: linear-gradient(90deg, var(--cream), var(--blush), color-mix(in srgb, var(--mauve) 45%, var(--white))); color: var(--ink); }
.announce b { background: var(--navy); color: var(--white); border-radius: 999px; padding: 2px 9px; font-size: 0.75rem; font-weight: 600; }
.announce i { font-style: normal; transition: transform .2s; }
.announce:hover i { transform: translateX(3px); }
.announce:hover span { text-decoration: underline; text-underline-offset: 3px; }

header.site { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: transparent; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none;
  padding-left: max(12px, env(safe-area-inset-left, 0px)); padding-right: max(12px, env(safe-area-inset-right, 0px)); margin-top: 0; height: 0; overflow: visible; }
header.site .nav-pill { position: relative; top: 10px; }
header.site .nav-pill { max-width: 1120px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 8px 8px 20px; border-radius: 16px;
  background: color-mix(in srgb, var(--white) 72%, transparent); backdrop-filter: saturate(1.4) blur(16px); -webkit-backdrop-filter: saturate(1.4) blur(16px);
  border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(58,58,64,.05), 0 10px 30px -18px rgba(58,58,64,.35); }
header.site .logo { font-size: 1.45rem; }
header.site nav { display: flex; align-items: center; gap: 2px; font-size: 0.875rem; font-weight: 500; }
header.site nav a { text-decoration: none; color: var(--soft-text); padding: 8px 12px; border-radius: 10px; transition: background .2s, color .2s; }
header.site nav a:hover { color: var(--ink); background: color-mix(in srgb, var(--blush) 70%, transparent); }
header.site nav a[aria-current="page"] { color: var(--ink); background: var(--blush); }
.nav-end { display: flex; align-items: center; gap: 8px; }
header.site .nav-end > .btn { padding: 0.65em 1.05em; font-size: 0.875rem; }
.menu { display: none; position: relative; }
.menu summary { width: 40px; height: 40px; border-radius: 10px; background: var(--blush); }
.menu-panel { position: absolute; right: 0; top: 52px; min-width: 240px; background: var(--white); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); padding: 8px; display: grid; gap: 2px; }
.menu-panel a { padding: 12px 14px; border-radius: 10px; font-weight: 500; }
.menu-panel a:not(.btn):hover { background: var(--blush); }
.menu-panel .btn { margin-top: 6px; justify-content: center; color: var(--white); display: flex !important; }
@media (max-width: 960px) {
  header.site nav { display: none; }
  .menu { display: block; }
}
@media (max-width: 420px) { header.site .nav-end > .btn { display: none; } header.site .logo { font-size: 1.3rem; } }
/* the floating bar overlaps the top of each page: give openers room */
main > div:first-child > section:first-child, main > section:first-child { padding-top: calc(clamp(40px, 6vw, 80px) + 72px) !important; }

/* ════════ Studio: app-style stylist picker ════════ */
.picker { display: grid; grid-template-columns: 300px 1fr; gap: 16px; align-items: start; }
.pk-list { display: grid; gap: 8px; position: sticky; top: 100px; background: color-mix(in srgb, var(--blush) 55%, var(--white)); border: 1px solid var(--line); border-radius: 20px; padding: 8px; }
.pk-list [role="tab"] { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: 1px solid transparent; background: transparent; border-radius: 14px; padding: 10px 12px 10px 10px; cursor: pointer; font: inherit; color: var(--ink); transition: background .2s, border-color .2s, box-shadow .2s; }
.pk-list [role="tab"]:hover { background: color-mix(in srgb, var(--white) 70%, transparent); }
.pk-list [role="tab"][aria-selected="true"] { background: var(--white); border-color: var(--line); box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 8px 20px -14px rgba(58,58,64,.4); }
.pk-list img { width: 48px; height: 48px; border-radius: 12px; object-fit: cover; flex: none; }
.pk-list span { display: grid; flex: 1; min-width: 0; }
.pk-list b { font-family: var(--head); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.02em; }
.pk-list small { font-size: 0.8125rem; color: var(--soft-text); }
.pk-list i { font-style: normal; color: var(--soft-text); font-size: 1.3rem; transition: transform .2s; }
.pk-list [aria-selected="true"] i { color: var(--navy); transform: translateX(3px); }
.pk-panel { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 0; border: 1px solid var(--line); border-radius: 24px; overflow: hidden; background: var(--white); box-shadow: var(--shadow); animation: pkIn .35s ease; }
.pk-panel[hidden] { display: none; }
@keyframes pkIn { from { opacity: .4; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pk-panel { animation: none; } }
.pk-photo { min-height: 100%; aspect-ratio: 4 / 5; }
.pk-photo img { width: 100%; height: 100%; object-fit: cover; }
.pk-info { padding: clamp(24px, 3.5vw, 40px); display: grid; gap: 16px; align-content: center; }
.pk-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.pk-head h3 { font-family: var(--display); font-style: italic; font-weight: 400; font-size: clamp(2.2rem, 3.6vw, 3rem); letter-spacing: -0.01em; line-height: 1; }
.pk-head .badge { background: var(--blush); }
.pk-info > p { color: var(--soft-text); }
.pk-meta { color: var(--ink) !important; background: var(--cream); border-radius: 12px; padding: 10px 14px; font-weight: 500; width: fit-content; }
.pk-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
@media (max-width: 960px) {
  .picker { grid-template-columns: 1fr; }
  .pk-list { position: static; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .pk-list::-webkit-scrollbar { display: none; }
  .pk-list [role="tab"] { flex: 0 0 auto; width: auto; scroll-snap-align: start; padding-right: 14px; }
  .pk-list i { display: none; }
  .pk-panel { grid-template-columns: 1fr; }
  .pk-photo { aspect-ratio: 1 / 1; }
}

/* Studio picker photo fix */
.pk-photo { aspect-ratio: auto; position: relative; min-height: 480px; height: 100%; }
.pk-photo img { position: absolute; inset: 0; }
.pk-info { min-width: 0; }
@media (max-width: 960px) { .pk-photo { min-height: 0; height: auto; aspect-ratio: 1 / 1; } }

/* Studio opener: app-window stage */
.sd-stage { position: relative; min-height: 470px; }
.sd-win { position: absolute; right: 0; top: 30px; width: 84%; background: var(--white); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); overflow: hidden; }
.sd-win .bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 0.8125rem; color: var(--soft-text); }
.sd-win .bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--rose); }
.sd-win .bar i:nth-child(2) { background: var(--cream); } .sd-win .bar i:nth-child(3) { background: var(--mauve); }
.sd-win .bar span { margin-left: 8px; } .sd-win .bar em { font-family: var(--display); font-style: italic; }
.sd-win img { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; }
.sd-float { position: absolute; display: block; border-radius: 999px 999px 16px 16px; overflow: hidden; border: 5px solid var(--white); box-shadow: var(--shadow); z-index: 2; transition: transform .3s; }
.sd-float:hover { transform: translateY(-4px) rotate(-1deg); }
.sd-float img { width: 100%; height: 100%; object-fit: cover; }
.sd-float.f1 { left: 0; top: 0; width: 28%; aspect-ratio: 2 / 2.9; }
.sd-float.f2 { right: -10px; bottom: 6px; width: 24%; aspect-ratio: 2 / 2.7; }
.sd-live { position: absolute; left: 22%; top: 12px; z-index: 3; display: inline-flex; align-items: center; gap: 8px; background: var(--white); border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; font-size: 0.8125rem; font-weight: 600; box-shadow: var(--shadow); }
.sd-live i { width: 8px; height: 8px; border-radius: 50%; background: #5DBB7F; box-shadow: 0 0 0 4px color-mix(in srgb, #5DBB7F 25%, transparent); }
.sd-team-card { position: absolute; left: 4%; bottom: 0; z-index: 3; display: flex; align-items: center; gap: 12px; text-decoration: none; background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 12px 16px 12px 12px; box-shadow: var(--shadow); max-width: 74%; transition: transform .2s; }
.sd-team-card:hover { transform: translateY(-2px); }
.sd-team-card .faces { display: flex; flex: none; }
.sd-team-card .faces img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 2px solid var(--white); margin-left: -9px; }
.sd-team-card .faces img:first-child { margin-left: 0; }
.sd-team-card b { display: block; font-family: var(--head); font-size: 0.9375rem; letter-spacing: -0.01em; }
.sd-team-card small { color: var(--soft-text); font-size: 0.75rem; }
@media (max-width: 900px) { .sd-stage { max-width: 560px; width: 100%; } }
@media (max-width: 520px) {
  .sd-stage { min-height: 400px; }
  .sd-win { width: 92%; top: 46px; }
  .sd-float.f1 { width: 30%; } .sd-float.f2 { display: none; }
  .sd-live { left: auto; right: 0; top: 0; }
  .sd-team-card { left: 0; max-width: 96%; }
}
.sd-win { top: 52px; }
.sd-win .bar span { margin-left: auto; }
.sd-live { left: auto; right: 0; top: 0; }
.sd-stage { min-height: 500px; }
@media (max-width: 520px) { .sd-stage { min-height: 420px; } .sd-win { top: 50px; } }

/* ════════ Studio: team grid (option D) with Read more ════════ */
.tm-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 330px; gap: 14px; }
.tm { position: relative; border-radius: 24px; overflow: hidden; box-shadow: var(--shadow); min-width: 0; }
.tm > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.tm:hover > img { transform: scale(1.03); }
.tm.big { grid-column: span 2; grid-row: span 2; }
.tm.wide { grid-column: span 2; }
.tm-panel { position: absolute; left: 12px; right: 12px; bottom: 12px; max-height: calc(100% - 24px); overflow-y: auto; scrollbar-width: thin;
  background: color-mix(in srgb, var(--white) 82%, transparent); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid rgba(255,255,255,.65); border-radius: 18px; padding: 14px 16px; display: grid; gap: 8px; }
.tm-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.tm h3 { font-family: var(--display); font-style: italic; font-weight: 400; font-size: 1.8rem; letter-spacing: -0.01em; line-height: 1; }
.tm.big h3 { font-size: 2.6rem; }
.tm .badge { background: var(--blush); font-size: 0.6563rem; }
.tm-lead { font-size: 0.9063rem; color: var(--ink); }
.tm-meta { font-size: 0.8125rem; font-weight: 500; color: var(--ink); background: color-mix(in srgb, var(--cream) 85%, transparent); border-radius: 10px; padding: 6px 10px; }
.tm-more summary { list-style: none; cursor: pointer; color: var(--navy); font-weight: 600; font-size: 0.875rem; width: fit-content; }
.tm-more summary::-webkit-details-marker { display: none; }
.tm-more summary::after { content: " ↓"; }
.tm-more[open] summary::after { content: " ↑"; }
.tm-more p { margin-top: 8px; font-size: 0.875rem; color: var(--ink); }
.tm-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.tm-panel > .btn, .tm-acts .btn { justify-content: center; }
@media (max-width: 960px) { .tm-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 360px; } }
@media (max-width: 600px) { .tm-grid { grid-template-columns: 1fr; grid-auto-rows: 440px; } .tm.big, .tm.wide { grid-column: auto; grid-row: auto; } .tm.big { height: 520px; } }
.tm-grid { grid-auto-rows: 400px; }
.tm:not(.big):not(.wide) .tm-meta { background: transparent; padding: 0; color: var(--soft-text); }
@media (max-width: 960px) { .tm-grid { grid-auto-rows: 420px; } }
@media (max-width: 600px) { .tm-grid { grid-auto-rows: auto; } .tm { height: 480px; } .tm.big { height: 560px; } }

/* ════════ Studio: calm team section (full bios, Liza featured) ════════ */
.crew { display: grid; gap: 16px; }
.crew-lead, .crew-card { background: var(--white); border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 1px 2px rgba(58,58,64,.04), 0 16px 36px -28px rgba(58,58,64,.35); }
.crew-lead { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(20px, 3vw, 40px); padding: 14px; align-items: center; }
.crew-lead .crew-ph { border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 4.4; }
.crew-lead .crew-in { padding: clamp(8px, 2vw, 24px) clamp(8px, 2vw, 24px) clamp(8px, 2vw, 24px) 0; display: grid; gap: 16px; }
.crew-lead h3 { font-size: clamp(2.4rem, 4vw, 3.2rem); }
.crew-lead p { font-size: 1.0313rem; color: var(--ink); max-width: 56ch; }
.crew-ph img { width: 100%; height: 100%; object-fit: cover; }
.crew-name { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.crew-name h3 { font-family: var(--display); font-style: italic; font-weight: 400; font-size: 2rem; letter-spacing: -0.01em; line-height: 1; }
.crew .badge { background: var(--blush); }
.crew-acts { display: flex; flex-wrap: wrap; gap: 10px; }
.crew-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.crew-card { padding: 14px 14px 22px; display: flex; flex-direction: column; gap: 12px; }
.crew-card .crew-ph { border-radius: 16px; overflow: hidden; aspect-ratio: 1 / 1; margin-bottom: 6px; }
.crew-card .crew-name, .crew-card p { padding-inline: 8px; }
.crew-card p { font-size: 0.9375rem; color: var(--soft-text); }
.crew-card p:not(.crew-meta) { flex: 1; }
.crew-meta { color: var(--ink) !important; font-weight: 500; font-size: 0.875rem !important; }
.crew-card .btn { margin-inline: 8px; justify-content: center; }
@media (max-width: 900px) { .crew-lead { grid-template-columns: 1fr; } .crew-lead .crew-in { padding: 4px 10px 14px; } .crew-row { grid-template-columns: 1fr; max-width: 480px; } }

/* ════════ Studio team: gentle interactivity (hover + scroll-in) ════════ */
.crew-lead, .crew-card { transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; }
.crew-ph img { transition: transform .9s ease; }
.crew-lead:hover, .crew-card:hover { transform: translateY(-6px); border-color: var(--rose); box-shadow: 0 2px 4px rgba(58,58,64,.05), 0 28px 50px -30px rgba(58,58,64,.45); }
.crew-lead:hover .crew-ph img, .crew-card:hover .crew-ph img { transform: scale(1.05); }
.crew .badge { transition: background .3s, color .3s; }
.crew-lead:hover .badge, .crew-card:hover .badge { background: var(--rose); color: var(--ink); }
.crew .btn::after { content: "→"; display: inline-block; margin-left: 2px; transition: transform .25s; }
.crew .btn.ghost::after { content: none; }
.crew-lead:hover .btn::after, .crew-card:hover .btn::after { transform: translateX(4px); }
/* scroll-in: only when JS has marked the section; cards stay visible without it */
.crew.js-reveal .crew-lead, .crew.js-reveal .crew-card { opacity: 0.35; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease, box-shadow .35s ease, border-color .35s ease; }
.crew.js-reveal .is-in { opacity: 1; transform: none; }
.crew.js-reveal .crew-card:nth-child(2) { transition-delay: .08s; }
.crew.js-reveal .crew-card:nth-child(3) { transition-delay: .16s; }
.crew.js-reveal .is-in:hover { transform: translateY(-6px); transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) {
  .crew-lead, .crew-card, .crew-ph img, .crew .btn::after { transition: none !important; }
  .crew.js-reveal .crew-lead, .crew.js-reveal .crew-card { opacity: 1; transform: none; }
}

/* ════════ Site-wide motion ════════ */
/* 1. Page-load entrance (added by site.js to each opener's pieces) */
@keyframes enter { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.enter { animation: enter .8s cubic-bezier(.2,.7,.2,1) both; }

/* 2. Scroll-in reveal (site.js adds .rv, then .rv-in when on screen) */
.rv { opacity: 0; transform: translateY(26px); transition: opacity .75s ease, transform .75s cubic-bezier(.2,.7,.2,1); }
.rv.rv-in { opacity: 1; transform: none; }

/* 3. Gentle floating for cards and labels in the openers */
@keyframes bob { from { translate: 0 0; } to { translate: 0 -9px; } }
.home .c-book, .home .c-class, .home .badge-float, .ab-photo .chip, .sd-live, .sd-team-card, .sd-float, .jt-team, .jt-chip, .cy-chip, .me-step {
  animation: bob 5.5s ease-in-out infinite alternate; }
.home .c-class, .ab-photo .c2, .sd-float.f2, .jt-chip, .me-step.s2 { animation-duration: 6.5s; animation-delay: -2s; }
.home .badge-float, .sd-team-card, .me-step.s3 { animation-duration: 7s; animation-delay: -4s; }

/* 4. Hover lift on cards across the site */
.feat, .me-card, .pol, .st-panel, .ab-block, .cy-why .why-grid p, .perks > div, .ft-news, .getbox { transition: transform .35s ease, box-shadow .35s ease; }
.feat:hover, .me-card:hover, .pol:hover, .st-panel:hover, .perks > div:hover, .why-grid p:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.st-panel .media > img, .cy-photo img, .tp-photo img, .ab-photo .frame img, .jt-photo img, .sd-win img { transition: transform 1s ease; }
.st-panel:hover .media > img, .cy-photo:hover img, .tp-photo:hover img, .ab-photo:hover .frame img, .jt-photo:hover img, .sd-win:hover img { transform: scale(1.04); }
.btn { transition: background .2s, transform .2s, box-shadow .25s; }
.btn:hover { box-shadow: 0 10px 22px -10px rgba(77,110,154,.9); }
.btn:active { transform: translateY(0) scale(.98); }

/* 5. Menu bar firms up once you scroll */
header.site .nav-pill { transition: background .3s, box-shadow .3s; }
header.site.scrolled .nav-pill { background: color-mix(in srgb, var(--white) 90%, transparent); box-shadow: 0 1px 2px rgba(58,58,64,.06), 0 16px 40px -18px rgba(58,58,64,.45); }

@media (prefers-reduced-motion: reduce) {
  .enter, .home .c-book, .home .c-class, .home .badge-float, .ab-photo .chip, .sd-live, .sd-team-card, .sd-float, .jt-team, .jt-chip, .cy-chip, .me-step { animation: none !important; }
  .rv { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ════════ More motion ════════ */
/* Headline words rise one at a time */
.w { display: inline-block; animation: wordIn .75s cubic-bezier(.2,.7,.2,1) both; }
@keyframes wordIn { from { opacity: 0; transform: translateY(.45em) rotate(2deg); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }

/* Italic accent words get a self-drawing pink underline */
h1 em, h2 em { background-image: linear-gradient(transparent 0, transparent 0), linear-gradient(90deg, var(--rose), color-mix(in srgb, var(--mauve) 80%, var(--rose)));
  background-repeat: no-repeat; background-size: 0% 0.14em; background-position: 0 92%; transition: background-size 1.1s cubic-bezier(.2,.7,.2,1); padding-bottom: 0.02em; }
h1 em.drawn, h2 em.drawn { background-size: 100% 0.14em; }

/* Scroll progress line */
.progress { position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0; height: 3px; z-index: 30; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--cream), var(--rose), var(--mauve), var(--navy)); pointer-events: none; }

/* Cursor glow on cards */
.glow { position: relative; isolation: isolate; }
.glow::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2; opacity: 0; transition: opacity .35s;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--rose) 55%, transparent), transparent 70%); mix-blend-mode: multiply; }
.glow:hover::after { opacity: 1; }

/* Tilt targets keep a smooth return */
.tilt { transition: transform .5s cubic-bezier(.2,.7,.2,1); will-change: transform; }
.magnet { transition: translate .35s cubic-bezier(.2,.7,.2,1); }

/* Scrolling ribbon of Liza's phrases */
.ribbon { overflow: hidden; border-block: 1px solid var(--line); background: linear-gradient(90deg, var(--cream), var(--blush), color-mix(in srgb, var(--mauve) 35%, var(--white))); padding-block: 18px; }
.ribbon-track { display: flex; width: max-content; animation: ribbon 38s linear infinite; }
.ribbon:hover .ribbon-track { animation-play-state: paused; }
.ribbon span { font-family: var(--display); font-style: italic; font-size: clamp(1.4rem, 3vw, 2.2rem); white-space: nowrap; padding-inline: 22px; color: var(--ink); }
.ribbon span::after { content: "✦"; font-style: normal; font-size: .6em; color: var(--accent-text); margin-left: 44px; vertical-align: middle; }
@keyframes ribbon { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .w { animation: none !important; }
  h1 em, h2 em { background-size: 100% 0.14em; transition: none; }
  .ribbon-track { animation: none; }
  .progress { display: none; }
  .glow::after { display: none; }
}

/* ════════ Method: Our Technique, restructured for readability ════════ */
.tq { background: var(--mauve); border-radius: 28px; padding: clamp(24px, 4vw, 48px); display: grid; gap: clamp(20px, 3vw, 32px); }
.tq-top { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: clamp(20px, 4vw, 48px); align-items: center; }
.tq-intro { display: grid; gap: 14px; }
.tq .eyebrow { color: var(--ink); }
.tq h2 { font-size: clamp(2rem, 4.2vw, 3.2rem); }
.tq h2 em { color: var(--ink); }
.tq-big { font-family: var(--head); font-weight: 700; font-size: clamp(1.5rem, 2.8vw, 2.2rem); line-height: 1.2; letter-spacing: -0.02em; color: var(--ink); max-width: 24ch; }
.tq-photo { border-radius: 20px; overflow: hidden; aspect-ratio: 4 / 4.6; border: 5px solid var(--white); box-shadow: var(--shadow); }
.tq-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s ease; }
.tq-photo:hover img { transform: scale(1.04); }
.tq-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.tq-card { background: var(--white); border-radius: 18px; padding: 22px; display: grid; gap: 14px; align-content: start; transition: transform .35s ease, box-shadow .35s ease; }
.tq-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.tq-ico svg { width: 42px; height: 42px; display: block; }
.tq-card p { font-size: 1rem; line-height: 1.6; color: var(--ink); }
.tq-card .me-tags span { background: var(--blush); }
@media (max-width: 860px) { .tq-top, .tq-cards { grid-template-columns: 1fr; } .tq-photo { max-width: 320px; aspect-ratio: 4 / 3.6; } }

/* ════════ FAQ: smoother, softer rows ════════ */
details.acc { overflow: hidden; }
.st-faq details.acc, .cy-faq details.acc { border-bottom: 1px solid var(--line); }
.st-faq details.acc summary, .cy-faq details.acc summary {
  align-items: center; padding: 18px 14px; margin-inline: -14px; border-radius: 14px;
  transition: background .25s ease, color .25s ease; -webkit-tap-highlight-color: transparent; user-select: none; }
.st-faq details.acc summary:hover, .cy-faq details.acc summary:hover { background: color-mix(in srgb, var(--blush) 70%, transparent); }
.st-faq details.acc[open]:not(.acc-closing) summary, .cy-faq details.acc[open]:not(.acc-closing) summary { color: var(--navy); }
/* the icon: a soft circle with a plus that turns into a minus */
.st-faq details.acc summary::after, .cy-faq details.acc summary::after {
  content: ""; width: 30px; height: 30px; margin: 0; border: 0; flex: none; border-radius: 50%; transform: none;
  background:
    linear-gradient(var(--navy), var(--navy)) center / 12px 2px no-repeat,
    linear-gradient(var(--navy), var(--navy)) center / 2px 12px no-repeat,
    var(--blush);
  transition: transform .45s cubic-bezier(.2,.7,.2,1), background-color .25s; }
.st-faq details.acc[open]:not(.acc-closing) summary::after, .cy-faq details.acc[open]:not(.acc-closing) summary::after {
  transform: rotate(135deg); background-color: var(--rose); }
.st-faq details.acc summary:active::after, .cy-faq details.acc summary:active::after { scale: .9; }
.st-faq details.acc > p, .cy-faq details.acc > p { padding: 2px 46px 22px 0; color: var(--soft-text); line-height: 1.7; }
@media (prefers-reduced-motion: reduce) { .st-faq details.acc summary::after, .cy-faq details.acc summary::after { transition: none; } }

/* Homepage opener: course link under the buttons (replaces the floating course card) */
.home .stack { min-height: 520px; }
.diy-link { display: flex; align-items: center; gap: 14px; margin-top: 28px; max-width: 420px; text-decoration: none; color: var(--ink);
  background: color-mix(in srgb, var(--white) 75%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line); border-radius: 16px; padding: 10px 16px 10px 10px; transition: transform .25s ease, box-shadow .25s ease, border-color .25s; }
.diy-link:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--rose); }
.diy-link img { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; flex: none; }
.diy-link > span { display: grid; gap: 1px; flex: 1; min-width: 0; }
.diy-link small { font-size: 0.75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); }
.diy-link b { font-family: var(--head); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.02em; }
.diy-link b em { font-family: var(--display); font-style: italic; font-weight: 400; color: var(--accent-text); }
.diy-link .sub { font-size: 0.8125rem; color: var(--soft-text); }
.diy-link i { font-style: normal; width: 34px; height: 34px; border-radius: 50%; background: var(--blush); display: grid; place-items: center; flex: none; transition: transform .25s, background .25s; }
.diy-link:hover i { transform: translateX(3px); background: var(--rose); }
@media (max-width: 520px) { .home .stack { min-height: 560px; } }

/* Quieter course aside (overrides the card version) */
.diy-link { display: inline-flex; align-items: center; gap: 12px; margin-top: 22px; max-width: none; width: fit-content; padding: 4px 6px 4px 0;
  background: none; border: 0; border-radius: 0; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none !important; transform: none !important; color: var(--soft-text); font-size: 0.9375rem; }
.diy-link .thumbs { display: flex; }
.diy-link .thumbs img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 2px solid var(--white); margin-left: -8px; transition: margin .3s ease; }
.diy-link .thumbs img:first-child { margin-left: 0; }
.diy-link:hover .thumbs img { margin-left: -2px; }
.diy-link:hover .thumbs img:first-child { margin-left: 0; }
.diy-link .txt { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: text-decoration-color .25s, color .25s; }
.diy-link:hover .txt { color: var(--ink); text-decoration-color: var(--rose); }
.diy-link em { font-family: var(--display); font-style: italic; color: var(--accent-text); font-size: 1.05em; }
.diy-link i { width: auto; height: auto; background: none; color: var(--accent-text); transition: transform .25s; }
.diy-link:hover i { transform: translateX(4px); background: none; }
.diy-link > span.txt { display: inline; flex: none; white-space: nowrap; }
.diy-link > span.thumbs { display: flex; flex: none; }
@media (max-width: 420px) { .diy-link > span.txt { white-space: normal; } }



/* Method statement: hand-drawn pink circle around "not" (draws itself in) */
.me-statement .circ { position: relative; display: inline-block; padding-inline: .12em; }
.me-statement .circ svg { position: absolute; left: -16%; top: -18%; width: 132%; height: 140%; overflow: visible; pointer-events: none; }
.me-statement .circ path { fill: none; stroke: #E59AA5; stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s cubic-bezier(.6,.1,.3,1) .2s; }
.me-statement .circ.drawn path { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) { .me-statement .circ path { stroke-dashoffset: 0; transition: none; } }

/* ---------- Phone tidy-ups ---------- */
@media (max-width: 600px) {
  /* "Not in Toronto? Cut It Yourself at home." wraps instead of running into the edge */
  .diy-link { width: fit-content; max-width: 100%; justify-self: start; align-self: flex-start; }
  .diy-link > span.txt { white-space: normal; flex: 0 1 auto; min-width: 0; }
  /* Masterclass tabs: three even buttons on one row */
  .tabs { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; }
  .tabs [role="tab"] { padding: 10px 6px; font-size: 0.875rem; line-height: 1.25; }
  /* Photos fill the width of the screen */
  .tp-photo, .cy-photo { max-width: none; width: 100%; }
  .tp-photo { aspect-ratio: 4 / 4.4; }
  .cy-photo { aspect-ratio: 4 / 4.6; }
  /* Booking policies: less padding around the cards so the text has room */
  .bk-policies { padding: 20px 14px; border-radius: 20px; }
  /* Liza's two buttons sit side by side */
  .crew-lead .crew-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .crew-lead .crew-acts .btn { justify-content: center; text-align: center; padding-inline: 10px; }
  /* Footer links a little easier to tap */
  .ft-col a { display: inline-block; padding-block: 4px; }
}
.diy-link .txt i { display: inline-block; margin-left: 4px; }

/* ---------- Returning clients: two Calendly calendars side by side ---------- */
.rc-head { max-width: 680px; margin: clamp(8px, 2vw, 20px) auto clamp(28px, 4vw, 44px); text-align: center; display: grid; gap: 14px; justify-items: center; }
.rc-head h1 { font-size: clamp(2.6rem, 6vw, 4.2rem); }
.rc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 3vw, 28px); align-items: start; }
.rc-slot { padding: 0 !important; min-height: 700px; }
.rc-slot .calendly-inline-widget { width: 100%; }
.rc-slot:has(.preview-slot) .calendly-inline-widget:not(:has(iframe)) { display: none; }
.rc-slot .preview-slot { margin: 16px; min-height: 420px; }
@media (max-width: 860px) { .rc-grid { grid-template-columns: 1fr; } }

/* Returning clients password box */
.bk[data-locked] .rc-content { display: none; }
.bk:not([data-locked]) .rc-gate { display: none; }
.rc-gate h1 em { font-family: var(--display); font-style: italic; font-weight: 400; color: var(--accent-text); }
.rc-pass-row { display: flex; gap: 8px; width: 100%; max-width: 380px; }
.rc-pass-row input { flex: 1; min-width: 0; font: inherit; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--white); color: var(--ink); }
.rc-pass-row input:focus { outline: 2px solid var(--mauve); outline-offset: 1px; }
.rc-gate .rc-err { color: #B4505F; font-size: 0.9375rem; margin: 0; }
.rc-gate .rc-help { font-size: 0.875rem; margin: 0; }
.rc-gate .rc-help a { color: var(--accent-text); }
.rc-gate.shake { animation: rc-shake .4s ease; }
@keyframes rc-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

/* Returning clients: soft unlock → booking drifts in */
.rc-gate .lock { transition: transform .35s cubic-bezier(.3,1.6,.5,1), background .35s; }
.rc-gate.rc-unlocking .lock { transform: scale(1.18) rotate(-8deg); background: var(--rose); }
.rc-gate.rc-unlocking .btn { pointer-events: none; }
.rc-gate.rc-leaving { opacity: 0; transform: translateY(-14px) scale(.97); filter: blur(2px); transition: opacity .45s ease, transform .45s ease, filter .45s ease; }
.bk.rc-arrive .rc-head > *, .bk.rc-arrive .rc-grid > *, .bk.rc-arrive .bk-sec.rc-content { animation: rc-in .8s cubic-bezier(.2,.8,.2,1) both; }
.bk.rc-arrive .rc-head > :nth-child(2) { animation-delay: .08s; }
.bk.rc-arrive .rc-head > :nth-child(3) { animation-delay: .16s; }
.bk.rc-arrive .rc-grid > :nth-child(1) { animation-delay: .28s; }
.bk.rc-arrive .rc-grid > :nth-child(2) { animation-delay: .4s; }
.bk.rc-arrive .bk-sec.rc-content { animation-delay: .55s; }
@keyframes rc-in { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.form-note.bad { color: #B4505F !important; }

/* Features & Press: its own little section at the end of the homepage, above the footer line */
.press-end { margin-top: calc(-1 * clamp(48px, 7vw, 110px)); }
.press-end .press-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 56px; padding-block: 0 8px; }
@media (max-width: 600px) {
  .press-end .press-strip { gap: 14px 40px; }
  .press-end .press-strip span { flex-basis: 100%; text-align: center; }
}

/* Homepage facts strip (3 facts): even columns, each fact centred */
.home .facts .wrap { grid-template-columns: repeat(3, 1fr); }
.home .fact, .home .fact + .fact { padding: 30px 24px; text-align: center; justify-items: center; }
@media (max-width: 760px) {
  .home .facts .wrap { grid-template-columns: repeat(3, 1fr); }
  .home .fact, .home .fact + .fact { padding: 18px 6px; border-top: 0; }
  .home .fact + .fact { border-left: 1px solid var(--line); }
  .home .fact b { font-size: 1.05rem; }
  .home .fact span { font-size: 0.75rem; line-height: 1.35; }
}

/* ---------- Homepage: Where to find us (studio + address + live map) ---------- */
.where p { margin: 0; }
.where .soft { color: var(--soft-text); }
.where-top { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(24px, 4vw, 48px); align-items: stretch; }
.where-text { display: grid; gap: 18px; align-content: center; }
.where-text h2 { margin-top: 10px; }
.where-visit { border-top: 1px solid var(--line); padding-top: 18px; display: grid; gap: 14px; }
.where-row { display: flex; gap: 12px; align-items: flex-start; }
.where-pin { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--rose); flex: none; }
.where-addr { font-family: var(--head); font-weight: 800; letter-spacing: -0.03em; line-height: 1.12; font-size: 1.5rem; }
.where-map { position: relative; border-radius: 20px; overflow: hidden; background: #EEEEEC; min-height: 420px; box-shadow: var(--shadow); }
.where-map img, .where-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.where-map img { object-fit: cover; object-position: 50% 38%; }
.where-map iframe { filter: saturate(.75); }
.where-map .live { position: absolute; right: 10px; bottom: 10px; background: rgba(255,255,255,.92); border-radius: 999px; padding: 4px 10px; font-size: 0.75rem; font-weight: 600; color: var(--soft-text); }
.where-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 16px; }
.where-photo { border-radius: 20px; overflow: hidden; aspect-ratio: 4 / 3; }
.where-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1s ease; }
.where-photo:hover img { transform: scale(1.04); }
@media (max-width: 820px) {
  .where-top { grid-template-columns: 1fr; }
  .where-map { min-height: 300px; }
  .where-photos { grid-template-columns: 1fr 1fr; }
  .where-photos .where-photo:last-child { display: none; }
}
@media (prefers-reduced-motion: reduce) { .where-photo img { transition: none; } }
/* Studio team intro: two calm stacked lines */
.sd-intro { max-width: none; text-wrap: balance; }
.sd-intro span { display: block; }
@media (max-width: 640px) { .sd-intro span { display: inline; } }
#liza { scroll-margin-top: 110px; }

/* ---------- Method: Our Technique as a soft timeline (option D) ---------- */
.tqd { background: linear-gradient(180deg, var(--cream), var(--white)); padding-block: clamp(56px, 8vw, 104px); }
.tqd-in { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(24px, 5vw, 72px); align-items: start; }
.tqd-l { display: grid; gap: 18px; position: sticky; top: 110px; }
.tqd-l h2 { margin-top: 10px; }
.tqd-big { font-family: var(--head); font-weight: 700; font-size: clamp(1.35rem, 2.6vw, 1.85rem); letter-spacing: -0.025em; line-height: 1.22; margin: 0; }
.tqd-line { position: relative; display: grid; gap: 30px; padding-left: 44px; }
.tqd-line::before { content: ""; position: absolute; left: 13px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(var(--rose), #A9BFDD); }
.tqd-s { position: relative; display: grid; gap: 10px; }
.tqd-s::before { content: ""; position: absolute; left: -38px; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--white); border: 3px solid #4D6E9A; }
.tqd-s small { font-size: 0.75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #4D6E9A; }
.tqd-s p { font-size: 1.0625rem; margin: 0; }
.tqd .me-tags { margin-top: 4px; }
@media (max-width: 820px) { .tqd-in { grid-template-columns: 1fr; } .tqd-l { position: static; } }
.tqd .me-tags span { background: var(--rose); }
.tqd h2 { font-size: clamp(2.2rem, 4.8vw, 3.6rem); margin-block: 14px 0; }
/* Where to find us: address sits on top of the map as its own strip */
.where-text { gap: 22px; }
.where-map { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); }
.where-card { display: flex; gap: 12px; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--line); background: var(--white); flex: none; }
.where-card .where-addr { font-size: 1.2rem; }
.where-card .soft { font-size: 0.9rem; }
.where-map img, .where-map iframe { position: relative; inset: auto; flex: 1; min-height: 340px; height: auto; }
@media (max-width: 820px) {
  .where-map { min-height: 0; }
  .where-map img, .where-map iframe { flex: none; min-height: 0; height: 280px; }
}

/* ---------- Studio page: holiday popup ---------- */
.hol { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px; background: rgba(58,58,64,.35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.hol[hidden] { display: none; }
.hol-card { position: relative; width: min(460px, 100%); background: var(--white); border-radius: 26px; padding: 34px 28px 28px; text-align: center; display: grid; gap: 16px; justify-items: center;
  box-shadow: 0 30px 80px -30px rgba(58,58,64,.6); background-image: radial-gradient(120% 70% at 50% 0%, var(--cream), transparent 70%); }
.hol-x { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--blush); color: var(--ink); font-size: 1rem; cursor: pointer; transition: background .2s, transform .2s; }
.hol-x:hover { background: var(--rose); transform: rotate(90deg); }
.hol-tag { display: inline-flex; align-items: center; gap: 8px; font-size: 0.75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--soft-text); }
.hol-tag i { width: 9px; height: 9px; border-radius: 50%; background: #E59AA5; }
.hol h2 { font-family: var(--head); font-weight: 800; font-size: clamp(1.9rem, 6vw, 2.4rem); letter-spacing: -0.035em; line-height: 1.08; margin: 0; }
.hol h2 em { display: block; font-family: var(--display); font-style: italic; font-weight: 400; color: var(--accent-text); letter-spacing: -0.01em; }
.hol-dates { margin: 0; font-family: var(--head); font-weight: 700; font-size: 1.1rem; background: var(--cream); border-radius: 999px; padding: 8px 18px; }
.hol-book { display: grid; gap: 6px; width: 100%; text-decoration: none; color: var(--ink); background: var(--blush); border-radius: 18px; padding: 18px 20px; transition: background .2s, transform .2s; }
.hol-book:hover { background: var(--rose); transform: translateY(-2px); }
.hol-book b { font-family: var(--display); font-style: italic; font-weight: 400; font-size: 1.3rem; color: var(--accent-text); }
.hol-book span { font-size: 0.9rem; color: var(--soft-text); }
.hol.in { animation: hol-fade .35s ease both; }
.hol.in .hol-card { animation: hol-pop .55s cubic-bezier(.2,.9,.3,1.15) both; }
.hol.out { animation: hol-fade .25s ease reverse both; }
@keyframes hol-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hol-pop { from { opacity: 0; transform: translateY(24px) scale(.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hol.in, .hol.in .hol-card, .hol.out { animation: none; } }
/* New client filming popup (reuses the holiday popup look) */
.nc-pop .hol-card { gap: 14px; }
.nc-text { margin: 0; font-size: 0.975rem; color: var(--soft-text); max-width: 38ch; }
.nc-text b { color: var(--ink); font-weight: 600; }
.nc-btns { display: grid; gap: 10px; width: 100%; margin-top: 6px; }
.nc-btns .btn { justify-content: center; width: 100%; }
.hol h2 em { display: table; margin: 0 auto; }