/* tempestmedia.co.uk v11 · built on the savingenergy.com v10 template (v10.css) · Anchor · 13 Nov 2026
   Only what Tempest Media adds: the screenshot wall in the hero, the six website cards with their
   scroll-through rollover, the phone viewer, and a few size tweaks. Everything else is v10.css. */

/* brand in the header and footer */
.brand b{font-weight:700}

/* ---------- hero: a slow wall of the six live websites ---------- */
.home .hero .wall{position:absolute;inset:0;overflow:hidden;background:#0b141c}
.wall-in{position:absolute;left:50%;top:50%;width:150vmax;height:150vmax;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;transform:translate(-50%,-50%) rotate(-11deg)}
.wall-col{display:flex;flex-direction:column;gap:22px;will-change:transform}
.wall-col img{position:static;width:100%;height:auto;border-radius:14px;box-shadow:0 30px 60px -20px rgba(0,0,0,.7);object-fit:initial;inset:auto}
.wall-col:nth-child(odd){animation:wallUp 90s linear infinite}
.wall-col:nth-child(even){animation:wallDown 110s linear infinite}
@keyframes wallUp{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@keyframes wallDown{from{transform:translateY(-50%)}to{transform:translateY(0)}}
.is-paused .wall-col{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.wall-col{animation:none!important}}
@media (max-width:760px){.wall-in{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:190vmax;height:190vmax}.wall-col{gap:12px}.wall-col:nth-child(4){display:none}.wall-col img{border-radius:8px}}
.home .hero .hero-media::after{background:linear-gradient(180deg,rgba(8,16,24,.78) 0%,rgba(8,16,24,.5) 34%,rgba(8,16,24,.6) 60%,rgba(8,16,24,.92) 100%)}
.home .hero h1{max-width:12ch}
.home .hero .hero-by{font-size:.92rem;color:rgba(255,255,255,.8)}

/* ---------- the six websites ---------- */
.home .work{background:var(--paper);padding:clamp(90px,14vh,160px) 0 clamp(90px,14vh,160px)}
.work-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,5vw,80px);align-items:end;margin-bottom:clamp(36px,6vh,64px)}
.work-head h2{font-size:clamp(2.6rem,7vw,7.2rem);max-width:11ch;margin-top:18px}
.work-head p{margin:0;max-width:44ch}
@media (max-width:860px){.work-head{grid-template-columns:1fr}}
.work-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.4vw,34px)}
@media (max-width:860px){.work-grid{grid-template-columns:1fr}}

.site{position:relative;display:flex;flex-direction:column;background:var(--ink);color:#fff;border-radius:26px;overflow:hidden;isolation:isolate;transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.site:hover,.site:focus-within{transform:translateY(-8px);box-shadow:0 40px 80px -36px rgba(13,27,38,.6)}
.site .shot{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:#0b141c;text-decoration:none;color:#fff}
.site .shot img{width:100%;height:100%;object-fit:cover;object-position:50% 0%;transition:object-position 1.2s var(--ease),transform 1.2s var(--ease);transform:scale(1.001)}
/* the rollover: the screenshot scrolls down through the live page, slowly */
.site:hover .shot img,.site .shot:focus-visible img,.site.is-near .shot img{object-position:50% 100%;transition:object-position 7s cubic-bezier(.45,.05,.4,1),transform 1.2s var(--ease)}
.site .shot::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,16,24,0) 55%,rgba(8,16,24,.55));transition:opacity .6s ease;pointer-events:none}
.site:hover .shot::after{opacity:.35}
.site .num{position:absolute;z-index:2;top:16px;left:20px;font-stretch:75%;font-weight:700;font-size:clamp(2.6rem,5vw,4.4rem);line-height:.8;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.9);text-shadow:0 2px 18px rgba(0,0,0,.25);transition:color .5s ease,-webkit-text-stroke-color .5s ease}
.site:hover .num,.site:focus-within .num{color:var(--vis);-webkit-text-stroke-color:var(--vis)}
.site .go{position:absolute;z-index:2;top:16px;right:16px;display:inline-flex;align-items:center;gap:8px;background:var(--vis);color:#1a0c02;font-weight:700;font-size:.85rem;padding:9px 14px;border-radius:99px;transform:translateY(-140%);opacity:0;transition:transform .55s var(--ease),opacity .4s ease}
.site:hover .go,.site .shot:focus-visible .go{transform:none;opacity:1}
.site .hint{position:absolute;z-index:2;left:20px;bottom:14px;font-size:.74rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.85);display:inline-flex;align-items:center;gap:8px;transition:opacity .4s ease}
.site .hint i{display:block;width:2px;height:20px;background:linear-gradient(#fff 50%,transparent 50%) 0 0/100% 200%;animation:cue 1.6s infinite}
.site:hover .hint{opacity:0}
.site .body{padding:clamp(20px,2.6vw,32px);display:flex;flex-direction:column;gap:10px;flex:1}
.site .tag{align-self:flex-start;font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:6px 11px;border-radius:99px;background:rgba(255,255,255,.12);color:rgba(255,255,255,.92)}
.site .tag.client{background:var(--vis);color:#1a0c02}
.site h3{font-size:clamp(1.8rem,3vw,2.8rem);line-height:1;letter-spacing:-.025em;font-stretch:75%;margin:4px 0 2px}
.site p{margin:0;color:rgba(255,255,255,.84);max-width:52ch}
.site .acts{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center;margin-top:auto;padding-top:12px}
.site .acts .link{color:#fff}
.site .acts button.link{font:inherit;font-weight:600;background:linear-gradient(currentColor,currentColor) 0 100%/100% 2px no-repeat;border:0;padding:0 0 3px;cursor:pointer;color:rgba(255,255,255,.88)}
.site .acts button.link:hover{background-size:0 2px;background-position:100% 100%}
.site .dom{font-size:.82rem;color:var(--vis2);font-weight:600}
@media (hover:none){.site .hint{display:none}.site .go{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){
  .site,.site .shot img,.site .go,.site .num{transition:none!important}
  .site:hover{transform:none}
  .site:hover .shot img,.site.is-near .shot img{object-position:50% 0%}
  .site .hint i{animation:none}
}
.work-note{margin-top:28px}

/* ---------- phone viewer ---------- */
dialog.phone{border:0;padding:0;background:transparent;color:#fff;max-width:none;max-height:none;width:100vw;height:100vh;height:100dvh;margin:0}
dialog.phone::backdrop{background:rgba(8,16,24,.92);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.phone-in{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:20px}
.phone-frame{width:min(340px,82vw);height:min(700px,74dvh);border-radius:44px;background:#05090d;padding:12px;box-shadow:0 0 0 2px #2a3a48,0 50px 100px -30px rgba(0,0,0,.8)}
.phone-screen{width:100%;height:100%;border-radius:34px;overflow-y:auto;overscroll-behavior:contain;background:#fff;scrollbar-width:none}
.phone-screen::-webkit-scrollbar{display:none}
.phone-screen img{width:100%;height:auto}
.phone-cap{margin:0;font-weight:600;text-align:center}
.phone-cap small{display:block;font-weight:500;color:rgba(255,255,255,.7);font-size:.82rem;margin-top:2px}
.phone-close{position:absolute;top:18px;right:18px;font:inherit;font-weight:600;background:transparent;color:#fff;border:1.5px solid #fff;border-radius:99px;padding:8px 16px;cursor:pointer}
@media (prefers-reduced-motion:no-preference){dialog.phone[open] .phone-frame{animation:phoneIn .6s var(--ease) both}}
@keyframes phoneIn{from{transform:translateY(40px) scale(.96);opacity:0}to{transform:none;opacity:1}}

/* ---------- how they're built: three stacking cards ---------- */
.home .how .kicker{color:var(--vis2)}

/* ---------- contact (the closing section) ---------- */
.home .closing h2{font-size:clamp(2.8rem,7.4vw,8rem);max-width:13ch}
.home .closing .kicker{color:var(--vis2);margin-bottom:22px}
.home .closing .btn{max-width:100%}
.home .closing .btn span{overflow-wrap:anywhere}
.home .closing .where{font-size:.95rem;color:rgba(255,255,255,.8);margin:22px 0 0}

/* ---------- footer ---------- */
.foot-word{font-size:clamp(3.4rem,15.5vw,18rem)}

/* ---------- inner pages (privacy, cookies, not found) ---------- */
.v9c .phero.tm-plain{min-height:62svh}
.v9c .phero.tm-plain .phero-media{background:#0b141c}
.v9c .phero.tm-plain .phero-media img{opacity:.5}

/* fixes after the first render (13 Nov 02:05) */
.home .scard .n{-webkit-text-stroke:2px rgba(255,255,255,.9)}
.home .scard:nth-child(3) .n{-webkit-text-stroke-color:#1a0c02}
.site .num{top:14px;left:14px;font-size:clamp(1.3rem,2vw,1.7rem);line-height:1;color:#fff;-webkit-text-stroke:0;background:rgba(8,16,24,.78);padding:8px 12px 7px;border-radius:12px;font-variant-numeric:tabular-nums;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);text-shadow:none}
.site:hover .num,.site:focus-within .num{color:#1a0c02;background:var(--vis)}
.home .hero .hero-media::after{background:linear-gradient(180deg,rgba(8,16,24,.72) 0%,rgba(8,16,24,.38) 34%,rgba(8,16,24,.55) 60%,rgba(8,16,24,.92) 100%)}
@media (max-width:760px){.home .hero .hero-media::after{background:linear-gradient(180deg,rgba(8,16,24,.8) 0%,rgba(8,16,24,.62) 30%,rgba(8,16,24,.78) 55%,rgba(8,16,24,.95) 100%)}}