/* ============================================================
   DILESSE — atelier.css
   The hero as a couture object: an off-canvas monumental crest,
   champagne hairline rules, layered depth and a fine grain veil.

   Loaded after maison.css so it owns the hero composition.

   Reusable primitives introduced here (available site-wide):
     --rule-hair   champagne hairline stroke
     --rule-gold   champagne hairline, stronger
     .grain-veil   fine film-grain overlay, pointer-transparent
     .rule-thin    a single 1px champagne rule
     .kicker       small-caps tracked label with a leading hairline
   ============================================================ */

/* ---------- 01 — Shared luxury primitives ---------- */
:root {
    --champagne: #c8a877;
    --champagne-deep: #a9884f;
    --champagne-pale: #e3cfa6;
    --noir: #121110;
    --noir-2: #1a1714;
    --rule-hair: rgba(200, 168, 119, .34);
    --rule-gold: rgba(200, 168, 119, .62);
}

/* A fine grain veil. Generated as an inline SVG turbulence so no raster
   asset is downloaded; `mix-blend-mode: overlay` keeps it a texture
   rather than a film over the type. */
.grain-veil {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5;
    opacity: .32;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
    background-size: 180px 180px;
}
[data-theme="dark"] .grain-veil { opacity: .42; }

.rule-thin {
    display: block;
    height: 1px;
    width: 100%;
    background: var(--rule-hair);
    transform-origin: left center;
}

/* Small-caps label preceded by a short hairline. */
.kicker {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font: 400 .6rem/1 var(--sans);
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--champagne);
}
.kicker::before {
    content: '';
    width: 34px;
    height: 1px;
    background: var(--rule-gold);
    flex: none;
}

/* ============================================================
   02 — The hero stage
   ============================================================ */
.hero-section.hero-atelier {
    --stage-pad: max(5.5vw, calc((100vw - 1400px) / 2));
    padding: 0;
    background: var(--noir);
}

.hero-section.hero-atelier > .container {
    width: 100%;
    max-width: none;
}

.hero-atelier .hero-banner-card {
    position: relative;
    isolation: isolate;
    display: block;
    overflow: hidden;
    min-height: min(88svh, 840px);
    padding: 104px var(--stage-pad) 118px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: #f5efe4;
    /* One considered field of light instead of three competing gradients. */
    background:
        radial-gradient(120% 90% at 78% 22%, #2b2419 0%, transparent 58%),
        radial-gradient(90% 70% at 8% 92%, #1d1a15 0%, transparent 62%),
        linear-gradient(168deg, #16130f 0%, #100e0c 55%, #0b0a09 100%);
}
[data-theme="dark"] .hero-atelier .hero-banner-card {
    background:
        radial-gradient(120% 90% at 78% 22%, #241e15 0%, transparent 58%),
        radial-gradient(90% 70% at 8% 92%, #171411 0%, transparent 62%),
        linear-gradient(168deg, #100e0c 0%, #0b0a09 100%);
}

/* A single soft champagne bloom behind the crest — the "lamp". */
.hero-atelier .hero-bloom {
    position: absolute;
    inset: -12% -8% -12% 22%;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(
        ellipse at var(--bloom-x, 72%) var(--bloom-y, 40%),
        rgba(214, 178, 120, .17) 0%,
        rgba(180, 138, 53, .07) 34%,
        transparent 68%
    );
    transition: background-position 700ms var(--ease-luxury);
}

/* ---------- 03 — Editorial rail (magazine masthead) ---------- */
.hero-atelier .hero-rail {
    position: absolute;
    inset: 30px var(--stage-pad) auto;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    font: 400 .6rem/1.5 var(--sans);
    letter-spacing: .26em;
    text-transform: uppercase;
    color: #9d8f7a;
}
.hero-atelier .hero-rail__brand {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    color: var(--champagne-pale);
}
.hero-atelier .hero-rail__brand::before {
    content: '';
    width: 40px;
    height: 1px;
    background: var(--rule-gold);
    flex: none;
}
.hero-atelier .hero-rail__meta {
    display: inline-flex;
    align-items: center;
    gap: 18px;
}
.hero-atelier .hero-rail__meta i {
    font-style: normal;
    width: 1px;
    height: 11px;
    background: var(--rule-hair);
}

/* ---------- 04 — The asymmetric editorial grid ---------- */
.hero-atelier .hero-grid {
    position: relative;
    z-index: 4;
    display: grid;
    /* Deliberately off-balance: the copy column is narrow and sits well
       left, the crest mass carries the right. */
    grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
    align-items: center;
    gap: clamp(20px, 3vw, 56px);
    min-height: min(84svh, 800px);
}

/* ---------- 05 — Copy column ---------- */
.hero-atelier .hero-copy {
    position: relative;
    z-index: 4;
    width: 100%;
    max-width: 620px;
    /* Intentional asymmetry: the copy block hangs below optical centre. */
    padding-top: clamp(8px, 4vh, 48px);
}

.hero-atelier .hero-copy > .eyebrow,
.hero-atelier .hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 clamp(20px, 3vh, 30px);
    color: var(--champagne);
    font: 400 .6rem/1 var(--sans);
    letter-spacing: .3em;
    text-transform: uppercase;
}
.hero-atelier .hero-kicker::before {
    content: '';
    width: 34px;
    height: 1px;
    background: var(--rule-gold);
    flex: none;
}

.hero-atelier .hero-copy h1 {
    font-family: var(--cormorant);
    font-weight: 400;
    font-size: clamp(56px, 6.6vw, 108px);
    line-height: .96;
    letter-spacing: -.04em;
    margin: 0 0 clamp(22px, 3.4vh, 34px);
    max-width: none;
    color: #f7f2e8;
    text-wrap: balance;
}
.hero-atelier .hero-copy h1 em {
    color: var(--champagne-pale);
    font-family: var(--cormorant);
    font-weight: 400;
    font-style: italic;
}
.hero-atelier .hero-copy h1 .hero-phrase { display: block; }
/* The stepped indent — the single most visible act of asymmetry. */
.hero-atelier .hero-copy h1 .editorial-accent { padding-left: clamp(18px, 4vw, 62px); }
.hero-atelier .hero-copy h1 .editorial-close {
    font-size: .5em;
    letter-spacing: .03em;
    line-height: 1.3;
    padding-left: clamp(18px, 4vw, 62px);
    margin-top: .34em;
    color: #cabfa9;
    max-width: 15em;
}

/* A champagne hairline that draws itself between headline and prose. */
.hero-atelier .hero-rule {
    width: clamp(48px, 8vw, 112px);
    height: 1px;
    margin: 0 0 clamp(20px, 3vh, 28px);
    background: linear-gradient(90deg, var(--champagne-pale), rgba(200, 168, 119, 0));
    transform-origin: left center;
}

.hero-atelier .hero-copy > p {
    color: #a99e8d;
    max-width: 34ch;
    font-size: clamp(.86rem, .95vw, .98rem);
    font-weight: 300;
    line-height: 1.92;
    letter-spacing: .012em;
    margin: 0 0 clamp(28px, 4vh, 40px);
}

/* ---------- 06 — Calls to action ---------- */
.hero-atelier .hero-cta {
    display: flex;
    align-items: center;
    gap: clamp(20px, 2.6vw, 34px);
    flex-wrap: wrap;
    margin: 0;
}

.hero-atelier .hero-cta .btn-dark {
    position: relative;
    overflow: hidden;
    background: transparent;
    color: var(--champagne-pale);
    border: 1px solid var(--rule-gold);
    border-radius: 0;
    padding: 15px 30px;
    font-size: .64rem;
    letter-spacing: .2em;
    box-shadow: none;
}
/* The fill wipes in from the left rather than cross-fading a block colour. */
.hero-atelier .hero-cta .btn-dark::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, var(--champagne) 0%, var(--champagne-pale) 100%);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 520ms var(--ease-luxury);
    z-index: -1;
}
.hero-atelier .hero-cta .btn-dark:hover {
    color: #16120e;
    border-color: var(--champagne-pale);
    box-shadow: 0 10px 34px rgba(180, 138, 53, .22);
}
.hero-atelier .hero-cta .btn-dark:hover::before { transform: scaleX(1); }

.hero-atelier .maison-text-link {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    padding: 10px 0;
    font-size: .66rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #e6dccb;
    border-bottom: 1px solid var(--rule-hair);
    transition: color 300ms ease, border-color 300ms ease;
}
.hero-atelier .maison-text-link::after {
    content: '\2197';
    font-size: .95rem;
    transition: transform 300ms var(--ease-luxury);
}
.hero-atelier .maison-text-link:hover {
    color: var(--champagne-pale);
    border-bottom-color: var(--rule-gold);
}
.hero-atelier .maison-text-link:hover::after { transform: translate(3px, -3px); }

/* ---------- 07 — The monumental crest ---------- */
.hero-atelier .hero-visual {
    position: relative;
    width: 100%;
    height: min(84svh, 800px);
    min-height: 0;
    z-index: 2;
}
.hero-atelier .hero-relief-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
    max-width: none;
    border: 0;
    border-radius: 0;
    overflow: visible;
    background: transparent;
    box-shadow: none;
    isolation: isolate;
    --light-x: 50%;
    --light-y: 42%;
}
.hero-atelier .hero-crest-slot {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
}

/* The relief keeps only the moving specular — the field itself is the stage. */
.hero-atelier .hero-relief-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(
        ellipse at var(--light-x) var(--light-y),
        rgba(255, 244, 222, .1) 0%,
        rgba(200, 168, 119, .05) 40%,
        transparent 70%
    );
}
.hero-atelier .hero-relief-wrapper::after { content: none; }

.hero-atelier .crest-poster {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 0;
    pointer-events: none;
    transition: opacity 600ms ease;
}
.hero-atelier .crest-poster img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Scale past the frame so the crest bleeds off the right edge. */
    transform: scale(1.06) translateX(3%);
    filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .55));
}
.hero-atelier .hero-relief-model {
    width: 100%;
    height: 100%;
    min-height: 0;
    outline: none;
    opacity: 0;
    pointer-events: none;
    background: transparent;
    cursor: grab;
    transform: scale(1.06) translateX(3%);
    transition: opacity 600ms ease;
    --poster-color: transparent;
}
.hero-atelier .hero-relief-model::part(default-progress-bar) { display: none !important; }
.hero-atelier .hero-relief-model:active { cursor: grabbing; }
.hero-atelier .model-ready .hero-relief-model { opacity: 1; pointer-events: auto; }
.hero-atelier .model-ready .crest-poster { opacity: 0; }
.hero-atelier .hero-relief-model:focus-visible { outline: 2px solid var(--champagne); outline-offset: -6px; }

.hero-atelier .model-badge {
    position: absolute;
    top: auto;
    bottom: 4px;
    left: auto;
    right: 2px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    backdrop-filter: none;
    color: #8e8271;
    font-size: .54rem;
    letter-spacing: .2em;
    text-transform: uppercase;
}
.hero-atelier .model-badge svg { width: 9px; height: 9px; color: var(--champagne); }
.hero-atelier .model-failed .model-badge { visibility: hidden; }

/* ---------- 08 — The pinned atelier card ---------- */
.hero-atelier .hero-floating-card {
    position: absolute;
    right: auto;
    left: -2%;
    bottom: 8%;
    z-index: 7;
    display: flex;
    align-items: center;
    gap: 16px;
    width: 292px;
    padding: 16px 18px;
    border: 1px solid rgba(200, 168, 119, .3);
    border-radius: 0;
    background: #efe7d8;
    color: #221d16;
    box-shadow: 0 26px 60px rgba(0, 0, 0, .48);
    transform: translate3d(var(--card-x, 0px), 0, 0) rotate(-2.4deg);
    transition: transform 320ms var(--ease-luxury), box-shadow 320ms ease;
}
/* A hairline "thread" plus a pin head — a couture tag, not a UI card. */
.hero-atelier .hero-floating-card::before {
    content: '';
    position: absolute;
    top: -40px;
    left: 30px;
    width: 1px;
    height: 40px;
    background: linear-gradient(180deg, rgba(200, 168, 119, 0), var(--rule-gold));
}
.hero-atelier .hero-floating-card::after {
    content: '';
    position: absolute;
    top: 8px;
    left: 27px;
    width: 7px;
    height: 7px;
    border: 1px solid var(--champagne-deep);
    border-radius: 50%;
    background: transparent;
}
.hero-atelier .hero-floating-card:hover {
    transform: translate3d(var(--card-x, 0px), -6px, 0) rotate(-1deg);
    box-shadow: 0 34px 72px rgba(0, 0, 0, .58);
}
.hero-atelier .hero-floating-card .hfc-thumb {
    width: 50px;
    height: 66px;
    flex: none;
    border-radius: 0;
    overflow: hidden;
    background: #ded4c1;
}
.hero-atelier .hero-floating-card .hfc-thumb img { width: 100%; height: 100%; object-fit: cover; }
.hero-atelier .hero-floating-card .hfc-details { flex: 1; min-width: 0; }
.hero-atelier .hero-floating-card .hfc-tag {
    display: block;
    font-size: .5rem;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: #7d6640;
}
.hero-atelier .hero-floating-card .hfc-title {
    display: block;
    margin: 6px 0 9px;
    color: #282015;
    font-family: var(--cormorant);
    font-size: 1.24rem;
    font-weight: 500;
    line-height: 1.1;
}
.hero-atelier .hero-floating-card .hfc-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding-top: 9px;
    border-top: 1px solid rgba(200, 168, 119, .38);
}
.hero-atelier .hero-floating-card .hfc-price {
    color: #6a5c47;
    font-size: .72rem;
    font-weight: 400;
}
.hero-atelier .hero-floating-card .hfc-link,
.hero-atelier .hero-floating-card:hover .hfc-link {
    color: #7d6640;
    font-size: .58rem;
    letter-spacing: .14em;
    text-transform: uppercase;
}

/* ---------- 09 — The maison footer of the stage ---------- */
.hero-atelier .hero-benefits {
    position: absolute;
    left: var(--stage-pad);
    right: var(--stage-pad);
    bottom: 30px;
    z-index: 6;
    display: flex;
    align-items: center;
    gap: clamp(20px, 3vw, 44px);
    margin: 0;
    padding-top: 16px;
    border-top: 1px solid var(--rule-hair);
}
.hero-atelier .benefit-item {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;
    min-width: 0;
}
.hero-atelier .benefit-item svg { width: 14px; height: 14px; flex: none; stroke: #9c8a6a; }
.hero-atelier .benefit-item strong {
    display: block;
    color: #b0a28c;
    font-size: .56rem;
    font-weight: 400;
    letter-spacing: .16em;
    text-transform: uppercase;
    line-height: 1.5;
}
.hero-atelier .benefit-item span { display: none; }

.hero-atelier .maison-scroll {
    position: absolute;
    right: var(--stage-pad);
    bottom: 30px;
    z-index: 6;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    color: #9d8f7a;
    font-size: .54rem;
    letter-spacing: .22em;
    text-transform: uppercase;
}
.hero-atelier .maison-scroll span:last-child {
    font-size: 1rem;
    animation: atelier-nudge 2.6s var(--ease-luxury) infinite;
}
@keyframes atelier-nudge {
    0%, 62%, 100% { transform: translateY(0); opacity: .7; }
    78% { transform: translateY(4px); opacity: 1; }
}

/* ============================================================
   10 — The animated reveal
   A single choreographed entrance: hairlines draw, mask lifts,
   light blooms, type rises. Collapses entirely under reduced motion.
   ============================================================ */
.hero-atelier .hero-rail,
.hero-atelier .hero-kicker,
.hero-atelier .hero-copy > p,
.hero-atelier .hero-cta,
.hero-atelier .hero-benefits,
.hero-atelier .maison-scroll {
    opacity: 0;
}
.hero-atelier .hero-rule {
    transform: scaleX(0);
}
.hero-atelier .hero-floating-card {
    opacity: 0;
    translate: 0 26px;
}
.hero-atelier .hero-relief-wrapper {
    opacity: 0;
    scale: .965;
}
.hero-atelier .hero-bloom { opacity: 0; }

.hero-atelier.hero-motion .hero-rail,
.hero-atelier.hero-motion .hero-kicker,
.hero-atelier.hero-motion .hero-copy > p,
.hero-atelier.hero-motion .hero-cta,
.hero-atelier.hero-motion .hero-benefits,
.hero-atelier.hero-motion .maison-scroll {
    opacity: 1;
}
.hero-atelier.hero-motion .hero-rail { animation: atelier-fade 900ms var(--ease-luxury) both; }
.hero-atelier.hero-motion .hero-bloom { animation: atelier-fade 1400ms var(--ease-luxury) 200ms both; }
.hero-atelier.hero-motion .hero-kicker { animation: atelier-rise 760ms var(--ease-luxury) 160ms both; }
.hero-atelier.hero-motion .hero-rule {
    animation: atelier-draw 900ms var(--ease-luxury) 640ms both;
}
.hero-atelier.hero-motion .hero-copy > p { animation: atelier-rise 760ms var(--ease-luxury) 620ms both; }
.hero-atelier.hero-motion .hero-cta { animation: atelier-rise 760ms var(--ease-luxury) 780ms both; }
.hero-atelier.hero-motion .hero-benefits { animation: atelier-rise 760ms var(--ease-luxury) 1080ms both; }
.hero-atelier.hero-motion .maison-scroll { animation: atelier-rise 760ms var(--ease-luxury) 1140ms both; }
.hero-atelier.hero-motion .hero-relief-wrapper {
    animation: atelier-crest 1500ms var(--ease-luxury) 260ms both;
}
.hero-atelier.hero-motion .hero-floating-card {
    animation: atelier-card 900ms var(--ease-luxury) 1200ms both;
}
/* The headline lines are still split and staggered by js/hero-motion.js. */
.hero-atelier.hero-motion .hero-line-inner {
    animation: atelier-line 900ms var(--ease-luxury) var(--hero-delay, 200ms) both;
}
.hero-atelier.hero-intro-complete .hero-rail,
.hero-atelier.hero-intro-complete .hero-bloom,
.hero-atelier.hero-intro-complete .hero-kicker,
.hero-atelier.hero-intro-complete .hero-rule,
.hero-atelier.hero-intro-complete .hero-copy > p,
.hero-atelier.hero-intro-complete .hero-cta,
.hero-atelier.hero-intro-complete .hero-benefits,
.hero-atelier.hero-intro-complete .maison-scroll,
.hero-atelier.hero-intro-complete .hero-relief-wrapper,
.hero-atelier.hero-intro-complete .hero-line-inner {
    animation: none;
    opacity: 1;
    transform: none;
    scale: 1;
    translate: none;
}
/* The atelier tag keeps its static tilt: its `transform` is the resting
   state, not an animation artefact, so it must not be cleared here. */
.hero-atelier.hero-intro-complete .hero-floating-card {
    animation: none;
    opacity: 1;
    scale: 1;
    translate: none;
}

@keyframes atelier-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes atelier-rise {
    from { opacity: 0; translate: 0 14px; }
    to { opacity: 1; translate: 0 0; }
}
@keyframes atelier-draw {
    from { transform: scaleX(0); opacity: 0; }
    to { transform: scaleX(1); opacity: 1; }
}
@keyframes atelier-line {
    from { opacity: 0; transform: translateY(108%); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes atelier-crest {
    from { opacity: 0; scale: .965; filter: blur(6px); }
    to { opacity: 1; scale: 1; filter: blur(0); }
}
@keyframes atelier-card {
    from { opacity: 0; translate: 0 26px; rotate: -5deg; }
    to { opacity: 1; translate: 0 0; rotate: 0deg; }
}

/* No JavaScript: everything is present and legible. */
.hero-atelier:not(.hero-motion) .hero-rail,
.hero-atelier:not(.hero-motion) .hero-kicker,
.hero-atelier:not(.hero-motion) .hero-copy > p,
.hero-atelier:not(.hero-motion) .hero-cta,
.hero-atelier:not(.hero-motion) .hero-benefits,
.hero-atelier:not(.hero-motion) .maison-scroll,
.hero-atelier:not(.hero-motion) .hero-floating-card,
.hero-atelier:not(.hero-motion) .hero-relief-wrapper,
.hero-atelier:not(.hero-motion) .hero-bloom {
    opacity: 1;
    translate: none;
    scale: 1;
    animation: none;
}
.hero-atelier:not(.hero-motion) .hero-rule { transform: scaleX(1); }

/* ============================================================
   11 — Responsive
   ============================================================ */

/* Large desktop: let the crest grow past the frame edge. */
@media (min-width: 1600px) {
    .hero-atelier .crest-poster img,
    .hero-atelier .hero-relief-model { transform: scale(1.1) translateX(5%); }
}

/* Tablet and below: stack, crest leads. */
@media (max-width: 1100px) {
    .hero-atelier .hero-grid {
        grid-template-columns: 1fr;
        gap: 0;
        min-height: 0;
    }
    .hero-atelier .hero-banner-card { min-height: 0; padding: 100px var(--stage-pad) 114px; }
    .hero-atelier .hero-copy { max-width: 560px; padding-top: 0; }
    .hero-atelier .hero-visual {
        height: clamp(240px, 34svh, 400px);
        order: -1;
        margin-bottom: clamp(10px, 2vh, 22px);
    }
    /* The tag anchors to the crest's lower-left, clear of the headline. */
    .hero-atelier .hero-floating-card {
        left: 0;
        bottom: -6px;
        width: 250px;
        padding: 13px 15px;
    }
    .hero-atelier .hero-floating-card .hfc-thumb { width: 42px; height: 56px; }
    .hero-atelier .hero-floating-card .hfc-title { font-size: 1.08rem; margin: 4px 0 7px; }
}

/* Phones. The square crest stage only makes sense once the column is close to
   actual phone width — at 700-768px a 1:1 stage on a near-full-width column
   would render a crest taller than the copy. The 769-1100px range keeps the
   proportional crest from the tablet block above. */
@media (max-width: 640px) {
    .hero-section.hero-atelier { --stage-pad: 7%; }
    .hero-atelier .hero-banner-card {
        padding: 84px var(--stage-pad) 30px;
        gap: 0;
    }

    /* ---- Masthead rail -------------------------------------------------
       The rail no longer tries to mask shadow-DOM bleed with a gradient
       (which left the type half-lit). It simply owns a solid band above
       the crest and the crest stage starts below it. */
    .hero-atelier .hero-rail {
        position: relative;
        inset: auto;
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        padding: 0 0 14px;
        margin-bottom: 4px;
        border-bottom: 1px solid var(--rule-hair);
        font-size: .5rem;
        letter-spacing: .15em;
        z-index: auto;
    }
    .hero-atelier .hero-rail::before { content: none; }
    .hero-atelier .hero-rail__brand::before { width: 16px; }
    .hero-atelier .hero-rail__meta {
        gap: 8px;
        font-size: .46rem;
        letter-spacing: .12em;
        text-align: right;
        white-space: nowrap;
    }
    .hero-atelier .hero-rail__meta i { display: none; }

    .hero-atelier .hero-copy h1 { font-size: clamp(46px, 12.4vw, 66px); }
    .hero-atelier .hero-copy h1 .editorial-accent,
    .hero-atelier .hero-copy h1 .editorial-close { padding-left: clamp(14px, 7vw, 30px); }
    .hero-atelier .hero-copy h1 .editorial-close { font-size: .56em; max-width: none; }
    .hero-atelier .hero-copy > p { max-width: none; font-size: .84rem; line-height: 1.8; }

    /* ---- Composition ---------------------------------------------------
       Crest, then the atelier tag tucked under its lower-right, then the
       copy. The tag overlaps the crest stage's bottom padding rather than
       sitting in dead space. */
    .hero-atelier .hero-grid { padding-top: 0; display: flex; flex-direction: column; }
    .hero-atelier .hero-visual {
        order: 1;
        height: auto;
        margin-bottom: 0;
    }
    .hero-atelier .hero-copy { order: 2; padding-top: 34px; }

    .hero-atelier .hero-relief-wrapper {
        display: block;
        height: auto;
        overflow: visible;
        padding-bottom: 54px; /* room for the tag to sit over the crest's base */
    }
    /* The emblem is a near-square lockup (the D above the wordmark) that fills
       ~95% of its frame, so the crest needs a square-ish stage to appear whole.
       The previous fixed 210px box cut the wordmark off and read as broken.
       The stage is a bounded square, centred in the column: `min()` on width
       keeps it square while capping it against viewport height and an absolute
       ceiling, so it cannot balloon on a wide-but-short phone. */
    .hero-atelier .hero-crest-slot {
        position: relative;
        width: min(100%, 52svh, 340px);
        height: auto;
        aspect-ratio: 1 / 1;
        margin: 0 auto 26px;
        overflow: visible;
    }

    /* The atelier tag occupies the crest's base at every phone width, so the
       badge would sit behind it. Hide it rather than let it collide: on touch
       the crest is directly manipulable and needs no affordance label. */
    .hero-atelier .model-badge { display: none; }

    .hero-atelier .crest-poster img,
    .hero-atelier .hero-relief-model {
        transform: scale(1) translateX(0);
        filter: drop-shadow(0 22px 44px rgba(0, 0, 0, .5));
    }

    /* The tag is anchored into the crest's lower edge, bottom-right, so it
       reads as pinned to the artwork instead of floating in space. */
    .hero-atelier .hero-floating-card {
        position: absolute;
        left: auto;
        right: 0;
        bottom: 0;
        width: min(272px, 88%);
        padding: 13px 15px;
        gap: 13px;
        transform: rotate(-2.4deg);
    }
    .hero-atelier .hero-floating-card .hfc-thumb { width: 42px; height: 56px; }
    .hero-atelier .hero-floating-card .hfc-title { font-size: 1.05rem; margin: 4px 0 7px; }
    .hero-atelier .hero-floating-card .hfc-tag { font-size: .46rem; letter-spacing: .2em; }
    .hero-atelier .hero-floating-card .hfc-meta { padding-top: 7px; }
    /* The thread and pin head only make sense hanging from above. */
    .hero-atelier .hero-floating-card::before,
    .hero-atelier .hero-floating-card::after { content: none; }

    /* Two equal-weight actions side by side, not a button plus a stray link. */
    .hero-atelier .hero-cta {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        align-items: stretch;
        margin-bottom: 30px;
    }
    .hero-atelier .hero-cta .btn-dark,
    .hero-atelier .hero-cta .maison-text-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 15px 12px;
        border: 1px solid var(--rule-gold);
        font-size: .58rem;
        letter-spacing: .16em;
        text-align: center;
        line-height: 1.2;
    }
    .hero-atelier .hero-cta .btn-dark { border-color: var(--rule-gold); }
    .hero-atelier .hero-cta .maison-text-link::after { font-size: .8rem; }
    .hero-atelier .hero-cta .maison-text-link:hover,
    .hero-atelier .hero-cta .maison-text-link:active {
        background: rgba(200, 168, 119, .1);
        color: var(--champagne-pale);
    }

    /* Service notes flow in the document instead of being pinned to a
       stage bottom that no longer exists at this width. */
    .hero-atelier .hero-benefits {
        position: static;
        left: auto;
        right: auto;
        bottom: auto;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 10px 14px;
        margin-top: 4px;
        padding-top: 16px;
    }
    .hero-atelier .benefit-item { flex: 0 1 auto; gap: 7px; }
    .hero-atelier .benefit-item strong { font-size: .5rem; letter-spacing: .1em; }
    .hero-atelier .benefit-item svg { width: 12px; height: 12px; }
    .hero-atelier .maison-scroll { display: none; }
}

@media (max-width: 400px) {
    .hero-atelier .hero-copy h1 { font-size: 42px; }
    .hero-atelier .hero-copy { padding-top: 30px; }
    .hero-atelier .hero-visual { height: auto; }
    /* Narrow phones: the square already tracks the column width, so only the
       outer spacing needs trimming. */
    .hero-atelier .hero-crest-slot { margin-bottom: 24px; }
    .hero-atelier .hero-relief-wrapper { padding-bottom: 50px; }
    .hero-atelier .hero-floating-card { width: min(252px, 92%); padding: 12px 13px; }
    .hero-atelier .hero-floating-card .hfc-title { font-size: .98rem; }
    .hero-atelier .hero-cta { grid-template-columns: 1fr; }
}

/* ============================================================
   12 — Preference and print behaviour
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .hero-atelier .hero-rail,
    .hero-atelier .hero-kicker,
    .hero-atelier .hero-copy > p,
    .hero-atelier .hero-cta,
    .hero-atelier .hero-benefits,
    .hero-atelier .maison-scroll,
    .hero-atelier .hero-floating-card,
    .hero-atelier .hero-relief-wrapper,
    .hero-atelier .hero-bloom,
    .hero-atelier .hero-line-inner {
        opacity: 1;
        translate: none;
        scale: 1;
        animation: none;
    }
    .hero-atelier .hero-rule { transform: scaleX(1); }
    .hero-atelier .maison-scroll span:last-child { animation: none; }
    .hero-atelier .hero-floating-card { transform: rotate(-2.4deg); }
}

@media print {
    .hero-atelier .grain-veil,
    .hero-atelier .hero-bloom,
    .hero-atelier .maison-scroll { display: none; }
    .hero-atelier .hero-banner-card { background: #fff; color: #111; }
}