/* Oz Theatre Screens / hometheatre.com.au - dark cinema theme */
:root{
  --bg:#0a0a0c; --bg2:#121216; --bg3:#1a1a20; --line:#26262e;
  --text:#ebebf0; --muted:#a3a3ad;
  --blue:#2f8fff; --blue2:#63aaff;
  --black:#000;   /* the pure black sections; the theme try-out tool (js/theme-tool.js) can shift it */
  --max:1500px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 var(--font,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif);-webkit-font-smoothing:antialiased}   /* 190: the font from the Colours tab */
img{max-width:100%;height:auto;display:block}
a{color:var(--blue2);text-decoration:none}
a:hover{color:#fff}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-999px;top:0;background:var(--blue);color:#fff;padding:8px 12px}
.skip:focus{left:8px;z-index:100}
h1,h2,h3{font-weight:800;line-height:1.1;margin:0 0 .5em;letter-spacing:.01em}
h1{font-size:clamp(2.2rem,5vw,4rem);text-transform:uppercase;color:#fff;text-shadow:0 2px 28px rgba(47,143,255,.4)}
h2{font-size:clamp(1.5rem,3vw,2.2rem);text-transform:uppercase;color:#fff;margin-bottom:.9em}
h2 span{color:var(--blue2)}
h3{font-size:1.15rem;color:#fff}
p{margin:0 0 1em}
.muted{color:var(--muted)}
.center{text-align:center}
.lead{max-width:none;margin-bottom:2em}   /* section intros run the full width (Richard, 14 Oct 2026, item 73) */
/* Richard, 11 Oct 2026: the intro lines under headings were grey and hard to read, so they are white; .full lets one run the whole width */
.lead,.lead.muted{color:#e9e9ef}
.lead.full{max-width:none;font-size:clamp(.82rem,1.25vw,1rem)}   /* shrinks a little on laptops so the sentence stays on one line */
.btn{display:inline-block;background:var(--blue);color:#fff;font-weight:700;padding:.8em 1.5em;border-radius:6px;text-transform:uppercase;letter-spacing:.04em;font-size:.9rem;border:2px solid var(--blue);transition:background .15s,border-color .15s}
.btn:hover{background:var(--blue2);border-color:var(--blue2);color:#fff}
.btn.ghost{background:transparent;border-color:#555}
.btn.ghost:hover{border-color:#fff;background:transparent}

/* header, after Richard's 8 Oct mockup: logo left, contacts right, tab menu right-aligned below, blue projector glow */
.site-header{--logo:min(560px,72vw);position:relative;z-index:5;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#04060b 0%,#070c17 60%,#05080f 100%)}
.topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding-top:16px;padding-bottom:4px;flex-wrap:wrap}
.brand{display:block}
.brand img{width:var(--logo);height:auto}
.tagline{display:block;color:#fff;font-family:"Segoe UI Variable Text","Segoe UI Variable","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:max(9px,calc(var(--logo) * .0236));font-weight:500;line-height:1;letter-spacing:.135em;text-transform:uppercase;white-space:nowrap;text-align:right;margin-top:calc(var(--logo) * -.008);padding:0 calc(var(--logo) * .0155) 16px 0}
.contact-strip{text-align:right;font-size:.95rem;line-height:1.9;padding-top:4px}
/* Richard's Australian Made map logo (13 Oct 2026): in the header on every page, larger on the Majestic page */
.aus-made{height:88px;width:auto;align-self:center;margin:0 12px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.6))}
.aus-made-big{display:block;margin:0 auto;width:300px;max-width:80%;height:auto}
@media (max-width:1100px){.aus-made{height:64px}}
.topbar{position:relative}
@media (max-width:700px){.aus-made{position:absolute;right:16px;top:98px;height:52px;margin:0}}   /* beside the contact lines, clear of the Menu button */
.contact-strip a{color:#fff}
.contact-strip a:hover{color:var(--blue2)}
.contact-strip .sep{color:#555;margin:0 .55em}
.contact-strip .web{color:var(--blue2)}

/* nav */
.nav-toggle{display:none}
.nav-label{display:none}
.mainnav{background:transparent}
.mainnav .wrap{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:0;padding-bottom:0;margin-top:-6px}
/* frosted glass bar (12 Oct 2026): more see-through with a soft blur, so the beam shows behind the buttons; was .85 alpha and no blur */
.mainnav a{position:relative;color:#fff;text-transform:uppercase;font-size:.78rem;letter-spacing:.1em;font-weight:600;padding:12px 13px 13px;background:linear-gradient(180deg,rgba(23,26,34,.5) 0%,rgba(11,14,20,.5) 100%);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);border-left:1px solid rgba(255,255,255,.08)}
.mainnav a:first-child{border-left:0;border-radius:7px 0 0 7px}
.mainnav a:last-child{border-radius:0 7px 7px 0}
.mainnav a:hover{color:#fff;background:linear-gradient(180deg,rgba(40,46,62,.8) 0%,rgba(18,22,32,.8) 100%)}
.mainnav a.active::after{content:"";position:absolute;left:13px;right:13px;bottom:8px;height:2px;background:var(--blue2)}
@media (max-width:900px){
  /* phones: the logo stops short of the Menu button, and the tagline stays inside the logo's width,
     right aligned under it like on desktop */
  .site-header{--logo:min(560px,72vw,calc(100vw - 128px))}
  .nav-label{display:block;position:absolute;right:20px;top:22px;color:#fff;border:1px solid #444;border-radius:6px;padding:8px 14px;text-transform:uppercase;font-size:.85rem;cursor:pointer;letter-spacing:.08em}
  .mainnav{display:none}
  .nav-toggle:checked ~ .mainnav{display:block}
  .mainnav .wrap{flex-direction:column;gap:0;margin-top:6px}
  .mainnav a{padding:12px 16px;border-left:0;border-bottom:1px solid var(--line);font-size:.86rem;letter-spacing:.06em}
  .mainnav a:first-child,.mainnav a:last-child{border-radius:0}
  .mainnav a.active::after{left:16px;right:auto;width:40px}
  .contact-strip{text-align:left;width:100%}
  .tagline{font-size:max(6.5px,min(9px,calc(var(--logo) * .0341)),calc(var(--logo) * .0236))}
  .contact-strip a{white-space:nowrap}
}
/* the globe icon stays with the web address and the Mobile label with its number; on narrow phones each of the
   office number, mobile, email and web address gets its own line */
.contact-strip .nw{white-space:nowrap}
@media (max-width:520px){.contact-strip .sep{display:none}.contact-strip .nw{display:block}.contact-strip .mob{padding-left:24px}}

/* hero */
.hero{position:relative;min-height:580px;display:flex;align-items:center;overflow:hidden;background:var(--black,#000)}
.hero-media{position:absolute;inset:0}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:left center}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.1) 0%,rgba(0,0,0,.45) 40%,rgba(5,5,8,.95) 68%,#050508 100%)}
.hero-content{position:relative;z-index:1;width:100%;display:flex;justify-content:flex-end;padding-top:64px;padding-bottom:64px}
.hero-content>div{max-width:600px}
.kicker{color:var(--blue2);text-transform:uppercase;letter-spacing:.2em;font-size:.78rem;font-weight:700;margin-bottom:.9em}
.hero .sub{font-size:1.2rem;text-transform:uppercase;letter-spacing:.12em;color:#cfd8e6;margin-bottom:1.2em}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:1.4em}
@media (max-width:900px){
  .hero{min-height:0}
  .hero::after{background:linear-gradient(180deg,rgba(0,0,0,.15) 0%,rgba(5,5,8,.92) 50%,#050508 100%)}
  .hero-content{justify-content:flex-start;padding-top:240px;padding-bottom:40px}
}

/* sections */
.band{padding:64px 0}
.band.alt{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:900px){.grid-2,.grid-3{grid-template-columns:minmax(0,1fr)}.grid-4{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.grid-2>*,.grid-3>*,.grid-4>*{min-width:0}

/* showcase */
.showcase{background:var(--black,#000);border:1px solid var(--line);border-radius:10px;padding:20px}
.showcase img{border-radius:6px}
.showcase .big4k{font-size:2.4rem;font-weight:900;color:#ffc53d;line-height:1;margin:16px 0 6px}
.showcase .big4k small{font-size:1rem;color:#ffd97a;font-weight:600;margin-left:6px;letter-spacing:.05em}
.showcase blockquote{margin:14px 0 18px;color:#e2e2ea;font-style:italic;border-left:3px solid var(--blue);padding-left:14px}
.showcase cite{display:block;font-style:normal;color:var(--muted);font-size:.9rem;margin-top:6px}
.features{list-style:none;padding:0;margin:1.2em 0 1.4em;display:grid;grid-template-columns:1fr 1fr;gap:8px 20px}
.features li{padding-left:26px;position:relative;color:#d9d9e0}
.features li::before{content:"";position:absolute;left:0;top:.5em;width:13px;height:13px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 3px rgba(47,143,255,.22)}
@media (max-width:600px){.features{grid-template-columns:1fr}}

/* tiles */
.tile{background:var(--bg3);border:1px solid var(--line);border-radius:10px;overflow:hidden;display:flex;flex-direction:column;color:inherit;transition:transform .15s,border-color .15s}
.tile:hover{transform:translateY(-3px);border-color:#3f3f4c;color:inherit}
.tile .pic{aspect-ratio:4/3;background:var(--black,#000);display:flex;align-items:center;justify-content:center;overflow:hidden}
.tile .pic img{width:100%;height:100%;object-fit:cover}
.tile .pic.contain img{object-fit:contain;padding:18px}
.tile .pic.white{background:#fff}
.tile .body{padding:18px 20px 22px;flex:1;display:flex;flex-direction:column}
.tile h3{margin-bottom:.4em}
.tile p{color:var(--muted);font-size:.95rem;flex:1}
.tile .more{color:var(--blue2);font-weight:700;text-transform:uppercase;font-size:.78rem;letter-spacing:.08em}
.tile:hover .more{color:#fff}

/* news */
.news-list{list-style:none;margin:0;padding:0}
.news-list li{border-top:1px solid var(--line);padding:18px 0}
.news-list li:first-child{border-top:0;padding-top:0}
.news-list time{display:block;color:var(--blue2);text-transform:uppercase;font-size:.76rem;letter-spacing:.14em;font-weight:700;margin-bottom:4px}
.news-list strong{color:#fff}
.news-list p{margin:.4em 0 0}
.price-row{display:flex;gap:14px;flex-wrap:wrap;margin:12px 0 4px}
.price{background:var(--black,#000);border:1px solid var(--line);border-radius:8px;padding:12px 16px;min-width:210px}
.price .was{color:#777;text-decoration:line-through;font-size:.9rem;margin-right:6px}
.price .now{color:#fff;font-weight:800;font-size:1.5rem}
.price .lbl{color:var(--muted);font-size:.85rem}
.photo-card{margin:0;background:var(--black,#000);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.photo-card figcaption{padding:14px 18px;color:var(--muted)}

/* gallery + reviews */
.gallery-strip a{display:block;border-radius:8px;overflow:hidden;border:1px solid var(--line);aspect-ratio:3/2;background:var(--black,#000)}
.gallery-strip img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.gallery-strip a:hover img{transform:scale(1.04)}
.gallery-strip+.center{margin:28px 0 40px}
.reviews{gap:24px}
.review{background:var(--black,#000);border:1px solid var(--line);border-radius:10px;padding:24px;font-size:1.05rem}
.review p{color:#e3e3ea;font-style:italic;margin:0 0 .8em}
.review p::before{content:"\201C";color:var(--blue);font-size:2.4rem;line-height:0;vertical-align:-.45em;margin-right:4px;font-style:normal}
.review cite{font-style:normal;color:var(--muted);font-size:.9rem}

/* brands */
.brands{text-align:center;padding:36px 20px;background:var(--black,#000);border-top:1px solid var(--line)}
.brands p{color:var(--muted);text-transform:uppercase;letter-spacing:.2em;font-size:.74rem;margin-bottom:18px}
/* one white banner, each logo its own image (cut from Richard's strips on hometheatre.com.au), wrapping on phones */
.brand-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px 40px;max-width:1340px;margin:0 auto;background:#fff;border-radius:8px;padding:18px 36px}
.brand-row img{height:38px;width:auto}
.brand-row img.denon{height:44px}
.brand-row img.marantz{height:58px}
@media (max-width:700px){.brand-row{gap:10px 24px;padding:14px 16px}.brand-row img{height:28px}.brand-row img.denon{height:32px}.brand-row img.marantz{height:42px}}

/* footer */
.site-footer{background:var(--black,#050507);border-top:1px solid var(--line);padding:48px 0 32px;color:#bdbdc7;font-size:.95rem}
.site-footer .grid-3{gap:32px}
.site-footer h3{font-size:.82rem;text-transform:uppercase;letter-spacing:.16em;color:#fff;margin-bottom:.9em}
.site-footer a{color:#dfe8f5}
.site-footer a:hover{color:var(--blue2)}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin:0 0 .5em}
.copy{margin-top:36px;padding-top:18px;border-top:1px solid var(--line);font-size:.85rem;color:#8a8a95;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}

/* ---------- inner pages ---------- */
.page-head{background:var(--black,#000);border-bottom:1px solid var(--line);padding:44px 0 36px}
.page-head h1{font-size:clamp(1.9rem,4vw,3rem);margin:0 0 .35em}
.page-head p{color:#e9e9ef;max-width:none;margin:0 0 .8em}   /* Richard, 11 Oct 2026: the intro line runs right across the page, white not grey */
.page-head p:last-child{margin-bottom:0}
.page-head .kicker{margin-bottom:.6em}
.page-head + .band{padding-top:36px}   /* Richard, 11 Oct 2026: less of a gap between the intro line and the first paragraph */
.jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.jump a{border:1px solid #333;border-radius:999px;padding:6px 14px;font-size:.82rem;text-transform:uppercase;letter-spacing:.06em;color:#ddd}
.jump a:hover{border-color:var(--blue);color:#fff}
.prose{max-width:900px}
.prose p,.prose li{color:#d6d6de}
.prose h2{font-size:1.45rem;margin-top:1.8em;text-transform:none;letter-spacing:0}
.prose h2 span{color:var(--blue2)}
.prose h3{margin-top:1.4em}
.prose ul{padding-left:1.2em}
.prose li{margin-bottom:.55em}
.two{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:44px;align-items:start}
.two .prose{max-width:none}
@media (max-width:900px){.two{grid-template-columns:minmax(0,1fr)}}
.two>*{min-width:0}
.side{position:sticky;top:20px}
.side>*{margin-bottom:20px}
.fig{margin:0;background:var(--black,#000);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.fig:not(.natural) img{width:100%}   /* item 288 (1 Nov 2026): a .natural picture keeps its own width (new-look.css) */
.fig figcaption{padding:12px 16px;color:var(--muted);font-size:.9rem;line-height:1.5}
.fig.white{background:#fff}
/* the "Majestic 4K Cinema Screens" picture: a bit smaller, with room under it (Michael, 11 Oct 2026) */
.side .card-pic{max-width:440px;padding:0;margin:0 auto 36px}
.side .fig figcaption{padding-bottom:20px}
.fig.white figcaption{background:var(--black,#000)}
.fig-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:1.2em 0;align-items:start}
.fig-row.narrow{max-width:420px}
@media (max-width:600px){.fig-row{grid-template-columns:1fr}}
/* "Other ways to order" under the Screens for Sale order form (Richard, 14 Oct 2026) */
.other-ways{margin:18px 0 0 48px;background:var(--bg2);border:1px solid var(--line);border-radius:8px;padding:14px 18px 6px}
.other-ways h4{margin:0 0 8px;color:#fff;font-size:1rem}
.other-ways p{margin:0 0 8px;color:#d6d6de;font-size:.93rem;line-height:1.5}
@media (max-width:700px){.other-ways{margin-left:0}}
/* YouTube videos, click to play: nothing loads from YouTube until the play button is pressed (Richard, 12 Oct 2026) */
.watch{margin:34px 0 12px;font-size:.95rem;text-transform:uppercase;letter-spacing:.1em;color:var(--blue2)}
.videos{display:grid;grid-template-columns:1fr;gap:28px}   /* full width, one under the other (Michael, 13 Oct) */
.video{margin:0}
.video .play{position:relative;display:block;width:100%;aspect-ratio:16/9;padding:0;border:0;background:#000;cursor:pointer;overflow:hidden;border-radius:8px}
.video .play img{width:100%;height:100%;object-fit:cover;display:block;opacity:.9;transition:opacity .15s}
.video .play:hover img{opacity:1}
.video .play::before{content:"";position:absolute;left:50%;top:50%;width:70px;height:48px;transform:translate(-50%,-50%);background:#e62117;border-radius:12px;box-shadow:0 4px 18px rgba(0,0,0,.5)}
.video .play::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-40%,-50%);border-style:solid;border-width:11px 0 11px 19px;border-color:transparent transparent transparent #fff}
/* review VR3-6 (31 Oct 2026): the poster's opacity puts it on its own layer above the red button; lift the button over it */
.video .play::before,.video .play::after{z-index:1}
.video iframe{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:8px}
.video figcaption{margin-top:8px;color:#d6d6de;font-size:.9rem;line-height:1.4}
/* "Seeing is believing" on Screen Tech: its rules moved to css/believing.css with the new section (item SIB, 31 Oct 2026); the old .believe / .sib-row layout is gone */
.inline-banner{display:inline-block;max-width:720px;width:100%;border-radius:8px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.cards.four{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.cards.fabrics{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.card{background:var(--bg3);border:1px solid var(--line);border-radius:10px;padding:22px}
.card h3{margin-top:0}
.card h3+h3{margin-top:1.2em}
.card p{color:#d6d6de;font-size:.97rem}
.card p:last-child{margin-bottom:0}
.card ul{padding-left:1.1em;color:#cfcfd8;font-size:.93rem;margin:0}
.card li{margin-bottom:.35em}
.card .more{display:inline-block;margin-top:.6em;color:var(--blue2);font-weight:700;text-transform:uppercase;font-size:.78rem;letter-spacing:.08em}
.card .features{padding-left:0;margin:0 0 .4em;font-size:.97rem;color:#d6d6de}
.card .features li{margin:0}
.card .more:hover{color:#fff}
.card .btn{margin-top:.4em}
.card .spec{color:var(--blue2);font-size:.88rem;letter-spacing:.02em}
.card .max{color:#fff;font-weight:600}
.card .new{display:inline-block;background:var(--blue);color:#fff;font-size:.7rem;letter-spacing:.1em;padding:2px 8px;border-radius:4px;vertical-align:middle;margin-left:8px}
.product-card .pic{background:#fff;border-radius:6px;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;overflow:hidden;margin-bottom:14px}
.product-card .pic img{width:100%;height:100%;object-fit:contain;padding:10px}
.table-wrap{overflow-x:auto;margin:1em 0;border:1px solid var(--line);border-radius:8px}
table.spec{width:100%;border-collapse:collapse;font-size:.93rem;min-width:420px}
table.spec th,table.spec td{padding:8px 12px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
table.spec th{background:var(--black,#000);color:#fff;text-transform:uppercase;font-size:.72rem;letter-spacing:.1em}
table.spec td{color:#d6d6de}
table.spec td:first-child{color:#fff;font-weight:700}
table.spec tbody tr:nth-child(even) td{background:#0f0f13}
table.spec tbody tr:last-child td{border-bottom:0}
.small{font-size:.86rem}
.buy{background:var(--black,#000);border:1px solid var(--line);border-radius:10px;padding:20px}
.buy img{border-radius:6px;margin-bottom:14px}
.buy h3{margin-top:0}
.buy .btn{display:block;text-align:center;margin-bottom:10px}
.tbc{color:#ffc53d;font-weight:700;font-size:.9rem}
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.gallery-grid a{display:block;border-radius:8px;overflow:hidden;border:1px solid var(--line);aspect-ratio:3/2;background:var(--black,#000)}
.gallery-grid img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.gallery-grid a:hover img{transform:scale(1.04)}
.review-list{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:900px){.review-list{grid-template-columns:1fr}}
.review-list .review{font-size:.98rem}
form.contact{max-width:640px}
.field{margin-bottom:16px}
.field label{display:block;color:#fff;font-weight:600;margin-bottom:6px}
/* form boxes are white so they read as fields on the dark page (Richard, 10 Oct 2026) */
.field input,.field textarea{width:100%;background:#fff;border:1px solid #c9ced6;border-radius:6px;color:#111;padding:10px 12px;font:inherit}
.field select{width:100%;background:#fff;border:1px solid #c9ced6;border-radius:6px;color:#111;padding:10px 12px;font:inherit}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(47,143,255,.2)}
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
form.contact .btn{cursor:pointer}
.notice{display:none;border-radius:8px;padding:14px 16px;margin-bottom:18px;font-weight:600}
.notice.ok{background:#0f2d18;border:1px solid #1f6b35;color:#9ff0b4}
.notice.bad{background:#2d0f0f;border:1px solid #6b1f1f;color:#f0a0a0}
.notice:target{display:block}

/* ---------- order forms and price tables ---------- */
.order-form{background:var(--black,#000);border:1px solid var(--line);border-radius:10px;padding:22px;margin:1.4em 0 2em;max-width:640px}   /* capped so the boxes are not so wide (Richard, 14 Oct, item 84) */
.field input::placeholder,.field textarea::placeholder{color:#8a8f99}
.order-form h3{margin-top:0}
.field small{display:block;color:var(--muted);font-size:.8rem;line-height:1.4;margin-top:5px}
.field-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px 16px;margin-bottom:18px}
.field-grid .field{margin-bottom:0}
.field-grid .wide{grid-column:1 / -1}
@media (max-width:700px){.field-grid{grid-template-columns:1fr}}
table.prices th,table.prices td{white-space:normal;vertical-align:top;min-width:120px}
table.prices td:first-child{white-space:nowrap}
table.prices .amt{color:#fff;font-weight:700;font-size:inherit;display:block}   /* same weight and size as the size column (Richard, 14 Oct 2026, item 89) */
table.prices th:not(:first-child),table.prices td.live-cell,table.prices td.na{text-align:center}   /* prices centred over their Order now buttons (item 89) */
table.prices .call{color:var(--muted);font-size:.85rem}
table.prices .na{color:#444;text-align:center}
.buy-call{display:inline-block;margin-top:6px;font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;font-weight:700;color:var(--blue2)}
.buy-call:hover{color:#fff}
.order-form .table-wrap{margin-bottom:0}

/* ---------- home page after the 8 October mockup ---------- */
.hero2{background:var(--black,#000);border-bottom:1px solid var(--line)}
.hero2-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:0;align-items:stretch}
.hero2-photo{position:relative;min-height:340px}
.hero2-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:78% 30%}
.hero2-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,0) 86%,#000 100%)}
.hero2-text{padding:40px 0 40px 44px}
.hero2-text h1,.hero2-text h2{font-size:clamp(1.5rem,2.75vw,2.4rem);letter-spacing:.01em;margin-bottom:.35em;background:linear-gradient(180deg,#fff 0%,#a9d4ff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 0 16px rgba(47,143,255,.45))}
.hero2-text .sub{font-size:.85rem;text-transform:uppercase;letter-spacing:.14em;color:#9fcfff;margin-bottom:1em}
.hero2-text p{color:#e6e6ee;font-size:.95rem;line-height:1.55}
.hero2-text .btn{margin-top:.6em}
@media (max-width:900px){.hero2-grid{grid-template-columns:1fr}.hero2-photo{min-height:230px}.hero2-photo::after{background:linear-gradient(180deg,rgba(0,0,0,0) 70%,#000 100%)}.hero2-text{padding:26px 0 32px}}
.mock3{background:var(--black,#000)}
.mock3-grid{display:grid;grid-template-columns:250px minmax(0,1.3fr) minmax(0,1fr);gap:26px 36px;align-items:start}
.mock3-side{grid-row:1 / 3}
.mock3-side img{border-radius:4px;width:100%}
.mock3-side a{display:block}
.mock3-side a:hover img{opacity:.88}
.mock3-side .corner{aspect-ratio:auto}
.mock3-side .big4k{font-size:2.2rem;font-weight:900;color:#ffc53d;margin:16px 0 8px;line-height:1}
.mock3-side .big4k small{font-size:.95rem;color:#ffd97a;margin-left:6px;font-weight:600}
.mock3-side .quote{font-style:italic;color:#e2e2ea;font-size:.95rem;line-height:1.5;margin:0 0 12px}
.mock3-main p{color:#e6e6ee}
.mock3-main .lead-line{color:#fff;font-weight:700}
.mock3-right .fig.white{padding:10px}
.mock3-photos{grid-column:2 / 4;display:grid;grid-template-columns:1fr 1fr;gap:20px}
.mock3-photos img{width:100%;aspect-ratio:2.4/1;object-fit:cover;border-radius:2px;border:2px solid #d8dce3}
@media (max-width:900px){.mock3-grid{grid-template-columns:1fr}.mock3-side{grid-row:auto;display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:center}.mock3-side .big4k{margin:0}.mock3-photos{grid-column:1;grid-template-columns:1fr}.mock3-photos img{aspect-ratio:16/9}}
.features.one-col{grid-template-columns:1fr}
/* 11 Oct 2026, Richard: Welcome first, then the Majestic block; the showcase column keeps the two room photos beside it */
.welcome{border-top:0}
.mock3-grid.showcase-only{grid-template-columns:250px minmax(0,720px);justify-content:center}
.showcase-only .mock3-side{grid-row:auto}
.showcase-only .mock3-photos{grid-column:2;grid-template-columns:1fr}
@media (max-width:900px){.showcase-only .mock3-photos{grid-column:1}}

/* ---------- order picker ---------- */
[hidden]{display:none !important}
.picker .step{display:grid;grid-template-columns:34px minmax(0,1fr);gap:14px;align-items:start;margin-bottom:20px}
.picker .num{width:30px;height:30px;border-radius:50%;background:var(--blue);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:.9rem;margin-top:2px}
.picker h4{margin:0 0 8px;color:#fff;font-size:1rem}
.picker .field{margin-bottom:0}
.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg label{cursor:pointer;position:relative}
.seg input{position:absolute;opacity:0;width:1px;height:1px}
.seg span{display:inline-block;border:1px solid #444;border-radius:999px;padding:8px 18px;color:#ddd;font-weight:600}
.seg input:checked+span{background:var(--blue);border-color:var(--blue);color:#fff}
.seg input:focus-visible+span{outline:2px solid #fff;outline-offset:2px}
.picker select{width:100%;background:#fff;border:1px solid #c9ced6;border-radius:6px;color:#111;padding:12px;font:inherit}
.picker select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(47,143,255,.2)}
.pick-summary{color:#fff;font-weight:700;font-size:1.05rem;background:#101418;border:1px solid var(--line);border-radius:8px;padding:12px 14px;margin:0 0 20px 48px}
.pick-summary:empty{display:none}
/* packages page: the price of each part and the total */
.pick-summary .line{display:flex;justify-content:space-between;gap:12px;font-weight:400;color:#d6d6de;padding:2px 0}
.pick-summary .line span:last-child{white-space:nowrap;color:#fff;font-weight:700}
.pick-summary .line.total{border-top:1px solid var(--line);margin-top:6px;padding-top:8px;color:#fff;font-weight:700}
.pay-box .paybtn .enquire{margin-left:8px}
/* card payment: the eWAY button waits for the delivery details; bank deposit and best-price buttons sit under it */
.paybtn.locked > *{opacity:.4;pointer-events:none}
.paybtn.locked::after{content:"Fill in your name, email and delivery address above to pay by card.";display:block;color:#ffc53d;font-size:.86rem;margin-top:8px}
.pay-box .payalt{margin-top:12px;color:var(--muted);font-size:.9rem}
.pay-box .payalt .btn{margin:0 6px 6px 4px;font-size:.84rem;padding:.6em 1.1em}
.pay-box .opt .amt{font-size:1.7rem;font-weight:800;color:#fff;margin-right:10px}
.pay-box .opt .ship{color:var(--muted)}
.pay-box .opt .paybtn{margin-top:10px}
.pay-box .opt .call{color:#ffc53d;font-weight:700;font-size:1.1rem}
.pay-box .soon{color:#ffc53d;font-weight:700;font-size:.9rem;display:block;margin-top:6px}
.pay-box .paybtn .buy-call{font-size:.9rem}
@media (max-width:600px){.pick-summary{margin-left:0}}
.dims{border-top:1px solid var(--line)}
.dims summary{cursor:pointer;color:#fff;font-weight:700;padding:14px 0}
.dims summary:hover{color:var(--blue2)}
.dims[open] summary{border-bottom:1px solid var(--line);margin-bottom:12px}

/* ---------- Option B home page ---------- */
.option-bar{background:#15243a;border-bottom:1px solid #27416a;color:#cfe0ff;font-size:.85rem;text-align:center;padding:8px 16px}
.option-bar a{color:#fff;text-decoration:underline}
.hero-b{position:relative;min-height:620px;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;background:var(--black,#000)}
.hero-b-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.hero-b::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(0,0,0,.15) 0%,rgba(0,0,0,.7) 70%,#000 100%)}
.hero-b-content{position:relative;z-index:1;max-width:900px;padding:80px 20px}
.hero-b h1{font-size:clamp(2rem,4.6vw,3.6rem);line-height:1.08}
.hero-b-sub{color:#dfe6f0;font-size:1.1rem;max-width:720px;margin:1.2em auto 0}
.actions.center{justify-content:center}
.proof{background:#0d0d10;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.proof-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:0}
.proof-grid div{padding:22px 16px;text-align:center;border-left:1px solid var(--line)}
.proof-grid div:first-child{border-left:0}
.proof-grid strong{display:block;color:var(--blue2);font-size:1.7rem;font-weight:800;line-height:1.1}
.proof-grid span{display:block;color:var(--muted);font-size:.85rem;margin-top:4px}
@media (max-width:900px){.proof-grid{grid-template-columns:1fr 1fr}.proof-grid div{border-left:0;border-top:1px solid var(--line)}.proof-grid div:nth-child(-n+2){border-top:0}.hero-b{min-height:0}.hero-b-content{padding:60px 20px}}
.format-cards{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.format-card{position:relative;display:block;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--black,#000);color:inherit;aspect-ratio:16/10}
.format-card img{width:100%;height:100%;object-fit:cover;transition:transform .4s;opacity:.85}
.format-card:hover img{transform:scale(1.04)}
.format-text{position:absolute;left:0;right:0;bottom:0;padding:26px 26px 24px;background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.85) 55%,#000 100%)}
.format-text h3{font-size:1.5rem;text-transform:uppercase;margin-bottom:.3em}
.format-text p{color:#d6d6de;margin-bottom:.6em}
.format-text .more{color:var(--blue2);font-weight:700;text-transform:uppercase;font-size:.8rem;letter-spacing:.08em}
@media (max-width:800px){.format-cards{grid-template-columns:1fr}.format-card{aspect-ratio:4/3}}
.fort .fig{margin-bottom:28px}
.fort-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-bottom:28px}
.fort-cols h3{color:var(--blue2);text-transform:uppercase;font-size:.95rem;letter-spacing:.1em}
.fort-cols p{color:#d6d6de}
@media (max-width:800px){.fort-cols{grid-template-columns:1fr}}
.mosaic{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:190px;gap:14px;margin-bottom:28px}
.mosaic a{display:block;border-radius:8px;overflow:hidden;border:1px solid var(--line);background:var(--black,#000)}
.mosaic a.big{grid-column:span 2;grid-row:span 2}
.mosaic img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.mosaic a:hover img{transform:scale(1.04)}
@media (max-width:800px){.mosaic{grid-template-columns:1fr 1fr;grid-auto-rows:150px}.mosaic a.big{grid-column:span 2;grid-row:span 1}}
.quote-band{background:var(--black,#000);border-top:1px solid var(--line);border-bottom:1px solid var(--line);text-align:center;padding:60px 0}
.bigquote{font-size:clamp(1.4rem,2.6vw,2rem);font-style:italic;color:#fff;max-width:900px;margin:0 auto .5em;line-height:1.3}
.quote-band .who{color:var(--muted);margin-bottom:28px}
.quote-band img{margin:0 auto;width:min(420px,100%)}
.news-row{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.news-row li{border-top:0;padding:0}
@media (max-width:900px){.news-row{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.news-row{grid-template-columns:1fr}}

@media (min-width:901px){.hero2-text h1,.hero2-text h2{white-space:nowrap}}

/* a slow light sweep across the logo letters and a gentle breathing of the beam (Richard's "shiny projector light", 11 Oct 2026).
   The sweep is a band of light masked to the logo's own letter shapes, so the background stays untouched. */
.brand{position:relative}
.brand::after{content:"";position:absolute;left:0;top:0;width:var(--logo);height:calc(var(--logo) * .10333);pointer-events:none;
  -webkit-mask:url(../images/logo-ozts.png) no-repeat 0 0/100% 100%;mask:url(../images/logo-ozts.png) no-repeat 0 0/100% 100%;
  background:linear-gradient(110deg,rgba(255,255,255,0) 36%,rgba(255,255,255,.45) 50%,rgba(255,255,255,0) 64%);background-size:150% 100%;background-position:200% 0;
  animation:oz-sweep 8.75s linear infinite}
/* the same pulse of light travels along the projector beam, from the lens outward, masked to the beam's own shape; the two run in step */
@media (min-width:901px){
  .mainnav .wrap::after{content:"";position:absolute;left:calc(var(--beam) * -.0184);bottom:calc(var(--beam) * -.0526 - 12px);width:var(--beam);height:calc(var(--beam) * .3684);z-index:-1;pointer-events:none;
    -webkit-mask:url(../images/header-beam.svg) no-repeat 0 0/100% auto;mask:url(../images/header-beam.svg) no-repeat 0 0/100% auto;
    background:linear-gradient(100deg,rgba(255,255,255,0) 36%,rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 64%);background-size:150% 100%;background-position:200% 0;
    animation:oz-sweep 8.75s linear infinite}
}
/* with a 150% wide image the band starts fully left of the logo at 200% and is fully clear of its right end at -100%, where it rests */
@keyframes oz-sweep{0%{background-position:200% 0}40%{background-position:-100% 0}100%{background-position:-100% 0}}
@media (prefers-reduced-motion:reduce){.brand::after,.mainnav .wrap::after{animation:none;display:none}}

/* film strip of customer rooms under the header (Richard's idea, 11 Oct 2026): a strip of 35mm film with sprocket holes that
   scrolls on its own, pauses while the mouse is over it, and links to the gallery. Frame + gap = 210px = 5 sprocket periods,
   and the set of 14 is repeated, so the loop joins without a jump. */
/* Richard's own film strip design (his picture of 12 Oct 2026): his sprocket rows, cut from that picture and
   repeated at their own size, above and below white-edged frames holding his gallery rooms */
.film{display:block;overflow:hidden;background:#201e1e;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:0}   /* at the bottom of the home page, softened (Richard, 13 Oct) */
/* the sprocket rows ride on the moving track, one of his holes every 36px; the frame step is a multiple of 36px
   (216px, 180px on phones) so a lap of the loop moves a whole number of holes and the rows never jump */
.film-track{display:flex;width:max-content;padding:27px 0;animation:oz-film 75s linear infinite;
  background:url(../images/film/sprocket-top.png) repeat-x left top,url(../images/film/sprocket-bottom.png) repeat-x left bottom}
.film:hover .film-track{animation-play-state:paused}
.frame{flex:0 0 210px;height:142px;margin-right:6px;background:#000;overflow:hidden;border:2px solid #9c9c9c;box-sizing:border-box}
.frame img{width:100%;height:100%;object-fit:cover;display:block}
@keyframes oz-film{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (max-width:700px){.frame{flex-basis:174px;height:118px}.film-track{animation-duration:60s}}
@media (prefers-reduced-motion:reduce){.film-track{animation:none}}

/* header contact icons */
.contact-strip .ico{width:17px;height:17px;fill:var(--blue2);vertical-align:-3px;margin-right:7px}

/* keep the tab menu on one row down to laptop widths */
/* ten menu items on one row down to about 1000px: three steps smaller as the window narrows (12 Oct 2026) */
@media (min-width:901px) and (max-width:1300px){.mainnav a{padding:11px 8px 12px;font-size:.7rem;letter-spacing:.05em}.mainnav a.active::after{left:8px;right:8px}}
@media (min-width:901px) and (max-width:1120px){.mainnav a{padding:11px 6px 12px;font-size:.66rem;letter-spacing:.04em}.mainnav a.active::after{left:6px;right:6px}.site-header{--logo:min(480px,60vw)}}
@media (min-width:901px) and (max-width:1040px){.mainnav a{padding:11px 5px 12px;font-size:.64rem;letter-spacing:.03em}.mainnav a.active::after{left:5px;right:5px}}

/* projector lens, beam and light streak behind the logo, after the mockup */
.mainnav .wrap{position:relative}
@media (min-width:901px){
  .site-header{--beam:calc(var(--logo) * .9);border-bottom-color:transparent}
  .brand{margin-left:calc(var(--beam) * .045)}
  .mainnav .wrap::before{content:"";position:absolute;left:calc(var(--beam) * -.0184);bottom:calc(var(--beam) * -.0526 - 12px);width:var(--beam);height:calc(var(--beam) * .3684);background:url(../images/header-lens.png) no-repeat calc(var(--beam) * .00724) calc(var(--beam) * .2704)/calc(var(--beam) * .0908) auto,url(../images/header-beam.svg) no-repeat 0 0/100% auto;z-index:-1;pointer-events:none}
}
@media (max-width:900px){
  .site-header{background:radial-gradient(ellipse 60% 120% at 0% 100%,rgba(60,150,255,.45) 0%,rgba(20,80,200,.18) 40%,transparent 70%),linear-gradient(180deg,#04060b 0%,#070c17 60%,#05080f 100%)}
}

/* order enquiry button and narrow forms */
.pay-box .enquire{display:inline-block;margin:14px 0 10px;cursor:pointer;font:inherit;font-weight:700;font-size:.9rem}
.order-form.narrow{max-width:860px}
.product-card .more{margin-top:auto;padding-top:.6em}
.product-card{display:flex;flex-direction:column}

/* order now buttons, eWAY note, card prices */
.eway-note{display:flex;align-items:center;gap:12px;margin:16px 0 10px;color:var(--muted);font-size:.86rem;line-height:1.45}
.eway-note img{background:#fff;border-radius:5px;padding:4px 8px;width:74px;height:auto;flex:0 0 auto}
.pay-box .paybtn .btn{cursor:pointer;font:inherit;font-weight:700;font-size:.95rem;letter-spacing:.04em;text-transform:uppercase}
.cell-btn{margin-top:6px;background:var(--blue);border:1px solid var(--blue);color:#fff;border-radius:5px;padding:5px 10px;font:inherit;font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;cursor:pointer;white-space:nowrap}
.cell-btn:hover{background:var(--blue2);border-color:var(--blue2)}
.cell-btn.ghost{background:transparent;border-color:#555;color:#ddd}
.cell-btn.ghost:hover{border-color:#fff;color:#fff;background:transparent}
.card .card-price{color:#fff;font-weight:800;font-size:1.3rem;margin:0 0 .35em}
/* projectors: the RRP is shown and a "call for our best price" line sits under it (Richard, 11 Oct 2026) */
.call-best{color:var(--blue2);font-weight:700;font-size:.86rem;text-transform:uppercase;letter-spacing:.06em;margin:-.2em 0 .9em}
.card .call-best{margin:-.2em 0 .7em}
.card p.call-best{color:var(--blue2)}   /* item 260 (30 Oct 2026, review RV2): the card's call line in the accent colour; .card p made it grey */
.pay-box .opt .call-best{display:block;margin:8px 0 0}
.product-buy .call-best{margin:-.3em 0 1em}

/* clickable cards, size and price tables, order form dimensions */
.card h3 a{color:inherit}
.card h3 a:hover{color:var(--blue2)}
.product-card{transition:border-color .15s,transform .15s}
.product-card:hover{border-color:#3f3f4c;transform:translateY(-2px)}
.product-card a.pic img{transition:transform .2s}
.product-card a.pic:hover img{transform:scale(1.03)}
.fig a{display:block}
.size-tables{gap:32px}
.size-tables h3{margin-bottom:.6em}
table.sizes td{padding:9px 12px}
table.sizes td:first-child a{color:#fff}
table.sizes td:first-child a:hover{color:var(--blue2)}
table.sizes td.amt{color:#fff;font-weight:800}
table.sizes td.go{text-align:right}
/* Richard, 12 Oct: the numbers sit centred under their headings (dimensions and price); size stays left, Order right */
table.sizes th:nth-child(2),table.sizes th:nth-child(3),table.sizes th:nth-child(4),table.sizes td:nth-child(2),table.sizes td:nth-child(3),table.sizes td:nth-child(4){text-align:center}
/* the dimension tables on Screens for Sale and the price grid page: the same (Richard, 14 Oct, item 79) */
table.dims th:nth-child(2),table.dims th:nth-child(3),table.dims td:nth-child(2),table.dims td:nth-child(3){text-align:center}
table.sizes td.go a{font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
table.sizes tbody tr:hover td{background:#16161d}
.pick-dims{color:var(--muted);font-size:.9rem;margin:-10px 0 20px 48px}
.pick-dims:empty{display:none}
@media (max-width:600px){.pick-dims{margin-left:0}}

/* ---------- product pages ---------- */
.page-head .kicker a{color:inherit}
.page-head .kicker a:hover{color:#fff}
.product-top{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:48px;align-items:start}   /* the photo sits at the top, no gap above it (Richard, 14 Oct 2026, item 100) */
.product-photo{background:#fff;border:1px solid var(--line);border-radius:10px;padding:26px;display:flex;align-items:center;justify-content:center;min-height:320px}
.product-photo img{width:auto;max-width:100%;max-height:440px;object-fit:contain}
.product-buy .buy-price{color:#fff;font-weight:800;font-size:clamp(2rem,3.4vw,2.8rem);line-height:1.1;margin:0 0 .2em}
.product-buy .ship{color:var(--blue2);text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;font-weight:700;margin-bottom:1.3em}
.features.one{grid-template-columns:1fr}
.product-buy .actions{margin:1.4em 0 1em}
.goes-title{font-size:.82rem;letter-spacing:.16em;margin:1.9em 0 .7em}
.goes{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.goes li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:10px 0;border-bottom:1px solid var(--line);font-size:.95rem}
.goes span{color:#fff;font-weight:700;white-space:nowrap}
@media (max-width:900px){.product-top{grid-template-columns:minmax(0,1fr);gap:26px}.product-photo{min-height:0;padding:18px}.product-photo img{max-height:340px}}
.product-body{max-width:900px}
.product-body h2{margin-top:0}
.product-body h3{font-size:1.3rem;margin-top:1.9em}
.product-body a{overflow-wrap:anywhere}
.pshot{margin:1.4em 0;max-width:820px}
.pshot img{border-radius:8px;border:1px solid var(--line);background:#fff}
.feature-row{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:26px;align-items:center;margin:1.6em 0 0;padding-top:1.6em;border-top:1px solid var(--line)}
.feature-row .pshot{margin:0}
.product-body .feature-row h3{margin-top:0}
.feature-row p:last-child{margin-bottom:0}
@media (max-width:640px){.feature-row{grid-template-columns:minmax(0,1fr);gap:14px}}
table.specs{min-width:0}
table.specs th,table.specs td{white-space:normal;vertical-align:top}
table.specs td:first-child{width:36%}
table.specs td.note{width:auto;font-weight:400;color:#d6d6de}
.product-two{grid-template-columns:minmax(0,900px) minmax(260px,340px);justify-content:space-between}
@media (max-width:900px){.product-two{grid-template-columns:minmax(0,1fr)}}
.buy .buy-price{color:#fff;font-weight:800;font-size:1.8rem;line-height:1.1;margin:0 0 .3em}
.buy .btn:last-child{margin-bottom:0}

/* the row of other projectors at the foot of a product page */
.cards.rel{grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.cards.rel .card{padding:16px}
.cards.rel4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1280px){.cards.rel{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){.cards.rel4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.cards.rel{grid-template-columns:repeat(2,minmax(0,1fr))}.cards.rel,.cards.rel4{gap:12px}.cards.rel .card,.cards.rel4 .card{padding:12px}}

/* two links at the foot of a product card: the product page and the order form */
.card-links{display:flex;flex-wrap:wrap;gap:6px 18px;margin:auto 0 0;padding-top:.6em;align-items:center}
.card-links .more{margin-top:0;padding-top:0}
/* projector cards: Order now and "Ask for our best price" as two small buttons (Richard, 12 Oct 2026) */
.card-links .btn.small{margin:0;padding:.5em .9em;font-size:.7rem;letter-spacing:.03em}
.card-links{gap:8px 10px}
/* the order form opened from an "Ask for our best price" button (?ask=1): the ask button leads, card payment steps back */
.picker.asking .asking-note{margin:0 0 10px;color:#ffc53d;font-weight:700}
.picker.asking .paybtn{display:none}
.picker.asking .payalt .enquire{background:var(--blue);border-color:var(--blue);color:#fff}
.pick-more{font-size:.9rem;margin:-10px 0 20px 48px}
@media (max-width:600px){.pick-more{margin-left:0}}

/* ---- round 6, Richard's emails of 14 Oct 2026 ---- */
.field textarea{resize:vertical}   /* 87: the message box can be dragged taller, not wider */
.top-ways{margin:0 0 .4em}         /* 88: the other way to order, linked at the top of both ordering pages */
.top-ways .btn{font-size:.82rem;padding:.6em 1.2em}
.page-head .brochure{margin:-.3em 0 0;font-size:.92rem}   /* 101: the JVC brochure link under the intro of each JVC page */
.page-head .brochure a{color:var(--blue2)}
.page-head .brochure a:hover{color:#fff}
.pick-summary .line.plain span:last-child{color:var(--muted);font-weight:400}   /* 93: package lines carry no prices */
.seg span span{display:inline;border:0;padding:0;background:transparent;color:inherit;font-weight:inherit}   /* 93: the live price inside a mount chip is plain text, not a chip of its own */
.showcase-only .mock3-photos img{aspect-ratio:auto}   /* 92: real customer photos shown whole, not cut to a strip */
/* 91: the gallery slideshow, one photo at a time in a box of one size, a line under each */
.slideshow{position:relative;background:#000;border:1px solid var(--line);border-radius:10px;overflow:hidden;margin:0 0 18px;outline:none}
.slideshow:focus-visible{box-shadow:0 0 0 3px rgba(47,143,255,.5)}
.slideshow .stage{position:relative;height:min(66vw,720px)}   /* a box of one size: the full width of the page, 720px tall at most */
.slideshow .slide{margin:0}
.slideshow.js .slide{display:none;position:absolute;inset:0}
.slideshow.js .slide.on{display:block}
.slideshow .slide img{display:block;width:100%;height:100%;object-fit:contain;background:#000}
.slideshow .slide figcaption{display:block;width:100%;max-width:none;box-sizing:border-box;margin:0;padding:12px 14px;color:#e9e9ef;font-size:.95rem;line-height:1.5;background:#0b0b0e;border-top:1px solid var(--line);text-align:left}
.slideshow.js .slide figcaption{display:none}   /* 175: with scripts the caption is the block under the stage, see .caption */
.slideshow:not(.js) .stage{height:auto}
.slideshow .arrow{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:72px;border:0;border-radius:6px;background:rgba(0,0,0,.55);color:#fff;font-size:2.2rem;line-height:1;cursor:pointer;display:none;font-family:inherit}
.slideshow.js .arrow{display:block}
.slideshow .arrow:hover{background:var(--blue)}
.slideshow .prev{left:10px}.slideshow .next{right:10px}
.slideshow .count{position:absolute;top:10px;right:12px;margin:0;background:rgba(0,0,0,.6);color:#fff;font-size:.8rem;padding:4px 10px;border-radius:999px}
.slideshow .count:empty{display:none}
.gallery-grid a.current{outline:2px solid var(--blue);outline-offset:1px}
@media (max-width:700px){.slideshow .stage{height:72vw}.slideshow .arrow{width:38px;height:56px;font-size:1.8rem}.slideshow .slide figcaption{font-size:.84rem;padding:0 10px}}

/* ---- item 110 (16 Oct 2026): one screen ordering page ---- */
.paychoice{margin:12px 0 16px}
.paychoice-q{margin:0 0 8px;color:#fff;font-weight:700;font-size:.95rem}
form[data-pay="card"] .pay-payid,form[data-pay="payid"] .pay-card,form[data-pay="payid"] .eway-note{display:none}
form[data-priced="0"] .paychoice,form[data-priced="0"] .eway-note{display:none}   /* an enquiry has no card payment */
.pay-payid .payid-note{color:#d6d6de;font-size:.92rem;line-height:1.5;margin:10px 0 12px}
/* sizes and prices in one table, full width; a price fills in the order form */
table.pricelist th,table.pricelist td{min-width:104px;vertical-align:top;white-space:nowrap}
table.pricelist th:not(:first-child),table.pricelist td:not(:first-child){text-align:center}
table.pricelist th{white-space:normal}
table.pricelist a.cell-btn{display:inline-block;text-decoration:none;line-height:1.3}   /* Order now under each price, as on the old grid (16 Oct 2026) */
table.pricelist a.cell-btn:hover{color:#fff}
table.pricelist th:first-child,table.pricelist td:first-child{position:sticky;left:0;z-index:1;min-width:72px;text-align:left}
table.pricelist td:first-child .sz{display:block}
table.pricelist td:first-child .dim{display:block;font-size:.74rem;font-weight:400;color:var(--muted);line-height:1.35}   /* overall size and viewing area under the size (16 Oct 2026) */
table.pricelist td:first-child{background:var(--bg)}
table.pricelist tbody tr:nth-child(even) td:first-child{background:#0f0f13}
#dimensions details.dims summary{cursor:pointer;font-weight:700;color:#fff;margin:14px 0 6px}
/* the sizes and prices tables sit in the order box under the other ways to order; the box widens for them, the steps
   above keep the 640px box width Richard asked for (item 84) (Michael, 16 Oct 2026) */
.two.wide-form{grid-template-columns:minmax(0,800px) minmax(0,1fr)}
@media (max-width:1100px){.two.wide-form{grid-template-columns:minmax(0,1fr)}.two.wide-form .side{position:static}}
.order-form.has-sizes{max-width:800px}
.order-form.has-sizes>.step{max-width:596px}
.order-form.has-sizes>.pick-summary,.order-form.has-sizes>.pick-dims,.order-form.has-sizes>.other-ways{max-width:548px}
.sizes-box{margin:26px 0 0;border-top:1px solid var(--line);padding-top:18px}
.sizes-box h4{margin:0 0 6px;color:#fff;font-size:1.05rem}
.sizes-box .table-wrap{margin:.6em 0}
.sizes-box.on-own{margin:24px 0 0;padding:22px;background:var(--black,#000);border:1px solid var(--line);border-radius:10px}   /* its own box under the order box, the full width (item 260, review F4, 30 Oct 2026) */
table.pricelist th,table.pricelist td{padding:8px 7px}
table.pricelist td.custom-note{display:none;color:var(--muted);text-align:center}
table.pricelist tr.custom-row td.custom-note{display:table-cell}
table.pricelist tr.custom-row td.live-cell,table.pricelist tr.custom-row td.na{display:none}

/* ---- round 7, Richard's emails of 15 Oct 2026 ---- */
#starters{padding-bottom:28px}                       /* 108: less black space above "Build your package" */
#starters + .band{padding-top:30px}
.order-form.pkg{margin-top:0}
.pkg-banner{margin:0 0 34px}                          /* 109: Richard's package banner, as he made it, never wider than its own size */
.pkg-banner img{display:block;max-width:100%;height:auto;margin:0 auto}
.pkg-from{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 18px;margin:14px 0 0;font-size:1.05rem;color:#e9e9ef}
.pkg-from .pkg-price{color:#fff;font-weight:700}
.more-pkgs{margin:6px 0 14px}
.mount-step .mount-more{margin:8px 0 0}              /* 113: the mount with a screen */
.card .pdf-link{font-size:.9rem;margin:6px 0 10px}   /* 95: the Acoustic Vision test results */

/* ---------- reCAPTCHA v3 on the forms (17 Oct 2026): Google's floating badge hidden, its line under each form instead ---------- */
.grecaptcha-badge{visibility:hidden}
.rc-note{margin:10px 0 0;color:var(--muted);font-size:.78rem;line-height:1.45}
.rc-note a{color:inherit;text-decoration:underline}

/* ---------- round 8 (17 Oct 2026) ---------- */
.stock-note{font-weight:700;color:#fff}                                           /* 130: projectors, ask about stock first */
.head-badge{display:flex;align-items:center;justify-content:space-between;gap:20px 40px}   /* 136: fabrics page logo */
.head-badge > div{flex:1 1 auto;min-width:0}
.head-badge img{flex:0 1 auto;width:auto;max-width:min(454px,38%);height:auto}
@media (max-width:760px){
  .head-badge{flex-direction:column;align-items:flex-start}
  .head-badge img{max-width:min(454px,80%)}
}
.info-box{background:var(--bg2);border:1px solid var(--line);border-left:3px solid var(--blue);border-radius:8px;padding:14px 18px;margin:0 0 18px;color:#e9e9ef;font-size:.95rem}   /* 124, 125 */
.band.alt .info-box{background:var(--bg3)}
.info-box h3{margin:0 0 8px;font-size:1.05rem}
.info-box p{margin:0 0 8px}
.info-box p:last-child{margin-bottom:0}
.info-box .caps{text-transform:uppercase;letter-spacing:.06em;font-weight:700;color:#fff}
.ship-box{margin-bottom:26px}
.paydetails{background:var(--bg2);border:1px solid var(--line);border-left:3px solid var(--blue);border-radius:8px;padding:16px 20px;margin:0 0 30px}   /* 122 */
.paydetails h2{margin-top:0}
.paydetails .or{color:var(--muted);margin:4px 0}
.pkg-note{color:#e9e9ef;margin:0 0 18px}                                                     /* 128: all nine banners */
.pkg-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 28px;margin:0 0 30px}
.pkg-grid .pkg-banner{margin:0}
.pkg-grid .pkg-from{font-size:.98rem}
@media (max-width:760px){.pkg-grid{grid-template-columns:1fr}}
.pkg-band .pkg-banner{max-width:1000px;margin:0}
.fmt-banners{display:flex;gap:18px;margin:0 0 26px}                                          /* 132: the two screen banners, same height */
.fmt-banners a:first-child{flex:1000 1 0}
.fmt-banners a:last-child{flex:1351 1 0}
.fmt-banners img{display:block;width:100%;height:auto}
@media (max-width:760px){.fmt-banners{flex-direction:column}}
.was{color:var(--muted);text-decoration:line-through;font-weight:400}                           /* 121: RRP crossed out, the price, the saving */
.now{color:#fff}
.save{display:inline-block;background:rgba(47,143,255,.16);color:var(--blue2);border-radius:4px;padding:1px 7px;font-size:.78em;font-weight:700;vertical-align:middle;white-space:nowrap}
.product-gallery{min-width:0}                                                                   /* 118: JVC's photos */
.photo-thumbs{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.photo-thumbs button{background:#fff;border:2px solid var(--line);border-radius:6px;padding:2px;cursor:pointer;line-height:0}
.photo-thumbs button.on,.photo-thumbs button:hover{border-color:var(--blue)}
.photo-thumbs img{display:block;width:64px;height:auto}

/* ---------- round 9 (17-18 Oct 2026, Richard's red replies) ---------- */
.pkg-banner img,.fmt-fig img,.fmt-pic{border:var(--frame-w,14px) solid var(--frame,#fff);border-radius:4px}   /* 147: a white border so the black frames show; 185: as wide as the frame, colour and width from the Colours tab */
#starters{background:#232329}                                                        /* 147: charcoal behind the package banners */
#starters .pkg-grid{margin-bottom:34px}
.pkg-brand{font-size:1.25rem;margin:0 0 14px;color:#fff}                             /* 159: JVC and Epson sub headings */
.fmt-fig{margin:0 0 16px}                                                            /* 146: the HD and Scope banners in place of the castle picture */
.fmt-fig img,.buy .fmt-pic{display:block;width:100%;height:auto}
.bb-quote{color:#e9e9ef;font-style:italic;margin:0 0 26px;line-height:1.45}
.bb-quote span{display:block;font-style:normal;color:var(--muted);font-size:.86rem;margin-top:4px}
.buy .bb-quote{margin:4px 0 16px;font-size:.92rem}
/* 163: videos in a row of small boxes; the one clicked opens full width above them (js/video.js) */
.videos{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.videos.one{grid-template-columns:repeat(2,minmax(0,1fr))}
.video .play::before{width:46px;height:32px;border-radius:8px}
.video .play::after{border-width:7px 0 7px 12px;transform:translate(-35%,-50%)}
.video figcaption{font-size:.8rem;margin-top:6px}
.video.current .play{outline:3px solid var(--blue);outline-offset:2px}
.video-stage{margin:0 0 16px}
.video-stage iframe{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:8px;background:#000}
.video-stage figcaption{margin-top:8px;color:#d6d6de;font-size:.92rem;line-height:1.4}
@media (max-width:700px){.videos,.videos.one{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* 143: stock status on projectors (from the price editor); 158: Order now takes the stock colour */
.stock{display:inline-block;border-radius:4px;padding:2px 9px;font-size:.76rem;font-weight:700;letter-spacing:.03em;vertical-align:middle;white-space:nowrap}
.stock-in{background:rgba(34,197,94,.16);color:#7ee2a0}
.stock-low,.stock-backorder{background:rgba(245,158,11,.18);color:#f5c26b}
.stock-out{background:rgba(255,255,255,.1);color:#c9c9d2}
.card-price .stock{margin-left:8px}
.stock-line{margin:0 0 12px}
.stock-note{color:#e9e9ef;font-size:.92rem;margin:8px 0 10px}
.opt .stock{margin:0 0 6px}
.btn.stock-out{background:#4a4a52;border-color:#4a4a52;color:#e2e2ea}
.btn.stock-out:hover{background:#5a5a63;border-color:#5a5a63}
.btn.stock-backorder,.btn.backorder{background:#b7791f;border-color:#b7791f}
.btn.stock-backorder:hover,.btn.backorder:hover{background:#d28f2a;border-color:#d28f2a}
/* 175, 176: the caption as a text block under the photo, as long as Richard writes it (paragraphs, headings, lists), in the size he picks in the back end */
.slideshow .caption{padding:14px 18px 16px;color:#e9e9ef;font-size:1rem;line-height:1.55;background:#0b0b0e;border-top:1px solid var(--line);text-align:left}
.slideshow .caption:empty{display:none}
.slideshow .caption p{margin:0 0 10px}.slideshow .caption p:last-child,.slideshow .caption ul:last-child,.slideshow .caption ol:last-child{margin-bottom:0}
.slideshow .caption h3,.slideshow .caption h4{margin:0 0 8px;font-size:1.1rem;color:#fff}.slideshow .caption h4{font-size:1rem}
.slideshow .caption ul,.slideshow .caption ol{margin:0 0 10px 22px}.slideshow .caption a{color:var(--blue)}
.slideshow.cap-smaller .caption{font-size:.88rem}.slideshow.cap-small .caption{font-size:.8rem}
@media (max-width:700px){.slideshow .caption{padding:10px 12px 12px;font-size:.92rem}.slideshow.cap-smaller .caption{font-size:.84rem}.slideshow.cap-small .caption{font-size:.78rem}}
/* 174: the text sizes the back end's editor can set, in captions and page text */
.t-small{font-size:.86em}.t-large{font-size:1.2em}
/* 172: the throw distance calculator on the projector pages */
.calc-band .lead{max-width:none}
.throw-calc{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:16px 18px 18px;margin:16px 0 14px}
.throw-calc .modes{display:flex;flex-wrap:wrap;gap:8px 22px;margin:0 0 12px}
.throw-calc .modes label{cursor:pointer;color:#e9e9ef}
.throw-calc .row{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:flex-end}
.throw-calc .f label{display:block;font-size:.78rem;font-weight:700;color:var(--muted);margin:0 0 4px;letter-spacing:.04em;text-transform:uppercase}
.throw-calc select,.throw-calc input{background:#fff;border:1px solid #c9ced6;border-radius:6px;color:#111;padding:9px 10px;font:inherit;font-size:.95rem;max-width:100%}
.throw-calc input{width:11em}
.throw-calc .result{margin-top:16px;background:var(--black,#000);border:1px solid var(--line);border-radius:8px;padding:14px 16px;color:#e9e9ef;line-height:1.55}
.throw-calc .result p{margin:0 0 8px}.throw-calc .result p:last-child{margin:0}
.throw-calc .result b{color:#fff}
.throw-calc .result .big{font-size:1.35rem;font-weight:800;color:#fff;margin:4px 0 8px}
.throw-calc .result .small{font-size:.84rem;color:var(--muted)}
.how-to{margin:0}.how-to summary{cursor:pointer;color:var(--blue);font-weight:700;padding:6px 0}
.how-to ol{margin:8px 0 0 20px;color:#d6d6de;line-height:1.55}.how-to li{margin:0 0 8px}
.calc-band h2{font-size:1.45rem;text-transform:none;letter-spacing:0}.calc-band h2 span{color:var(--blue2)}   /* 172: the same size as "About the ..." above it (Michael, 20 Oct) */
/* 172 (20 Oct): the calculator's sliders, zoom marker, drawing and brightness */
.throw-calc .row.top .f.chk label{display:block;color:#e9e9ef;font-size:.95rem;text-transform:none;letter-spacing:0;font-weight:400;padding:4px 0 10px;cursor:pointer}
.throw-calc .sliders{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px 28px;margin:16px 0 8px}
.throw-calc .sl label{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:.78rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin:0 0 6px}
.throw-calc .sl label output{font-size:1.1rem;color:#fff;text-transform:none;letter-spacing:0;font-weight:800}
.throw-calc .sl .line{display:flex;align-items:center;gap:10px}
.throw-calc input[type=range]{flex:1;width:auto;min-width:0;accent-color:var(--blue);margin:0;padding:0;background:transparent;border:0;height:28px}
.throw-calc .sl .num{width:6.2em;padding:6px 7px;font-size:.9rem}
.throw-calc .sl .ends{display:flex;justify-content:space-between;font-size:.74rem;color:var(--muted);margin-top:2px}
.throw-calc .zoom{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-items:center;margin:10px 0 14px;font-size:.78rem;color:var(--muted)}
.throw-calc .zoom .zl{font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.throw-calc .zoom .track{position:relative;height:6px;background:#3a3a44;border-radius:3px}
.throw-calc .zoom .mark{position:absolute;top:-7px;width:20px;height:20px;margin-left:-10px;border-radius:50%;background:var(--blue);border:2px solid #fff;box-sizing:border-box;transition:left .15s}
.throw-calc .zoom .ends{grid-column:2;display:flex;justify-content:space-between}
.throw-calc svg.diagram{display:block;width:100%;height:auto;margin:0 0 12px;background:var(--black,#000);border:1px solid var(--line);border-radius:8px}
.throw-calc svg .floor,.throw-calc svg .ceil{stroke:#3a3a44;stroke-width:2}
.throw-calc svg .throw{stroke:var(--blue);stroke-width:2;stroke-dasharray:7 6}
.throw-calc svg .screen{fill:#f4f4f6;stroke:#c9ced6;stroke-width:2}
.throw-calc svg .edge{stroke:#8a8f99;stroke-width:1.5}
.throw-calc svg .body{fill:#3a3a44;stroke:#8a8f99;stroke-width:1.5}
.throw-calc svg .lens{fill:#9ad0ff;stroke:#2f8fff;stroke-width:1.5}
.throw-calc svg .stem{stroke:#8a8f99;stroke-width:4}
.throw-calc svg .lbl{fill:#e9e9ef;font:700 13px/1 Arial,Helvetica,sans-serif}
.throw-calc svg .lbl.dist{fill:#9ad0ff;font-size:15px}.throw-calc svg .lbl.diag{fill:var(--muted);font-weight:400}.throw-calc svg .lbl.small{fill:var(--muted);font-weight:400;font-size:11px}
.throw-calc .bright{margin-top:12px;background:var(--black,#000);border:1px solid var(--line);border-radius:8px;padding:14px 16px;color:#e9e9ef;line-height:1.5}
.throw-calc .bright h3{margin:0 0 6px;font-size:1rem}
.throw-calc .bright .bt{margin:0 0 10px}.throw-calc .bright .bt b{color:#fff}
.throw-calc .bright .bar{position:relative;height:12px;border-radius:6px;background:linear-gradient(90deg,#55555f 0 20%,#3fae5a 20% 36.7%,#9ccc3c 36.7% 58.3%,#ffb300 58.3% 100%);margin:16px 0 4px}
.throw-calc .bright .bar .mark{position:absolute;top:-6px;width:4px;height:24px;margin-left:-2px;background:#fff;border-radius:2px;box-shadow:0 0 0 2px #000;transition:left .15s}
.throw-calc .bright .scale{display:flex;justify-content:space-between;font-size:.72rem;color:var(--muted)}
.throw-calc .bright .zones{display:flex;font-size:.72rem;color:var(--muted);margin-top:2px}.throw-calc .bright .zones span{text-align:center;white-space:nowrap;overflow:hidden}
.throw-calc .bright .gain{display:block;font-size:.88rem;margin-top:10px;color:#d6d6de}.throw-calc .bright .gain input{width:5em;margin:0 4px}
.throw-calc .bright .gain .gv{display:inline-block;white-space:nowrap}   /* review V4 (31 Oct 2026): "gain" and its box wrap together */
@media (max-width:700px){.throw-calc .sl .num{width:5.4em}.throw-calc .bright .zones{display:none}}
/* 172 (20 Oct, later): the drawing and the changing figures side by side, so it all fits in one view */
.throw-calc .main{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(250px,1fr);gap:14px 18px;align-items:stretch;margin:12px 0 10px}
.throw-calc .main svg.diagram{margin:0;height:100%;max-height:250px}
.throw-calc .facts{background:var(--black,#000);border:1px solid var(--line);border-radius:8px;padding:12px 14px;color:#e9e9ef;font-size:.9rem;line-height:1.4}
.throw-calc .fact{display:flex;flex-direction:column;margin:0 0 8px}
.throw-calc .fact .k{font-size:.72rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.throw-calc .fact .v{color:#fff}.throw-calc .fact.big .v{font-size:1.5rem;font-weight:800;line-height:1.15}
.throw-calc .facts .track{position:relative;height:6px;background:#3a3a44;border-radius:3px;margin:8px 10px 4px}
.throw-calc .facts .mark{position:absolute;top:-6px;width:18px;height:18px;margin-left:-9px;border-radius:50%;background:var(--blue);border:2px solid #fff;box-sizing:border-box;transition:left .15s}
.throw-calc .facts .ends{display:flex;justify-content:space-between;font-size:.7rem;color:var(--muted);margin:0 0 10px}
.throw-calc .facts .bar{position:relative;height:8px;border-radius:4px;background:linear-gradient(90deg,#55555f 0 20%,#3fae5a 20% 36.7%,#9ccc3c 36.7% 58.3%,#ffb300 58.3% 100%);margin:8px 0 2px}
.throw-calc .facts .bar .mark{top:-4px;width:4px;height:16px;margin-left:-2px;border-radius:2px;background:#fff;border:0;box-shadow:0 0 0 2px #000}
.throw-calc .row.top{gap:8px 16px}.throw-calc .row.top select{padding:7px 9px;font-size:.9rem}
.throw-calc .row.top .f.chk label{padding:2px 0 6px;font-size:.9rem}
.throw-calc .sliders{margin:12px 0 4px;gap:10px 24px}
.throw-calc svg .table{stroke:#8a8f99;stroke-width:3;stroke-linecap:round}
@media (max-width:860px){.throw-calc .main{grid-template-columns:1fr}.throw-calc .main svg.diagram{height:auto;max-height:none}}
/* 178-182 (21 Oct): padlocks, the zoom slider, the two views and the front-on drawing */
.throw-calc .sl .lock{font:inherit;font-size:.78rem;padding:6px 9px;border-radius:6px;border:1px solid var(--line);background:var(--bg2);color:#e9e9ef;cursor:pointer;white-space:nowrap}
.throw-calc .sl .lock.on{background:var(--blue);border-color:var(--blue);color:#fff}
.throw-calc .sl.held input[type=range]{opacity:.45}.throw-calc .sl.held .num{opacity:.6}
.throw-calc .sl.zoom{grid-column:1/-1}
.throw-calc .drawings{position:relative}
.throw-calc .views{position:absolute;top:8px;left:8px;z-index:2;display:flex;gap:4px}
.throw-calc .views button{font:inherit;font-size:.74rem;padding:4px 9px;border-radius:5px;border:1px solid var(--line);background:rgba(10,10,12,.85);color:#e9e9ef;cursor:pointer}
.throw-calc .views button.on{background:var(--blue);border-color:var(--blue);color:#fff}
.throw-calc svg .zone{fill:rgba(47,143,255,.07);stroke:var(--blue);stroke-width:1.5;stroke-dasharray:6 5}
.throw-calc svg .sframe{fill:none;stroke:#3a3d44;stroke-width:8;stroke-linejoin:round}   /* the Majestic frame: 4px showing outside the picture, fixed to it (Michael, 21 Oct) */
.throw-calc svg.front .body{opacity:.92}
.throw-calc svg .pic{stroke:#1a1c22;stroke-width:1}
.throw-calc svg circle.lens{fill:#9ad0ff;stroke:#2f8fff;stroke-width:1.5}
.throw-calc svg .lbl.zl{fill:#9ad0ff}
.throw-calc .bright .gain select,.throw-calc .bright .gain input{font:inherit;font-size:.88rem;padding:5px 7px;border-radius:5px;border:1px solid #c9ced6;background:#fff;color:#111}
.throw-calc .bright .gain input:disabled{color:#555;background:#eee}
.throw-calc .bright .gain .small{font-size:.78rem;color:var(--muted)}
/* 191: a note beside a package price, e.g. call for our best package price (set per product in the back end) */
.pkg-note{display:block;color:#ffd97a;font-size:.9rem;margin-top:3px}.pkg-band .pkg-note{display:inline;margin-left:8px}
.throw-calc .sl .head{display:flex;align-items:center;gap:10px;margin:0 0 6px}.throw-calc .sl .head label{flex:1;margin:0}   /* the Lock button beside the heading, not in the slider's line (Michael, 21 Oct) */
.throw-calc input[type=checkbox]{width:auto;padding:0;margin:0 8px 0 0;vertical-align:middle}.throw-calc .row.top .f.chk label{display:inline-flex;align-items:center}   /* the tick box next to its words (Michael, 21 Oct) */
.throw-calc svg .shift{stroke:var(--blue);stroke-width:1.5;stroke-dasharray:6 5;opacity:.9}   /* the lens-shift arrows in the front view (instead of the dotted box, 21 Oct) */
.throw-calc svg.front .body{stroke:#5a5f69}   /* no light outlines in the front view: the screen's black frame reads as a frame, not a border */
.throw-calc .views{top:auto;bottom:8px}   /* the view buttons at the bottom left, so the lens-shift words at the top left stay clear (21 Oct) */
.throw-calc .views{bottom:-4px}   /* 12px lower (Michael, 21 Oct) */
/* calculator controls in three columns (Michael, 21 Oct: the lens setting ran the full width and the rest sat squashed to the
   left; the old auto-fit grid made five columns on a wide screen): format / size / units over distance / size / lens setting */
.throw-calc .row.top{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 28px;align-items:end}
.throw-calc .row.top .f{min-width:0}.throw-calc .row.top select{width:100%}
.throw-calc .row.top .f.fmt select{max-width:16em}.throw-calc .row.top .f.units select{max-width:11em}
.throw-calc .row.top .pair{display:flex;align-items:flex-end;gap:18px;min-width:0}.throw-calc .row.top .pair .f.units{flex:0 1 11em}
.throw-calc .row.top .f.chk{flex:0 0 auto}.throw-calc .row.top .f.chk label{padding:0 0 9px}
.throw-calc .sliders{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 28px}
.throw-calc .sl.zoom{grid-column:auto}
.throw-calc .sl .head{min-height:32px}.throw-calc .sl .line{min-height:34px}
@media (max-width:900px){.throw-calc .row.top{grid-template-columns:1fr 1fr}.throw-calc .row.top .f.size{grid-column:1/-1}.throw-calc .sliders{grid-template-columns:1fr 1fr}.throw-calc .sl.zoom{grid-column:1/-1}}
@media (max-width:600px){.throw-calc .row.top{grid-template-columns:1fr}.throw-calc .row.top .f.size{grid-column:auto}.throw-calc .sliders{grid-template-columns:1fr}}
.throw-calc .sl.zoom{display:block}   /* stacked like the other two (the old .zoom rule laid its heading and slider side by side) */
.throw-calc .sl.zoom{margin:0}.throw-calc .sl .head{min-height:34px}.throw-calc .sl .line{min-height:37px}   /* the three sliders' headings, tracks and end labels on the same lines */
.throw-calc svg .spic{stroke:#3a3d44;stroke-width:5;stroke-linejoin:round}   /* the side view's screen: its angled face with the Majestic frame as its stroke (21 Oct) */
.throw-calc svg .dim{stroke:#8a8f99;stroke-width:1;stroke-dasharray:4 3;fill:none}.throw-calc svg .tick{stroke:#8a8f99;stroke-width:1}   /* dimension lines on the side view (Michael, 21 Oct) */
/* the drawing box wider, the figures box narrower, the drawing filling its box (Michael, 21 Oct) */
.throw-calc .main{grid-template-columns:minmax(0,2.6fr) minmax(240px,1fr);align-items:start}
.throw-calc .main svg.diagram{height:auto;max-height:none;width:100%}
@media (max-width:860px){.throw-calc .main{grid-template-columns:1fr}}   /* one column on narrow screens still (the rule above came after the earlier media query) */
/* the "More projectors" cards on phones (Michael, 21 Oct): the stock badge wrapped instead of running out of a narrow card, and one card per row on the narrowest screens */
@media (max-width:600px){.cards.rel .stock,.cards.rel4 .stock{white-space:normal;line-height:1.25;padding:3px 8px;text-align:left}}
@media (max-width:420px){.cards.rel,.cards.rel4{grid-template-columns:1fr}}
/* product videos up top (Richard, 22 Oct 2026, item 202): the same row of up to four as before, in its own band */
.videos-band{padding-top:34px;padding-bottom:40px;border-top:1px solid var(--line)}
.videos-band h2{margin-bottom:18px}
/* the blue "Call (07) 5408 3314 for our best price" line on one row in the narrow buy boxes (Richard, 21 Oct, item 194) */
.side .buy .call-best,.pay-box .opt .call-best{white-space:nowrap;letter-spacing:.02em;font-size:clamp(.72rem,.95vw,.82rem)}
@media (max-width:420px){.side .buy .call-best,.pay-box .opt .call-best{white-space:normal}}
/* the Best Buys quote centred under the screen picture (Richard, 22 Oct 2026, item 206) */
.bb-quote{text-align:center}
/* The Majestic page heading on one line on a wide screen (item 209); it may wrap on a phone */
*:has(> h2.one-line){container-type:inline-size}   /* the heading is sized to its own column, so the whole line fits */
@media (min-width:1300px){h2.one-line{white-space:nowrap;font-size:1.2vw;font-size:min(2rem,2.18cqw)}}
/* ===== the header, decluttered (Richard, 23 Oct 2026, item 213): contact details on one line at the very top, the logo row
   with only the logo and Australian Made, and a menu with dropdowns (Screens, Projectors, Tech & Fabrics) ===== */
.top-contact{background:#0a0d14;border-bottom:1px solid var(--line);color:#c9c9d2;font-size:.86rem;line-height:1.4}
.top-contact .wrap{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;padding-top:7px;padding-bottom:7px}
.top-contact b{color:#fff;font-weight:600}
.top-contact a{color:#fff;white-space:nowrap}.top-contact a:hover{color:var(--blue2)}
.top-contact .sep{color:#555;margin:0 .8em}
.topbar{align-items:center}
.aus-made{margin-left:auto}
.mainnav [hidden]{display:none!important}
.mainnav .dd{position:relative;display:flex}
.mainnav .dd > a{border-left:1px solid rgba(255,255,255,.08);border-radius:0}
.mainnav .caret{display:inline-block;width:0;height:0;margin-left:7px;vertical-align:2px;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;opacity:.75}
.mainnav .sub{display:none;position:absolute;left:0;top:100%;z-index:30;min-width:230px;padding:6px 0;background:rgba(10,13,20,.97);border:1px solid var(--line);border-radius:0 0 8px 8px;box-shadow:0 12px 28px rgba(0,0,0,.55)}
@media (hover:hover){.mainnav .dd:hover .sub{display:block}}
.mainnav .dd:focus-within .sub,.mainnav .dd.open .sub{display:block}
@media (min-width:901px){.mainnav .dd.shut .sub{display:none!important}}
.mainnav .sub a{display:block;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;border:0;border-radius:0;padding:10px 18px;font-size:.76rem;letter-spacing:.08em;white-space:nowrap}
.mainnav .sub a:first-child,.mainnav .sub a:last-child{border-radius:0}
.mainnav .sub a:hover{background:rgba(47,143,255,.14);color:#fff}
.mainnav .sub a.active{color:var(--blue2)}
.mainnav .sub a.active::after{display:none}
@media (min-width:901px) and (max-width:1300px){.mainnav .wrap > a,.mainnav .dd > a{padding:12px 11px 13px;font-size:.74rem;letter-spacing:.08em}.mainnav .wrap > a.active::after,.mainnav .dd > a.active::after{left:11px;right:11px}}
@media (min-width:901px) and (max-width:1040px){.mainnav .wrap > a,.mainnav .dd > a{padding:11px 8px 12px;font-size:.7rem;letter-spacing:.05em}.mainnav .wrap > a.active::after,.mainnav .dd > a.active::after{left:8px;right:8px}}
@media (max-width:900px){
  .mainnav .dd{display:block}
  .mainnav .dd > a{display:block;border-left:0}
  .mainnav .caret{display:none}
  .mainnav .sub{display:block;position:static;min-width:0;padding:0;background:none;border:0;border-radius:0;box-shadow:none}
  .mainnav .sub a{padding:10px 16px 10px 34px;font-size:.8rem;border-bottom:1px solid var(--line);white-space:normal}
}
@media (max-width:700px){
  .top-contact{font-size:.8rem}
  .top-contact .sep{margin:0 .55em}
}
@media (max-width:900px){
  .aus-made{position:absolute;right:16px;top:64px;height:42px;margin:0}
  .topbar{min-height:112px}
}
/* item 235: the top line held only the two phone numbers, which fit one line on a phone (until item 281) */
/* item 281 (31 Oct 2026): the email address joins them; on a phone it takes a line of its own under the two numbers, without
   the bar before it (the three need about 480px on one line; a little to spare for wider phone fonts) */
@media (max-width:600px){.top-contact .sep-mail{display:none}.top-contact .top-mail{flex-basis:100%;text-align:center}}
@media (min-width:901px){.aus-made{margin-bottom:12px}}   /* clear of the menu bar's corner (item 213) */
.card .stock{white-space:normal;max-width:100%;line-height:1.3}   /* the stock badge wraps inside a card at any width (the "Taking back orders" one pushed the page sideways at 1024px) */
/* review R20 (23 Oct 2026): the calculator's brightness figures under the zone edges they mark (js/throw.js sets each one's
   left), not spread evenly; the first and last sit flush with the ends of the bar, the height as before */
.throw-calc .bright .scale{display:block;position:relative;height:1.5em}
.throw-calc .bright .scale span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}
.throw-calc .bright .scale span:first-child{transform:none}
.throw-calc .bright .scale span:last-child{transform:translateX(-100%)}
/* Real-draft fixes D2-D12 (review-design-plan-2026-10-23.md, Michael 24 Oct 2026) */
/* D2: the call lines are links now; they keep their look */
a.call-link{color:inherit;text-decoration:none}
a.call-link:hover,a.call-link:focus-visible{text-decoration:underline}
/* D4: on phones the gallery's small pictures sit four across, so the letters are not buried under them */
@media (max-width:600px){.gallery-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}}
/* D6: on phones the home showcase story and quote read in one column, not two narrow ones */
@media (max-width:600px){.mock3-side{grid-template-columns:1fr}.mock3-side .big4k{margin:12px 0 6px}}
/* D6: the showcase-only grid kept its 250px desktop column on phones (it outranks the 900px rule), so the whole
   section stayed 250px wide with an empty strip beside it */
@media (max-width:900px){.mock3-grid.showcase-only{grid-template-columns:1fr}}
/* D11: the welcome is the home page's h1 now and keeps the h2 look; the photo band's h2 keeps the h1 look */
.welcome h1{font-size:clamp(1.5rem,3vw,2.2rem);margin-bottom:.9em;text-shadow:none}
.welcome h1 span{color:var(--blue2)}
/* item 253 (Richard, 24 Oct 2026): the subheading under "Welcome to Oz Theatre Screens", one line on a computer */
.welcome-sub{font-size:clamp(1rem,1.25vw,1.15rem);font-weight:700;color:#fff;line-height:1.35;margin:-.5em 0 1.1em}
/* item 234: Steve Dawson's line beside the welcome, now the Cinema Showcase band is gone */
.press-quote{margin:28px 0 0;padding:16px 20px;border-left:3px solid var(--blue2);background:rgba(255,255,255,.03)}
.press-quote p{margin:0;font-style:italic;font-size:1.05rem;line-height:1.45;color:#fff}
.press-quote footer{margin-top:6px;color:var(--muted);font-size:.88rem}
#reviews .press-quote{margin:0 0 20px}   /* Steve Dawson's line above the reviews (item 264, 30 Oct 2026) */
/* D12a: 16px boxes in the calculator on phones, so an iPhone does not zoom in when one is tapped */
@media (max-width:700px){.throw-calc select,.throw-calc input,.throw-calc .sl .num,.throw-calc .row.top select,.throw-calc .bright .gain select,.throw-calc .bright .gain input{font-size:16px}}
/* D12b: the white intro lines go back to the normal text size on tablets and phones (item 37's one line stays on laptops) */
@media (max-width:900px){.lead.full{font-size:1rem}}
/* D12c: the Menu toggle is a button now */
button.nav-label{display:none;background:none;font:inherit}
@media (max-width:900px){button.nav-label{display:block;position:absolute;right:20px;top:22px;color:#fff;border:1px solid #444;border-radius:6px;padding:8px 14px;text-transform:uppercase;font-size:.85rem;cursor:pointer;letter-spacing:.08em;line-height:1.6}
.site-header.nav-open .mainnav{display:block}}
/* Richard's round 15 (24 Oct 2026) */
/* 223: his 573px-wide 16:9 and 21:9 pictures are never shown wider than they are (the white frame is extra) */
.fmt-fig img,.buy .fmt-pic{max-width:calc(573px + 2 * var(--frame-w,14px));margin-left:auto;margin-right:auto}
/* 226: "Gympie hockey club 2026 needs to be centre under the photo" */
.photo-card figcaption{text-align:center}
/* 228: the blue line under a menu item shows while the mouse is over it, not only on the page you are on */
@media (hover:hover) and (min-width:901px){
  .mainnav .wrap > a:hover::after,.mainnav .dd > a:hover::after{content:"";position:absolute;left:13px;right:13px;bottom:8px;height:2px;background:var(--blue2)}
}
@media (hover:hover) and (min-width:901px) and (max-width:1300px){.mainnav .wrap > a:hover::after,.mainnav .dd > a:hover::after{left:11px;right:11px}}
@media (hover:hover) and (min-width:901px) and (max-width:1040px){.mainnav .wrap > a:hover::after,.mainnav .dd > a:hover::after{left:8px;right:8px}}
/* 227: "can the light beam be moved up above that line?" The lens now ends just above the header's bottom line at
   every width (it hung 12px or so below it); the beam keeps its shape and angle */
@media (min-width:901px){.mainnav .wrap::before,.mainnav .wrap::after{bottom:calc(var(--beam) * -.0072 + 2px)}}   /* the light pulse travels along the beam, so it moves with it (it was left 37px below, 24 Oct 2026) */

/* Idea 4 from the ideas preview, picked by Richard on 24 Oct 2026 (item 247): "What happens next" in the pay step of Screens
   for Sale and Packages, and the answers beside the buy button on the projector pages (one set of lines per stock state) */
.buy-answers{margin:0 0 1.2em;padding:12px 16px;background:var(--bg2);border:1px solid var(--line);border-left:3px solid var(--blue);border-radius:8px;color:#d6d6de;font-size:.9rem;line-height:1.5}
.buy-answers p{margin:0 0 8px}
.buy-answers p:last-child{margin-bottom:0}
.buy-answers b{color:#fff;margin-right:.25em}
.buy-answers [data-when]{display:none}
.buy-answers:not([data-stock]) [data-when~="in"],
.buy-answers[data-stock="in"] [data-when~="in"],
.buy-answers[data-stock="low"] [data-when~="low"],
.buy-answers[data-stock="out"] [data-when~="out"],
.buy-answers[data-stock="backorder"] [data-when~="backorder"]{display:block}
.what-next{margin:18px 0 0;padding:14px 18px 12px;background:var(--bg2);border:1px solid var(--line);border-radius:8px;color:#d6d6de;font-size:.93rem;line-height:1.5}
.what-next h5{margin:0 0 8px;color:#fff;font-size:1rem}
.what-next ol{margin:0 0 12px;padding-left:1.4em}
.what-next li{margin:0 0 6px;padding-left:2px}
.what-next li[hidden]{display:none}
.what-next li::marker{color:var(--blue2);font-weight:700}
.what-next .wn-more{white-space:nowrap}
/* item 270 (30 Oct 2026, review F11): the .wn-warranty rules are gone with the warranty line ("nothing to do with shipping") */

/* Screens packaged over 4 metres (Richard, 27 Oct 2026, item 243): his message in the order box, and the mark in the tables */
.pay-box .opt .over-note,.over-note{margin:8px 0 12px;padding:8px 12px;border-left:3px solid #ffc53d;background:rgba(255,197,61,.07);color:#fff;font-size:.92rem;line-height:1.5}
.over-tag{display:block;margin-top:2px;color:#ffc53d;font-size:.72rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap}
.over-line .over-tag{display:inline;margin:0 .35em 0 0}
.over-line{margin-top:10px}

/* Richard, 28 Oct 2026 (item 264): "Large weird looking inverted commas at the start of each review need to go" (in both looks) */
.review p::before{content:none}

/* item 283 (31 Oct 2026): the JVC lamp and theatre velvet cards keep the JVC cards' size (four across, two on a tablet, one on a
   phone) however few there are; the .four grid stretches a single card across the whole page */
#lamps .cards,#velvets .cards{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){#lamps .cards,#velvets .cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){#lamps .cards,#velvets .cards{grid-template-columns:1fr}}