/* ARTCH: a quiet, cinematic treatment of the existing brand and imagery. */
:root{--cinema-ease:cubic-bezier(.2,.65,.25,1);--cinema-line:rgba(211,174,104,.24)}
@view-transition{navigation:auto}
::view-transition-old(root){animation:cinema-out .22s ease both}
::view-transition-new(root){animation:cinema-in .45s ease both}
body{background:#0a0a0a}
.header{min-height:92px;height:auto;padding:15px 5%;background:#090909;border-bottom-color:var(--cinema-line)}
.header .brand{flex-basis:145px}
.header nav{gap:12px 20px;font-size:14px}
.header nav a{position:relative;transition:color .3s ease}
.header nav a:after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--cinema-ease)}
.header nav a:hover:after{transform:scaleX(1)}
.header-cta{display:inline-block;min-height:36px;padding:5px 0}
.eyebrow{font-size:12px;line-height:1.8;letter-spacing:.17em}
.button{position:relative;border:1px solid transparent;transition:background .35s,color .35s,border-color .35s,transform .5s var(--cinema-ease);max-width:100%}
.button.light{background:#f5f3ee;color:#0a0a0a}
.button.light:hover{background:var(--gold);border-color:var(--gold)}
.button span{transition:transform .45s var(--cinema-ease)}
.button:hover span{transform:translate(3px,-3px)}
.hero.hero-cinematic{--hero-height:clamp(620px,calc(100svh - 92px),820px);grid-template-columns:1fr 1fr;min-height:var(--hero-height);background:#0a0a0a;border-bottom:1px solid var(--cinema-line)}
.hero.hero-cinematic:before{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(ellipse at 77% 45%,rgba(211,174,104,.06),transparent 55%);pointer-events:none}
.hero-cinematic .hero-copy{min-width:0;min-height:inherit;padding:clamp(52px,7vh,92px) 0 36px 14%;justify-content:center}
.hero-cinematic .hero-copy>.eyebrow{font-size:12px;color:var(--gold);animation:cinema-rise 1.1s .1s both}
.hero-cinematic h1{font-size:clamp(58px,7.1vw,110px);line-height:1.05;letter-spacing:-.045em;margin:30px 0 25px;padding:0;position:relative}
.cinema-line{display:block;overflow:hidden;padding-bottom:.09em;margin-bottom:-.09em}
.cinema-line>span{display:block;animation:cinema-title 1.3s var(--cinema-ease) both}
.cinema-line:nth-child(2)>span{animation-delay:.14s}
.hero-cinematic h1 em{color:var(--gold);text-shadow:0 0 48px rgba(211,174,104,.12)}
.hero-cinematic .hero-description{font-size:17px;line-height:1.8;max-width:390px;color:#d1cec8;animation:cinema-rise 1.1s .24s both}
.hero-cinematic .hero-copy>.button{margin-top:30px;animation:cinema-rise 1.1s .34s both}
.hero-cinematic .hero-bottom{margin-top:auto;padding-top:56px;padding-right:28px;font-size:12px;letter-spacing:.075em;max-width:550px;animation:cinema-in 1.2s .5s both}
.hero-cinematic .hero-bottom a{font-size:14px}
.hero-cinematic .hero-film{min-width:0;min-height:0;height:var(--hero-height);padding:78px 20px 58px;justify-content:center;align-items:center;background:transparent;--scene-y:0px}
.hero-cinematic .hero-film video{width:100%;height:100%;max-width:540px;max-height:759px;aspect-ratio:1080/1518;object-fit:contain;transform:translate3d(0,var(--scene-y),0);filter:none;opacity:1;mask-image:radial-gradient(ellipse 70% 60% at 50% 53%,#000 50%,rgba(0,0,0,.9) 67%,transparent 98%);-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 53%,#000 50%,rgba(0,0,0,.9) 67%,transparent 98%)}
.hero-cinematic .hero-brand-mark{top:27px;left:50%;width:210px;opacity:.9}
.hero-cinematic .film-shade{background:linear-gradient(90deg,#0a0a0a,transparent 20%,transparent 84%,#0a0a0a),linear-gradient(0deg,#0a0a0a,transparent 13%,transparent 88%,#0a0a0a)}
.hero-cinematic .film-caption{display:block;z-index:4;left:50%;bottom:34px;transform:translateX(-50%);white-space:nowrap;font-size:12px;letter-spacing:.17em;color:#c3b79f}
.hero-cinematic .hero-film .video-toggle{bottom:24px;right:7%;width:46px;height:46px;border-color:#d3ae6866;background:#0a0a0a99}
.hero-cinematic .foreground-glow{background:radial-gradient(ellipse,rgba(211,174,104,.2),rgba(133,99,48,.055) 46%,transparent 72%);animation-duration:18s}
.hero-cinematic .foreground-shadow{animation-duration:22s}
.hero-cinematic .lens-light{background:linear-gradient(90deg,transparent,rgba(211,174,104,.05),transparent);animation-duration:24s}
.home-overview{position:relative;background:linear-gradient(180deg,#0a0a0a,#10100f)}
.compact-site .home-overview.section-pad{padding-top:55px;padding-bottom:54px}
.home-overview>.eyebrow{display:flex;align-items:center;gap:18px}
.home-overview>.eyebrow:after{content:"";height:1px;flex:1;background:linear-gradient(90deg,var(--cinema-line),transparent)}
.route-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:28px;border:0}
.route-card{min-width:0;margin:0;border-color:var(--cinema-line);padding:24px 26px 24px 0}
.route-card h2{font-size:clamp(21px,2.1vw,29px);line-height:1.23;transition:color .3s}
.route-card p{font-size:16px;line-height:1.75;max-width:30em;color:#bdbbb6}
.route-card>span{top:25px;transition:transform .4s var(--cinema-ease)}
.route-card:hover>span{transform:translate(3px,-3px)}
.route-card.route-feature{padding:0 0 25px}
.route-feature .route-visual{display:block;position:relative;aspect-ratio:1.55;overflow:hidden;margin-bottom:23px;background:#151412;border:1px solid var(--cinema-line)}
.route-feature .route-visual>img,.route-feature .route-visual>.lens-image{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--cinema-ease)}
.route-feature .route-visual img{height:100%;object-fit:cover;object-position:center 40%}
.route-feature .route-visual:after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 42px #0004;background:linear-gradient(0deg,#0a0a0a70,transparent 45%)}
.route-feature.route-founder .route-visual img{object-position:center 29%}
.route-feature h2,.route-feature p{padding-right:25px}
.route-card.route-feature>span{top:auto;bottom:29px;right:2px}
.route-links{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;border-top:1px solid var(--cinema-line);margin-top:36px}
.route-links .route-card{border-bottom:0}
.route-links h2{font-size:21px}
.route-links p{font-size:14px;line-height:1.8}
.page-intro.section-pad{position:relative;max-width:none;overflow:hidden;background:radial-gradient(ellipse at 88% 0%,#d3ae6810,transparent 60%);border-bottom:1px solid var(--cinema-line)}
.page-intro h1,.guide-intro h1,.faq-hero h1,.about-copy h1{letter-spacing:-.025em}
.page-intro h1{max-width:1100px;font-size:clamp(38px,5.5vw,76px);margin:20px 0 24px}
.page-intro>p:last-child{font-size:17px;line-height:1.85}
.guide-intro{background:radial-gradient(ellipse at 95% 0%,#d3ae680d,transparent 60%)}
.treatments{background:#0e0e0d}
.treatment-row,.content-fold,.founder-story,.faq-group details{border-color:var(--cinema-line)}
.compact-site .treatment-media{border:1px solid var(--cinema-line);box-shadow:0 16px 44px #0004}
.compact-site .about{background:radial-gradient(ellipse at 15% 48%,#d3ae6810,transparent 55%)}
.portrait-display{padding:0 0 20px 0}
.portrait-display:before{inset:18px -16px 4px 18px;transform:none;border-color:var(--cinema-line);background:transparent}
.portrait-card{transform:none;border-color:var(--cinema-line);box-shadow:0 25px 70px #0005}
.portrait-card figcaption{padding-top:90px}
.compact-cta{background:radial-gradient(ellipse at 90% 110%,#d3ae6812,transparent 60%),#10100f;border-top-color:var(--cinema-line)}
.compact-cta h2{font-size:clamp(30px,3.4vw,46px)}
.compact-cta p{font-size:16px;line-height:1.8}
.footer{border-top-color:var(--cinema-line);font-size:12px}
.footer>a{font-size:14px}
.js .reveal,.artch-arrive{transition:opacity 1s var(--cinema-ease),transform 1.1s var(--cinema-ease)}
.artch-reading-progress{height:1px;box-shadow:0 0 8px #d3ae6840}
@keyframes cinema-title{from{transform:translateY(112%);opacity:.1}to{transform:none;opacity:1}}
@keyframes cinema-rise{from{transform:translateY(18px);opacity:0}to{transform:none;opacity:1}}
@keyframes cinema-in{from{opacity:0}to{opacity:1}}
@keyframes cinema-out{from{opacity:1}to{opacity:0}}
@media(hover:hover){.route-feature:hover .route-visual>img,.route-feature:hover .route-visual>.lens-image{transform:scale(1.035)}}
@media(min-width:1600px){.hero-cinematic .hero-copy{padding-left:max(112px,calc((100vw - 1440px)/2))}.hero-cinematic .hero-film{padding-right:max(0px,calc((100vw - 1680px)/2))}.hero-cinematic .hero-brand-mark{left:50%}}
@media(max-width:1100px){.header{flex-wrap:wrap;gap:10px 24px}.header nav{order:3;flex-basis:100%;flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;max-width:100%;gap:24px;scrollbar-width:thin;scrollbar-color:#5c503b transparent;padding-bottom:5px}.header nav a{flex-shrink:0}.header-cta{margin-left:auto}.hero.hero-cinematic{--hero-height:610px;min-height:var(--hero-height)}.hero-cinematic .hero-copy{padding-left:12%;padding-top:48px}.hero-cinematic .hero-film video{height:100%}.hero-cinematic .hero-brand-mark{width:170px}.hero-cinematic .hero-bottom{flex-direction:column;align-items:flex-start;gap:8px}.hero-cinematic .film-caption{font-size:12px;bottom:39px;left:43%;letter-spacing:.08em}.route-links{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 30px}.route-links .route-card{border-bottom:1px solid var(--cinema-line)}}
@media(max-width:700px){
 .header{padding:12px 6% 8px;min-height:112px;gap:8px 20px}
 .header .brand{flex-basis:118px}
 .header nav{font-size:14px;gap:24px;justify-content:flex-start}
 .header nav a:last-child{display:inline-block}
 .header-cta{font-size:14px}
 .hero.hero-cinematic{display:flex;min-height:0;flex-direction:column}
 .hero-cinematic .hero-film{order:0;height:340px;min-height:340px;padding:35px 25px 0;margin:0;inset:auto;overflow:hidden}
 .hero-cinematic .hero-film video{height:100%;width:100%;max-width:360px;max-height:100%;transform:none;mask-image:radial-gradient(ellipse 69% 63% at 50% 48%,#000 42%,#000d 62%,transparent 99%);-webkit-mask-image:radial-gradient(ellipse 69% 63% at 50% 48%,#000 42%,#000d 62%,transparent 99%)}
 .hero-cinematic .hero-brand-mark{width:130px;top:8px}
 .hero-cinematic .hero-film .video-toggle{top:20px;bottom:auto;right:6%;width:44px;height:44px}
 .hero-cinematic .film-caption{display:none}
 .hero-cinematic .hero-copy{order:1;min-height:0;width:100%;padding:0 6% 28px;margin-top:-24px;pointer-events:auto;justify-content:flex-start}
 .hero-cinematic .hero-copy>.eyebrow{font-size:12px;letter-spacing:.09em;text-shadow:none}
 .hero-cinematic .hero-copy>.eyebrow .rule{width:20px;margin-right:8px}
 .hero-cinematic h1{font-size:clamp(48px,12.6vw,78px);margin:18px 0;line-height:1.03;padding:0}
 .hero-cinematic .hero-description{font-size:16px;line-height:1.7}
 .hero-cinematic .hero-copy>.button{margin-top:24px;min-height:52px;padding:14px 19px;font-size:14px}
 .hero-cinematic .hero-bottom{margin-top:27px;padding:0;flex-direction:row;align-items:center;font-size:12px;gap:12px;letter-spacing:0;max-width:none}
 .hero-cinematic .hero-bottom a{font-size:14px}
 .compact-site .home-overview.section-pad{padding:36px 6%}
 .route-grid{grid-template-columns:1fr;gap:27px;margin-top:23px}
 .route-card.route-feature{display:grid;grid-template-columns:minmax(105px,.75fr) minmax(0,1fr);column-gap:20px;align-content:center;padding:0 0 27px}
 .route-feature .route-visual{grid-column:1;grid-row:1/3;aspect-ratio:4/5;margin:0;height:100%;max-height:200px;min-height:155px;align-self:center}
 .route-feature h2{grid-column:2;align-self:end;font-size:23px;padding:0;margin:10px 0}
 .route-feature p{grid-column:2;padding:0 0 18px;font-size:16px;line-height:1.65}
 .route-card.route-feature>span{bottom:25px;right:0}
 .route-links{margin-top:5px;gap:0 23px}
 .route-links .route-card{padding:23px 17px 23px 0}
 .route-links h2{font-size:20px}
 .route-links p{font-size:14px}
 .page-intro h1{font-size:clamp(36px,8vw,53px);line-height:1.16}
 .page-intro>p:last-child{font-size:16px}
 .compact-site .treatment-copy>p,.about-copy>p{font-size:16px}
 .portrait-display{width:calc(100% - 16px);max-width:420px;margin:0 auto 0 0}
 .compact-cta{padding:34px 6%}
 .footer{font-size:12px}
 .footer p{font-size:12px}
}
@media(max-width:380px){.hero-cinematic .hero-copy>.eyebrow{letter-spacing:.035em}.hero-cinematic .hero-copy>.eyebrow .rule{display:none}.hero-cinematic .hero-bottom{flex-wrap:wrap}.route-card.route-feature{column-gap:16px}.route-feature h2{font-size:20px}.route-links{grid-template-columns:1fr}.route-links .route-card p{max-width:none}}
@media(max-width:700px) and (max-height:740px){.hero-cinematic .hero-film{height:275px;min-height:275px}.hero-cinematic .hero-film video{height:100%}.hero-cinematic .hero-copy{margin-top:-12px}.hero-cinematic .hero-bottom{margin-top:20px}}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 ::view-transition-old(root),::view-transition-new(root){animation:none}
 .hero-cinematic .hero-copy>.eyebrow,.cinema-line>span,.hero-cinematic .hero-description,.hero-cinematic .hero-copy>.button,.hero-cinematic .hero-bottom{animation:none;transform:none;opacity:1}
 .hero-cinematic .hero-film video{transform:none}
 .route-feature .route-visual>img,.route-feature .route-visual>.lens-image,.button,.button span,.route-card>span,.header nav a:after,.js .reveal,.artch-arrive{transition:none}
 .route-feature:hover .route-visual>img,.route-feature:hover .route-visual>.lens-image,.button:hover,.button:hover span,.route-card:hover>span{transform:none}
}

/* Keep the original brow detail clear in both card proportions. */
.route-results .route-visual img{object-position:50% 48%;filter:none}
.route-results .route-visual:after{background:none;box-shadow:none}
@media(min-width:701px) and (min-resolution:2.5dppx){.hero-cinematic .hero-film video{max-width:360px;max-height:506px}}