/* KS Marketing Studio — v2 shared styles. Serif-led, black + cream, green for buttons and small accents only. */
:root{
--black:#0e0e0e; --raised:#171717; --gloss:#1c1c1c;
--cream:#f4f1ea; --paper:#faf8f3; --sand:#e9e3d8;
--ink:#141414; --muted:#6b675f; --muted-dark:#a8a39a;
--green:#2f4a3a; --green-hi:#3b5c49; --sage:#8fb39b;
--serif:'Instrument Serif',Georgia,serif;
--sans:'Archivo',system-ui,sans-serif;
--r:28px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--black);color:var(--cream);font-family:var(--sans);font-size:17px;line-height:1.6;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--sage);outline-offset:3px}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px;position:relative}
.narrow{max-width:860px}
@media (max-width:720px){.wrap{padding:0 20px}}

/* Sections */
.dark{background:var(--black);color:var(--cream)}
.light{background:var(--paper);color:var(--ink)}
.sand{background:var(--sand);color:var(--ink)}
.sec{padding-top:120px;padding-bottom:120px}
@media (max-width:720px){.sec{padding-top:80px;padding-bottom:80px}}
.light .muted,.sand .muted{color:var(--muted)}
.dark .muted{color:var(--muted-dark)}

/* Type */
.serif{font-family:var(--serif);font-weight:400}
h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0;letter-spacing:-0.01em}
.display{font-size:clamp(64px,11vw,176px);line-height:0.88;letter-spacing:-0.02em}
.h1{font-size:clamp(52px,7.4vw,112px);line-height:0.95}
.h2{font-size:clamp(42px,5.6vw,84px);line-height:1}
.h3{font-size:clamp(30px,3.2vw,44px);line-height:1.08}
.lead{font-size:clamp(22px,2.4vw,32px);line-height:1.3;font-family:var(--sans);font-weight:400;letter-spacing:-0.01em}
.eyebrow{font-size:13px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase}
.light .eyebrow,.sand .eyebrow{color:var(--green)}
.dark .eyebrow{color:var(--sage)}
.it{font-style:italic}
p{margin:0}
.hl{background:var(--cream);color:var(--ink);padding:0 .12em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.light .hl,.sand .hl{background:var(--sand)}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:14px;text-decoration:none;font-family:var(--sans);font-weight:600;font-size:16px;border-radius:999px;padding:8px 8px 8px 28px;transition:transform .35s cubic-bezier(.2,.7,.2,1),background-color .35s,color .35s,box-shadow .35s;will-change:transform}
.btn .arr{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;transition:transform .35s cubic-bezier(.2,.7,.2,1),background-color .35s}
.btn .arr svg{width:18px;height:18px}
.btn-green{background:var(--green);color:var(--cream)}
.btn-green .arr{background:var(--cream);color:var(--green)}
.btn-green:hover{background:var(--green-hi);transform:translateY(-3px);box-shadow:0 14px 30px -12px rgba(47,74,58,.7)}
.btn-green:hover .arr{transform:rotate(45deg)}
.btn-cream{background:var(--cream);color:var(--ink)}
.btn-cream .arr{background:var(--green);color:var(--cream)}
.btn-cream:hover{transform:translateY(-3px);box-shadow:0 14px 30px -12px rgba(0,0,0,.6)}
.btn-cream:hover .arr{transform:rotate(45deg)}
.btn-line{padding:16px 28px;border:1.5px solid currentColor}
.btn-line:hover{background:var(--cream);color:var(--ink);border-color:var(--cream);transform:translateY(-3px)}
.light .btn-line:hover,.sand .btn-line:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.link{font-weight:600;text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;transition:background-size .35s}
.link:hover{background-size:100% 1.5px}

/* Header */
.hdr{position:sticky;top:0;z-index:50;background:rgba(14,14,14,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:14px;padding-bottom:14px}
.hdr .mark{height:44px;width:auto}
.nav{display:flex;align-items:center;gap:30px;font-size:15px;font-weight:500}
.nav a{text-decoration:none;color:var(--cream)}
.nav a:not(.btn){background:linear-gradient(var(--sage),var(--sage)) 0 100%/0 1.5px no-repeat;transition:background-size .3s}
.nav a:not(.btn):hover{background-size:100% 1.5px}
.nav .btn{padding:6px 6px 6px 20px;font-size:15px}
.nav .btn .arr{width:34px;height:34px}
@media (max-width:480px){.nav .hide-xs{display:none}}
@media (max-width:760px){.nav{gap:14px;font-size:13.5px}.nav .hide-sm{display:none}.hdr .mark{height:36px}}

/* Pills */
.pill{display:inline-block;padding:9px 18px;border-radius:999px;font-size:14px;font-weight:600;background:var(--cream);color:var(--ink);box-shadow:0 10px 24px -14px rgba(0,0,0,.5)}
.pill.g{background:var(--green);color:var(--cream)}
.pill.s{background:var(--sand);color:var(--ink)}

/* Photo frames */
.ph>img.fill{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.ph{border-radius:var(--r);overflow:hidden;background:var(--raised);position:relative}
.ph img{width:100%;height:100%;object-fit:cover}
.ph.empty::after{content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;width:34%;aspect-ratio:1370/1200;background:url(https://static.wixstatic.com/media/641aa6_344b1abaabb1443196c4a9e0b2c0e4c5~mv2.png/v1/crop/x_560,y_550,w_1370,h_1200/fill/w_400,h_350,al_c,q_90,enc_auto/ks-mark.png) center/contain no-repeat;opacity:.09}
.light .ph.empty,.sand .ph.empty{background:#e3ddd1}
.light .ph.empty::after,.sand .ph.empty::after{filter:invert(1);opacity:.12}
.tilt{transform:rotate(-3deg)}
.tilt-r{transform:rotate(3deg)}

/* Marquee */
.marquee{overflow:hidden;white-space:nowrap;padding:28px 0}
.marquee .track{display:inline-flex;animation:mq 38s linear infinite}
.marquee span{font-family:var(--serif);font-size:clamp(64px,9vw,140px);line-height:1;padding-right:.35em}
@keyframes mq{to{transform:translateX(-50%)}}

/* Arrow list */
.alist{list-style:none;margin:0;padding:0}
.alist li{display:flex;gap:18px;align-items:baseline;padding:16px 0;font-family:var(--serif);font-size:clamp(24px,2.4vw,32px);line-height:1.2}
.alist li::before{content:"";flex:none;width:26px;height:26px;border-radius:50%;background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f4f1ea' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/14px no-repeat;transform:translateY(3px)}

/* Floating cards */
.cards{position:relative}
.fcard{border-radius:22px;padding:30px 30px 34px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.fcard .num{font-family:var(--serif);font-style:italic;font-size:44px;line-height:1}
.fcard h3{font-size:32px;line-height:1.05;margin:14px 0 10px}
.fcard p{font-size:15.5px;line-height:1.6}
.c-cream{background:var(--cream);color:var(--ink)}
.c-green{background:var(--green);color:var(--cream)}
.c-sand{background:var(--sand);color:var(--ink)}
.c-gloss{background:var(--raised);color:var(--cream);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 30px 60px -30px rgba(0,0,0,.6)}
.float{animation:float 7s ease-in-out infinite}
.float.d2{animation-delay:-2.3s}.float.d3{animation-delay:-4.6s}
@keyframes float{50%{translate:0 -10px}}

/* Numbered circles */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:30px}
.steps li{display:grid;grid-template-columns:64px 1fr;gap:22px;align-items:start}
.steps .n{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;font-family:var(--serif);font-size:30px}
.steps h3{font-size:30px;line-height:1.1;margin:6px 0 8px}

/* Footer */
.ftr{background:var(--black);color:var(--muted-dark);overflow:hidden}
.strip{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;padding:0 16px}
.strip .ph{aspect-ratio:1;border-radius:18px}
@media (max-width:760px){.strip{grid-template-columns:repeat(3,1fr)}.strip .ph:nth-child(n+4){display:none}}
.fnav{display:flex;flex-wrap:wrap;justify-content:space-between;gap:32px;padding-top:64px;padding-bottom:40px}
.fnav .cols{display:grid;grid-template-columns:repeat(3,auto);gap:10px 56px;font-size:16px}
.fnav a{text-decoration:none;color:var(--cream)}
.fnav a:hover{color:var(--sage)}
.wordmark{font-family:var(--serif);font-size:clamp(36px,13.6vw,230px);line-height:.85;color:var(--cream);white-space:nowrap;text-align:center;letter-spacing:-0.02em;padding-bottom:18px}
.legal{font-size:13px;padding-bottom:28px}
.legal a{color:var(--muted-dark)}

/* Scroll reveal (subtle). Content is visible without JS. */
.js .rv{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.js .rv.tilt{transform:translateY(28px) rotate(-3deg)}
.js .rv.tilt-r{transform:translateY(28px) rotate(3deg)}
.js .rv.in{opacity:1;transform:none}
.js .rv.tilt.in{transform:rotate(-3deg)}
.js .rv.tilt-r.in{transform:rotate(3deg)}
.js .rv.d1{transition-delay:.12s}.js .rv.d2{transition-delay:.24s}.js .rv.d3{transition-delay:.36s}
@media (prefers-reduced-motion:reduce){
.js .rv{opacity:1;transform:none;transition:none}
.js .rv.tilt{transform:rotate(-3deg)}.js .rv.tilt-r{transform:rotate(3deg)}
.marquee .track,.float{animation:none}
.btn,.btn .arr{transition:none}
}

/* No widows: balanced headlines, "pretty" paragraphs (plus a JS fallback in site.js) */
h1,h2,h3,.lead,.display,.h1,.h2,.h3,q,.pill,.fcard h3,.alist li,.steps h3{text-wrap:balance}
p,li{text-wrap:pretty}
.nav a.current:not(.btn){color:var(--sage);background-size:100% 2px}
.nav a.btn.current{box-shadow:0 0 0 2px var(--sage)}