:root{
--navy-900:#0a1428;
--navy-800:#0f1d38;
--navy-700:#16294d;
--navy-600:#1e355f;
--ink:#0a1428;
--paper:#f5f2ec;
--paper-card:#ffffff;
--amber:#f0842a;
--amber-soft:#f9a95a;
--cream-text:#e8ecf5;
--muted:#93a1bd;
--muted-ink:#5a6478;
--line:rgba(255,255,255,0.09);
--maxw:1180px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
font-family:'Inter','Sora',sans-serif;
background:var(--navy-900);
color:var(--cream-text);
line-height:1.7;
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
h1,h2,h3,.display{font-family:'Sora','Inter',sans-serif;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
section{position:relative;}
.eyebrow{
font-family:'Sora',sans-serif;
font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
color:var(--amber);margin-bottom:20px;display:inline-flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--amber);opacity:.7;}
.amber{color:var(--amber);}
/* nav */
header{
position:sticky;top:0;z-index:50;
background:rgba(10,20,40,.72);backdrop-filter:blur(14px);
border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px;}
.brand{display:flex;align-items:baseline;gap:9px;text-decoration:none;}
.brand .mark{font-family:'Sora',sans-serif;font-weight:800;font-size:23px;letter-spacing:.14em;color:#fff;}
.brand .sub{font-family:'Sora',sans-serif;font-weight:500;font-size:11px;letter-spacing:.18em;color:var(--muted);text-transform:uppercase;}
.nav-links{display:flex;align-items:center;gap:34px;}
.nav-links a{color:var(--cream-text);text-decoration:none;font-size:14.5px;font-weight:400;transition:color .2s;}
.nav-links a:hover{color:var(--amber);}
.nav-cta{background:var(--amber);color:#0a1428 !important;font-weight:800;padding:11px 22px;border-radius:100px;font-size:14px;transition:transform .2s,box-shadow .2s;}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(240,132,42,.35);color:#0a1428 !important;}
.nav-links a.nav-cta{font-weight:800;}
.burger{display:none;background:none;border:none;color:#fff;font-size:26px;cursor:pointer;}
/* hero */
.hero{padding:96px 0 88px;overflow:hidden;}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:center;}
.hero h1{font-size:clamp(38px,5.4vw,60px);font-weight:800;line-height:1.08;letter-spacing:-.02em;color:#fff;margin-bottom:26px;}
.hero h1 .line2{color:var(--amber);}
.hero-lead{font-size:18.5px;color:var(--cream-text);max-width:520px;margin-bottom:14px;font-weight:300;}
.hero-lead strong{font-weight:600;color:#fff;}
.hero-sub{font-size:15.5px;color:var(--muted);max-width:500px;margin-bottom:38px;}
.btn-row{display:flex;gap:16px;flex-wrap:wrap;}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;text-decoration:none;font-weight:600;padding:15px 28px;border-radius:100px;font-size:15.5px;line-height:1.2;transition:transform .2s,box-shadow .2s,background .2s,border-color .2s;cursor:pointer;border:1px solid transparent;}
.btn-primary{background:var(--amber);color:#0a1428;}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(240,132,42,.4);}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.22);}
.btn-ghost:hover{border-color:var(--amber);color:var(--amber);}
.hero-visual{position:relative;display:flex;justify-content:center;align-items:center;min-height:360px;}
.card-stack{position:relative;width:100%;max-width:360px;margin-bottom:46px;}
.biz-card{position:relative;z-index:2;background:linear-gradient(150deg,var(--navy-700),var(--navy-800));border:1px solid var(--navy-600);border-radius:18px;padding:30px 30px 26px;box-shadow:0 30px 70px rgba(0,0,0,.5);}
.biz-card .chip{font-family:'Sora';font-size:11px;letter-spacing:.2em;color:var(--muted);text-transform:uppercase;margin-bottom:18px;}
.biz-card .cname{font-family:'Sora';font-weight:700;font-size:20px;color:#fff;margin-bottom:4px;}
.biz-card .crole{font-size:13px;color:var(--muted);margin-bottom:22px;}
.biz-card .cstatic{font-size:12.5px;color:var(--muted-ink);border-top:1px solid var(--line);padding-top:16px;}
.live-bubble{position:absolute;z-index:3;right:-14px;bottom:-62px;background:var(--amber);color:#0a1428;border-radius:16px 16px 4px 16px;padding:14px 18px;max-width:230px;font-size:13.5px;font-weight:500;line-height:1.5;box-shadow:0 18px 40px rgba(240,132,42,.35);}
.live-bubble .who{font-family:'Sora';font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.65;margin-bottom:4px;}
.live-dot{position:absolute;top:-8px;right:-8px;display:flex;align-items:center;gap:5px;background:#0a1428;color:#5ee08a;font-family:'Sora';font-size:9.5px;font-weight:700;letter-spacing:.1em;padding:4px 9px;border-radius:100px;border:1px solid rgba(94,224,138,.4);}
.live-dot span{width:6px;height:6px;border-radius:50%;background:#5ee08a;animation:pulse 2s infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(94,224,138,.6)}70%{box-shadow:0 0 0 7px rgba(94,224,138,0)}100%{box-shadow:0 0 0 0 rgba(94,224,138,0)}}
.glow{position:absolute;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(240,132,42,.22),transparent 68%);filter:blur(20px);z-index:1;top:20px;left:10px;}
/* trust strip */
.strip{padding:56px 0;background:var(--navy-800);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.strip-in{display:grid;grid-template-columns:repeat(4,1fr);}
.stat{display:block;text-align:center;padding:0 24px;border-left:1px solid var(--line);min-width:0;}
.stat:first-child{border-left:none;}
.stat .num-row{display:flex;align-items:baseline;justify-content:center;gap:6px;white-space:nowrap;overflow:hidden;}
.stat .num-row b{font-family:'Sora';font-size:clamp(15px,4vw,24px);font-weight:700;color:#fff;line-height:1;}
.stat .num-row .amber{font-family:'Sora';font-size:clamp(17px,4.6vw,27.6px);font-weight:700;color:var(--amber);line-height:1;}
.stat .lbl{font-size:13px;color:var(--muted);margin-top:10px;display:block;line-height:1.5;}
.stat b .count{font-size:inherit;color:inherit;}
/* pain */
.pain{padding:100px 0;background:var(--navy-900);}
.pain-head{max-width:780px;}
.pain h2{font-size:clamp(27px,3.6vw,40px);font-weight:700;color:#fff;line-height:1.22;letter-spacing:-.01em;margin-bottom:26px;}
.pain p{font-size:17px;color:var(--muted);margin-bottom:16px;max-width:660px;text-align:justify;text-align-last:left;}
.pain .punch{font-size:18.5px;color:var(--cream-text);border-left:3px solid var(--amber);padding:4px 0 4px 22px;margin-top:34px;max-width:680px;}
.pain .punch strong{color:#fff;font-weight:600;}
/* why */
.why{padding:100px 0;background:var(--navy-800);border-top:1px solid var(--line);}
.why-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:56px;flex-wrap:wrap;}
.why-head h2{font-size:clamp(28px,3.8vw,44px);font-weight:800;color:#fff;letter-spacing:-.02em;}
.why-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;}
.vcard{background:linear-gradient(160deg,var(--navy-700),rgba(15,29,56,.6));border:1px solid var(--navy-600);border-radius:18px;padding:34px 32px;transition:transform .25s,border-color .25s;position:relative;overflow:hidden;}
.vcard:hover{transform:translateY(-4px);border-color:rgba(240,132,42,.5);}
.vcard .vn{font-family:'Sora';font-size:13px;font-weight:700;color:var(--amber);letter-spacing:.1em;margin-bottom:18px;}
.vcard h3{font-size:20px;font-weight:600;color:#fff;margin-bottom:12px;}
.vcard p{font-size:15px;color:var(--muted);line-height:1.7;text-align:justify;}
.vcard.feature{grid-column:1 / -1;background:linear-gradient(120deg,var(--navy-700),var(--navy-600));display:grid;grid-template-columns:auto 1fr;gap:34px;align-items:center;}
.vcard.feature .big{font-family:'Sora';font-size:clamp(40px,6vw,60px);font-weight:800;color:var(--amber);line-height:.9;white-space:nowrap;}
@media(max-width:640px){.vcard.feature{grid-template-columns:1fr;gap:14px}}
/* portfolio */
.work{padding:100px 0;background:var(--paper);color:var(--ink);}
.work .eyebrow{color:#c8641a;}
.work .eyebrow::before{background:#c8641a;}
.work h2{font-size:clamp(28px,3.8vw,44px);font-weight:800;color:var(--ink);letter-spacing:-.02em;margin-bottom:16px;}
.work-intro{font-size:16.5px;color:var(--muted-ink);max-width:640px;margin-bottom:52px;text-align:justify;}
.work-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;}
.wcard{background:var(--paper-card);border-radius:18px;overflow:hidden;box-shadow:0 12px 40px rgba(10,20,40,.1);transition:transform .25s,box-shadow .25s;text-decoration:none;color:inherit;display:block;}
.wcard:hover{transform:translateY(-5px);box-shadow:0 22px 55px rgba(10,20,40,.16);}
/* screenshot slot: real screenshots go here as ![]()
. Keeps 16:10-ish frame, shows top of page */
.wthumb{aspect-ratio:16/10;height:auto;position:relative;overflow:hidden;background:#e9e4da;display:flex;align-items:center;justify-content:center;padding:14px;}
.wthumb picture{position:relative;inset:auto;display:flex;width:100%;height:100%;align-items:center;justify-content:center;}
.wthumb img{position:relative;inset:auto;width:100%;height:100%;object-fit:contain;object-position:center;display:block;border-radius:6px;box-shadow:0 6px 20px rgba(10,20,40,.18);transition:transform .65s cubic-bezier(.2,.8,.2,1);}
.wthumb .slot-note{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:20px;color:#8a8172;font-size:13px;font-family:'Sora';border:2px dashed #c9c0b0;border-radius:10px;margin:12px;}
.wthumb .slot-note b{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#a89b84;}
.wthumb .view{position:absolute;top:14px;right:14px;font-family:'Sora';font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:6px 12px;background:rgba(10,20,40,.78);border-radius:100px;color:#fff;z-index:2;}
.wbody{padding:26px 28px 30px;}
.wtag{font-family:'Sora';font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#c8641a;margin-bottom:10px;}
.wbody h3{font-size:21px;font-weight:700;color:var(--ink);margin-bottom:10px;font-family:'Sora';}
.wbody p{font-size:14.5px;color:var(--muted-ink);line-height:1.65;text-align:justify;}
.work-note{margin-top:34px;font-size:14px;color:var(--muted-ink);text-align:justify;}
/* audience */
.aud{padding:100px 0;background:var(--navy-900);border-top:1px solid var(--line);}
.aud-head{max-width:700px;margin-bottom:52px;}
.aud h2{font-size:clamp(27px,3.6vw,40px);font-weight:700;color:#fff;margin-bottom:20px;letter-spacing:-.01em;}
.aud p{font-size:16.5px;color:var(--muted);text-align:justify;}
.aud-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.acard{
position:relative;overflow:hidden;
border:1px solid var(--navy-600);border-radius:18px;padding:30px 26px;
/* subtle diagonal gradient */
background:linear-gradient(135deg,var(--navy-700) 0%,var(--navy-800) 55%,rgba(15,29,56,.85) 100%);
transition:transform .32s cubic-bezier(.2,.8,.2,1),border-color .32s,box-shadow .32s;
}
/* hidden top accent bar — slides in on hover */
.acard::before{
content:"";position:absolute;top:0;left:0;right:0;height:3px;
background:linear-gradient(90deg,var(--amber),var(--amber-soft));
transform:scaleX(0);transform-origin:left;
transition:transform .42s cubic-bezier(.65,0,.35,1);
}
.acard:hover::before,.acard:focus-within::before{transform:scaleX(1);}
.acard:hover,.acard:focus-within{
transform:translateY(-6px);
border-color:rgba(240,132,42,.62);
box-shadow:0 18px 42px rgba(0,0,0,.38),0 0 0 1px rgba(240,132,42,.10);
}
.acard .aicon{
display:inline-flex;align-items:center;justify-content:center;
width:52px;height:52px;border-radius:14px;
font-size:24px;line-height:1;margin-bottom:18px;
background:rgba(240,132,42,.12);
border:1px solid rgba(240,132,42,.20);
transition:transform .34s cubic-bezier(.2,.8,.2,1),background .34s,border-color .34s;
}
.acard:hover .aicon,.acard:focus-within .aicon{
transform:scale(1.12) rotate(-6deg);
background:rgba(240,132,42,.20);
border-color:rgba(240,132,42,.42);
}
.acard h3{font-family:'Sora';font-size:17px;font-weight:600;color:#fff;margin-bottom:8px;}
.acard p{font-size:13.5px;color:var(--muted);line-height:1.6;}
/* pricing */
.price{padding:100px 0;background:var(--navy-800);border-top:1px solid var(--line);}
.price-head{text-align:center;max-width:640px;margin:0 auto 58px;}
.price-head h2{font-size:clamp(28px,3.8vw,44px);font-weight:800;color:#fff;letter-spacing:-.02em;margin-bottom:16px;}
.price-head p{font-size:16px;color:var(--muted);}
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start;}
.pcard{background:linear-gradient(165deg,var(--navy-700),rgba(15,29,56,.5));border:1px solid var(--navy-600);border-radius:20px;padding:36px 30px;position:relative;transition:transform .25s;}
.pcard:hover{transform:translateY(-4px);}
.pcard.pop{border-color:var(--amber);box-shadow:0 24px 60px rgba(240,132,42,.16);}
.pop-tag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--amber);color:#0a1428;font-family:'Sora';font-size:11.5px;font-weight:700;letter-spacing:.08em;padding:6px 16px;border-radius:100px;white-space:nowrap;}
.ptier{font-family:'Sora';font-size:15px;font-weight:600;color:var(--amber);letter-spacing:.04em;margin-bottom:14px;}
.pprice{font-family:'Sora';font-size:38px;font-weight:800;color:#fff;line-height:1;margin-bottom:6px;}
.pfor{font-size:13.5px;color:var(--muted);margin-bottom:24px;min-height:40px;}
.plist{list-style:none;margin-bottom:28px;}
.plist li{font-size:14px;color:var(--cream-text);padding:9px 0 9px 26px;position:relative;border-bottom:1px solid var(--line);}
.plist li::before{content:"";position:absolute;left:0;top:15px;width:14px;height:8px;border-left:2px solid var(--amber);border-bottom:2px solid var(--amber);transform:rotate(-45deg);}
.pdeliver{font-family:'Sora';font-size:12.5px;color:var(--muted);letter-spacing:.04em;margin-bottom:22px;}
.pbtn{display:block;text-align:center;text-decoration:none;padding:13px;border-radius:100px;font-weight:600;font-size:14.5px;transition:transform .2s,box-shadow .2s;}
.pbtn.solid{background:var(--amber);color:#0a1428;}
.pbtn.solid:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(240,132,42,.4);}
.pbtn.line{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.2);}
.pbtn.line:hover{border-color:var(--amber);color:var(--amber);}
.addon{text-align:center;margin-top:36px;font-size:14px;color:var(--muted);}
.addon b{color:var(--cream-text);font-weight:500;}
/* about */
.about{padding:100px 0;background:var(--paper);color:var(--ink);}
.about .eyebrow{color:#c8641a;}
.about .eyebrow::before{background:#c8641a;}
.about-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:center;}
.about h2{font-size:clamp(27px,3.6vw,40px);font-weight:800;color:var(--ink);letter-spacing:-.02em;margin-bottom:24px;line-height:1.2;}
.about p{font-size:16.5px;color:#3a445c;margin-bottom:18px;line-height:1.75;}
.about p:not(.lead-q){text-align:justify;text-align-last:left;}
.about .lead-q{font-size:20px;font-weight:600;color:var(--ink);}
.about-side{background:var(--ink);border-radius:22px;padding:44px 40px;color:var(--cream-text);}
.about-side .yr{font-family:'Sora';font-size:58px;font-weight:800;color:var(--amber);line-height:1;}
.about-side .yr-label{font-size:14px;color:var(--muted);margin:10px 0 30px;letter-spacing:.03em;}
.about-side .rule{height:1px;background:var(--line);margin:22px 0;}
.about-side .row{display:flex;gap:14px;align-items:flex-start;margin-bottom:16px;}
.about-side .row .k{font-family:'Sora';color:var(--amber);font-weight:700;font-size:14px;min-width:20px;}
.about-side .row .v{font-size:14.5px;color:var(--cream-text);}
/* final */
.final{padding:110px 0;background:linear-gradient(150deg,var(--navy-800),var(--navy-900));text-align:center;border-top:1px solid var(--line);}
.final h2{font-size:clamp(28px,4vw,46px);font-weight:800;color:#fff;letter-spacing:-.02em;margin-bottom:20px;max-width:740px;margin-left:auto;margin-right:auto;line-height:1.15;}
.final p{font-size:17px;color:var(--muted);max-width:580px;margin:0 auto 38px;}
.final .btn-row{justify-content:center;}
/* footer */
footer{background:var(--navy-900);border-top:1px solid var(--line);padding:64px 0 34px;}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;margin-bottom:44px;}
.foot-brand .mark{font-family:'Sora';font-weight:800;font-size:22px;letter-spacing:.14em;color:#fff;margin-bottom:14px;}
.foot-brand p{font-size:14.5px;color:var(--muted);max-width:280px;}
.foot-col h4{font-family:'Sora';font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);margin-bottom:18px;}
.foot-col p,.foot-col a{font-size:14px;color:var(--muted);margin-bottom:11px;display:block;text-decoration:none;line-height:1.5;}
.foot-col a:hover{color:var(--amber);}
.foot-bottom{border-top:1px solid var(--line);padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;}
.foot-bottom p{font-size:12.5px;color:var(--muted-ink);}
.foot-bottom .tag{font-family:'Sora';font-size:12.5px;color:var(--amber);letter-spacing:.06em;}
/* whatsapp float */
.wa-float{position:fixed;right:22px;bottom:22px;z-index:60;background:#25d366;color:#fff;width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(37,211,102,.45);text-decoration:none;transition:transform .2s;}
.wa-float:hover{transform:scale(1.08);}
.wa-float svg{width:30px;height:30px;fill:#fff;}
@media(max-width:920px){
.hero-grid{grid-template-columns:1fr;gap:56px;}
.hero-visual{order:-1;min-height:300px;}
.about-grid{grid-template-columns:1fr;gap:40px;}
.why-grid{grid-template-columns:1fr;}
.aud-grid{grid-template-columns:repeat(2,1fr);}
.price-grid{grid-template-columns:1fr;max-width:420px;margin:0 auto;}
.work-grid{grid-template-columns:1fr;}
.foot-grid{grid-template-columns:1fr;gap:32px;}
}
@media(max-width:640px){
.nav-links{display:none;}
.burger{display:block;}
.nav-links.open{display:flex;position:absolute;top:74px;left:0;right:0;flex-direction:column;background:var(--navy-800);padding:24px;gap:20px;border-bottom:1px solid var(--line);}
/* single vertical column so every stat gets full width, centered */
.strip{padding:40px 0;}
.strip-in{grid-template-columns:1fr;}
.stat{border-left:none;border-top:1px solid var(--line);padding:20px 16px;}
.stat:first-child{border-top:none;}
.hero{padding:64px 0 60px;}
.aud-grid{grid-template-columns:1fr;}
}
/* ---------- FAQ ---------- */
.faq{padding:100px 0;background:var(--paper);color:var(--ink);}
.faq .eyebrow{color:#c8641a;}
.faq .eyebrow::before{background:#c8641a;}
.faq h2{font-size:clamp(28px,3.8vw,44px);font-weight:800;color:var(--ink);letter-spacing:-.02em;margin-bottom:16px;}
.faq-intro{font-size:16.5px;color:var(--muted-ink);max-width:620px;margin-bottom:48px;}
.faq-list{max-width:100%;}
.faq-item{border-bottom:1px solid rgba(10,20,40,.12);}
.faq-q{
width:100%;background:none;border:none;cursor:pointer;text-align:left;
display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
padding:24px 0;font-family:'Sora',sans-serif;font-size:17.5px;font-weight:600;
color:var(--ink);line-height:1.45;transition:color .25s;
}
.faq-q:hover{color:#c8641a;}
.faq-q .ico{
flex-shrink:0;width:26px;height:26px;border-radius:50%;border:1.5px solid #c8641a;
display:flex;align-items:center;justify-content:center;position:relative;margin-top:2px;
transition:background .28s,transform .28s;
}
.faq-q .ico::before,.faq-q .ico::after{
content:"";position:absolute;background:#c8641a;border-radius:2px;transition:transform .28s,background .28s;
}
.faq-q .ico::before{width:11px;height:1.5px;}
.faq-q .ico::after{width:1.5px;height:11px;}
.faq-item.open .faq-q .ico{background:#c8641a;transform:rotate(180deg);}
.faq-item.open .faq-q .ico::before{background:#fff;}
.faq-item.open .faq-q .ico::after{transform:scaleY(0);background:#fff;}
.faq-a{max-height:0;overflow:hidden;transition:max-height .42s cubic-bezier(.4,0,.2,1);}
.faq-a-inner{padding:0 56px 28px 0;max-width:none;font-size:15.5px;color:#3a445c;line-height:1.75;text-align:justify;text-align-last:left;}
.faq-cta{margin-top:44px;font-size:15.5px;color:var(--muted-ink);text-align:justify;}
.faq-cta a{color:#c8641a;font-weight:600;text-decoration:none;}
.faq-cta a:hover{text-decoration:underline;}
@media(max-width:640px){
.faq-q{font-size:16px;padding:20px 0;}
.faq-a-inner{padding-right:12px;font-size:15px;}
}
/* FAQ follows the light About section — hairline keeps them visually distinct */
.faq{border-top:1px solid rgba(10,20,40,.10);}
/* tighter vertical rhythm on small screens */
@media(max-width:640px){
.pain,.why,.work,.aud,.price,.about,.faq{padding-top:66px;padding-bottom:66px;}
.final{padding:76px 0;}
.about-side{padding:34px 28px;}
.about-side .yr{font-size:46px;}
.work-intro,.faq-intro,.aud-head{margin-bottom:34px;}
.why-head{margin-bottom:34px;}
.price-head{margin-bottom:38px;}
}
/* ---------- back to top (below WhatsApp) ---------- */
.totop{
position:fixed;right:22px;bottom:22px;z-index:60;
width:58px;height:58px;border-radius:50%;
background:var(--amber);border:none;cursor:pointer;
display:flex;align-items:center;justify-content:center;
box-shadow:0 10px 30px rgba(240,132,42,.45);
opacity:0;visibility:hidden;transform:translateY(12px);
transition:opacity .3s,transform .3s,visibility .3s,box-shadow .2s;
}
.totop.show{opacity:1;visibility:visible;transform:translateY(0);}
.totop:hover{transform:translateY(-3px) scale(1.06);box-shadow:0 14px 34px rgba(240,132,42,.55);}
.totop svg{width:24px;height:24px;fill:none;stroke:#0a1428;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;}
/* WhatsApp sits above the back-to-top button */
.wa-float{bottom:92px;}
@media(max-width:640px){
.totop{right:16px;bottom:16px;}
.wa-float{right:16px;bottom:86px;}
}
/* typing line in pain section */
.type-line .caret2{
display:inline-block;width:3px;height:.92em;background:var(--amber);
vertical-align:-3px;margin-left:3px;animation:blink 1s steps(1) infinite;
}
.type-line .caret2.done{display:none;}
/* ============ INTERACTIONS ============ */
/* --- nav scroll-spy animated underline --- */
.nav-links a:not(.nav-cta){position:relative;padding-bottom:4px;}
.nav-links a:not(.nav-cta)::after{
content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;
background:var(--amber);border-radius:2px;
transform:scaleX(0);transform-origin:right;
transition:transform .38s cubic-bezier(.65,0,.35,1);
}
.nav-links a:not(.nav-cta):hover::after,
.nav-links a:not(.nav-cta).active::after{transform:scaleX(1);transform-origin:left;}
.nav-links a:not(.nav-cta).active{color:var(--amber);}
/* --- hero 3D tilt --- */
.hero-visual{perspective:1100px;}
.card-stack{
transform-style:preserve-3d;
transition:transform .45s cubic-bezier(.2,.8,.2,1);
will-change:transform;
}
.card-stack.tilting{transition:transform .08s linear;}
.biz-card{transform:translateZ(28px);}
.live-bubble{transform:translateZ(56px);}
.live-dot{transform:translateZ(40px);}
/* typing caret in bubble */
.type-target{display:inline;}
.caret{display:inline-block;width:2px;height:1em;background:#0a1428;opacity:.75;
vertical-align:-2px;margin-left:2px;animation:blink 1s steps(1) infinite;}
@keyframes blink{50%{opacity:0}}
.caret.done{display:none;}
/* --- stat count-up --- */
.count{font-variant-numeric:tabular-nums;}
/* .stat span sets the small label size — make sure the number itself stays large */
.stat b .count{font-size:inherit;color:inherit;margin-top:0;}
.about-side .yr .count{font-size:inherit;color:inherit;}
/* --- why cards: cursor spotlight + lift --- */
.vcard{--mx:50%;--my:50%;transition:transform .3s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .3s;}
.vcard::before{
content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
background:radial-gradient(420px circle at var(--mx) var(--my),rgba(240,132,42,.16),transparent 62%);
opacity:0;transition:opacity .35s;
}
.vcard:hover::before{opacity:1;}
.vcard > *{position:relative;z-index:1;}
.vcard:hover{transform:translateY(-7px);border-color:rgba(240,132,42,.55);
box-shadow:0 22px 50px rgba(0,0,0,.42);}
/* --- portfolio: zoom + reveal tag --- */
.wthumb img{transition:transform .65s cubic-bezier(.2,.8,.2,1);}
.wcard:hover .wthumb img{transform:scale(1.075);}
.wthumb .view{
opacity:0;transform:translateY(-8px);
transition:opacity .32s ease,transform .32s cubic-bezier(.2,.8,.2,1);
}
.wcard:hover .wthumb .view{opacity:1;transform:translateY(0);}
.wcard:focus-visible .wthumb .view{opacity:1;transform:translateY(0);}
/* --- pricing lift + popular glow --- */
.pcard{transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .3s;}
.pcard:hover{transform:translateY(-9px);box-shadow:0 26px 56px rgba(0,0,0,.4);
border-color:rgba(240,132,42,.45);}
.pcard.pop:hover{
box-shadow:0 30px 74px rgba(240,132,42,.34),0 0 0 1px rgba(240,132,42,.5);
border-color:var(--amber);
}
/* --- accessibility: respect reduced motion --- */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important;}
.card-stack{transform:none !important;}
}
/* --- touch devices: neutralize hover-only effects ---
hover has no meaning on tap; without this, a tap can leave a card
visually "stuck" mid-lift/mid-zoom until the user taps elsewhere.
:focus-visible / :focus-within are intentionally left alone so
keyboard navigation still gets its visual feedback. */
@media (hover:none){
.wcard:hover{transform:none;box-shadow:0 12px 40px rgba(10,20,40,.1);}
.wcard:hover .wthumb img{transform:none;}
.wcard:hover .wthumb .view{opacity:0;transform:translateY(-8px);}
.vcard:hover{transform:none;border-color:var(--navy-600);box-shadow:none;}
.vcard:hover::before{opacity:0;}
.acard:hover{transform:none;border-color:var(--navy-600);box-shadow:none;}
.acard:hover::before{transform:scaleX(0);}
.acard:hover .aicon{transform:none;background:rgba(240,132,42,.12);border-color:rgba(240,132,42,.20);}
.pcard:hover{transform:none;}
.totop:hover{transform:none;box-shadow:0 10px 26px rgba(240,132,42,.4);}
.wa-float:hover{transform:none;}
.btn-primary:hover,.nav-cta:hover{transform:none;box-shadow:none;}
.btn-ghost:hover{border-color:rgba(255,255,255,.22);color:#fff;}
.pbtn.line:hover{border-color:rgba(255,255,255,.2);color:#fff;}
.pbtn.solid:hover{transform:none;box-shadow:none;}
}
/* ==========================================================
NEW: multi-page components (Lucco design system reused)
========================================================== */
/* ---------- hero device image ---------- */
.hero-photo{position:relative;display:flex;align-items:center;justify-content:center;min-height:380px;}
.hero-photo .hp-glow{
position:absolute;width:78%;height:70%;border-radius:50%;
background:radial-gradient(circle,rgba(240,132,42,.26),rgba(240,132,42,.07) 45%,transparent 70%);
filter:blur(46px);z-index:0;animation:hpPulse 7s ease-in-out 1;
}
.hero-photo img{
position:relative;z-index:1;width:100%;height:auto;display:block;
filter:drop-shadow(0 34px 60px rgba(0,0,0,.55));
}
@keyframes hpFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes hpPulse{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
/* ---------- inner page hero ---------- */
.page-hero{padding:74px 0 62px;background:var(--navy-900);border-bottom:1px solid var(--line);}
.page-hero h1{font-size:clamp(32px,4.6vw,50px);font-weight:800;color:#fff;letter-spacing:-.02em;line-height:1.1;margin-bottom:18px;}
.page-hero h1 .amber{color:var(--amber);}
.page-hero p{font-size:17.5px;color:var(--muted);max-width:640px;}
.crumb{font-family:'Sora';font-size:12.5px;color:var(--muted);margin-bottom:16px;letter-spacing:.04em;}
.crumb a{color:var(--muted);text-decoration:none;}
.crumb a:hover{color:var(--amber);}
.crumb span{color:var(--amber);}
/* ---------- service cards ---------- */
.svc{padding:100px 0;background:var(--navy-800);border-top:1px solid var(--line);}
.svc-head{max-width:660px;margin-bottom:52px;}
.svc-head h2{font-size:clamp(28px,3.8vw,44px);font-weight:800;color:#fff;letter-spacing:-.02em;margin-bottom:16px;}
.svc-head p{font-size:16.5px;color:var(--muted);}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.svc-card{
display:flex;flex-direction:column;overflow:hidden;position:relative;
background:linear-gradient(160deg,var(--navy-700),rgba(15,29,56,.6));
border:1px solid var(--navy-600);border-radius:18px;
transition:transform .3s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .3s;
}
.svc-card::before{
content:"";position:absolute;top:0;left:0;right:0;height:3px;z-index:2;
background:linear-gradient(90deg,var(--amber),var(--amber-soft));
transform:scaleX(0);transform-origin:left;transition:transform .42s cubic-bezier(.65,0,.35,1);
}
.svc-card:hover::before{transform:scaleX(1);}
.svc-card:hover{transform:translateY(-6px);border-color:rgba(240,132,42,.55);box-shadow:0 20px 46px rgba(0,0,0,.4);}
.svc-media{aspect-ratio:16/10;background:var(--navy-900);overflow:hidden;display:block;border-bottom:1px solid var(--line);}
.svc-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.8,.2,1);}
.svc-card:hover .svc-media img{transform:scale(1.05);}
.svc-body{padding:26px 24px 28px;display:flex;flex-direction:column;flex:1;}
.svc-body h3{font-size:19.5px;font-weight:600;color:#fff;margin-bottom:10px;}
.svc-body p{font-size:14.5px;color:var(--muted);line-height:1.7;margin-bottom:22px;flex:1;}
.svc-link{
align-self:flex-start;display:inline-flex;align-items:center;gap:8px;
font-family:'Sora';font-size:13.5px;font-weight:600;text-decoration:none;
color:var(--amber);border:1px solid rgba(240,132,42,.4);border-radius:100px;
padding:10px 20px;transition:background .25s,color .25s,transform .25s;
}
.svc-link:hover{background:var(--amber);color:#0a1428;transform:translateX(3px);}
/* ---------- centered CTA row ---------- */
.center-cta{display:flex;justify-content:center;margin-top:44px;}
.work .work-note{text-align:center;}
.work .center-cta + .work-note{margin-top:20px;}
/* ---------- packages preview (homepage) ---------- */
.pkg-prev{padding:100px 0;background:var(--navy-800);border-top:1px solid var(--line);}
.pkg-prev-head{text-align:center;max-width:640px;margin:0 auto 46px;}
.pkg-prev-head h2{font-size:clamp(28px,3.8vw,44px);font-weight:800;color:#fff;letter-spacing:-.02em;margin-bottom:16px;}
.pkg-prev-head p{font-size:16px;color:var(--muted);}
.pkg-mini-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:960px;margin:0 auto;}
.pkg-mini{
text-align:center;padding:30px 24px;border-radius:18px;
background:linear-gradient(165deg,var(--navy-700),rgba(15,29,56,.55));
border:1px solid var(--navy-600);transition:transform .3s,border-color .3s,box-shadow .3s;
}
.pkg-mini:hover{transform:translateY(-5px);border-color:rgba(240,132,42,.5);box-shadow:0 18px 40px rgba(0,0,0,.35);}
.pkg-mini.pop{border-color:var(--amber);box-shadow:0 20px 46px rgba(240,132,42,.14);}
.pkg-mini .tier{font-family:'Sora';font-size:14px;font-weight:600;color:var(--amber);margin-bottom:10px;}
.pkg-mini .amt{font-family:'Sora';font-size:32px;font-weight:800;color:#fff;line-height:1;margin-bottom:10px;}
.pkg-mini .meta{font-size:13.5px;color:var(--muted);}
.pkg-prev .center-cta{margin-top:40px;}
/* ---------- comparison table ---------- */
.cmp{padding:96px 0;background:var(--navy-900);border-top:1px solid var(--line);}
.cmp h2{font-size:clamp(26px,3.4vw,38px);font-weight:800;color:#fff;text-align:center;margin-bottom:14px;letter-spacing:-.02em;}
.cmp .sub{text-align:center;color:var(--muted);font-size:16px;margin-bottom:46px;}
.cmp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:16px;border:1px solid var(--navy-600);}
table.cmp-table{width:100%;border-collapse:collapse;min-width:680px;background:var(--navy-800);}
.cmp-table th,.cmp-table td{padding:16px 18px;text-align:left;border-bottom:1px solid var(--line);font-size:14.5px;}
.cmp-table thead th{
font-family:'Sora';font-size:13.5px;font-weight:700;color:#fff;
background:var(--navy-700);position:sticky;top:0;
}
.cmp-table thead th.pop{color:var(--amber);}
.cmp-table td:first-child,.cmp-table th:first-child{color:var(--cream-text);font-weight:500;}
.cmp-table td{color:var(--muted);}
.cmp-table tbody tr:hover{background:rgba(240,132,42,.05);}
.cmp-table .yes{color:var(--amber);font-weight:700;}
.cmp-table .no{color:#4a5878;}
/* ---------- about split ---------- */
.about-split{padding:96px 0;background:var(--navy-900);}
.about-split .split-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center;}
.about-split .pain-head{max-width:100%;}
.about-split .pain h2{margin-bottom:24px;}
/* ---------- about story ---------- */
.story{padding:100px 0;background:var(--paper);color:var(--ink);}
.story .eyebrow{color:#c8641a;}
.story .eyebrow::before{background:#c8641a;}
.story h2{font-size:clamp(27px,3.6vw,40px);font-weight:800;color:var(--ink);letter-spacing:-.02em;margin-bottom:22px;line-height:1.2;}
.story-lead{font-size:18.5px;color:#3a445c;max-width:760px;margin-bottom:46px;line-height:1.75;}
.story-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;}
.story-card{background:var(--paper-card);border-radius:18px;padding:32px 30px;box-shadow:0 10px 34px rgba(10,20,40,.08);}
.story-card h3{font-family:'Sora';font-size:19px;font-weight:700;color:var(--ink);margin-bottom:12px;}
.story-card p{font-size:15.5px;color:#3a445c;line-height:1.75;}
.story-card .num{font-family:'Sora';font-size:13px;font-weight:700;color:#c8641a;letter-spacing:.1em;margin-bottom:14px;display:block;}
/* ---------- portfolio case studies ---------- */
.cases{padding:100px 0;background:var(--paper);color:var(--ink);}
.case{
background:var(--paper-card);border-radius:22px;overflow:hidden;
box-shadow:0 14px 44px rgba(10,20,40,.1);margin-bottom:56px;
}
.case:last-child{margin-bottom:0;}
.case-shot{background:#e9e4da;padding:26px;display:flex;align-items:center;justify-content:center;}
.case-shot img{width:100%;height:auto;max-height:460px;object-fit:contain;display:block;border-radius:10px;box-shadow:0 12px 32px rgba(10,20,40,.16);}
.case-body{padding:36px 38px 40px;}
.case-tag{font-family:'Sora';font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#c8641a;margin-bottom:12px;}
.case-body h2{font-family:'Sora';font-size:clamp(22px,3vw,30px);font-weight:800;color:var(--ink);margin-bottom:8px;letter-spacing:-.01em;}
.case-client{font-size:14.5px;color:var(--muted-ink);margin-bottom:22px;}
.case-desc{font-size:16px;color:#3a445c;line-height:1.75;margin-bottom:26px;max-width:760px;}
.case-meta{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;padding-top:26px;border-top:1px solid rgba(10,20,40,.12);}
.case-meta h4{font-family:'Sora';font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#c8641a;margin-bottom:14px;}
.chips{display:flex;flex-wrap:wrap;gap:8px;}
.chip-i{font-size:13px;color:#3a445c;background:#f2ede4;border:1px solid rgba(10,20,40,.09);border-radius:100px;padding:6px 14px;}
.case-link{display:inline-flex;align-items:center;gap:8px;font-family:'Sora';font-size:14.5px;font-weight:600;color:#c8641a;text-decoration:none;}
.case-link:hover{text-decoration:underline;}
/* ---------- service detail page ---------- */
.svc-detail{padding:96px 0;background:var(--navy-900);}
.svc-detail .lead{font-size:18px;color:var(--cream-text);max-width:760px;margin-bottom:20px;line-height:1.8;}
.svc-detail p{font-size:16.5px;color:var(--muted);max-width:760px;margin-bottom:18px;line-height:1.8;}
.svc-detail h2{font-size:clamp(24px,3.2vw,34px);font-weight:800;color:#fff;letter-spacing:-.02em;margin:52px 0 20px;}
.svc-detail h2:first-of-type{margin-top:0;}
.incl-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:8px;}
.incl{
display:flex;gap:14px;align-items:flex-start;padding:20px 22px;border-radius:14px;
background:linear-gradient(160deg,var(--navy-700),rgba(15,29,56,.6));border:1px solid var(--navy-600);
}
.incl .tick{
flex-shrink:0;width:22px;height:22px;border-radius:50%;background:rgba(240,132,42,.15);
border:1px solid rgba(240,132,42,.4);position:relative;margin-top:2px;
}
.incl .tick::after{content:"";position:absolute;left:7px;top:5px;width:6px;height:11px;border-right:2px solid var(--amber);border-bottom:2px solid var(--amber);transform:rotate(45deg);}
.incl div strong{display:block;color:#fff;font-weight:600;font-size:15px;margin-bottom:4px;}
.incl div span{font-size:14px;color:var(--muted);line-height:1.6;}
.fit-list{list-style:none;margin-top:6px;}
.fit-list li{position:relative;padding:10px 0 10px 30px;font-size:16px;color:var(--muted);border-bottom:1px solid var(--line);max-width:760px;}
.fit-list li::before{content:"";position:absolute;left:2px;top:19px;width:12px;height:7px;border-left:2px solid var(--amber);border-bottom:2px solid var(--amber);transform:rotate(-45deg);}
.fit-list li strong{color:var(--cream-text);font-weight:600;}
/* ---------- contact page ---------- */
.contact{padding:96px 0;background:var(--navy-900);}
.contact-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:52px;align-items:start;}
.form-card{
background:linear-gradient(165deg,var(--navy-700),rgba(15,29,56,.6));
border:1px solid var(--navy-600);border-radius:20px;padding:36px 34px 38px;
}
.form-card h2{font-size:24px;font-weight:700;color:#fff;margin-bottom:8px;}
.form-card .fsub{font-size:15px;color:var(--muted);margin-bottom:28px;}
.field{margin-bottom:18px;}
.field label{display:block;font-family:'Sora';font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;}
.field label .req{color:var(--amber);}
.field input,.field select,.field textarea{
width:100%;background:var(--navy-900);border:1px solid var(--navy-600);border-radius:12px;
padding:13px 16px;color:var(--cream-text);font-family:'Inter',sans-serif;font-size:15px;
transition:border-color .25s,box-shadow .25s;
}
.field input::placeholder,.field textarea::placeholder{color:#5f6f92;}
.field input:focus,.field select:focus,.field textarea:focus{
outline:none;border-color:var(--amber);box-shadow:0 0 0 3px rgba(240,132,42,.15);
}
.field textarea{resize:vertical;min-height:120px;}
.field select{appearance:none;cursor:pointer;
background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393a1bd' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 14px center;background-size:18px;padding-right:42px;}
.field select option{background:var(--navy-800);color:var(--cream-text);}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.btn-submit{
width:100%;background:var(--amber);color:#0a1428;border:none;border-radius:100px;
padding:15px;font-family:'Inter',sans-serif;font-weight:700;font-size:15.5px;cursor:pointer;
display:inline-flex;align-items:center;justify-content:center;gap:9px;
transition:transform .2s,box-shadow .2s;margin-top:8px;
}
.btn-submit:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(240,132,42,.4);}
.form-note{font-size:13px;color:var(--muted);text-align:center;margin-top:14px;}
.err{color:#ff8f6b;font-size:13px;margin-top:6px;display:none;}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:#ff8f6b;}
.field.invalid .err{display:block;}
.info-card{
background:linear-gradient(160deg,var(--navy-700),rgba(15,29,56,.55));
border:1px solid var(--navy-600);border-radius:20px;padding:32px 30px;margin-bottom:20px;
}
.info-card h3{font-family:'Sora';font-size:18px;font-weight:700;color:#fff;margin-bottom:22px;}
.info-row{display:flex;gap:16px;align-items:flex-start;padding:16px 0;border-bottom:1px solid var(--line);}
.info-row:last-child{border-bottom:none;padding-bottom:0;}
.info-ico{
flex-shrink:0;width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;
background:rgba(240,132,42,.12);border:1px solid rgba(240,132,42,.22);font-size:18px;
}
.info-row .k{font-family:'Sora';font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:5px;}
.info-row .v,.info-row a{color:var(--cream-text);font-size:15px;text-decoration:none;line-height:1.6;}
.info-row a:hover{color:var(--amber);}
/* ---------- footer nav links ---------- */
.foot-col a.fl{display:block;}
/* ==========================================================
NEW: responsive
========================================================== */
@media(max-width:980px){
.svc-grid{grid-template-columns:repeat(2,1fr);}
.contact-grid{grid-template-columns:1fr;gap:34px;}
.about-split .split-grid{grid-template-columns:1fr;gap:44px;}
.incl-grid{grid-template-columns:1fr;}
}
@media(max-width:820px){
.story-grid{grid-template-columns:1fr;}
.case-meta{grid-template-columns:1fr;gap:22px;}
.case-body{padding:30px 26px 34px;}
.case-shot{padding:18px;}
.pkg-mini-grid{grid-template-columns:1fr;max-width:420px;}
}
@media(max-width:640px){
.svc-grid{grid-template-columns:1fr;}
.hero-photo{min-height:0;}
.hero-photo img{animation-duration:8s;}
.page-hero{padding:52px 0 46px;}
.svc,.pkg-prev,.cmp,.about-split,.story,.cases,.svc-detail,.contact{padding-top:66px;padding-bottom:66px;}
.form-row{grid-template-columns:1fr;gap:0;}
.form-card{padding:28px 22px 30px;}
.info-card{padding:26px 22px;}
.case-body h2{font-size:22px;}
}
@media (prefers-reduced-motion:reduce){
.hero-photo img,.hero-photo .hp-glow{animation:none !important;}
}
/* footer: 4 columns now that Pages is included */
.foot-grid{grid-template-columns:1.5fr .8fr 1fr 1.2fr;}
@media(max-width:980px){.foot-grid{grid-template-columns:1fr 1fr;gap:34px;}}
@media(max-width:640px){.foot-grid{grid-template-columns:1fr;}}
/* hero device image: let it fill its column with a slight bleed for presence */
.hero-photo picture{display:block;width:118%;max-width:none;}
.hero-photo .hp-glow{width:92%;height:80%;}
@media(max-width:920px){
.hero-photo picture{width:100%;max-width:560px;margin:0 auto;}
}
/* About: the auto-reply bubble sits outside the card, so keep it inside the
viewport on very narrow screens */
@media(max-width:420px){
.about-split .hero-visual{width:100%;overflow:hidden;padding-right:6px;}
.about-split .card-stack{max-width:290px;margin-left:0;}
.about-split .live-bubble{right:-6px;max-width:200px;font-size:12.5px;}
}
/* ==========================================================
FINAL PASS — refinements
========================================================== */
/* ---------- 0. text alignment: justify long-form prose only ---------- */
.pain p, .story-lead, .story-card p, .case-desc,
.svc-detail .lead, .svc-detail > .wrap > p,
.aud-row .arow-desc, .benefit-card p, .step-card p,
.svc-what-copy p, .about-split .pain p{
text-align:justify;
text-justify:inter-word;
hyphens:auto;
}
/* never justify short text */
/* Only disable hyphenation here. Setting text-align:inherit was overriding
elements that centre themselves (e.g. .pbtn), so it has been removed. */
h1,h2,h3,h4,.eyebrow,.btn,.pbtn,.svc-link,.nav-links a,.crumb,
.pfor,.pdeliver,.meta,.tier,.amt,.work-note,.form-note,.info-row .k{
hyphens:none;
}
@media(max-width:640px){
/* justification looks bad in narrow columns */
.pain p,.story-lead,.story-card p,.case-desc,.svc-detail .lead,
.svc-detail > .wrap > p,.aud-row .arow-desc,.svc-what-copy p{text-align:left;hyphens:none;}
}
/* ---------- 1. hero image: larger, never cropped ---------- */
.hero-photo{min-height:0;padding:10px 0;}
.hero-photo picture{width:100%;max-width:none;}
.hero-photo img{width:100%;height:auto;max-width:100%;}
@media(min-width:921px){
.hero-grid{grid-template-columns:1fr 1.12fr;gap:44px;}
.hero-photo picture{width:112%;margin-left:-6%;}
.hero-photo .hp-glow{width:88%;height:74%;}
}
@media(min-width:1500px){
.hero-photo picture{width:118%;}
}
@media(max-width:920px){
.hero-photo picture{width:100%;max-width:640px;margin:0 auto;}
}
/* ---------- 2. Why Choose Lucco: better contrast ---------- */
.why{background:var(--navy-900);}
.why .vcard{
background:linear-gradient(160deg,#1b3160,#16294d 60%,#132546);
border-color:#2b477e;
box-shadow:0 10px 30px rgba(0,0,0,.28);
}
.why .vcard.feature{background:linear-gradient(120deg,#1e3a70,#1b3160 55%,#16294d);border-color:#31518c;}
.why .vcard p{color:#a9b8d4;}
/* ---------- 3. service cards with transparent artwork ---------- */
.svc-media{
aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;
padding:14px 12px;border-bottom:1px solid var(--line);
background:radial-gradient(circle at 50% 40%,rgba(240,132,42,.13),transparent 62%),
linear-gradient(160deg,#132747,#0d1c35);
}
.svc-media img{
width:100%;height:100%;object-fit:contain;display:block;
filter:drop-shadow(0 14px 26px rgba(0,0,0,.5));
transition:transform .55s cubic-bezier(.2,.8,.2,1);
}
.svc-card:hover .svc-media img{transform:scale(1.04) translateY(-3px);}
/* ---------- 4. Our Work: horizontal scroller + overlay ---------- */
.work-scroll-wrap{position:relative;}
.work-scroll{
display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:6px 4px 8px;
scroll-snap-type:none;scroll-behavior:smooth;
scrollbar-width:thin;scrollbar-color:rgba(10,20,40,.28) transparent;
}
.work-scroll::-webkit-scrollbar{height:8px;}
.work-scroll::-webkit-scrollbar-track{background:rgba(10,20,40,.07);border-radius:20px;}
.work-scroll::-webkit-scrollbar-thumb{background:rgba(10,20,40,.25);border-radius:20px;}
.work-scroll::-webkit-scrollbar-thumb:hover{background:rgba(200,100,26,.55);}
.wslide{
flex:0 0 clamp(280px,72vw,660px);scroll-snap-align:center;
position:relative;border-radius:18px;overflow:hidden;
background:#fff;box-shadow:0 14px 40px rgba(10,20,40,.13);
text-decoration:none;color:inherit;display:block;
transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s;
}
.wslide:hover{transform:translateY(-4px);box-shadow:0 22px 54px rgba(10,20,40,.2);}
.wshot{aspect-ratio:2.1/1;background:#e9e4da;display:block;}
.wshot img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;}
.woverlay{
position:absolute;inset:0;display:flex;flex-direction:column;
align-items:center;justify-content:center;gap:16px;text-align:center;padding:26px;
background:rgba(8,16,32,.72);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
opacity:0;transition:opacity .35s ease;
}
.wslide:hover .woverlay,.wslide:focus-visible .woverlay,.wslide.show-ov .woverlay{opacity:1;}
.woverlay .otag{font-family:'Sora';font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--amber);}
.woverlay h3{font-family:'Sora';font-size:clamp(20px,2.6vw,27px);font-weight:800;color:#fff;letter-spacing:-.01em;}
.woverlay .obtn{
display:inline-flex;align-items:center;gap:8px;background:var(--amber);color:#0a1428;
font-family:'Sora';font-weight:700;font-size:14px;padding:12px 24px;border-radius:100px;
transition:transform .2s,box-shadow .2s;
}
.wslide:hover .obtn{transform:translateY(-2px);box-shadow:0 10px 24px rgba(240,132,42,.45);}
/* touch devices: no hover, so keep it always readable */
@media (hover:none){
.woverlay{
opacity:1;justify-content:flex-end;align-items:flex-start;text-align:left;gap:9px;
background:linear-gradient(to top,rgba(8,16,32,.93) 0%,rgba(8,16,32,.72) 34%,transparent 72%);
backdrop-filter:none;-webkit-backdrop-filter:none;padding:20px;
}
.woverlay .obtn{padding:10px 20px;font-size:13px;}
}
.scroll-hint{
display:flex;align-items:center;gap:8px;justify-content:center;
font-size:13px;color:var(--muted-ink);margin-top:4px;
}
.scroll-hint svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;}
.wnav{display:flex;gap:10px;justify-content:flex-end;margin-bottom:16px;}
.wnav button{
width:42px;height:42px;border-radius:50%;border:1px solid rgba(10,20,40,.18);
background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;
transition:background .2s,border-color .2s,transform .2s;
}
.wnav button:hover{background:var(--amber);border-color:var(--amber);transform:translateY(-2px);}
.wnav svg{width:18px;height:18px;stroke:#0a1428;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}
@media(max-width:820px){.wnav{display:none;}}
/* ---------- 5. Who We Serve: editorial rows ---------- */
.aud-rows{border-top:1px solid var(--line);}
.aud-row{
position:relative;display:grid;grid-template-columns:64px 62px 1fr auto;
gap:26px;align-items:center;padding:28px 18px 28px 4px;
border-bottom:1px solid var(--line);text-decoration:none;
transition:background .35s,padding .35s;overflow:hidden;
}
.aud-row::before{
content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
background:linear-gradient(180deg,var(--amber),var(--amber-soft));
transform:scaleY(0);transform-origin:top;transition:transform .4s cubic-bezier(.65,0,.35,1);
}
.aud-row:hover{background:linear-gradient(90deg,rgba(240,132,42,.09),transparent 62%);padding-left:16px;}
.aud-row:hover::before{transform:scaleY(1);}
.arow-n{font-family:'Sora';font-size:14px;font-weight:700;color:var(--amber);letter-spacing:.1em;}
.arow-ico{
width:62px;height:62px;border-radius:16px;display:flex;align-items:center;justify-content:center;
background:linear-gradient(150deg,rgba(240,132,42,.16),rgba(240,132,42,.05));
border:1px solid rgba(240,132,42,.24);
transition:transform .38s cubic-bezier(.2,.8,.2,1),background .38s,border-color .38s;
}
.arow-ico svg{width:28px;height:28px;stroke:var(--amber);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.aud-row:hover .arow-ico{transform:scale(1.08) rotate(-5deg);background:linear-gradient(150deg,rgba(240,132,42,.3),rgba(240,132,42,.1));border-color:rgba(240,132,42,.5);}
.arow-txt h3{font-family:'Sora';font-size:20px;font-weight:600;color:#fff;margin-bottom:6px;}
.arow-desc{font-size:14.5px;color:var(--muted);line-height:1.65;max-width:560px;}
.arow-arrow{
width:38px;height:38px;border-radius:50%;border:1px solid var(--navy-600);
display:flex;align-items:center;justify-content:center;
transition:background .3s,border-color .3s,transform .3s;
}
.arow-arrow svg{width:16px;height:16px;stroke:var(--muted);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s;}
.aud-row:hover .arow-arrow{background:var(--amber);border-color:var(--amber);transform:translateX(4px);}
.aud-row:hover .arow-arrow svg{stroke:#0a1428;}
@media(max-width:760px){
.aud-row{grid-template-columns:46px 1fr;gap:14px 16px;padding:22px 6px;align-items:start;}
.arow-ico{width:46px;height:46px;border-radius:13px;}
.arow-ico svg{width:22px;height:22px;}
.arow-n{grid-column:1/-1;font-size:12px;margin-bottom:-6px;}
.arow-arrow{display:none;}
.arow-txt h3{font-size:17.5px;}
}
/* ---------- 6. Services dropdown ---------- */
.has-drop{position:relative;}
.drop-toggle{display:inline-flex;align-items:center;gap:6px;}
.drop-toggle .chev{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s;}
.has-drop.open .drop-toggle .chev,.has-drop:hover .drop-toggle .chev{transform:rotate(180deg);}
.drop{
position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);
min-width:262px;padding:10px;margin-top:14px;border-radius:16px;
background:rgba(16,32,60,.98);border:1px solid var(--navy-600);
box-shadow:0 22px 50px rgba(0,0,0,.5);
opacity:0;visibility:hidden;pointer-events:none;
transition:opacity .26s,transform .26s,visibility .26s;z-index:60;
}
/* invisible bridge so the menu doesn't close while moving the cursor to it */
.has-drop::after{content:"";position:absolute;top:100%;left:0;right:0;height:18px;}
.drop a{
display:block;padding:10px 14px;border-radius:10px;font-size:14px;color:var(--cream-text);
text-decoration:none;transition:background .2s,color .2s,padding-left .2s;
}
.drop a:hover{background:rgba(240,132,42,.14);color:var(--amber);padding-left:19px;}
.drop .drop-all{border-bottom:1px solid var(--line);margin-bottom:6px;padding-bottom:12px;border-radius:10px 10px 0 0;font-weight:600;}
@media(hover:hover){
.has-drop:hover .drop,.has-drop:focus-within .drop{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);}
}
.has-drop.open .drop{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);}
@media(max-width:640px){
.has-drop{width:100%;text-align:center;}
.drop{
position:static;transform:none;min-width:0;width:100%;margin:10px 0 0;
background:rgba(10,20,40,.6);box-shadow:none;
max-height:0;overflow:hidden;padding:0 10px;opacity:1;visibility:visible;pointer-events:auto;
transition:max-height .34s ease,padding .34s ease;
}
.has-drop.open .drop{max-height:420px;padding:10px;transform:none;}
.drop a{text-align:left;}
.nav-links.open{max-height:80vh;overflow-y:auto;}
}
/* ---------- 7. pricing table on mobile ---------- */
.cmp-scroll{position:relative;}
.cmp-table th:first-child,.cmp-table td:first-child{
position:sticky;left:0;z-index:2;background:var(--navy-800);
}
.cmp-table thead th:first-child{background:var(--navy-700);z-index:3;}
.swipe-hint{
display:none;align-items:center;justify-content:center;gap:8px;
font-size:13px;color:var(--muted);margin-bottom:12px;
}
.swipe-hint svg{width:17px;height:17px;stroke:var(--amber);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
@media(max-width:820px){
.swipe-hint{display:flex;}
table.cmp-table{min-width:560px;}
.cmp-table th,.cmp-table td{padding:13px 14px;font-size:13.5px;}
.cmp-table td:first-child,.cmp-table th:first-child{
min-width:150px;box-shadow:6px 0 12px -6px rgba(0,0,0,.5);
}
}
@media(max-width:420px){
.cmp-table td:first-child,.cmp-table th:first-child{min-width:132px;font-size:13px;}
}
/* ---------- 8. portfolio alternating rows ---------- */
.case{background:transparent;box-shadow:none;border-radius:0;margin-bottom:86px;}
.case:last-child{margin-bottom:0;}
.case-split{display:grid;grid-template-columns:1.08fr .92fr;gap:54px;align-items:center;}
.case.rev .case-split{direction:rtl;}
.case.rev .case-split > *{direction:ltr;}
.case-shot{
background:#fff;padding:16px;border-radius:18px;
box-shadow:0 18px 46px rgba(10,20,40,.16);
}
.case-shot img{width:100%;height:auto;display:block;border-radius:10px;max-height:none;object-fit:contain;}
.case-body{padding:0;}
.case-body h2{margin-bottom:10px;}
.case-meta{grid-template-columns:1fr;border-top:1px solid rgba(10,20,40,.12);padding-top:22px;}
@media(max-width:900px){
.case-split{grid-template-columns:1fr;gap:28px;}
.case.rev .case-split{direction:ltr;}
.case{margin-bottom:60px;}
}
/* ---------- 9. contact: icons, map, alignment ---------- */
.contact-grid{align-items:stretch;}
.contact-col{display:flex;flex-direction:column;gap:20px;}
.info-card{margin-bottom:0;}
.info-ico{font-size:0;}
.info-ico svg{width:19px;height:19px;stroke:var(--amber);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.map-card{
border:1px solid var(--navy-600);border-radius:20px;overflow:hidden;
background:var(--navy-700);flex:1;min-height:260px;display:flex;
}
.map-card iframe{width:100%;height:100%;min-height:260px;border:0;display:block;filter:grayscale(.22) contrast(1.04);}
@media(max-width:980px){.map-card{min-height:240px;}}
/* ---------- 10. service pages ---------- */
/* "What it is" — image + copy */
.svc-what{padding:90px 0;}
.svc-what .split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.svc-what.flip .split{direction:rtl;}
.svc-what.flip .split > *{direction:ltr;}
.svc-what-art{
border-radius:20px;padding:30px;display:flex;align-items:center;justify-content:center;
background:radial-gradient(circle at 50% 40%,rgba(240,132,42,.16),transparent 64%),
linear-gradient(160deg,#15294c,#0c1b33);
border:1px solid var(--navy-600);box-shadow:0 20px 48px rgba(0,0,0,.34);
}
.svc-what-art img{width:100%;height:auto;display:block;filter:drop-shadow(0 16px 30px rgba(0,0,0,.5));}
.svc-what-copy h2{margin:0 0 20px;}
.svc-what-copy p{margin-bottom:0;}
/* "Who it is for" — audience cards */
.svc-who{padding:90px 0;background:var(--paper);color:var(--ink);}
.svc-who h2{font-size:clamp(24px,3.2vw,34px);font-weight:800;color:var(--ink);letter-spacing:-.02em;margin-bottom:14px;}
.svc-who .lead-sub{font-size:16px;color:var(--muted-ink);margin-bottom:42px;max-width:640px;}
.who-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.who-card{
background:#fff;border-radius:18px;padding:30px 26px;position:relative;overflow:hidden;
box-shadow:0 10px 30px rgba(10,20,40,.08);transition:transform .3s,box-shadow .3s;
}
.who-card:hover{transform:translateY(-5px);box-shadow:0 20px 44px rgba(10,20,40,.14);}
.who-card .badge{
display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
border-radius:13px;background:rgba(200,100,26,.1);border:1px solid rgba(200,100,26,.22);margin-bottom:18px;
}
.who-card .badge svg{width:21px;height:21px;stroke:#c8641a;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.who-card h3{font-family:'Sora';font-size:17.5px;font-weight:700;color:var(--ink);margin-bottom:10px;line-height:1.35;}
.who-card p{font-size:14.5px;color:#3a445c;line-height:1.7;}
/* Benefits — full width */
.svc-benefits{padding:92px 0;background:var(--navy-800);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.svc-benefits h2{text-align:center;font-size:clamp(24px,3.2vw,34px);font-weight:800;color:#fff;letter-spacing:-.02em;margin-bottom:16px;}
.svc-benefits .bsub{text-align:center;color:var(--muted);font-size:16.5px;max-width:760px;margin:0 auto 48px;line-height:1.8;}
.benefit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.benefit-card{
padding:30px 26px;border-radius:18px;text-align:center;
background:linear-gradient(165deg,var(--navy-700),rgba(15,29,56,.55));
border:1px solid var(--navy-600);transition:transform .3s,border-color .3s,box-shadow .3s;
}
.benefit-card:hover{transform:translateY(-5px);border-color:rgba(240,132,42,.5);box-shadow:0 18px 40px rgba(0,0,0,.35);}
.benefit-card .bico{
width:52px;height:52px;margin:0 auto 18px;border-radius:15px;display:flex;align-items:center;justify-content:center;
background:rgba(240,132,42,.13);border:1px solid rgba(240,132,42,.26);
}
.benefit-card .bico svg{width:24px;height:24px;stroke:var(--amber);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.benefit-card h3{font-family:'Sora';font-size:17px;font-weight:600;color:#fff;margin-bottom:10px;}
.benefit-card p{font-size:14.5px;color:var(--muted);line-height:1.7;text-align:left;}
/* How we approach it — full width steps */
.svc-steps{padding:92px 0;background:var(--navy-900);}
.svc-steps h2{text-align:center;font-size:clamp(24px,3.2vw,34px);font-weight:800;color:#fff;letter-spacing:-.02em;margin-bottom:16px;}
.svc-steps .ssub{text-align:center;color:var(--muted);font-size:16.5px;max-width:740px;margin:0 auto 52px;line-height:1.8;}
.step-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;position:relative;}
.step-grid::before{
content:"";position:absolute;top:31px;left:11%;right:11%;height:2px;
background:linear-gradient(90deg,rgba(240,132,42,.5),rgba(240,132,42,.18));z-index:0;
}
.step-card{position:relative;z-index:1;text-align:center;}
.step-card .snum{
width:62px;height:62px;margin:0 auto 20px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
font-family:'Sora';font-size:20px;font-weight:800;color:#0a1428;
background:linear-gradient(150deg,var(--amber),var(--amber-soft));
box-shadow:0 10px 26px rgba(240,132,42,.34);border:4px solid var(--navy-900);
}
.step-card h3{font-family:'Sora';font-size:16.5px;font-weight:600;color:#fff;margin-bottom:10px;}
.step-card p{font-size:14px;color:var(--muted);line-height:1.7;text-align:left;}
@media(max-width:980px){
.who-grid,.benefit-grid{grid-template-columns:repeat(2,1fr);}
.step-grid{grid-template-columns:repeat(2,1fr);gap:32px 20px;}
.step-grid::before{display:none;}
}
@media(max-width:760px){
.svc-what .split{grid-template-columns:1fr;gap:34px;}
.svc-what.flip .split{direction:ltr;}
.who-grid,.benefit-grid{grid-template-columns:1fr;}
.step-grid{grid-template-columns:1fr;gap:28px;}
.svc-what,.svc-who,.svc-benefits,.svc-steps{padding:64px 0;}
.svc-what-art{padding:20px;}
.benefit-card p,.step-card p{text-align:left;}
}
/* per-service accent variations (still clearly Lucco) */
.v-web .svc-what-art{background:radial-gradient(circle at 50% 40%,rgba(240,132,42,.17),transparent 64%),linear-gradient(160deg,#15294c,#0c1b33);}
.v-land .svc-what{background:var(--navy-800);}
.v-land .svc-what-art{background:radial-gradient(circle at 60% 35%,rgba(249,169,90,.18),transparent 62%),linear-gradient(150deg,#182f57,#0d1d38);}
.v-land .svc-benefits{background:var(--navy-900);}
.v-land .svc-steps{background:var(--navy-800);}
.v-seo .svc-what-art{background:radial-gradient(circle at 40% 45%,rgba(94,224,138,.10),transparent 60%),linear-gradient(160deg,#12294a,#0b1a32);}
.v-seo .svc-benefits{background:var(--navy-900);border-bottom:none;}
.v-seo .svc-steps{background:var(--navy-800);}
.v-ecom .svc-what{background:var(--navy-800);}
.v-ecom .svc-what-art{background:radial-gradient(circle at 50% 50%,rgba(240,132,42,.15),transparent 66%),linear-gradient(140deg,#16294d,#0c1c34);}
.v-ecom .svc-steps{background:var(--navy-800);}
.v-upg .svc-what-art{background:radial-gradient(circle at 50% 40%,rgba(240,132,42,.2),transparent 62%),linear-gradient(160deg,#1a2f55,#0d1d36);}
.v-upg .svc-benefits{background:var(--navy-900);}
.v-upg .svc-steps{background:var(--navy-800);}
/* footer contact icons */
.foot-col .fline{display:flex;align-items:flex-start;gap:9px;}
.fico{width:16px;height:16px;flex-shrink:0;margin-top:3px;stroke:var(--amber);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
/* Mobile dropdown: when closed it must disappear completely.
Previously the 1px top+bottom borders still painted a 2px line under
"Services", and the 10px margin left a gap. */
@media(max-width:640px){
.drop{
border-width:0;background:transparent;margin:0;
transition:max-height .34s ease,padding .34s ease,margin .34s ease,background .34s ease;
}
.has-drop.open .drop{
border-width:1px;background:rgba(10,20,40,.55);margin:10px 0 0;
}
.has-drop:not(.open) .drop{padding:0;}
.has-drop:not(.open) .drop .drop-all{border-bottom-width:0;}
}
/* Touch devices keep :hover styles "stuck" after a tap, which made Services
look permanently open. Only apply hover styling where hover really exists. */
@media (hover:none){
.nav-links a:not(.nav-cta):hover{color:var(--cream-text);}
.nav-links a:not(.nav-cta):hover::after{transform:scaleX(0);}
.nav-links a:not(.nav-cta).active{color:var(--amber);}
.nav-links a:not(.nav-cta).active::after{transform:scaleX(1);}
.has-drop:hover .drop-toggle .chev{transform:none;}
.has-drop.open .drop-toggle .chev{transform:rotate(180deg);}
.has-drop.open .drop-toggle{color:var(--amber);}
}
/* ---------- Our Work on mobile ----------
Overlaying text on a ~130px-tall screenshot made both unreadable.
On small screens the card becomes: screenshot on top, solid caption below.
Still horizontally scrollable, but everything is legible and tappable. */
@media(max-width:760px){
.work-scroll{gap:16px;padding:6px 2px 20px;}
.wslide{flex:0 0 min(88vw,430px);}
.wshot{aspect-ratio:2.1/1;background:#eee9df;}
.wshot img{object-position:center top;}
.woverlay{
position:static;inset:auto;opacity:1;
background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none;
display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;
text-align:left;gap:9px;padding:18px 18px 20px;
}
.woverlay .otag{color:#c8641a;font-size:11px;}
.woverlay h3{color:var(--ink);font-size:19px;line-height:1.3;}
.woverlay .obtn{margin-top:3px;padding:11px 20px;font-size:13.5px;}
.scroll-hint{margin-top:2px;}
}
/* ---------- cookie consent ---------- */
.cookie-bar{
position:fixed;left:0;right:0;bottom:0;z-index:80;
background:rgba(10,20,40,.97);border-top:1px solid var(--navy-600);
box-shadow:0 -12px 40px rgba(0,0,0,.5);
transform:translateY(calc(100% + 90px));transition:transform .45s cubic-bezier(.2,.8,.2,1);
}
.cookie-bar.show{transform:translateY(0);}
.cookie-in{
max-width:var(--maxw);margin:0 auto;padding:20px 24px;
display:flex;align-items:center;gap:26px;flex-wrap:wrap;
}
.cookie-in p{font-size:14px;color:var(--muted);flex:1;min-width:260px;line-height:1.65;margin:0;}
.cookie-in p strong{color:var(--cream-text);font-weight:600;}
.cookie-btns{display:flex;gap:10px;flex-shrink:0;}
.cookie-btns button{
font-family:'Inter',sans-serif;font-weight:600;font-size:14px;padding:11px 22px;
border-radius:100px;cursor:pointer;transition:transform .2s,box-shadow .2s,border-color .2s,color .2s;
}
.ck-accept{background:var(--amber);color:#0a1428;border:none;}
.ck-accept:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(240,132,42,.4);}
.ck-decline{background:transparent;color:var(--cream-text);border:1px solid rgba(255,255,255,.22);}
.ck-decline:hover{border-color:var(--amber);color:var(--amber);}
@media(max-width:640px){
.cookie-in{padding:18px 20px;gap:16px;}
.cookie-in p{font-size:13.5px;}
.cookie-btns{width:100%;}
.cookie-btns button{flex:1;}
}
/* map placeholder shown until consent is given */
.map-hold{
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
text-align:center;padding:30px 26px;width:100%;min-height:260px;
}
.map-hold p{font-size:14px;color:var(--muted);max-width:300px;line-height:1.6;}
.map-hold button{
background:transparent;color:var(--amber);border:1px solid rgba(240,132,42,.45);
border-radius:100px;padding:11px 22px;font-family:'Inter',sans-serif;font-weight:600;
font-size:14px;cursor:pointer;transition:background .25s,color .25s;
}
.map-hold button:hover{background:var(--amber);color:#0a1428;}
/* Lift the floating buttons while the cookie bar is visible.
(A sibling selector cannot work here: the bar comes after the buttons.) */
body.ck-open .wa-float{bottom:calc(22px + var(--ckh,0px) + 68px);}
body.ck-open .totop{bottom:calc(22px + var(--ckh,0px));}
@media(max-width:640px){
body.ck-open .wa-float{bottom:calc(16px + var(--ckh,0px) + 66px);}
body.ck-open .totop{bottom:calc(16px + var(--ckh,0px));}
}
/* Inline styles on this link were fragile — any HTML edit that strips the
style attribute made it fall back to a default blue underlined link. */
.work-note a,
.work-note a:visited{
color:#c8641a;
font-weight:600;
text-decoration:none;
border-bottom:1px solid rgba(200,100,26,.35);
padding-bottom:1px;
transition:color .2s,border-color .2s;
}
.work-note a:hover,
.work-note a:focus-visible{
color:#a8500f;
border-bottom-color:#a8500f;
}
/* ---------- 404 page ---------- */
.err-hero{padding:96px 0 76px;text-align:center;}
.err-hero .wrap{max-width:760px;}
.err-hero p{margin:0 auto;}
.err-hero .btn-row{justify-content:center;}
.err-code{
font-family:'Sora';font-weight:800;line-height:1;
font-size:clamp(84px,15vw,150px);letter-spacing:-.04em;margin-bottom:10px;
background:linear-gradient(150deg,var(--amber),var(--amber-soft) 55%,rgba(240,132,42,.35));
-webkit-background-clip:text;background-clip:text;color:transparent;
}
.err-links{padding:0 0 96px;background:var(--navy-900);}
.err-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:26px;}
.err-grid a{
display:block;padding:24px 26px;border-radius:16px;text-decoration:none;
background:linear-gradient(160deg,var(--navy-700),rgba(15,29,56,.6));
border:1px solid var(--navy-600);
transition:transform .28s cubic-bezier(.2,.8,.2,1),border-color .28s,box-shadow .28s;
}
.err-grid a:hover{transform:translateY(-4px);border-color:rgba(240,132,42,.55);box-shadow:0 16px 36px rgba(0,0,0,.34);}
.err-grid strong{display:block;font-family:'Sora';font-size:17px;font-weight:600;color:#fff;margin-bottom:7px;}
.err-grid span{font-size:14px;color:var(--muted);line-height:1.65;}
@media(max-width:700px){
.err-grid{grid-template-columns:1fr;}
.err-hero{padding:64px 0 52px;}
.err-links{padding-bottom:64px;}
}
/* The audience rows are not links (no per-audience pages exist yet), so the
arrow was removed and the layout re-balanced. Re-add both if those pages
are built later. */
.aud-row{grid-template-columns:64px 62px 1fr;}
@media(max-width:760px){.aud-row{grid-template-columns:46px 1fr;}}
/* work scroller: drag affordance + disabled arrow state */
.work-scroll{cursor:grab;scroll-behavior:smooth;}
.work-scroll.dragging{cursor:grabbing;scroll-behavior:auto;}
.work-scroll.dragging .wslide{pointer-events:none;}
.wnav button.is-off{opacity:.32;pointer-events:none;}
@media(hover:none){.work-scroll{cursor:auto;}}
/* The nav gained a FAQ item and now needs ~835px, so the burger menu has to
appear earlier than 640px or the header overflows on tablets. */
@media(max-width:900px){
.nav-links{display:none;}
.burger{display:block;}
.nav-links.open{
display:flex;position:absolute;top:74px;left:0;right:0;flex-direction:column;
background:var(--navy-800);padding:24px;gap:20px;border-bottom:1px solid var(--line);
max-height:80vh;overflow-y:auto;
}
.has-drop{width:100%;text-align:center;}
.drop{
position:static;transform:none;min-width:0;width:100%;margin:0;
background:transparent;box-shadow:none;border-width:0;
max-height:0;overflow:hidden;padding:0;
opacity:1;visibility:visible;pointer-events:auto;
transition:max-height .34s ease,padding .34s ease,margin .34s ease,background .34s ease;
}
.has-drop.open .drop{
max-height:460px;padding:10px;margin:10px 0 0;
border-width:1px;background:rgba(10,20,40,.55);transform:none;
}
.has-drop:not(.open) .drop .drop-all{border-bottom-width:0;}
.drop a{text-align:left;}
}
/* Service artwork is now full-bleed screen design (already 4:3), so it should
fill the card edge to edge rather than sit inset. */
.svc-media{padding:0;background:var(--navy-900);}
.svc-media img{object-fit:cover;filter:none;}
.svc-what-art{padding:0;overflow:hidden;background:var(--navy-900);}
.svc-what-art img{border-radius:18px;filter:none;}
/* ---------- article / guide pages ---------- */
.article{padding:88px 0;background:var(--navy-900);}
.article .wrap{max-width:840px;}
.article h2{font-size:clamp(24px,3.1vw,33px);font-weight:800;color:#fff;letter-spacing:-.02em;margin:52px 0 18px;}
.article h2:first-child{margin-top:0;}
.article h3{font-family:'Sora';font-size:19px;font-weight:600;color:#fff;margin:32px 0 12px;}
.article p{font-size:16.5px;color:var(--muted);line-height:1.85;margin-bottom:18px;text-align:justify;hyphens:auto;}
.article p.lead{font-size:18.5px;color:var(--cream-text);}
.article ul{list-style:none;margin:0 0 22px;}
.article ul li{position:relative;padding:9px 0 9px 28px;font-size:16px;color:var(--muted);line-height:1.7;}
.article ul li::before{content:"";position:absolute;left:2px;top:18px;width:11px;height:6px;border-left:2px solid var(--amber);border-bottom:2px solid var(--amber);transform:rotate(-45deg);}
.article ul li strong{color:var(--cream-text);font-weight:600;}
.article .callout{
border-left:3px solid var(--amber);padding:20px 0 20px 24px;margin:30px 0;
background:linear-gradient(90deg,rgba(240,132,42,.07),transparent 70%);
}
.article .callout p{margin:0;color:var(--cream-text);font-size:17px;text-align:left;}
.article .toc{
background:linear-gradient(160deg,var(--navy-700),rgba(15,29,56,.6));
border:1px solid var(--navy-600);border-radius:16px;padding:24px 26px;margin-bottom:44px;
}
.article .toc h4{font-family:'Sora';font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);margin-bottom:14px;}
.article .toc a{display:block;color:var(--cream-text);text-decoration:none;font-size:15px;padding:7px 0;border-bottom:1px solid var(--line);transition:color .2s,padding-left .2s;}
.article .toc a:last-child{border-bottom:none;}
.article .toc a:hover{color:var(--amber);padding-left:6px;}
.inline-cta{
margin:44px 0 0;padding:30px 32px;border-radius:18px;text-align:center;
background:linear-gradient(150deg,var(--navy-700),var(--navy-800));border:1px solid var(--navy-600);
}
.inline-cta h3{font-family:'Sora';font-size:20px;font-weight:700;color:#fff;margin-bottom:10px;}
.inline-cta p{font-size:15.5px;color:var(--muted);margin-bottom:20px;text-align:center;}
@media(max-width:640px){
.article{padding:60px 0;}
.article p{text-align:left;hyphens:none;}
.inline-cta{padding:24px 20px;}
}
/* audience page: stat band */
.aud-band{padding:60px 0;background:var(--navy-800);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.aud-band .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.aud-band .ab{text-align:center;}
.aud-band .ab .abi{width:48px;height:48px;margin:0 auto 14px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:rgba(240,132,42,.12);border:1px solid rgba(240,132,42,.24);}
.aud-band .ab .abi svg{width:22px;height:22px;stroke:var(--amber);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.aud-band .ab h3{font-family:'Sora';font-size:16px;font-weight:600;color:#fff;margin-bottom:8px;}
.aud-band .ab p{font-size:14px;color:var(--muted);line-height:1.65;}
@media(max-width:860px){.aud-band .wrap{grid-template-columns:repeat(2,1fr);gap:30px 20px;}}
@media(max-width:520px){.aud-band .wrap{grid-template-columns:1fr;}}
/* ---------- page blueprint (used where we have no industry case study yet) ---------- */
.blueprint{padding:96px 0;background:var(--paper);color:var(--ink);}
.blueprint .eyebrow{color:#c8641a;}
.blueprint .eyebrow::before{background:#c8641a;}
.blueprint h2{font-size:clamp(26px,3.4vw,38px);font-weight:800;color:var(--ink);letter-spacing:-.02em;margin-bottom:16px;}
.blueprint .bp-sub{font-size:16.5px;color:var(--muted-ink);max-width:680px;margin-bottom:44px;line-height:1.75;}
.bp-stack{max-width:900px;border-radius:18px;overflow:hidden;box-shadow:0 14px 40px rgba(10,20,40,.1);}
.bp-row{
display:grid;grid-template-columns:74px 1fr;gap:22px;align-items:flex-start;
background:#fff;padding:24px 28px;border-bottom:1px solid rgba(10,20,40,.08);
transition:background .25s;
}
.bp-row:last-child{border-bottom:none;}
.bp-row:hover{background:#fdfaf5;}
.bp-n{
font-family:'Sora';font-size:12px;font-weight:700;letter-spacing:.1em;color:#c8641a;
background:rgba(200,100,26,.09);border:1px solid rgba(200,100,26,.2);
border-radius:9px;padding:8px 0;text-align:center;
}
.bp-row h3{font-family:'Sora';font-size:17px;font-weight:700;color:var(--ink);margin-bottom:7px;}
.bp-row p{font-size:14.5px;color:#3a445c;line-height:1.7;}
.bp-note{
margin-top:34px;max-width:900px;font-size:15px;color:var(--muted-ink);line-height:1.75;
border-left:3px solid #c8641a;padding:6px 0 6px 20px;
}
.bp-note a{color:#c8641a;font-weight:600;text-decoration:none;}
.bp-note a:hover{text-decoration:underline;}
@media(max-width:640px){
.blueprint{padding:64px 0;}
.bp-row{grid-template-columns:1fr;gap:10px;padding:20px 20px;}
.bp-n{width:54px;}
}
/* Who We Serve rows link to the audience pages, so the arrow is back. */
.aud-row{grid-template-columns:64px 62px 1fr auto;}
@media(max-width:760px){.aud-row{grid-template-columns:46px 1fr;}}
/* Footer now has 5 columns (Who We Serve added) */
.foot-grid{grid-template-columns:1.15fr .7fr .95fr 1fr 1.4fr;gap:30px;}
@media(max-width:1100px){.foot-grid{grid-template-columns:1fr 1fr 1fr;gap:34px;}}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr 1fr;gap:30px;}}
@media(max-width:520px){.foot-grid{grid-template-columns:1fr;gap:28px;}}
/* ---------- pricing: bonus items + care note ---------- */
.plist li.gift{color:var(--amber);font-weight:500;}
.plist li.gift::before{border-color:var(--amber-soft);}
.plist li.gift .worth{color:var(--muted);font-weight:400;font-size:13px;}
.care-note{
font-size:13px;color:var(--muted);line-height:1.6;
margin:-8px 0 20px;padding:12px 14px;border-radius:10px;
background:rgba(240,132,42,.07);border:1px solid rgba(240,132,42,.18);
}
.care-note a{color:var(--amber);font-weight:600;text-decoration:none;white-space:nowrap;}
.care-note a:hover{text-decoration:underline;}
.table-note{
text-align:center;margin-top:20px;font-size:13.5px;color:var(--muted);line-height:1.7;
max-width:760px;margin-left:auto;margin-right:auto;
}
/* ---------- SVG logo ---------- */
.brand{display:inline-flex;align-items:center;}
.brand-logo{height:26px;width:auto;display:block;}
.foot-logo{height:24px;width:auto;display:block;margin-bottom:16px;}
@media(max-width:640px){.brand-logo{height:22px;}}
/* ---------- hero: incoming enquiry notification ----------
Framed as a lead captured by the website (marketing), not a chat reply. */
.hero-photo{position:relative;}
.lead-pop{
position:absolute;z-index:3;left:auto;right:-2%;bottom:-6%;width:min(280px,72%);
background:rgba(255,255,255,.97);border-radius:14px;padding:15px 17px 14px;
box-shadow:0 22px 48px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.5);
opacity:0;transform:translateY(18px) scale(.96);
animation:leadInOnce .8s ease-out 1.4s both;
}
.lp-top{display:flex;align-items:center;gap:8px;margin-bottom:9px;}
.lp-dot{width:8px;height:8px;border-radius:50%;background:#22c55e;flex-shrink:0;
box-shadow:0 0 0 3px rgba(34,197,94,.18);}
.lp-src{font-family:'Sora',sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.06em;
text-transform:uppercase;color:#5a6478;flex:1;}
.lp-time{font-family:'Sora',sans-serif;font-size:10.5px;font-weight:600;color:#c8641a;}
.lp-title{font-family:'Sora',sans-serif;font-size:15px;font-weight:700;color:#0a1428;margin-bottom:5px;}
.lp-body{font-size:13.5px;color:#3a445c;line-height:1.5;margin-bottom:9px;}
.lp-foot{font-size:11.5px;color:#868c9a;padding-top:8px;border-top:1px solid rgba(10,20,40,.09);}
@keyframes leadInOnce{0%{opacity:0;transform:translateY(18px) scale(.96)}100%{opacity:1;transform:none}}
@keyframes leadIn{
0% {opacity:0;transform:translateY(18px) scale(.96);}
7% {opacity:1;transform:translateY(0) scale(1);}
58% {opacity:1;transform:translateY(0) scale(1);}
68% {opacity:0;transform:translateY(-10px) scale(.98);}
100% {opacity:0;transform:translateY(18px) scale(.96);}
}
@media(max-width:920px){
.lead-pop{left:auto;right:0;bottom:-6%;width:min(280px,80%);}
}
@media(max-width:520px){
.lead-pop{position:relative;left:auto;right:auto;bottom:auto;width:100%;margin:18px auto 0;
animation:none;opacity:1;transform:none;}
}
@media (prefers-reduced-motion:reduce){
.lead-pop{animation:none;opacity:1;transform:none;}
}
/* ---------- About: "inside the studio" ---------- */
.studio{padding:100px 0;background:var(--navy-800);border-top:1px solid var(--line);}
.studio-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:60px;align-items:center;}
.studio-copy h2{font-size:clamp(24px,3.2vw,34px);font-weight:800;color:#fff;letter-spacing:-.02em;margin-bottom:20px;line-height:1.22;}
.studio-copy p{font-size:16.5px;color:var(--muted);line-height:1.8;margin-bottom:16px;text-align:justify;hyphens:auto;}
.studio-facts{display:flex;gap:30px;flex-wrap:wrap;margin-top:30px;padding-top:26px;border-top:1px solid var(--line);}
.studio-facts div{display:flex;flex-direction:column;}
.studio-facts strong{font-family:'Sora';font-size:22px;font-weight:800;color:var(--amber);line-height:1;}
.studio-facts span{font-size:13px;color:var(--muted);margin-top:7px;}
.studio-stack{position:relative;min-height:340px;}
.sframe{
position:absolute;margin:0;border-radius:12px;overflow:hidden;background:#fff;
box-shadow:0 26px 60px rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.09);
transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.sf-bar{display:flex;gap:5px;align-items:center;padding:7px 10px;background:#e9e4da;}
.sf-bar i{width:7px;height:7px;border-radius:50%;background:#c9c0b0;}
.sf-bar i:first-child{background:var(--amber);}
.sframe img{width:100%;height:auto;display:block;}
.sf-back{width:74%;top:0;right:0;transform:rotate(1.4deg);}
.sf-front{width:74%;bottom:0;left:0;transform:rotate(-1.6deg);}
.studio-stack:hover .sf-back{transform:rotate(2.4deg) translateY(-6px);}
.studio-stack:hover .sf-front{transform:rotate(-2.6deg) translateY(6px);}
@media(max-width:900px){
.studio-grid{grid-template-columns:1fr;gap:44px;}
.studio-stack{min-height:300px;}
}
@media(max-width:640px){
.studio{padding:66px 0;}
.studio-copy p{text-align:left;hyphens:none;}
.studio-stack{min-height:250px;}
.sf-back,.sf-front{width:80%;}
.studio-facts{gap:22px;}
}
@media (prefers-reduced-motion:reduce){.sframe{transition:none;}}
/* FAQ group headings */
.faq-group{
font-family:'Sora',sans-serif;font-size:12px;font-weight:700;letter-spacing:.16em;
text-transform:uppercase;color:#c8641a;margin:38px 0 6px;padding-top:26px;
border-top:1px solid rgba(10,20,40,.12);
}
.faq-list > .faq-group:first-child{margin-top:0;padding-top:0;border-top:none;}
/* dark-section FAQ (service pages) */
.v-land .faq-group,.svc-detail .faq-group{color:var(--amber);border-top-color:var(--line);}
/* ---------- how we work ---------- */
.process{padding:100px 0;background:var(--paper);color:var(--ink);}
.proc-head{max-width:660px;margin-bottom:52px;}
.proc-head .eyebrow{color:#c8641a;}
.proc-head .eyebrow::before{background:#c8641a;}
.proc-head h2{font-size:clamp(28px,3.8vw,44px);font-weight:800;color:var(--ink);letter-spacing:-.02em;margin-bottom:16px;}
.proc-head p{font-size:16.5px;color:var(--muted-ink);line-height:1.75;}
.proc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.proc-step{
background:var(--paper-card);border-radius:18px;padding:30px 28px;position:relative;
box-shadow:0 10px 30px rgba(10,20,40,.07);transition:transform .3s,box-shadow .3s;
}
.proc-step:hover{transform:translateY(-5px);box-shadow:0 20px 44px rgba(10,20,40,.13);}
.ps-n{font-family:'Sora';font-size:13px;font-weight:800;letter-spacing:.1em;color:#c8641a;margin-bottom:14px;}
.proc-step h3{font-family:'Sora';font-size:18px;font-weight:700;color:var(--ink);margin-bottom:10px;}
.proc-step p{font-size:14.5px;color:#3a445c;line-height:1.72;}
@media(max-width:900px){.proc-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.proc-grid{grid-template-columns:1fr;}.process{padding:66px 0;}}
/* ---------- honest comparison ---------- */
.vs{padding:100px 0;background:var(--navy-900);border-top:1px solid var(--line);}
.vs-head{text-align:center;max-width:680px;margin:0 auto 46px;}
.vs-head h2{font-size:clamp(28px,3.8vw,42px);font-weight:800;color:#fff;letter-spacing:-.02em;margin-bottom:14px;}
.vs-head p{font-size:16.5px;color:var(--muted);}
.vs-scroll{overflow-x:auto;border-radius:16px;border:1px solid var(--navy-600);-webkit-overflow-scrolling:touch;}
table.vs-table{width:100%;border-collapse:collapse;min-width:720px;background:var(--navy-800);}
.vs-table th,.vs-table td{padding:17px 20px;text-align:left;border-bottom:1px solid var(--line);font-size:14.5px;vertical-align:top;}
.vs-table thead th{font-family:'Sora';font-size:13.5px;font-weight:700;color:#fff;background:var(--navy-700);}
.vs-table thead th.pop{color:var(--amber);}
.vs-table td:first-child{color:var(--cream-text);font-weight:500;width:26%;}
.vs-table .bad{color:var(--muted);}
.vs-table .good{color:var(--cream-text);background:rgba(240,132,42,.06);}
.vs-table tbody tr:hover .good{background:rgba(240,132,42,.11);}
.vs-note{text-align:center;margin-top:26px;font-size:15px;color:var(--amber);font-family:'Sora';font-weight:600;}
@media(max-width:820px){
.vs{padding:66px 0;}
.vs-table th,.vs-table td{padding:14px 15px;font-size:13.5px;}
.vs-table td:first-child{position:sticky;left:0;background:var(--navy-800);z-index:2;min-width:150px;box-shadow:6px 0 12px -6px rgba(0,0,0,.5);}
.vs-table thead th:first-child{background:var(--navy-700);z-index:3;}
}
/* ---------- FAQ filter chips ---------- */
.faq-filter{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:30px;}
.fchip{
font-family:'Sora',sans-serif;font-size:13px;font-weight:600;cursor:pointer;
padding:9px 17px;border-radius:100px;background:transparent;
border:1px solid rgba(10,20,40,.16);color:var(--muted-ink);
transition:background .2s,color .2s,border-color .2s;
}
.fchip:hover{border-color:#c8641a;color:#c8641a;}
.fchip.is-on{background:#c8641a;border-color:#c8641a;color:#fff;}
.faq-item.is-hidden,.faq-group.is-hidden{display:none;}
@media(max-width:640px){.fchip{font-size:12.5px;padding:8px 14px;}}
/* ---------- mobile sticky CTA ---------- */
.m-cta{display:none;}
@media(max-width:760px){
.m-cta{
display:flex;position:fixed;left:0;right:0;bottom:0;z-index:70;gap:10px;
padding:10px 14px calc(10px + env(safe-area-inset-bottom));
background:rgba(10,20,40,.97);border-top:1px solid var(--navy-600);
box-shadow:0 -8px 26px rgba(0,0,0,.4);
transform:translateY(110%);transition:transform .35s cubic-bezier(.2,.8,.2,1);
}
.m-cta.show{transform:translateY(0);}
.m-cta a{
flex:1;text-align:center;padding:13px 10px;border-radius:100px;text-decoration:none;
font-family:'Sora',sans-serif;font-weight:700;font-size:14px;
}
.m-cta .mc-wa{background:var(--amber);color:#0a1428;}
.m-cta .mc-alt{background:transparent;color:var(--cream-text);border:1px solid rgba(255,255,255,.22);}
/* keep floating buttons and cookie bar clear of it */
body.mcta-on .wa-float{bottom:calc(84px + env(safe-area-inset-bottom));}
body.mcta-on .totop{bottom:calc(84px + env(safe-area-inset-bottom));}
body.mcta-on.ck-open .wa-float,body.mcta-on.ck-open .totop{bottom:calc(16px + var(--ckh,0px));}
body.mcta-on .cookie-bar{bottom:calc(62px + env(safe-area-inset-bottom));}
}
/* ---------- testimonials (ready for real reviews) ---------- */
.revs{padding:100px 0;background:var(--paper);color:var(--ink);}
.revs-head{text-align:center;max-width:640px;margin:0 auto 46px;}
.revs-head .eyebrow{color:#c8641a;justify-content:center;display:flex;}
.revs-head h2{font-size:clamp(28px,3.6vw,42px);font-weight:800;color:var(--ink);letter-spacing:-.02em;margin-bottom:14px;}
.revs-head p{font-size:16.5px;color:var(--muted-ink);}
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.rev-card{background:var(--paper-card);border-radius:18px;padding:28px 26px;box-shadow:0 10px 30px rgba(10,20,40,.08);display:flex;flex-direction:column;}
.rev-stars{color:#f0842a;font-size:15px;letter-spacing:2px;margin-bottom:14px;}
.rev-card p{font-size:15px;color:#3a445c;line-height:1.75;flex:1;margin-bottom:20px;}
.rev-who{display:flex;align-items:center;gap:12px;padding-top:16px;border-top:1px solid rgba(10,20,40,.1);}
.rev-ini{width:40px;height:40px;border-radius:50%;background:rgba(200,100,26,.12);color:#c8641a;
display:flex;align-items:center;justify-content:center;font-family:'Sora';font-weight:700;font-size:15px;flex-shrink:0;}
.rev-who strong{display:block;font-size:14.5px;color:var(--ink);font-weight:600;}
.rev-who span{font-size:13px;color:var(--muted-ink);}
@media(max-width:900px){.rev-grid{grid-template-columns:1fr;}.revs{padding:66px 0;}}
/* ---------- client logo wall ---------- */
.logos{padding:70px 0;background:var(--navy-800);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.logos p.lead-line{text-align:center;font-family:'Sora';font-size:12.5px;font-weight:600;letter-spacing:.16em;
text-transform:uppercase;color:var(--muted);margin-bottom:34px;}
.logo-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:44px;}
.logo-row img{height:34px;width:auto;opacity:.62;filter:grayscale(1) brightness(1.7);transition:opacity .25s,filter .25s;}
.logo-row img:hover{opacity:1;filter:grayscale(0) brightness(1);}
@media(max-width:640px){.logo-row{gap:28px;}.logo-row img{height:26px;}}
/* ---------- guarantees ---------- */
.guar{padding:100px 0;background:var(--navy-800);border-top:1px solid var(--line);}
.guar-head{text-align:center;max-width:680px;margin:0 auto 46px;}
.guar-head h2{font-size:clamp(28px,3.8vw,42px);font-weight:800;color:#fff;letter-spacing:-.02em;margin-bottom:14px;}
.guar-head p{font-size:16.5px;color:var(--muted);line-height:1.75;}
.guar-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;}
.guar-card{
padding:28px 22px;border-radius:18px;position:relative;overflow:hidden;
background:linear-gradient(165deg,var(--navy-700),rgba(15,29,56,.6));
border:1px solid var(--navy-600);transition:transform .3s,border-color .3s,box-shadow .3s;
}
.guar-card::after{
content:"";position:absolute;left:0;right:0;top:0;height:3px;
background:linear-gradient(90deg,var(--amber),var(--amber-soft));
transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.65,0,.35,1);
}
.guar-card:hover{transform:translateY(-6px);border-color:rgba(240,132,42,.5);box-shadow:0 18px 42px rgba(0,0,0,.36);}
.guar-card:hover::after{transform:scaleX(1);}
.g-n{font-family:'Sora';font-size:12.5px;font-weight:800;letter-spacing:.12em;color:var(--amber);margin-bottom:14px;}
.guar-card h3{font-family:'Sora';font-size:16.5px;font-weight:700;color:#fff;margin-bottom:10px;line-height:1.35;}
.guar-card p{font-size:14px;color:var(--muted);line-height:1.7;}
.guar-note{text-align:center;margin-top:30px;font-family:'Sora';font-size:15px;font-weight:600;color:var(--amber);}
@media(max-width:1100px){.guar-grid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:760px){.guar-grid{grid-template-columns:1fr;}.guar{padding:66px 0;}}
/* ---------- team ---------- */
.team{padding:100px 0;background:var(--navy-900);border-top:1px solid var(--line);}
.team-head{text-align:center;max-width:640px;margin:0 auto 48px;}
.team-head h2{font-size:clamp(26px,3.5vw,40px);font-weight:800;color:#fff;letter-spacing:-.02em;margin-bottom:14px;}
.team-head p{font-size:16.5px;color:var(--muted);line-height:1.75;}
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:960px;margin:0 auto;}
.tcard{
text-align:center;padding:34px 26px 30px;border-radius:20px;
background:linear-gradient(165deg,var(--navy-700),rgba(15,29,56,.6));
border:1px solid var(--navy-600);transition:transform .3s,border-color .3s,box-shadow .3s;
}
.tcard:hover{transform:translateY(-6px);border-color:rgba(240,132,42,.45);box-shadow:0 20px 46px rgba(0,0,0,.36);}
.tavatar{
width:104px;height:104px;margin:0 auto 20px;border-radius:50%;overflow:hidden;
display:flex;align-items:center;justify-content:center;
background:linear-gradient(150deg,rgba(240,132,42,.22),rgba(240,132,42,.06));
border:1px solid rgba(240,132,42,.32);
}
.tavatar span{font-family:'Sora';font-size:34px;font-weight:800;color:var(--amber);letter-spacing:.02em;}
.tavatar img{width:100%;height:100%;object-fit:cover;display:block;}
.tcard h3{font-family:'Sora';font-size:20px;font-weight:700;color:#fff;margin-bottom:6px;}
.trole{font-family:'Sora';font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--amber);margin-bottom:14px;}
.tbio{font-size:14.5px;color:var(--muted);line-height:1.7;}
@media(max-width:820px){.team-grid{grid-template-columns:1fr;max-width:420px;}.team{padding:66px 0;}}
/* ---------- guides index ---------- */
.guides-idx{padding:90px 0;background:var(--navy-900);}
.gcard-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;}
.gcard{
display:flex;flex-direction:column;padding:32px 30px;border-radius:18px;text-decoration:none;
background:linear-gradient(160deg,var(--navy-700),rgba(15,29,56,.6));
border:1px solid var(--navy-600);transition:transform .3s,border-color .3s,box-shadow .3s;
}
.gcard:hover{transform:translateY(-5px);border-color:rgba(240,132,42,.5);box-shadow:0 20px 44px rgba(0,0,0,.36);}
.gtag{font-family:'Sora';font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
color:var(--amber);margin-bottom:14px;}
.gcard h2{font-family:'Sora';font-size:20px;font-weight:700;color:#fff;margin-bottom:12px;line-height:1.35;letter-spacing:-.01em;}
.gcard p{font-size:15px;color:var(--muted);line-height:1.7;flex:1;margin-bottom:20px;}
.glink{font-family:'Sora';font-size:14px;font-weight:600;color:var(--amber);}
@media(max-width:780px){.gcard-grid{grid-template-columns:1fr;}.guides-idx{padding:60px 0;}}
/* brand descriptor beside the logo — kept as text so the logo file stays untouched */
.brand{gap:11px;}
.brand-sub{
font-family:'Sora',sans-serif;font-size:10.5px;font-weight:500;letter-spacing:.2em;
text-transform:uppercase;color:var(--muted);white-space:nowrap;padding-top:3px;
}
@media(max-width:420px){.brand-sub{display:none;}}
/* Every button row aligns its buttons on one baseline and keeps equal heights,
including when they wrap onto separate lines on narrow screens. */
.btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:stretch;}
.btn-row .btn{flex:0 0 auto;}
@media(max-width:420px){
.btn-row{flex-direction:column;align-items:stretch;}
.btn-row .btn{width:100%;}
}
/* Very narrow screens: tighten buttons so long labels stay on one line
and stacked buttons keep the same height. */
@media(max-width:420px){
.btn-row .btn{font-size:14px;padding:14px 18px;gap:7px;}
}
@media(max-width:360px){
.btn-row .btn{font-size:13.2px;padding:13px 14px;letter-spacing:-.01em;}
}
/* Portfolio "Visit the website": the heading margin plus the flex link's own
line box left a ~40px gap. Tighten it to a deliberate 10px. */
/* .case-meta is a grid left over from its two-column version; its 26px row-gap
plus the heading margin was creating a ~40px hole before the link. */
.case-meta{padding-top:22px;gap:0;}
.case-meta h4{margin-bottom:8px;}
.case-meta .case-link{display:flex;width:fit-content;line-height:1.25;}
/* Below 520px the enquiry card becomes a normal element. .hero-photo is a flex
row, so it was sitting beside the image and squashing it to ~160px.
Stack them instead. */
@media(max-width:520px){
.hero-photo{flex-direction:column;align-items:stretch;}
.hero-photo picture{width:100%;max-width:none;}
.hero-photo img{width:100%;}
}
/* Sit the enquiry card at the laptop's base so it doesn't cover the client's
work — the work is the proof, the card is the caption. */
@media(min-width:921px){
.lead-pop{left:auto;right:-2%;bottom:-6%;width:min(300px,58%);}
}
/* ---------- About: concept card + auto-reply bubble on mobile ----------
overflow:hidden was added to stop a 320px side-overflow, but it also
clipped the bubble's last line. Contain it by layout instead of clipping. */
@media(max-width:640px){
.about-split .hero-visual{
overflow:visible;
min-height:0;
padding:0 0 26px;
justify-content:flex-start;
}
.about-split .card-stack{
width:100%;max-width:none;margin:0 0 74px;
}
.about-split .live-bubble{
right:0;left:auto;bottom:-64px;
max-width:82%;font-size:12.5px;line-height:1.5;
}
}
@media(max-width:420px){
.about-split .live-bubble{max-width:88%;bottom:-70px;}
}
/* ---------- narrow-screen containment ----------
.m-cta, the cookie bar and the decorative glow were each forcing the page
wider than 320px viewports. Let flex children shrink and cap the glow. */
.m-cta a, .cookie-btns button{min-width:0;}
@media(max-width:420px){
.m-cta{padding:9px 10px calc(9px + env(safe-area-inset-bottom));gap:8px;}
.m-cta a{padding:12px 6px;font-size:13px;}
.cookie-in{padding:16px 14px;gap:12px;}
.cookie-btns{gap:8px;}
.cookie-btns button{padding:11px 12px;font-size:13px;}
.about-split .glow,.hero-visual .glow{max-width:88vw;left:50%;transform:translateX(-50%);}
}
@media(max-width:360px){
.m-cta a{font-size:12.4px;padding:12px 4px;letter-spacing:-.01em;}
}
/* Hero enquiry card: keep it compact on phones so it supports the device
image rather than dominating it. */
@media(max-width:520px){
.lead-pop{padding:13px 15px 12px;margin-top:14px;}
.lp-top{margin-bottom:7px;gap:6px;}
.lp-src{font-size:9.5px;letter-spacing:.05em;}
.lp-time{font-size:9.5px;}
.lp-title{font-size:14px;margin-bottom:4px;}
.lp-body{font-size:12.8px;line-height:1.45;margin-bottom:7px;}
.lp-foot{font-size:10.5px;padding-top:7px;}
}
/* On phones the sticky bar already carries a WhatsApp button, so the floating
one is duplicated and sits on top of body text. Hide it while the bar is up. */
@media(max-width:760px){
body.mcta-on .wa-float{opacity:0;visibility:hidden;pointer-events:none;}
.wa-float{transition:opacity .25s,visibility .25s,bottom .25s;}
}
/* ---------- touch targets ----------
Burger, cookie buttons and FAQ chips were 31–39px tall. Bring every tappable
control to at least 44px so they are comfortable on a phone. */
.burger{
display:none;min-width:44px;min-height:44px;align-items:center;justify-content:center;
line-height:1;padding:0;
}
@media(max-width:900px){.burger{display:flex;}}
.cookie-btns button{min-height:44px;}
.fchip{min-height:40px;display:inline-flex;align-items:center;}
.m-cta a{min-height:44px;display:inline-flex;align-items:center;justify-content:center;}
.wa-float,.totop{min-width:44px;min-height:44px;}
/* ---------- language switcher ---------- */
.lang-switch{display:inline-flex;align-items:center;gap:2px;margin-left:18px;
background:rgba(255,255,255,.06);border:1px solid var(--navy-600);border-radius:100px;padding:3px;}
.lang-switch .ls{
font-family:'Sora',sans-serif;font-size:12px;font-weight:600;letter-spacing:.02em;
color:var(--muted);text-decoration:none;padding:6px 11px;border-radius:100px;
transition:background .2s,color .2s;white-space:nowrap;
}
.lang-switch .ls:hover{color:#fff;}
.lang-switch .ls.is-on{background:var(--amber);color:#0a1428;}
@media(max-width:900px){
.lang-switch{margin-left:auto;margin-right:12px;}
}
@media(max-width:380px){
.lang-switch{margin-right:8px;padding:2px;}
.lang-switch .ls{font-size:11px;padding:5px 8px;}
}
/* Chinese needs a font stack that actually has the glyphs */
html[lang^="zh"] body{font-family:'Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',sans-serif;}
html[lang^="zh"] h1,html[lang^="zh"] h2,html[lang^="zh"] h3,html[lang^="zh"] h4,
html[lang^="zh"] .mark,html[lang^="zh"] .eyebrow{
font-family:'Sora','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',sans-serif;
letter-spacing:0;
}
html[lang^="zh"] p,html[lang^="zh"] li{text-align:left;hyphens:none;}
/* Malay labels run ~30% longer than English, so the desktop nav needs to
collapse to the burger earlier or it wraps into the logo. */
@media(max-width:1100px){
html[lang^="ms"] .nav-links{display:none;}
html[lang^="ms"] .burger{display:flex;}
html[lang^="ms"] .nav-links.open{
display:flex;position:absolute;top:74px;left:0;right:0;flex-direction:column;
background:var(--navy-800);padding:24px;gap:20px;border-bottom:1px solid var(--line);
max-height:80vh;overflow-y:auto;
}
html[lang^="ms"] .has-drop{width:100%;text-align:center;}
html[lang^="ms"] .drop{
position:static;transform:none;min-width:0;width:100%;margin:0;background:transparent;
box-shadow:none;border-width:0;max-height:0;overflow:hidden;padding:0;
opacity:1;visibility:visible;pointer-events:auto;
}
html[lang^="ms"] .has-drop.open .drop{
max-height:460px;padding:10px;margin:10px 0 0;border-width:1px;background:rgba(10,20,40,.55);
}
html[lang^="ms"] .drop a{text-align:left;}
}
/* Keep the header CTA on one line in every language */
.nav-cta{white-space:nowrap;}
/* The language switcher adds ~110px to the header. Collapse the desktop nav
a little earlier so the switcher never pushes the header past the viewport. */
@media(max-width:1080px){
.nav-links{display:none;}
.burger{display:flex;}
.nav-links.open{
display:flex;position:absolute;top:74px;left:0;right:0;flex-direction:column;
background:var(--navy-800);padding:24px;gap:20px;border-bottom:1px solid var(--line);
max-height:80vh;overflow-y:auto;
}
.has-drop{width:100%;text-align:center;}
.drop{
position:static;transform:none;min-width:0;width:100%;margin:0;background:transparent;
box-shadow:none;border-width:0;max-height:0;overflow:hidden;padding:0;
opacity:1;visibility:visible;pointer-events:auto;
}
.has-drop.open .drop{
max-height:460px;padding:10px;margin:10px 0 0;border-width:1px;background:rgba(10,20,40,.55);
}
.drop a{text-align:left;}
.lang-switch{margin-left:auto;margin-right:14px;}
}
/* ==========================================================================
HEADER REFINEMENT
A — the "Web Design" descriptor now lives only in the footer, freeing
88px (EN) / 184px (BM) of header width.
B — the language switcher is a utility control, not a call to action, so
it no longer wears the brand orange and no longer competes with the
Free Consultation button.
========================================================================== */
.lang-switch{
display:inline-flex;align-items:center;gap:0;margin-left:16px;
background:transparent;border:none;border-radius:0;padding:0;
}
.lang-switch .ls{
font-family:'Sora',sans-serif;font-size:12.5px;font-weight:500;letter-spacing:.01em;
color:var(--muted);text-decoration:none;padding:6px 9px;border-radius:6px;
transition:color .2s,background .2s;white-space:nowrap;
}
.lang-switch .ls + .ls{
border-left:1px solid var(--navy-600);border-radius:0 6px 6px 0;margin-left:1px;
}
.lang-switch .ls:hover{color:var(--cream-text);background:rgba(255,255,255,.05);}
.lang-switch .ls.is-on{
background:transparent;color:#fff;font-weight:700;
}
/* The nav CTA keeps its wording — it just stops shouting. Weight 800 next to
weight-400 nav links is what made it read as oversized. */
.nav-cta{
font-weight:700;padding:11px 20px;font-size:14.5px;letter-spacing:.005em;
}
/* One consistent gap between brand, nav, CTA and switcher in every language */
.nav .wrap{gap:0;}
.nav-links{gap:26px;}
@media(min-width:1081px){
.brand{margin-right:34px;}
.nav-cta{margin-left:26px;}
}
/* Anchor the nav to a fixed offset after the brand so the header has the
identical structure in every language: brand → nav (left-anchored) →
CTA → language switcher (right-anchored). */
@media(min-width:1081px){
.nav-links{margin-right:auto;margin-left:0;}
.nav-cta{margin-left:26px;}
.lang-switch{margin-left:18px;}
}
/* The CTA lives inside .nav-links, so let that block span the free space and
push the CTA to its right edge. Every language then shares the same four
anchor points: brand · nav start · CTA · switcher. */
@media(min-width:1081px){
.nav-links{flex:1 1 auto;margin-right:0;}
.nav-cta{margin-left:auto;}
}
/* Mobile sticky CTA — keeps WhatsApp Us + See Pricing. Equal widths, equal
padding, and the same 44px minimum touch height as every other control. */
@media(max-width:760px){
.m-cta{
display:flex;gap:10px;align-items:stretch;
padding:10px 16px calc(10px + env(safe-area-inset-bottom));
}
.m-cta a{
flex:1 1 0;min-width:0;min-height:46px;
display:inline-flex;align-items:center;justify-content:center;
padding:12px 14px;font-size:14px;font-weight:700;line-height:1.2;
border-radius:100px;text-align:center;white-space:nowrap;
}
.m-cta .mc-wa{background:var(--amber);color:#0a1428;border:1px solid transparent;}
.m-cta .mc-alt{background:transparent;color:var(--cream-text);border:1px solid rgba(255,255,255,.24);}
}
@media(max-width:400px){
.m-cta{padding-left:12px;padding-right:12px;gap:8px;}
.m-cta a{font-size:13px;padding:12px 8px;}
}
@media(max-width:340px){
.m-cta a{font-size:12.2px;padding:12px 5px;letter-spacing:-.01em;}
}
/* ---------- button box-model consistency ----------
Four sources of drift, all fixed the same way: every button variant carries
a 1px border (transparent where it isn't visible), so an outlined button is
never taller than a solid one sitting beside it. */
/* .nav-links a.nav-cta was re-asserting weight 800 with higher specificity
than the refinement above, which is why the CTA still read as shouting. */
.nav-links a.nav-cta{font-weight:700;padding:11px 20px;}
/* .pbtn.line had a border, .pbtn.solid did not — a 2px height difference
between the pricing card buttons. */
.pbtn{border:1px solid transparent;box-sizing:border-box;}
.pbtn.solid{border-color:transparent;}
/* same for the contact form submit */
.btn-submit{border:1px solid transparent;box-sizing:border-box;}
/* The narrow-screen sizing was scoped to .btn-row .btn, so a .btn outside a
row kept desktop padding on a phone. Apply it to every .btn. */
@media(max-width:420px){
.btn{font-size:14px;padding:14px 18px;gap:7px;}
}
@media(max-width:360px){
.btn{font-size:13.2px;padding:13px 14px;letter-spacing:-.01em;}
}
/* line-height:normal resolves differently for CJK glyphs, making the Chinese
submit button 3px taller than the English one. Pin it so every language
renders the same control height. */
.btn-submit,.btn,.pbtn,.nav-cta,.m-cta a,.fchip{line-height:1.2;}
/* Pinning line-height shrank the nav CTA to 39px, under the 44px touch
minimum. Give every pill control an explicit minimum height and centre
its label, so height is set by the control rather than by the glyphs. */
.nav-cta,.btn,.pbtn,.btn-submit,.m-cta a{
display:inline-flex;align-items:center;justify-content:center;
}
.nav-cta{min-height:44px;padding:0 22px;}
.pbtn{min-height:48px;padding:0 16px;}
.btn-submit{min-height:52px;padding:0 18px;width:100%;}
.btn{min-height:48px;}
@media(max-width:420px){.btn{min-height:46px;}}
/* Hero notification swap — opacity/transform only, so it stays on the
compositor and never triggers layout. */
.lead-pop [data-lp-body],
.lead-pop [data-lp-time],
.lead-pop [data-lp-foot]{
transition:opacity .3s ease, transform .3s ease;
}
.lead-pop.lp-swap [data-lp-body],
.lead-pop.lp-swap [data-lp-time],
.lead-pop.lp-swap [data-lp-foot]{
opacity:0;transform:translateY(-4px);
}
@media(prefers-reduced-motion:reduce){
.lead-pop [data-lp-body],
.lead-pop [data-lp-time],
.lead-pop [data-lp-foot]{transition:none;}
}
/* "Everything in , plus:" — makes the packages read as
cumulative. Without it people assume Flagship has no SEO because SEO is
only listed on Professional. */
.plist li.inherits{
color:var(--cream-text);border-bottom:1px dashed var(--navy-600);
padding-bottom:10px;margin-bottom:6px;list-style:none;
}
.plist li.inherits::before{content:none;}
.plist li.inherits strong{color:var(--amber);}
/* Founding-client pricing: the struck-through figure is the standard price we
will charge after the first 20 clients — it is a future price, not a past
one, which is what keeps the claim honest. */
.std-price{
display:flex;align-items:center;gap:8px;margin:-6px 0 14px;
font-size:13.5px;color:var(--muted);flex-wrap:wrap;
}
.std-price s{color:var(--muted);opacity:.7;}
.std-price span{
font-family:'Sora',sans-serif;font-size:11px;font-weight:700;letter-spacing:.08em;
text-transform:uppercase;color:var(--amber);
}
.founding-note{
max-width:760px;margin:0 auto 34px;padding:16px 22px;border-radius:14px;
background:rgba(240,132,42,.08);border:1px solid rgba(240,132,42,.28);
color:var(--cream-text);font-size:14.5px;line-height:1.7;text-align:center;
}
.founding-note strong{color:var(--amber);}
@media(max-width:640px){
.founding-note{font-size:13.5px;padding:14px 16px;text-align:left;}
}
/* ---------- renovation landing page ---------- */
.reno-hero .reno-lead{max-width:620px;}
.reno-price{
display:inline-flex;flex-direction:column;gap:4px;margin:26px 0 8px;padding:16px 24px;
border-radius:16px;background:rgba(240,132,42,.1);border:1px solid rgba(240,132,42,.3);
}
.rp-fig{font-family:'Sora',sans-serif;font-size:17px;color:var(--cream-text);}
.rp-fig strong{font-size:31px;font-weight:800;color:var(--amber);letter-spacing:-.01em;}
.rp-sub{font-size:13.5px;color:var(--muted);}
.reno-micro{font-size:13.5px;color:var(--muted);margin-top:16px;max-width:560px;line-height:1.7;}
.reno-sym{padding:90px 0;background:var(--paper);}
.reno-sym .eyebrow,.reno-what .eyebrow{color:var(--amber);}
.reno-sym h2,.reno-what h2{color:var(--navy-900);}
.reno-sym .sec-lead,.reno-what .sec-lead{color:var(--muted-ink);max-width:640px;margin-bottom:34px;}
.sym-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-bottom:28px;}
.sym{
display:flex;gap:13px;align-items:flex-start;padding:18px 20px;border-radius:14px;
background:#fff;border:1px solid rgba(10,20,40,.09);cursor:pointer;
transition:border-color .2s,box-shadow .2s;
}
.sym:hover{border-color:rgba(240,132,42,.5);box-shadow:0 8px 22px rgba(10,20,40,.07);}
.sym input{position:absolute;opacity:0;width:0;height:0;}
.sym-box{
flex:0 0 auto;width:22px;height:22px;border-radius:6px;margin-top:2px;
border:2px solid rgba(10,20,40,.22);transition:background .2s,border-color .2s;position:relative;
}
.sym input:checked + .sym-box{background:var(--amber);border-color:var(--amber);}
.sym input:checked + .sym-box::after{
content:"";position:absolute;left:6px;top:2px;width:6px;height:11px;
border:solid #0a1428;border-width:0 2.5px 2.5px 0;transform:rotate(45deg);
}
.sym input:focus-visible + .sym-box{outline:2px solid var(--amber);outline-offset:3px;}
.sym-txt{font-size:14.5px;color:var(--muted-ink);line-height:1.6;}
.sym-txt strong{display:block;color:var(--navy-900);font-family:'Sora',sans-serif;font-size:15.5px;margin-bottom:3px;}
.sym-foot{color:var(--muted-ink);font-size:15px;margin-bottom:20px;text-align:center;}
.reno-what{padding:90px 0;background:#fff;}
.keep-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;}
.keep-col{padding:30px;border-radius:18px;}
.keep-col.keep{background:rgba(16,41,77,.05);border:1px solid rgba(10,20,40,.1);}
.keep-col.rebuild{background:linear-gradient(160deg,var(--navy-800),var(--navy-700));}
.keep-col h3{font-family:'Sora',sans-serif;font-size:19px;margin-bottom:16px;}
.keep-col.keep h3{color:var(--navy-900);}
.keep-col.rebuild h3{color:var(--amber);}
.keep-col ul{list-style:none;padding:0;margin:0;}
.keep-col li{padding:9px 0 9px 26px;position:relative;font-size:15px;line-height:1.6;}
.keep-col.keep li{color:var(--muted-ink);border-bottom:1px solid rgba(10,20,40,.07);}
.keep-col.rebuild li{color:var(--cream-text);border-bottom:1px solid var(--navy-600);}
.keep-col li:last-child{border-bottom:none;}
.keep-col li::before{content:"→";position:absolute;left:0;color:var(--amber);font-weight:700;}
.reno-proof{padding:90px 0;background:var(--navy-900);text-align:center;}
.reno-proof .sec-lead{max-width:680px;margin:0 auto 28px;color:var(--muted);}
.reno-proof .eyebrow{justify-content:center;}
.reno-price-sec{padding:90px 0;background:var(--navy-800);}
.reno-price-sec .eyebrow{justify-content:center;}
.reno-price-sec h2,.reno-price-sec .sec-lead{text-align:center;}
.reno-price-sec .sec-lead{max-width:620px;margin:0 auto 32px;color:var(--muted);}
.rtable-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:760px;margin:0 auto;}
.rtable{width:100%;border-collapse:collapse;min-width:520px;}
.rtable th,.rtable td{padding:15px 18px;text-align:left;border-bottom:1px solid var(--navy-600);font-size:15px;}
.rtable th{font-family:'Sora',sans-serif;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}
.rtable td{color:var(--cream-text);}
.rtable td.hl{color:var(--amber);font-weight:700;font-family:'Sora',sans-serif;}
.rnote{max-width:760px;margin:20px auto 0;font-size:13.5px;color:var(--muted);line-height:1.75;text-align:center;}
.reno-area{margin-top:22px;font-size:13.5px;color:var(--muted);}
@media(max-width:780px){
.sym-grid,.keep-grid{grid-template-columns:1fr;}
.reno-sym,.reno-what,.reno-proof,.reno-price-sec{padding:60px 0;}
}
/* price tag on the renovation service card */
.card-tag{
display:inline-block;margin-left:8px;padding:3px 9px;border-radius:100px;
background:rgba(240,132,42,.16);border:1px solid rgba(240,132,42,.4);
font-family:'Sora',sans-serif;font-size:11px;font-weight:700;letter-spacing:.03em;
color:var(--amber);vertical-align:middle;white-space:nowrap;
}
/* ==== desktop floating enquiry-form button (companion to .wa-float) ==== */
.form-float{position:fixed;right:22px;bottom:162px;z-index:60;width:58px;height:58px;border-radius:50%;
background:var(--amber);color:var(--navy-900);display:flex;align-items:center;justify-content:center;
box-shadow:0 10px 30px rgba(240,132,42,.4);text-decoration:none;transition:transform .2s;border:1px solid transparent;}
.form-float:hover{transform:scale(1.08);}
.form-float svg{width:28px;height:28px;fill:none;stroke:var(--navy-900);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
body.ck-open .form-float{bottom:calc(160px + var(--ckh,0px));}
@media(max-width:767px){.form-float{display:none;}}
/* ==== contact form: alternative direct-submit button ==== */
.submit-alt-row{display:flex;align-items:center;gap:14px;margin-top:14px;}
.submit-alt-row .submit-or{color:var(--muted-ink);font-size:13px;flex:0 0 auto;}
.btn-submit-alt{flex:1;min-height:48px;padding:12px 18px;border-radius:10px;border:1px solid var(--navy-600);
background:transparent;color:var(--cream-text);font-family:inherit;font-weight:600;font-size:15px;line-height:1.2;cursor:pointer;transition:border-color .2s;}
.btn-submit-alt:hover{border-color:var(--amber);}
.form-note-alt{margin-top:8px;}
.submit-msg{margin-top:10px;font-size:14px;min-height:1.2em;}
.submit-msg.ok{color:#7fe0a0;}
.submit-msg.warn{color:var(--amber-soft);}
/* ==== renovation landing page: hero 2-col, proof shot, bottom form ==== */
.reno-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center;}
.reno-hero-shot,.reno-proof-shot{border-radius:14px;overflow:hidden;box-shadow:0 30px 60px rgba(0,0,0,.45);border:1px solid var(--navy-600);}
.reno-hero-shot img,.reno-proof-shot img{width:100%;height:auto;display:block;}
.reno-proof-shot{max-width:820px;margin:26px auto 0;}
.reno-form{max-width:560px;margin:30px auto 0;text-align:left;}
@media(max-width:880px){.reno-hero-grid{grid-template-columns:1fr;gap:26px;} .reno-hero-shot{max-width:540px;margin:6px auto 0;}}
/* ============================================================
RENOVATION PAGE — added blocks (append-only, 20260823a)
hero browser-frame+glow+float · before/after slider ·
speed metrics · start-in-3-steps · ownership reassurance
Reuses hpFloat/hpPulse keyframes already defined above.
============================================================ */
/* (renovation hero now reuses homepage .hero-photo + .hp-glow) */
/* --- before / after slider --- */
.ba{
position:relative;width:100%;max-width:900px;margin:0 auto;aspect-ratio:1400/600;
border-radius:14px;overflow:hidden;border:1px solid var(--navy-600);
box-shadow:0 30px 60px rgba(0,0,0,.45);--ba:50%;
touch-action:none;user-select:none;-webkit-user-select:none;cursor:ew-resize;
}
.ba-layer{position:absolute;inset:0;}
.ba-layer picture{display:block;width:100%;height:100%;}
.ba-layer img{width:100%;height:100%;object-fit:cover;display:block;}
.ba-after{clip-path:inset(0 0 0 var(--ba));}
.ba-tag{
position:absolute;top:12px;z-index:3;font-family:'Sora';font-weight:700;font-size:12px;
letter-spacing:.05em;padding:5px 12px;border-radius:999px;color:#fff;pointer-events:none;
}
.ba-tag.before{left:12px;background:rgba(10,20,40,.74);}
.ba-tag.after{right:12px;background:var(--amber);color:#1a1205;}
.ba-divider{position:absolute;top:0;bottom:0;left:var(--ba);width:3px;background:var(--amber);
transform:translateX(-1.5px);z-index:4;pointer-events:none;}
.ba-knob{
position:absolute;top:50%;left:var(--ba);width:44px;height:44px;border-radius:50%;
transform:translate(-50%,-50%);background:var(--amber);z-index:5;
box-shadow:0 4px 14px rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;
pointer-events:none;
}
.ba:focus-visible{outline:2px solid var(--amber);outline-offset:3px;}
@media (prefers-reduced-motion:reduce){.ba{scroll-behavior:auto;}}
/* --- speed metrics (inside navy proof section) --- */
.reno-metrics{display:flex;flex-wrap:wrap;gap:18px;justify-content:center;margin:34px auto 0;max-width:760px;}
.reno-metric{
flex:1 1 300px;max-width:360px;background:var(--navy-800);border:1px solid var(--navy-600);
border-radius:14px;padding:22px 24px;text-align:center;
}
.reno-metric .rm-label{font-size:13px;color:var(--muted);margin-bottom:12px;font-family:'Inter';}
.reno-metric .rm-fig{display:flex;align-items:center;justify-content:center;gap:14px;font-family:'Sora';font-weight:800;line-height:1;}
.reno-metric .rm-old{font-size:30px;color:var(--muted);opacity:.7;}
.reno-metric .rm-arrow{color:var(--amber);font-size:20px;}
.reno-metric .rm-new{font-size:44px;color:var(--amber);}
.reno-metrics-note{max-width:680px;margin:16px auto 0;font-size:12px;color:var(--muted);text-align:center;line-height:1.65;}
.reno-proof-more{margin:26px auto 0;text-align:center;font-size:14.5px;color:var(--muted);}
.reno-proof-more a{color:var(--amber);text-decoration:none;font-weight:600;}
.reno-proof-more a:hover{text-decoration:underline;}
/* --- start in 3 steps (warm light section between two dark ones) --- */
.reno-steps{padding:90px 0;background:var(--paper);}
.reno-steps .eyebrow{color:var(--amber);}
.reno-steps h2{color:var(--navy-900);}
.reno-steps .sec-lead{color:var(--muted-ink);max-width:640px;}
.rs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:34px;}
.rs-step{background:#fff;border:1px solid #e7e0d3;border-radius:14px;padding:26px 24px;}
.rs-num{
width:40px;height:40px;border-radius:50%;background:var(--amber);color:#1a1205;
font-family:'Sora';font-weight:800;font-size:18px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;
}
.rs-step h3{font-family:'Sora';font-weight:700;font-size:18px;margin:0 0 8px;color:var(--navy-900);}
.rs-step p{font-size:14.5px;line-height:1.65;color:var(--muted-ink);margin:0;}
@media (max-width:820px){.reno-steps{padding:60px 0;}.rs-grid{grid-template-columns:1fr;gap:16px;}}
/* --- ownership reassurance (inside white reno-what) --- */
.reno-own{
display:flex;gap:14px;align-items:flex-start;max-width:760px;margin:30px auto 0;
background:var(--paper);border:1px solid #e7e0d3;border-left:3px solid var(--amber);
border-radius:10px;padding:16px 20px;
}
.reno-own svg{flex:none;margin-top:2px;color:var(--amber);}
.reno-own p{margin:0;font-size:14.5px;line-height:1.65;color:var(--navy-900);}
.reno-own strong{color:var(--navy-900);font-weight:700;}
/* ============================================================
RENOVATION HERO — annotated device (variant B, 20260823c)
new-site browser frame + floating amber benefit chips
============================================================ */
.anno-stage{position:relative;display:flex;align-items:center;justify-content:center;min-height:360px;}
.anno-stage .hp-glow{
position:absolute;width:82%;height:74%;border-radius:50%;z-index:0;
background:radial-gradient(circle,rgba(240,132,42,.24),rgba(240,132,42,.06) 46%,transparent 70%);
filter:blur(48px);animation:hpPulse 7s ease-in-out 1;
}
.anno-frame{
position:relative;z-index:1;width:88%;border-radius:12px;overflow:hidden;background:#fff;
box-shadow:0 30px 60px rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.08);
}
.anno-frame .af-bar{display:flex;gap:5px;align-items:center;padding:8px 11px;background:#e9e4da;}
.anno-frame .af-bar i{width:8px;height:8px;border-radius:50%;background:#c9c0b0;flex:none;}
.anno-frame .af-bar i:first-child{background:var(--amber);}
.anno-frame img{width:100%;height:auto;display:block;}
.anno-chips{position:absolute;inset:0;z-index:4;pointer-events:none;}
.anno-chip{
position:absolute;display:inline-flex;align-items:center;gap:6px;
font-family:'Sora';font-weight:700;font-size:12.5px;color:#1a1205;background:var(--amber);
padding:8px 13px;border-radius:999px;box-shadow:0 8px 22px rgba(0,0,0,.4);white-space:nowrap;
animation:chipFloat 4.6s ease-in-out 3;
}
.anno-chip svg{flex:none;}
.anno-chip.c1{top:6%;left:-3%;animation-delay:0s;animation-duration:4.4s;}
.anno-chip.c2{top:12%;right:-3%;animation-delay:.7s;animation-duration:5.2s;}
.anno-chip.c3{bottom:16%;left:-3%;animation-delay:1.4s;animation-duration:4.8s;}
.anno-chip.c4{bottom:4%;right:3%;animation-delay:2.1s;animation-duration:5.4s;}
@keyframes chipFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@media(max-width:880px){ .anno-stage{max-width:560px;margin:6px auto 0;} }
@media(max-width:600px){
/* chips collapse into a tidy centred row under the frame — no negative offsets, no overflow */
.anno-stage{flex-direction:column;min-height:0;}
.anno-frame{width:100%;}
.anno-chips{position:static;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:14px;width:100%;}
.anno-chip{position:static !important;inset:auto !important;animation:none !important;font-size:12px;box-shadow:0 4px 12px rgba(0,0,0,.3);}
}
@media (prefers-reduced-motion:reduce){ .anno-chip,.anno-stage .hp-glow{animation:none !important;} }
/* ============================================================
Cookie banner permanently disabled (removed on request, 20260824b).
Markup is already stripped from all pages and the JS trigger is gone.
This is belt-and-suspenders: even if banner markup ever reappears
(e.g. a page regenerated later from an old template, or a cached page),
it must never render.
============================================================ */
.cookie-bar{display:none !important;}
/* renovation hero: laptop+phone device image (replaces single browser frame) */
.anno-device{position:relative;z-index:1;display:block;width:100%;}
.anno-device img{width:100%;height:auto;display:block;}
/* before/after slider when placed inside a portfolio .case-shot frame:
neutralise the .case-shot img rules so the slider layers behave correctly */
.case-shot .ba{max-width:100%;}
.case-shot .ba img{max-height:none;border-radius:0;box-shadow:none;object-fit:cover;}
/* renovation price table — stacked cards on phones (no more horizontal scroll) */
@media (max-width:560px){
.rtable-wrap{overflow-x:visible;}
.rtable{min-width:0;}
.rtable thead{display:none;}
.rtable, .rtable tbody, .rtable tr, .rtable td{display:block;width:100%;}
.rtable tr{border:1px solid var(--navy-600);border-radius:12px;margin-bottom:14px;background:var(--navy-800);overflow:hidden;}
.rtable td{display:flex;justify-content:space-between;align-items:center;gap:16px;text-align:right;
border-bottom:1px solid var(--navy-700);padding:12px 16px;font-size:15px;}
.rtable td:last-child{border-bottom:none;}
.rtable td::before{content:attr(data-label);font-family:'Sora',sans-serif;font-size:11px;letter-spacing:.08em;
text-transform:uppercase;color:var(--muted);font-weight:600;text-align:left;}
.rtable td:first-child{background:var(--navy-700);font-family:'Sora',sans-serif;font-weight:700;font-size:16px;color:var(--cream-text);}
.rtable td.hl{font-size:17px;}
}
/* floating WhatsApp — attention effect: breathing pulse ring + faint rotating glow
(pure CSS; transform/opacity are GPU-composited, no impact on load speed) */
.wa-float::before{ /* faint rotating glow halo */
content:"";position:absolute;inset:-5px;border-radius:50%;z-index:-2;pointer-events:none;
background:conic-gradient(from 0deg,rgba(37,211,102,0),rgba(37,211,102,.6),rgba(37,211,102,0) 62%);
filter:blur(6px);opacity:.65;animation:waGlow 4s linear 2;
}
.wa-float::after{ /* breathing pulse ring */
content:"";position:absolute;inset:0;border-radius:50%;z-index:-1;pointer-events:none;
border:2px solid rgba(37,211,102,.55);animation:waPulse 2s ease-out 4 forwards;
}
@keyframes waGlow{to{transform:rotate(360deg);}}
@keyframes waPulse{0%{transform:scale(1);opacity:.75;}100%{transform:scale(1.8);opacity:0;}}
@media (prefers-reduced-motion:reduce){ .wa-float::before,.wa-float::after{animation:none;opacity:0;} }
/* renovation table — tier highlight subtitle under the package name */
.rtable td:first-child{vertical-align:top;}
.rtable td .tier-note{display:block;font-family:'Inter',sans-serif;font-weight:400;font-size:12px;
line-height:1.4;color:var(--muted);margin-top:3px;text-transform:none;letter-spacing:0;}
@media (max-width:560px){
/* card header: show package name + subtitle, hide the redundant "Package" label */
.rtable td:first-child{display:block;text-align:left;background:var(--navy-700);padding:14px 16px;}
.rtable td:first-child::before{display:none;}
.rtable td:first-child strong{font-family:'Sora',sans-serif;font-weight:800;font-size:17px;color:var(--cream-text);}
.rtable td .tier-note{margin-top:4px;}
}
/* floating enquiry-form button — subtle amber glow on HOVER only (desktop; no continuous animation, so no impact on load or battery) */
.form-float{transition:transform .2s, box-shadow .3s;}
.form-float:hover{box-shadow:0 10px 30px rgba(240,132,42,.55), 0 0 24px 6px rgba(240,132,42,.6);}
/* portfolio: PageSpeed score pills (light/paper theme) */
.case-scores{display:flex;gap:12px;flex-wrap:wrap;margin:2px 0 22px;}
.cscore{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #e3ddd0;border-radius:12px;padding:10px 15px;box-shadow:0 4px 14px rgba(10,20,40,.06);}
.cscore b{font-family:'Sora',sans-serif;font-weight:800;font-size:26px;color:#c8641a;line-height:1;}
.cscore span{font-size:10.5px;line-height:1.25;color:#5a6478;text-transform:uppercase;letter-spacing:.05em;font-weight:600;}
/* portfolio sliders match the 1400x730 first-screen crop */
.case-shot .ba{aspect-ratio:1400/600;}
/* pricing: Website Revamp band (below the 3 cards) */
.revamp-band{background:var(--navy-900);padding:46px 0;border-top:1px solid var(--navy-700);}
.revamp-band .rb-inner{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;}
.revamp-band .rb-text{flex:1 1 440px;}
.rb-eyebrow{font-family:'Sora',sans-serif;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--amber);margin-bottom:8px;}
.revamp-band h2{font-family:'Sora',sans-serif;font-weight:800;font-size:clamp(21px,3vw,29px);color:var(--cream-text);margin:0 0 8px;letter-spacing:-.01em;}
.revamp-band p{color:var(--muted);font-size:15px;max-width:560px;margin:0;line-height:1.65;}
@media(max-width:640px){.revamp-band .rb-inner{flex-direction:column;align-items:flex-start;}}
/* footer social icons */
.foot-social{display:flex;gap:10px;margin-top:18px;}
.foot-social .fsoc{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:9px;background:var(--navy-700);color:var(--muted);margin:0;transition:background .2s,color .2s;}
.foot-social .fsoc:hover{background:var(--amber);color:#0a1428;}
.foot-social .fsoc svg{display:block;width:18px;height:18px;fill:currentColor;}
/* ===== HERO entrance choreography (plays once, GPU-composited, LCP-safe) ===== */
@keyframes heroRise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes heroPhotoIn{from{opacity:0;transform:translateY(24px) scale(.955)}to{opacity:1;transform:none}}
@keyframes heroGlowIn{from{opacity:0}to{opacity:1}}
.hero-copy .eyebrow{animation:heroRise .72s cubic-bezier(.2,.75,.2,1) .05s both}
@keyframes maskUp{from{transform:translateY(112%)}to{transform:translateY(0)}}
.hero-copy h1 .hl{display:block;overflow:hidden}
.hero-copy h1 .hl-in{display:block;padding-bottom:.1em;margin-bottom:-.1em;transform:translateY(112%);animation:maskUp .95s cubic-bezier(.22,.85,.2,1) both}
.hero-copy h1 .hl:nth-child(1) .hl-in{animation-delay:.16s}
.hero-copy h1 .hl:nth-child(2) .hl-in{animation-delay:.32s}
.hero-copy .hero-lead{animation:heroRise .72s cubic-bezier(.2,.75,.2,1) .34s both}
.hero-copy .hero-sub{animation:heroRise .72s cubic-bezier(.2,.75,.2,1) .45s both}
.hero-copy .btn-row{animation:heroRise .72s cubic-bezier(.2,.75,.2,1) .56s both}
.hero-photo img{animation:heroPhotoIn .85s cubic-bezier(.2,.72,.2,1) .12s both}
.hero-photo .hp-glow{animation:heroGlowIn 1s ease .34s both}
/* the annotation chips / lead-pop drift in last, then settle */
.anno-chip{animation:heroRise .7s cubic-bezier(.2,.75,.2,1) both}
.anno-chip:nth-of-type(1){animation-delay:.62s}
.anno-chip:nth-of-type(2){animation-delay:.74s}
.anno-chip:nth-of-type(3){animation-delay:.86s}
@media (prefers-reduced-motion:reduce){
.hero-copy .eyebrow,.hero-copy h1,.hero-copy .hero-lead,.hero-copy .hero-sub,.hero-copy .btn-row,
.hero-photo img,.hero-photo .hp-glow,.anno-chip,.hero-copy h1 .hl-in{animation:none!important;opacity:1!important;transform:none!important}
}
/* home work: side-by-side (no scroll), stack on mobile */
.work-scroll{grid-template-columns:1fr 1fr;}
@media(max-width:760px){.work-scroll{grid-template-columns:1fr;}}
.wnav,.scroll-hint{display:none!important;}
/* ===== CSS browser frame (replaces baked device mockup) ===== */
.browser-frame{position:relative;z-index:1;width:100%;max-width:660px;margin:0 auto;border-radius:14px;overflow:hidden;background:#0f1d38;border:1px solid rgba(255,255,255,.09);box-shadow:0 34px 70px rgba(0,0,0,.5);}
.bf-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:#16294d;border-bottom:1px solid rgba(255,255,255,.07);}
.bf-dot{width:11px;height:11px;border-radius:50%;background:#3a4a6b;flex:none;}
.bf-dot.r{background:#ff5f57;}.bf-dot.y{background:#febc2e;}.bf-dot.g{background:#28c840;}
.bf-url{margin-left:12px;flex:1;min-width:0;background:#0a1428;color:#93a1bd;font-size:12px;line-height:1.4;padding:5px 12px;border-radius:8px;font-family:'Inter',sans-serif;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bf-screen{display:block;line-height:0;background:#0a1428;}
.bf-screen img{width:100%;height:auto;display:block;}
/* entrance for the frame (was .hero-photo img) */
.hero-photo .browser-frame{animation:heroPhotoIn .85s cubic-bezier(.2,.72,.2,1) .12s both;}
@media (prefers-reduced-motion:reduce){.hero-photo .browser-frame{animation:none!important;}}
/* ===== hero showcase: badge + browser frame + phone + scores ===== */
.hero-showcase{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;}
.hs-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.04);color:var(--cream-text);border:1px solid var(--navy-600);font-family:'Sora',sans-serif;font-weight:700;font-size:12px;letter-spacing:.02em;padding:6px 14px 6px 12px;border-radius:100px;margin:0 0 14px 4px;}
.hs-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:#f0842a;flex:none;}
.hs-frames{position:relative;width:100%;}
.hs-frames .browser-frame{max-width:600px;}
.phone-frame{position:absolute;right:-10px;bottom:-26px;width:118px;border-radius:22px;overflow:hidden;border:5px solid #0f1d38;background:#0a1428;box-shadow:0 22px 44px rgba(0,0,0,.5);z-index:2;line-height:0;}
.phone-frame img{width:100%;height:auto;display:block;}
.hs-scores{display:flex;gap:10px;margin:26px 0 0 4px;}
.hs-score{display:flex;align-items:center;gap:8px;background:#0f1d38;border:1px solid var(--navy-600);border-radius:11px;padding:8px 15px;}
.hs-score b{font-family:'Sora',sans-serif;font-weight:800;font-size:21px;color:var(--amber);line-height:1;}
.hs-score span{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-weight:600;line-height:1.2;}
/* entrance */
.hs-badge{animation:heroRise .7s cubic-bezier(.2,.75,.2,1) .28s both;}
.phone-frame{animation:heroPhotoIn .8s cubic-bezier(.2,.72,.2,1) .5s both;}
.hs-scores{animation:heroRise .7s cubic-bezier(.2,.75,.2,1) .62s both;}
@media(max-width:520px){.phone-frame{width:92px;right:0;bottom:-18px;}.hs-scores{gap:8px;}.hs-score{padding:7px 12px;}.hs-score b{font-size:18px;}}
@media (prefers-reduced-motion:reduce){.hs-badge,.phone-frame,.hs-scores{animation:none!important;}}
/* ===== service cards: line icon instead of AI image ===== */
.svc-card .svc-icon{width:54px;height:54px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:rgba(240,132,42,.11);border:1px solid rgba(240,132,42,.28);margin:28px 0 2px 28px;flex:none;}
.svc-card .svc-icon svg{width:27px;height:27px;stroke:var(--amber);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
/* service page: big line icon instead of AI image */
.svc-what-art svg.svc-big{width:104px;height:104px;stroke:var(--amber);fill:none;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;}
/* ===== FIRST TIER: scroll-driven entrance (pure CSS, progressive, LCP-safe) ===== */
@media (prefers-reduced-motion:no-preference){
@supports (animation-timeline:view()){
@keyframes revealUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
.svc-card,.wcard,.wslide,.strip .stat,.case,.aud-row,.faq-q,.svc-what .split>*,.reno-proof .ba,.price-card,.cscore{
animation:revealUp linear both;animation-timeline:view();animation-range:entry 2% cover 20%;
}
}
}
/* service card hover lift (micro-interaction) */
.svc-card{transition:transform .25s ease,box-shadow .25s ease;}
.svc-card:hover{transform:translateY(-5px);box-shadow:0 22px 55px rgba(10,20,40,.28);}
.svc-card:hover .svc-icon{background:rgba(240,132,42,.18);}
.svc-card .svc-icon{transition:background .25s ease;}
/* service page: real work screenshot in browser frame (instead of icon) */
.svc-what-art .browser-frame{max-width:100%;margin:0;}
.svc-what-art{padding:20px;}
/* service page art variants: wireframe + before/after slider */
.svc-what-art .svc-wire{width:100%;height:auto;display:block;}
.svc-what-art .ba{max-width:100%;margin:0;}
/* ===== AEO proof section (real AI-citation screenshots) ===== */
.aeo-proof{background:var(--navy-900);padding:70px 0;}
.aeo-proof .wrap{max-width:1000px;}
.aeo-proof .ap-head{text-align:center;margin-bottom:36px;}
.aeo-proof .ap-lead{color:var(--muted);font-size:16px;line-height:1.7;max-width:680px;margin:14px auto 0;}
.aeo-proof .ap-lead strong{color:var(--cream-text);}
.ap-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start;}
@media(max-width:760px){.ap-grid{grid-template-columns:1fr;}}
.ap-card{background:#fff;border-radius:14px;overflow:hidden;border:1px solid var(--navy-600);box-shadow:0 20px 46px rgba(0,0,0,.4);display:flex;flex-direction:column;}
.ap-card .ap-bar{display:flex;align-items:center;gap:8px;padding:11px 15px;background:var(--navy-800);border-bottom:1px solid var(--navy-700);}
.ap-card .ap-bar b{font-family:'Sora',sans-serif;font-size:13px;color:var(--cream-text);font-weight:700;}
.ap-card .ap-bar span{font-size:11px;color:var(--muted);margin-left:auto;}
.ap-card .ap-shot{background:#fff;line-height:0;}
.ap-card .ap-shot img{width:100%;height:auto;display:block;}
.aeo-proof .ap-note{text-align:center;color:var(--muted-ink);font-size:12.5px;margin-top:22px;font-style:italic;}
.aeo-proof .ap-note{color:#93a1bd;}
/* ===== process: number -> lit node + scroll reveal (6 steps) ===== */
.proc-step .ps-n{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:rgba(240,132,42,.12);border:1.6px solid var(--amber);color:#c8641a;font-size:14px;margin-bottom:16px;letter-spacing:.02em;}
@media (prefers-reduced-motion:no-preference){
@supports (animation-timeline:view()){
.proc-step{animation:procReveal linear both;animation-timeline:view();animation-range:entry 3% cover 24%;}
@keyframes procReveal{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.proc-step .ps-n{animation:nodeLight linear both;animation-timeline:view();animation-range:entry 5% cover 22%;}
@keyframes nodeLight{from{background:rgba(240,132,42,.04);border-color:rgba(240,132,42,.3);transform:scale(.9)}to{background:rgba(240,132,42,.16);border-color:var(--amber);transform:none}}
}
}
/* process: connector line between nodes (desktop 3-col rows) */
/* portfolio -> AEO nudge */
.aeo-nudge{background:var(--navy-800);border-top:1px solid var(--navy-700);border-bottom:1px solid var(--navy-700);padding:26px 0;}
.aeo-nudge p{text-align:center;color:var(--muted);font-size:15px;line-height:1.6;margin:0;}
.aeo-nudge a{color:var(--amber);font-weight:600;text-decoration:none;}
.aeo-nudge a:hover{text-decoration:underline;}
/* last-updated freshness stamp */
.last-updated{text-align:center;color:var(--muted-ink);font-size:12.5px;padding:0 0 30px;margin:0;}
.last-updated{color:#5a6478;}
/* ===== FIX: FAQ on dark bg (was dark text on dark) ===== */
.svc-faq{background:var(--navy-900);}
.svc-faq .faq-q{color:var(--cream-text);}
.svc-faq .faq-q[aria-expanded="true"]{color:var(--amber);}
.svc-faq .faq-a-inner{color:var(--muted);}
.svc-faq .faq-item{border-bottom-color:var(--navy-700);}
/* ===== FIX: portfolio AEO nudge — centre + more prominent ===== */
.aeo-nudge{padding:34px 0;}
.aeo-nudge .wrap{display:flex;justify-content:center;}
.aeo-nudge p{text-align:center;max-width:820px;font-size:15.5px;margin:0 auto;}
.aeo-nudge p::before{content:"✦";color:var(--amber);margin-right:9px;}
.aeo-nudge a{display:inline-block;margin-top:4px;}
/* ===== process connector: flowing dashed line (pure CSS, GPU, below fold = LCP-safe) ===== */
@media(min-width:901px){
.proc-grid .proc-step:not(:nth-child(3n))::after{
content:"";position:absolute;top:49px;right:-19px;width:22px;height:2px;border-top:none;
background:repeating-linear-gradient(90deg,var(--amber) 0 5px,transparent 5px 10px);
background-size:10px 2px;opacity:.7;animation:dashFlow .9s linear infinite;
}
@keyframes dashFlow{from{background-position:0 0;}to{background-position:10px 0;}}
@media (prefers-reduced-motion:reduce){.proc-grid .proc-step::after{animation:none;}}
}
/* ===== E: primary button shine on hover ===== */
.btn-primary{position:relative;overflow:hidden;}
.btn-primary::after{content:"";position:absolute;top:0;left:-80%;width:55%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.42),transparent);transform:skewX(-20deg);pointer-events:none;}
.btn-primary:hover::after{animation:btnShine .75s ease;}
@keyframes btnShine{from{left:-80%}to{left:150%}}
@media(prefers-reduced-motion:reduce){.btn-primary:hover::after{animation:none;}}
/* ===== B: card tilt — remove transition lag during pointer move (set by JS) ===== */
.svc-card.tilting,.wcard.tilting,.pcard.tilting{transition:none;}
/* ===== testimonials (anonymous, real quotes) ===== */
.says{background:var(--navy-800);padding:72px 0;border-top:1px solid var(--navy-700);}
.says .head{text-align:center;margin-bottom:38px;}
.says-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
@media(max-width:820px){.says-grid{grid-template-columns:1fr;}}
.say-card{background:var(--navy-700);border:1px solid var(--navy-600);border-radius:16px;padding:26px 26px 24px;display:flex;flex-direction:column;}
.say-card .qm{font-family:'Sora',sans-serif;font-size:46px;font-weight:800;color:var(--amber);line-height:.5;height:22px;}
.say-card p{color:var(--cream-text);font-size:16px;line-height:1.6;margin:16px 0 18px;flex:1;}
.say-card .say-tag{color:var(--muted);font-size:12.5px;display:flex;align-items:center;gap:7px;}
.say-card .say-tag::before{content:"✔";color:var(--amber);font-size:12px;}
/* audience page: capability art (icon card instead of a client screenshot) */
.cap-art{aspect-ratio:1400/900;border-radius:18px;background:radial-gradient(circle at 50% 38%,rgba(30,53,95,.55),rgba(15,29,56,.92));border:1px solid var(--navy-600);display:flex;align-items:center;justify-content:center;}
.cap-art svg{width:96px;height:96px;stroke:var(--amber);fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;}
/* zh brand name 路客帮 */
.foot-brandname{font-family:'Sora',sans-serif;font-weight:800;font-size:17px;color:var(--cream-text);margin:10px 0 4px;letter-spacing:.01em;}
.hero-brandname{font-family:'Sora',sans-serif;font-weight:800;font-size:15px;color:var(--amber);margin-bottom:14px;letter-spacing:.02em;}
/* service grid: full-width property card (7th, spans the row) */
.svc-grid .svc-card.svc-wide{grid-column:1 / -1;flex-direction:row;align-items:center;gap:30px;background:linear-gradient(120deg,var(--navy-700),var(--navy-800));}
.svc-card.svc-wide .svc-icon{margin:0 0 0 8px;}
.svc-card.svc-wide .svc-body{padding:26px 30px 26px 0;}
.svc-card.svc-wide h3 .card-tag{margin-left:8px;}
@media(max-width:760px){.svc-grid .svc-card.svc-wide{flex-direction:column;align-items:flex-start;gap:0;}.svc-card.svc-wide .svc-icon{margin:28px 0 2px 28px;}.svc-card.svc-wide .svc-body{padding:0 28px 28px;}}
/* property page: benefits grid + who art sizing */
.svc-benefits .ben-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px;}
.svc-benefits .ben{background:var(--navy-700);border:1px solid var(--navy-600);border-radius:14px;padding:24px 24px 22px;}
.svc-benefits .ben h3{font-family:'Sora',sans-serif;font-size:16px;font-weight:700;color:var(--cream-text);margin-bottom:9px;}
.svc-benefits .ben p{color:var(--muted);font-size:14px;line-height:1.6;}
@media(max-width:820px){.svc-benefits .ben-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:520px){.svc-benefits .ben-grid{grid-template-columns:1fr;}}
.svc-who .cap-art{aspect-ratio:16/10;}
.svc-who-copy{align-self:center;}
/* SEO/AEO clarification note */
.svc-clarify{background:var(--navy-800);border-top:1px solid var(--navy-700);border-bottom:1px solid var(--navy-700);padding:20px 0;}
.svc-clarify p{max-width:820px;margin:0 auto;text-align:center;color:var(--muted);font-size:14.5px;line-height:1.6;}
.svc-clarify strong{color:var(--amber);}
/* fix: property wide card & links — no underline */
.svc-card.svc-wide,.svc-card.svc-wide:hover{text-decoration:none;}
.svc-card.svc-wide .svc-link{text-decoration:none;}
/* property who: single column (removed big icon) */
.svc-who .split{grid-template-columns:1fr;}
.svc-who-copy{max-width:760px;}
/* xiaohongshu footer icon as text */
.fsoc .fsoc-text{font-family:'Sora',sans-serif;font-weight:800;font-size:11px;letter-spacing:.02em;line-height:1;}
/* property pricing band on pricing page */
.prop-price-band{background:var(--navy-800);border-top:1px solid var(--navy-700);padding:56px 0;}
.prop-price-band .wrap{max-width:680px;text-align:center;}
.prop-price-band h2{margin:6px 0 10px;}
.prop-price-band p{color:var(--muted);margin-bottom:18px;}
.prop-price-band .pp-price{font-family:'Sora',sans-serif;font-weight:800;font-size:30px;color:var(--cream-text);}
.prop-price-band .pp-price s{color:var(--muted-ink);font-size:20px;}
.prop-price-band .pp-year{color:var(--muted);font-size:13.5px;margin-top:6px;}
.prop-price-band a.pp-link{display:inline-block;margin-top:20px;color:var(--amber);font-weight:600;text-decoration:none;}
/* pricing refresh: founding forward-pricing (no strikethrough) + slot limit */
.std-price{color:var(--muted-ink);font-size:12.5px;margin-top:2px;}
.plimit{display:inline-block;background:rgba(240,132,42,.12);border:1px solid rgba(240,132,42,.35);color:#c8641a;font-family:'Sora',sans-serif;font-weight:700;font-size:11.5px;padding:3px 10px;border-radius:100px;margin-top:8px;}
.quote-band{background:var(--navy-800);border:1px dashed var(--navy-600);border-radius:14px;padding:20px 24px;margin-top:20px;text-align:center;}
.quote-band p{color:var(--muted);font-size:14px;margin:0;}
.quote-band strong{color:var(--cream-text);}
/* property dual-model band */
.prop-dual{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:720px;margin:20px auto 0;}
@media(max-width:640px){.prop-dual{grid-template-columns:1fr;}}
.pd-card{background:var(--navy-700);border:1px solid var(--navy-600);border-radius:14px;padding:22px 22px 20px;text-align:left;}
.pd-card.reco{border-color:var(--amber);}
.pd-card .pd-tag{font-family:'Sora',sans-serif;font-weight:700;font-size:11px;color:#c8641a;letter-spacing:.04em;text-transform:uppercase;}
.pd-card h3{font-family:'Sora',sans-serif;font-size:16px;color:var(--cream-text);margin:4px 0 8px;}
.pd-card .pd-price{font-family:'Sora',sans-serif;font-weight:800;font-size:26px;color:var(--amber);}
.pd-card .pd-sub{color:var(--muted);font-size:12.5px;margin-top:6px;line-height:1.5;}
/* audience capability: single column (removed icon) */
.audience-page .case-split, section.aud-industry .case-split{grid-template-columns:1fr;}
/* pricing plain-language notes */
.plist .lite{color:var(--muted);font-size:12px;font-weight:400;}
/* about: client-work label on studio stack */
.studio-stack{position:relative;}
.studio-stack .client-label{position:absolute;top:-10px;left:8px;z-index:3;background:var(--navy-800);border:1px solid var(--navy-600);color:var(--muted);font-family:'Sora',sans-serif;font-weight:700;font-size:10.5px;letter-spacing:.04em;padding:3px 9px;border-radius:100px;}
/* results cards (replaced testimonials) */
.say-card .r-name{font-family:'Sora',sans-serif;font-weight:800;font-size:15px;color:var(--amber);margin-bottom:8px;}
.say-card .say-tag{background:rgba(240,132,42,.1);color:#c8641a;border:1px solid rgba(240,132,42,.3);display:inline-block;padding:3px 10px;border-radius:100px;font-weight:700;font-size:11.5px;margin-top:4px;}
/* hero work carousel (LCP-safe: first slide static, others fade) */
.hs-track{position:relative;aspect-ratio:1400/788;}
.hs-slide{position:absolute;inset:0;opacity:0;transition:opacity .6s ease;}
.hs-slide.active{opacity:1;}
.hs-slide img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;}
.hs-dots{display:flex;gap:8px;justify-content:flex-start;margin:18px 0 0 4px;}
.hs-dots button{width:8px;height:8px;border-radius:50%;border:none;background:var(--navy-600);cursor:pointer;padding:0;transition:background .3s,width .3s;}
.hs-dots button.active{background:var(--amber);width:20px;border-radius:4px;}
/* hero wow background + MOVING GLOW ORBS (LCP-safe: transform-only, tiny delay) */
.hero,.page-hero{position:relative;overflow:hidden;}
.hero::before,.page-hero::before{content:"";position:absolute;inset:-12% -6%;z-index:0;pointer-events:none;
background:
radial-gradient(44% 40% at 20% 16%, rgba(240,132,42,.12), transparent 62%),
radial-gradient(42% 38% at 84% 26%, rgba(48,96,168,.30), transparent 58%);}
.hero .wrap,.hero > *,.page-hero .wrap{position:relative;z-index:1;}
.glow-orb{position:absolute;border-radius:50%;z-index:0;pointer-events:none;filter:blur(48px);will-change:transform,opacity;opacity:0;}
.glow-orb.o1{width:420px;height:420px;background:rgba(240,132,42,.22);top:4%;left:56%;animation:orbFade 1.2s 1s forwards,orbA 15s 1s ease-in-out infinite;}
.glow-orb.o2{width:360px;height:360px;background:rgba(52,116,208,.32);top:36%;left:72%;animation:orbFade 1.2s 1s forwards,orbB 19s 1s ease-in-out infinite;}
.glow-orb.o3{width:300px;height:300px;background:rgba(240,132,42,.14);top:54%;left:40%;animation:orbFade 1.2s 1.3s forwards,orbA 23s 1.3s ease-in-out infinite reverse;}
@keyframes orbFade{to{opacity:1;}}
@keyframes orbA{0%,100%{transform:translate(0,0);}30%{transform:translate(-95px,72px);}60%{transform:translate(64px,-52px);}}
@keyframes orbB{0%,100%{transform:translate(0,0);}50%{transform:translate(-120px,-64px);}}
@media(prefers-reduced-motion:reduce){.glow-orb{animation:none;opacity:.6;}}
/* hero carousel: reduce ELS/HS crop + grab cursor */
.hs-track{aspect-ratio:1400/788;cursor:grab;touch-action:pan-y;}
.hs-track:active{cursor:grabbing;}
.hs-slide img{object-position:center top;object-fit:cover;}
/* hero entrance animation (LCP-safe: h1 uses transform only, no opacity) */
@keyframes heroRise{from{transform:translateY(22px);}to{transform:translateY(0);}}
@keyframes heroFade{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:translateY(0);}}
.hero h1{animation:heroRise .7s cubic-bezier(.2,.7,.2,1) both;}
.hero .eyebrow{animation:heroFade .6s .05s both;}
.hero .hero-copy > p,.hero .hero-lead{animation:heroFade .7s .22s both;}
.hero .btn-row,.hero .hero-cta{animation:heroFade .7s .34s both;}
.hs-showcase{animation:heroFade .8s .15s both;}
@media(prefers-reduced-motion:reduce){.hero h1,.hero .eyebrow,.hero .hero-copy > p,.hero .btn-row,.hs-showcase{animation:none;}}
/* refresh hero visual + stat badges */
.rf-hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;}
@media(max-width:820px){.rf-hero-grid{grid-template-columns:1fr;gap:28px;}}
.rf-visual{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.rf-stat{background:linear-gradient(150deg,var(--navy-700),var(--navy-800));border:1px solid var(--navy-600);border-radius:16px;padding:22px 20px;text-align:center;}
.rf-stat b{display:block;font-family:'Sora',sans-serif;font-weight:800;font-size:38px;color:var(--amber);line-height:1;}
.rf-stat span{display:block;color:var(--muted);font-size:12.5px;margin-top:8px;line-height:1.4;}
.rf-stat.wide{grid-column:1 / -1;}
/* prettier hero score boxes (overrides earlier .hs-score) */
.hs-scores{gap:12px;}
.hs-score{background:linear-gradient(150deg,var(--navy-700),#0b1730);border:1px solid var(--navy-600);border-radius:15px;padding:13px 20px;box-shadow:0 10px 26px rgba(0,0,0,.24);gap:11px;transition:transform .25s,border-color .25s;}
.hs-score:hover{transform:translateY(-3px);border-color:rgba(240,132,42,.5);}
.hs-score b{font-size:27px;}
.hs-score span{font-size:11px;}
@media(max-width:520px){.hs-score{padding:11px 15px;}.hs-score b{font-size:22px;}}
/* hero before→after reveal (business WOW) */
.bf-before{position:absolute;inset:0;z-index:3;overflow:hidden;clip-path:inset(0 0 0 0);animation:bfWipe 1.15s .8s cubic-bezier(.65,0,.35,1) forwards;}
.bf-before img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;}
@keyframes bfWipe{to{clip-path:inset(0 0 0 100%);}}
.bf-line{position:absolute;top:0;bottom:0;width:3px;left:0;z-index:4;background:var(--amber);box-shadow:0 0 16px rgba(240,132,42,.9);animation:bfLine 1.15s .8s cubic-bezier(.65,0,.35,1) forwards;}
@keyframes bfLine{0%{left:0;}99%{left:calc(100% - 3px);opacity:1;}100%{opacity:0;}}
.bf-tag{position:absolute;top:12px;z-index:5;font-family:'Sora',sans-serif;font-weight:700;font-size:10px;letter-spacing:.06em;padding:4px 10px;border-radius:100px;}
.bf-tag-before{left:12px;background:rgba(6,12,26,.72);color:#fff;animation:bfHide 1.15s .8s forwards;}
.bf-tag-after{right:12px;background:var(--amber);color:var(--navy-900);opacity:0;animation:bfShow 1.15s .8s forwards;}
@keyframes bfHide{80%{opacity:1;}100%{opacity:0;}}
@keyframes bfShow{0%,55%{opacity:0;}100%{opacity:1;}}
@media(prefers-reduced-motion:reduce){.bf-before,.bf-line,.bf-tag-before{display:none;}.bf-tag-after{opacity:1;animation:none;}}
/* ===== HERO BEFORE→AFTER (whole banner "upgrades") ===== */
.hero-flip{position:absolute;inset:0;z-index:30;background:#e9ebee;overflow:hidden;clip-path:inset(0 0 0 0);animation:flipWipe .9s .35s cubic-bezier(.7,0,.28,1) forwards;padding:0;}
.hf-bar{display:flex;align-items:center;justify-content:space-between;padding:20px 40px;border-bottom:1px solid #d7dbe0;background:#fff;}
.hf-logo{font-family:'Sora',sans-serif;font-weight:800;font-size:20px;color:#9aa3af;letter-spacing:.04em;}
.hf-links{display:flex;gap:20px;}
.hf-links i{display:block;width:44px;height:9px;border-radius:3px;background:#ccd2da;}
.hf-body{padding:56px 40px;max-width:640px;}
.hf-h1{height:30px;border-radius:5px;background:#b9c0ca;margin-bottom:12px;width:78%;}
.hf-h1.w2{width:54%;margin-bottom:26px;}
.hf-p{height:12px;border-radius:4px;background:#d3d8df;margin-bottom:9px;width:88%;}
.hf-p.w2{width:66%;margin-bottom:26px;}
.hf-btn{width:150px;height:40px;border-radius:8px;background:#aeb6c1;}
.hf-shot{position:absolute;right:40px;top:120px;width:40%;height:260px;border-radius:10px;background:#dfe3e8;border:1px solid #cfd5dc;}
@keyframes flipWipe{to{clip-path:inset(0 0 0 100%);}}
.flip-line{position:absolute;top:0;bottom:0;width:4px;left:0;z-index:31;background:linear-gradient(var(--amber),var(--amber-soft));box-shadow:0 0 22px rgba(240,132,42,.95);animation:flipLine .9s .35s cubic-bezier(.7,0,.28,1) forwards;}
@keyframes flipLine{0%{left:0;opacity:1;}96%{left:calc(100% - 4px);opacity:1;}100%{opacity:0;}}
@media(max-width:760px){.hf-bar{padding:16px 20px;}.hf-links i{width:26px;}.hf-body{padding:36px 20px;}.hf-h1{width:88%;}.hf-shot{display:none;}}
@media(prefers-reduced-motion:reduce){.hero-flip,.flip-line{display:none;}}
/* refresh page-hero flip */
.page-hero .hero-flip{animation:flipWipe .9s .35s cubic-bezier(.7,0,.28,1) forwards;}
.page-hero .flip-line{animation:flipLine .9s .35s cubic-bezier(.7,0,.28,1) forwards;}
/* result cards: two score boxes (no tick) */
.say-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px;}
.rs-box{background:rgba(240,132,42,.1);border:1px solid rgba(240,132,42,.32);color:#e8a15a;font-family:'Sora',sans-serif;font-weight:700;font-size:12px;padding:5px 12px;border-radius:9px;letter-spacing:.01em;}
/* ===== BEFORE = classic "ugly website" (for the upgrade reveal) ===== */
.hero-flip{background:#dfe1e5!important;font-family:'Times New Roman',Times,serif!important;}
.hf-oldbar{background:#2a3f8f;color:#fff;padding:12px 30px;font-size:14px;display:flex;justify-content:space-between;align-items:center;border-bottom:4px solid #d4b13a;}
.hf-oldlogo{font-weight:700;font-size:17px;color:#ffd857;}
.hf-oldlogo{color:#ffd857;}
.hf-oldnav{font-size:13px;color:#cdd6f5;}
.hf-oldmain{text-align:center;padding:44px 30px;}
.hf-oldtitle{font-size:34px;font-weight:700;color:#c0141e;text-shadow:1px 1px 0 #999;margin-bottom:14px;}
.hf-oldsub{font-size:17px;font-style:italic;color:#3b5bbf;margin-bottom:26px;}
.hf-oldbtn{display:inline-block;background:linear-gradient(#5b8def,#2a4fb0);color:#fff;font-weight:700;font-size:15px;padding:11px 30px;border:2px outset #6a9aef;border-radius:5px;letter-spacing:.03em;}
.hf-oldbanner{margin:32px auto 0;max-width:70%;height:150px;background:repeating-linear-gradient(45deg,#c7ccd6,#c7ccd6 14px,#d7dbe3 14px,#d7dbe3 28px);border:2px dashed #8f97a5;color:#6b7280;font-size:15px;display:flex;align-items:center;justify-content:center;}
/* slower, more dramatic reveal */
.hero-flip{animation:flipWipe 1.5s .6s cubic-bezier(.76,0,.24,1) forwards!important;}
.flip-line{animation:flipLine 1.5s .6s cubic-bezier(.76,0,.24,1) forwards!important;width:5px;}
.page-hero .hero-flip{animation:flipWipe 1.5s .6s cubic-bezier(.76,0,.24,1) forwards!important;}
.page-hero .flip-line{animation:flipLine 1.5s .6s cubic-bezier(.76,0,.24,1) forwards!important;}
@media(max-width:760px){.hf-oldtitle{font-size:23px;}.hf-oldnav{display:none;}.hf-oldbanner{max-width:90%;height:100px;}}
/* refresh stat strip: 3 cols centered (not 4) */
.v-web .strip .strip-in{grid-template-columns:repeat(3,1fr);max-width:840px;margin:0 auto;}
@media(max-width:640px){.v-web .strip .strip-in{grid-template-columns:1fr;}}
/* refresh hero SEO guarantee line */
.rf-guarantee{margin-top:14px;color:var(--cream-text);font-size:14px;background:rgba(240,132,42,.1);border:1px solid rgba(240,132,42,.3);border-radius:10px;padding:11px 16px;display:inline-block;}
.rf-guarantee strong{color:var(--amber);}
/* hero showcase — stable size (fix ELS jump) */
.hs-track{position:relative!important;aspect-ratio:1400/788!important;width:100%;}
.hs-slide{position:absolute!important;inset:0!important;}
.hs-slide.active{opacity:1;}
.hs-slide img{width:100%!important;height:100%!important;object-fit:cover!important;object-position:center top!important;}
/* FIX hero showcase jump: grid columns must not stretch to content width */
.hero-grid{min-width:0;}
.hero-grid > *,.hs-showcase,.hs-frames,.browser-frame{min-width:0;}
.hs-badge{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.hs-scores{min-width:0;}
/* STRONGER fix: minmax(0) so showcase column never grows to text width */
@media(min-width:901px){
.hero .hero-grid{grid-template-columns:1.15fr minmax(0,600px)!important;}
}
.hs-showcase{width:100%;}
.hs-badge{display:inline-flex;max-width:100%;box-sizing:border-box;}
/* DEFINITIVE fix: fixed browser-frame width on desktop (immune to text width) */
@media(min-width:901px){
.hero .browser-frame{width:600px!important;max-width:600px!important;margin-left:auto!important;margin-right:0!important;}
.hero .hs-frames{width:600px!important;margin-left:auto;}
}