/* pearl.css — the glossy white look, loaded last on every page.
   Idea: polished porcelain in desert light. A cool pearl ground (not cream), white surfaces with a soft top highlight
   like glazed tile, black ink from the logo, and the logo's sunset only where light should be: the logo itself,
   one hairline, the step numbers. Type: Clash Display for headlines, Satoshi for text (Fontshare); the slab
   wordmark lives only in the logo. Cards are not one kit: the booking card floats, rooms are photographs,
   credentials are a ruled band, steps are a sequence. */
:root{
  --px-pearl:#F3F4F2;--px-porcelain:#FFFFFF;--px-mist:#E8EAE7;--px-ink:#121416;--px-graphite:#555B62;--px-line:rgba(18,20,22,.09);
  --px-amber:#A9520F;--px-sunset:linear-gradient(90deg,#E5332A 0%,#F27C1F 50%,#F8C02C 100%);
  --px-gloss:linear-gradient(180deg,#FFFFFF 0%,#FBFBFA 55%,#F6F7F5 100%);
  --px-lift:inset 0 1px 0 rgba(255,255,255,.95),0 1px 2px rgba(18,20,22,.05),0 10px 30px rgba(18,20,22,.07);
  --px-ease:cubic-bezier(.22,.8,.24,1);
  color-scheme:light;
}
body{background:radial-gradient(120% 60% at 50% 0%,#FAFBFA 0%,var(--px-pearl) 60%) fixed,var(--px-pearl);color:var(--px-ink)}
.grain{display:none}
h1,h2,h3{font-family:var(--font-display);text-transform:none;font-variation-settings:normal;text-wrap:balance}
h2{font-weight:500;font-size:clamp(2rem,3.6vw,3.3rem);line-height:1.04;letter-spacing:-.032em}
h3{font-weight:600;letter-spacing:-.012em}
::selection{background:#F8C02C;color:#121416}
:focus-visible{outline:2px solid var(--px-amber);outline-offset:3px}

/* ---------- buttons: glazed black, the logo's ink ---------- */
.btn{--bg:var(--px-ink);--fg:#fff;background:linear-gradient(180deg,#2B2F34 0%,#121416 58%,#0B0C0E 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 10px 24px -12px rgba(18,20,22,.55);font-weight:600}
.btn:hover{background:linear-gradient(180deg,#363B41 0%,#17191C 58%,#0B0C0E 100%)}
.btn .btn-ico{background:rgba(255,255,255,.12)}
.btn-primary,.btn-primary:hover{--bg:var(--px-ink)}
.btn-ghost{--fg:var(--px-ink);background:var(--px-gloss);box-shadow:inset 0 0 0 1px var(--px-line),0 6px 18px -12px rgba(18,20,22,.25)}
.btn-ghost:hover{background:#fff}
.btn-ghost .btn-ico{background:rgba(18,20,22,.06)}

/* ---------- nav: a frosted white bar on every page, also over the film ---------- */
.nav{background:rgba(255,255,255,.8);color:var(--px-ink);box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(18,20,22,.05),0 18px 50px -26px rgba(18,20,22,.35);padding:7px 8px 7px 16px}
.nav-dark .nav{background:rgba(255,255,255,.8);color:var(--px-ink)}
.nav-links a,.nav-dark .nav-links a{color:var(--px-graphite)}
.nav-links a:hover,.nav-dark .nav-links a:hover{color:var(--px-ink);background:rgba(18,20,22,.05)}
.nav-logo{font-size:1rem}
.nav .ds-mark{height:34px}
.nav .ds-words b{font-size:15px}.nav .ds-words small{font-size:7.5px}
.btn-nav{--bg:transparent;--fg:var(--px-ink);background:transparent;box-shadow:inset 0 0 0 1px var(--px-line)}
.btn-nav .btn-ico{background:rgba(18,20,22,.06)}
.btn-nav-book{--fg:#fff;background:linear-gradient(180deg,#2B2F34 0%,#121416 60%);box-shadow:inset 0 1px 0 rgba(255,255,255,.16)}
.btn-nav-book .btn-ico{background:rgba(255,255,255,.14)}
.nav-dark .btn-est{--bg:transparent;--fg:var(--px-ink)}
.nav-burger{background:rgba(18,20,22,.06);color:var(--px-ink)}
.menu{background:rgba(247,248,246,.9)}
@media (max-width:480px){.nav .ds-words small{display:none}.nav .ds-mark{height:30px}.nav .ds-words b{font-size:14px}}

/* ---------- mobile call bar ---------- */
.callbar{background:rgba(255,255,255,.86);box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(18,20,22,.06),0 16px 40px -18px rgba(18,20,22,.45)}
.callbar a.callbar-call{color:var(--px-ink)!important;background:transparent!important;box-shadow:inset 0 0 0 1px rgba(18,20,22,.14)!important}
.callbar a.callbar-quote[data-book]{background:linear-gradient(180deg,#2B2F34,#121416)!important;color:#fff!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.16)!important}

/* ---------- the form ---------- */
.form-shell{background:transparent;box-shadow:none;padding:0;border-radius:0}
.form-core{background:var(--px-gloss);box-shadow:var(--px-lift),inset 0 0 0 1px rgba(18,20,22,.05);border-radius:22px}
.field label{text-transform:none;letter-spacing:0;font-size:.86rem;color:var(--px-ink)}
.field input,.field select{background:#F5F6F4;box-shadow:inset 0 0 0 1px rgba(18,20,22,.08),inset 0 1px 2px rgba(18,20,22,.04)}
.field input:focus,.field select:focus{background:#fff;box-shadow:inset 0 0 0 1.5px var(--px-ink),0 0 0 4px rgba(242,124,31,.16)}

/* ---------- the film hero on white pages ---------- */
.cn-hero{background:#0E1012}
.cn-btn{background:linear-gradient(180deg,#FFFFFF,#EEEFEC);box-shadow:inset 0 1px 0 #fff,0 10px 30px -12px rgba(0,0,0,.6);color:var(--px-ink)}
.cn-facts li::before{background:var(--px-sunset)}
.cn-still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* the end of the film: the logo builds itself over the finished room, piece by piece, then the windows light up */
.cn-endlogo{position:absolute;z-index:1;left:50%;top:clamp(96px,20vh,220px);transform:translateX(-50%);width:clamp(220px,24vw,360px);font-size:clamp(26px,2.9vw,44px);pointer-events:none;opacity:0;transition:opacity .7s ease}
.cn-endlogo::before{content:'';position:absolute;inset:-34% -30%;background:radial-gradient(closest-side,rgba(10,12,14,.5),rgba(10,12,14,0));z-index:-1}
.cn-endlogo .ds-logo{width:100%}
.cn-endlogo .ds-words b{text-shadow:0 2px 18px rgba(0,0,0,.45)}
.cn-endlogo .ds-sun{filter:drop-shadow(0 0 18px rgba(246,150,40,.75));animation:none}
.cn-endlogo .ds-win rect{fill:#3A3F45;filter:none;animation:none;opacity:1;transition:fill 1.4s ease,filter 1.4s ease}
.cn-endlogo .ds-sun,.cn-endlogo .ds-peaks,.cn-endlogo .ds-cactus,.cn-endlogo .ds-house,.cn-endlogo .ds-ground,.cn-endlogo .ds-words b,.cn-endlogo .ds-words small{transform-box:fill-box;opacity:0}
.cn-endlogo .ds-sheen{animation:none}
.cn-endlogo.is-build,.cn-endlogo.is-built{opacity:1}
.cn-endlogo.is-build .ds-sun{transform-origin:50% 100%;animation:pxSun 1.1s cubic-bezier(.2,.8,.2,1) .1s forwards}
.cn-endlogo.is-build .ds-peaks{transform-origin:50% 100%;animation:pxRise .9s cubic-bezier(.2,.8,.2,1) .7s forwards}
.cn-endlogo.is-build .ds-cactus{transform-origin:50% 100%;animation:pxPop .6s cubic-bezier(.3,1.5,.5,1) 1.15s forwards}
.cn-endlogo.is-build .ds-house{transform-origin:50% 100%;animation:pxRise .9s cubic-bezier(.2,.8,.2,1) 1.35s forwards}
.cn-endlogo.is-build .ds-ground{transform-origin:50% 50%;animation:pxDraw .7s cubic-bezier(.2,.8,.2,1) 1.75s forwards}
.cn-endlogo.is-build .ds-words b{animation:pxWord .9s cubic-bezier(.2,.8,.2,1) 2.05s forwards}
.cn-endlogo.is-build .ds-words small{animation:pxFade .8s ease 2.45s forwards}
.cn-endlogo.is-build .ds-win rect{animation:pxGlow 1.6s ease forwards}
.cn-endlogo.is-build .ds-win rect:nth-child(1){animation-delay:2.9s}.cn-endlogo.is-build .ds-win rect:nth-child(2){animation-delay:3.1s}.cn-endlogo.is-build .ds-win rect:nth-child(3){animation-delay:3.3s}.cn-endlogo.is-build .ds-win rect:nth-child(4){animation-delay:3.5s}.cn-endlogo.is-build .ds-win rect:nth-child(5){animation-delay:3.7s}.cn-endlogo.is-build .ds-win rect:nth-child(6){animation-delay:3.9s}.cn-endlogo.is-build .ds-win rect:nth-child(7){animation-delay:4.1s}.cn-endlogo.is-build .ds-win rect:nth-child(8){animation-delay:4.3s}
.cn-endlogo.is-built .ds-sun,.cn-endlogo.is-built .ds-peaks,.cn-endlogo.is-built .ds-cactus,.cn-endlogo.is-built .ds-house,.cn-endlogo.is-built .ds-ground,.cn-endlogo.is-built .ds-words b,.cn-endlogo.is-built .ds-words small{opacity:1}
.cn-endlogo.is-built .ds-win rect{fill:#FFD27A;filter:drop-shadow(0 0 2.2px rgba(255,190,90,.95))}
.cn-endlogo.is-out{opacity:0}
@keyframes pxSun{from{opacity:0;transform:translateY(22%) scale(.6)}to{opacity:1;transform:none}}
@keyframes pxRise{from{opacity:0;transform:translateY(26%)}to{opacity:1;transform:none}}
@keyframes pxPop{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:none}}
@keyframes pxDraw{from{opacity:1;transform:scaleX(0)}to{opacity:1;transform:none}}
@keyframes pxWord{from{opacity:0;transform:translateY(40%);letter-spacing:.14em}to{opacity:1;transform:none;letter-spacing:.02em}}
@keyframes pxFade{to{opacity:.82}}
@keyframes pxGlow{0%{fill:#3A3F45;filter:none}60%{fill:#FFD27A;filter:drop-shadow(0 0 4px rgba(255,190,90,1))}100%{fill:#FFD27A;filter:drop-shadow(0 0 2.2px rgba(255,190,90,.95))}}
@media (max-width:760px){.cn-endlogo{top:clamp(88px,15vh,140px);width:min(62vw,250px);font-size:clamp(22px,7vw,30px)}}
@media (prefers-reduced-motion:reduce){.cn-endlogo *{animation:none!important}}

/* ---------- home sections ---------- */
.px-label{margin:0 0 14px;font-size:.92rem;font-weight:600;color:var(--px-amber);display:flex;align-items:center;gap:10px}
.px-label::before{content:'';width:22px;height:2px;border-radius:2px;background:var(--px-sunset)}
.px-lede{font-size:clamp(1.02rem,1.25vw,1.18rem);line-height:1.6;color:var(--px-graphite);max-width:56ch;margin:16px 0 0}
.px-note{margin:22px 0 0;font-size:.82rem;color:var(--px-graphite);opacity:.85}
.px-sec{padding:clamp(72px,10vw,140px) 0}
.px-sec-alt{background:linear-gradient(180deg,#ECEEEB 0%,#F1F2F0 100%);border-top:1px solid rgba(255,255,255,.8);border-bottom:1px solid var(--px-line)}
.px-head{max-width:760px;margin-bottom:clamp(36px,5vw,64px)}
.px-head-row{max-width:none;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.px-more{font-weight:600;border-bottom:1.5px solid var(--px-ink);padding-bottom:2px}
.px-more::after{content:' \203A'}

/* the booking card: floats up over the bottom of the film */
.px-book{position:relative;z-index:3;padding:clamp(40px,5vw,80px) 0 clamp(40px,5vw,72px)}
.px-book-card{display:grid;grid-template-columns:1fr minmax(0,500px);gap:clamp(28px,4vw,64px);align-items:start;padding:clamp(24px,4vw,56px);border-radius:30px;background:linear-gradient(180deg,rgba(255,255,255,.96) 0%,rgba(248,249,247,.96) 100%);box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(18,20,22,.05),0 24px 70px rgba(18,20,22,.14);width:min(100% - 32px,1180px)}
.px-book-copy{padding-top:8px}
.px-book-copy h2{max-width:14ch}
.px-steps{list-style:none;counter-reset:s;margin:30px 0 0;padding:0;display:grid;gap:16px}
.px-steps li{counter-increment:s;position:relative;padding-left:46px;font-size:.98rem;line-height:1.5;color:var(--px-graphite)}
.px-steps li::before{content:counter(s);position:absolute;left:0;top:-2px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:.85rem;font-weight:700;color:var(--px-ink);background:var(--px-gloss);box-shadow:inset 0 0 0 1px var(--px-line),0 4px 10px -6px rgba(18,20,22,.3)}
.px-steps b{display:block;color:var(--px-ink);font-weight:600}
.px-call{margin:28px 0 0;color:var(--px-graphite)}
.px-call a{color:var(--px-ink);font-weight:600;border-bottom:1.5px solid rgba(18,20,22,.25)}
.px-book .form-core{box-shadow:inset 0 0 0 1px rgba(18,20,22,.06),0 1px 2px rgba(18,20,22,.04)}
.px-book .form-trust,.px-book .form-next{display:none}
.px-creds + .px-sec{padding-top:clamp(48px,6vw,88px)}
.px-book .form-title{font-size:1.4rem;letter-spacing:-.015em}
@media (max-width:900px){.px-book-card{grid-template-columns:minmax(0,1fr)}.px-book{padding-top:24px}}
@media (max-width:520px){.px-book-card{padding:20px 16px;border-radius:24px;width:calc(100% - 20px)}.px-book .form-core{padding:18px}}

/* credentials: one ruled band */
.px-creds{padding:8px 0 clamp(40px,5vw,72px)}
.px-creds-list{list-style:none;margin:0 auto;padding:22px 0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--px-line);border-bottom:1px solid var(--px-line)}
.px-creds-list li{display:flex;align-items:center;gap:12px;padding:6px 18px;border-left:1px solid var(--px-line)}
.px-creds-list li:first-child{border-left:0;padding-left:0}
.px-creds-list b{display:block;font-size:.95rem;font-weight:600}
.px-creds-list span{display:block;font-size:.82rem;color:var(--px-graphite);line-height:1.35}
.px-ico{width:26px;height:26px;flex:none;fill:none;stroke:var(--px-ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:1000px){.px-creds-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 0}.px-creds-list li{border-left:0;padding-left:0}}
@media (max-width:420px){.px-creds-list{grid-template-columns:minmax(0,1fr)}}

/* the rooms: photographs first, two big then four */
.px-rooms{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.px-room{grid-column:span 3;display:flex;flex-direction:column;border-radius:22px;overflow:hidden;background:var(--px-gloss);box-shadow:var(--px-lift),inset 0 0 0 1px rgba(18,20,22,.04);transition:transform .5s var(--px-ease),box-shadow .5s var(--px-ease)}
.px-room-lg{grid-column:span 6}
.px-room:hover{transform:translateY(-4px);box-shadow:inset 0 1px 0 #fff,0 18px 44px rgba(18,20,22,.13)}
.px-room figure{margin:0;aspect-ratio:16/10;overflow:hidden;background:var(--px-mist)}
.px-room-lg figure{aspect-ratio:16/9}
.px-room img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--px-ease)}
.px-room:hover img{transform:scale(1.035)}
.px-room-in{padding:20px 22px 22px;display:flex;flex-direction:column;gap:6px;flex:1}
.px-room-in h3{font-size:1.18rem}
.px-room-in p{margin:0;font-size:.95rem;color:var(--px-graphite);line-height:1.5}
.px-room-meta{margin-top:auto;padding-top:12px;font-size:.88rem;font-weight:600;display:flex;align-items:center;gap:10px}
.px-room-meta i{width:4px;height:4px;border-radius:50%;background:#F27C1F}
@media (max-width:1100px){.px-room{grid-column:span 6}}
@media (max-width:900px){.px-rooms{grid-template-columns:repeat(2,minmax(0,1fr))}.px-room,.px-room-lg{grid-column:span 1}}
@media (max-width:560px){.px-rooms{grid-template-columns:minmax(0,1fr)}}

/* split: picture beside words */
.px-split{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(32px,5vw,88px);align-items:center}
.px-split-top{align-items:start;grid-template-columns:1fr 1.15fr}
.px-split-media{margin:0;position:relative;border-radius:26px;overflow:hidden;box-shadow:0 18px 50px rgba(18,20,22,.14)}
.px-split-media img{width:100%;aspect-ratio:4/3.4;object-fit:cover}
.px-split-media figcaption{position:absolute;left:14px;bottom:12px;font-size:.75rem;color:#fff;background:rgba(18,20,22,.45);padding:4px 10px;border-radius:999px;backdrop-filter:blur(8px)}
.px-checks{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:14px}
.px-checks li{position:relative;padding-left:34px;line-height:1.5}
.px-checks li::before{content:'';position:absolute;left:0;top:2px;width:22px;height:22px;border-radius:50%;background:var(--px-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F8C02C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center/12px no-repeat;box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
@media (max-width:900px){.px-split,.px-split-top{grid-template-columns:minmax(0,1fr)}}

/* the process: a real sequence, so numbered, joined by one sunset line */
.px-process{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,36px);position:relative}
.px-step figure{margin:0 0 22px;border-radius:20px;overflow:hidden;aspect-ratio:3/2;box-shadow:0 12px 32px rgba(18,20,22,.12)}
.px-step img{width:100%;height:100%;object-fit:cover}
.px-step-n{display:inline-block;font-size:.85rem;font-weight:700;letter-spacing:.04em;background:var(--px-sunset);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:6px}
.px-step h3{font-size:1.3rem;margin-bottom:8px}
.px-step p{margin:0;color:var(--px-graphite);line-height:1.55}
@media (max-width:900px){.px-process{grid-template-columns:minmax(0,1fr);gap:40px}}

/* the work: one wide picture and five around it */
.px-work{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(150px,16vw,240px);gap:clamp(10px,1.2vw,16px)}
.px-work figure{margin:0;border-radius:18px;overflow:hidden;background:var(--px-mist)}
.px-work img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--px-ease)}
.px-work figure:hover img{transform:scale(1.04)}
.px-work-0{grid-column:span 2;grid-row:span 2}
.px-work-3,.px-work-4,.px-work-5{grid-column:span 2}
@media (max-width:700px){.px-work{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:42vw}.px-work-0{grid-column:span 2;grid-row:span 1}.px-work-3{grid-column:span 2}}

/* one room, four ways */
.px-styles{display:grid;grid-template-columns:minmax(0,320px) 1fr;gap:clamp(20px,3vw,48px);align-items:start}
.px-tabs{display:grid;gap:8px}
.px-tabs .cx-tab{text-align:left;border:0;cursor:pointer;padding:16px 18px;border-radius:16px;background:transparent;box-shadow:inset 0 0 0 1px var(--px-line);transition:background .3s,box-shadow .3s;color:var(--px-ink)}
.px-tabs .cx-tab b{display:block;font-weight:600}
.px-tabs .cx-tab span{display:block;font-size:.86rem;color:var(--px-graphite);margin-top:2px}
.px-tabs .cx-tab.is-on{background:var(--px-gloss);box-shadow:var(--px-lift),inset 0 0 0 1px rgba(18,20,22,.06)}
.px-tabs .cx-tab.is-on b::after{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;margin-left:8px;vertical-align:middle;background:#F27C1F}
.px-style-media{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:16/10;background:var(--px-mist);box-shadow:0 18px 50px rgba(18,20,22,.14)}
.px-style-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s var(--px-ease)}
.px-style-media img.is-on{opacity:1}
@media (max-width:900px){.px-styles{grid-template-columns:minmax(0,1fr)}.px-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* cities */
.px-cities{list-style:none;margin:0;padding:0;columns:3;column-gap:28px}
.px-cities li{break-inside:avoid;border-bottom:1px solid var(--px-line)}
.px-cities a{display:flex;justify-content:space-between;padding:12px 0;font-weight:500;transition:color .2s}
.px-cities a::after{content:'\203A';color:var(--px-graphite)}
.px-cities a:hover{color:var(--px-amber)}
@media (max-width:700px){.px-cities{columns:2}}

/* questions */
.px-faq details{border-bottom:1px solid var(--px-line)}
.px-faq details:first-child{border-top:1px solid var(--px-line)}
.px-faq summary{list-style:none;cursor:pointer;padding:20px 40px 20px 0;font-weight:600;font-size:1.05rem;position:relative}
.px-faq summary::-webkit-details-marker{display:none}
.px-faq summary::after{content:'';position:absolute;right:4px;top:50%;width:12px;height:12px;margin-top:-8px;border-right:1.5px solid var(--px-ink);border-bottom:1.5px solid var(--px-ink);transform:rotate(45deg);transition:transform .3s var(--px-ease)}
.px-faq details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.px-faq p{margin:0 0 22px;color:var(--px-graphite);max-width:62ch}
.px-answer .answer{background:var(--px-gloss);border-left:0;box-shadow:var(--px-lift),inset 0 0 0 1px rgba(18,20,22,.05);border-radius:18px;margin-top:28px;position:relative;overflow:hidden}
.px-answer .answer::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,#E5332A,#F27C1F,#F8C02C)}
.px-answer .answer p{font-size:.95rem;color:var(--px-graphite)}

/* the price estimator band */
.px-estimate .est-band{background:var(--px-gloss);box-shadow:var(--px-lift),inset 0 0 0 1px rgba(18,20,22,.05);border-radius:28px}
.px-estimate .serif-i{font-family:var(--font-body);font-style:normal;font-weight:500;color:var(--px-ink)}

/* the close */
.px-close{padding:clamp(40px,6vw,96px) 0 clamp(72px,9vw,120px)}
.px-close-card{text-align:center;padding:clamp(40px,6vw,80px) clamp(20px,4vw,64px);border-radius:34px;background:radial-gradient(80% 90% at 50% 0%,#FFFFFF 0%,#F6F7F5 70%,#EEF0ED 100%);box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(18,20,22,.05),0 24px 70px rgba(18,20,22,.12)}
.px-close-logo{width:min(220px,60vw);font-size:26px;margin:0 auto 28px}
.px-close-logo .ds-sun{filter:drop-shadow(0 0 14px rgba(246,150,40,.6))}
.px-close-card h2{margin:0 auto}
.px-close-card p{color:var(--px-graphite);max-width:52ch;margin:16px auto 0}
.px-close-ctas{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:28px}

/* ---------- footer ---------- */
.footer{background:linear-gradient(180deg,#EDEFEC 0%,#E7E9E6 100%);border-top:1px solid var(--px-line);color:var(--px-graphite)}
.footer h4{color:var(--px-ink)}
.ds-logo-foot{margin-bottom:18px}.ds-logo-foot .ds-mark{height:44px}

/* ---------- the shared cinema sections, in white (service and city pages) ---------- */
.cn-intro,.cn-gal,.cn-proof,.cn-pro,.cn-strip,.cn-after{background:transparent;color:var(--px-ink);border-color:var(--px-line)}
.cn-gal .cn-kicker,.cn-proof .cn-kicker,.cn-pro .cn-kicker,.cn-strip span{color:var(--px-amber)}
.cn-h2{color:var(--px-ink)}
.cn-sub{color:var(--px-graphite)}
.cn-review{background:var(--px-gloss);border-color:var(--px-line);box-shadow:var(--px-lift)}
.cn-strip b{color:var(--px-ink);font-family:var(--font-body);font-weight:500}

/* accent words on white use the deep amber, so they stay readable */
.serif-i,.step-day,.eyebrow{color:var(--px-amber)}
.serif-i{font-family:var(--font-body);font-style:normal;font-weight:500}
.eyebrow::before{background:var(--px-sunset);height:2px;border-radius:2px}
@media (max-width:480px){.nav-ctas .btn-nav:not(.btn-nav-book){display:none}} /* phones: the call bar has Call; the logo gets the room */

/* the quick facts above the footer: a quiet reference card, not a spreadsheet */
.facts .wrap{border-top:0;padding:28px clamp(20px,3vw,36px);border-radius:22px;background:var(--px-gloss);box-shadow:var(--px-lift),inset 0 0 0 1px rgba(18,20,22,.05)}
.facts .eyebrow{text-transform:none;letter-spacing:0;font-size:.92rem}
.facts-list dt{text-transform:none;letter-spacing:0;font-size:.86rem;color:var(--px-ink)}
.facts{padding-bottom:clamp(40px,5vw,72px)}
.cn-hero.is-film .cn-credit{top:84px;bottom:auto;left:auto;right:clamp(18px,5vw,72px)} /* the booking card covers the bottom of the film: the concept label sits up top */
.ds-logo-light .ds-peaks .ds-ink{fill:#2A221C} /* the shadow side of the peaks stays dark, like the original logo */

/* the hero headline: two balanced lines, like a printed ad, not one long strip */
.cn-hero.is-film .cn-title-q{text-wrap:balance;max-width:13.5em;font-size:clamp(36px,4vw,60px);line-height:1.02}
.cn-hero.is-film .cn-lede{max-width:50ch}
@media (max-width:760px){.cn-hero.is-film .cn-title-q{font-size:clamp(32px,9.4vw,42px)}}
/* when the logo builds at the end of the film, the room behind it softens and dims so the logo reads */
.cn-hero.is-film .cn-video{transition:filter 1.1s ease,transform 1.6s cubic-bezier(.2,.8,.2,1)}
.cn-hero.is-outro .cn-video{filter:blur(14px) brightness(.72) saturate(1.05);transform:scale(1.05)}
.cn-hero.is-outro .cn-endlogo::before{background:radial-gradient(closest-side,rgba(10,12,14,.3),rgba(10,12,14,0))}
@media (min-width:761px){.cn-endlogo{left:auto;right:clamp(40px,8vw,150px);top:50%;transform:translateY(-50%);width:clamp(240px,24vw,380px)}} /* desktop: the logo takes the right half, clear of the words on the left */
@media (min-width:761px) and (max-width:1100px){.cn-endlogo{right:32px;width:200px;font-size:24px}}

/* the three numbers beside the end logo: they come in one by one once the windows are lit */
.cn-endlogo.has-stats{display:flex;align-items:center;gap:clamp(22px,2.6vw,40px);width:auto}
.cn-endlogo.has-stats .cn-endmark{width:clamp(220px,21vw,330px);flex:none}
.cn-endstats{list-style:none;margin:0;padding:0 clamp(22px,2.6vw,40px) 0 0;display:grid;gap:18px;text-align:right;border-right:1px solid rgba(255,255,255,.32)}
.cn-endstats li{opacity:0;transform:translateX(-14px)}
.cn-endstats b{display:block;font-family:var(--font-body);font-weight:300;font-size:clamp(28px,2.5vw,40px);line-height:1;letter-spacing:-.025em;color:#fff;white-space:nowrap;text-shadow:0 2px 16px rgba(0,0,0,.45)}
.cn-endstats b i{font-style:normal;font-size:.42em;margin-left:8px;color:#F8C02C;letter-spacing:.08em;vertical-align:.32em}
.cn-endstats span{display:block;margin-top:6px;font-size:12.5px;color:rgba(255,255,255,.8);white-space:nowrap;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.cn-endlogo.is-build .cn-endstats li{animation:pxStat .45s cubic-bezier(.2,.9,.25,1) forwards;animation-delay:calc(2.1s + var(--k) * .12s)}
.cn-endlogo.is-built .cn-endstats li{opacity:1;transform:none}
@keyframes pxStat{to{opacity:1;transform:none}}
@media (max-width:1100px){.cn-endlogo.has-stats{flex-direction:column-reverse;gap:16px}.cn-endstats{display:flex;gap:clamp(14px,4vw,28px);padding:0;border:0;text-align:center}.cn-endstats li{transform:translateY(10px)}.cn-endstats b{font-size:clamp(20px,5.6vw,28px)}.cn-endstats span{font-size:10.5px;margin-top:4px}}
@media (max-width:760px){.cn-endlogo.has-stats{width:auto;top:clamp(80px,12vh,120px)}.cn-endlogo.has-stats .cn-endmark{width:min(48vw,190px)}}
@media (min-width:761px) and (max-width:1100px){.cn-endlogo.has-stats .cn-endmark{width:190px}}

/* the second section: the desert at first light behind the consultation card */
.px-book{background:linear-gradient(180deg,rgba(243,244,242,0) 0%,rgba(243,244,242,0) 72%,var(--px-pearl) 100%),url(/media/desert-bg.jpg) center 62%/cover no-repeat;padding:clamp(64px,8vw,140px) 0 clamp(72px,8vw,140px)}
.px-book-card{background:linear-gradient(180deg,rgba(255,255,255,.9) 0%,rgba(250,250,248,.86) 100%);-webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1);box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(255,255,255,.5),0 30px 80px rgba(60,40,20,.22)}
@media (max-width:900px){.px-book{padding:28px 0 56px;background-position:center 70%}}
/* laptops (1101–1399): the logo over a row of the three numbers, still in the right half */
@media (min-width:1101px) and (max-width:1399px){.cn-endlogo.has-stats{flex-direction:column-reverse;gap:18px}.cn-endlogo.has-stats .cn-endmark{width:220px}.cn-endstats{display:flex;gap:22px;padding:0;border:0;text-align:center}.cn-endstats li{transform:translateY(10px)}.cn-endstats b{font-size:26px}.cn-endstats span{font-size:11px}}
/* small laptops and tablets (761–1100): centered above the words */
@media (min-width:761px) and (max-width:1100px){.cn-endlogo.has-stats{left:50%;right:auto;top:clamp(92px,14vh,140px);transform:translateX(-50%)}}
@media (max-width:760px) and (max-height:760px){.cn-endlogo.has-stats{top:74px;gap:10px}.cn-endlogo.has-stats .cn-endmark{width:min(36vw,140px)}.cn-endlogo .ds-words{gap:3px}.cn-endstats b{font-size:18px}.cn-endstats span{font-size:9.5px}} /* short phones: smaller, so it clears the headline */
@media (max-width:760px) and (max-height:760px){.cn-hero.is-film .cn-hero-in{transition:opacity .6s ease}.cn-hero.is-outro .cn-hero-in{opacity:0;pointer-events:none}.cn-endlogo.has-stats{top:50%;transform:translate(-50%,-50%)}} /* short phones: the words step aside while the logo plays (the call bar stays) */

/* "how it goes" inside the request card: three rows, picture beside the words */
.px-flow{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:18px}
.px-flow-step{display:grid;grid-template-columns:150px minmax(0,1fr);gap:18px;align-items:center}
.px-flow-step figure{margin:0;border-radius:14px;overflow:hidden;aspect-ratio:3/2;box-shadow:0 8px 22px rgba(18,20,22,.12)}
.px-flow-step img{width:100%;height:100%;object-fit:cover}
.px-flow-step .px-step-n{margin-bottom:2px}
.px-flow-step h3{font-size:1.08rem;margin:0 0 4px}
.px-flow-step p{margin:0;font-size:.93rem;line-height:1.5;color:var(--px-graphite)}
.px-book-copy .px-note{margin-top:16px}
@media (max-width:520px){.px-flow-step{grid-template-columns:104px minmax(0,1fr);gap:14px}.px-flow-step p{font-size:.88rem}}
/* the reveal (cine.js, wide screens): the form shows in the middle of the card, slides to its place, then the steps come in */
.px-book.is-armed .px-book-form{opacity:0;transform:translateX(var(--dx,0px)) translateY(20px) scale(.97)}
.px-book.is-armed .px-book-copy>*,.px-book.is-armed .px-flow-step{opacity:0;transform:translateX(-26px)}
.px-book.is-in .px-book-form{animation:pxFormIn 2.4s cubic-bezier(.22,.8,.24,1) forwards}
@keyframes pxFormIn{0%{opacity:0;transform:translateX(var(--dx,0px)) translateY(20px) scale(.97)}26%{opacity:1;transform:translateX(var(--dx,0px)) translateY(0) scale(1)}36%{opacity:1;transform:translateX(var(--dx,0px))}100%{opacity:1;transform:none}}
.px-book.is-in .px-book-copy>*,.px-book.is-in .px-flow-step{opacity:1;transform:none;transition:opacity .9s ease,transform 1.1s cubic-bezier(.22,.8,.24,1)}
.px-book.is-in .px-book-copy>:nth-child(1){transition-delay:1.5s}.px-book.is-in .px-book-copy>:nth-child(2){transition-delay:1.65s}.px-book.is-in .px-book-copy>:nth-child(3){transition-delay:1.75s}
.px-book.is-in .px-flow-step{transition-delay:calc(1.85s + var(--k) * .22s)}
.px-book.is-in .px-book-copy>:nth-child(n+4){transition-delay:2.5s}
@media (max-width:900px){.px-book-form{order:-1}.px-book-copy{padding-top:0}} /* phones: the form first, how it goes under it */

/* the headline follows the film: each caption rises in as the last one lifts away; the grid keeps the height steady */
.cn-cap-track{display:grid;align-items:end}
.cn-cap{grid-area:1/1;opacity:0;transform:translateY(.32em);filter:blur(8px);transition:opacity .7s ease,transform .9s cubic-bezier(.2,.8,.2,1),filter .7s ease}
.cn-cap.is-past{transform:translateY(-.28em)}
.cn-cap.is-on{opacity:1;transform:none;filter:none}
@media (prefers-reduced-motion:reduce){.cn-cap{transition:none;filter:none}}

/* the credentials, lined up along the bottom of the hero on a dark glass strip */
.cn-bottom{position:absolute;left:0;right:0;bottom:0;z-index:2;background:linear-gradient(180deg,rgba(11,13,16,.18),rgba(11,13,16,.55));-webkit-backdrop-filter:blur(12px) saturate(1.1);backdrop-filter:blur(12px) saturate(1.1);border-top:1px solid rgba(255,255,255,.14)}
.cn-creds{list-style:none;margin:0;padding:16px clamp(18px,5vw,72px);display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.cn-creds li{display:flex;align-items:center;gap:12px;padding:2px 18px;border-left:1px solid rgba(255,255,255,.16);min-width:0}
.cn-creds li:first-child{border-left:0;padding-left:0}
.cn-creds .px-ico{stroke:#fff;width:24px;height:24px;opacity:.92}
.cn-creds b{display:block;color:#fff;font-size:.9rem;font-weight:600;white-space:nowrap}
.cn-creds span{display:block;color:rgba(255,255,255,.72);font-size:.78rem;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cn-hero.has-bottom .cn-hero-in{padding-bottom:calc(clamp(28px,6vh,64px) + 84px)}
.cn-hero.has-bottom .cn-scroll{display:none}
@media (max-width:1100px){.cn-creds{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:12px 18px}.cn-creds::-webkit-scrollbar{display:none}.cn-creds li{flex:0 0 auto;scroll-snap-align:start;padding:2px 16px}}
@media (max-width:760px){.cn-bottom{bottom:80px;background:rgba(11,13,16,.42);border-bottom:1px solid rgba(255,255,255,.1)}.cn-hero.has-bottom .cn-hero-in{padding-bottom:calc(80px + 76px)}.cn-creds b{font-size:.84rem}.cn-creds span{font-size:.72rem}.cn-creds .px-ico{width:20px;height:20px}}
@media (max-width:760px){.cn-hero.has-bottom .cn-hero-in{padding-bottom:calc(80px + 96px)}}

/* ---------- the film hero, poster style: centered, a gold label, the headline in heavy 3D capitals ---------- */
.cn-hero.is-film .cn-hero-in{max-width:none;width:100%;display:flex;flex-direction:column;align-items:center;text-align:center;margin:0 auto}
.cn-hero.is-film .cn-kicker{margin:0 0 14px;font-size:clamp(12px,1.05vw,15px);font-weight:600;letter-spacing:.46em;padding-left:.46em;text-transform:uppercase;color:#E2AE4A;text-shadow:0 1px 10px rgba(0,0,0,.45)}
.cn-hero.is-film .cn-title-q.cn-caps{max-width:min(100%,15em);font-family:var(--font-display);font-weight:600;word-spacing:.18em;font-size:clamp(46px,7.2vw,124px);line-height:.98;letter-spacing:.012em;text-transform:uppercase;text-wrap:balance;text-shadow:none}
.cn-hero.is-film .cn-caps .cn-cap-track{justify-items:center}
.cn-caps .cn-cap{position:relative;color:#E9EBEE;
  text-shadow:1px 1px 0 #C9CDD2,2px 2px 0 #B6BBC1,3px 3px 0 #A2A8AF,4px 4px 0 #8F959C,5px 5px 0 #7C828A,6px 6px 0 #6A7078,7px 7px 0 #585E66,9px 12px 22px rgba(0,0,0,.55),0 0 40px rgba(0,0,0,.25)}
.cn-caps .cn-cap::after{content:attr(data-text);position:absolute;inset:0;background:linear-gradient(180deg,#FFFFFF 0%,#F2F3F5 45%,#C7CBD1 100%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;pointer-events:none}
.cn-hero.is-film .cn-lede{margin-top:20px;max-width:46ch;text-align:center;text-wrap:balance}
.cn-hero.is-film .cn-ctas{justify-content:center}
/* the logo moment: the words step aside, the logo and its three facts take the centre */
.cn-hero.is-film .cn-hero-in{transition:opacity .6s ease}
.cn-hero.is-outro .cn-hero-in{opacity:0;pointer-events:none}
.cn-hero.is-film .cn-endlogo,.cn-hero.is-film .cn-endlogo.has-stats{left:50%;right:auto;top:46%;transform:translate(-50%,-50%)}
@media (max-width:760px){.cn-hero.is-film .cn-title-q.cn-caps{font-size:clamp(40px,12.6vw,62px);max-width:100%}.cn-caps .cn-cap{text-shadow:1px 1px 0 #C9CDD2,2px 2px 0 #A2A8AF,3px 3px 0 #7C828A,4px 4px 0 #585E66,6px 8px 16px rgba(0,0,0,.55)}.cn-hero.is-film .cn-kicker{font-size:11px;letter-spacing:.34em;padding-left:.34em}}
.cn-hero.is-film .cn-kicker{color:#F2BC52;text-shadow:0 1px 2px rgba(0,0,0,.75),0 0 16px rgba(0,0,0,.65),0 0 34px rgba(0,0,0,.4)}

/* the headline a size down, so the film shows around it */
.cn-hero.is-film .cn-title-q.cn-caps{font-size:clamp(36px,5.2vw,88px);max-width:min(100%,16em)}
@media (max-width:760px){.cn-hero.is-film .cn-title-q.cn-caps{font-size:clamp(30px,9.4vw,46px)}}
/* a soft shade behind the centered words, so the line stays readable over bright stone and tile */
.cn-hero.is-film .cn-hero-in{position:relative}
.cn-hero.is-film .cn-hero-in::before{content:'';position:absolute;z-index:-1;left:50%;bottom:6%;width:min(1100px,96%);height:78%;transform:translateX(-50%);background:radial-gradient(50% 50% at 50% 55%,rgba(10,12,14,.5) 0%,rgba(10,12,14,.22) 55%,rgba(10,12,14,0) 100%);pointer-events:none}
.cn-hero.is-film .cn-lede{text-shadow:0 1px 3px rgba(0,0,0,.55),0 0 18px rgba(0,0,0,.4)}
.cn-hero.is-film .cn-hero-in::before{background:radial-gradient(50% 50% at 50% 55%,rgba(10,12,14,.62) 0%,rgba(10,12,14,.3) 55%,rgba(10,12,14,0) 100%);height:86%}
.cn-cap{transition:opacity .45s ease,transform .6s cubic-bezier(.2,.8,.2,1),filter .45s ease} /* in quickly, so each line is readable for longer */

/* ---------- layout A: the title bottom-left, the line and the buttons bottom-right, the middle of the film left clear ---------- */
.cn-hero.is-film .cn-hero-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);grid-template-areas:"title lede" "title ctas";column-gap:clamp(28px,4vw,72px);align-items:end;justify-items:stretch;text-align:left;max-width:none;width:100%;padding-left:clamp(18px,5vw,72px);padding-right:clamp(18px,5vw,72px)}
.cn-hero.is-film .cn-title-q.cn-caps{grid-area:title;align-self:end;max-width:12em;margin:0}
.cn-hero.is-film .cn-caps .cn-cap-track{justify-items:start}
.cn-hero.is-film .cn-lede{grid-area:lede;margin:0 0 18px;max-width:none;text-align:right;text-wrap:pretty}
.cn-hero.is-film .cn-ctas{grid-area:ctas;justify-content:flex-end;margin-top:0}
.cn-hero.is-film .cn-hero-in::before{left:0;right:0;width:auto;bottom:0;height:100%;transform:none;background:linear-gradient(0deg,rgba(10,12,14,.58) 0%,rgba(10,12,14,.28) 50%,rgba(10,12,14,0) 100%)}
/* tablets and phones: the title near the top, the line and the buttons at the bottom */
@media (max-width:900px){
  .cn-hero.is-film .cn-hero-in{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;align-items:stretch;text-align:left;padding-top:clamp(96px,14vh,140px)}
  .cn-hero.is-film .cn-title-q.cn-caps{max-width:100%}
  .cn-hero.is-film .cn-lede{text-align:left;margin:auto 0 18px}
  .cn-hero.is-film .cn-ctas{justify-content:flex-start}
  .cn-hero.is-film .cn-hero-in::before{background:linear-gradient(180deg,rgba(10,12,14,.5) 0%,rgba(10,12,14,0) 32%,rgba(10,12,14,0) 52%,rgba(10,12,14,.62) 100%)}
}
@media (min-width:761px) and (max-width:900px){.cn-hero.is-film .cn-hero-in{padding-bottom:calc(clamp(28px,6vh,64px) + 84px)}}
@media (max-width:900px){.cn-hero.is-film .cn-title-q.cn-caps{align-self:flex-start}}
@media (max-width:760px){.cn-hero.is-film .cn-title-q.cn-caps{font-size:clamp(34px,10.6vw,50px)}}

/* a still preview (?thumb=1, the dashboard's page cards): the page as it rests, nothing moving, nothing heavy */
html.is-thumb *,html.is-thumb *::before,html.is-thumb *::after{animation:none!important;transition:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html.is-thumb .reveal,html.is-thumb .cn-hero-in,html.is-thumb .cn-hero-in>*,html.is-thumb .px-book-form,html.is-thumb .px-book-copy>*,html.is-thumb .px-flow-step{opacity:1!important;transform:none!important;filter:none!important}
html.is-thumb .cn-endlogo,html.is-thumb .callbar,html.is-thumb .sb-chat,html.is-thumb .cn-scroll{display:none!important}

/* ---------- the page heroes (service, city, combo): the home page's look from a still photo ---------- */
.cn-hero.is-film.cn-hero-compact{min-height:88svh}
.cn-hero.is-film .cn-meta,.cn-hero.is-film .cn-word{display:none}
.cn-hero.is-film:not(:has(.cn-caps [data-t])) .cn-title-q.cn-caps{font-size:clamp(34px,4.3vw,72px);max-width:13.5em;line-height:1.02}
@media (max-width:760px){.cn-hero.is-film:not(:has(.cn-caps [data-t])) .cn-title-q.cn-caps{font-size:clamp(30px,9vw,44px)}}
/* "you are in the right place if", now under the hero: on the light page */
.hero-grid .right-place{margin-top:22px}
.hero-grid .right-place-h{color:var(--px-amber)}
.section-tight>.hero-grid{align-items:start} /* under a page hero: the words and the form both start at the top */

/* ---------- type: Clash Display headlines, Satoshi text ---------- */
:root{--cn-body:var(--font-body);--cn-display:var(--font-display)}
h2{font-weight:500;letter-spacing:-.02em;word-spacing:.06em}
h3{font-weight:500;letter-spacing:-.005em}
.form-title,.px-step h3,.px-flow-step h3,.px-room-in h3{font-family:var(--font-display);font-weight:500}
.cn-hero.is-film .cn-title-q.cn-caps{letter-spacing:0;line-height:1.02;font-size:clamp(34px,4.6vw,76px);max-width:12em}
.cn-hero.is-film:not(:has(.cn-caps [data-t])) .cn-title-q.cn-caps{font-size:clamp(32px,4vw,64px);max-width:12.5em}
@media (max-width:760px){.cn-hero.is-film .cn-title-q.cn-caps{font-size:clamp(30px,9vw,42px)}.cn-hero.is-film:not(:has(.cn-caps [data-t])) .cn-title-q.cn-caps{font-size:clamp(28px,8vw,38px)}}
@media (max-width:760px) and (max-height:760px){.cn-hero.is-film:not(:has(.cn-caps [data-t])) .cn-title-q.cn-caps{font-size:clamp(24px,7vw,30px)}.cn-hero.is-film .cn-lede{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:12px}} /* short phones: long page titles and the line both fit */
/* phones: the vertical film shows through. Lighter shade, a shorter line, the strip and buttons kept compact */
@media (max-width:760px){
  .cn-hero.is-film .cn-hero-in::before{background:linear-gradient(180deg,rgba(10,12,14,.42) 0%,rgba(10,12,14,0) 24%,rgba(10,12,14,0) 58%,rgba(10,12,14,.5) 100%)}
  .cn-hero.is-film .cn-grade{background:linear-gradient(180deg,rgba(11,13,16,.25) 0%,rgba(11,13,16,0) 18%,rgba(11,13,16,0) 62%,rgba(11,13,16,.55) 100%)}
  .cn-hero.is-film .cn-lede{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:15px;margin-bottom:14px}
  .cn-hero.is-film .cn-ctas .cn-link{display:none}
  .cn-bottom{background:rgba(11,13,16,.34)}
}
/* phones: the film is a full-width band on its own blurred backdrop (site/media/hero-portrait.mp4, band centred at 40% of
   the height); the headline sits in the blur above it, the line and the button in the blur below it */
@media (max-width:760px){
  .cn-hero.is-film .cn-hero-in{padding-top:88px}
  .cn-hero.is-film .cn-title-q.cn-caps{font-size:clamp(26px,8.2vw,34px)}
  .cn-hero.is-film .cn-hero-in::before{background:linear-gradient(180deg,rgba(10,12,14,.3) 0%,rgba(10,12,14,0) 22%,rgba(10,12,14,0) 60%,rgba(10,12,14,.35) 100%)}
  .cn-hero.is-film .cn-grade{background:none}
}
/* short phones: the film band rides higher, so the words all sit below it */
@media (max-width:760px) and (max-height:740px){
  .cn-hero.is-film .cn-hero-in{justify-content:flex-end}
  .cn-hero.is-film .cn-title-q.cn-caps{margin-bottom:10px}
  .cn-hero.is-film .cn-lede{display:none}
}
/* iPhones draw the page under the status bar and the home indicator: keep the nav, the hero words and the call bar clear */
.nav-wrap{padding-top:calc(18px + env(safe-area-inset-top))}
.callbar{bottom:calc(12px + env(safe-area-inset-bottom))}
@media (max-width:760px){.cn-hero.is-film .cn-hero-in{padding-top:calc(88px + env(safe-area-inset-top))}.cn-hero.is-film .cn-credit{top:calc(76px + env(safe-area-inset-top))}}
/* no native play button over the hero film: it starts by itself (or on the first touch when a phone holds autoplay back) */
.cn-video::-webkit-media-controls,.cn-video::-webkit-media-controls-start-playback-button,.cn-video::-webkit-media-controls-overlay-play-button{display:none!important;-webkit-appearance:none;opacity:0}