/*
Theme Name:   Riot Design
Theme URI:    https://riotdesign.ca
Author:       Dan Kranstz — Riot Design
Author URI:   https://riotdesign.ca
Description:  A bold, high-contrast theme for small business consultants, studios and agencies. Built for Riot Design — small business consulting from idea to launch across Toronto, the GTA and Halton. Ships with a dropdown menu bar, a rotating image banner, an infinite image roller, transparent pricing tables and a full business intake form. Pairs with the Riot Design Core plugin, which supplies the content types, shortcodes and forms.
Version:      1.2.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  riot-design
Tags:         business, portfolio, one-column, two-columns, custom-menu, custom-logo, custom-colors, featured-images, block-styles, wide-blocks, editor-style, full-width-template, threaded-comments, translation-ready
*/

/* ==========================================================================
   RIOT DESIGN — Core Stylesheet
   Toronto / GTA / Halton small business consulting, branding & web
   ========================================================================== */

/* ---------- Tokens ---------- */
:root{
  --ink:#08080B;
  --ink-2:#101016;
  --ink-3:#17171F;
  --line:rgba(255,255,255,.10);
  --line-strong:rgba(255,255,255,.20);

  --paper:#F6F4EF;
  --paper-2:#EDE9E0;

  --riot:#FF2E3F;          /* primary accent — riot red */
  --riot-dark:#D8121F;
  --volt:#FFD400;          /* secondary accent — voltage yellow */
  --ice:#7CE7FF;           /* tertiary, used sparingly */

  --text:#F3F1EC;
  --text-dim:#A5A3AD;
  --text-ink:#111116;
  --text-ink-dim:#55535E;

  --display:"Archivo Black","Arial Black",Impact,"Haettenschweiler",sans-serif;
  --body:"Inter","Helvetica Neue",Arial,-apple-system,BlinkMacSystemFont,sans-serif;

  --wrap:1200px;
  --gut:clamp(20px,5vw,48px);
  --radius:4px;
  --nav-h:76px;

  --shadow:0 24px 60px -20px rgba(0,0,0,.6);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 20px)}
body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:var(--body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0 0 .5em;line-height:1.03;letter-spacing:-.02em}
p{margin:0 0 1.1em}
ul,ol{margin:0 0 1.1em;padding-left:1.25em}
li{margin-bottom:.45em}
hr{border:0;border-top:1px solid var(--line);margin:48px 0}
::selection{background:var(--riot);color:#fff}

/* ---------- Type scale ---------- */
.display-xl{font-family:var(--display);font-size:clamp(2.9rem,9vw,6.6rem);text-transform:uppercase;letter-spacing:-.03em;line-height:.92}
.display-l{font-family:var(--display);font-size:clamp(2.2rem,5.6vw,4rem);text-transform:uppercase;letter-spacing:-.025em;line-height:1}
.display-m{font-family:var(--display);font-size:clamp(1.6rem,3.4vw,2.5rem);text-transform:uppercase;letter-spacing:-.02em;line-height:1.06}
.display-s{font-family:var(--display);font-size:clamp(1.15rem,2vw,1.45rem);text-transform:uppercase;letter-spacing:-.01em;line-height:1.15}
.eyebrow{
  font-family:var(--body);font-weight:800;font-size:.72rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--riot);margin:0 0 18px;display:flex;align-items:center;gap:12px;
}
.eyebrow::before{content:"";width:28px;height:2px;background:var(--riot);flex:none}
.eyebrow.on-paper{color:var(--riot-dark)}
.eyebrow.on-paper::before{background:var(--riot-dark)}
.lede{font-size:clamp(1.06rem,1.7vw,1.3rem);color:var(--text-dim);line-height:1.6;max-width:62ch}
.section-note{color:var(--text-dim);font-size:.95rem}

/* ---------- Layout ---------- */
.wrap{width:min(var(--wrap),100% - var(--gut)*2);margin-inline:auto}
.wrap-narrow{width:min(860px,100% - var(--gut)*2);margin-inline:auto}
section{padding:clamp(64px,9vw,120px) 0;position:relative}
.band-paper{background:var(--paper);color:var(--text-ink)}
.band-paper .lede,.band-paper .section-note{color:var(--text-ink-dim)}
.band-ink2{background:var(--ink-2)}
.band-riot{background:var(--riot);color:#fff}
.band-riot .lede{color:rgba(255,255,255,.88)}
.band-riot .eyebrow{color:#fff}
.band-riot .eyebrow::before{background:#fff}

.grid{display:grid;gap:clamp(20px,3vw,32px)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.split-wide{grid-template-columns:1.15fr .85fr}
.stack-center{text-align:center;max-width:760px;margin-inline:auto}
.stack-center .eyebrow{justify-content:center}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 30px;border:2px solid transparent;border-radius:var(--radius);
  font-family:var(--display);font-size:.83rem;letter-spacing:.1em;text-transform:uppercase;
  cursor:pointer;transition:transform .16s ease,background .16s ease,color .16s ease,border-color .16s ease,box-shadow .16s ease;
  text-align:center;line-height:1.2;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--riot);color:#fff;box-shadow:0 10px 0 -4px rgba(255,46,63,.28)}
.btn-primary:hover{background:#ff4757}
.btn-volt{background:var(--volt);color:#111116}
.btn-volt:hover{background:#ffe14d}
.btn-ghost{border-color:var(--line-strong);color:var(--text)}
.btn-ghost:hover{border-color:var(--text);background:rgba(255,255,255,.06)}
.btn-ink{border-color:var(--text-ink);color:var(--text-ink)}
.btn-ink:hover{background:var(--text-ink);color:var(--paper)}
.btn-white{background:#fff;color:#111116}
.btn-white:hover{background:#f0eee9}
.btn-row{display:flex;flex-wrap:wrap;gap:14px}
.btn-sm{padding:11px 20px;font-size:.72rem}
.menu-cta{display:none}

/* ---------- Navigation ---------- */
.nav{
  position:sticky;top:0;z-index:100;background:rgba(8,8,11,.86);
  backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-inner{width:min(var(--wrap),100% - var(--gut)*2);margin-inline:auto;height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:11px;flex:none}
.brand-mark{
  width:38px;height:38px;background:var(--riot);border-radius:3px;
  display:grid;place-items:center;font-family:var(--display);font-size:1.15rem;color:#fff;
  transform:rotate(-4deg);transition:transform .2s ease;
}
.brand:hover .brand-mark{transform:rotate(4deg)}
.brand-name{font-family:var(--display);font-size:1.12rem;text-transform:uppercase;letter-spacing:-.01em;line-height:1}
.brand-name small{display:block;font-family:var(--body);font-weight:600;font-size:.55rem;letter-spacing:.24em;color:var(--text-dim);margin-top:3px}

.menu{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0}
.menu > li{position:relative;margin:0}
.menu > li > a{
  display:flex;align-items:center;gap:6px;padding:9px 13px;border-radius:var(--radius);
  font-size:.83rem;font-weight:600;letter-spacing:.03em;color:var(--text-dim);
  transition:color .15s ease,background .15s ease;white-space:nowrap;
}
.menu > li > a:hover,.menu > li.open > a{color:var(--text);background:rgba(255,255,255,.06)}
.menu > li > a.active{color:#fff}
.menu > li > a.active::after{content:"";position:absolute;left:13px;right:13px;bottom:2px;height:2px;background:var(--riot)}
.caret{width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s ease;flex:none}
.menu > li.open .caret{transform:rotate(-135deg) translateY(-2px)}

.dropdown{
  position:absolute;top:calc(100% + 10px);left:0;min-width:310px;
  background:var(--ink-2);border:1px solid var(--line);border-radius:6px;
  box-shadow:var(--shadow);padding:8px;list-style:none;margin:0;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
}
.menu > li.open .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown li{margin:0}
.dropdown a{display:block;padding:11px 14px;border-radius:4px;transition:background .14s ease}
.dropdown a:hover{background:rgba(255,46,63,.14)}
.dropdown strong{display:block;font-size:.9rem;font-weight:700;color:var(--text);margin-bottom:2px}
.dropdown span{display:block;font-size:.78rem;color:var(--text-dim);line-height:1.4}
.dropdown-sep{height:1px;background:var(--line);margin:6px 10px}

.nav-cta{display:flex;align-items:center;gap:12px;flex:none}
.nav-phone{font-size:.83rem;font-weight:700;color:var(--text-dim);white-space:nowrap;transition:color .15s}
.nav-phone:hover{color:var(--volt)}
.burger{display:none;width:44px;height:44px;background:none;border:1px solid var(--line-strong);border-radius:4px;cursor:pointer;padding:0;place-items:center}
.burger span{display:block;width:20px;height:2px;background:var(--text);position:relative;transition:background .2s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--text);transition:transform .22s ease}
.burger span::before{top:-6px}
.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}

/* ---------- Hero ---------- */
.hero{
  position:relative;padding:clamp(70px,11vw,140px) 0 clamp(60px,8vw,110px);
  background:
    radial-gradient(900px 520px at 78% 8%,rgba(255,46,63,.20),transparent 62%),
    radial-gradient(720px 460px at 8% 92%,rgba(255,212,0,.10),transparent 60%),
    var(--ink);
  overflow:hidden;
}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:70px 70px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 40%,#000,transparent 78%);
  mask-image:radial-gradient(ellipse at 50% 40%,#000,transparent 78%);
}
.hero > *{position:relative;z-index:1}
.hero-sub{padding:clamp(56px,7vw,88px) 0 clamp(48px,6vw,72px)}
.hero-sub .display-xl{font-size:clamp(2.4rem,6.4vw,4.5rem)}
.hl{color:var(--riot)}
.hl-volt{color:var(--volt)}
.hl-mark{background:var(--riot);color:#fff;padding:0 .12em;display:inline-block;transform:rotate(-1.2deg)}

.hero-stats{display:flex;flex-wrap:wrap;gap:clamp(24px,5vw,56px);margin-top:44px;padding-top:32px;border-top:1px solid var(--line)}
.stat-num{font-family:var(--display);font-size:clamp(1.7rem,3.4vw,2.5rem);color:var(--volt);line-height:1}
.stat-lbl{font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;color:var(--text-dim);margin-top:7px}

/* ---------- Cards ---------- */
.card{
  background:var(--ink-2);border:1px solid var(--line);border-radius:6px;
  padding:clamp(24px,3vw,34px);transition:transform .2s ease,border-color .2s ease,background .2s ease;
  display:flex;flex-direction:column;
}
.card:hover{transform:translateY(-4px);border-color:var(--line-strong);background:var(--ink-3)}
.card h3{font-family:var(--display);text-transform:uppercase;font-size:1.12rem;letter-spacing:-.01em}
.card p{color:var(--text-dim);font-size:.96rem}
.card p:last-child{margin-bottom:0}
.card-num{font-family:var(--display);font-size:2.4rem;color:var(--riot);line-height:1;margin-bottom:16px;opacity:.9}
.card-ico{
  width:50px;height:50px;border-radius:5px;background:rgba(255,46,63,.13);border:1px solid rgba(255,46,63,.3);
  display:grid;place-items:center;font-size:1.4rem;margin-bottom:20px;
}
.card-link{margin-top:auto;padding-top:18px;font-family:var(--display);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--riot);display:inline-flex;gap:8px;align-items:center}
.card:hover .card-link{gap:13px}
.card-link{transition:gap .18s ease}
.card.on-paper{background:#fff;border-color:rgba(0,0,0,.10)}
.card.on-paper:hover{background:#fff;border-color:rgba(0,0,0,.24)}
.card.on-paper p{color:var(--text-ink-dim)}
.card.on-paper .card-ico{background:rgba(216,18,31,.08);border-color:rgba(216,18,31,.22)}
.card.on-paper .card-num,.card.on-paper .card-link{color:var(--riot-dark)}

/* ---------- Media / portfolio ---------- */
.shot{position:relative;border-radius:6px;overflow:hidden;border:1px solid var(--line);background:var(--ink-2)}
.shot img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.shot:hover img{transform:scale(1.05)}
.shot-tall img{aspect-ratio:3/4}
.shot-cap{position:absolute;inset:auto 0 0 0;padding:20px;background:linear-gradient(transparent,rgba(0,0,0,.9) 62%)}
.shot-cap h3{margin:0 0 4px;font-family:var(--display);text-transform:uppercase;font-size:1rem;color:#fff}
.shot-cap p{margin:0;font-size:.8rem;color:rgba(255,255,255,.7)}
.tag{
  display:inline-block;padding:5px 11px;border:1px solid var(--line-strong);border-radius:100px;
  font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;font-weight:700;color:var(--text-dim);
  margin:0 6px 6px 0;
}
.tag-riot{background:var(--riot);border-color:var(--riot);color:#fff}
.tag-volt{background:var(--volt);border-color:var(--volt);color:#111116}

/* ---------- Pricing ---------- */
.price-grid{display:grid;gap:24px;grid-template-columns:repeat(3,1fr);align-items:start}
.price-card{
  background:var(--ink-2);border:1px solid var(--line);border-radius:8px;padding:clamp(26px,3vw,36px);
  display:flex;flex-direction:column;position:relative;transition:border-color .2s,transform .2s;
}
.price-card:hover{border-color:var(--line-strong);transform:translateY(-4px)}
.price-card.featured{border-color:var(--riot);background:linear-gradient(180deg,rgba(255,46,63,.09),transparent 45%),var(--ink-2)}
.price-badge{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--riot);color:#fff;padding:6px 16px;border-radius:100px;
  font-family:var(--display);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;white-space:nowrap;
}
.price-name{font-family:var(--display);text-transform:uppercase;font-size:1.15rem;margin:0 0 6px}
.price-for{font-size:.85rem;color:var(--text-dim);margin:0 0 22px;min-height:2.6em}
.price-fig{display:flex;align-items:baseline;gap:7px;margin-bottom:6px;flex-wrap:wrap}
.price-fig .amt{font-family:var(--display);font-size:clamp(2rem,4vw,2.7rem);line-height:1;color:var(--volt)}
.price-fig .per{font-size:.85rem;color:var(--text-dim)}
.price-meta{font-size:.78rem;color:var(--text-dim);margin-bottom:22px;letter-spacing:.02em}
.price-list{list-style:none;padding:0;margin:0 0 26px;font-size:.93rem}
.price-list li{position:relative;padding-left:26px;margin-bottom:11px;color:var(--text-dim)}
.price-list li::before{content:"";position:absolute;left:2px;top:.55em;width:9px;height:5px;border-left:2px solid var(--riot);border-bottom:2px solid var(--riot);transform:rotate(-45deg)}
.price-list li.off{opacity:.4}
.price-list li.off::before{border-color:var(--text-dim);transform:none;top:.62em;height:0;width:9px;border-left:0;border-bottom:2px solid currentColor}
.price-card .btn{margin-top:auto;width:100%}

/* Price tables */
.ptable{width:100%;border-collapse:collapse;margin:0 0 12px;font-size:.95rem}
.ptable caption{text-align:left;font-family:var(--display);text-transform:uppercase;font-size:1.05rem;padding:0 0 14px;letter-spacing:-.01em}
.ptable th,.ptable td{text-align:left;padding:15px 16px;border-bottom:1px solid var(--line);vertical-align:top}
.ptable thead th{
  font-family:var(--body);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-dim);font-weight:800;border-bottom:1px solid var(--line-strong);padding-bottom:11px;
}
.ptable tbody tr:hover{background:rgba(255,255,255,.03)}
.ptable .item{font-weight:700;color:var(--text)}
.ptable .desc{display:block;font-weight:400;font-size:.85rem;color:var(--text-dim);margin-top:4px;max-width:52ch}
.ptable .cost{font-family:var(--display);color:var(--volt);white-space:nowrap;font-size:1rem;letter-spacing:0}
.ptable .cost small{display:block;font-family:var(--body);font-size:.72rem;color:var(--text-dim);letter-spacing:.04em;margin-top:3px;font-weight:400}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:44px}
.table-scroll .ptable{min-width:560px}

/* ---------- Process steps ---------- */
.steps{counter-reset:step;display:grid;gap:2px}
.step{
  display:grid;grid-template-columns:88px 1fr;gap:clamp(18px,3vw,36px);
  padding:clamp(26px,3.4vw,40px) 0;border-top:1px solid var(--line);align-items:start;
}
.step:last-child{border-bottom:1px solid var(--line)}
.step-n{font-family:var(--display);font-size:clamp(1.9rem,4vw,3rem);line-height:1;color:var(--riot);opacity:.85}
.step h3{font-family:var(--display);text-transform:uppercase;font-size:clamp(1.1rem,2.2vw,1.5rem);margin-bottom:10px}
.step p{color:var(--text-dim);margin-bottom:0;max-width:64ch}
.step .tag{margin-top:14px}

/* ---------- Forms ---------- */
.form-card{background:var(--ink-2);border:1px solid var(--line);border-radius:8px;padding:clamp(26px,4vw,44px)}
.field{margin-bottom:22px}
.field label{display:block;font-size:.79rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--text-dim);margin-bottom:8px}
.field label .req{color:var(--riot)}
.field .hint{font-size:.8rem;color:var(--text-dim);margin-top:7px;font-weight:400;letter-spacing:0;text-transform:none}
.field input,.field select,.field textarea{
  width:100%;padding:13px 15px;background:var(--ink);border:1px solid var(--line-strong);
  border-radius:4px;color:var(--text);font-size:.98rem;transition:border-color .15s,box-shadow .15s;
}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--riot);box-shadow:0 0 0 3px rgba(255,46,63,.18)}
.field input::placeholder,.field textarea::placeholder{color:#5A5865}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--text-dim) 50%),linear-gradient(135deg,var(--text-dim) 50%,transparent 50%);background-position:calc(100% - 19px) 50%,calc(100% - 13px) 50%;background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:42px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.checks{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.check{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;background:var(--ink);border:1px solid var(--line-strong);border-radius:4px;cursor:pointer;font-size:.92rem;transition:border-color .15s,background .15s}
.check:hover{border-color:var(--text-dim)}
.check input{width:17px;height:17px;margin:3px 0 0;accent-color:var(--riot);flex:none}
.form-note{font-size:.84rem;color:var(--text-dim);margin-top:18px}
fieldset{border:0;padding:0;margin:0 0 34px}
fieldset legend{
  font-family:var(--display);text-transform:uppercase;font-size:1rem;padding:0 0 6px;margin-bottom:20px;
  border-bottom:2px solid var(--riot);width:100%;
}

/* ---------- FAQ ---------- */
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{
  cursor:pointer;list-style:none;padding:24px 44px 24px 0;position:relative;
  font-family:var(--display);text-transform:uppercase;font-size:clamp(.98rem,1.7vw,1.16rem);letter-spacing:-.01em;
  transition:color .15s;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--riot)}
.faq-item summary::after{
  content:"";position:absolute;right:6px;top:50%;width:13px;height:13px;
  border-right:2px solid var(--riot);border-bottom:2px solid var(--riot);
  transform:translateY(-70%) rotate(45deg);transition:transform .22s ease;
}
.faq-item[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq-item .faq-body{padding:0 0 26px;color:var(--text-dim);max-width:72ch}
.faq-item .faq-body p:last-child{margin-bottom:0}

/* ---------- Quote / testimonial ---------- */
.quote{border-left:3px solid var(--riot);padding:6px 0 6px 26px;margin:0}
.quote p{font-size:clamp(1.05rem,2vw,1.35rem);line-height:1.55;margin-bottom:16px}
.quote footer{font-size:.82rem;letter-spacing:.13em;text-transform:uppercase;color:var(--text-dim);font-weight:700}

/* ---------- Marquee ---------- */
.marquee{overflow:hidden;border-block:1px solid var(--line);background:var(--ink-2);padding:17px 0}
.marquee-track{display:flex;gap:52px;width:max-content;animation:slide 38s linear infinite}
.marquee span{font-family:var(--display);text-transform:uppercase;font-size:.95rem;letter-spacing:.05em;color:var(--text-dim);white-space:nowrap;display:flex;align-items:center;gap:52px}
.marquee span::after{content:"◆";color:var(--riot);font-size:.6rem}
@keyframes slide{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none}*{transition-duration:.01ms!important;animation-duration:.01ms!important}}

/* ---------- CTA band ---------- */
.cta-band{
  background:linear-gradient(120deg,var(--riot) 0%,var(--riot-dark) 100%);
  color:#fff;padding:clamp(56px,8vw,96px) 0;position:relative;overflow:hidden;
}
.cta-band::after{
  content:"";position:absolute;inset:0;opacity:.16;
  background-image:repeating-linear-gradient(45deg,transparent 0 22px,rgba(0,0,0,.5) 22px 44px);
  pointer-events:none;
}
.cta-band > *{position:relative;z-index:1}
.cta-band a.btn-white{box-shadow:0 10px 0 -4px rgba(0,0,0,.22)}

/* ---------- Footer ---------- */
.foot{background:#050507;border-top:1px solid var(--line);padding:clamp(52px,7vw,78px) 0 30px;font-size:.93rem}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:clamp(26px,4vw,48px);margin-bottom:48px}
.foot h4{font-family:var(--display);text-transform:uppercase;font-size:.8rem;letter-spacing:.11em;color:var(--text);margin-bottom:18px}
.foot ul{list-style:none;padding:0;margin:0}
.foot li{margin-bottom:10px}
.foot a{color:var(--text-dim);transition:color .15s}
.foot a:hover{color:var(--riot)}
.foot p{color:var(--text-dim);max-width:42ch}
.foot-bottom{border-top:1px solid var(--line);padding-top:26px;display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;color:#6B6976;font-size:.82rem}
.foot-areas{color:#6B6976;font-size:.82rem;line-height:1.8;margin-top:14px}

/* ---------- Utilities ---------- */
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.mt-s{margin-top:16px}.mt-m{margin-top:32px}.mt-l{margin-top:52px}
.mb-m{margin-bottom:32px}.mb-l{margin-bottom:52px}
.center{text-align:center}
.dim{color:var(--text-dim)}
.small{font-size:.87rem}
.nowrap{white-space:nowrap}
.badge-strip{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.divider-slash{color:var(--riot);margin:0 8px}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .g-4{grid-template-columns:repeat(2,1fr)}
  .price-grid{grid-template-columns:1fr;max-width:520px;margin-inline:auto}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:1080px){
  .burger{display:grid}
  .nav-phone{display:none}
  .nav-cta .btn{display:none}
  .menu{
    position:fixed;inset:var(--nav-h) 0 auto 0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--ink-2);border-bottom:1px solid var(--line);padding:12px var(--gut) 26px;
    max-height:calc(100dvh - var(--nav-h));overflow-y:auto;
    transform:translateY(-12px);opacity:0;visibility:hidden;transition:opacity .2s,transform .2s,visibility .2s;
  }
  .menu.show{transform:translateY(0);opacity:1;visibility:visible}
  .menu > li > a{padding:15px 4px;font-size:1rem;border-bottom:1px solid var(--line);border-radius:0;justify-content:space-between}
  .menu > li > a.active::after{display:none}
  .menu > li > a.active{color:var(--riot)}
  .dropdown{
    position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;
    background:transparent;padding:0 0 0 12px;display:none;min-width:0;
  }
  .menu > li.open .dropdown{display:block}
  .dropdown a{padding:13px 4px;border-bottom:1px solid var(--line)}
  .dropdown span{display:none}
  .dropdown-sep{display:none}
  .menu-cta{display:block;margin-top:20px}
  .menu-cta .btn{width:100%}
}
@media (max-width:760px){
  .g-2,.g-3,.split,.split-wide{grid-template-columns:1fr}
  .field-row,.checks{grid-template-columns:1fr}
  .step{grid-template-columns:1fr;gap:8px}
  .step-n{font-size:2rem}
  .hero-stats{gap:22px 34px}
  body{font-size:16px}
}
@media (max-width:520px){
  .g-4{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .btn{width:100%}
  .btn-row{flex-direction:column}
  .hero-stats > div{min-width:44%}
}

/* ---------- Print ---------- */
@media print{
  .nav,.cta-band,.foot,.marquee{display:none}
  body{background:#fff;color:#000}
  .ptable .cost{color:#000}
}

/* ==========================================================================
   BANNER SLIDER + IMAGE ROLLER + CLEAN EFFECTS
   ========================================================================== */

/* ---------- Full-bleed banner slider ---------- */
.banner{
  position:relative;width:100%;overflow:hidden;background:var(--ink-2);
  border-block:1px solid var(--line);
  aspect-ratio:21/9;max-height:620px;min-height:340px;
}
.banner-slide{
  position:absolute;inset:0;opacity:0;visibility:hidden;
  transition:opacity 1.15s cubic-bezier(.4,0,.2,1),visibility 1.15s;
}
.banner-slide.is-on{opacity:1;visibility:visible;z-index:1}
.banner-slide img{
  width:100%;height:100%;object-fit:cover;object-position:center 32%;
  transform:scale(1.02);will-change:transform;
}
.banner-slide.is-on .media-main,
.banner-slide.is-on img:only-of-type{animation:kenburns 9.5s ease-out forwards}
@keyframes kenburns{from{transform:scale(1.02)}to{transform:scale(1.13)}}
.banner-slide::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to top,rgba(8,8,11,.94) 0%,rgba(8,8,11,.35) 42%,rgba(8,8,11,.15) 70%),
    linear-gradient(to right,rgba(8,8,11,.8) 0%,transparent 55%);
}
.banner-slide::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.22;
  background-image:repeating-linear-gradient(0deg,transparent 0 3px,rgba(0,0,0,.55) 3px 4px);
  mix-blend-mode:overlay;
}
.banner-copy{
  position:absolute;z-index:3;left:0;right:0;bottom:0;
  padding:clamp(26px,5vw,58px) var(--gut);
  width:min(var(--wrap),100%);margin-inline:auto;
  transform:translateY(16px);opacity:0;
  transition:transform .8s cubic-bezier(.2,.7,.3,1) .25s,opacity .8s ease .25s;
}
.banner-slide.is-on .banner-copy{transform:none;opacity:1}
.banner-copy .kicker{
  display:inline-flex;align-items:center;gap:9px;background:var(--riot);color:#fff;
  padding:6px 14px;border-radius:3px;font-family:var(--display);
  font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:14px;
}
.banner-copy h2,.banner-copy .banner-title{
  font-family:var(--display);text-transform:uppercase;color:#fff;margin:0 0 8px;
  font-size:clamp(1.5rem,4.2vw,3.1rem);line-height:1;letter-spacing:-.025em;
  text-shadow:0 4px 30px rgba(0,0,0,.6);
}
.banner-copy p{
  color:rgba(255,255,255,.86);margin:0;max-width:46ch;font-size:clamp(.92rem,1.4vw,1.08rem);
  text-shadow:0 2px 16px rgba(0,0,0,.7);
}

.banner-ui{
  position:absolute;z-index:4;right:clamp(16px,3vw,32px);bottom:clamp(16px,3vw,30px);
  display:flex;align-items:center;gap:10px;
}
.banner-btn{
  width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.32);
  background:rgba(8,8,11,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  cursor:pointer;display:grid;place-items:center;padding:0;
  transition:background .2s,border-color .2s,transform .2s;
}
.banner-btn:hover{background:var(--riot);border-color:var(--riot);transform:scale(1.07)}
.banner-btn:focus-visible{outline:2px solid var(--volt);outline-offset:3px}
.banner-btn i{
  width:9px;height:9px;border-top:2px solid #fff;border-right:2px solid #fff;display:block;
}
.banner-btn.prev i{transform:rotate(-135deg) translate(-1px,-1px)}
.banner-btn.next i{transform:rotate(45deg) translate(-1px,-1px)}

.banner-dots{
  position:absolute;z-index:4;left:clamp(16px,var(--gut),48px);bottom:clamp(16px,3vw,30px);
  display:flex;gap:9px;
}
.banner-dot{
  width:34px;height:4px;border-radius:100px;border:0;padding:0;cursor:pointer;
  background:rgba(255,255,255,.3);transition:background .25s,width .25s;position:relative;overflow:hidden;
}
.banner-dot:hover{background:rgba(255,255,255,.55)}
.banner-dot.is-on{background:rgba(255,255,255,.35);width:56px}
.banner-dot.is-on::after{
  content:"";position:absolute;inset:0;background:var(--riot);transform-origin:left;
  animation:dotfill 6s linear forwards;
}
.banner-dot:focus-visible{outline:2px solid var(--volt);outline-offset:4px}
@keyframes dotfill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.banner.is-paused .banner-dot.is-on::after,
.banner.is-paused .banner-slide.is-on img{animation-play-state:paused}

@media (max-width:760px){
  /* Height and caption placement are set in the IMAGE FITTING section, where
     the two-row phone layout lives — keeping them together stops the two
     blocks quietly contradicting each other. */
  .banner-slide img{object-position:center 28%}
  .banner-ui{bottom:14px}
  .banner-dots{bottom:22px}
  .banner-dot{width:26px}
  .banner-dot.is-on{width:40px}
}

/* ---------- Infinite image roller ---------- */
.roller{
  position:relative;overflow:hidden;padding:clamp(18px,2.4vw,30px) 0;
  background:var(--ink-2);border-block:1px solid var(--line);
}
.roller::before,.roller::after{
  content:"";position:absolute;top:0;bottom:0;width:clamp(50px,9vw,150px);z-index:2;pointer-events:none;
}
.roller::before{left:0;background:linear-gradient(90deg,var(--ink-2),transparent)}
.roller::after{right:0;background:linear-gradient(270deg,var(--ink-2),transparent)}
.roller.on-paper{background:var(--paper-2);border-color:rgba(0,0,0,.1)}
.roller.on-paper::before{background:linear-gradient(90deg,var(--paper-2),transparent)}
.roller.on-paper::after{background:linear-gradient(270deg,var(--paper-2),transparent)}

.roller-track{display:flex;gap:14px;width:max-content;animation:roll 55s linear infinite}
.roller.reverse .roller-track{animation-direction:reverse}
.roller:hover .roller-track{animation-play-state:paused}
@keyframes roll{to{transform:translateX(-50%)}}

.roller-item{
  position:relative;flex:none;width:clamp(210px,24vw,300px);aspect-ratio:4/3;
  border-radius:5px;overflow:hidden;border:1px solid var(--line);background:var(--ink-3);
}
.roller.on-paper .roller-item{border-color:rgba(0,0,0,.12);background:#fff}
.roller-item img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(.85) contrast(1.06) brightness(.88);
  transition:filter .45s ease,transform .6s cubic-bezier(.2,.7,.3,1);
}
.roller-item::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(8,8,11,.75),transparent 55%);
  opacity:.85;transition:opacity .4s ease;
}
.roller-item:hover img{filter:none;transform:scale(1.07)}
.roller-item:hover::after{opacity:.5}
.roller-item span{
  position:absolute;z-index:2;left:14px;bottom:12px;color:#fff;
  font-family:var(--display);font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;
  text-shadow:0 2px 12px rgba(0,0,0,.8);
}
.roller-tall .roller-item{aspect-ratio:3/4;width:clamp(170px,18vw,230px)}

/* ---------- Clean effects ---------- */
.fx-glow{position:relative}
.fx-glow::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,46,63,.55),transparent 45%,rgba(255,212,0,.35));
  opacity:0;transition:opacity .35s ease;z-index:-1;
}
.fx-glow:hover::before{opacity:1}

.fx-lift{transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s ease}
.fx-lift:hover{transform:translateY(-6px);box-shadow:0 30px 60px -28px rgba(0,0,0,.85)}

.fx-underline{background-image:linear-gradient(var(--riot),var(--riot));background-size:0 2px;
  background-position:0 100%;background-repeat:no-repeat;transition:background-size .35s ease}
.fx-underline:hover{background-size:100% 2px}

/* Scroll progress bar */
.progress{
  position:fixed;top:0;left:0;height:3px;width:100%;transform-origin:left;transform:scaleX(0);
  background:linear-gradient(90deg,var(--riot),var(--volt));z-index:110;pointer-events:none;
  transition:transform .08s linear;
}

@media (prefers-reduced-motion:reduce){
  .roller-track{animation:none}
  .banner-slide.is-on img{animation:none}
  .banner-dot.is-on::after{animation:none;transform:scaleX(1)}
  .banner-slide{transition:none}
}

/* ==========================================================================
   WORDPRESS INTEGRATION
   Maps core WordPress markup onto the design system above.
   ========================================================================== */

/* ---------- Menu: core classes ---------- */
.menu > li.menu-item-has-children > a::after,
.menu > li.has-dropdown > a::after{
  content:"";width:8px;height:8px;flex:none;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:transform .2s ease;
}
.menu > li.open > a::after{transform:rotate(-135deg) translateY(-2px)}
.menu .sub-menu{
  position:absolute;top:calc(100% + 10px);left:0;min-width:310px;
  background:var(--ink-2);border:1px solid var(--line);border-radius:6px;
  box-shadow:var(--shadow);padding:8px;list-style:none;margin:0;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
}
.menu > li.open > .sub-menu{opacity:1;visibility:visible;transform:translateY(0)}
.menu .sub-menu li{margin:0}
.menu .sub-menu a{display:block;padding:11px 14px;border-radius:4px;transition:background .14s ease;color:var(--text)}
.menu .sub-menu a:hover{background:rgba(255,46,63,.14)}
.menu .sub-menu strong{display:block;font-size:.9rem;font-weight:700;color:var(--text);margin-bottom:2px}
.menu .sub-menu .menu-desc{display:block;font-size:.78rem;color:var(--text-dim);line-height:1.4;font-weight:400}
.menu > li.current-menu-item > a,
.menu > li.current-menu-ancestor > a,
.menu > li.current_page_item > a,
.menu > li.current_page_ancestor > a{color:#fff}
.menu > li.current-menu-item > a::before,
.menu > li.current-menu-ancestor > a::before,
.menu > li.current_page_item > a::before,
.menu > li.current_page_ancestor > a::before{
  content:"";position:absolute;left:13px;right:13px;bottom:2px;height:2px;background:var(--riot);
}

@media (max-width:1080px){
  .menu .sub-menu{
    position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;
    background:transparent;padding:0 0 0 12px;display:none;min-width:0;
  }
  .menu > li.open > .sub-menu{display:block}
  .menu .sub-menu a{padding:13px 4px;border-bottom:1px solid var(--line)}
  .menu .sub-menu .menu-desc{display:none}
  .menu > li.current-menu-item > a::before,
  .menu > li.current-menu-ancestor > a::before,
  .menu > li.current_page_item > a::before,
  .menu > li.current_page_ancestor > a::before{display:none}
  .menu > li.current-menu-item > a,
  .menu > li.current-menu-ancestor > a{color:var(--riot)}
}

/* ---------- Page & post content ---------- */
.entry{padding:clamp(56px,7vw,96px) 0}
/* Every Riot page opens with a full-bleed header that carries its own
   generous padding, so the article's standing top padding is just an empty
   band between the menu bar and the headline. */
.riot-front .entry{padding-top:0}
.entry:has(> .entry-content > .hero:first-child){padding-top:0}
.entry:has(> .entry-content > .cta-band:last-child){padding-bottom:0}
.entry-content > *{width:min(var(--wrap),100% - var(--gut)*2);margin-inline:auto}
.entry-content > .alignwide{width:min(1400px,100% - var(--gut)*2)}
.entry-content > .alignfull{width:100%;max-width:none}
.entry-content > .banner,
.entry-content > .marquee,
.entry-content > .roller,
.entry-content > section,
.entry-content > .cta-band{width:100%;max-width:none}
.entry-content h2{font-family:var(--display);text-transform:uppercase;font-size:clamp(1.6rem,3.4vw,2.5rem);margin-top:1.4em}
.entry-content h3{font-family:var(--display);text-transform:uppercase;font-size:clamp(1.15rem,2vw,1.45rem);margin-top:1.4em}
.entry-content a:not(.btn):not(.card):not(.shot){color:var(--riot);text-decoration:underline;text-underline-offset:3px}
.entry-content a:not(.btn):not(.card):not(.shot):hover{color:var(--volt)}
.entry-content blockquote{border-left:3px solid var(--riot);padding-left:26px;margin-left:0;font-size:1.1rem}
.entry-content code,.entry-content kbd{background:var(--ink-3);padding:2px 6px;border-radius:3px;font-size:.9em}
.entry-content pre{background:var(--ink-2);border:1px solid var(--line);border-radius:6px;padding:20px;overflow-x:auto}
.entry-content table{width:100%;border-collapse:collapse}
.entry-content table th,.entry-content table td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left}
.entry-content img{border-radius:6px}
.entry-content figure{margin:2em 0}
.entry-content figcaption,.wp-caption-text{font-size:.85rem;color:var(--text-dim);margin-top:10px;text-align:center}

/* Core alignment classes */
.alignleft{float:left;margin:.4em 1.6em 1em 0}
.alignright{float:right;margin:.4em 0 1em 1.6em}
.aligncenter{margin-inline:auto;display:block}
.wp-block-image.alignfull img,.wp-block-cover.alignfull{border-radius:0}
.screen-reader-text{
  border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;
  padding:0;position:absolute;width:1px;word-wrap:normal!important;
}
.screen-reader-text:focus{
  clip-path:none;height:auto;width:auto;display:block;top:5px;left:5px;
  padding:14px 22px;background:var(--riot);color:#fff;z-index:200;
  font-family:var(--display);text-transform:uppercase;font-size:.8rem;letter-spacing:.1em;border-radius:4px;
}

/* ---------- Post cards & archives ---------- */
.post-card{
  background:var(--ink-2);border:1px solid var(--line);border-radius:6px;overflow:hidden;
  display:flex;flex-direction:column;transition:transform .2s ease,border-color .2s ease;
}
.post-card:hover{transform:translateY(-4px);border-color:var(--line-strong)}
.post-card img{width:100%;aspect-ratio:16/10;object-fit:cover}
.post-card-body{padding:26px;display:flex;flex-direction:column;flex:1}
.post-card h2{font-family:var(--display);text-transform:uppercase;font-size:1.1rem;margin:0 0 10px;line-height:1.15}
.post-card h2 a:hover{color:var(--riot)}
.post-card p{color:var(--text-dim);font-size:.95rem;flex:1}
.post-meta{font-size:.75rem;letter-spacing:.13em;text-transform:uppercase;color:var(--text-dim);margin-bottom:12px;font-weight:700}
.post-more{font-family:var(--display);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--riot);margin-top:16px}

.page-nav{display:flex;gap:12px;justify-content:center;margin-top:52px;flex-wrap:wrap}
.page-nav .page-numbers{
  display:grid;place-items:center;min-width:46px;height:46px;padding:0 14px;
  border:1px solid var(--line-strong);border-radius:4px;font-weight:700;font-size:.9rem;
  transition:border-color .15s,background .15s,color .15s;
}
.page-nav .page-numbers:hover{border-color:var(--text);background:rgba(255,255,255,.06)}
.page-nav .page-numbers.current{background:var(--riot);border-color:var(--riot);color:#fff}

.post-nav{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:56px;padding-top:36px;border-top:1px solid var(--line)}
.post-nav a{display:block;padding:22px;border:1px solid var(--line);border-radius:6px;transition:border-color .15s}
.post-nav a:hover{border-color:var(--riot)}
.post-nav span{display:block;font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;color:var(--text-dim);margin-bottom:8px;font-weight:800}
.post-nav strong{font-family:var(--display);text-transform:uppercase;font-size:.98rem;line-height:1.2}
.post-nav .next{text-align:right}
@media (max-width:640px){.post-nav{grid-template-columns:1fr}.post-nav .next{text-align:left}}

/* ---------- Search ---------- */
.search-form{display:flex;gap:10px;max-width:520px}
.search-form input[type="search"]{
  flex:1;padding:13px 15px;background:var(--ink-2);border:1px solid var(--line-strong);
  border-radius:4px;color:var(--text);
}
.search-form input[type="search"]:focus{outline:none;border-color:var(--riot);box-shadow:0 0 0 3px rgba(255,46,63,.18)}

/* ---------- Plugin form states ---------- */
.riot-form-errors{
  background:rgba(255,46,63,.1);border:1px solid rgba(255,46,63,.4);
  border-radius:5px;padding:18px 22px;margin-bottom:28px;
}
.riot-form-errors p{margin:0 0 8px}
.riot-form-errors ul{margin:0;padding-left:20px;font-size:.93rem;color:var(--text-dim)}
.riot-form-sent{border-color:var(--riot);background:linear-gradient(180deg,rgba(255,46,63,.1),transparent 55%),var(--ink-2)}
.riot-form-sent h3{margin-bottom:12px}

/* ---------- Comments ---------- */
.comments{margin-top:64px;padding-top:44px;border-top:1px solid var(--line)}
.comments h2,.comments h3{font-family:var(--display);text-transform:uppercase}
.comment-list{list-style:none;padding:0;margin:0 0 44px}
.comment-list li{border-bottom:1px solid var(--line);padding:22px 0;margin:0}
.comment-list .children{list-style:none;padding-left:28px;border-left:1px solid var(--line);margin-top:18px}
.comment-author{font-weight:700}
.comment-metadata{font-size:.78rem;color:var(--text-dim);margin-bottom:10px}
.comment-respond input[type="text"],.comment-respond input[type="email"],
.comment-respond input[type="url"],.comment-respond textarea{
  width:100%;padding:13px 15px;background:var(--ink);border:1px solid var(--line-strong);
  border-radius:4px;color:var(--text);margin-bottom:16px;
}
.comment-respond input:focus,.comment-respond textarea:focus{outline:none;border-color:var(--riot)}
.comment-respond .submit{
  background:var(--riot);color:#fff;border:0;border-radius:4px;padding:15px 30px;cursor:pointer;
  font-family:var(--display);font-size:.83rem;letter-spacing:.1em;text-transform:uppercase;
}

/* ---------- Admin bar offset ---------- */
.admin-bar .nav{top:32px}
@media screen and (max-width:782px){.admin-bar .nav{top:46px}}

/* ---------- Widgets in the footer ---------- */
.foot .widget{margin-bottom:32px}
.foot .widget-title{font-family:var(--display);text-transform:uppercase;font-size:.8rem;letter-spacing:.11em;margin-bottom:18px}
.foot .widget ul{list-style:none;padding:0;margin:0}
.foot .widget li{margin-bottom:10px}

/* ==========================================================================
   MOBILE: NOTHING SCROLLS SIDEWAYS
   Price tables become stacked cards instead of a horizontally scrolling
   table, so every page fits the width of the screen.
   ========================================================================== */
@media (max-width:760px){
  .table-scroll{overflow:visible;margin-bottom:32px}
  .table-scroll .ptable{min-width:0;width:100%}

  .ptable thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .ptable caption{padding-bottom:18px;font-size:.95rem}
  .ptable tbody tr{
    display:block;border:1px solid var(--line);border-radius:6px;
    background:var(--ink-2);padding:18px 20px;margin-bottom:14px;
  }
  .ptable tbody tr:hover{background:var(--ink-2)}
  .ptable td{display:block;border:0;padding:0 0 12px;width:auto!important}
  .ptable td:last-child{padding-bottom:0}
  .ptable td:empty{display:none}
  .ptable td::before{
    content:attr(data-label);display:block;
    font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
    color:var(--text-dim);font-weight:800;margin-bottom:6px;
  }
  .ptable td:first-child::before{display:none}
  .ptable .item{font-size:1.05rem;display:block}
  .ptable .desc{max-width:none}
  .ptable .cost{font-size:1.35rem}
  .ptable .cost small{display:inline-block;margin-left:8px}

  /* Paper-band tables keep their light background when stacked. */
  .band-paper .ptable tbody tr{background:#fff;border-color:rgba(0,0,0,.12)}
  .band-paper .ptable td::before{color:var(--text-ink-dim)}
}

/* Long unbroken strings (emails, URLs) must never widen the page. */
.entry-content,.foot,.card,.price-card,.ptable td,.faq-body{overflow-wrap:break-word;word-wrap:break-word}
.wrap,.wrap-narrow{max-width:100%}
img,video,iframe,table{max-width:100%}

@media (max-width:520px){
  .display-xl{font-size:clamp(2.1rem,10vw,3rem);hyphens:none}
  .banner-copy .banner-title{font-size:clamp(1.3rem,7vw,2rem)}
  .hero-stats > div{min-width:0;flex:1 1 45%}
  .badge-strip .tag{font-size:.62rem}
  .foot-areas{font-size:.78rem}
}

/* ---------- Very narrow screens (320px and up) ----------
   The menu bar was the one thing that could still push the page sideways:
   brand block + burger + gutters exceeded 320px. Tighten all three. */
@media (max-width:420px){
  :root{--gut:16px}
  .nav-inner{gap:10px}
  .brand{flex:1 1 auto;min-width:0;gap:9px}
  .brand-mark{width:32px;height:32px;font-size:1rem;flex:none}
  .brand-name{
    font-size:.92rem;min-width:0;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .brand-name small{font-size:.48rem;letter-spacing:.13em}
  .nav-cta{flex:0 0 auto;gap:8px}
  .burger{width:40px;height:40px}
}

@media (max-width:360px){
  .brand-name small{display:none}
  .display-xl{font-size:clamp(1.9rem,10.5vw,2.6rem)}
  .btn{padding:14px 20px;font-size:.76rem}
  .card,.price-card{padding:20px}
  .ptable tbody tr{padding:15px 16px}
  .hero-stats{gap:18px 24px}
  .stat-num{font-size:1.5rem}
}

/* Belt and braces: nothing may exceed the viewport width. */
html,body{max-width:100%}
.nav,.foot,.cta-band,section,.banner,.roller,.marquee{max-width:100vw}

/* ---------- Between the burger and full width (1081–1300px) ----------
   Ten menu items, a phone number and a button will not fit a small laptop.
   Tighten the menu and drop the phone before anything is forced off screen. */
@media (min-width:1081px) and (max-width:1300px){
  .menu > li > a{padding:9px 9px;font-size:.79rem}
  .nav-inner{gap:14px}
  .brand-name{font-size:1rem}
}
@media (max-width:1300px){
  .nav-phone{display:none}
}

/* ==========================================================================
   IMAGE FITTING
   Most of this photography is portrait or square. Rather than crop a 9:16
   poster into a 21:9 banner and lose most of it, the whole picture is shown
   over a blurred, cropped copy of itself. Nothing is cut off, and the frame
   is still filled edge to edge.
   ========================================================================== */
.banner-slide .media-fill,
.roller-item .media-fill,
.shot .media-fill{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;
  filter:blur(44px) saturate(1.3) brightness(.4);
  transform:scale(1.25);
  z-index:0;pointer-events:none;
}
.roller-item .media-fill,
.shot .media-fill{filter:blur(24px) saturate(1.2) brightness(.45);transform:scale(1.35)}

.banner-slide.is-contained .media-main{
  position:relative;z-index:1;
  object-fit:contain;object-position:center;
  width:100%;height:100%;
}
.roller-item.is-contained .media-main{
  position:relative;z-index:1;
  object-fit:contain;object-position:center;
  width:100%;height:100%;
}
.roller-item.is-contained,.shot.is-contained{position:relative;overflow:hidden}

/* ---------- Portfolio card with a portrait picture ----------
   The caption is normally laid over the bottom of the photograph, which works
   when the photograph fills the card. A portrait picture shown whole does not
   fill it — and being lifted above the backdrop, it painted straight over its
   own title. So a card like this gets two rows instead: the picture, then the
   caption on solid dark beneath it. The title is always legible and none of
   the picture is cropped. Cards with a landscape picture are untouched. */
.shot.is-contained{
  display:grid;grid-template-rows:minmax(0,1fr) auto;
  position:relative;overflow:hidden;
}
.shot.is-contained .media-fill{grid-row:1;inset:0}
.shot.is-contained .media-main{
  position:relative;grid-row:1;z-index:1;
  object-fit:contain;object-position:center;
  width:100%;height:100%;min-height:0;aspect-ratio:4/3;
}
.shot.is-contained .shot-cap{
  position:relative;grid-row:2;z-index:2;
  inset:auto;
  background:var(--ink-2);
  border-top:1px solid var(--line);
}

/* The slow zoom belongs to the picture, not the blurred backdrop. */
.banner-slide.is-on .media-fill{animation:none}

/* ---------- Desktop: portrait work sits beside the words, not under them ----------
   A tall photo centred in a wide banner forces the caption on top of it and
   both suffer. Above 1080px the picture takes the right half and the copy
   takes the left, which reads as a deliberate layout rather than an accident
   of aspect ratio. */
@media (min-width:1081px){
  .banner{aspect-ratio:16/7;max-height:640px;min-height:440px}

  /* Two real columns, not two absolutely positioned boxes each centring
     itself independently — which is what put the caption in the middle of
     the frame with its last line running underneath the photograph. Grid
     items cannot overlap, so that cannot come back. */
  .banner-slide.is-contained{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    align-items:center;
    column-gap:clamp(24px,4vw,64px);
    padding-inline:max(var(--gut),calc((100% - var(--wrap)) / 2 + var(--gut)));
  }
  .banner-slide.is-contained .media-main{
    position:relative;grid-column:2;grid-row:1;z-index:1;inset:auto;
    width:100%;height:100%;padding-block:26px;
    object-fit:contain;object-position:center;
  }
  .banner-slide.is-contained::after{
    background-image:
      linear-gradient(90deg,rgba(8,8,11,.96) 0%,rgba(8,8,11,.9) 38%,rgba(8,8,11,.35) 60%,rgba(8,8,11,.2) 100%),
      linear-gradient(var(--line) 1px,transparent 1px),
      linear-gradient(90deg,var(--line) 1px,transparent 1px);
  }
  .banner-slide.is-contained .banner-copy{
    position:relative;grid-column:1;grid-row:1;z-index:3;
    inset:auto;width:auto;max-width:none;margin:0;padding:0 0 28px;
    transform:translateY(16px);
  }
  .banner-slide.is-contained.is-on .banner-copy{transform:none}
  .banner-slide.is-contained .banner-copy p{max-width:40ch}
}
@media (min-width:1600px){
  .banner{aspect-ratio:16/6.6;max-height:700px}
}

/* ---------- Phone and small tablet: caption under the picture ----------
   Below the two-column breakpoint there is no empty half to put the words in,
   and a tall photograph fills the whole frame. Laying the caption over it
   means white type on oyster shells and daylight — unreadable however heavy
   the gradient. So the slide becomes two rows: picture, then words on solid
   dark. Nothing overlaps, and the photograph is not dimmed to make room. */
@media (max-width:1080px){
  /* A fixed height for the whole banner, so rotating between a tall picture
     and a wide one never makes the page jump. Every slide stays absolutely
     positioned and fills it; the split happens inside the slide. */
  .banner{aspect-ratio:auto;height:clamp(470px,62vw,600px);max-height:none;min-height:0}

  .banner-slide{display:grid;grid-template-rows:minmax(0,1fr) auto}

  .banner-slide .media-main{
    grid-row:1;width:100%;height:100%;min-height:0;
    object-fit:cover;object-position:center 30%;
  }
  .banner-slide.is-contained .media-main{object-fit:contain;object-position:center}

  .banner-copy{
    grid-row:2;position:relative;z-index:3;
    inset:auto;width:auto;max-width:none;margin:0;
    padding:18px var(--gut) 58px;
    min-height:158px;
    background:var(--ink);
    border-top:1px solid var(--line);
  }
  .banner-copy .kicker{margin-bottom:10px}
  .banner-copy p{max-width:none}

  /* The gradient existed to keep type legible on top of a photograph. The
     words are no longer on the photograph, so it only finishes the picture. */
  .banner-slide::after{
    background:linear-gradient(to top,rgba(8,8,11,.55) 0%,transparent 34%);
  }
}
@media (max-width:760px){
  .banner{height:clamp(500px,128vw,660px)}
  .banner-copy{min-height:172px;padding-bottom:64px}
}

/* ==========================================================================
   INLINE PHOTO
   For pictures that belong beside the words rather than behind them — a
   headshot next to a bio being the reason this exists.
   ========================================================================== */
.riot-photo{
  margin:0 0 24px;max-width:var(--photo-w,320px);
  border-radius:6px;overflow:hidden;border:1px solid var(--line);
  background:var(--ink-2);
}
.riot-photo img{display:block;width:100%;height:auto}
.riot-photo figcaption{
  padding:12px 16px;font-size:.8rem;color:var(--text-dim);
  letter-spacing:.04em;border-top:1px solid var(--line);
}
.riot-photo.is-round{border-radius:50%;border-width:2px;border-color:var(--riot)}
.riot-photo.is-round figcaption{display:none}
.band-paper .riot-photo{background:#fff;border-color:rgba(0,0,0,.12)}
.band-paper .riot-photo figcaption{color:var(--text-ink-dim);border-color:rgba(0,0,0,.1)}

@media (min-width:761px){
  .riot-photo.align-right{float:right;margin:6px 0 24px 32px}
  .riot-photo.align-left{float:left;margin:6px 32px 24px 0}
}
@media (max-width:760px){
  .riot-photo{max-width:min(280px,70%);margin-inline:auto}
  .riot-photo.align-right,.riot-photo.align-left{float:none}
}
.riot-photo + p,.riot-photo + h2,.riot-photo + h3{margin-top:0}

/* ==========================================================================
   GALLERY BAND
   The pictures a page carries beyond its header. Portrait and landscape work
   sit in the same row without either being cropped to match the other: the
   row height is fixed, and each picture is contained inside its own card over
   a blurred copy of itself. Captions sit underneath on solid dark, never on
   the photograph.
   ========================================================================== */
.riot-gallery-band{padding-block:clamp(48px,6vw,84px)}
/* These cards are <figure> elements, and the editor stylesheet gives every
   figure 2em of vertical margin — which was quietly adding 64px to the space
   between gallery rows and between reel rows. Beaten on specificity here
   rather than by touching the rule that ordinary figures still need. */
.entry-content .riot-shotcard,
.entry-content .riot-video{margin:0}
/* Flex rather than grid, so a row that does not divide evenly centres its
   leftovers instead of leaving a hole on the right. */
.riot-gallery{
  display:flex;flex-wrap:wrap;justify-content:center;
  /* Without this, a wrapped flex container spreads its rows apart to fill any
     spare height, which leaves a hole between the first row and the second. */
  align-content:flex-start;align-items:flex-start;
  gap:clamp(14px,2vw,24px);
}
.riot-shotcard{
  position:relative;overflow:hidden;
  /* A fixed card width, not a growing one — otherwise the two left over on
     the last row inflate to fill it and no two rows match. */
  flex:0 1 clamp(140px,23%,268px);
  border:1px solid var(--line);border-radius:6px;background:var(--ink-2);
  display:grid;grid-template-rows:auto auto;
  transition:transform .25s cubic-bezier(.2,.7,.3,1),border-color .25s;
}
.riot-shotcard:hover{transform:translateY(-4px);border-color:var(--line-strong)}
/* Every card is the same shape, so rows line up. A landscape picture fills
   it; a portrait one is shown whole on dark rather than cropped to match. */
.riot-shotcard img{
  grid-row:1;display:block;width:100%;height:auto;
  aspect-ratio:4/3;object-fit:cover;object-position:center;
}
.riot-shotcard.is-tall img{object-fit:contain;background:var(--ink-3)}
.riot-shotcard figcaption{
  grid-row:2;padding:13px 16px;border-top:1px solid var(--line);
  font-family:var(--display);text-transform:uppercase;letter-spacing:.02em;
  font-size:.78rem;line-height:1.25;color:#fff;
}
@media (max-width:560px){
  .riot-shotcard{flex:0 1 calc(50% - 8px)}
  .riot-shotcard figcaption{font-size:.7rem;padding:10px 12px}
}

/* ==========================================================================
   VIDEO
   Muted, looping, autoplaying — which is the only combination browsers allow
   without a click, and the only one that is not rude anyway.
   ========================================================================== */
.riot-videos{
  display:grid;gap:clamp(18px,2.6vw,28px);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  /* Clips keep their own shapes, so cards must not stretch to match the
     tallest one in the row and leave dead space under the short ones. */
  align-items:start;
}
.riot-video{
  position:relative;border-radius:6px;overflow:hidden;
  border:1px solid var(--line);background:var(--ink-2);
  transition:transform .25s cubic-bezier(.2,.7,.3,1),border-color .25s;
}
.riot-video:hover{transform:translateY(-4px);border-color:var(--line-strong)}
/* Each clip keeps the shape it was cut in. Forcing a landscape film into a
   9:16 frame either crops the subject out or pillarboxes it into a stripe. */
.riot-video video{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;background:#000}
.riot-video.is-square video{aspect-ratio:1/1;object-fit:cover}
.riot-video.is-wide video{aspect-ratio:16/9;object-fit:cover}
.riot-video.is-wide{grid-column:span 2}
@media (max-width:560px){.riot-video.is-wide{grid-column:auto}}
.riot-video figcaption{
  position:absolute;inset:auto 0 0 0;padding:34px 18px 16px;
  background:linear-gradient(transparent,rgba(0,0,0,.9) 60%);
  font-family:var(--display);text-transform:uppercase;font-size:.82rem;
  letter-spacing:.02em;color:#fff;
}
.riot-video figcaption small{
  display:block;font-family:var(--body);font-weight:400;text-transform:none;
  letter-spacing:0;font-size:.78rem;color:rgba(255,255,255,.72);margin-top:4px;
}
.riot-video .video-sound{
  position:absolute;top:12px;right:12px;z-index:2;
  width:40px;height:40px;border-radius:50%;cursor:pointer;
  border:1px solid rgba(255,255,255,.3);background:rgba(8,8,11,.55);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:grid;place-items:center;font-size:1rem;color:#fff;padding:0;
  transition:background .2s,border-color .2s;
}
.riot-video .video-sound:hover{background:var(--riot);border-color:var(--riot)}
.riot-video .video-sound:focus-visible{outline:2px solid var(--volt);outline-offset:3px}

/* If a browser refuses to autoplay, we hand over native controls — the
   caption must then sit under the video rather than on top of them. */
.riot-video.has-controls figcaption{
  position:static;background:var(--ink-2);
  padding:14px 16px;border-top:1px solid var(--line);
}
.riot-video.has-controls .video-sound{display:none}

/* ==========================================================================
   HEADER IMAGE
   The page's picture lives in the header, placed to the right and faded out
   before it reaches the headline. Text sits on clean dark space; the photo
   gets the empty half that was doing nothing. Set per page via --hero-img.
   ========================================================================== */
.hero::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  inset:0 0 0 auto;width:min(56%,900px);
  background-image:var(--hero-img,none);
  background-size:cover;background-position:center 28%;
  /* Fade the left edge so the picture dissolves into the page rather than
     ending in a hard line down the middle. */
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.45) 22%,#000 62%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.45) 22%,#000 62%);
  opacity:.85;
}
/* The base overlay is deliberately faint and feathered at the edges, because
   all it normally covers is a grid pattern. Once a photograph is behind the
   headline that is not a scrim at all — it has to be at full strength and
   reach the edges, or the picture reads straight through the words. */
.has-hero-image .hero::after{
  z-index:1;opacity:1;
  -webkit-mask-image:none;mask-image:none;
  background-image:
    linear-gradient(90deg,rgba(8,8,11,.94) 0%,rgba(8,8,11,.78) 38%,rgba(8,8,11,.1) 62%,transparent 78%),
    linear-gradient(var(--line) 1px,transparent 1px),
    linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:auto,70px 70px,70px 70px;
}
.hero > *{position:relative;z-index:2}
.has-hero-image .hero .hero-stats{max-width:none}

/* ---------- Desktop: the picture is a framed panel, not a bleed ----------
   Running the photograph off the right edge of the screen meant it was never
   the same size twice, it was cut off by the window rather than composed, and
   the paragraph ran across the part that had faded. Sizing it against the
   page's own column instead fixes all three: the panel lines up with the
   content, both widths are measured against the same box so a gap between
   text and picture is guaranteed, and nothing is written over a photograph. */
@media (min-width:1081px){
  /* The panel gives the header its presence, so it no longer needs the full
     standing height it had when the words were alone on the page. */
  .has-hero-image .hero{padding:clamp(56px,8vw,104px) 0 clamp(48px,6vw,84px)}

  .has-hero-image .hero::before{
    inset:auto max(var(--gut),calc((100% - var(--wrap)) / 2)) auto auto;
    top:50%;transform:translateY(-50%);
    width:calc(min(var(--wrap),100% - var(--gut) * 2) * .4);
    height:min(calc(100% - clamp(48px,5vw,80px)),560px);
    background-size:cover;background-position:center 32%;
    border:1px solid var(--line-strong);border-radius:8px;
    box-shadow:0 30px 80px rgba(0,0,0,.55);
    -webkit-mask-image:none;mask-image:none;
    opacity:1;
  }
  /* Nothing sits on the photograph now, so the overlay goes back to being a
     grid pattern rather than a blackout — and it must not dim the panel. */
  .has-hero-image .hero::after{
    background-image:
      linear-gradient(90deg,rgba(8,8,11,.75) 0%,rgba(8,8,11,.3) 34%,transparent 52%),
      linear-gradient(var(--line) 1px,transparent 1px),
      linear-gradient(90deg,var(--line) 1px,transparent 1px);
  }
  /* 40% picture + 4% gap + 56% text, all measured against the wrap. */
  .has-hero-image .hero .wrap > *{max-width:56%}
  .has-hero-image .hero .display-xl{font-size:clamp(2.9rem,4.6vw,4.1rem)}
}
@media (min-width:1081px) and (max-width:1300px){
  .has-hero-image .hero::before{width:calc(min(var(--wrap),100% - var(--gut) * 2) * .36)}
  .has-hero-image .hero .wrap > *{max-width:60%}
}

/* ---------- Front page: no picture, and it has to fit ----------
   With nothing to look at but the words, the header's job is to say the thing
   and get out of the way. Left alone, the largest step of the type scale plus
   the standing padding puts the buttons below the fold on a laptop, which is
   the one place on the site where that actually costs something. */
.riot-front .hero{
  padding:clamp(44px,5.5vw,74px) 0 clamp(40px,4.5vw,62px);
}
.riot-front .hero .display-xl{
  font-size:clamp(2.3rem,5.4vw,4.2rem);
  max-width:24ch;
  margin-bottom:.5em;
}
/* Nothing is sharing the width, so the promise can run as wide as the page
   reads comfortably instead of stacking into five short lines. */
.riot-front .hero .lede{max-width:76ch}
.riot-front .hero-stats{margin-top:34px;padding-top:26px}

/* Below the dropdown breakpoint the text runs full width, so the picture
   moves behind it — and then it has to be quiet enough to read over. */
@media (max-width:1080px){
  .hero::before{
    inset:0;width:100%;opacity:.22;background-position:center 24%;
    -webkit-mask-image:none;mask-image:none;
  }
  .has-hero-image .hero::after{
    background-image:
      linear-gradient(180deg,rgba(8,8,11,.93) 0%,rgba(8,8,11,.88) 45%,rgba(8,8,11,.97) 100%),
      linear-gradient(var(--line) 1px,transparent 1px),
      linear-gradient(90deg,var(--line) 1px,transparent 1px);
  }
  .has-hero-image .hero .wrap > *{max-width:none}
}
@media (max-width:760px){
  .hero::before{opacity:.16}
}