/* JB Switch - site.css. Black and gold, taken from Julie's own card and flyer ideas. */
@font-face{font-family:Archivo;font-weight:700;font-display:swap;src:url(fonts/archivo-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:Archivo;font-weight:800;font-display:swap;src:url(fonts/archivo-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:Figtree;font-weight:400;font-display:swap;src:url(fonts/figtree-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Figtree;font-weight:600;font-display:swap;src:url(fonts/figtree-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:Figtree;font-weight:700;font-display:swap;src:url(fonts/figtree-latin-700-normal.woff2) format("woff2")}
:root{
  --bg:#0a0a0a;--panel:#141210;--panel2:#1c1913;--line:rgba(232,184,75,.24);--line2:rgba(255,255,255,.1);
  --g1:#f8e19a;--g2:#e5ab2f;--g3:#a8741a;--yellow:#f7b500;
  --text:#f6f1e8;--muted:#b8afa0;--ink:#15120c;--paper:#f6f2ea;--paper2:#ebe5d8;
  --gold:linear-gradient(135deg,var(--g1),var(--g2) 55%,var(--g3));
  --head:Archivo,"Arial Black",system-ui,sans-serif;--body:Figtree,system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:18px;--wrap:1160px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:400 1.0625rem/1.65 var(--body);overflow-x:hidden}
img,svg{max-width:100%;display:block}
a{color:var(--g1)}
a:hover{color:#fff}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px;border-radius:4px}
.wrap{width:min(var(--wrap),100% - 32px);margin-inline:auto}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ic{width:1.5em;height:1.5em;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
h1,h2,h3{font-family:var(--head);font-weight:800;line-height:1.05;letter-spacing:-.01em;margin:0 0 .5em;text-transform:uppercase}
h1{font-size:clamp(2.5rem,9.5vw,5.2rem)}
h2{font-size:clamp(1.8rem,5.6vw,3rem)}
h3{font-size:1.15rem;line-height:1.2}
p{margin:0 0 1em}
.gold{background:var(--gold);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.eyebrow{display:inline-flex;gap:.6em;align-items:center;font:700 .78rem/1 var(--head);letter-spacing:.18em;text-transform:uppercase;color:var(--g2);margin-bottom:1.1rem}
.eyebrow::before{content:"";width:34px;height:2px;background:var(--gold)}
.lead{font-size:1.2rem;color:#e6dfd0;max-width:40em}
.muted{color:var(--muted)}
.small{font-size:.9rem}

/* preview bar */
.jw-pv{background:#fff;color:#111;font:600 .8rem/1.2 var(--body);text-align:center;padding:7px 12px}
.jw-pv a{color:#0a6b3a}
.ph{border-bottom:1.5px dashed var(--g2);color:var(--g1);white-space:normal}
.demo-note{background:#1d1a12;border-bottom:1px solid var(--line);color:#e9dfc6;font-size:.85rem;text-align:center;padding:8px 16px}

/* header */
.hdr{position:sticky;top:0;z-index:50;background:rgba(10,10,10,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px}
.brand{display:inline-flex;flex-direction:column;align-items:center;gap:2px;color:#fff;text-decoration:none;line-height:1}
.brand img{height:50px;width:auto}
.brand-sub{font:700 .56rem/1 var(--head);letter-spacing:.26em;text-transform:uppercase;color:var(--g1);padding-left:.26em;white-space:nowrap}
.nav{display:none;gap:4px;align-items:center}
.nav a{color:#efe8d8;text-decoration:none;font-weight:600;padding:10px 14px;border-radius:999px;font-size:.98rem}
.nav a:hover,.nav a[aria-current=page]{color:var(--g1);background:rgba(232,184,75,.1)}
.menu-btn{background:none;border:1px solid var(--line);color:var(--g1);border-radius:12px;padding:9px 12px;font:700 .9rem var(--body);cursor:pointer;display:flex;gap:8px;align-items:center}
.nav.open{display:flex;flex-direction:column;align-items:stretch;position:absolute;left:0;right:0;top:100%;background:#0a0a0a;padding:12px 16px 18px;border-bottom:1px solid var(--line)}
.nav.open a{padding:14px 12px;border-bottom:1px solid var(--line2);border-radius:0}
@media(min-width:900px){.nav{display:flex}.menu-btn{display:none}.brand img{height:56px}.brand-sub{font-size:.62rem}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;background:var(--gold);color:#17110a;font:800 .95rem/1 var(--head);text-transform:uppercase;letter-spacing:.06em;padding:17px 26px;border-radius:999px;text-decoration:none;border:0;cursor:pointer;box-shadow:0 8px 28px rgba(229,171,47,.28);transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-2px);color:#000;box-shadow:0 12px 34px rgba(229,171,47,.4)}
.btn.sm{padding:12px 20px;font-size:.8rem}
.btn.ghost{background:transparent;color:var(--g1);border:1.5px solid var(--g2);box-shadow:none}
.btn.ghost:hover{background:rgba(232,184,75,.12);color:#fff}
.btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:1.6rem}

/* hero */
.hero{position:relative;overflow:hidden;padding:48px 0 56px;background:radial-gradient(900px 520px at 85% 10%,rgba(229,171,47,.16),transparent 62%),radial-gradient(600px 400px at 0% 100%,rgba(229,171,47,.08),transparent 60%)}
.hero .grid{display:grid;gap:34px;align-items:center}
.hero h1 .l2{display:block}
.hero-art{display:grid;place-items:center}
.bulb{width:min(300px,72vw);height:auto;overflow:visible}
.bulb .halo{animation:pulse 4.5s ease-in-out infinite;transform-origin:160px 150px}
.bulb .fil{animation:glow 4.5s ease-in-out infinite}
@keyframes pulse{50%{opacity:.62;transform:scale(1.07)}}
@keyframes glow{50%{opacity:.82}}
.trust{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:2rem;padding:0;list-style:none;color:#e8dfc8;font-weight:600}
.trust li{display:flex;align-items:center;gap:8px}
.trust .ic{color:var(--g2);width:1.25em;height:1.25em}
@media(min-width:900px){.hero{padding:84px 0 96px}.hero .grid{grid-template-columns:1.25fr .75fr}.bulb{width:min(360px,100%)}}

/* sections */
section{padding:64px 0}
.sec-head{max-width:46rem;margin-bottom:2.2rem}
.light{background:var(--paper);color:var(--ink)}
.light .lead,.light p{color:#3a342a}
.light a{color:#7a5208}
.light .eyebrow{color:#8a5f12}
.light h2,.light h3{color:var(--ink)}
.light .gold{background:linear-gradient(135deg,#c78e1a,#8a5f12);-webkit-background-clip:text;background-clip:text}
.panelbg{background:var(--panel)}

/* service cards */
.cards{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:640px){.cards{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.cards.five{grid-template-columns:repeat(5,1fr)}.cards.three{grid-template-columns:repeat(3,1fr)}}
.card{display:flex;flex-direction:column;gap:10px;background:linear-gradient(160deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:var(--r);padding:24px 22px;text-decoration:none;color:var(--text);transition:transform .18s,border-color .18s}
a.card:hover{transform:translateY(-4px);border-color:var(--g2);color:#fff}
.card .ico{width:54px;height:54px;border-radius:14px;display:grid;place-items:center;background:rgba(229,171,47,.12);border:1px solid var(--line);color:var(--g1)}
.card .ico .ic{width:28px;height:28px}
.card h3{margin:.3rem 0 0;color:#fff}
.card p{margin:0;color:var(--muted);font-size:.98rem}
.card .more{margin-top:auto;padding-top:8px;font:700 .82rem var(--head);letter-spacing:.1em;text-transform:uppercase;color:var(--g2);display:flex;align-items:center;gap:8px}
.light .card{background:#fff;border-color:#e3dac6;color:var(--ink)}
.light .card h3{color:var(--ink)}
.light .card p{color:#524a3b}
.light .card .ico{background:#171309;color:var(--g1);border-color:#171309}

/* benefit row */
.benefits{display:grid;gap:14px;grid-template-columns:1fr 1fr}
@media(min-width:900px){.benefits{grid-template-columns:repeat(4,1fr)}}
.benefit{border-top:3px solid var(--g2);padding-top:14px}
.benefit h3{margin-bottom:.35rem}
.benefit p{margin:0;font-size:.96rem}

/* steps */
.steps{display:grid;gap:16px;counter-reset:s;padding:0;list-style:none}
@media(min-width:800px){.steps{grid-template-columns:repeat(3,1fr)}}
.steps li{counter-increment:s;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:26px 24px}
.steps li::before{content:counter(s);display:block;font:800 3.4rem/1 var(--head);background:var(--gold);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:.4rem}
.steps h3{color:#fff}.steps p{margin:0;color:var(--muted)}

/* statement band */
.band{background:var(--gold);color:#17110a;text-align:center;padding:56px 0}
.band h2{margin:0;color:#17110a;font-size:clamp(2rem,7vw,4rem)}
.btns.mid{justify-content:center}
.btn.dark{background:#0a0a0a;color:var(--g1);box-shadow:none}
.btn.dark:hover{background:#000;color:#fff}
a.more{text-decoration:none}
.band p{margin:.8rem auto 0;max-width:36rem;font-weight:600;color:#2b2008}

/* split (photo + text) */
.split{display:grid;gap:34px;align-items:center}
@media(min-width:860px){.split{grid-template-columns:.8fr 1.2fr;gap:56px}.split.rev{grid-template-columns:1.2fr .8fr}}
.portrait{position:relative;border-radius:26px;overflow:hidden;border:1px solid var(--g2);box-shadow:0 0 0 8px rgba(229,171,47,.07),0 28px 60px rgba(0,0,0,.5);max-width:420px}
.portrait img{width:100%;height:auto}
.portrait figcaption{position:absolute;left:0;right:0;bottom:0;padding:56px 18px 16px;background:linear-gradient(transparent,rgba(0,0,0,.9));font-weight:700;color:#fff;font-size:1.1rem;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.portrait figcaption span{display:block;font:600 .85rem var(--body);color:var(--g1)}
figure{margin:0}

/* page heads + service pages */
.pagehead{padding:56px 0 40px;background:radial-gradient(700px 360px at 90% 0,rgba(229,171,47,.14),transparent 62%);border-bottom:1px solid var(--line)}
.pagehead h1{font-size:clamp(2.2rem,8vw,4.2rem)}
.crumb{font-size:.88rem;color:var(--muted);margin-bottom:1rem}.crumb a{color:var(--g1);text-decoration:none}
.ticks{list-style:none;padding:0;margin:0 0 1.2rem;display:grid;gap:12px}
.ticks li{display:flex;gap:12px;align-items:flex-start}
.ticks .ic{color:var(--g2);margin-top:2px;width:1.3em;height:1.3em}
.twocol{display:grid;gap:30px}
@media(min-width:860px){.twocol{grid-template-columns:1.2fr .8fr;gap:48px}}
.aside-card{background:linear-gradient(160deg,var(--panel2),var(--panel));border:1px solid var(--g2);border-radius:var(--r);padding:26px 24px;align-self:start}
.aside-card h3{color:var(--g1)}
.note{border-left:3px solid var(--g2);background:rgba(229,171,47,.08);padding:14px 18px;border-radius:0 12px 12px 0;font-size:.95rem;color:#e6dcc4}
.other{display:flex;flex-wrap:wrap;gap:10px;margin-top:1rem}
.chip{border:1px solid var(--line);border-radius:999px;padding:9px 16px;text-decoration:none;font-weight:600;font-size:.92rem;color:#efe6d0}
.chip:hover{border-color:var(--g2);color:#fff}

/* contact */
.contact-grid{display:grid;gap:34px}
@media(min-width:900px){.contact-grid{grid-template-columns:.85fr 1.15fr;gap:56px}}
.info{display:grid;gap:14px;margin-top:1.4rem}
.info div{display:flex;gap:14px;align-items:flex-start;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.info .ic{color:var(--g2);margin-top:3px}
.info b{display:block;color:#fff}
form.f{background:linear-gradient(160deg,var(--panel2),var(--panel));border:1px solid var(--g2);border-radius:var(--r);padding:26px 22px;display:grid;gap:16px}
.field label,.field legend{display:block;font-weight:700;margin-bottom:6px;color:#fff;font-size:.96rem;padding:0}
.field input[type=text],.field input[type=email],.field input[type=tel],.field textarea{width:100%;background:#0c0b09;border:1.5px solid #4a4130;color:#fff;border-radius:12px;padding:14px 15px;font:inherit}
.field input:focus,.field textarea:focus{border-color:var(--g2);outline:none;box-shadow:0 0 0 3px rgba(229,171,47,.25)}
.field textarea{min-height:130px;resize:vertical}
fieldset.field{border:0;margin:0;padding:0}
.checks{display:grid;gap:10px;grid-template-columns:1fr}
@media(min-width:560px){.checks{grid-template-columns:1fr 1fr}}
.checks label{display:flex;align-items:center;gap:10px;font-weight:600;background:#0c0b09;border:1.5px solid #4a4130;border-radius:12px;padding:12px 14px;cursor:pointer;margin:0}
.checks input{accent-color:var(--g2);width:18px;height:18px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-msg{font-weight:700;color:var(--g1);min-height:1.4em}

/* prose pages */
.prose{max-width:46rem}
.prose h2{font-size:1.5rem;margin-top:2rem}

/* footer */
footer{background:#050505;border-top:1px solid var(--line);padding:52px 0 30px;font-size:.96rem;color:var(--muted)}
.fgrid{display:grid;gap:30px}
@media(min-width:800px){.fgrid{grid-template-columns:1.2fr 1fr 1fr}}
footer img{height:64px;width:auto}
.foot-brand{margin-bottom:14px;align-items:flex-start}
.foot-brand .brand-sub{font-size:.68rem;padding-left:0}
footer h3{color:#fff;font-size:.9rem;letter-spacing:.1em}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
footer a{color:#e8dfc8;text-decoration:none}footer a:hover{color:var(--g1)}
.legal{margin-top:34px;padding-top:20px;border-top:1px solid var(--line2);font-size:.86rem;display:grid;gap:8px}
.credit a{color:var(--g1)}

/* reveal */
.rv{opacity:0;transform:translateY(18px);transition:opacity .6s,transform .6s}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}html{scroll-behavior:auto}}
.nav a.btn,.nav a.btn:hover{color:#17110a;background:var(--gold)}

/* v2: partners, make-it-happen, quote */
.makeit{margin:1.8rem 0 0;font:800 clamp(1.4rem,4.5vw,2rem)/1.1 var(--head);text-transform:uppercase;background:var(--gold);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;letter-spacing:.01em}
.partners{list-style:none;margin:0 0 1.6rem;padding:0;display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.partners li{display:flex;flex-direction:column;gap:10px;align-items:center;text-align:center}
.plogo{width:100%;min-height:104px;background:#fff;border-radius:16px;display:grid;place-items:center;padding:18px;border:1px solid #e3dac6}
.plogo img{max-height:46px;max-width:82%;width:auto;height:auto;object-fit:contain}
.pname{font:800 1.5rem/1 var(--head);color:#1b1810;letter-spacing:-.01em}
.prole{font-size:.88rem;color:var(--muted);font-weight:600}
.light .prole{color:#5a5140}
.more-partners{max-width:46rem;margin:0;font-weight:600;color:#e6dcc4}
.light .more-partners{color:#3a342a}
.panelbg .plogo{border-color:transparent}
.band.make{padding:76px 0}
.band.make h2{font-size:clamp(2.4rem,9vw,5.2rem)}
.band.make p{font-size:1.15rem}
.btn.ghost.dk{color:#7a5208;border-color:#a8741a}
.btn.ghost.dk:hover{background:rgba(168,116,26,.12);color:#3a2704}
.quote{margin:0;padding:0}
.quote p{font-size:1.18rem;color:#e9e1cf}
.quote .qlead{font:800 clamp(1.5rem,4.4vw,2.2rem)/1.2 var(--head);text-transform:none;color:#fff;margin-bottom:1rem}
.sign{font:700 .95rem var(--head);letter-spacing:.06em;text-transform:uppercase;color:var(--g2);margin:1.2rem 0 0}
.light .sign{color:#8a5f12}
.light .quote p,.light .lead{color:#3a342a}
.partline{margin:0 0 1rem}
.notsure{margin-top:1.8rem}
.info a,.prose a{overflow-wrap:anywhere}
.plogo img+.pname{margin-top:8px}.pname.sm{font-size:.95rem;line-height:1.15}.plogo:has(img+.pname) img{max-height:40px}
.plogo{height:116px}

.plogo.bg-o2{background:#0019A5;border-color:#0019A5}.plogo.bg-vm{background:#E10A0A;border-color:#E10A0A}.plogo.bg-s4{background:#0b1b3a;border-color:#0b1b3a}
