:root{--red:#ea1b23;--red-light:color-mix(in srgb,var(--red) 75%,white);--hover:#333366;--ink:#111;--paper:#fff;--muted:#707070;--line:#e2e2e2;--shell:min(1600px,calc(100% - 30px));--sans:Roboto,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;--radius:14px;--radius-sm:8px;--radius-pill:999px;--ease:cubic-bezier(.4,0,.2,1);--shadow-sm:0 1px 3px rgba(0,0,0,.09);--shadow-md:0 10px 28px rgba(0,0,0,.14);--shadow-lg:0 22px 48px rgba(0,0,0,.22)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.6;padding-top:75px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%}
a{color:var(--red);text-decoration:none;transition:color .2s var(--ease)}
a:hover,a:focus-visible{color:var(--hover)}
button,input,select,textarea{transition:color .2s var(--ease),background-color .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease),transform .2s var(--ease)}
:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;top:10px;left:10px;z-index:1000;padding:10px 16px;background:#fff;color:#000;border-radius:var(--radius-sm);transform:translateY(-150%)}
.skip-link:focus{transform:none}

/* Header */
.site-header{position:fixed;top:0;left:0;width:100%;height:75px;background:#000;padding:5px 0;z-index:1000;display:flex;align-items:center;gap:24px;box-shadow:0 0 0 rgba(0,0,0,0);transition:background-color .3s var(--ease),box-shadow .3s var(--ease)}
.site-header.is-scrolled{background:rgba(0,0,0,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:var(--shadow-md)}
.site-header .brand{margin-left:max(15px,calc((100% - 1600px)/2));margin-right:auto}
.brand img{width:300px;height:auto}
.main-navigation{display:flex;gap:6px;align-items:center}
.main-navigation a{position:relative;display:block;color:#fff;font-size:16px;font-weight:700;text-transform:uppercase;letter-spacing:.01em;padding:8px 14px;border-radius:var(--radius-pill);transition:color .2s var(--ease),background-color .2s var(--ease)}
.main-navigation a:after{content:"";position:absolute;left:14px;right:calc(100% - 14px);bottom:2px;height:2px;background:currentColor;transition:right .25s var(--ease)}
.main-navigation a:hover,.main-navigation a:focus-visible{color:var(--red-light);background:rgba(255,255,255,.08)}
.main-navigation a:hover:after,.main-navigation a:focus-visible:after{right:14px}
.main-navigation a[aria-current=page]{color:var(--red)}
.main-navigation a[aria-current=page]:after{right:14px}
.search-toggle,.menu-toggle{background:none;border:0;color:#fff;cursor:pointer}
.search-toggle{font-size:1.4rem;color:var(--red);margin-right:max(15px,calc((100% - 1600px)/2))}
.menu-toggle{display:none;width:42px;height:42px;padding:10px;position:relative}
.menu-toggle span:not(.sr-only){display:block;height:2px;background:#fff;margin:5px 0;border-radius:2px;transition:transform .25s var(--ease),opacity .25s var(--ease)}
.menu-toggle[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-toggle[aria-expanded=true] span:nth-child(2){opacity:0}
.menu-toggle[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.search-panel{position:fixed;top:75px;left:0;right:0;background:#000;padding:50px max(15px,calc((100% - 1600px)/2));display:grid;grid-template-columns:repeat(6,1fr);gap:5px;z-index:999}
.search-panel[hidden]{display:none}
.search-panel .field.text{grid-column:span 2}
.search-panel input{display:inline-block;height:45px;width:100%;background:rgba(255,255,255,.04);color:#fff;font-size:12px;line-height:1;border:1px solid rgba(255,255,255,.3);border-radius:var(--radius-sm);padding:0 15px;font-family:inherit}
.search-panel input:focus-visible{outline:0;border-color:var(--red);box-shadow:0 0 0 3px rgba(234,27,35,.28)}
.search-panel .emp{grid-column:span 1}
.search-panel .search-button{height:45px;width:100%;background:var(--red);color:#fff;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;border-radius:var(--radius-sm);border:0;outline:0;cursor:pointer}
.search-panel .search-button:hover,.search-panel .search-button:focus-visible{background:var(--hover);transform:translateY(-1px)}

/* Custom dropdown (replaces native <select> so the open list can be themed) */
.dd{position:relative}
.dd-toggle{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;height:45px;background:rgba(255,255,255,.04);color:#fff;font-size:12px;font-family:inherit;line-height:1;border:1px solid rgba(255,255,255,.3);border-radius:var(--radius-sm);padding:0 14px;cursor:pointer;text-align:left}
.dd-toggle:after{content:"";width:14px;height:14px;flex:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center/contain;transition:transform .2s var(--ease)}
.dd-toggle[aria-expanded=true]:after{transform:rotate(180deg)}
.dd-toggle:focus-visible{outline:0;border-color:var(--red);box-shadow:0 0 0 3px rgba(234,27,35,.28)}
.dd-list{position:absolute;top:calc(100% + 6px);left:0;right:0;margin:0;padding:6px;list-style:none;background:#111;border:1px solid rgba(255,255,255,.15);border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);max-height:280px;overflow-y:auto;z-index:20;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.35) transparent}
.dd-list::-webkit-scrollbar{width:8px}
.dd-list::-webkit-scrollbar-track{background:transparent}
.dd-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.35);border-radius:var(--radius-pill)}
.dd-list::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.55)}
.dd-list li{padding:10px 12px;border-radius:var(--radius-sm);color:#fff;font-size:13px;cursor:pointer}
.dd-list li:hover,.dd-list li.is-active{background:rgba(255,255,255,.08)}
.dd-list li[aria-selected=true]{background:var(--red);color:#fff}

.section-shell{width:var(--shell);margin-inline:auto}

/* Hero: pure image carousel, no text overlay */
.hero{position:relative;overflow:hidden;background:#000;height:clamp(220px,32vw,560px);cursor:grab;touch-action:pan-y}
.hero.is-dragging{cursor:grabbing}
.hero-slide{position:absolute;inset:0;display:block;visibility:hidden;will-change:transform}
.hero-slide.is-active,.hero-slide.is-peek{visibility:visible;z-index:1}
.hero-slide.is-animating{transition:transform .55s cubic-bezier(.22,.61,.36,1)}
.hero-slide .hero-content{display:none}
.hero picture,.hero img{width:100%;display:block}
.hero-arrow{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border:1px solid rgba(255,255,255,.35);border-radius:var(--radius-pill);background:rgba(0,0,0,.32);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;line-height:0;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2;transition:background-color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease)}
.hero-arrow svg{width:22px;height:22px;display:block}
.hero-arrow:hover,.hero-arrow:focus-visible{background:var(--red);border-color:var(--red);transform:translateY(-50%) scale(1.08);box-shadow:0 8px 22px rgba(0,0,0,.35)}
.hero-arrow:active{transform:translateY(-50%) scale(.96)}
.hero-prev{left:clamp(12px,2.5vw,32px)}
.hero-next{right:clamp(12px,2.5vw,32px)}
.hero-dots{position:absolute;left:0;right:0;bottom:16px;display:flex;justify-content:center;gap:16px;z-index:2}
.hero-dots button{width:8px;height:8px;border-radius:50%;border:0;background:#fff;opacity:.55;padding:0;transition:opacity .2s var(--ease),transform .2s var(--ease)}
.hero-dots button[aria-current=true]{opacity:1;transform:scale(1.3)}

/* Showreel video under the hero */
.home-video{max-width:840px;margin:10px auto 0;padding:0 16px}
.home-video video{display:block;width:100%;aspect-ratio:16/9;background:#000}

/* Statement */
.statement{padding:90px 0 70px;margin-top:10px;text-align:center;background:#f4f4f4}
.statement .eyebrow{display:none}
.statement h2{margin:0 auto;max-width:760px;font-size:1.6rem;font-weight:700;text-transform:uppercase;color:#d53030}
.statement-sub,.statement p{max-width:700px;margin:14px auto 0;color:var(--muted);font-size:1rem}

/* Section headings */
.catalog-section,.news-section{padding:40px 0}
.section-heading{text-align:center;margin-bottom:24px}
.section-heading h2{font-size:1.6rem;font-weight:700;text-transform:uppercase;margin:0;color:#d53030}
.section-heading .eyebrow,.section-heading>a{display:none}
.surface-dark{background:none;color:inherit;padding-inline:0}

/* Poster grid / cards */
.poster-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px 15px}
.poster-grid-five{grid-template-columns:repeat(5,minmax(0,1fr))}
.title-card{background:none}
.title-card a{display:block;color:inherit}
.title-card .poster-image{display:block;aspect-ratio:2/3;background:#eee center/cover;border-radius:var(--radius);transform:scale(.97);box-shadow:var(--shadow-sm);transition:transform .35s var(--ease),box-shadow .35s var(--ease);overflow:hidden}
.title-card .poster-image img{width:100%;height:100%;object-fit:cover}
.title-card a:hover .poster-image,.title-card a:focus-visible .poster-image{transform:translateY(-6px) scale(1);box-shadow:var(--shadow-lg)}
.title-card .title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:0.9rem;line-height:1.25;font-weight:700;text-align:center;text-transform:uppercase;margin:15px 0 0;color:#d53030}
.title-card .tags{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:8px}
.title-card .tags span{background:#777;color:#fff;font-size:12px;padding:3px 11px;border-radius:var(--radius-pill);white-space:nowrap}
.title-card .tags span.genre{background:var(--red)}
.card-overlay{display:none}

/* Poster carousel (Featured titles / New releases) - shows the same card count per row as
   .poster-grid at each breakpoint, but as a horizontally scrollable strip instead of a
   wrapping grid once there are more items than fit. Native overflow-x:auto already gives
   mouse-wheel/shift-wheel and trackpad/touch scrolling for free; site.js adds click-and-drag
   for a plain mouse and wires the prev/next arrows, which only appear once the track is
   actually wider than its viewport (see initPosterCarousels). */
.poster-carousel{position:relative}
.poster-carousel-track{display:flex;gap:15px;overflow-x:auto;scroll-snap-type:x proximity;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;cursor:grab;padding:6px 4px 12px}
.poster-carousel-track::-webkit-scrollbar{display:none}
.poster-carousel-track.is-dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.poster-carousel-track .title-card{flex:0 0 calc((100% - 3*15px)/4);scroll-snap-align:start;min-width:0}

/* Arrows are centred on the poster image, not the whole card. .poster-carousel is as
   tall as a full card (poster + title + tags), so a plain top:50% sits low. The poster
   fills one column and is aspect-ratio 2/3, so its height is (column width) * 1.5; the
   track adds 6px of top padding above it. We anchor the arrow's centre (translateY(-50%))
   at 6px + half the poster height. Column width must come from the carousel's *width*, so
   container-query units (cqw) are used - a plain % here would resolve against the
   carousel's height (top's axis), not its width. --cols is the visible column count per
   breakpoint; gap is a fixed 15px. */
.poster-carousel{position:relative;container-type:inline-size;--cols:4}
.poster-carousel-arrow{position:absolute;top:calc(6px + ((100cqw - (var(--cols) - 1) * 15px) / var(--cols)) * 1.5 / 2);z-index:3;width:46px;height:46px;border:0;border-radius:50%;background:#fff;color:#161616;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 6px 18px rgba(15,15,20,.28),0 0 0 1px rgba(15,15,20,.06);transform:translateY(-50%) scale(1);transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease),color .2s var(--ease)}
.poster-carousel-arrow svg{width:20px;height:20px}
.poster-carousel-arrow:hover,.poster-carousel-arrow:focus-visible{background:var(--red);color:#fff;transform:translateY(-50%) scale(1.08);box-shadow:0 10px 26px rgba(234,27,35,.4),0 0 0 1px rgba(234,27,35,.5)}
.poster-carousel-arrow:active{transform:translateY(-50%) scale(.96)}
.poster-carousel-arrow[hidden]{display:none}
.poster-carousel-prev{left:-12px}
.poster-carousel-next{right:-12px}

@media(max-width:1200px){
  .poster-carousel{--cols:3}
  .poster-carousel-track .title-card{flex-basis:calc((100% - 2*15px)/3)}
}
@media(max-width:900px){
  .poster-carousel{--cols:2}
  .poster-carousel-track{gap:15px}
  .poster-carousel-track .title-card{flex-basis:calc((100% - 15px)/2)}
  .poster-carousel-arrow{width:38px;height:38px}
  .poster-carousel-arrow svg{width:17px;height:17px}
  .poster-carousel-prev{left:-6px}
  .poster-carousel-next{right:-6px}
}

/* Interior page banner (pure image, no overlay text). Height was a fixed 609px, which
   only matched the design's intended framing at the ~1600px shell width it was tuned
   for - background:cover then had to crop harder and harder as the viewport narrowed
   (worst right at the low end, since a flat px-based clamp floor doesn't scale down at
   the same rate width does), cutting off the banner's own title text and side panels
   instead of scaling down with it. All four banner images (film/series/microdrama/
   general) share the same native ~3.11:1 aspect ratio (2390x768) - matching the
   container's aspect-ratio to that exactly means background:cover never has to crop
   anything, at any viewport width, so there's no per-width tuning to get wrong. Default
   crop position is centered, matching Microdrama/General's banners, whose title text is
   horizontally centered in the source image; Films/Series override this to left-anchored
   below since their title sits at the image's left edge instead - now only relevant for
   the sub-160px-tall extreme this aspect-ratio can't reach, kept as a safety net. */
.page-banner{width:100%;aspect-ratio:2390/768;height:auto;max-height:609px;background:#111 center/cover no-repeat}
.page-banner-film,.page-banner-series{background-position:left center}
.page-hero{padding:0}
.page-hero .section-shell,.page-hero h1,.page-hero p{display:none}

/* Genre filter pills (catalogue pages) */
.catalogue-page{padding:40px 0 80px}
.genre-heading{text-align:center;text-transform:uppercase;font-size:1.6rem;font-weight:700;color:#ff0000;margin:0 0 20px}
.genre-tabs{display:flex;flex-wrap:nowrap;justify-content:center;align-items:center;gap:10px;margin:0 0 24px;padding:4px max(15px,calc((100% - 1600px)/2)) 10px;overflow-x:auto;-webkit-overflow-scrolling:touch;touch-action:pan-x;scroll-behavior:smooth;scroll-snap-type:x proximity;scrollbar-width:none;-ms-overflow-style:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent)}
.genre-tabs::-webkit-scrollbar{display:none}
.genre-tab{flex:none;font:inherit;font-size:.92rem;font-weight:600;line-height:1;border:0;border-radius:var(--radius-pill);padding:10px 20px;color:var(--ink);background:#f2f2f2;cursor:pointer;scroll-snap-align:start}
.genre-tab:hover{background:#e8e8e8}
.genre-tab[aria-current=true]{color:#fff;background:var(--red);box-shadow:var(--shadow-sm)}
.filter-bar{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-bottom:30px}
.filter-bar>div{display:grid;gap:6px}
.filter-bar label{font-size:.72rem;font-weight:700;text-transform:uppercase}
.filter-bar input,.filter-bar select{border:1px solid #cacaca;background:#fff;border-radius:var(--radius-sm);padding:12px 15px;font:inherit}
.filter-bar input:focus-visible,.filter-bar select:focus-visible{outline:0;border-color:var(--red);box-shadow:0 0 0 3px rgba(234,27,35,.15)}
.filter-bar button{border:0;background:var(--red);color:#fff;font:inherit;font-weight:700;text-transform:uppercase;border-radius:var(--radius-sm);padding:12px 22px;cursor:pointer}
.filter-bar button:hover,.filter-bar button:focus-visible{background:var(--hover);transform:translateY(-1px)}
.filter-bar .search-group{display:flex;align-items:stretch;width:100%;max-width:420px;border:1px solid #cacaca;border-radius:var(--radius-pill);background:#fff;overflow:hidden}
.filter-bar .search-group:focus-within{border-color:var(--red);box-shadow:0 0 0 3px rgba(234,27,35,.15)}
.filter-bar .search-group input{flex:1;min-width:0;height:48px;border:0;border-radius:0;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E") no-repeat 16px center;background-size:16px;padding:0 14px 0 42px;font:inherit}
.filter-bar .search-group input:focus-visible{outline:0;box-shadow:none}
.filter-bar .search-group button{border:0;border-radius:0;background:var(--red);color:#fff;font-weight:700;text-transform:uppercase;font-size:.78rem;letter-spacing:.04em;padding:0 26px;cursor:pointer}
.filter-bar .search-group button:hover,.filter-bar .search-group button:focus-visible{background:var(--hover);transform:none}
.clear-filter{padding:12px;text-align:center;border-radius:var(--radius-sm)}
.results-count{color:var(--muted);text-align:center;margin:0 0 25px}
.empty-state{text-align:center;padding:90px 20px}

/* Film detail (autofit cover banner, then poster + info below) */
.title-hero{padding:0}
.film-banner{width:100%;height:min(70vh,650px);background:#111 center/cover no-repeat}
.film-grid{width:var(--shell);margin:0 auto;display:grid;grid-template-columns:minmax(220px,320px) 1fr;gap:40px;padding:40px 60px 60px}
/* Same look as the catalogue card's poster (.title-card .poster-image): 2:3, cropped with
   cover instead of stretched, rounded corners and the light shadow. */
.film-grid .title-poster{width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;align-self:start;border-radius:var(--radius);box-shadow:var(--shadow-sm);background:#eee}
.film-grid .film-content{font-size:1rem;color:var(--ink)}
.film-grid .film-content h1{font-size:1.9rem;font-weight:700;text-transform:uppercase;margin:0 0 20px;color:var(--ink)}
.film-grid .film-content h2{font-size:.95rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;margin:22px 0 6px;color:var(--ink)}
.film-grid .film-content h2:first-of-type{margin-top:0}
.film-grid .film-content p{margin:0 0 12px;color:var(--muted);line-height:1.65}
.film-grid .film-content p:last-of-type{margin-bottom:0}
.film-grid .actions{margin-top:22px}
.film-btn{display:inline-block;background:#333;color:#fff;font-size:16px;font-weight:700;text-transform:uppercase;border-radius:var(--radius-sm);padding:10px 30px;border:0;cursor:pointer}
.film-btn:hover,.film-btn:focus-visible{background:var(--red);transform:translateY(-1px)}
.title-backdrop,.title-synopsis{all:unset}

/* Trailer */
.trailer-section{padding:0 60px 20px}
.trailer-frame{position:relative;display:block;width:100%;max-width:640px;margin:0 auto;border-radius:var(--radius-sm);overflow:hidden;background:#111;cursor:pointer}
.trailer-frame img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.trailer-frame iframe{display:block;width:100%;aspect-ratio:16/9;border:0}
.trailer-frame__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;transition:background .2s,transform .2s;border:0;cursor:pointer}
.trailer-frame:hover .trailer-frame__play,.trailer-frame:focus-visible .trailer-frame__play{background:var(--red);transform:translate(-50%,-50%) scale(1.08)}

/* Stills */
.stills-section{padding:40px 60px;background:var(--surface,#f2f2f2);width:100%}
.stills-carousel{position:relative;display:flex;align-items:center;gap:16px;max-width:1200px;margin:0 auto}
.stills-carousel__viewport{flex:1;overflow:hidden}
.stills-strip{display:flex;gap:20px;transition:transform .35s var(--ease)}
.stills-strip__item{display:block;flex:0 0 calc((100% - 40px)/3);aspect-ratio:16/9;padding:0;border:0;border-radius:var(--radius-sm);overflow:hidden;background:#111;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.12);transition:transform .22s ease,box-shadow .22s ease}
.stills-strip__item img{display:block;width:100%;height:100%;object-fit:contain;transition:transform .3s ease}
.stills-strip__item:hover,.stills-strip__item:focus-visible{transform:translateY(-8px);box-shadow:0 14px 28px rgba(0,0,0,.25)}
.stills-strip__item:hover img,.stills-strip__item:focus-visible img{transform:scale(1.05)}
.stills-carousel__arrow{flex:none;width:40px;height:40px;border:0;border-radius:50%;background:#000;color:#fff;font-size:1rem;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s var(--ease)}
.stills-carousel__arrow:hover,.stills-carousel__arrow:focus-visible{background:var(--red)}
.stills-carousel__arrow[disabled]{opacity:.35;cursor:default;pointer-events:none}

/* Lightbox */
body.lightbox-open{overflow:hidden}
.lightbox{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:40px;background:rgba(0,0,0,.85)}
.lightbox[hidden]{display:none}
.lightbox__image{max-width:min(1100px,90vw);max-height:85vh;object-fit:contain;border-radius:var(--radius-sm);box-shadow:0 10px 40px rgba(0,0,0,.5)}
.lightbox__close{position:absolute;top:20px;right:24px;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;font-size:1.6rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .18s ease}
.lightbox__close:hover,.lightbox__close:focus-visible{background:rgba(255,255,255,.25)}

/* About / story split */
.story-split{display:grid;grid-template-columns:1fr 1fr;gap:60px;padding:60px 0}
.story-split img{border-radius:var(--radius);box-shadow:var(--shadow-sm);display:flex;justify-self:end;}
.story-split h2{color:#b1000d;font-size:1.8rem;margin:0 0 16px}
.story-split p{color:grey;font-size:18px;text-align:justify}
.values{padding:60px 0;background:#f4f4f4}
.value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.value-grid article{border-top:2px solid var(--line);padding-top:24px}
.value-grid span{color:var(--red);font-weight:700}
.value-grid h3{font-size:1.3rem;margin:16px 0 6px}

/* Press room */
.press-list{padding:40px 0}
.press-heading{text-align:center;text-transform:uppercase;font-size:1.6rem;font-weight:700;color:#b40000;margin:0 0 24px}
.press-intro{text-align:center;color:var(--muted);max-width:640px;margin:0 auto 30px}
.article-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px 30px}
.article-grid a{color:inherit;display:block}
.article-grid img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow-sm);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.article-grid a:hover img,.article-grid a:focus-visible img{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.article-grid .title{display:block;font-size:16px;font-weight:700;margin:15px 0 6px;color:#d53030}
.article-grid p{color:var(--muted);font-size:13px;margin:0}

/* Contact */
.contact-channels{display:flex;align-items:center;gap:10px}
.icon-row{display:inline-flex;align-items:center;gap:8px;vertical-align:middle}
.icon-row svg{width:20px;height:20px;flex:none}
.icon-phone,.icon-viber,.icon-whatsapp{color:#1a1a1a}
.contact-grid{display:grid;grid-template-columns:0.8fr 1fr;gap:50px;padding:40px 80px}
.contact-grid h2{font-size:1.8rem;margin:0 0 10px}
.contact-grid aside{background:#fff;padding:30px;border-top:5px solid var(--red);border-radius:var(--radius-sm);box-shadow:var(--shadow-md)}
.contact-grid aside h3{margin:22px 0 4px}
.contact-grid aside h3:first-child{margin-top:0}
.contact-grid aside p{margin:0 0 4px}
address{font-style:normal}
.contact-form{display:grid;gap:3px;}
.contact-form label{font-size:.72rem;font-weight:700;text-transform:uppercase}
.contact-form input,.contact-form textarea{border:1px solid #cacaca;background:#fff;border-radius:var(--radius-sm);padding:12px 15px;font:inherit;margin-bottom:14px}
.contact-form input:focus-visible,.contact-form textarea:focus-visible{outline:0;border-color:var(--red);box-shadow:0 0 0 3px rgba(234,27,35,.15)}
.contact-form label.consent{display:flex;align-items:center;gap:10px;text-transform:none;font-weight:400;font-size:.85rem;margin-bottom:18px}
.contact-form label.consent input{margin:0;width:auto}
.contact-form .g-recaptcha{margin-bottom:18px}
.contact-form-status{padding:10px 14px;border-radius:var(--radius-sm);font-size:.85rem;margin-bottom:14px}
.contact-form-status--success{background:#e6f6ea;color:#1c7a34;border:1px solid #b6e5c3}
.contact-form-status--error{background:#fdecec;color:#b1000d;border:1px solid #f5c2c2}
.contact-form .field-validation-error{color:#b1000d;font-size:.78rem;font-weight:400;text-transform:none;margin:-10px 0 10px}
.contact-form .field-validation-valid{display:none}
.contact-form .is-invalid,.contact-form .input-validation-error{border-color:#b1000d}
.contact-form .consent .is-invalid,.contact-form .consent .input-validation-error{outline:2px solid #b1000d;outline-offset:2px}
.contact-form .required-mark{color:var(--red)}
.button{display:inline-block;margin-top:8px;padding:12px 26px;background:var(--red);color:#fff;text-decoration:none;text-transform:uppercase;font-size:.78rem;font-weight:700;letter-spacing:.05em;border:0;border-radius:var(--radius-sm);cursor:pointer;box-shadow:var(--shadow-sm)}
.button:hover,.button:focus-visible{background:var(--hover);color:#fff;transform:translateY(-1px);box-shadow:var(--shadow-md)}
.button:disabled{background:#cacaca;color:#767676;cursor:not-allowed;box-shadow:none;transform:none}

/* Legal copy */
.legal-copy{position:relative;max-width:1200px;padding:24px 0}
.legal-copy .lead{font-size:1.2rem}
.legal-copy h1{text-align:center}
.legal-copy h2{margin-top:32px;font-size:1.15rem;color:#111}
.legal-copy ul,.legal-copy ol{color:var(--muted)}
.legal-note{border-left:4px solid var(--red);padding:14px 18px;background:#f4f4f4;border-radius:0 var(--radius-sm) var(--radius-sm) 0}
/* A real CSS float, spliced into BodyHtml right before the 2nd paragraph
   (Privacy.cshtml.cs) - the 1st paragraph stays full width above it, then as
   many following paragraphs as fit the image's height wrap beside it at the
   remaining ~80% width, and the next paragraph after that clears back to full
   width automatically once the float's height runs out - native float
   behavior, no manual paragraph-counting needed. */
.legal-copy__badge{float:right;width:20%;height:auto;margin:0 0 20px 28px;border-radius:var(--radius-sm)}
@media (max-width:640px){.legal-copy__badge{float:none;display:block;margin:0 auto 24px;width:140px}}

/* Press article detail page - dedicated news-article typography, not inherited from
   .legal-copy (which is centered/document-styled and reads wrong for a news story). */
.press-article__hero{position:relative;width:100%;height:280px;background:#0d0d0d;margin-bottom:348px}
.press-article__hero-backdrop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(18px) brightness(.25);}
.press-article__hero-image{position:absolute;left:50%;top:30px;transform:translateX(-50%);display:block;height:598px;width:auto;max-width:calc(100% - 40px);object-fit:contain;box-shadow:var(--shadow-lg)}
.press-article{max-width:1200px;padding:40px 0 60px}
.press-article h1{text-align:left;font-size:2rem;line-height:1.25;font-weight:800;color:#111;margin:0 0 20px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.press-article p{font-size:1.05rem;line-height:1.85;color:#222;margin:0 0 22px}
.press-article p:first-of-type{font-size:1.15rem;color:#111}
.press-article img{width:100%;border-radius:var(--radius-sm);box-shadow:var(--shadow-sm);margin:8px 0 28px}
.press-article h2,.press-article h3,.press-article h4{color:#111;font-weight:700;line-height:1.35;margin:36px 0 16px}
.press-article h2{font-size:1.3rem}
.press-article h3{font-size:1.15rem}
.press-article ul,.press-article ol{color:#222;font-size:1.05rem;line-height:1.85;padding-left:1.3em;margin:0 0 22px}
.press-article li{margin-bottom:8px}
.press-article blockquote{margin:28px 0;padding:4px 0 4px 22px;border-left:4px solid var(--red);color:var(--muted);font-size:1.1rem;font-style:italic}
.press-article a{text-decoration:underline;text-underline-offset:2px}
.press-article__source{color:var(--muted);font-size:14px;margin-top:32px}
.press-article p.press-article__caption{margin-top:-20px;font-size:.85rem;line-height:1.5;color:var(--muted);font-style:italic}

@media (max-width:640px){
  .press-article__hero{height:180px;margin-bottom:217px}
  .press-article__hero-image{height:377px;top:20px}
  .press-article h1{font-size:1.5rem}
  .press-article p,.press-article p:first-of-type,.press-article ul,.press-article ol{font-size:1rem}
}

/* Footer */
.site-footer{background:#000;color:#fff;padding:15px 0}
.footer-inner{width:var(--shell);margin:auto;text-align:center}
/* Matches the live WordPress footer: 12px white text at line-height 1.5 with no gaps
   between lines, and the theme's default link colour (#c36). */
.footer-inner img{width:150px;height:auto;margin:0 auto; padding:0 0 5px;}
.footer-inner .copyright{display:flex;flex-direction:column;align-items:center;max-width:80%;margin:0 auto;font-size:12px;line-height:1.5}
.footer-inner .copyright>*{display:block;margin:0;color:#fff;font-size:12px}
.footer-inner .copyright a{color:#c36}
.footer-inner .copyright a:hover,.footer-inner .copyright a:focus-visible{color:#fff}
.footer-inner .copyright .seal{width:25%;text-align:center;margin:0}
.footer-inner .npc-seal{width:50%;margin:0 auto}

/* Live maintenance-mode banner (pushed via SignalR - see WEBSITE/wwwroot/js/site.js's
   startMaintenanceLiveUpdates) - a heads-up for visitors already mid-session when an
   admin toggles maintenance mode in CMS, not the actual enforcement (that stays
   MaintenanceModeMiddleware's per-request 503 check, unaffected by whether this banner
   ever shows). Fixed to the very top so it never collides with the cookie banner
   (bottom) or this site's own fixed header. */
@keyframes live-maintenance-slide-down{from{transform:translateY(-100%)}to{transform:translateY(0)}}
.live-maintenance-banner{position:fixed;top:0;left:0;right:0;z-index:1200;background:var(--red);color:#fff;padding:12px 20px;text-align:center;box-shadow:var(--shadow-md);animation:live-maintenance-slide-down .3s var(--ease)}
.live-maintenance-banner[hidden]{display:none}
.live-maintenance-banner__text{margin:0;font-size:14px;font-weight:600}
@media(prefers-reduced-motion:reduce){.live-maintenance-banner{animation:none}}

/* Cookie notice (self-hosted, no third-party script — visually inspired by the real site's CookieYes banner) */
:root{--cookie-red:#f70000;--cookie-red-light:color-mix(in srgb,var(--cookie-red) 75%,white);--cookie-bg:#0c0c0c}
@keyframes cookie-slide-up{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes cookie-fade-in{from{opacity:0}to{opacity:1}}
@keyframes cookie-pop-in{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.cookie-revisit{position:fixed;left:16px;bottom:16px;z-index:1099;display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:var(--radius-pill);border:0;background:var(--cookie-red);cursor:pointer;box-shadow:var(--shadow-md);transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.cookie-revisit[hidden]{display:none}
.cookie-revisit:hover,.cookie-revisit:focus-visible{transform:scale(1.08);box-shadow:var(--shadow-lg)}
.cookie-revisit:hover:before,.cookie-revisit:focus-visible:before{content:attr(data-tooltip);position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%);background:#4e4b66;color:#fff;font-size:12px;font-weight:600;line-height:16px;white-space:nowrap;padding:5px 10px;border-radius:var(--radius-sm);box-shadow:var(--shadow-sm)}
.cookie-revisit:hover:after,.cookie-revisit:focus-visible:after{content:"";position:absolute;left:calc(100% + 3px);top:50%;transform:translateY(-50%);border:5px solid transparent;border-right-color:#4e4b66}
.cookie-revisit svg{width:22px;height:22px}
.cookie-banner{position:fixed;left:0;right:0;bottom:0;z-index:1100}
.cookie-banner[hidden]{display:none}
.cookie-bar{background:var(--cookie-bg);padding:20px 28px calc(20px + env(safe-area-inset-bottom));box-shadow:var(--shadow-lg);animation:cookie-slide-up .4s var(--ease)}
.cookie-title{margin:0 0 8px;color:#fff;font-weight:700;font-size:18px;line-height:1.3}
.cookie-notice-group{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.cookie-desc{flex:1;min-width:240px}
.cookie-desc p{margin:0;color:rgba(255,255,255,.75);font-size:14px;line-height:1.6}
.cookie-btn-wrapper{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.cookie-btn{font-size:13px;font-family:inherit;font-weight:700;letter-spacing:.02em;line-height:1;padding:12px 24px;border-radius:var(--radius-pill);white-space:nowrap;cursor:pointer;margin:0;transition:transform .2s var(--ease),box-shadow .2s var(--ease),background-color .2s var(--ease),opacity .2s var(--ease)}
.cookie-btn:hover{transform:translateY(-1px)}
.cookie-btn-customize{color:#fff;background:transparent;border:1px solid rgba(255,255,255,.35)}
.cookie-btn-customize:hover{border-color:#fff}
.cookie-btn-reject{color:#fff;background:rgba(255,255,255,.08);border:1px solid transparent}
.cookie-btn-reject:hover{background:rgba(255,255,255,.14)}
.cookie-btn-accept{color:#fff;background:var(--cookie-red);border:1px solid var(--cookie-red);box-shadow:var(--shadow-sm)}
.cookie-btn-accept:hover{background:var(--cookie-red-light);box-shadow:var(--shadow-md)}
.cookie-preferences{position:fixed;inset:0;z-index:1101;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);padding:20px;animation:cookie-fade-in .2s var(--ease)}
.cookie-preferences[hidden]{display:none}
.cookie-pref-center{width:100%;max-width:680px;max-height:85vh;display:flex;flex-direction:column;background:var(--cookie-bg);color:#fff;border-radius:var(--radius);box-shadow:var(--shadow-lg);overflow:hidden;animation:cookie-pop-in .25s var(--ease)}
.cookie-pref-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid rgba(255,255,255,.12)}
.cookie-pref-title{font-size:17px;font-weight:700}
.cookie-pref-close{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:rgba(255,255,255,.08);border-radius:var(--radius-pill);border:0;color:#fff;cursor:pointer}
.cookie-pref-close:hover{background:rgba(255,255,255,.16)}
.cookie-pref-close svg{width:15px;height:15px}
.cookie-pref-body{padding:8px 24px 20px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.35) transparent}
.cookie-pref-body::-webkit-scrollbar{width:8px}
.cookie-pref-body::-webkit-scrollbar-track{background:transparent}
.cookie-pref-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.35);border-radius:var(--radius-pill)}
.cookie-pref-body::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.55)}
.cookie-pref-body>p{margin:14px 0 12px;font-size:14px;line-height:1.6;color:rgba(255,255,255,.7)}
.cookie-accordion{border-bottom:1px solid rgba(255,255,255,.1);padding:14px 0}
.cookie-accordion:last-child{border-bottom:0}
.cookie-accordion summary{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:15px;font-weight:700;list-style:none}
.cookie-accordion summary::-webkit-details-marker{display:none}
.cookie-accordion summary>span:first-child{margin-right:auto}
.cookie-accordion summary:after{content:"";width:10px;height:10px;flex:none;margin-left:8px;border-right:2px solid rgba(255,255,255,.5);border-bottom:2px solid rgba(255,255,255,.5);transform:rotate(45deg);transition:transform .2s var(--ease)}
.cookie-accordion[open] summary:after{transform:rotate(-135deg)}
.cookie-accordion p{margin:10px 0 0;font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.65)}
.cookie-always-active{color:#3fbf5f;font-weight:600;font-size:13px}
.cookie-switch{position:relative;display:inline-flex;width:38px;height:22px;flex:none;cursor:pointer}
.cookie-switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.cookie-switch span{position:absolute;inset:0;background:rgba(255,255,255,.2);border-radius:var(--radius-pill);pointer-events:none;transition:background-color .2s var(--ease)}
.cookie-switch span:before{content:"";position:absolute;height:16px;width:16px;left:3px;top:3px;border-radius:50%;background:#fff;transition:transform .2s var(--ease)}
.cookie-switch input:checked+span{background:var(--cookie-red)}
.cookie-switch input:checked+span:before{transform:translateX(16px)}
.cookie-switch input:focus-visible+span{outline:2px solid #fff;outline-offset:2px}
.cookie-pref-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:10px;padding:16px 24px;border-top:1px solid rgba(255,255,255,.12)}
.cookie-pref-footer .cookie-btn-preferences{color:#fff;background:rgba(255,255,255,.08);border:1px solid transparent}
.cookie-pref-footer .cookie-btn-preferences:hover{background:rgba(255,255,255,.16)}

/* Tablet */
@media(max-width:900px){
  .cookie-bar{padding:18px 20px calc(18px + env(safe-area-inset-bottom))}
  .cookie-notice-group{gap:16px}
  .cookie-pref-center{max-height:80vh}
}

/* Phone: bottom sheet + stacked, primary action first */
@media(max-width:600px){
  .cookie-notice-group{display:block}
  .cookie-title{font-size:16px}
  .cookie-desc p{font-size:13px}
  .cookie-btn-wrapper{display:flex;flex-direction:column;margin-top:14px;gap:8px}
  .cookie-btn{width:100%;text-align:center;order:3}
  .cookie-btn-accept{order:1}
  .cookie-btn-customize{order:2}
  .cookie-btn-reject{order:3}
  .cookie-preferences{padding:0;align-items:flex-end}
  .cookie-pref-center{max-width:none;max-height:88vh;width:100%;border-radius:var(--radius) var(--radius) 0 0;animation:cookie-slide-up .3s var(--ease)}
  .cookie-pref-footer{flex-direction:column;align-items:stretch}
  .cookie-pref-footer .cookie-btn{width:100%;text-align:center}
  .cookie-revisit{width:44px;height:44px;left:12px;bottom:12px}
}
@media(prefers-reduced-motion:reduce){.cookie-bar,.cookie-preferences,.cookie-pref-center{animation:none}}

/* Large tablet / small desktop */
@media(max-width:1200px){
  .poster-grid,.poster-grid-five{grid-template-columns:repeat(3,minmax(0,1fr))}
  .article-grid,.news-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .value-grid{grid-template-columns:repeat(2,1fr)}
  .film-grid{grid-template-columns:minmax(200px,260px) 1fr;gap:28px}
}

/* Tablet */
@media(max-width:900px){
  .genre-tabs{justify-content:flex-start}
  .site-header{padding:0 18px;gap:16px}
  .brand{margin-left:0}
  .brand img{width:200px}
  .menu-toggle{display:block;order:3}
  .search-toggle{order:2}
  .main-navigation{position:fixed;top:75px;left:0;right:0;bottom:auto;max-height:calc(100vh - 75px);overflow-y:auto;display:none;background:#000;padding:24px max(15px,calc((100% - 1600px)/2));flex-direction:column;align-items:flex-start;gap:18px;z-index:998}
  .main-navigation.is-open{display:flex}
  .main-navigation a{font-size:18px}
  .main-navigation a:after{display:none}
  .main-navigation a[aria-current=page]{background:rgba(234,27,35,.14);border-radius:var(--radius-sm)}
  .search-panel{grid-template-columns:repeat(2,1fr);padding:24px max(15px,calc((100% - 1600px)/2))}
  .search-panel .field.text{grid-column:span 2}
  .search-panel .emp{display:none}
  .search-panel .search-button{grid-column:span 2}
  .statement,.story-split,.contact-grid,.film-grid{grid-template-columns:1fr;gap:24px}
  .film-grid{gap:10px;padding:40px 24px}
  .contact-grid{padding:32px 24px}
  .story-split{padding:40px 0}
  /* About image on mobile: the whole photo at its natural proportions (height:auto - the
     width/height attributes alone kept it 600px tall and stretched once the column got
     narrower), full column width. Keeps the desktop rounded corners and shadow. */
  .story-split img{width:100%;height:auto;justify-self:stretch}
  .poster-grid,.poster-grid-five{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 15px}
  .news-grid,.article-grid{grid-template-columns:1fr}
  .value-grid{grid-template-columns:1fr}
  .film-grid .title-poster{display:none}
  .contact-grid aside{padding:22px}
  .values,.legal-copy{padding:40px 0}
  /* The banner artwork is a wide landscape with title/logo text baked into its left and
     right edges. background-size:cover crops those edges to fill a short hero box, so on a
     narrow phone the baked-in text was chopped off. background-size:contain fits the whole
     image inside the box instead - nothing cropped, all text visible - with the hero's
     black bg showing as a thin letterbox band above/below. aspect-ratio sizes the slot
     roughly to the artwork so those bands stay small; height:auto lets it drive the box. */
  .hero{height:auto;aspect-ratio:2/1}
  .hero-slide{background-size:contain !important}
  .hero-arrow{width:40px;height:40px;top:50%;bottom:auto;transform:translateY(-50%)}
  .hero-arrow svg{width:18px;height:18px}
  .hero-arrow:hover,.hero-arrow:focus-visible{transform:translateY(-50%) scale(1.08)}
  .hero-arrow:active{transform:translateY(-50%) scale(.96)}

  /* Stills on phones: the desktop 3-up transform carousel makes each still ~1/3 screen
     wide - far too small. Switch to one full-width still at a time on a native
     scroll-snap strip so it swipes like the rest of the mobile UI. The JS arrow
     carousel (site.js) bails when items.length <= 3 and otherwise only drives
     translateX via the arrows - which are hidden here - so the strip stays at
     translateX(0) and native overflow scrolling takes over cleanly. */
  .stills-section{padding:32px 0}
  .stills-carousel{gap:0}
  .stills-carousel__arrow{display:none}
  .stills-carousel__viewport{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-inline:16px}
  .stills-carousel__viewport::-webkit-scrollbar{display:none}
  .stills-strip{gap:12px;transform:none !important}
  .stills-strip__item{flex:0 0 100%;scroll-snap-align:center}
  .stills-strip__item:hover,.stills-strip__item:focus-visible{transform:none}
  .stills-strip__item:hover img,.stills-strip__item:focus-visible img{transform:none}
}

/* Large phone */
@media(max-width:600px){
  .statement,.catalog-section,.news-section{padding-block:32px}
  .statement h2,.section-heading h2,.genre-heading,.press-heading{font-size:1.3rem}
  .poster-grid,.poster-grid-five{gap:28px 10px}
  .title-card .tags span{font-size:11px;padding:2px 8px}
  .genre-tabs{gap:8px}
  .filter-bar{gap:10px}
  .article-grid{gap:24px}
  .contact-grid,.catalogue-page,.press-list,.legal-copy{padding-block:32px}
  .contact-grid{padding-inline:16px}
  .search-panel{padding-block:20px}
  .film-grid{padding:24px 16px}
  /* Google's reCAPTCHA checkbox widget renders as a fixed 304x78px iframe regardless of
     its container's actual width - on a narrow phone, .contact-grid aside's own padding
     (.contact-grid's 16px + aside's 22px, on both sides) leaves less than 304px available
     (as little as ~214px at a 320px-wide screen), so the widget was overflowing the card
     horizontally. CSS can't resize the iframe itself, but scaling the whole widget down
     0.75x (304x78 -> 228x58.5, fitting the narrowest phones this site supports) and
     collapsing the wrapper's own box to match that smaller rendered size - rather than
     leaving the original 304x78 footprint's worth of dead space behind it - is the
     standard fix for this exact widget. */
  .contact-form .g-recaptcha{width:228px;height:58.5px;overflow:hidden;margin-bottom:18px}
  .contact-form .g-recaptcha>div{transform:scale(0.75);transform-origin:left top}
}

/* Small phone */
@media(max-width:425px){
  .brand img{width:150px}
  .site-header{gap:10px}
  .search-panel{grid-template-columns:1fr}
  .search-panel .field.text,.search-panel .search-button{grid-column:span 1}
  .footer-inner .npc-seal{min-width:60px}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important}}