/* 2 the films explained, 3 the films, 5 account, 7 contact. */

/* ---------- 2 the films, explained ---------- */
/* the cards sit on his own car photos (ghostfilmsusa.com homepage tiles; Jorge 2026-11-03: "put the cars in the background how he had them") */
#intro{display:grid;align-content:center;gap:36px;padding:calc(var(--hdr) + 4svh) var(--side) 8svh}
.igrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.icard{position:relative;min-height:400px;padding:28px 24px;border:1px solid var(--hair);display:grid;gap:10px;align-content:end;overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,rgba(0,0,0,.22) 0%,rgba(0,0,0,.7) 40%,rgba(0,0,0,.93) 100%),var(--bg) center/cover no-repeat var(--ink)}
.icard.i-ppf{--bg:url(../media/intro/ppf-1600.webp?v=1)}
.icard.i-tint{--bg:url(../media/intro/tint-1600.webp?v=1)}
.icard.i-lamps{--bg:url(../media/intro/lamps-1600.webp?v=1)}
.icard .eb{color:var(--silver)}
.icard h3{font:700 32px/1 var(--display);text-transform:uppercase;letter-spacing:.02em;color:var(--white)}
.icard p{font:400 15px/24px var(--body);color:var(--silver);max-width:40ch}
.icard .ln{font:500 12px/18px var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--grey)}
#intro .pills2{display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:1023px){.igrid{grid-template-columns:1fr}.icard{min-height:320px}}
@media (max-width:767px){#intro{padding-top:var(--hdr);gap:24px}.icard{min-height:280px;padding:20px 16px}.icard h3{font-size:26px}
  .icard.i-ppf{--bg:url(../media/intro/ppf-800.webp?v=1)}.icard.i-tint{--bg:url(../media/intro/tint-800.webp?v=1)}.icard.i-lamps{--bg:url(../media/intro/lamps-800.webp?v=1)}}

/* ---------- 3 the films ---------- */
/* the Ciao cans reference (Neil, 2026-11-02): one dark stage, a row of products on a floor, only the centre one lit,
   a glowing disc under it and the name on a plate below. The row slides one product at a time. */
.fpin{position:relative;height:100svh;overflow:hidden;background:#050506;touch-action:pan-y;overscroll-behavior-x:contain}
#films{--acc:var(--paper)}
/* one still colour layer per roll, cross-faded by opacity: the flood from under the roll (Ciao reference) with nothing repainting while it scrolls */
.fbgs,.fbgs i{position:absolute;inset:0}
.fbgs i{opacity:0;will-change:opacity;background:radial-gradient(ellipse 62% 74% at 70% 66%,color-mix(in srgb,var(--c) 88%,#000) 0,color-mix(in srgb,var(--c) 46%,#000) 42%,color-mix(in srgb,var(--c) 12%,#050506) 72%,#050506 100%)}
.fstage{position:absolute;right:0;top:calc(var(--hdr) + 8px);width:58%;height:calc(100svh - var(--hdr) - 8px)}
.fcv{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;-webkit-mask-image:linear-gradient(#0000,#000 3.5%,#000 96.5%,#0000);mask-image:linear-gradient(#0000,#000 3.5%,#000 96.5%,#0000)}
.dragging,.dragging .fcv{cursor:grabbing;user-select:none}
.fnav{position:absolute;z-index:3;top:50%;width:48px;height:48px;margin-top:-24px;display:grid;place-items:center;border-radius:50%;border:1px solid rgb(255 255 255/.28);background:rgb(5 5 6/.42);color:var(--paper);transition:opacity 200ms,background 200ms}
.fnav.prev{left:12px}.fnav.prev .arw{transform:scaleX(-1)}.fnav.next{right:var(--side)}
.fnav:disabled{opacity:.25;cursor:default}
@media (hover:hover){.fnav:not(:disabled):hover{background:rgb(255 255 255/.16)}}
.fcol{position:absolute;left:var(--side);top:calc(var(--hdr) + 2.4svh);bottom:76px;width:min(38%,560px);display:flex;flex-direction:column;gap:clamp(12px,2.2svh,24px);z-index:2}
#films .head{position:static;gap:6px}
#films .hd{font-size:clamp(30px,min(3.6vw,6.2svh),56px)}
.ftabs{display:flex;flex-wrap:wrap;gap:0 18px;margin-top:4px;border-bottom:1px solid var(--hair)}
.ftabs [role=tab]{font:600 12px/18px var(--body);letter-spacing:.09em;text-transform:uppercase;color:var(--silver);min-height:40px;padding:0 2px;border-bottom:2px solid transparent;margin-bottom:-1px}
.ftabs [role=tab][aria-selected=true]{color:var(--paper);border-color:var(--acc)}
.fcard{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;align-items:flex-start;gap:8px;will-change:opacity,transform}
.fcard .nm{font:700 clamp(22px,2.4vw,32px)/1 var(--display);text-transform:uppercase;letter-spacing:.03em;padding:9px 16px 7px;background:var(--acc);color:var(--ink);transition:background 300ms}
.fcard .kd{font:400 14px/20px var(--body);color:var(--paper)}
.fcard .facts{display:grid;gap:3px;margin:0 0 4px}
.fcard .facts li{font:400 13px/19px var(--body);color:var(--paper)}
.fcard .facts li b{font-weight:500;color:var(--silver);margin-right:8px}
.fthumbs{display:flex;gap:2px;align-items:flex-end;height:clamp(56px,10svh,96px)}
.fthumbs button{flex:1 1 0;min-width:0;height:100%;padding:0;opacity:.62;transition:opacity 240ms,transform 240ms var(--ease-out);transform:translateY(6px) scale(.92)}
.fthumbs button.on{opacity:1;transform:none}
.fthumbs img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 1px rgba(255,255,255,.5))}
@media (hover:hover){.fthumbs button:hover{opacity:1}}
@media (max-height:760px) and (min-width:768px){.fcard .facts li.ft{display:none}}
@media (max-width:767px){
  .fbgs i{background:radial-gradient(ellipse 110% 44% at 50% 42%,color-mix(in srgb,var(--c) 88%,#000) 0,color-mix(in srgb,var(--c) 42%,#000) 48%,color-mix(in srgb,var(--c) 10%,#050506) 78%,#050506 100%)}
  .fcol{left:16px;right:16px;width:auto;top:calc(var(--hdr) + 6px);bottom:calc(10px + env(safe-area-inset-bottom,0px));gap:0}
  #films .eb{display:none}
  #films .hd{font-size:clamp(24px,7.4vw,30px)}
  #films .hd br{display:none}
  #films .hd .ol{margin-left:.24em}
  .ftabs{flex-wrap:nowrap;gap:0 14px;overflow-x:auto;scrollbar-width:none;margin-top:2px}
  .ftabs::-webkit-scrollbar{display:none}
  .ftabs [role=tab]{flex:none;font-size:11px;letter-spacing:.07em;min-height:38px}
  .fcard{flex:0 0 auto;margin-top:auto;gap:4px}
  .fcard .nm{font-size:20px;padding:6px 12px 5px}
  .fcard .kd{font-size:13px;line-height:18px}
  .fcard .facts{display:flex;flex-wrap:wrap;gap:0 14px;margin:0 0 6px}
  .fcard .facts li{font-size:12px;line-height:18px}
  .fcard .facts li.ft{display:none}
  .fthumbs{height:44px;margin-top:8px;margin-left:52px}   /* the chat button keeps the corner */
  .fstage{left:0;right:0;width:100%;top:calc(var(--hdr) + 84px);height:calc(100svh - var(--hdr) - 84px - 212px)}
  .fnav{width:44px;height:44px;margin-top:-22px}
  .fnav.next{right:12px}
}

/* ---------- 5 account ---------- */
#account{display:grid;align-content:center;gap:36px;padding:calc(var(--hdr) + 4svh) var(--side) 8svh}
.wsgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:0 32px;border-top:1px solid var(--hair)}
.wsgrid div{padding:20px 0;border-bottom:1px solid var(--hair);display:grid;gap:6px;align-content:start}
.wsgrid h3{font:700 28px/1 var(--display);text-transform:uppercase;letter-spacing:.02em}
.wsgrid p{font:400 14px/22px var(--body);color:var(--grey);max-width:36ch}
#account .pill{justify-self:start}
.wsgrid a{font:500 13px/20px var(--body);text-decoration:underline 1px;text-underline-offset:5px;justify-self:start}
@media (max-width:1023px){.wsgrid{grid-template-columns:1fr 1fr}}
@media (max-width:767px){#account{padding-top:var(--hdr);gap:24px}.wsgrid{grid-template-columns:1fr;gap:0}.wsgrid div{padding:14px 0}.wsgrid h3{font-size:24px}}

/* ---------- 7 contact / footer ---------- */
#contact{display:grid;grid-template-columns:minmax(0,1fr);align-content:space-between;gap:40px;padding:calc(var(--hdr) + 6svh) var(--side) 32px}
.ctgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;border-top:1px solid var(--hair);padding-top:24px}
.ctgrid .eb{margin-bottom:10px}
.ctgrid address{font-style:normal}
.ctgrid a,.ctgrid address{display:block;font:400 15px/26px var(--body);color:var(--paper)}
.ctgrid a:hover{text-decoration:underline 1px;text-underline-offset:5px}
.ctgrid a{min-height:32px}
.ctbg{display:block;margin:-40px calc(var(--side)*-1) -128px}
.ctbg img{display:block;width:100%;aspect-ratio:16/9;max-height:90svh;object-fit:cover;object-position:50% 100%;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 30%);mask-image:linear-gradient(to bottom,transparent,#000 30%)}
.ft{position:relative;display:flex;flex-wrap:wrap;gap:12px 32px;justify-content:space-between;align-items:center;font:400 12px/18px var(--body);color:var(--silver)}
.ft .pills2{display:flex;gap:12px;flex-wrap:wrap}
.ft .pill:not(.fill){background:rgba(0,0,0,.6)}
@media (max-width:767px){.ctgrid a{overflow-wrap:anywhere}.ctgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 16px}#contact{padding-top:var(--hdr)}.ctbg img{aspect-ratio:3/4;object-position:50% 70%}.ft p{margin-left:auto}}

/* dark studio pass + what ghostfilmsusa.com has that ours did not */
.hd .ol{color:transparent;-webkit-text-stroke:1.5px var(--paper)}
[data-bg=paper] .hd .ol{-webkit-text-stroke-color:var(--ink)}
.announce{position:absolute;z-index:40;left:var(--side);top:calc(var(--hdr) + 4px);margin:0;padding:6px 14px;border:1px solid var(--hair);border-radius:999px;background:rgba(0,0,0,.45);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font:500 11px/16px var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--paper);pointer-events:none}
#craft{position:relative;min-height:100svh;display:grid;align-content:end;padding:calc(var(--hdr) + 6svh) var(--side) 10svh;overflow:hidden;isolation:isolate}
.craft-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
#craft::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,0) 35%,rgba(0,0,0,.8) 100%)}
#craft .lead{color:var(--paper)}
.craft-pp{position:absolute;right:var(--side);bottom:calc(10svh - 12px);min-height:44px;font:500 13px/20px var(--body);color:var(--paper);text-decoration:underline 1px;text-underline-offset:5px}
#compare,#shop,#warranty,#faq{display:grid;gap:32px;padding:calc(var(--hdr) + 4svh) var(--side) 8svh}
#compare>*,#shop>*,#warranty>*,#faq>*{min-width:0}
.cmp-list details,.faq-list details{border-top:1px solid var(--hair)}
.cmp-list details:last-child,.faq-list details:last-child{border-bottom:1px solid var(--hair)}
.cmp-list summary,.faq-list summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:64px;font:700 clamp(22px,2.4vw,32px)/1.05 var(--display);text-transform:uppercase;letter-spacing:.02em}
.cmp-list summary::-webkit-details-marker,.faq-list summary::-webkit-details-marker{display:none}
.cmp-list summary::after,.faq-list summary::after{content:"+";flex:none;font:400 24px/1 var(--body);color:var(--silver)}
.cmp-list details[open] summary::after,.faq-list details[open] summary::after{content:"\2212"}
.cmp-list details>:not(summary){margin-bottom:20px}
.tblw{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tblw .cmp{min-width:560px}
.tblw h3,.tblw h4{font:500 12px/18px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--silver);margin:24px 0 8px}
.cmp-list .nts{font:400 12px/18px var(--body);color:var(--silver);display:grid;gap:4px}
.shop-acc{border-top:1px solid var(--hair)}
.shop-acc:last-child{border-bottom:1px solid var(--hair)}
.shop-acc summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0}
.shop-acc summary::-webkit-details-marker{display:none}
.shop-acc summary::after{content:"+";flex:none;font:400 24px/1 var(--body);color:var(--silver)}
.shop-acc[open] summary::after{content:"\2212"}
.shop-acc h3{font:700 28px/1 var(--display);text-transform:uppercase;letter-spacing:.02em}
.shop-acc .sub{display:block;margin-top:8px;font:400 14px/20px var(--body);color:var(--silver)}
.shop-acc .in{display:grid;gap:20px;padding-bottom:28px}
.shop-acc .pill{justify-self:start}
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.shop-c{display:grid;gap:10px;align-content:start;font:500 13px/18px var(--body);color:var(--paper)}
.shop-c img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;background:var(--graphite)}
.shop-c:hover span{text-decoration:underline 1px;text-underline-offset:4px}
#warranty>.pill{justify-self:start}
.w-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;border-top:1px solid var(--hair);padding-top:24px}
.w-grid h3{font:700 26px/1 var(--display);text-transform:uppercase;letter-spacing:.02em;margin-bottom:10px}
.w-grid p{font:400 14px/22px var(--body);color:var(--silver);max-width:40ch;margin-bottom:24px}
.w-years div{display:flex;justify-content:space-between;gap:16px;padding:8px 0;border-bottom:1px solid var(--hair);font:400 14px/22px var(--body)}
.w-years dt{font:600 19px/22px var(--display);text-transform:uppercase;letter-spacing:.02em}
.w-years dd{color:var(--silver);font-variant-numeric:tabular-nums}
.faq-list p{font:400 15px/24px var(--body);color:var(--silver);max-width:60ch;padding-bottom:20px}
.ct-form{display:block;margin-top:8px}
@media (max-width:1023px){.w-grid{grid-template-columns:1fr}}
@media (max-width:767px){.announce{font-size:10px;padding:4px 10px;top:calc(var(--hdr) + 2px)}#compare,#shop,#warranty,#faq{padding-top:var(--hdr);gap:24px}.shop-grid{grid-template-columns:1fr 1fr}.hd .ol{-webkit-text-stroke-width:1px}}