/* ============================================================
   Orhan London Tailoring
   Colours / type taken from the "Orhan 2026" XD artboard:
   purple #24172e / #261630, grey #707070, Poppins + serif headings
   ============================================================ */

:root {
    --purple: #24172e;
    --purple-2: #261630;
    --grey: #707070;
    --white: #ffffff;
    --serif: "Playfair Display", "Times New Roman", Times, serif;
    --sans: "Poppins", "Helvetica Neue", Arial, sans-serif;
    --header-h: 90px;
    --gutter: clamp(16px, 4vw, 200px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { overflow-x: hidden; overflow-x: clip; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--sans);
    font-weight: 400;
    color: var(--purple);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
}

img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; background: none; border: 0; cursor: pointer; color: inherit; }

/* ---------- Preloader ---------- */

.preloader {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: var(--purple);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    visibility: visible;
    transition: opacity .7s ease, visibility .7s ease;
}

.preloader img {
    width: min(46vw, 210px);
    animation: preloader-pulse 1.8s ease-in-out infinite;
}

@keyframes preloader-pulse {
    0%, 100% { opacity: .45; }
    50%      { opacity: 1; }
}

body.is-ready .preloader {
    opacity: 0;
    visibility: hidden;
}

/* Hold the card entrance until the preloader lifts, so the
   choreography plays in view rather than behind the overlay. */
body.is-loading .panel__card,
body.is-loading .panel__title,
body.is-loading .panel__tagline,
body.is-loading .panel__card .btn { animation-play-state: paused; }

/* ---------- Header ---------- */

.site-header {
    height: var(--header-h);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 0 clamp(20px, 2.6vw, 48px);
    background: var(--white);
    position: sticky;
    top: 0;
    z-index: 50;
    transition: height .35s ease, background-color .35s ease, box-shadow .35s ease;
}

/* Scrolled: the bar slims down and turns to frosted glass */
.site-header.is-scrolled {
    height: 64px;
    background: rgba(255, 255, 255, 0.86);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 1px 24px rgba(36, 23, 46, 0.08);
}
.site-header.is-scrolled .site-header__logo img { width: 112px; }

.site-header .menu-toggle { justify-self: start; }
.site-header__logo { justify-self: center; }
.site-header__right {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: clamp(16px, 1.8vw, 30px);
}

/* Book-an-appointment button: on hover an ink fill rises from the
   bottom edge, the label flips up to a fresh copy of itself, and a
   glint sweeps across once the fill has landed. */
.btn-book {
    --bb-ease: cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: inline-block;
    padding: 12px 22px;
    border: 1px solid var(--purple);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--purple);
    white-space: nowrap;
    transition: color .4s var(--bb-ease) .08s;
    animation: tel-in .9s cubic-bezier(0.22, 1, 0.36, 1) .4s both;
}
body.is-loading .btn-book { animation-play-state: paused; }
.btn-book::before {
    content: "";
    position: absolute;
    inset: -1px;
    background: var(--purple);
    transform: translateY(101%);
    transition: transform .5s var(--bb-ease);
    z-index: -1;
}
.btn-book::after {
    content: "";
    position: absolute;
    top: -4px;
    bottom: -4px;
    width: 45%;
    left: -60%;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transform: skewX(-18deg);
}
.btn-book:hover, .btn-book:focus-visible { color: var(--white); }
.btn-book:hover::before, .btn-book:focus-visible::before { transform: translateY(0); }
.btn-book:hover::after { animation: bb-glint .8s var(--bb-ease) .4s; }
@keyframes bb-glint { to { left: 120%; } }
.btn-book__text { position: relative; display: block; overflow: hidden; }
.btn-book__line { display: block; transition: transform .5s var(--bb-ease); }
.btn-book__line + .btn-book__line { position: absolute; inset: 0; transform: translateY(115%); }
.btn-book:hover .btn-book__line:first-child { transform: translateY(-115%); }
.btn-book:hover .btn-book__line + .btn-book__line { transform: translateY(0); }

/* Drawer variant: sits in the panel extras above the Blog link,
   coloured from the nav palette so the dark drawer inverts it. */
.site-nav__extras .btn-book--nav {
    align-self: flex-start;
    margin: 12px 0 10px;
    padding: 10px 18px;
    font-size: 12px;
    letter-spacing: 2px;
    border-color: var(--nav-ink);
    color: var(--nav-ink);
    animation: none;
}
.site-nav__extras .btn-book--nav::before { background: var(--nav-ink); }
.site-nav__extras .btn-book--nav:hover,
.site-nav__extras .btn-book--nav:focus-visible { color: var(--nav-bg); }

.site-header__logo img { width: 150px; height: auto; transition: width .35s ease; }

@keyframes tel-in {
    from { opacity: 0; transform: translateY(-10px); letter-spacing: 8px; }
    to   { opacity: 1; transform: translateY(0); letter-spacing: 5px; }
}

/* Styled to sit as a pair with the MENU label — same size, tracking and
   grey, one weight bolder — and eases in on load. */

/* Mid-size screens: the full-size logo, phone and button crowd each
   other — scale the whole cluster down */
@media (max-width: 1500px) {
    .site-header__logo img { width: 118px; }
    .site-header.is-scrolled .site-header__logo img { width: 100px; }
    .site-header__tel { font-size: 13px; letter-spacing: 3px; }
    .btn-book { padding: 10px 16px; font-size: 12px; }
    .site-header__right { gap: 14px; }
}
@media (max-width: 1180px) {
    .site-header__tel { display: none; }
}

.site-header__tel {
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 5px;
    color: var(--grey);
    white-space: nowrap;
    text-transform: uppercase;
    transition: color .3s;
    animation: tel-in .9s cubic-bezier(0.22, 1, 0.36, 1) .25s both;
}
.site-header__tel:hover { color: var(--purple-2); }

body.is-loading .site-header__tel { animation-play-state: paused; }

.menu-toggle {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 6px 0;
}

.menu-toggle__bars {
    display: block;
    width: 34px;
}

.menu-toggle__bars i {
    display: block;
    height: 2px;
    background: var(--purple-2);
    margin-right: auto;   /* flush left against the edge; widths ripple to the right */
    transition: width .4s cubic-bezier(0.22, 1, 0.36, 1),
                transform .4s cubic-bezier(0.22, 1, 0.36, 1),
                opacity .3s ease;
}
.menu-toggle__bars i + i { margin-top: 8px; }

.menu-toggle__bars i:nth-child(1) { width: 34px; }
.menu-toggle__bars i:nth-child(2) { width: 24px; transition-delay: .04s; }
.menu-toggle__bars i:nth-child(3) { width: 29px; transition-delay: .08s; }

.menu-toggle:hover .menu-toggle__bars i:nth-child(1) { width: 24px; }
.menu-toggle:hover .menu-toggle__bars i:nth-child(2) { width: 34px; }
.menu-toggle:hover .menu-toggle__bars i:nth-child(3) { width: 34px; }

/* Morph to a cross while the drawer is open */
.menu-toggle.is-open .menu-toggle__bars i:nth-child(1) {
    width: 30px;
    transform: translateY(10px) rotate(45deg);
}
.menu-toggle.is-open .menu-toggle__bars i:nth-child(2) {
    opacity: 0;
    transform: translateX(8px);
}
.menu-toggle.is-open .menu-toggle__bars i:nth-child(3) {
    width: 30px;
    transform: translateY(-10px) rotate(-45deg);
}

.menu-toggle__label {
    font-size: 16px;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: var(--grey);
    transition: letter-spacing .4s cubic-bezier(0.22, 1, 0.36, 1), color .3s;
}
.menu-toggle:hover .menu-toggle__label {
    letter-spacing: 7px;
    color: var(--purple-2);
}

/* ---------- Slide-in menu drawer ---------- */

.nav-scrim {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(36, 23, 46, 0.72);
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease, visibility .5s ease;
}
.nav-scrim.is-open { opacity: 1; visibility: visible; }

.site-nav {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 100;
    width: min(1200px, 94vw);
    --nav-bg: var(--white);
    --nav-ink: var(--purple);
    --nav-dim: #a99fb3;
    --nav-link: #6d6377;
    --nav-rule: #e6e2ea;
    background: var(--nav-bg);
    color: var(--nav-ink);
    transform: translateX(-102%);
    visibility: hidden;
    transition: transform .55s cubic-bezier(0.22, 1, 0.36, 1), visibility .55s, background-color .5s ease;
    display: flex;
    flex-direction: column;
}
.site-nav.is-open { transform: translateX(0); visibility: visible; }

/* Inverted take: dark purple drawer, white type and logo. Applied
   permanently on dark-theme section pages (Mens, via site.json) and
   live on the homepage drawer while Mens is hovered or selected. */
.site-nav--dark {
    --nav-bg: var(--purple-2);
    --nav-ink: var(--white);
    --nav-dim: rgba(255, 255, 255, 0.45);
    --nav-link: #cfc8d8;
    --nav-rule: rgba(255, 255, 255, 0.2);
}

.site-nav__logo {
    position: absolute;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: grid;
}
.site-nav__logo img {
    width: 130px;
    height: auto;
    grid-area: 1 / 1;
    transition: opacity .5s ease;
}
.site-nav__logo .site-nav__logo--white { opacity: 0; }
.site-nav--dark .site-nav__logo img { opacity: 0; }
.site-nav--dark .site-nav__logo .site-nav__logo--white { opacity: 1; }

.site-nav__close {
    position: absolute;
    top: 14px;
    right: 28px;
    font-size: 44px;
    font-weight: 300;
    line-height: 1;
    color: var(--nav-ink);
    z-index: 2;
    transition: opacity .2s, color .5s ease;
}
.site-nav__close:hover { opacity: .5; }

.site-nav__body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    overflow-y: auto;
    padding: clamp(110px, 15vh, 150px) clamp(28px, 4.5vw, 72px) 34px;
}

.site-nav__main {
    display: grid;
    grid-template-columns: minmax(250px, 310px) 1fr;
    gap: clamp(24px, 3.5vw, 60px);
    align-items: start;
}

.site-nav__primary { display: flex; flex-direction: column; }

.site-nav__plink {
    display: block;
    text-align: left;
    font-family: var(--serif);
    font-size: clamp(17px, 1.4vw, 22px);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    white-space: nowrap;
    padding: 12px 0;
    color: var(--nav-dim);
    transition: color .25s;
}
.site-nav__plink:hover,
.site-nav__plink.is-active { color: var(--nav-ink); }

.site-nav__plink--drill span {
    display: inline-block;
    margin-left: 8px;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity .25s, transform .25s;
}
.site-nav__plink--drill.is-active span { opacity: 1; transform: translateX(0); }

.site-nav__panels {
    position: relative;
    /* thin rule between the section column and the menu */
    border-left: 1px solid var(--nav-rule);
    padding-left: clamp(20px, 3vw, 44px);
}

/* Inner pages: the drawer is scoped to one section, so the section
   column is dropped and the menu (groups + slide-out) has the drawer
   to itself — two columns instead of three. */
.site-nav--scoped { width: min(820px, 94vw); }
.site-nav--scoped .site-nav__main { grid-template-columns: 1fr; }
.site-nav--scoped .site-nav__panels { border-left: 0; padding-left: 0; }

.site-nav__panel {
    display: none;
    flex-direction: column;
    animation: panel-in .45s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.site-nav__panel.is-active { display: flex; }

@keyframes panel-in {
    from { opacity: 0; transform: translateX(18px); }
    to   { opacity: 1; transform: translateX(0); }
}

.site-nav__panel a {
    font-family: var(--serif);
    font-size: clamp(18px, 1.4vw, 21px);
    padding: 8px 0;
    color: var(--nav-link);
    transition: color .25s, padding-left .25s;
}
.site-nav__panel a:hover { color: var(--nav-ink); padding-left: 6px; }

.site-nav__overview { font-style: normal; }

/* ---------- Grouped panel: third-level slide-out ----------
   Sections with a "menu" in site.json (Womens first) list their pages
   in groups. Desktop: groups in one column, the active group's links
   slide out in a second column (hover or click). Mobile: accordion. */

.site-nav__panel--grouped.is-active {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: clamp(16px, 2.5vw, 36px);
    align-content: start;
}
.site-nav__panel--grouped > .site-nav__overview {
    grid-column: 1;
    font-style: normal;
    white-space: nowrap;
}
.site-nav__grp { display: contents; }

.site-nav__group {
    grid-column: 1;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    text-align: left;
    white-space: nowrap;
    font-family: var(--serif);
    font-size: clamp(18px, 1.4vw, 21px);
    padding: 8px 0;
    color: var(--nav-link);
    transition: color .25s;
}
.site-nav__group span {
    font-size: .9em;
    opacity: .55;
    transition: opacity .25s;
}
.site-nav__group:hover { color: var(--nav-ink); }
/* plain link rows share the group styling but not the link hover indent */
.site-nav__panel a.site-nav__group:hover { padding-left: 0; }
.site-nav__group:hover span {
    opacity: 1;
    animation: arrow-nudge .55s ease-in-out infinite alternate;
}
.site-nav__group.is-active {
    color: var(--nav-ink);
    font-weight: 600;
}
.site-nav__group.is-active span {
    opacity: 1;
    animation: none;
    transform: none;
}

@keyframes arrow-nudge {
    from { transform: translateX(0); }
    to   { transform: translateX(7px); }
}
@media (prefers-reduced-motion: reduce) {
    .site-nav__group:hover span { animation: none; }
}

.site-nav__sub {
    grid-column: 2;
    grid-row: 1 / span 13;
    display: none;
    flex-direction: column;
    padding-top: 2px;
    /* pops out to the right of the groups behind a thin rule */
    border-left: 1px solid var(--nav-rule);
    padding-left: clamp(18px, 2.5vw, 36px);
    animation: panel-in .45s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.site-nav__sub.is-active { display: flex; }
.site-nav__back { display: none; }
.site-nav__sub a {
    font-family: var(--serif);
    font-size: clamp(16px, 1.2vw, 18px);
    white-space: nowrap;
    padding: 7px 0;
    color: var(--nav-link);
    transition: color .25s, padding-left .25s;
}
.site-nav__sub a:hover { color: var(--nav-ink); padding-left: 6px; }

.site-nav__extras {
    grid-column: 1;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--nav-rule);
    display: flex;
    flex-direction: column;
}
.site-nav__extras a {
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 6px 0;
    color: var(--nav-link);
    transition: color .25s;
}
.site-nav__extras a:hover { color: var(--nav-ink); }

.site-nav__bottom { margin-top: 40px; }

/* Social icons: small, purple, left aligned above the foot rule */
.site-nav__social {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 18px;
}
.site-nav__social a {
    display: block;
    color: var(--nav-ink);
    transition: transform .6s cubic-bezier(0.22, 1, 0.36, 1), opacity .3s, color .5s ease;
}
.site-nav__social a:hover { transform: scale(1.35); opacity: .85; }
.site-nav__social svg { width: 17px; height: 17px; display: block; }

.site-nav__foot {
    padding-top: 22px;
    border-top: 1px solid var(--nav-rule);
    transition: border-color .5s ease;
}

.site-nav__foot-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 30px;
}

.site-nav__foot-links a {
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--nav-ink);
    transition: opacity .2s, color .5s ease;
}
.site-nav__foot-links a:hover { opacity: .55; }

.site-nav__utility {
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 22px;
}

.site-nav__utility a {
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--nav-dim);
    transition: color .2s;
}
.site-nav__utility a:hover { color: var(--nav-ink); }

/* ---------- Home panels ---------- */

.panels {
    display: flex;
    background: var(--purple);
}

.panel {
    position: relative;
    flex: 1 1 0%;
    min-width: 0;
    height: calc(100vh - var(--header-h));
    min-height: 620px;
    overflow: hidden;
}

/* Overlap the columns by 1px so no subpixel seam can show through. */
.panel + .panel { margin-left: -1px; }

.panel__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    /* the poster doubles as a backing image so switching from poster to
       first video frame can never flash the page background through */
    background-size: cover;
    background-position: center top;
}

/* Hover take: a second video layered over the frozen base video,
   faded in while the card's button is moused over. */
.panel__video--hover {
    background: none;
    opacity: 0;
    transition: opacity .45s ease;
    pointer-events: none;
}
.panel__video--hover.is-showing { opacity: 1; }

.panel__link { position: absolute; inset: 0; z-index: 1; }

/* Card entrance: the box rises in first, its title follows, then the
   tagline and button — each panel staggered left to right. */
.panel { --stagger: 0s; }
.panel:nth-child(2) { --stagger: .2s; }
.panel:nth-child(3) { --stagger: .4s; }

@keyframes card-rise {
    from { opacity: 0; transform: translate(-50%, 32px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes fade-up {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

.panel__card {
    position: absolute;
    z-index: 2;
    left: 50%;
    /* raised 300px from the original position; the min() stops the card
       running off the top of shorter windows */
    bottom: min(calc(7.5% + 300px), calc(100% - 340px));
    transform: translateX(-50%);
    width: min(84%, 536px);
    background: rgba(36, 23, 46, 0.72);
    color: var(--white);
    text-align: center;
    padding: clamp(28px, 3vw, 44px) clamp(20px, 2.6vw, 50px) clamp(30px, 3.2vw, 48px);
    animation: card-rise 1s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: calc(var(--stagger) + 0.15s);
}

/* On smaller screens the raised card crowds the top of the panel:
   let it sit low, as originally positioned */
@media (max-width: 900px), (max-height: 820px) {
    .panel__card { bottom: 7.5%; }
}

.panel__title,
.panel__tagline,
.panel__card .btn {
    animation: fade-up 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.panel__title { animation-delay: calc(var(--stagger) + 0.55s); }

.panel__tagline,
.panel__card .btn { animation-delay: calc(var(--stagger) + 0.85s); }

@media (prefers-reduced-motion: reduce) {
    .panel__card,
    .panel__title,
    .panel__tagline,
    .panel__card .btn { animation: none; }
}

.panel__title {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(30px, 2.1vw, 40px);
    letter-spacing: 1px;
}

.panel__tagline {
    font-size: clamp(15px, 1.05vw, 20px);
    font-weight: 300;
    line-height: 1.5;
    margin: 22px 0 30px;
    text-align: left;
}

.panel__card--center .panel__tagline {
    text-align: center;
    /* let long centered taglines use a little of the card padding */
    margin-left: -18px;
    margin-right: -18px;
}

/* ---------- Buttons ---------- */

.btn {
    display: inline-block;
    font-size: 13px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    padding: 12px 44px;
    transition: background .25s, color .25s;
}

.btn--outline {
    border: 1px solid var(--white);
    color: var(--white);
}
.btn--outline:hover {
    background: var(--white);
    color: var(--purple);
}

.btn--solid {
    background: var(--purple);
    color: var(--white);
    border: 1px solid var(--purple);
}
.btn--solid:hover {
    background: transparent;
    color: var(--purple);
}

/* ---------- Footer ---------- */

.site-footer {
    background: var(--purple);
    color: var(--white);
    padding: clamp(36px, 4vw, 52px) var(--gutter) clamp(40px, 4.5vw, 60px);
}

.site-footer__logo img { width: 150px; height: auto; }

.site-footer__info {
    margin-top: 26px;
    font-size: clamp(15px, 1.05vw, 20px);
    font-weight: 300;
    line-height: 1.55;
}

.site-footer__info a:hover { text-decoration: underline; }

.site-footer__utility {
    margin-top: 24px;
    font-size: 13px;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.65);
}
.site-footer__utility span { margin: 0 8px; opacity: .5; }
.site-footer__utility a { transition: color .2s; }
.site-footer__utility a:hover { color: var(--white); }

/* ---------- Section pages (Womens / Mens / LGBTQ) ---------- */

.page-hero {
    position: relative;
    height: calc(72vh - var(--header-h));
    min-height: 420px;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
}

.page-hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    background-size: cover;
    background-position: center 20%;
}

.page-hero__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 120px var(--gutter) 46px;
    background: linear-gradient(to top, rgba(36, 23, 46, 0.75), rgba(36, 23, 46, 0));
    color: var(--white);
}

.page-hero__title {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(38px, 4vw, 60px);
}

.page-hero__tagline {
    margin-top: 10px;
    font-weight: 300;
    font-size: clamp(15px, 1.2vw, 20px);
    max-width: 560px;
}

.page-content {
    padding: clamp(48px, 6vw, 90px) var(--gutter);
}

.page-content h2 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(26px, 2.4vw, 36px);
    margin-bottom: 22px;
}

.page-content p {
    font-size: 17px;
    font-weight: 300;
    line-height: 1.7;
    margin-bottom: 18px;
    color: #3c3145;
}

.page-content a { text-decoration: underline; }
.page-content .btn { margin-top: 26px; text-decoration: none; }

.page-content h2 {
    margin-top: 44px;
}
.page-content h2:first-child { margin-top: 0; }

.page-lead {
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(20px, 1.6vw, 26px);
    color: var(--purple);
    margin-bottom: 30px;
}

.content-list {
    list-style: none;
    margin: 4px 0 22px;
}
.content-list li {
    position: relative;
    padding: 6px 0 6px 26px;
    font-size: 17px;
    font-weight: 300;
    line-height: 1.6;
    color: #3c3145;
}
.content-list li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 17px;
    width: 12px;
    height: 1px;
    background: var(--purple);
}

.faqs h3 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 21px;
    margin: 26px 0 8px;
}

/* Placeholder imagery until the client supplies photography */
.ph-img {
    aspect-ratio: 3 / 2;
    max-height: 420px;
    width: 100%;
    margin: 36px 0;
    background: #efeaf3;
    border: 1px solid #e2dbe9;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ph-img span {
    font-size: 12px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #a99fb3;
}

.contact-details { margin: 26px 0 8px; }
.contact-details dt {
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--grey);
    margin-top: 18px;
}
.contact-details dd {
    font-size: 18px;
    font-weight: 300;
    margin-top: 4px;
}

/* ---------- Content pages (sitemap subpages) ---------- */

.content-hero {
    position: relative;
    min-height: calc(100vh - var(--header-h));
    display: flex;
    align-items: flex-end;
    background-size: cover;
    background-position: center 22%;
    overflow: hidden;
}

.content-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top, rgba(36, 23, 46, 0.82), rgba(36, 23, 46, 0.15));
}

/* Video hero: plays once and holds its final frame (no loop attribute) */
.content-hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 22%;
}

@media (max-width: 760px) {
    .content-hero--mobile-right { background-position: right 22%; }
    .content-hero--mobile-left { background-position: left 22%; }
}
.content-hero--plain { background: var(--purple); min-height: 220px; }
.content-hero--plain::before { display: none; }

.content-hero__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 90px var(--gutter) 38px;
    color: var(--white);
}

.content-hero__crumb {
    position: absolute;
    right: var(--gutter);
    bottom: 22px;
    margin: 0;
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
}
.content-hero__crumb span { margin: 0 6px; opacity: .5; }
.content-hero__crumb a:hover { color: var(--white); }

.content-hero__tagline {
    margin-top: 12px;
    font-weight: 300;
    font-size: clamp(15px, 1.2vw, 20px);
    line-height: 1.5;
    max-width: 640px;
    color: rgba(255, 255, 255, 0.92);
}

.content-hero__book { display: inline-block; margin-top: 24px; }

.content-hero__title {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(32px, 3.4vw, 52px);
}

/* ---------- Explore grid (section subpage links) ---------- */

.explore {
    padding: 0 var(--gutter) clamp(56px, 6vw, 90px);
}

.explore__heading {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(24px, 2.2vw, 32px);
    margin-bottom: 24px;
}

.explore__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
}

.explore__grid a {
    display: block;
    padding: 18px 22px;
    border: 1px solid #d9d4de;
    font-size: 15px;
    letter-spacing: .4px;
    transition: background .25s, color .25s, border-color .25s;
}

.explore__grid a:hover {
    background: var(--purple);
    border-color: var(--purple);
    color: var(--white);
}

/* ---------- Section homepages (Discover Orhan …) ---------- */

.shome-hero {
    position: relative;
    height: calc(100vh - var(--header-h));
    min-height: 540px;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
}

.shome-hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 25%;
    background-size: cover;
    background-position: center 25%;
}

.shome-hero__shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(13, 8, 17, 0.6), rgba(13, 8, 17, 0.05) 55%);
}

.shome-hero__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 0 var(--gutter) clamp(56px, 9vh, 110px);
    color: var(--white);
}

.shome-hero__title {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(54px, 8vw, 130px);
    line-height: 1.02;
    letter-spacing: 2px;
    animation: fade-up 1s cubic-bezier(0.22, 1, 0.36, 1) .2s both;
}

.shome-hero__tagline {
    margin-top: 18px;
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(18px, 1.6vw, 26px);
    line-height: 1.45;
    max-width: 620px;
    animation: fade-up 1s cubic-bezier(0.22, 1, 0.36, 1) .45s both;
}

/* Per-slide promo line: one link per hero image, crossfading in sync */
.shome-hero__promo { margin-top: 26px; }
.shome-hero__promo-kicker {
    font-size: 12px;
    letter-spacing: 3.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
    margin-bottom: 6px;
}
.shome-hero__promo-links {
    position: relative;
    height: 1.5em;
    font-size: clamp(20px, 1.9vw, 27px);
}
.shome-hero__promo-links a {
    position: absolute;
    left: 0;
    top: 0;
    white-space: nowrap;
    font-family: var(--serif);
    color: var(--white);
    visibility: hidden;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .7s ease, transform .7s ease, visibility .7s;
}
.shome-hero__promo-links a.is-active {
    visibility: visible;
    opacity: 1;
    transform: none;
}
.shome-hero__promo-links a span {
    display: inline-block;
    margin-left: 6px;
    transition: transform .3s ease;
}
.shome-hero__promo-links a:hover span { transform: translateX(6px); }

/* Google rating badge, pinned to the hero's bottom right */
.google-badge {
    position: absolute;
    right: clamp(20px, 3vw, 48px);
    bottom: clamp(22px, 5vh, 44px);
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 20px 13px 18px;
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: var(--purple);
    box-shadow: 0 10px 30px rgba(13, 8, 17, 0.35);
    transition: transform .3s ease, box-shadow .3s ease;
}
.google-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 36px rgba(13, 8, 17, 0.4);
}
.google-badge__logo {
    width: 24px;
    height: 24px;
    flex: none;
}
.google-badge__score {
    font-family: var(--serif);
    font-size: 27px;
    line-height: 1;
}
.google-badge__body { display: flex; flex-direction: column; gap: 3px; }
.google-badge__stars {
    font-size: 15px;
    line-height: 1;
    letter-spacing: 2px;
    background: linear-gradient(90deg, #f5b301 94%, #cfc8d8 94%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.google-badge__label {
    font-size: 11px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--grey);
}

@media (max-width: 640px) {
    .google-badge { right: 14px; bottom: 16px; padding: 10px 14px; gap: 10px; }
    .google-badge__score { font-size: 22px; }
    .google-badge__logo { width: 20px; height: 20px; }
}

.shome-hero__cue {
    position: absolute;
    left: 50%;
    bottom: 26px;
    width: 1px;
    height: 52px;
    background: rgba(255, 255, 255, 0.6);
    animation: cue-drop 2s ease-in-out infinite;
}

@keyframes cue-drop {
    0%   { transform: scaleY(0); transform-origin: top; }
    45%  { transform: scaleY(1); transform-origin: top; }
    55%  { transform: scaleY(1); transform-origin: bottom; }
    100% { transform: scaleY(0); transform-origin: bottom; }
}

body.is-loading .shome-hero__title,
body.is-loading .shome-hero__tagline { animation-play-state: paused; }

/* Scroll-linked entrance: the statement fades in and grows as it
   travels up the viewport (driven from main.js via CSS variables). */
.js-scroll-grow {
    opacity: var(--grow-o, 1);
    transform: scale(var(--grow-s, 1));
    transform-origin: center top;
    will-change: opacity, transform;
}

.shome-statement {
    max-width: 1000px;
    margin: 0 auto;
    padding: clamp(72px, 10vw, 140px) var(--gutter) clamp(40px, 5vw, 70px);
    text-align: center;
}

/* Statement with a portrait video on the right. The clip is sized to
   sit fully in frame and is scrubbed by the page scroll. */
.shome-statement--with-media {
    max-width: 1240px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(28px, 4vw, 64px);
}
.shome-statement__media { margin: 0; }
.shome-statement__media video {
    display: block;
    height: min(66vh, 620px);
    width: auto;
    max-width: 36vw;
    object-fit: contain;
}

@media (max-width: 860px) {
    .shome-statement--with-media { grid-template-columns: 1fr; }
    .shome-statement__media { display: flex; justify-content: center; }
    .shome-statement__media video { height: min(55vh, 480px); max-width: 88vw; }
}

/* Portrait video inside an editorial band, shown fully in frame */
.shome-band__media--video { display: flex; justify-content: center; }
.shome-band__media--video video {
    display: block;
    height: min(93vh, 850px);
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

/* Tinted band background */
.shome-band--tint { background: #e8e8e8; }

/* Lookbook carousel: scroll-snap filmstrip with arrow controls */
.carousel { position: relative; padding: clamp(36px, 5vw, 72px) 0 0; }
.carousel__track {
    display: flex;
    gap: clamp(6px, 0.7vw, 12px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 0 var(--gutter);
}
.carousel__track::-webkit-scrollbar { display: none; }
/* snap is suspended while the strip auto-drifts */
.carousel__track.is-drifting { scroll-snap-type: none; }
.carousel__track img {
    height: min(72vh, 660px);
    width: auto;
    flex: 0 0 auto;
    scroll-snap-align: center;
}
.carousel__btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.92);
    color: var(--purple);
    font-size: 19px;
    box-shadow: 0 6px 20px rgba(36, 23, 46, 0.25);
    transition: background .3s, color .3s;
}
.carousel__btn:hover { background: var(--purple); color: var(--white); }
.carousel__btn--prev { left: clamp(10px, 2vw, 28px); }
.carousel__btn--next { right: clamp(10px, 2vw, 28px); }
@media (max-width: 640px) {
    .carousel__track img { height: min(56vh, 440px); }
}

/* Editorial trio: one tall garment shot beside two stacked details,
   tiled edge to edge as a single composition */
.tri-gallery {
    display: grid;
    grid-template-columns: 3fr 2fr;
    grid-template-rows: 1fr 1fr;
    gap: clamp(6px, 0.7vw, 12px);
    padding: clamp(36px, 5vw, 72px) 0 0;
}
.tri-gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.tri-gallery__main {
    grid-row: 1 / 3;
    object-position: center 20%;
}

@media (max-width: 700px) {
    .tri-gallery { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; }
    .tri-gallery__main { grid-column: 1 / -1; grid-row: 1; aspect-ratio: 4 / 5; }
}

/* Lookbook plate: one centred portrait image with air around it */
.plate-image {
    display: flex;
    justify-content: center;
    margin: 0;
    padding: clamp(10px, 2vw, 30px) var(--gutter) 0;
}
.plate-image img {
    height: min(82vh, 780px);
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

/* Two-column editorial pair: image on top, heading and copy below */
.duo-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(28px, 4vw, 70px);
    padding: clamp(40px, 5vw, 84px) var(--gutter);
}
.duo-col img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    margin-bottom: clamp(18px, 2vw, 28px);
}
.duo-col h2 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(22px, 2vw, 30px);
    margin-bottom: 14px;
}
.duo-col p {
    font-size: clamp(15px, 1.1vw, 17px);
    font-weight: 300;
    line-height: 1.75;
    color: #3c3145;
    margin-bottom: 14px;
}
.duo-cols__foot {
    grid-column: 1 / -1;
    text-align: center;
    margin-top: clamp(6px, 1vw, 16px);
}

@media (max-width: 760px) {
    .duo-cols { grid-template-columns: 1fr; }
}

/* Photo band: full-width image with text overlaid on a purple wash */
.photo-band {
    position: relative;
    min-height: 74vh;
    display: flex;
    align-items: flex-end;
    background-size: cover;
    background-position: center;
}
.photo-band::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(36, 23, 46, 0.85), rgba(36, 23, 46, 0.3) 55%, rgba(36, 23, 46, 0.05));
}
.photo-band__inner {
    position: relative;
    z-index: 1;
    max-width: 860px;
    padding: clamp(120px, 18vh, 200px) var(--gutter) clamp(36px, 5vw, 64px);
    color: var(--white);
}
.photo-band__inner h2 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(26px, 2.6vw, 40px);
    margin-bottom: 16px;
}
.photo-band__inner p {
    font-weight: 300;
    font-size: clamp(15px, 1.15vw, 18px);
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.92);
    margin-bottom: 12px;
}

/* Right-hand bleed: the image runs off the right edge of the page */
.shome-band--bleed-r .shome-band__media img { aspect-ratio: 6 / 5; }

/* Media pinned to the band's bottom right */
.shome-band__media--br {
    justify-content: flex-end;
    align-self: end;
}

/* Crop the pillarboxed turntable clip to its portrait content strip
   (406px of the 1280px frame, starting at x=437) and fade its left
   and right edges into the page background. Sized 30% up from the
   old min(93vh, 850px), driven by width so the aspect never skews. */
.video-fade {
    position: relative;
    overflow: hidden;
    /* two-thirds of the media column */
    width: 66.667%;
    aspect-ratio: 406 / 720;
}

.video-fade video {
    position: absolute;
    top: 0;
    left: -107.6354%;
    width: 315.2709%;
    max-width: none;
    height: 100%;
    /* lift the clip's grey-ish backdrop towards the page white */
    filter: brightness(1.08) contrast(1.05);
}
.video-fade::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background:
        linear-gradient(to right, var(--white), rgba(255, 255, 255, 0)) left center / 100px 100% no-repeat,
        linear-gradient(to left, var(--white), rgba(255, 255, 255, 0)) right center / 100px 100% no-repeat;
}

.shome-statement h2 {
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(36px, 4.4vw, 68px);
    line-height: 1.08;
    letter-spacing: -0.5px;
    margin-bottom: 30px;
}
.shome-statement h2 em,
.shome-cta h2 em { font-style: italic; font-weight: 400; }

/* Typewriter entrance for the statement heading: characters are laid
   out invisibly, then revealed one by one with a travelling caret. */
.shome-statement h2 .type-ch { opacity: 0; }
.shome-statement h2 .type-ch.is-typed { opacity: 1; }
.shome-statement h2 .type-ch--caret::after {
    content: "";
    display: inline-block;
    width: 3px;
    height: 0.78em;
    margin-left: 3px;
    background: var(--purple);
    vertical-align: -0.06em;
    animation: caret-blink .7s step-end infinite;
}
@keyframes caret-blink { 50% { opacity: 0; } }

/* Magazine deck: the first statement paragraph reads as an italic
   serif stand-first under the display heading */
.shome-statement p:first-of-type {
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(19px, 1.7vw, 26px);
    line-height: 1.6;
    margin-bottom: 22px;
}

/* Drop cap opening the first editorial band */
.shome-band--lead .shome-band__text p:first-of-type::first-letter {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 500;
    font-size: 4.4em;
    line-height: 0.72;
    float: left;
    padding: 10px 14px 0 0;
}

.shome-statement p {
    font-size: clamp(16px, 1.2vw, 19px);
    font-weight: 300;
    line-height: 1.8;
    margin-bottom: 16px;
    color: #3c3145;
}

.shome-band {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: clamp(32px, 5vw, 90px);
    padding: clamp(36px, 5vw, 80px) var(--gutter);
}

/* Bleed variant (retired bleed): the image keeps the same gutter as
   the tile grids, cropped to a wider strip than the standard band */
.shome-band--bleed .shome-band__media img { aspect-ratio: 6 / 5; }

.shome-band--flip .shome-band__media { order: 2; }
.shome-band--flip .shome-band__text { order: 1; }

/* Turntable band: the video sits left, dropped to the bottom of the
   section so it touches the purple CTA band below; the text runs in
   two columns on the right. */
.shome-band--turntable {
    /* Opens a tile-gap below the feature tiles and bleeds the video
       to the left page edge, tile-style */
    padding-top: clamp(6px, 0.7vw, 12px);
    padding-left: 0;
    padding-bottom: 0;
    /* text lines up with the video's right edge (the fade inside the
       clip provides the breathing space) */
    gap: 0;
}
.shome-band--turntable .shome-band__media {
    justify-content: center;
    align-self: center;
}
.shome-band--turntable .shome-band__text {
    column-count: 2;
    column-gap: clamp(26px, 2.6vw, 52px);
    padding-bottom: clamp(36px, 5vw, 80px);
    /* the video-fade is 66.667% of the media column; claim the empty
       right sliver so the text starts where the video ends */
    margin-left: -16.667%;
}
.shome-band--turntable .shome-band__text h2 { column-span: all; }
.shome-band--turntable .shome-band__text p { break-inside: avoid-column; }
.shome-band--turntable + .shome-cta { margin-top: 0; }

@media (max-width: 860px) {
    /* Stacked: text first (keeping its gutter), then the full-bleed
       video still flush with the CTA */
    .shome-band--turntable .shome-band__text { column-count: 1; order: 0; margin-left: 0; padding-left: var(--gutter); padding-right: var(--gutter); }
    .shome-band--turntable .shome-band__media { order: 1; justify-content: center; }
}

.shome-band__media img,
.shome-band__media > video,
.shome-band__ph {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

.shome-band__ph {
    background: #efeaf3;
    border: 1px solid #e2dbe9;
    display: flex;
    align-items: center;
    justify-content: center;
}
.shome-band__ph span {
    font-size: 12px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #a99fb3;
}

.shome-band__text h2 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(24px, 2.3vw, 36px);
    line-height: 1.25;
    margin-bottom: 20px;
}

.shome-band__text p {
    font-size: clamp(15px, 1.1vw, 18px);
    font-weight: 300;
    line-height: 1.8;
    margin-bottom: 14px;
    color: #3c3145;
}

.shome-cta {
    text-align: center;
    background: var(--purple);
    color: var(--white);
    padding: clamp(64px, 8vw, 110px) var(--gutter);
    margin-top: clamp(40px, 6vw, 90px);
}

.shome-cta h2 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(28px, 3vw, 44px);
    margin-bottom: 14px;
}

.shome-cta p {
    font-weight: 300;
    font-size: 17px;
    margin-bottom: 30px;
    color: rgba(255, 255, 255, 0.8);
}

.shome-hero__book { display: inline-block; margin-top: 20px; }
.shome-cta .btn--outline { border-color: var(--white); color: var(--white); }
.shome-cta .btn--outline:hover { background: var(--white); color: var(--purple); }

.shome-cta + .explore { padding-top: clamp(48px, 6vw, 80px); }

/* Scroll reveal */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .9s cubic-bezier(0.22, 1, 0.36, 1), transform .9s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    .shome-hero__title, .shome-hero__tagline { animation: none; }
}

@media (max-width: 820px) {
    .shome-band { grid-template-columns: 1fr; gap: 26px; }
    .shome-band--flip .shome-band__media { order: 0; }
    .shome-band--flip .shome-band__text { order: 1; }
}

/* Dark-theme variants for the editorial sections */
body.theme-dark .shome-statement p,
body.theme-dark .shome-band__text p { color: #cfc8d8; }
body.theme-dark .shome-band__ph {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.16);
}
body.theme-dark .shome-band__ph span { color: rgba(255, 255, 255, 0.45); }
body.theme-dark .shome-cta { background: var(--purple); }

/* ---------- Dark section theme (body.theme-dark — the Mens pages) ----------
   Reversed palette: #261630 background, light type, white logo. */

body.theme-dark { background: #1d1226; color: var(--white); }

body.theme-dark .page-content h2,
body.theme-dark .page-content h3,
body.theme-dark .faqs h3 { color: var(--white); }
body.theme-dark .page-content p,
body.theme-dark .content-list li { color: #cfc8d8; }
body.theme-dark .page-lead { color: #e9e4ef; }
body.theme-dark .content-list li::before { background: #a99fb3; }

body.theme-dark .btn--solid {
    background: var(--white);
    color: var(--purple);
    border-color: var(--white);
}
body.theme-dark .btn--solid:hover {
    background: transparent;
    color: var(--white);
}

body.theme-dark .explore__heading { color: var(--white); }
body.theme-dark .explore__grid a {
    border-color: rgba(255, 255, 255, 0.28);
    color: #e6e0ec;
}
body.theme-dark .explore__grid a:hover {
    background: var(--white);
    border-color: var(--white);
    color: var(--purple);
}

body.theme-dark .ph-img {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.16);
}
body.theme-dark .ph-img span { color: rgba(255, 255, 255, 0.45); }

/* ---------- Responsive ---------- */

@media (max-width: 1300px) {
    .site-header__tel { letter-spacing: 2px; }
    .site-header .btn-book { letter-spacing: 2px; padding: 11px 16px; }
}

@media (max-width: 1100px) {
    .site-header__tel { font-size: 16px; letter-spacing: 2px; }
    .site-header .btn-book { display: none; }
}

/* While the panels sit three-across, scale the card type in lockstep
   with the panel width (pure vw, capped at the 1920px design size) so
   the text always wraps onto the same lines at any window width. */
@media (min-width: 861px) {
    .panel__title { font-size: min(2.08vw, 40px); }
    .panel__tagline { font-size: min(1.05vw, 20px); }
    .panel__card--center .panel__tagline {
        margin-left: max(-0.94vw, -18px);
        margin-right: max(-0.94vw, -18px);
    }
}

@media (max-width: 860px) {
    .panels { flex-direction: column; }
    .panel { height: 80vh; min-height: 520px; }
    .panel + .panel { margin-left: 0; margin-top: -1px; }
    .panel__title { font-size: 30px; }
    .panel__tagline { font-size: 16px; }
    .panel__card { bottom: 7.5%; }
}

@media (max-width: 1200px) {
    .site-nav__sub a { white-space: normal; }
}

@media (max-width: 760px) {
    .site-nav { width: 100vw; }
    .site-nav__main { grid-template-columns: 1fr; gap: 22px; }
    .site-nav__panels {
        border-top: 1px solid var(--nav-rule);
        border-left: 0;
        padding-left: 0;
        padding-top: 18px;
    }
    .site-nav--scoped .site-nav__panels { border-top: 0; padding-top: 0; }

    /* grouped panel: tapping a group slides to its own page */
    .site-nav__panel--grouped.is-active { display: flex; flex-direction: column; }
    .site-nav__grp { display: block; }
    .site-nav__group { width: 100%; }
    .site-nav__sub {
        margin: 0;
        padding-left: 0;
        border-left: 0;
    }
    .site-nav__panel--grouped.is-sub-open > .site-nav__overview,
    .site-nav__panel--grouped.is-sub-open .site-nav__group,
    .site-nav__panel--grouped.is-sub-open > .site-nav__extras { display: none; }
    .site-nav__panel--grouped.is-sub-open .site-nav__sub.is-active { display: flex; }
    .site-nav__back {
        display: flex;
        align-items: baseline;
        gap: 10px;
        width: 100%;
        text-align: left;
        font-family: var(--serif);
        font-size: clamp(18px, 1.4vw, 21px);
        font-weight: 600;
        padding: 8px 0 14px;
        margin-bottom: 8px;
        border-bottom: 1px solid var(--nav-rule);
        color: var(--nav-ink);
    }
    .site-nav__back span { font-size: .9em; opacity: .55; }
    .site-nav__extras { margin-top: 12px; }
}

@media (max-width: 640px) {
    .site-header__tel { display: none; }
    .menu-toggle__label { display: none; }
    .site-header__logo img { width: 124px; }
    .site-footer__logo img { width: 124px; }
}


/* ---------- The Journal (blog) ---------- */

.journal-head {
    text-align: center;
    padding: clamp(56px, 8vw, 110px) var(--gutter) clamp(30px, 4vw, 56px);
}

.journal-head__kicker {
    font-size: 12px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--grey);
    margin-bottom: 18px;
}

.journal-head__title {
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(52px, 8vw, 120px);
    line-height: 1;
}
.journal-head__title em { font-style: italic; font-weight: 400; }

.journal-head__deck {
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(17px, 1.5vw, 24px);
    margin-top: 20px;
    color: #3c3145;
}

.journal-meta {
    font-size: 12px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--grey);
}
.journal-meta a:hover { color: var(--purple); }

.journal-feature {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: clamp(28px, 4vw, 70px);
    align-items: center;
    padding: clamp(24px, 3vw, 48px) var(--gutter);
}

.journal-feature__media { display: block; overflow: hidden; }
.journal-feature__media img,
.journal-card__media img {
    width: 100%;
    display: block;
    object-fit: cover;
    object-position: center top;   /* keep the top of the photo, crop the bottom */
    transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.journal-feature__media img { aspect-ratio: 16 / 10; }
.journal-feature__media:hover img,
.journal-card__media:hover img { transform: scale(1.05); }

.journal-feature__text h2 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(26px, 2.6vw, 42px);
    line-height: 1.15;
    margin: 14px 0 16px;
}
.journal-feature__text h2 a:hover { opacity: .7; }

.journal-feature__excerpt {
    font-weight: 300;
    font-size: 17px;
    line-height: 1.7;
    color: #3c3145;
    margin-bottom: 22px;
}

.journal-more {
    font-size: 13px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    border-bottom: 1px solid var(--purple);
    padding-bottom: 4px;
    transition: opacity .3s;
}
.journal-more:hover { opacity: .6; }

.journal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: clamp(28px, 3.5vw, 60px);
    padding: clamp(30px, 4vw, 60px) var(--gutter) clamp(64px, 7vw, 110px);
}

.journal-card__media {
    display: block;
    overflow: hidden;
    margin-bottom: 16px;
}
.journal-card__media img { aspect-ratio: 4 / 5; }

.journal-card h3 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 23px;
    line-height: 1.25;
    margin: 8px 0 10px;
}
.journal-card h3 a:hover { opacity: .7; }

.journal-card__excerpt {
    font-weight: 300;
    font-size: 15px;
    line-height: 1.65;
    color: #4a4053;
}

/* ---------- Journal article ---------- */

.post-head {
    text-align: center;
    padding: clamp(48px, 6vw, 90px) var(--gutter) clamp(28px, 3.5vw, 50px);
}

.post-head__title {
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(34px, 4.4vw, 72px);
    line-height: 1.08;
    max-width: 1150px;
    margin: 16px auto 0;
}

.post-hero { padding: 0 var(--gutter); }
.post-hero img {
    width: 100%;
    max-height: 72vh;
    object-fit: cover;
    object-position: center top;
}

.post-body {
    max-width: 780px;
    margin: 0 auto;
    padding: clamp(40px, 5vw, 70px) var(--gutter) 10px;
}

.post-body p {
    font-weight: 300;
    font-size: 17px;
    line-height: 1.85;
    margin-bottom: 20px;
    color: #3c3145;
}

.post-body .post-body__lead {
    font-family: var(--serif);
    font-size: clamp(19px, 1.6vw, 24px);
    font-style: italic;
    line-height: 1.65;
    color: var(--purple);
}
.post-body .post-body__lead::first-letter {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 500;
    font-size: 4.2em;
    line-height: .72;
    float: left;
    padding: 8px 12px 0 0;
}

.post-body h2 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(24px, 2vw, 32px);
    margin: 40px 0 16px;
}

.post-cta {
    text-align: center;
    padding: clamp(36px, 4vw, 60px) var(--gutter) clamp(48px, 5vw, 80px);
}
.post-cta p {
    font-family: var(--serif);
    font-style: italic;
    font-size: 22px;
    margin-bottom: 20px;
}

.journal-grid--related {
    display: block;
    border-top: 1px solid #e6e2ea;
}
.journal-related-heading {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(26px, 2.6vw, 38px);
    text-align: center;
    margin: clamp(36px, 4vw, 56px) 0 34px;
}
.journal-related-heading em { font-style: italic; }
.journal-grid__row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: clamp(28px, 3.5vw, 60px);
}

@media (max-width: 860px) {
    .journal-feature { grid-template-columns: 1fr; }
}


/* ---------- Explore tiles (section homepages) ----------
   Portrait image tiles with the homepage-style overlay card, six across. */

.explore-tiles {
    padding: clamp(56px, 6.5vw, 100px) var(--gutter) clamp(56px, 6vw, 90px);
}
/* equal air above and below the title, so it sits centred between
   the section above and the tile strip */
.explore-tiles .explore__heading { margin-bottom: clamp(56px, 6.5vw, 100px); }

/* Ambient tile carousel: a snap strip that drifts on its own and can
   be grabbed (desktop) or swiped (touch) */
.tile-grid {
    display: flex;
    gap: clamp(10px, 1.1vw, 20px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    cursor: grab;
    list-style: none;
}
.tile-grid::-webkit-scrollbar { display: none; }
.tile-grid > li {
    flex: 0 0 auto;
    width: clamp(230px, 23vw, 330px);
    scroll-snap-align: start;
    list-style: none;
}
.tile-grid.is-drifting,
.tile-grid.is-dragging { scroll-snap-type: none; }
.tile-grid.is-dragging { cursor: grabbing; }

.tile {
    position: relative;
    display: block;
    aspect-ratio: 3 / 4.3;
    overflow: hidden;
}

.tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    transition: transform 1.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.tile:hover img { transform: scale(1.07); }

.tile__card {
    position: absolute;
    left: 7%;
    right: 7%;
    bottom: 6%;
    background: rgba(36, 23, 46, 0.72);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 12px 10px;
    min-height: 58px;
    transition: background .4s;
}
.tile:hover .tile__card { background: rgba(36, 23, 46, 0.9); }

.tile__title {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(14px, 1vw, 18px);
    line-height: 1.3;
    letter-spacing: .5px;
}

@media (max-width: 640px)  { .tile-grid > li { width: 68vw; } }

body.theme-dark .explore-tiles .explore__heading { color: var(--white); }


/* ---------- Map band (contact pages) ----------
   Full-bleed black and white map with the studio pinned at its centre,
   a white address card and the OpenStreetMap credit. */

.map-band {
    position: relative;
    height: clamp(320px, 46vh, 480px);
    overflow: hidden;
}

.map-band__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.map-band__pin {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border-radius: 50%;
    background: var(--purple);
    box-shadow: 0 0 0 3px var(--white), 0 2px 10px rgba(36, 23, 46, 0.45);
}
.map-band__pin::after {
    content: "";
    position: absolute;
    inset: -9px;
    border: 1px solid var(--purple);
    border-radius: 50%;
    animation: pin-ping 2.4s ease-out infinite;
}
@keyframes pin-ping {
    0%   { transform: scale(0.6); opacity: 0.9; }
    70%  { transform: scale(1.6); opacity: 0; }
    100% { transform: scale(1.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .map-band__pin::after { animation: none; opacity: 0.5; }
}

.map-band__card {
    position: absolute;
    left: var(--gutter);
    bottom: 30px;
    background: var(--white);
    color: var(--purple);
    padding: 22px 30px 20px;
    box-shadow: 0 12px 34px rgba(36, 23, 46, 0.22);
}

.map-band__name {
    font-family: var(--serif);
    font-size: 21px;
    margin-bottom: 4px;
}

.map-band__addr {
    font-size: 14px;
    font-weight: 300;
    color: var(--grey);
    margin-bottom: 12px;
}

.map-band__dir {
    font-size: 12px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    border-bottom: 1px solid var(--purple);
    padding-bottom: 3px;
    transition: opacity .3s;
}
.map-band__dir:hover { opacity: .6; }

.map-band__credit {
    position: absolute;
    right: 8px;
    bottom: 5px;
    font-size: 10px;
    color: rgba(0, 0, 0, 0.5);
}

@media (max-width: 640px) {
    .map-band__card { left: 16px; right: 16px; padding: 18px 20px 16px; }
}

/* ---------- FAQ block: styled accordion with FAQPage schema ---------- */

.faq-block {
    max-width: 1520px;
    margin: 0 auto;
    padding: clamp(48px, 6vw, 100px) var(--gutter) clamp(56px, 7vw, 110px);
}

.faq-block__heading {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(28px, 3vw, 44px);
    text-align: center;
    margin-bottom: clamp(26px, 3vw, 44px);
}
.faq-block__heading em { font-style: italic; }

.faq-block__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: clamp(28px, 3vw, 56px);
    align-items: start;
}

.faq-item {
    border-bottom: 1px solid #e6e2ea;
}
/* every column opens with a top rule on its first row */
.faq-item:nth-of-type(-n+3) { border-top: 1px solid #e6e2ea; }

@media (max-width: 1100px) {
    .faq-block__list { grid-template-columns: 1fr 1fr; }
    .faq-item:nth-of-type(3) { border-top: 0; }
}
@media (max-width: 760px) {
    .faq-block__list { grid-template-columns: 1fr; }
    .faq-item:nth-of-type(2),
    .faq-item:nth-of-type(3) { border-top: 0; }
}

.faq-item summary {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 18px;
    cursor: pointer;
    list-style: none;
    padding: 20px 2px;
    font-family: var(--serif);
    font-size: clamp(17px, 1.5vw, 22px);
    color: var(--purple);
    transition: opacity .25s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { opacity: .65; }

.faq-item__mark {
    position: relative;
    flex: none;
    width: 14px;
    height: 14px;
    align-self: center;
}
.faq-item__mark::before,
.faq-item__mark::after {
    content: "";
    position: absolute;
    background: var(--purple);
    transition: transform .3s ease;
}
.faq-item__mark::before { left: 0; right: 0; top: 6px; height: 2px; }
.faq-item__mark::after { top: 0; bottom: 0; left: 6px; width: 2px; }
.faq-item[open] .faq-item__mark::after { transform: scaleY(0); }

.faq-item__a { padding: 0 2px 22px; }
.faq-item__a p {
    font-size: clamp(15px, 1.1vw, 17px);
    font-weight: 300;
    line-height: 1.75;
    color: #3c3145;
    max-width: 780px;
    animation: fade-up .5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ---------- Ease feature: full-width image + 2x2 grid, text below ---------- */

.ease-feature { padding: clamp(36px, 5vw, 80px) 0 0; }

.ease-feature__media {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(6px, 0.7vw, 12px);
    width: 100%;
    overflow: hidden;
}

.ease-feature__main {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ease-feature__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(6px, 0.7vw, 12px);
}
.ease-feature__grid img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}

.ease-feature__text {
    max-width: 880px;
    margin: 0 auto;
    padding: clamp(30px, 4vw, 60px) var(--gutter) 0;
    text-align: center;
}
.ease-feature__text h2 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(26px, 2.6vw, 40px);
    line-height: 1.2;
    margin-bottom: 20px;
}
.ease-feature__text p {
    font-size: clamp(15px, 1.1vw, 18px);
    font-weight: 300;
    line-height: 1.8;
    margin-bottom: 14px;
    color: #3c3145;
}

@media (max-width: 700px) {
    .ease-feature__media { grid-template-columns: 1fr; }
    .ease-feature__main { aspect-ratio: 4 / 3; }
}

/* ---------- Feature tiles: 4-up gallery with hover reveals ---------- */

.feature-tiles { padding: clamp(40px, 5vw, 84px) 0 0; }

.feature-tiles__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(6px, 0.7vw, 12px);
}

.feature-tile {
    position: relative;
    display: block;
    aspect-ratio: 2 / 3;
    overflow: hidden;
}

.feature-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
.feature-tile:hover img { transform: scale(1.06); }

.feature-tile__veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(36, 23, 46, 0.55), rgba(36, 23, 46, 0) 55%);
    opacity: 0.85;
    transition: opacity .45s ease;
}
.feature-tile:hover .feature-tile__veil { opacity: 1; }

.feature-tile__label {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    color: var(--white);
}

.feature-tile__title {
    font-family: var(--serif);
    font-size: clamp(18px, 1.5vw, 24px);
    letter-spacing: .5px;
}

.feature-tile__cta {
    font-size: 11px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .45s ease, transform .45s ease;
}
.feature-tile:hover .feature-tile__cta { opacity: 1; transform: none; }
.feature-tile__cta span { display: inline-block; transition: transform .3s ease; }
.feature-tile:hover .feature-tile__cta span { transform: translateX(5px); }

@media (max-width: 1000px) { .feature-tiles__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .feature-tiles__grid { grid-template-columns: 1fr; } }

/* ---------- Hero slider (section homepages with photography) ---------- */

.shome-slider,
.shome-slider img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.shome-slider img {
    object-fit: cover;
    object-position: center top;
    opacity: 0;
    transform: scale(1.08);
    /* zoom anchored to the top edge so the drift never crops heads:
       growth extends downward and to the sides only */
    transform-origin: center top;
    transition: opacity 1.6s ease;
}

.shome-slider img.is-active {
    opacity: 1;
    /* linear drift lasting exactly one slide interval, so the zoom is
       still visibly moving at the moment the crossfade begins */
    animation: hero-drift 7s linear forwards;
}

/* outgoing slide holds its finished scale while it fades, instead of
   snapping back to the zoomed start state */
.shome-slider img.is-leaving { transform: scale(1); }

@keyframes hero-drift {
    from { transform: scale(1.08); }
    to   { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .shome-slider img.is-active { animation: none; transform: none; }
}

/* Made to measure journey: steps alternate around a centre rail that
   fills with ink as you scroll; each numbered node lights as reached */
.process {
    position: relative;
    max-width: 1160px;
    margin: 0 auto;
    padding: clamp(30px, 4vw, 60px) var(--gutter) clamp(60px, 7vw, 100px);
}
.process__rail {
    position: absolute;
    top: 0;
    bottom: clamp(120px, 14vw, 170px);
    left: 50%;
    width: 1px;
    background: #e6e2ea;
}
.process__rail-fill {
    position: absolute;
    inset: 0;
    background: var(--purple);
    transform: scaleY(0);
    transform-origin: top;
}
.process__step {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 96px 1fr;
    align-items: center;
    margin-bottom: clamp(44px, 5vw, 76px);
}
.process__num {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1px solid var(--purple);
    background: var(--white);
    color: var(--purple);
    font-family: var(--serif);
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .45s ease, color .45s ease;
    position: relative;
    z-index: 1;
}
.process__step.is-passed .process__num { background: var(--purple); color: var(--white); }
.process__card { grid-row: 1; }
.process__step:nth-of-type(odd) .process__card { grid-column: 1; text-align: right; }
.process__step:nth-of-type(even) .process__card { grid-column: 3; text-align: left; }
.process__card svg {
    width: 42px;
    height: 42px;
    color: var(--purple);
    margin-bottom: 12px;
}
.process__card h2 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(22px, 2vw, 30px);
    margin-bottom: 10px;
}
.process__card p {
    font-weight: 300;
    font-size: clamp(15px, 1.1vw, 17px);
    line-height: 1.75;
    color: #3c3145;
    margin-bottom: 10px;
}
.process__foot { text-align: center; padding-top: 8px; }
@media (max-width: 760px) {
    .process__rail { left: calc(var(--gutter) + 26px); }
    .process__step { grid-template-columns: 52px 1fr; column-gap: 20px; align-items: start; }
    .process__num { grid-column: 1; }
    .process__step:nth-of-type(odd) .process__card,
    .process__step:nth-of-type(even) .process__card { grid-column: 2; text-align: left; }
}

/* Mens turntable band: the clip is already portrait (no pillarbox
   crop needed); lift its near-white backdrop and, on the dark mens
   theme, set the whole band on white like the womens original */
.shome-band--turntable .shome-band__media--video > .js-scrub-video {
    filter: brightness(1.06) contrast(1.04);
}
body.theme-dark .shome-band--turntable { background: var(--white); }
body.theme-dark .shome-band--turntable .shome-band__text h2 { color: #24172e; }
body.theme-dark .shome-band--turntable .shome-band__text p { color: #3c3145; }

/* FAQ block on the dark mens theme */
body.theme-dark .faq-item { border-color: rgba(255, 255, 255, 0.18); }
body.theme-dark .faq-item:nth-of-type(-n+2) { border-top-color: rgba(255, 255, 255, 0.18); }
body.theme-dark .faq-item summary { color: var(--white); }
body.theme-dark .faq-item__mark::before,
body.theme-dark .faq-item__mark::after { background: var(--white); }
body.theme-dark .faq-item__a p { color: #cfc8d8; }

/* On the dark mens theme the white turntable band must meet the
   section above with no seam */
body.theme-dark .shome-band--turntable { padding-top: 0; }

/* Chalk-pattern studio map in the Made in London band */
.shome-band__media--map { position: relative; }
.shome-band__media--map .map-band__pin {
    z-index: 1;
    background: #e9e2f2;
    box-shadow: 0 0 0 3px rgba(36, 23, 46, 0.9), 0 2px 10px rgba(0, 0, 0, 0.5);
}
.shome-band__media--map .map-band__pin::after { border-color: rgba(233, 226, 242, 0.85); }
.shome-band__map-credit {
    position: absolute;
    right: 12px;
    bottom: 8px;
    z-index: 1;
    font-size: 10px;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.4);
}

/* Square placeholder for duo columns, and duo text on the dark theme */
.ph-img--square {
    aspect-ratio: 1 / 1;
    max-height: none;
    margin: 0 0 clamp(18px, 2vw, 28px);
}
body.theme-dark .duo-col p { color: #cfc8d8; }

/* ---------- Image load-in & parallax layers ---------- */

/* Revealed imagery arrives with a soft blur-and-zoom settle */
.reveal img {
    transition: opacity .9s ease, transform 1.3s cubic-bezier(0.22, 1, 0.36, 1), filter .9s ease;
    will-change: transform, filter;
}
.reveal:not(.is-in) img {
    opacity: 0;
    transform: scale(1.07);
    filter: blur(12px);
}

/* Band media drifts gently against the scroll for a layered feel */
.js-parallax { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
    .reveal img { transition: none; }
    .reveal:not(.is-in) img { opacity: 1; transform: none; filter: none; }
}

/* Closing statement: the final section of a product page, centred
   with its call to action */
.shome-statement--close { padding-bottom: clamp(56px, 7vw, 100px); }
.shome-statement--close .btn { margin-top: 28px; }

/* Process timeline and journal on the dark mens theme */
body.theme-dark .process__rail { background: rgba(255, 255, 255, 0.18); }
body.theme-dark .process__rail-fill { background: var(--white); }
body.theme-dark .process__num { background: #1d1226; border-color: var(--white); color: var(--white); }
body.theme-dark .process__step.is-passed .process__num { background: var(--white); color: #1d1226; }
body.theme-dark .process__card svg { color: var(--white); }
body.theme-dark .process__card p { color: #cfc8d8; }
body.theme-dark .journal-head__title,
body.theme-dark .journal-feature__text h2 a,
body.theme-dark .journal-card h2 a,
body.theme-dark .journal-more { color: var(--white); }
body.theme-dark .journal-head__deck,
body.theme-dark .journal-feature__excerpt,
body.theme-dark .journal-card p { color: #cfc8d8; }
body.theme-dark .journal-head__kicker,
body.theme-dark .journal-meta { color: #a99fb3; }

/* ---------- Contact pages: form + details card ---------- */
.contact-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: clamp(36px, 4.5vw, 80px);
    align-items: start;
    max-width: 1520px;
    margin: 0 auto;
    padding: clamp(40px, 5vw, 84px) var(--gutter);
}
.c-form h2 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(24px, 2.2vw, 32px);
    margin-bottom: 8px;
}
.c-form label {
    display: block;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #6d6378;
    margin: 22px 0 4px;
}
.c-form label span { text-transform: none; letter-spacing: 0; color: #9a90a6; }
.c-form input,
.c-form textarea {
    width: 100%;
    border: 0;
    border-bottom: 1px solid #d9d2e2;
    background: transparent;
    padding: 10px 2px;
    font: inherit;
    color: inherit;
    border-radius: 0;
}
.c-form input:focus,
.c-form textarea:focus { outline: none; border-bottom-color: var(--purple); }
.c-form textarea { min-height: 150px; resize: vertical; }
.c-form .btn { margin-top: 30px; }
.c-form__thanks {
    font-family: var(--serif);
    font-size: clamp(20px, 1.8vw, 26px);
    line-height: 1.5;
    padding: clamp(28px, 3vw, 44px) 0;
}
.contact-card {
    background: #f6f3f8;
    padding: clamp(30px, 3.2vw, 48px);
}
.contact-card h3 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 20px;
    margin: 22px 0 6px;
}
.contact-card h3:first-child { margin-top: 0; }
.contact-card p {
    font-weight: 300;
    font-size: 15.5px;
    line-height: 1.7;
    color: #3c3145;
}
.contact-card a { color: inherit; }
.contact-card .btn { margin-top: 26px; color: var(--white); }
.contact-card__note { margin-top: 14px; font-size: 13.5px; color: #6d6378; }
@media (max-width: 900px) {
    .contact-grid { grid-template-columns: 1fr; }
}
body.theme-dark .c-form label { color: #a99fb3; }
body.theme-dark .c-form label span { color: #867b93; }
body.theme-dark .c-form input,
body.theme-dark .c-form textarea { border-bottom-color: rgba(255, 255, 255, 0.28); }
body.theme-dark .c-form input:focus,
body.theme-dark .c-form textarea:focus { border-bottom-color: var(--white); }
body.theme-dark .contact-card { background: #241730; }
body.theme-dark .contact-card p { color: #cfc8d8; }
body.theme-dark .contact-card__note { color: #a99fb3; }

/* The studio marked on the contact map with the Orhan logo */
.map-band__logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: var(--white);
    padding: 12px 18px 9px;
    box-shadow: 0 6px 24px rgba(36, 23, 46, 0.3);
}
.map-band__logo img { display: block; width: 118px; height: auto; }
.map-band__logo::after {
    content: "";
    position: absolute;
    inset: -12px;
    border: 1px solid var(--purple);
    animation: pin-ping 2.4s ease-out infinite;
}
@media (prefers-reduced-motion: reduce) {
    .map-band__logo::after { animation: none; opacity: 0.4; }
}

/* ---------- Holding page ---------- */
.holding-head {
    text-align: center;
    max-width: 880px;
    margin: 0 auto;
    padding: clamp(64px, 12vh, 150px) var(--gutter) clamp(26px, 4vh, 50px);
}
.holding-head img { display: block; margin: 0 auto; width: clamp(190px, 24vw, 310px); height: auto; }
.holding-head h1 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(30px, 4vw, 54px);
    margin: clamp(26px, 4vh, 44px) 0 18px;
}
.holding-head p {
    font-weight: 300;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.8;
    color: #3c3145;
}
.holding-foot { text-align: center; padding: clamp(30px, 4vw, 54px) var(--gutter); }
.holding-foot a {
    font-size: 13px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #6d6378;
}
.holding-foot a:hover { color: var(--purple); }
/* the holding page stands alone: no site chrome */
body:has(.holding-head) .site-header,
body:has(.holding-head) .site-footer { display: none; }

/* Holding page: details card alone, centred */
.contact-grid--single { grid-template-columns: min(640px, 100%); justify-content: center; }
.contact-grid--single .contact-card { text-align: center; }

.c-form__status { margin-top: 14px; font-size: 14px; color: #b0443c; }