/* Homepage "Noir route" theme — loaded on index.html only (body.noir). Other pages keep the ivory gallery theme. */
body.noir{--bg:#06110b;--bg2:#0a1a11;--gold:#c9a96a;--ivory:#f1ece0;--dim:#a9b0a2;--gline:rgba(201,169,106,.32);--acc:#7fd6a4;background:var(--bg);color:var(--ivory)}
body.noir a:focus-visible,body.noir button:focus-visible{outline-color:var(--gold)}
body.noir h1,body.noir h2,body.noir h3{font-family:'Cormorant Garamond',Didot,'Times New Roman',serif;font-weight:500}
body.noir h2{letter-spacing:-.01em;font-style:italic}
body.noir h2 em{font-style:italic}
body.noir .eyebrow{color:var(--gold)}
body.noir .skip{background:var(--gold);color:#06110b}

/* header */
body.noir .header nav a{color:#d8d6c8}
body.noir .header nav a:hover{border-bottom-color:var(--gold);color:var(--ivory)}
body.noir .brand>img{width:170px}
body.noir .menu-toggle{border-color:var(--gline);color:var(--gold)}
body.noir .button{background:transparent;color:var(--gold);border:1px solid var(--gold);text-transform:uppercase;letter-spacing:.13em;font-size:12.5px;font-weight:500}
body.noir .button:hover{background:var(--gold);color:#06110b}
body.noir .button.outline{border-color:var(--gline);color:var(--gold)}
body.noir .button.outline:hover{background:rgba(201,169,106,.12);color:var(--gold)}
body.noir .button.light{background:var(--gold);color:#06110b}
body.noir .button.light:hover{background:var(--ivory)}
body.noir .header-button{padding:12px 22px;font-size:11.5px}
@media(max-width:760px){body.noir .brand>img{width:140px}body.noir .header nav a{border-bottom-color:var(--gline);color:var(--ivory)}}

/* route hero */
.route-hero{display:grid;grid-template-columns:.86fr 1.14fr;gap:34px;align-items:center;padding-top:30px;padding-bottom:50px;position:relative}
.route-hero:before{content:'';position:absolute;inset:-60px 0 0 20%;background:radial-gradient(ellipse at 62% 45%,rgba(35,100,68,.28),transparent 62%);pointer-events:none}
.route-hero>*{position:relative}
.rh-copy .eyebrow{font-size:9.5px;letter-spacing:2.2px;display:flex;align-items:center;gap:14px;margin-bottom:26px}
.rh-copy .eyebrow:before{content:'';width:38px;height:1px;background:var(--gold);flex:0 0 auto}
body.noir .rh-copy h1{font-size:clamp(52px,6.6vw,104px);line-height:.95;letter-spacing:-.02em;font-style:italic}
body.noir .rh-copy h1 em{font-style:normal;color:var(--gold)}
body.noir .hero-lead{font-size:20px;color:var(--ivory);letter-spacing:0;margin-top:26px}
body.noir .hero-description{font-family:'Inter',var(--sans);font-size:16px;line-height:1.75;color:#cfd3c6;max-width:46ch;margin-top:14px}
body.noir .first-note{color:var(--dim);margin-top:14px}
.clocks{display:flex;flex-wrap:wrap;gap:14px 24px;margin-top:30px;padding-top:20px;border-top:1px solid var(--gline);font-size:10px;letter-spacing:2px;color:var(--dim)}
.clocks b{display:block;font-family:'Cormorant Garamond',serif;font-size:26px;font-weight:500;letter-spacing:0;color:var(--ivory);margin-top:2px}
body.noir .alina-intro{margin-top:34px;gap:20px}
body.noir .alina-intro h2{font-size:30px;font-style:italic;letter-spacing:-.01em}
body.noir .alina-intro p{color:#c5c9bb}
body.noir .alina-intro>img{width:92px;height:92px;border-color:var(--gold);background:var(--bg);box-shadow:0 0 0 1px var(--gline)}
body.noir .fine-rule{background:var(--gold)}
body.noir .intro-arrow{color:var(--gold)}
.rh-map svg{display:block;width:100%;height:auto;overflow:visible}
.rh-map svg text{font-family:'Inter',var(--sans)}
.rh-map .drops{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.rh-map .drop{display:flex;gap:12px;align-items:center;background:#f1ece0;color:#10251a;border-radius:12px;padding:11px 13px;box-shadow:0 22px 40px -22px #000}
.rh-map .drop img{width:50px;height:50px;border-radius:9px;object-fit:cover;flex:0 0 auto}
.rh-map .drop b{display:block;font-size:13px}
.rh-map .drop span{font-size:11.5px;color:#4f6a45}
@media(max-width:960px){.route-hero{grid-template-columns:1fr;gap:26px}.rh-map .drops{grid-template-columns:1fr}}

/* assurance strip */
body.noir .assurance-grid{border-color:var(--gline)}
body.noir .assurance-grid>div{border-color:var(--gline)}
body.noir .assurance-grid span{color:var(--gold)}
body.noir .assurance-grid h3{color:var(--ivory);font-style:italic;font-size:27px}
body.noir .assurance-grid p{color:#b9bfae}
@media(max-width:1150px){body.noir .assurance-grid>div:nth-child(n+3){border-top-color:var(--gline)}}
@media(max-width:760px){body.noir .assurance-grid>div+div{border-top-color:var(--gline)}}

/* process */
body.noir .process.dark-section{background:var(--bg2);border-top:1px solid var(--gline);border-bottom:1px solid var(--gline)}
body.noir .process h2{color:var(--ivory)}
body.noir .process .eyebrow{color:var(--gold)}
body.noir .process-grid article{border-color:var(--gline)}
body.noir .process-grid article>span{color:var(--gold)}
body.noir .process-grid h3{font-style:italic;font-size:30px;color:var(--ivory)}
body.noir .process-grid p{color:#b9bfae}
@media(max-width:760px){body.noir .process-grid article,body.noir .process-grid article:first-child{border-top-color:var(--gline)}}

/* services */
body.noir .section-head>p{color:var(--dim)}
body.noir .service-photo>img{filter:saturate(.9) brightness(.92)}
body.noir .service-photo>figcaption{color:var(--ivory)}
/* Caption under the services photo: it sat on a leftover cream bar (ivory on cream, ~1.1:1) from 768px up — dark bar and gold text at every width */
body.noir .service-photo>figcaption{background:transparent;color:var(--gold);border-bottom-color:var(--gline)}
body.noir .service-rows>a{border-top-color:var(--gline)}
body.noir .service-rows>a:last-of-type{border-bottom-color:var(--gline)}
body.noir .service-rows>a>span{color:var(--gold);border-right-color:var(--gline)}
body.noir .service-rows h3{font-style:italic;font-size:36px}
body.noir .service-rows a div>p{color:var(--dim)}
body.noir .service-rows>a:hover h3{color:var(--gold)}
body.noir .services-more{color:var(--dim)}
body.noir .services-more a{color:var(--gold)}

/* conversation */
body.noir .conversation{background:var(--bg2);border-top:1px solid var(--gline);border-bottom:1px solid var(--gline)}
body.noir .section-copy{color:var(--dim)}
body.noir .scenario-tabs button{border-color:var(--gline);color:var(--ivory)}
body.noir .scenario-tabs button[aria-pressed=true]{background:var(--gold);border-color:var(--gold);color:#06110b}
body.noir .chat{color:#10251a;box-shadow:0 30px 60px -30px #000;border-color:#2a3d2f}

/* membership + card */
.member-card-wrap{perspective:1100px;display:flex;justify-content:center;margin:0 0 54px}
.mcard{width:min(400px,86vw);aspect-ratio:1.586;border-radius:20px;padding:26px;position:relative;background:linear-gradient(135deg,#10261a 0%,#050d09 60%);border:1px solid var(--gline);box-shadow:0 40px 70px -30px #000,inset 0 0 0 1px rgba(255,255,255,.03);transition:transform .15s ease-out;transform-style:preserve-3d;overflow:hidden}
.mcard:before{content:'';position:absolute;inset:-40%;background:linear-gradient(115deg,transparent 40%,rgba(201,169,106,.24) 50%,transparent 60%);transform:translateX(var(--sx,-30%));transition:transform .15s}
.mcard .row{display:flex;justify-content:space-between;align-items:flex-start;position:relative}
.mcard img{width:46px;height:46px;border-radius:10px}
.mcard .t{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:500;font-size:28px;line-height:1;color:var(--gold)}
.mcard .no{position:absolute;left:26px;bottom:54px;font:500 15px/1 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.22em;color:#d9d4c3}
.mcard .nm{position:absolute;left:26px;bottom:26px;font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--dim)}
.mcard .tg{position:absolute;right:26px;bottom:24px;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:15px;color:var(--gold)}
body.noir .plan{border-color:var(--gline);background:rgba(255,255,255,.015)}
body.noir .plan-top h3{font-style:italic}
body.noir .plan-top>span{color:var(--gold)}
body.noir .price{font-family:'Cormorant Garamond',serif;font-weight:500;letter-spacing:-2px}
body.noir .price>span{color:var(--dim)}
body.noir .plan li{border-top-color:var(--gline);color:#c8cdbd}
body.noir .plan li:before{color:var(--gold)}
body.noir .plan:last-child{background:linear-gradient(135deg,rgba(201,169,106,.14),rgba(201,169,106,.03));border-color:var(--gold)}

/* partner, closing, footer */
body.noir .partner.dark-section{background:var(--bg2);border-top:1px solid var(--gline);border-bottom:1px solid var(--gline)}
body.noir .partner-grid>div>p:not(.eyebrow){color:#b9bfae}
body.noir .closing h2{font-size:clamp(64px,8vw,124px)}
body.noir .footer{background:#030a06;border-top:1px solid var(--gline)}
body.noir .footer-top,body.noir .footer-bottom{border-color:var(--gline)}
body.noir .footer-top>p,body.noir .footer-columns>div>span{color:var(--gold)}
body.noir .footer-columns a{color:#c5c9bb}
body.noir .footer-columns a:hover{color:var(--ivory)}
body.noir .text-link{border-bottom-color:var(--gold);color:var(--gold)}
body.noir .footer-bottom{color:#8f9a86}
body.noir{overflow-x:clip}
.rh-copy>.button{margin-top:26px}

/* about page */
body.noir .about-hero h1{font-size:clamp(56px,7vw,112px);line-height:.98;letter-spacing:-.02em;font-style:italic}
body.noir .about-hero h1 em{font-style:normal;color:var(--gold)}
body.noir .about-hero .hero-lead{color:#cfd3c6;font-size:20px;line-height:1.6}
body.noir .about-hero figcaption{color:var(--ivory);text-shadow:0 1px 8px #000}
body.noir .about-hero figure img{filter:saturate(.92) contrast(1.02)}
body.noir .story.dark-section{background:var(--bg2);border-top:1px solid var(--gline);border-bottom:1px solid var(--gline)}
body.noir .story-grid>div>p:not(.eyebrow){color:#c5c9bb}
body.noir .story h2,body.noir .about-alina h2,body.noir .partner h2{color:var(--ivory);font-style:italic}
body.noir .story h2 em,body.noir .about-alina h2 em,body.noir .partner h2 em{color:var(--gold);font-style:normal}
body.noir .about-alina>div>p:not(.eyebrow){color:#c5c9bb}
body.noir .alina-portrait{border:1px solid var(--gline);box-shadow:0 0 0 6px var(--bg),0 0 0 7px var(--gline)}

.map-note{display:none}
@media(max-width:760px){
 .rh-map svg text{font-size:23px!important;font-weight:500}
 .rh-map svg text[fill="#a9b0a2"],.rh-map svg text[font-size="10.5"]{display:none}
 .map-note{display:block;font-size:13px;line-height:1.6;color:var(--dim);margin:12px 0 0}
}
/* Smartwatch-class screens (≤260px): stack the intro, shrink display type, wrap long words */
@media(max-width:260px){
 body.noir{overflow-wrap:anywhere}

 body.noir .rh-copy .eyebrow:before{display:none}
 body.noir .alina-intro{flex-direction:column;align-items:flex-start;gap:12px}
 body.noir .alina-intro h2{font-size:22px}
 body.noir .about-hero h1{font-size:40px}
 body.noir .about-hero .hero-lead{font-size:15px}
 body.noir .about-hero figure,body.noir .about-hero img{max-width:100%}
}
/* Phones: the ≤380px rules in gallery.css shrink labels to 7-9px; keep them readable and make footer links tappable */
@media(max-width:480px){
 body.noir .eyebrow,body.noir .rh-copy .eyebrow{font-size:11px;letter-spacing:.16em}
 body.noir figcaption{font-size:10px;letter-spacing:.12em}
 body.noir .footer-columns>div>span{font-size:11px}
 body.noir .footer-top>p{font-size:10.5px;letter-spacing:.14em}
 body.noir .footer-brand small{font-size:10px}
 body.noir .footer-columns a{display:inline-block;padding:7px 0}
 body.noir .footer-bottom{flex-wrap:wrap;gap:4px 12px;align-items:center}
 body.noir .footer-bottom span{font-size:11.5px}
 body.noir .footer-bottom span:nth-child(2){flex:1 1 100%;order:3;font-size:10px;letter-spacing:.12em}
 body.noir .footer-bottom a{display:inline-block;padding:9px 0;font-size:11.5px}
}
/* Homepage on phones: no 8-9px labels, finger-sized text links, balanced clock rows */
@media(max-width:480px){
 body.noir .first-note,body.noir .intro-arrow,body.noir .chat-foot span,body.noir .chat-foot a,body.noir .mcard .nm{font-size:11px}
 body.noir .process-grid article>span,body.noir .assurance-grid div>span,body.noir .plan-top span{font-size:10.5px;letter-spacing:.14em}
 body.noir .service-rows a p{font-size:10.5px;letter-spacing:.12em}
 body.noir .services-more a,body.noir .chat-foot a,body.noir .footer-top .text-link{display:inline-block;padding:10px 0}
 body.noir .clocks{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 10px}
}
@media(max-width:260px){
 body.noir .clocks{grid-template-columns:repeat(2,1fr)}
}
/* Chat demo card: the small grey-green captions on the cream card were ~3:1 contrast; darken to pass 4.5:1 */
body.noir .chat-head div>span,body.noir .chat-foot>span{color:#586a4c}
/* Services: when the photo stacks above the rows (phones), its caption rule and the first row's top rule doubled up */
@media(max-width:760px){
 body.noir .service-rows>a:first-child{border-top:0}
}
/* Chat card footer: keep the caption and the (now taller, tappable) link on one line */
@media(max-width:480px){
 body.noir .chat-foot{align-items:center}
}
/* Watch-width screens (<=260px): scale the big partner/closing headlines so no word is wider than the screen */
@media(max-width:260px){
 body.noir .partner h2{font-size:30px}
 body.noir .closing h2{font-size:42px}
}
/* Footer: single column on watch-width screens so the email address and headings fit */
@media(max-width:260px){
 body.noir .footer-columns{grid-template-columns:1fr;gap:18px}
 body.noir .footer-columns a{overflow-wrap:anywhere}
}
/* Footer links: finger-sized on any touch screen (tablets included), not only below 480px */
@media(pointer:coarse){
 body.noir .footer-columns a{display:inline-block;padding:7px 0}
 body.noir .footer-bottom a{display:inline-block;padding:9px 0}
}
/* Footer: the link to the page you're on reads as current */
body.noir .footer-columns a[aria-current=page]{color:var(--gold)}
/* Header: finger-sized Menu button on phones */
@media(max-width:760px){
 body.noir .menu-toggle{min-height:44px;padding-left:20px;padding-right:20px}
}
/* Route map: SVG text scales with the drawing, so grow the labels on narrower screens and anchor the edge labels inward so they stay inside it */
@media(max-width:360px){
 .rh-map svg text{font-size:30px!important}
 .rh-map svg text.lb-start{text-anchor:start}
 .rh-map svg text.lb-end{text-anchor:end}
}
@media(max-width:260px){
 .rh-map svg text{font-size:32px!important}
}
/* Hero headline on watch-width screens: 52px wrapped to four lines */
@media(max-width:260px){
 body.noir .rh-copy h1{font-size:38px}
}
/* Hero tagline: break lines between phrases, not inside them (only where a phrase fits the line) */
@media(min-width:340px){
 body.noir .eyebrow .nb{white-space:nowrap}
}
.rh-copy .eyebrow>span{min-width:0}
/* Header tagline under the logo */
body.noir .brand{display:inline-flex;flex-direction:column;align-items:flex-start;gap:5px;text-decoration:none}
body.noir .brand-tag{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:500;font-size:16px;line-height:1;letter-spacing:.03em;color:var(--gold);padding-left:3px;white-space:nowrap}
@media(max-width:760px){
 body.noir .brand-tag{font-size:14px}
}