/* ==========================================================================
Shaheryar Khan — tri-state landing page
Brand system taken from the printed business card:
lime #C6EE4B / ink #121310 / bone #FAFAF6 / diagonal stripe texture
========================================================================== */
.sk-landing-page{
--lime:#C6EE4B;
--lime-600:#A8D22B;
--ink:#121310;
--ink-800:#1C1E18;
--ink-700:#2A2D24;
--bone:#FAFAF6;
--bone-200:#F1F2EA;
--bone-300:#E3E5D8;
--mud:#6B6F5E;
--ease:cubic-bezier(.22,.61,.36,1);
--sans:'Outfit','Helvetica Neue',Arial,sans-serif;
--head:'Inter','Helvetica Neue',Arial,sans-serif;
--mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace}
/* ---------- typography: Inter for headings, Outfit for body ----------
This file loads after tailwind.css, so .font-display on is
overridden here. Mono stays IBM Plex Mono. */
.sk-landing-page,.sk-landing-page .font-display{font-family:var(--sans) !important}
.sk-landing-page h1,.sk-landing-page h2,.sk-landing-page h3,.sk-landing-page h4,.sk-landing-page h5,.sk-landing-page h6,.sk-landing-page legend,.sk-landing-page .h2,.sk-landing-page .q,.sk-landing-page .done-h,.sk-landing-page .case-h,.sk-landing-page .svc-h,.sk-landing-page .obj-h,.sk-landing-page .step-h,.sk-landing-page .price-h,.sk-landing-page .guar-h,.sk-landing-page .faq summary,.sk-landing-page .hdr-name,.sk-landing-page .stat-num,.sk-landing-page .price-fig,.sk-landing-page .lt-stat b,.sk-landing-page .calc-line.total b,.sk-landing-page .calc-input output,.sk-landing-page .calc-input input[type=number],.sk-landing-page .local-list b,.sk-landing-page .serp b,.sk-landing-page .proof-card .tabular-nums,.sk-landing-page .btn-lime,.sk-landing-page .btn-ghost,.sk-landing-page .btn-dark,.sk-landing-page .btn-outline-dark,.sk-landing-page .case-cta b,.sk-landing-page .opt{
font-family:var(--head) !important}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
.sk-landing-page *,.sk-landing-page *::before,.sk-landing-page *::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}
.sk-landing-page{margin:0;background:var(--bone) !important;overflow-x:hidden}
.sk-landing-page ::selection{background:var(--lime) !important;color:var(--ink) !important}
.sk-landing-page :focus-visible{outline:3px solid var(--lime);outline-offset:3px;border-radius:3px}
.sk-landing-page .text-balance{text-wrap:balance}
.sk-landing-page .tabular-nums{font-variant-numeric:tabular-nums}
/* ---------- decorative ---------- */
.sk-landing-page .stripes{
position:absolute;inset:0;pointer-events:none;
background-image:repeating-linear-gradient(115deg,
rgba(255,255,255,.028) 0 1px, transparent 1px 11px) !important}
.sk-landing-page .hero-glow{
position:absolute;top:-22%;right:-12%;width:640px;height:640px;pointer-events:none;
background:radial-gradient(circle,rgba(198,238,75,.13) 0%,rgba(198,238,75,0) 68%) !important}
/* ---------- header ---------- */
.sk-landing-page #siteHeader{background:transparent !important}
.sk-landing-page .hdr-logo{height:38px;width:auto;display:block}
.sk-landing-page .hdr-logo-sm{display:none;height:36px;width:36px;border-radius:9px}
/* The lockup artwork is white, which is right over the dark hero and invisible
once the header turns bone on scroll. sk-lockup-dark.png is the same file
with the wordmark recolored to ink, the SK square and the lime dot left
alone, and it is swapped in by .stuck. Regenerate it from the white one
rather than editing it by hand. Under 421px both give way to the square,
which reads on either background. */
.sk-landing-page .hdr-logo-dark{display:none;height:38px;width:auto}
.sk-landing-page #siteHeader.stuck .hdr-logo{display:none}
.sk-landing-page #siteHeader.stuck .hdr-logo-dark{display:block}
@media(max-width:420px){
.sk-landing-page .hdr-logo,.sk-landing-page .hdr-logo-dark,.sk-landing-page #siteHeader.stuck .hdr-logo-dark{display:none}
.sk-landing-page .hdr-logo-sm{display:block}
}
.sk-landing-page #siteHeader .hdr-name,.sk-landing-page #siteHeader .hdr-phone{color:#fff !important}
.sk-landing-page #siteHeader .hdr-sub{color:rgba(255,255,255,.42) !important}
.sk-landing-page #siteHeader .nav-a{color:rgba(255,255,255,.72) !important}
.sk-landing-page #siteHeader .nav-a:hover{color:var(--lime) !important}
.sk-landing-page #siteHeader .burger i{background:#fff !important}
.sk-landing-page #siteHeader.stuck{
background:rgba(250,250,246,.93) !important;
backdrop-filter:saturate(1.6) blur(14px);
-webkit-backdrop-filter:saturate(1.6) blur(14px);
box-shadow:0 1px 0 var(--bone-300),0 8px 26px -20px rgba(18,19,16,.5)}
.sk-landing-page #siteHeader.stuck .hdr-name,.sk-landing-page #siteHeader.stuck .hdr-phone{color:var(--ink) !important}
.sk-landing-page #siteHeader.stuck .hdr-sub{color:var(--mud) !important}
.sk-landing-page #siteHeader.stuck .nav-a{color:var(--mud) !important}
.sk-landing-page #siteHeader.stuck .nav-a:hover{color:var(--ink) !important}
.sk-landing-page #siteHeader.stuck .burger i{background:var(--ink) !important}
.sk-landing-page .nav-a{position:relative;transition:color .2s var(--ease);padding-bottom:3px}
.sk-landing-page .nav-a::after{
content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--lime) !important;
transition:width .28s var(--ease)
}
.sk-landing-page .nav-a:hover::after{width:100%}
.sk-landing-page .burger{display:block;width:20px}
.sk-landing-page .burger i{display:block;height:2px;border-radius:2px;margin:4px 0;transition:transform .3s var(--ease),opacity .2s}
.sk-landing-page #navToggle[aria-expanded="true"] .burger i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.sk-landing-page #navToggle[aria-expanded="true"] .burger i:nth-child(2){opacity:0}
.sk-landing-page #navToggle[aria-expanded="true"] .burger i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.sk-landing-page .mob-a{color:rgba(255,255,255,.82) !important;font-weight:600 !important;font-size:16px !important;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.07)}
.sk-landing-page .mob-a:last-child{border-bottom:none}
/* ---------- buttons ---------- */
.sk-landing-page .btn-lime,.sk-landing-page .btn-ghost,.sk-landing-page .btn-dark,.sk-landing-page .btn-outline-dark{
display:inline-flex;align-items:center;justify-content:center;gap:8px;
font-weight:700 !important;letter-spacing:-.005em !important;border-radius:5px;
transition:transform .18s var(--ease),background .2s,box-shadow .25s var(--ease),color .2s;
cursor:pointer;border:none;text-align:center;line-height:1.15 !important}
.sk-landing-page .btn-lime{background:var(--lime) !important;color:var(--ink) !important;box-shadow:0 3px 0 var(--lime-600)}
.sk-landing-page .btn-lime:hover{background:#D2F263 !important;transform:translateY(-2px);box-shadow:0 5px 0 var(--lime-600)}
.sk-landing-page .btn-lime:active{transform:translateY(1px);box-shadow:0 1px 0 var(--lime-600)}
.sk-landing-page .btn-ghost{background:transparent !important;color:#fff !important;border:1.5px solid rgba(255,255,255,.24)}
.sk-landing-page .btn-ghost:hover{border-color:var(--lime) !important;color:var(--lime) !important}
.sk-landing-page .btn-dark{background:var(--ink) !important;color:#fff !important}
.sk-landing-page .btn-dark:hover{background:#000 !important;transform:translateY(-2px)}
.sk-landing-page .btn-outline-dark{background:transparent !important;color:var(--ink) !important;border:2px solid rgba(18,19,16,.28)}
.sk-landing-page .btn-outline-dark:hover{border-color:var(--ink) !important;background:rgba(18,19,16,.05) !important}
/* ---------- type primitives ---------- */
.sk-landing-page .eyebrow,.sk-landing-page .eyebrow-l{
display:inline-block;font-family:'IBM Plex Mono',monospace !important;font-size:11px !important;
letter-spacing:.19em !important;text-transform:uppercase !important;font-weight:500 !important}
.sk-landing-page .eyebrow{color:var(--mud) !important}
.sk-landing-page .eyebrow-l{color:var(--lime) !important}
/* The color is stated, not inherited from body.text-ink, and that is the whole
point of it being here. Inheritance loses to any rule that targets the
element directly, and on WordPress the theme ships one: Hello Elementor sets
its own heading color, so an .h2 that only inherited came out grey on the
live site while looking correct locally. A class beats a bare element
selector, so stating it here settles it wherever the page is served. Same
reason for .svc-h, .step-h, .guar-h and .stat-num below. */
.sk-landing-page .h2{
font-weight:900 !important;font-size:clamp(30px,4.3vw,47px) !important;line-height:1.03 !important;
letter-spacing:-.03em !important;margin:14px 0 0;text-wrap:balance;color:var(--ink) !important}
/* ---------- reveal ---------- */
/* Visible by default. Only hidden once JS confirms it is running, so a
blocked or slow script can never leave the page blank. */
.sk-landing-page .reveal{opacity:1;transform:none}
.sk-landing-page .js .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.sk-landing-page .js .reveal.in{opacity:1;transform:none}
.sk-landing-page .reveal-d1{transition-delay:.07s}
.sk-landing-page .reveal-d2{transition-delay:.14s}
.sk-landing-page .reveal-d3{transition-delay:.21s}
.sk-landing-page .reveal-d4{transition-delay:.28s}
@media (prefers-reduced-motion:reduce){
.sk-landing-page .js .reveal,.sk-landing-page .js .reveal.in{opacity:1;transform:none}
}
/* ---------- hero ----------
The headline sits above the two-column row and spans the full container,
so "Without Chasing Referrals." always fits on one line. The size is capped
below the container width rather than the viewport width for that reason. */
/* background video + the scrim that keeps the type readable */
.sk-landing-page .hero-media{position:absolute;inset:0;overflow:hidden;pointer-events:none;background:var(--ink) !important}
.sk-landing-page .hero-video{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
opacity:0;transform:scale(1.06);
transition:opacity 1.4s var(--ease),transform 2.6s var(--ease)
}
.sk-landing-page .hero-video.is-on{opacity:.5;transform:scale(1)}
.sk-landing-page .hero-scrim{
position:absolute;inset:0;
background:
linear-gradient(90deg,rgba(18,19,16,.94) 0%,rgba(18,19,16,.82) 46%,rgba(18,19,16,.6) 100%),
linear-gradient(0deg,var(--ink) 0%,rgba(18,19,16,.35) 38%,rgba(18,19,16,.72) 100%) !important}
@media(max-width:639px){
.sk-landing-page .hero-video.is-on{opacity:.34}
.sk-landing-page .hero-scrim{background:linear-gradient(0deg,var(--ink) 0%,rgba(18,19,16,.62) 40%,rgba(18,19,16,.88) 100%) !important}
}
.sk-landing-page .hero-eyebrow{margin:0 0 22px}
.sk-landing-page .hero-h1{
font-family:var(--head) !important;font-weight:900 !important;
font-size:clamp(31px,6.1vw,72px) !important;line-height:.98 !important;letter-spacing:-.034em !important;
margin:0;text-wrap:balance
}
.sk-landing-page .hero-sub{margin:34px 0 0;max-width:58ch}
.sk-landing-page .hero-cta{margin-top:36px}
/* Credentials row. Built as a list with drawn dots rather than "·" characters
between spans, which is what was leaving ragged gaps in the line. */
.sk-landing-page .hero-trust{
display:flex;flex-wrap:wrap;align-items:center;gap:9px 22px;
margin:26px 0 0;padding:0;list-style:none;
font-family:var(--mono) !important;font-size:11px !important;font-weight:400 !important;
letter-spacing:.1em !important;text-transform:uppercase !important;color:rgba(255,255,255,.42) !important;line-height:1 !important}
.sk-landing-page .hero-trust li{position:relative}
.sk-landing-page .hero-trust li + li::before{
content:"";position:absolute;left:-12px;top:50%;
width:3px;height:3px;margin-top:-1.5px;border-radius:50%;
background:var(--lime) !important;opacity:.55
}
/* logo strip, same container width as the rest of the hero */
.sk-landing-page .hero-logos{margin-top:44px;padding-top:34px;border-top:1px solid rgba(255,255,255,.09)}
.sk-landing-page .logo-label{
margin:0 0 20px;
font-family:var(--mono) !important;font-size:10px !important;letter-spacing:.17em !important;
text-transform:uppercase !important;color:rgba(255,255,255,.3) !important}
/* Mobile: eyebrow, headline, promise and both buttons land in the first screen */
@media(max-width:639px){
.sk-landing-page #top{padding-top:88px;padding-bottom:30px}
.sk-landing-page .hero-eyebrow{margin-bottom:14px;font-size:10px !important}
.sk-landing-page .hero-h1{font-size:clamp(30px,8.6vw,38px) !important;line-height:1.03 !important}
.sk-landing-page .hero-sub{margin-top:18px;font-size:16px !important;line-height:1.55 !important}
.sk-landing-page .hero-cta{margin-top:22px;gap:10px}
.sk-landing-page .hero-cta a{width:100%;padding-top:13px;padding-bottom:13px;font-size:15px !important}
.sk-landing-page .hero-trust{margin-top:20px;font-size:10px !important;gap:8px 18px}
.sk-landing-page .hero-trust li + li::before{left:-10px}
.sk-landing-page .hero-logos{margin-top:28px;padding-top:24px}
.sk-landing-page .logo-label{margin-bottom:14px;font-size:9px !important}
.sk-landing-page .proof-card{padding:24px 22px}
}
/* ---------- hero proof card ---------- */
.sk-landing-page .proof-card{
background:var(--lime) !important;color:var(--ink) !important;border-radius:8px;padding:30px 28px;
box-shadow:0 26px 60px -30px rgba(0,0,0,.75);
transition:transform .4s var(--ease)
}
.sk-landing-page .proof-card:hover{transform:translateY(-4px)}
/* ---------- client logo marquee ---------- */
.sk-landing-page .logo-mask{
margin-top:30px;overflow:hidden;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)
}
.sk-landing-page .logo-marquee{display:flex;width:max-content}
.sk-landing-page .logo-marquee:hover .logo-track{animation-play-state:paused}
.sk-landing-page .logo-track{
display:flex;align-items:center;gap:60px;padding-right:60px;
list-style:none;margin:0;
animation:logoScroll 42s linear infinite
}
@keyframes logoScroll{from{transform:translateX(0)}to{transform:translateX(-100%)}}
.sk-landing-page .logo-track img{
display:block;width:auto;height:auto;max-height:40px;max-width:168px;object-fit:contain;
opacity:.58;transition:opacity .25s var(--ease),transform .25s var(--ease)
}
.sk-landing-page .logo-track li:hover img{opacity:1;transform:scale(1.04)}
@media(max-width:640px){
.sk-landing-page .logo-track{gap:44px;padding-right:44px}
.sk-landing-page .logo-track img{max-height:32px;max-width:132px}
}
/* no motion: one static, centred, wrapping row */
@media (prefers-reduced-motion:reduce){
.sk-landing-page .logo-mask{-webkit-mask-image:none;mask-image:none}
.sk-landing-page .logo-marquee{width:auto;justify-content:center}
.sk-landing-page .logo-track{animation-name:none;flex-wrap:wrap;justify-content:center;gap:40px;padding-right:0}
.sk-landing-page .logo-track[aria-hidden="true"]{display:none}
}
/* ---------- footer wordmark ---------- */
.sk-landing-page .foot-logo{height:36px;width:auto;display:block}
/* ---------- stat strip ----------
Two by two beside the proof card. Four across put the mono labels on four
lines each, which is what made the block look broken. */
.sk-landing-page .stat-grid{
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
gap:1px;background:rgba(255,255,255,.09) !important;
border:1px solid rgba(255,255,255,.09);border-radius:10px;overflow:hidden
}
.sk-landing-page .stat-cell{background:var(--ink-800) !important;padding:26px 24px}
@media(min-width:1024px){.sk-landing-page .stat-cell{padding:32px 30px}}
.sk-landing-page .stat-num{display:block;font-weight:900 !important;font-size:clamp(28px,3.1vw,38px) !important;letter-spacing:-.03em !important;line-height:1 !important;margin-bottom:11px;font-variant-numeric:tabular-nums;color:#fff !important}
.sk-landing-page .stat-lbl{display:block;font-family:var(--mono) !important;font-size:10.5px !important;letter-spacing:.1em !important;text-transform:uppercase !important;color:rgba(255,255,255,.45) !important;line-height:1.6 !important}
/* ---------- image placeholders (swap for real ![]()
) ---------- */
.sk-landing-page .img-slot{
display:grid;place-items:center;text-align:center;border-radius:8px;min-height:270px;
border:2px dashed rgba(255,255,255,.17);background:rgba(255,255,255,.03) !important;
font-family:'IBM Plex Mono',monospace !important;font-size:11.5px !important;letter-spacing:.1em !important;
text-transform:uppercase !important;color:rgba(255,255,255,.38) !important;padding:24px
}
.sk-landing-page .img-slot.light{border-color:var(--bone-300) !important;background:#fff !important;color:var(--mud) !important}
/* ---------- the problem: slow-month calendar illustration ---------- */
.sk-landing-page .prob-punch{
margin:34px 0 0;padding:4px 0 4px 20px;border-left:3px solid var(--lime);
font-size:19px !important;line-height:1.45 !important;font-weight:700 !important;letter-spacing:-.015em !important;color:var(--ink) !important}
.sk-landing-page .month-card{
background:#fff !important;border:1px solid var(--bone-300);border-radius:10px;padding:24px;
box-shadow:0 22px 48px -34px rgba(18,19,16,.5)
}
.sk-landing-page .month-top{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:16px}
.sk-landing-page .month-top span{
font-family:var(--mono) !important;font-size:9.5px !important;letter-spacing:.16em !important;text-transform:uppercase !important;color:var(--mud) !important}
.sk-landing-page .month-top span:first-child{color:var(--ink) !important;font-weight:600 !important}
.sk-landing-page .month-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:8px}
.sk-landing-page .month-dow span{
font-family:var(--mono) !important;font-size:9px !important;letter-spacing:.08em !important;text-transform:uppercase !important;
color:var(--mud) !important;text-align:center;opacity:.7
}
.sk-landing-page .month-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.sk-landing-page .month-grid i{
display:block;aspect-ratio:1;border-radius:5px;
background:var(--bone-200) !important;border:1px solid var(--bone-300)
}
.sk-landing-page .month-grid i.job{background:var(--lime) !important;border-color:var(--lime-600) !important}
.sk-landing-page .month-lbl{
margin:22px 0 8px;font-family:var(--mono) !important;font-size:9.5px !important;letter-spacing:.16em !important;
text-transform:uppercase !important;color:var(--mud) !important}
.sk-landing-page .month-grid.rival i{aspect-ratio:auto;height:15px}
.sk-landing-page .month-legend{
display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:20px;padding-top:16px;
border-top:1px solid var(--bone-200);font-size:12.5px !important;color:var(--mud) !important}
.sk-landing-page .month-legend b,.sk-landing-page .month-legend em{display:inline-flex;align-items:center;gap:8px;font-style:normal !important}
.sk-landing-page .month-legend b{font-weight:600 !important;color:var(--ink) !important}
.sk-landing-page .month-legend b::before,.sk-landing-page .month-legend em::before{
content:"";width:11px;height:11px;border-radius:3px;flex-shrink:0
}
.sk-landing-page .month-legend b::before{background:var(--lime) !important;border:1px solid var(--lime-600)}
.sk-landing-page .month-legend em::before{background:var(--bone-200) !important;border:1px solid var(--bone-300)}
.sk-landing-page .month-note{
margin:14px 0 0;font-family:var(--mono) !important;font-size:9.5px !important;letter-spacing:.13em !important;
text-transform:uppercase !important;color:var(--mud) !important;opacity:.75
}
@media(max-width:639px){
.sk-landing-page .month-card{padding:20px}
.sk-landing-page .prob-punch{font-size:17.5px !important;margin-top:26px}
}
/* ---------- quote + callout ---------- */
.sk-landing-page .quote{margin:30px 0 0;padding:0 0 0 20px;border-left:3px solid var(--lime)}
.sk-landing-page .quote p{font-size:18.5px !important;line-height:1.6 !important;font-style:italic !important;color:rgba(255,255,255,.86) !important;margin:0}
.sk-landing-page .quote cite{display:block;margin-top:12px;font-style:normal !important;font-family:'IBM Plex Mono',monospace !important;font-size:11px !important;letter-spacing:.13em !important;text-transform:uppercase !important;color:var(--lime) !important}
.sk-landing-page .callout{margin-top:30px;padding:22px 24px;background:rgba(198,238,75,.09) !important;border:1px solid rgba(198,238,75,.28);border-radius:7px}
/* ---------- case cards (supporting proof) ---------- */
/* Header with the rail arrows */
.sk-landing-page .proof-head{display:flex;align-items:flex-end;justify-content:space-between;gap:26px;flex-wrap:wrap}
.sk-landing-page .proof-intro{flex:1 1 440px;min-width:0}
.sk-landing-page .rail-nav{display:flex;gap:10px;flex-shrink:0;margin-left:auto;padding-bottom:5px}
.sk-landing-page .rail-btn{
width:46px;height:46px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
background:#fff !important;color:var(--ink) !important;border:1px solid var(--bone-300);
transition:background .2s,color .2s,border-color .2s,transform .18s var(--ease),opacity .2s
}
.sk-landing-page .rail-btn:hover:not(:disabled){background:var(--ink) !important;color:#fff !important;border-color:var(--ink) !important;transform:translateY(-2px)}
.sk-landing-page .rail-btn:disabled{opacity:.32;cursor:default}
/* same control on an ink section */
.sk-landing-page .rail-btn.on-dark{background:rgba(255,255,255,.06) !important;color:#fff !important;border-color:rgba(255,255,255,.18) !important}
.sk-landing-page .rail-btn.on-dark:hover:not(:disabled){background:var(--lime) !important;color:var(--ink) !important;border-color:var(--lime) !important}
/* Featured card is fixed; the rest scroll */
.sk-landing-page .case-rail{display:grid;grid-template-columns:1fr 2fr;gap:20px;align-items:stretch}
.sk-landing-page .case-track{
display:flex;gap:20px;min-width:0;
overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
scrollbar-width:none;-ms-overflow-style:none
}
.sk-landing-page .case-track::-webkit-scrollbar{display:none}
.sk-landing-page .case-track > .case-card{flex:0 0 calc((100% - 20px) / 2);scroll-snap-align:start}
@media(max-width:1023px){
.sk-landing-page .case-rail{grid-template-columns:1fr 1fr}
.sk-landing-page .case-track > .case-card{flex:0 0 100%}
}
@media(max-width:719px){
.sk-landing-page .case-rail{grid-template-columns:1fr}
.sk-landing-page .case-track > .case-card{flex:0 0 86%}
}
.sk-landing-page .case-card{
display:flex;flex-direction:column;color:#fff !important;
background:var(--ink-800) !important;border:1px solid rgba(255,255,255,.09);
border-radius:15px;overflow:hidden;
transition:transform .32s var(--ease),border-color .32s var(--ease),box-shadow .32s var(--ease)
}
.sk-landing-page .case-card:hover{
transform:translateY(-6px);border-color:var(--lime) !important;
box-shadow:0 0 0 1px var(--lime),0 30px 54px -34px rgba(18,19,16,.7)
}
.sk-landing-page .case-card.featured{box-shadow:0 0 0 1px rgba(198,238,75,.22),0 18px 40px -34px rgba(18,19,16,.6)}
.sk-landing-page .case-card.featured:hover{box-shadow:0 0 0 1px var(--lime),0 30px 54px -34px rgba(18,19,16,.7)}
/* screenshot slot */
.sk-landing-page .case-shot{
position:relative;padding:14px;
background:linear-gradient(158deg,#FAFAF6 0%,#EDEFE3 62%,#E3E5D8 100%) !important}
.sk-landing-page .case-flag{
position:absolute;top:15px;left:15px;z-index:2;display:inline-flex;align-items:center;gap:6px;
background:var(--ink) !important;color:#fff !important;border-radius:999px;padding:6px 12px;
font-family:'IBM Plex Mono',monospace !important;font-size:9px !important;font-weight:500 !important;
letter-spacing:.15em !important;text-transform:uppercase !important;
box-shadow:0 6px 16px -8px rgba(18,19,16,.7)
}
.sk-landing-page .case-flag svg{color:var(--lime) !important}
.sk-landing-page .shot-img{
display:block;width:100%;height:auto;aspect-ratio:16/10;
object-fit:cover;object-position:top left;
border-radius:9px;background:#fff !important;
box-shadow:0 12px 26px -20px rgba(18,19,16,.75)
}
/* card body */
.sk-landing-page .case-body{display:flex;flex-direction:column;flex:1;padding:20px 20px 20px}
.sk-landing-page .case-badges{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:17px}
.sk-landing-page .pill-verified{
display:inline-flex;align-items:center;gap:6px;flex-shrink:0;
background:var(--lime) !important;color:var(--ink) !important;border-radius:999px;
padding:6px 13px;font-size:12.5px !important;font-weight:700 !important;letter-spacing:-.01em !important}
.sk-landing-page .case-sector{
font-family:'IBM Plex Mono',monospace !important;font-size:9px !important;letter-spacing:.14em !important;
text-transform:uppercase !important;color:rgba(255,255,255,.42) !important;text-align:right;line-height:1.4 !important}
.sk-landing-page .case-h{
font-weight:800 !important;font-size:19px !important;letter-spacing:-.021em !important;line-height:1.26 !important;
margin:0;color:#fff !important;text-wrap:balance
}
.sk-landing-page .case-sum{
margin:13px 0 0;font-size:14.5px !important;line-height:1.6 !important;font-style:italic !important;
color:rgba(255,255,255,.6) !important}
.sk-landing-page .case-meta{
margin-top:auto;padding-top:19px;border-top:1px solid rgba(255,255,255,.1);
display:flex;align-items:flex-end;justify-content:space-between;gap:10px;flex-wrap:wrap
}
.sk-landing-page .case-sum{margin-bottom:24px}
.sk-landing-page .cm-l{font-size:12.5px !important;line-height:1.5 !important;color:rgba(255,255,255,.4) !important}
.sk-landing-page .cm-l b{color:rgba(255,255,255,.82) !important;font-weight:600 !important}
.sk-landing-page .cm-tag{
font-family:'IBM Plex Mono',monospace !important;font-size:9px !important;letter-spacing:.09em !important;
background:rgba(255,255,255,.06) !important;border:1px solid rgba(255,255,255,.13);
border-radius:999px;padding:6px 11px;color:rgba(255,255,255,.72) !important;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%
}
.sk-landing-page .case-cta{
margin-top:19px;display:flex;align-items:center;justify-content:space-between;gap:12px;
border-radius:10px;padding:14px 15px;
background:rgba(255,255,255,.045) !important;border:1px solid rgba(255,255,255,.09);color:#fff !important;
transition:background .2s,border-color .2s,transform .18s var(--ease)
}
.sk-landing-page .case-cta b{display:block;font-weight:800 !important;font-size:15px !important;letter-spacing:-.017em !important;line-height:1.2 !important}
.sk-landing-page .case-cta small{display:block;margin-top:4px;font-size:11.5px !important;line-height:1.4 !important;color:rgba(255,255,255,.55) !important}
.sk-landing-page .cc-arrow{
flex-shrink:0;width:31px;height:31px;border-radius:50%;background:var(--lime) !important;color:var(--ink) !important;
display:grid;place-items:center;transition:transform .22s var(--ease)
}
.sk-landing-page .case-cta:hover{background:rgba(255,255,255,.085) !important;border-color:rgba(255,255,255,.16) !important;transform:translateY(-2px)}
.sk-landing-page .case-cta:hover .cc-arrow{transform:translateX(3px)}
/* the featured card carries the lime button */
.sk-landing-page .case-card.featured .case-cta{background:var(--lime) !important;border-color:var(--lime) !important;color:var(--ink) !important}
.sk-landing-page .case-card.featured .case-cta small{color:rgba(18,19,16,.62) !important}
.sk-landing-page .case-card.featured .cc-arrow{background:var(--ink) !important;color:#fff !important}
.sk-landing-page .case-card.featured .case-cta:hover{background:#D2F263 !important;border-color:#D2F263 !important}
/* ---------- services ---------- */
.sk-landing-page .svc{display:flex;gap:22px;align-items:flex-start;padding:26px 0;border-top:1px solid var(--bone-300)}
.sk-landing-page .svc:last-child{border-bottom:1px solid var(--bone-300)}
.sk-landing-page .svc-n{font-family:'IBM Plex Mono',monospace !important;font-size:12px !important;font-weight:600 !important;color:var(--lime-600) !important;padding-top:5px;flex-shrink:0}
.sk-landing-page .svc-h{font-weight:800 !important;font-size:20px !important;letter-spacing:-.018em !important;line-height:1.24 !important;margin:0 0 8px;max-width:34ch;color:var(--ink) !important}
.sk-landing-page .svc-p{font-size:16px !important;line-height:1.65 !important;color:var(--mud) !important;margin:0;max-width:56ch}
/* ---------- website portfolio ----------
Browser chrome rather than a phone frame on purpose: the source captures are
desktop, and squeezing a desktop layout into a phone outline would show the
buyer a render that does not exist. Swap to phone frames the day we have real
mobile captures. Tokens only, so no Tailwind rebuild. */
/* The rail. Same mechanics as .case-track so the page teaches one interaction:
native overflow scroll, so swipe and trackpad work with JS off, snap points
so it always lands on a card, and the arrows in the header drive it. */
.sk-landing-page .site-rail{
display:flex;gap:20px;min-width:0;
overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
padding-bottom:4px;
scrollbar-width:none;-ms-overflow-style:none
}
.sk-landing-page .site-rail::-webkit-scrollbar{display:none}
/* Widths leave a deliberate sliver of the next card visible. Three that fit
exactly look like a finished grid and nobody discovers the other 22. */
.sk-landing-page .site-rail > .site-card{flex:0 0 30.5%;scroll-snap-align:start}
@media(max-width:1023px){.sk-landing-page .site-rail > .site-card{flex:0 0 44%}}
@media(max-width:719px){.sk-landing-page .site-rail{gap:14px}.sk-landing-page .site-rail > .site-card{flex:0 0 86%}}
.sk-landing-page .site-card{
display:flex;flex-direction:column;
/* flex items default to min-width:auto; pinned to 0 so a wide screenshot can
never drive the track's min-content size past the viewport */
min-width:0;
background:var(--ink-800) !important;border:1px solid rgba(255,255,255,.09);
border-radius:13px;overflow:hidden;
transition:transform .32s var(--ease),border-color .32s var(--ease),box-shadow .32s var(--ease)
}
.sk-landing-page .site-card:hover{
transform:translateY(-6px);border-color:var(--lime) !important;
box-shadow:0 0 0 1px var(--lime),0 30px 54px -34px rgba(0,0,0,.8)
}
/* browser chrome */
.sk-landing-page .site-frame{position:relative;padding:0;background:var(--ink-700) !important}
/* The flag lives in the browser bar, not over the shot. Anywhere on the
screenshot it covers the client's own header, which is the part being shown. */
.sk-landing-page .site-flag{
position:absolute;top:5px;right:10px;z-index:2;
background:var(--lime) !important;color:var(--ink) !important;border-radius:999px;padding:2px 9px;
font-family:'IBM Plex Mono',monospace !important;font-size:8.5px !important;font-weight:600 !important;
letter-spacing:.14em !important;text-transform:uppercase !important;line-height:1.6 !important}
.sk-landing-page .site-dots{display:flex;align-items:center;gap:6px;height:26px;padding:0 12px}
.sk-landing-page .site-dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.2) !important}
.sk-landing-page .site-img{
display:block;width:100%;height:auto;aspect-ratio:16/10;
object-fit:cover;object-position:top center;
background:#fff !important;border-top:1px solid rgba(255,255,255,.08)
}
/* card body */
.sk-landing-page .site-body{display:flex;flex-direction:column;flex:1;padding:20px}
.sk-landing-page .site-meta{
display:block;font-family:'IBM Plex Mono',monospace !important;font-size:9px !important;
letter-spacing:.14em !important;text-transform:uppercase !important;color:var(--lime) !important;line-height:1.5 !important}
.sk-landing-page .site-h{font-weight:800 !important;font-size:18.5px !important;letter-spacing:-.02em !important;line-height:1.25 !important;margin:11px 0 0;color:#fff !important}
.sk-landing-page .site-p{margin:11px 0 0;font-size:15px !important;line-height:1.62 !important;color:rgba(255,255,255,.6) !important}
.sk-landing-page .site-foot{
margin:34px 0 0;padding:0 0 0 20px;border-left:3px solid var(--lime);
font-size:16.5px !important;line-height:1.62 !important;color:rgba(255,255,255,.72) !important;max-width:62ch
}
.sk-landing-page .site-foot-a{color:var(--lime) !important;font-weight:700 !important;white-space:nowrap}
.sk-landing-page .site-foot-a:hover{text-decoration:underline !important}
/* ---------- reviews ----------
One rail of identical cards: media, then a title, then the quote, then the
attribution row. Every card has all four, which is what makes the row read
as a set. An earlier build put one image card next to text-only cards and
the row looked broken. */
.sk-landing-page .rev-rail{
display:flex;gap:20px;min-width:0;
overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
padding-bottom:4px;
scrollbar-width:none;-ms-overflow-style:none
}
.sk-landing-page .rev-rail::-webkit-scrollbar{display:none}
/* Leaves a sliver of the next card showing. Three that fit exactly read as a
finished grid and nobody looks for the rest. */
.sk-landing-page .rev-rail > .rev-card{flex:0 0 30.5%;scroll-snap-align:start;min-width:0}
@media(max-width:1023px){.sk-landing-page .rev-rail > .rev-card{flex:0 0 46%}}
@media(max-width:719px){.sk-landing-page .rev-rail{gap:14px}.sk-landing-page .rev-rail > .rev-card{flex:0 0 86%}}
/* the source strip under the headline */
.sk-landing-page .rev-srcbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:24px}
.sk-landing-page .rev-srcbar-t{font-size:15px !important;color:rgba(255,255,255,.55) !important;margin-right:2px}
/* media. Same 16/10 window on every card, photo or video, so the titles below
line up across the row. */
.sk-landing-page .rev-shot{
position:relative;display:grid;place-content:center;justify-items:center;gap:9px;
aspect-ratio:16/10;overflow:hidden;
background:linear-gradient(150deg,#262B1E 0%,#191C15 58%,#121310 100%) !important;
border-bottom:1px solid rgba(255,255,255,.07)
}
.sk-landing-page .rev-shot .stripes{position:absolute;inset:0;opacity:.3}
.sk-landing-page .rev-photo,.sk-landing-page .rev-vid{
position:absolute;inset:0;width:100%;height:100%;
object-fit:cover;object-position:center 30%;background:#0C0D0A !important}
/* The source video is 720x1280 portrait. A 16/10 window on it lands almost
exactly on the two faces, which is the part worth showing. */
.sk-landing-page .rev-shot--video .rev-vid{object-position:center 26%}
.sk-landing-page .rev-shot.has-photo .rev-mono,.sk-landing-page .rev-shot.has-photo .stripes{display:none}
/* A headshot in a 16/10 window would crop to a slice of a face, so the photo
is blown up and blurred as the backdrop with a sharp circular portrait on
top. Same band height as every other card, and no cropped foreheads. */
.sk-landing-page .rev-shot--portrait .rev-photo{
filter:blur(26px) saturate(.7) brightness(.42);transform:scale(1.25)
}
.sk-landing-page .rev-shot--portrait .rev-face{
position:relative;width:112px;height:112px;border-radius:50%;object-fit:cover;
border:3px solid rgba(198,238,75,.55);
box-shadow:0 14px 34px -16px rgba(0,0,0,.9)
}
/* initials, shown until a photo is dropped into assets/img/reviews/ */
.sk-landing-page .rev-mono{
position:relative;font-family:'IBM Plex Mono',monospace !important;font-size:30px !important;font-weight:500 !important;
letter-spacing:.06em !important;color:rgba(198,238,75,.5) !important}
.sk-landing-page .rev-playbtn{
position:relative;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
background:var(--lime) !important;color:var(--ink) !important;padding-left:3px;border:0;cursor:pointer;
box-shadow:0 0 0 9px rgba(198,238,75,.1);
transition:transform .28s var(--ease),box-shadow .28s var(--ease),opacity .25s var(--ease)
}
.sk-landing-page .rev-shot--empty .rev-playbtn{background:rgba(198,238,75,.16) !important;color:rgba(198,238,75,.55) !important;box-shadow:none;cursor:default}
.sk-landing-page .rev-card:hover .rev-shot--video .rev-playbtn{transform:scale(1.07);box-shadow:0 0 0 13px rgba(198,238,75,.14)}
.sk-landing-page .rev-vtag{
position:relative;font-family:'IBM Plex Mono',monospace !important;font-size:9px !important;
letter-spacing:.17em !important;text-transform:uppercase !important;color:var(--lime) !important;
background:rgba(18,19,16,.72) !important;border-radius:999px;padding:5px 11px;
transition:opacity .25s var(--ease)
}
.sk-landing-page .rev-shot--empty .rev-vtag{color:rgba(255,255,255,.4) !important;background:none !important}
/* The video review opens in a lightbox.
The card window is 16/10 so every card in the rail has the same media band
and the titles line up. The source file is 720x1280 portrait, so that window
is a crop. It lands on the two faces, which is the right thumbnail, but it is
not the review: heads come off and half the frame is gone. Pressing play now
hands over the whole thing at its own shape instead of playing the crop.
main.js builds this and appends it to , which is also the element the
WordPress build scopes every selector to, so these rules still reach it once
the page is running inside WordPress. */
.sk-landing-page .rev-lb{
position:fixed;inset:0;z-index:9999;
display:flex;align-items:center;justify-content:center;padding:26px 18px;
background-color:rgba(8,9,7,.9) !important;
-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
opacity:0;transition:opacity .22s var(--ease)
}
.sk-landing-page .rev-lb.is-open{opacity:1}
/* Beats the user-agent [hidden] rule that .rev-lb's own display would win against. */
.sk-landing-page .rev-lb[hidden]{display:none}
.sk-landing-page .rev-lb-vid{
/* Portrait until the file itself says otherwise. A