/* ══ Theme: Cinema ═══════════════════════════════════════════════════
   Near-black opening band with the headline at full width, Will and Norman
   beside it, and the work thrown across it; everything between the opening
   and the close is light. Outfit throughout, the face the logo's wordmark is
   set in. Orange is the one accent and violet the one tint, both from the
   logo.

   Loaded after site.css and the inline palette, so every token set here on
   html:root is the last word. The inner pages keep their markup: this file
   dresses them. */

html[data-theme="cinema"]:root{
  --white:#FFFFFF; --off:#F7F5F0; --ink:#121214; --heading:#121214; --charcoal:#0E0D12;
  --grey:#5A5A60; --grey-2:#7A7A82; --line:#E3E0D8;
  --brand:#5B2A86; --brand-deep:#5B2A86; --brand-lift:#E8742A; --accent:#A64F18; --accent-soft:#F4ECFA;
  --hl:#E8742A; --swipe:#E8742A;
  --orange:#E8742A; --violet:#5B2A86;
  --f:"Outfit",system-ui,-apple-system,"Segoe UI",sans-serif;
  --measure:1280px;
  --h1:clamp(3rem,8vw,7.5rem); --h2:clamp(2.2rem,5vw,4.6rem); --h3:clamp(1.3rem,1.9vw,1.75rem); --h4:clamp(1.05rem,1.4vw,1.25rem);
}
[data-theme="cinema"] body{font-size:18px}
[data-theme="cinema"] h1,[data-theme="cinema"] h2,[data-theme="cinema"] h3,[data-theme="cinema"] h4{letter-spacing:-.04em; line-height:.94; font-weight:800}
[data-theme="cinema"] h3,[data-theme="cinema"] h4{letter-spacing:-.025em; line-height:1.05}
[data-theme="cinema"] .eyebrow{font-size:12px; letter-spacing:.16em; color:var(--orange)}
[data-theme="cinema"] .sec--dark .eyebrow{color:var(--orange)}
[data-theme="cinema"] .hello{color:var(--orange); font-size:12px; letter-spacing:.16em; text-transform:uppercase; font-weight:600}
[data-theme="cinema"] .lede,[data-theme="cinema"] .hero__sub{color:var(--grey)}
[data-theme="cinema"] .sec--dark .lede,[data-theme="cinema"] .sec--dark .hero__sub,[data-theme="cinema"] .sec--dark .body{color:#C9C7D0}

/* buttons: square-cornered, orange with dark text as the primary */
[data-theme="cinema"] .btn{border-radius:6px; padding:15px 28px; font-size:16px; font-weight:600;
  background:var(--orange); border-color:var(--orange); color:var(--ink)}
[data-theme="cinema"] .btn:hover{background:var(--ink); border-color:var(--ink); color:var(--white)}
[data-theme="cinema"] .btn--line{background:none; color:var(--ink); border-color:var(--ink)}
[data-theme="cinema"] .btn--line:hover{background:var(--ink); color:var(--white)}
[data-theme="cinema"] .sec--dark .btn{background:var(--orange); border-color:var(--orange); color:var(--ink)}
[data-theme="cinema"] .sec--dark .btn:hover{background:var(--white); border-color:var(--white); color:var(--ink)}
[data-theme="cinema"] .sec--dark .btn--line{background:none; color:var(--white); border-color:rgba(255,255,255,.6)}
[data-theme="cinema"] .sec--dark .btn--line:hover{background:var(--white); color:var(--ink)}
[data-theme="cinema"] .tlink:hover{color:var(--accent)}

/* header: no chips when at rest; compact chips keep the stock white look */
[data-theme="cinema"] .navbar a{font-size:15px; font-weight:600}
[data-theme="cinema"] .topbar{background:#000; color:#C9C7D0}
[data-theme="cinema"] .overlay nav a .u::before{background:var(--orange)}

/* inner page heroes open on the near-black, like the home page */
[data-theme="cinema"] .hero.sec--dark{background:var(--charcoal)}
[data-theme="cinema"] .hero.sec--dark h1{color:var(--white)}
[data-theme="cinema"] .hero.sec--dark .hero__sub{color:#C9C7D0}
[data-theme="cinema"] .hero.sec--dark .eyebrow{color:var(--orange)}
[data-theme="cinema"] .hero h1{letter-spacing:-.05em}
[data-theme="cinema"] .pagehero img{border-radius:10px}

/* cards and panels: tighter corners than Classic */
[data-theme="cinema"] .svccard,[data-theme="cinema"] .areacard,[data-theme="cinema"] .route,
[data-theme="cinema"] .do,[data-theme="cinema"] .pj,[data-theme="cinema"] .ck{border-radius:10px}
[data-theme="cinema"] .field input,[data-theme="cinema"] .field select,[data-theme="cinema"] .field textarea{border-radius:6px}

/* close and footer on the same near-black, with the light logo */
[data-theme="cinema"] .cta{background:var(--charcoal); color:var(--white)}
[data-theme="cinema"] .cta h2,[data-theme="cinema"] .cta h3{color:var(--white)}
[data-theme="cinema"] .cta .body,[data-theme="cinema"] .cta .lede{color:#C9C7D0}
[data-theme="cinema"] .cta .btn{background:var(--orange); border-color:var(--orange); color:var(--ink)}
[data-theme="cinema"] .cta .btn:hover{background:var(--white); border-color:var(--white)}
[data-theme="cinema"] .cta .btn--line{background:none; color:var(--white); border-color:rgba(255,255,255,.6)}
[data-theme="cinema"] .cta .btn--line:hover{background:var(--white); color:var(--ink)}
[data-theme="cinema"] .cta h2{max-width:14ch}
[data-theme="cinema"] .cta .cta__tel,[data-theme="cinema"] .cta .cta__mail{color:var(--white)}
[data-theme="cinema"] .foot{background:var(--charcoal)}
[data-theme="cinema"] .fcol h3{color:var(--orange)}
[data-theme="cinema"] .credstrip{background:var(--off)}

/* ── the home page ─────────────────────────────────────────────────── */
/* The glow. Two soft lights in the logo's colours on the black of every
   opening band: violet high on the left behind the headline, orange low on
   the right, blurred past any visible edge so it reads as depth rather
   than a gradient. A setting, with two strengths, so it can be judged on
   the live site and turned off in one click. The band itself stays black;
   the type sits over the darkest part. The inner pages carry the same
   lights at a smaller size, since their bands are a third of the height. */
[data-theme="cinema"] .hero.sec--dark,[data-theme="cinema"] .cin-hero{position:relative; isolation:isolate; overflow:hidden}
[data-theme="cinema"] .hero.sec--dark::before,[data-theme="cinema"] .hero.sec--dark::after,
[data-theme="cinema"] .cin-hero::before,[data-theme="cinema"] .cin-hero::after{content:""; position:absolute; border-radius:50%; pointer-events:none; z-index:-1; filter:blur(90px); display:none}
[data-theme="cinema"] .cin-hero::before{width:60vw; height:60vw; max-width:900px; max-height:900px; left:-14vw; top:-24vw; background:var(--violet)}
[data-theme="cinema"] .cin-hero::after{width:46vw; height:46vw; max-width:700px; max-height:700px; right:-10vw; bottom:-12vw; background:var(--orange)}
[data-theme="cinema"] .hero.sec--dark::before{width:44vw; height:44vw; max-width:640px; max-height:640px; left:-12vw; top:-22vw; background:var(--violet)}
[data-theme="cinema"] .hero.sec--dark::after{width:30vw; height:30vw; max-width:440px; max-height:440px; right:-8vw; bottom:-16vw; background:var(--orange)}
html[data-glow="soft"][data-theme="cinema"] .hero.sec--dark::before,html[data-glow="soft"][data-theme="cinema"] .hero.sec--dark::after,
html[data-glow="soft"][data-theme="cinema"] .cin-hero::before,html[data-glow="soft"][data-theme="cinema"] .cin-hero::after,
html[data-glow="strong"][data-theme="cinema"] .hero.sec--dark::before,html[data-glow="strong"][data-theme="cinema"] .hero.sec--dark::after,
html[data-glow="strong"][data-theme="cinema"] .cin-hero::before,html[data-glow="strong"][data-theme="cinema"] .cin-hero::after{display:block}
html[data-glow="soft"][data-theme="cinema"] .cin-hero::before,html[data-glow="soft"][data-theme="cinema"] .hero.sec--dark::before{opacity:.22}
html[data-glow="soft"][data-theme="cinema"] .cin-hero::after,html[data-glow="soft"][data-theme="cinema"] .hero.sec--dark::after{opacity:.12}
html[data-glow="strong"][data-theme="cinema"] .cin-hero::before,html[data-glow="strong"][data-theme="cinema"] .hero.sec--dark::before{opacity:.38}
html[data-glow="strong"][data-theme="cinema"] .cin-hero::after,html[data-glow="strong"][data-theme="cinema"] .hero.sec--dark::after{opacity:.22}
[data-theme="cinema"] .cin-hero{background:var(--charcoal); color:var(--white); overflow:hidden;
  padding-top:clamp(150px,15vw,220px); padding-bottom:0}
/* Each half of the headline is one line across the whole measure. The size
   here is a starting guess from the viewport; site.js then measures each
   line against the measure and scales it to fit exactly, whatever the
   words are. Below 760px no size fits a line, so it wraps normally and the
   script stands down. */
[data-theme="cinema"] .cin-hero h1{color:var(--white); max-width:none; font-size:clamp(2.4rem,6.5vw,7.6rem); line-height:1.02; letter-spacing:-.025em; word-spacing:.04em}
[data-theme="cinema"] .cin-hero h1 .hl,[data-theme="cinema"] .cin-hero h1 .l2{display:block; line-height:1}
@media (min-width:761px){[data-theme="cinema"] .cin-hero h1 .hl{white-space:nowrap}}
/* The second line is the line under the headline, not a second headline:
   a fixed fraction of the first rather than fitted to the width on its
   own, so a short line stays small and the two keep their order. */
[data-theme="cinema"] .cin-hero h1 .l2{color:#DAD6E6; font-size:.42em; font-weight:600; letter-spacing:-.02em; margin-top:.35em; max-width:30em}
[data-theme="cinema"] .cin-hero__row{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(24px,4vw,72px); align-items:end; margin-top:clamp(40px,5vw,72px)}
[data-theme="cinema"] .cin-hero__words p{font-size:clamp(1.1rem,1.5vw,1.375rem); line-height:1.4; color:#C9C7D0; max-width:30em}
[data-theme="cinema"] .cin-hero__cta{display:flex; gap:14px; flex-wrap:wrap; justify-content:flex-end; padding-bottom:4px}
/* the asterisk and its note, on black: orange so the mark can be seen,
   and the bubble a lighter layer over the band rather than the same colour */
[data-theme="cinema"] .cin-hero .fnmark{color:var(--orange); font-weight:700}
[data-theme="cinema"] .cin-hero .fnmark[aria-expanded="true"]{background:var(--orange); color:var(--ink)}
[data-theme="cinema"] .cin-hero .fnote__star{color:var(--orange)}
[data-theme="cinema"] .cin-hero .fnote{color:#9A98A3}
[data-theme="cinema"] .fnote--pop{background:#2A2834; color:#F3F1F7; border:1px solid #4A4858; box-shadow:0 24px 60px rgba(0,0,0,.6)}
[data-theme="cinema"] .fnote--pop::before{background:#2A2834; border-left:1px solid #4A4858; border-top:1px solid #4A4858}
[data-theme="cinema"] .fnote--pop a{color:var(--orange)}
@media (max-width:900px){[data-theme="cinema"] .cin-hero__row{grid-template-columns:1fr; gap:28px}}

/* the screens, thrown onto the table: all three landscape, since the
   screenshots are desktop captures and a desktop page in a phone frame is
   a crop of the wrong thing */
[data-theme="cinema"] .cin-table{position:relative; height:clamp(300px,42vw,620px); margin-top:clamp(24px,4vw,56px)}
[data-theme="cinema"] .cin-shot{position:absolute; overflow:hidden; border-radius:10px; background:#1E1D24;
  box-shadow:0 40px 80px rgba(0,0,0,.55); border:1px solid #2E2D36; aspect-ratio:16/10}
[data-theme="cinema"] .cin-shot img{width:100%; height:100%; object-fit:cover; object-position:top}
[data-theme="cinema"] .cin-shot--a{left:10%; top:4%; width:64%; transform:rotate(-4deg); z-index:2}
[data-theme="cinema"] .cin-shot--b{right:0; top:18%; width:40%; transform:rotate(3deg); z-index:3}
[data-theme="cinema"] .cin-shot--c{left:0; top:38%; width:30%; transform:rotate(-7deg); z-index:1}
@media (max-width:700px){
  [data-theme="cinema"] .cin-table{height:66vw}
  [data-theme="cinema"] .cin-shot--c{display:none}
  [data-theme="cinema"] .cin-shot--a{left:0; width:74%}
  [data-theme="cinema"] .cin-shot--b{right:0; width:44%}
}
@media (prefers-reduced-motion:reduce){[data-theme="cinema"] .cin-shot{transform:none}}

/* the clients. Three styles, chosen under Settings:
     grid    each mark in its own cell on white
     tiles   each mark on a white tile with a hairline, on the off-white
     ticker  one slow row across the page, repeating, that stops when the
             pointer is on it or motion is reduced
   The files are small (380 by 195), so a mark is drawn no bigger than it
   can stand, and never stretched. */
[data-theme="cinema"] .cin-clients{background:var(--white); border-bottom:1px solid var(--line); padding-block:clamp(28px,3.5vw,48px)}
[data-theme="cinema"] .cin-clients__head{display:flex; justify-content:space-between; align-items:baseline; gap:16px; flex-wrap:wrap; margin-bottom:22px}
[data-theme="cinema"] .cin-clients__in{display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:18px 24px; align-items:center; justify-items:center;
  font-weight:600; font-size:16px; text-align:center}
[data-theme="cinema"] .cin-clients__in img{width:100%; max-width:190px; height:auto; max-height:96px; object-fit:contain}
@media (max-width:620px){[data-theme="cinema"] .cin-clients__in{grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}[data-theme="cinema"] .cin-clients__in img{max-height:60px}}

[data-theme="cinema"] .cin-clients--tiles{background:var(--off)}
[data-theme="cinema"] .cin-clients--tiles .cin-clients__in{gap:14px; grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
[data-theme="cinema"] .cin-clients--tiles .cin-clients__in > *{display:grid; place-items:center; width:100%; min-height:110px; padding:18px;
  background:var(--white); border:1px solid var(--line); border-radius:10px; box-sizing:border-box}
[data-theme="cinema"] .cin-clients--tiles .cin-clients__in img{max-height:64px}

[data-theme="cinema"] .cin-clients--ticker .cin-clients__in{display:flex; flex-wrap:nowrap; gap:0; overflow:hidden; justify-items:start;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
[data-theme="cinema"] .cin-clients--ticker .cin-track{display:flex; flex:0 0 auto; align-items:center; gap:clamp(40px,5vw,80px); padding-right:clamp(40px,5vw,80px);
  animation:cin-ticker 48s linear infinite}
[data-theme="cinema"] .cin-clients--ticker .cin-track img{max-width:170px; max-height:72px; width:auto; height:auto}
[data-theme="cinema"] .cin-clients--ticker .cin-clients__in:hover .cin-track{animation-play-state:paused}
@keyframes cin-ticker{from{transform:translateX(0)}to{transform:translateX(-100%)}}
@media (prefers-reduced-motion:reduce){[data-theme="cinema"] .cin-clients--ticker .cin-track{animation:none}[data-theme="cinema"] .cin-clients--ticker .cin-clients__in{flex-wrap:wrap; mask-image:none}[data-theme="cinema"] .cin-clients--ticker .cin-track + .cin-track{display:none}}

/* work */
[data-theme="cinema"] .cin-head{display:flex; justify-content:space-between; align-items:end; gap:24px; flex-wrap:wrap; margin-bottom:clamp(28px,4vw,48px)}
[data-theme="cinema"] .cin-head h2{font-size:var(--h2)}
[data-theme="cinema"] .cin-head h2 em{font-style:normal; color:var(--orange)}
[data-theme="cinema"] .cin-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; align-items:stretch}
/* A card is the screenshot in a fixed 16:10 window with the caption bar
   under it, not over it, so no part of the picture is hidden by the words
   and every window is the same shape whatever the capture's proportions.
   The window shows the top of the page, which is where a site's own
   identity is. */
[data-theme="cinema"] .cin-card{display:flex; flex-direction:column; overflow:hidden; border-radius:10px; background:var(--charcoal);
  text-decoration:none; color:inherit}
[data-theme="cinema"] .cin-card--wide{grid-column:span 2}
/* Every card the same size and every picture whole: the project captures
   are shot at 17:10 (2040 by 1200) and the window is 17:10, so each one
   fills its card edge to edge with nothing cut and nothing scaled. A
   capture uploaded later at another shape fills the window from the top. */
[data-theme="cinema"] .cin-card__pic{display:block; overflow:hidden; background:#121214; aspect-ratio:17/10}
[data-theme="cinema"] .cin-card__pic img{width:100%; height:100%; object-fit:cover; object-position:top center; display:block; transition:transform .5s ease}
[data-theme="cinema"] .cin-card__ov{padding:18px 28px 22px; color:var(--white); display:flex; flex-direction:column; gap:6px; min-width:0}
[data-theme="cinema"] .cin-card:hover .cin-card__pic img{transform:scale(1.03)}
/* One line, never two. The client sits above the title in small caps,
   and the title runs the full width on one line: site.js shrinks any title
   that would not fit (data-fit-shrink), and never grows one that does. */
[data-theme="cinema"] .cin-card__ov h3{margin:0; color:var(--white); font-size:clamp(1.3rem,2.1vw,1.9rem); letter-spacing:-.03em; line-height:1.1;
  white-space:nowrap; overflow:hidden; min-width:0}
[data-theme="cinema"] .cin-card__ov small{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--orange); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
@media (max-width:760px){[data-theme="cinema"] .cin-grid{grid-template-columns:1fr}[data-theme="cinema"] .cin-card--wide{grid-column:auto}}

/* services as four moves */
[data-theme="cinema"] .cin-row{display:grid; grid-template-columns:120px minmax(0,1fr) minmax(0,1fr); gap:32px; padding:32px 0; border-top:1px solid var(--ink); align-items:start}
[data-theme="cinema"] .cin-row:last-child{border-bottom:1px solid var(--ink)}
[data-theme="cinema"] .cin-row .n{font-weight:800; font-size:clamp(2.2rem,4vw,3.5rem); letter-spacing:-.04em; line-height:.9; color:var(--violet)}
[data-theme="cinema"] .cin-row h3{font-size:clamp(1.6rem,2.8vw,2.5rem); letter-spacing:-.035em; line-height:1}
[data-theme="cinema"] .cin-row p{color:var(--grey); font-size:17px}
[data-theme="cinema"] .cin-row .tlink{margin-top:14px; font-size:16px}
@media (max-width:760px){[data-theme="cinema"] .cin-row{grid-template-columns:1fr; gap:10px}}

/* about */
[data-theme="cinema"] .cin-about{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(32px,5vw,80px); align-items:center}
[data-theme="cinema"] .cin-about h2{font-size:clamp(2.4rem,5.4vw,5rem)}
[data-theme="cinema"] .cin-about h2 em{font-style:normal; color:var(--violet)}
[data-theme="cinema"] .cin-about .body{max-width:34em; margin-top:clamp(20px,2.5vw,32px)}
/* Will and Norman to the right of the words, the same drawing and labels
   Classic puts in its hero. No frame, like Will asked for the portrait on
   Classic. */
[data-theme="cinema"] .cin-about .hero__art{max-width:440px; margin:0 0 0 auto}
[data-theme="cinema"] .cin-about .hero__art img{width:100%; max-width:none}
[data-theme="cinema"] .cin-about .annot{max-width:none; margin-inline:0}
@media (max-width:860px){[data-theme="cinema"] .cin-about .hero__art{max-width:320px; margin-inline:auto}}
@media (max-width:860px){[data-theme="cinema"] .cin-about{grid-template-columns:1fr}}

/* plugins */
[data-theme="cinema"] .cin-plug{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px}
[data-theme="cinema"] .cin-plug a{display:block; text-decoration:none; color:inherit; background:var(--white); border:1px solid var(--line); border-radius:10px; padding:20px}
[data-theme="cinema"] .cin-plug a:hover{border-color:var(--ink)}
[data-theme="cinema"] .cin-plug img{border-radius:6px; margin-bottom:14px}
[data-theme="cinema"] .cin-plug h3{font-size:1.2rem}
[data-theme="cinema"] .cin-plug p{color:var(--grey); font-size:15px; margin-top:6px}
@media (max-width:760px){[data-theme="cinema"] .cin-plug{grid-template-columns:1fr}}

/* quotes */
[data-theme="cinema"] .cin-quote{border-left:4px solid var(--orange); padding-left:24px; max-width:48em}
[data-theme="cinema"] .cin-quote + .cin-quote{margin-top:32px}
[data-theme="cinema"] .cin-quote blockquote{margin:0; font-size:clamp(1.2rem,1.8vw,1.5rem); font-weight:500; letter-spacing:-.01em}
[data-theme="cinema"] .cin-quote p{margin-top:10px; color:var(--grey); font-size:15px}