/* SK Digital ad landing pages - shared stylesheet (v7).
   Lifted from skdigital.co.nz: Poppins (700 headings / 300 body), fixed navy-to-black backdrop, white type,
   orange #FF6E0D pill button with dark text, "Trusted by" white logo band, off-white break band, white close
   band. Full-width darkened client photos behind the outcome bands. One CTA per page: the form. */
:root{
  --black:#000;--line:rgba(255,255,255,.14);--panel:rgba(255,255,255,.05);
  --white:#fff;--pale:#effaff;--grey:#c5d1d9;--muted:#8f9aa5;
  --accent:#FF6E0D;--accent-deep:#e65f04;
  --font:'Poppins',Arial,sans-serif;--w:1140px;--pill:2.9375rem;
}
/* Big screens: let the content breathe wider; nothing changes below 1600px */
@media(min-width:1600px){:root{--w:1400px}.video-wrap,.hero h1{max-width:1000px}.stack{padding-left:2rem;padding-right:2rem}}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--black);color:var(--white);font-family:var(--font);font-weight:300;font-size:1.1rem;line-height:1.7;position:relative}
@media(max-width:640px){body{font-size:1rem}}
body::before{content:"";position:fixed;inset:0;z-index:-1;background:linear-gradient(180deg,#0b1d38 0%,#081630 30%,#040b18 65%,#000 100%);pointer-events:none}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--font);margin:0 0 .5em;line-height:1.15}
h1{font-size:clamp(1.9rem,4vw,2.6rem);font-weight:400}
h2{font-size:clamp(1.7rem,3.4vw,2.5rem);font-weight:400}
h1 em,h2 em{font-style:italic;font-weight:700}
h3{font-size:1.25rem;font-weight:600}
p{margin:0 0 1em}
b,strong{font-weight:700}
.kicker{display:block;font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--white);margin-bottom:.9rem}
.kicker--accent{color:var(--accent)}
.accent{color:var(--accent)}
.stack{padding:clamp(3rem,7vw,5.5rem) 1.25rem}
.stack--white{background:var(--white);color:#00000c}
.stack--white .kicker{color:#00000c}
.stack--silver{background:#eef0f3;color:#00000c}
.stack--silver .kicker{color:#00000c}
.stack--silver h2{color:#00000c}
.inner{max-width:var(--w);margin:0 auto}
.inner--narrow{max-width:900px}
.lead{font-size:1em;color:var(--pale)}
.lead--sm{line-height:1.6;max-width:44rem;margin-left:auto;margin-right:auto}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;padding:.9rem 1.6rem;border-radius:var(--pill);font-family:var(--font);font-weight:700;font-size:.85rem;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;background:var(--accent);color:#00000c;border:0;cursor:pointer;transition:background .15s ease,transform .15s ease;white-space:nowrap}
.btn:hover{background:var(--accent-deep);transform:translateY(-1px)}
.btn--lg{padding:1rem 2rem;font-size:.9rem}
.center{text-align:center}
.btn-row{display:flex;align-items:center;gap:1rem}
.thanks .textlink{font-size:.9rem}
.small{font-size:.85rem;color:var(--muted)}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(0,0,0,.9);backdrop-filter:blur(8px)}
.site-header .inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem 1.25rem}
.site-logo img{height:40px;width:auto}
@media(max-width:640px){.site-header .inner{padding:.75rem 1.25rem}.site-logo img{height:32px}.site-header .btn{padding:.65rem 1.1rem;font-size:.72rem}}

/* Photo bands: full-bleed darkened client photo behind content */
.photo{position:relative;overflow:hidden;isolation:isolate}
.photo > img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-2}
.photo::before{content:"";position:absolute;inset:0;background:rgba(3,8,18,.72);z-index:-1}
.photo--subtle > img.bg{opacity:.42;object-position:35% 25%}
.photo--subtle::before{background:linear-gradient(180deg,rgba(5,10,20,.72) 0%,rgba(4,8,16,.8) 55%,#050a14 100%)}
.tint-blue::before{background:linear-gradient(180deg,rgba(6,22,52,.82) 0%,rgba(2,6,14,.94) 100%)}
.tint-green::before{background:linear-gradient(180deg,rgba(4,34,24,.82) 0%,rgba(2,8,6,.94) 100%)}
.tint-red::before{background:linear-gradient(180deg,rgba(48,8,12,.82) 0%,rgba(10,2,4,.94) 100%)}
.tint-purple::before{background:linear-gradient(180deg,rgba(30,8,44,.82) 0%,rgba(8,2,12,.94) 100%)}
.bands{background:#fff;display:grid;gap:4px;padding:0}
@media(min-width:861px){.bands{grid-template-columns:1fr 1fr;padding:0}.band{aspect-ratio:1;min-height:0;padding:clamp(2.5rem,4.5vw,6rem)}.band .inner{max-width:none}.band h2{font-size:clamp(1.9rem,3vw,2.6rem)}}

/* Hero: H1, then the video, then the button */
.hero{padding:clamp(2.5rem,6vw,4.5rem) 1.25rem clamp(2.5rem,6vw,4rem);text-align:center}
.hero h1{max-width:880px;margin:0 auto .35rem;font-size:clamp(2.1rem,4.6vw,3.3rem);line-height:1.1;font-weight:400}
@media(min-width:861px){.hero h1 em{white-space:nowrap}}
.hero .h1-sub{font-size:1em;font-weight:300;color:var(--pale);margin:.4rem auto 1.5rem}
@media(max-width:640px){.hero h1{font-size:2.1rem;line-height:1.15}}
.hero .video-wrap{margin:0 auto}
.hero .video-cta{margin-top:1.4rem}
.hero .lead--sm{margin-top:1.4rem;margin-bottom:0}
.hero .gbadge{margin-top:1.2rem}

/* Split hero variant: text left, vertical Performance video right, button under the video */
.hero--split{text-align:left}
.hero--split .inner{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:3rem;align-items:start}
.hero--split h1{margin:0 0 .35rem;max-width:none}
@media(min-width:861px){.hero--split h1{max-width:100%;font-size:clamp(2.6rem,4.2vw,4.1rem);line-height:1.08;overflow-wrap:normal;margin-bottom:1.1rem}.hero--split .lead--sm{font-size:1.25rem;line-height:1.6;max-width:36rem}}
.hero--split .hero-text{padding-top:.25rem}
.hero--split .h1-sub{margin:.4rem 0 1.2rem}
.hero--split .lead--sm{margin:0 0 1.4rem;max-width:36rem}
.hero--split .gbadge{margin-top:0}
.hero-video{display:flex;flex-direction:column;align-items:center;gap:1.25rem}
.hero .video-wrap--tall{aspect-ratio:9/16;width:100%;max-width:420px;max-height:none;box-shadow:0 20px 60px rgba(0,0,0,.6)}
@media(max-width:860px){.hero--split .inner{grid-template-columns:1fr;gap:1.75rem}.hero--split{text-align:center}.hero--split h1{margin:0 auto .35rem}.hero--split .h1-sub{margin:.4rem auto 1rem}.hero--split .lead--sm{margin:0 auto 1.2rem}.hero .video-wrap--tall{max-width:300px}}

/* Single Google badge */
.gbadge{display:inline-flex;align-items:center;gap:.8rem;padding:.75rem 1.1rem;border:1px solid var(--line);background:rgba(255,255,255,.05);text-align:left}
.gbadge svg{width:34px;height:34px;flex:0 0 auto}
.gbadge b{display:block;font-size:.95rem;font-weight:700;line-height:1.2}
.gbadge .stars{color:#fbbc04;letter-spacing:.08em;font-size:.8rem;display:block}

/* Video: click to play */
.video-wrap{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.6);max-width:880px;margin:0 auto}
.video-wrap iframe,.video-wrap video{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.video-cta{text-align:center}

/* Trusted-by marquee */
.trusted{padding:2.5rem 0 3rem;background:#000}
.trusted .kicker{text-align:center;margin-bottom:1.5rem}
.marquee{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;gap:3.5rem;width:max-content;align-items:center;will-change:transform}
.marquee-track img{height:38px;width:auto;max-width:170px;object-fit:contain;opacity:.92}
@media(max-width:640px){.marquee-track img{height:28px;max-width:130px}.marquee-track{gap:2.25rem}}

/* Self-identify list with plain ticks */
.identify{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
@media(max-width:860px){.identify{grid-template-columns:1fr;gap:1.5rem}}
.plain{list-style:none;margin:0;padding:0;display:grid;gap:.9rem;color:#00000c}
.plain li{display:flex;gap:.8rem;align-items:flex-start}
.plain li svg{flex:0 0 1.35rem;width:1.35rem;height:1.35rem;margin-top:.3rem;color:var(--accent)}

/* Outcome bands: number, heading, one line, over a full-width client photo */
.band{min-height:clamp(320px,44vh,440px);display:flex;align-items:center;padding:clamp(2.5rem,6vw,4rem) 1.25rem}
.band .inner{width:100%;text-align:center}
.band .n{display:block;font-size:.75rem;letter-spacing:.14em;color:var(--accent);font-weight:700;margin-bottom:.6rem}
.band h2{font-size:clamp(1.9rem,4vw,2.9rem);margin-bottom:.4rem}
.band p{margin:0 auto;color:var(--pale);max-width:34rem}
.band--right .inner{text-align:center}
.band .more{display:none}
@media(min-width:861px) and (hover:hover){.band .more{display:block;max-height:0;overflow:hidden;opacity:0;margin-top:0;padding-top:0;border-top:2px solid transparent;transition:max-height .45s ease,opacity .35s ease,margin-top .35s ease,padding-top .35s ease;font-size:.86em;line-height:1.6;color:var(--grey);max-width:30rem}.band:hover .more,.band:focus-within .more{max-height:14rem;opacity:1;margin-top:1.1rem;padding-top:.9rem;border-top-color:var(--accent)}.band .more{margin-left:auto;margin-right:auto}.band{cursor:default}}
@media(max-width:640px){.band{min-height:82vw}}

/* Review slider */
.slider{position:relative}
.slider-track{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-bottom:.5rem;scrollbar-width:none}
.slider-track::-webkit-scrollbar{display:none}
.review{flex:0 0 calc((100% - 2rem)/3);scroll-snap-align:start;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.05);padding:1.4rem 1.3rem;display:flex;flex-direction:column;gap:.7rem}
@media(max-width:900px){.review{flex-basis:calc((100% - 1rem)/2)}}
@media(max-width:600px){.review{flex-basis:88%}}
.review .stars{color:#fbbc04;letter-spacing:.1em;font-size:.95rem}
.review p{margin:0;color:var(--pale);flex:1}
.review footer{display:flex;align-items:center;gap:.7rem;font-size:.85rem;color:var(--grey)}
.review footer svg{width:20px;height:20px;flex:0 0 auto}
.review footer b{color:var(--white);font-weight:700;display:block}
.slider-nav{display:flex;gap:.6rem;justify-content:flex-end;margin-top:1rem}
.slider-nav button{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:transparent;color:#fff;font-size:1.2rem;cursor:pointer;display:flex;align-items:center;justify-content:center}
.slider-nav button:hover{background:var(--accent);border-color:var(--accent);color:#00000c}

/* Chat / form band */
.chat .inner{display:grid;grid-template-columns:.85fr 1.15fr;gap:3rem;align-items:start}
@media(max-width:900px){.chat .inner{grid-template-columns:1fr;gap:1.75rem}}
.chat h2{color:#00000c}
.chat .who{margin-top:1.5rem}
.chat .who img{width:100%;max-width:360px;aspect-ratio:1;object-fit:cover;object-position:50% 18%;transform:scale(1.35);transform-origin:50% 22%}
.chat .who .frame{overflow:hidden;max-width:360px}
@media(max-width:900px){.chat .who .frame{max-width:none}.chat .who img{max-width:none;aspect-ratio:4/3;object-position:50% 18%;transform:scale(1.25);transform-origin:50% 26%}}
.chat .who b{display:block;margin-top:.9rem;color:#00000c}
.chat .who span{font-size:.9rem;color:#555}
.form{display:grid;gap:1rem}
.form label{display:grid;gap:.4rem;font-size:1.05rem;font-weight:600;color:#00000c}
.form select{width:100%;font:inherit;font-weight:300;font-size:1rem;padding:.8rem .9rem;border:1px solid #c9ced4;background:#fff;color:#00000c;border-radius:0;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300000c' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .8rem center;background-size:1rem}
.form select:focus{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)}
.form .opt{font-weight:300;font-size:.85rem;color:#777}
.form .checks{border:0;padding:0;margin:0;display:grid;gap:.45rem}
.form .checks legend{font-size:1.05rem;font-weight:600;color:#00000c;padding:0;margin-bottom:.6rem}
.form .checks label{display:flex;align-items:center;gap:.6rem;font-weight:300;font-size:1rem;cursor:pointer;white-space:nowrap}
.form .checks input{width:1.15rem;height:1.15rem;margin:.2rem 0 0;accent-color:var(--accent);flex:0 0 auto}
.form .checks--grid{grid-template-columns:repeat(2,1fr);column-gap:1rem}
.form .checks--grid legend{grid-column:1/-1}
@media(min-width:900px){.form .checks--grid{grid-template-columns:repeat(3,1fr)}}
.form .checks.invalid legend{color:#c62828}
.form-status.err{color:#c62828}
.form textarea{min-height:90px}
.form input,.form textarea{width:100%;font:inherit;font-weight:300;font-size:1rem;padding:.8rem .9rem;border:1px solid #c9ced4;background:#fff;color:#00000c;border-radius:0}
.form input.invalid,.form select.invalid{border-color:#c62828}
.form input:focus,.form textarea:focus{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)}
.form textarea{resize:vertical}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:520px){.form .row{grid-template-columns:1fr}}
.form .hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.form .btn{justify-self:start}
.form-note{font-size:.8rem;color:#666;margin:0}
.form-status{font-size:.95rem;color:#00000c;margin:0;min-height:1.4em}

/* Footer */
.site-footer{background:#000;padding:2.5rem 1.25rem;color:var(--grey);font-size:.85rem}
.site-footer .inner{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1.25rem}
.site-footer img{height:32px}
.site-footer a{color:var(--white);text-decoration:none}
.site-footer .full{font-weight:700;color:var(--accent)}
.site-footer .full:hover{text-decoration:underline}

/* Thanks */
.thanks{min-height:60vh;display:flex;align-items:center;text-align:center}
.thanks .inner{max-width:640px}

/* Mobile hero heading: a touch smaller so the three lines sit cleanly */
@media(max-width:860px){.hero h1{font-size:2.15rem;line-height:1.15;margin-bottom:1rem}}
@media(max-width:380px){.hero h1{font-size:1.95rem}}