/* ════════════════════════════════════════════════════════════
   Keys Studios — "Navy & Gold" skin over the Hyperdrive webkit.
   Deep education navy, warm gold, clean white. Load AFTER styles.css.
   ════════════════════════════════════════════════════════════ */

:root{
  --paper:#FAF6EC; --surface:#FFFFFF; --ink:#1E2A44; --muted:#6E6857;
  --line:#E9E1CE; --accent:#B98A2F; --accent-ink:#96701D; --teal-ink:#96701D;
  --card-shadow:0 10px 30px rgba(21,34,59,.08); --btn-shadow:0 8px 20px rgba(201,153,47,.3);
  /* navy world */
  --navy-950:#0B1830; --navy-900:#10203D; --navy-800:#16294B; --navy-line:#2A3E63;
  --on-navy:#F2F5FA; --on-navy-muted:#9FB0CC;
  --blue:#D9A93F; --led:#E9C25F; --sand:#E9C25F;
  --btn-hi:#E4B44A; --btn-lo:#C9992F; --btn-ink:#1B1403;
  --hl-a:#E9C25F; --hl-b:#D9A93F; --hero-fade:rgba(0,0,0,0);
  --glow-blue:#D9A93F47; --glow-led:#E9C25F30; --glow-sand:#E9C25F29;
  --glow-blue-soft:#D9A93F21; --glow-led-soft:#E9C25F1A;
  --led-soft:#E9C25F26; --led-line:#E9C25F59; --blue-soft:#D9A93F24;
  --btn-glow:#C9992F4D; --nav-bg:#0B1830E6; --nav-line:#2A3E63B3;
}

/* ════════ logo lockup ════════ */
.k-mark{flex:none}
.k-wordmark{display:flex;flex-direction:column;line-height:1}
.k-wordmark b{font-family:var(--font-display);font-weight:800;font-size:1.3rem;letter-spacing:.01em;color:var(--on-navy)}
.k-wordmark span{font-family:var(--font-mono);font-size:.56rem;letter-spacing:.42em;color:var(--led);margin-top:3px}

/* ════════ hero ════════ */
.k-hero{position:relative;background:linear-gradient(160deg,var(--navy-900) 0%,var(--navy-950) 78%);color:var(--on-navy);overflow:hidden}
.k-hero-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:40px;align-items:stretch}
.k-hero-copy{padding-block:clamp(72px,10vw,128px) clamp(100px,12vw,150px)}
.k-hero h1{font-size:clamp(2.7rem,6vw,4.3rem);font-weight:700;letter-spacing:-.012em;margin-bottom:.4em}
.k-hero h1 .gold{font-style:italic}
.k-hero h1 .gold{color:var(--led)}
.k-hero .sub{color:var(--on-navy-muted);font-size:1.15rem;max-width:46ch;margin-bottom:1.9em}
.k-trust{display:flex;align-items:center;gap:12px;margin-top:34px}
.k-faces{display:flex}
.k-faces img{width:38px;height:38px;border-radius:50%;object-fit:cover;border:2px solid var(--navy-800);margin-right:-10px}
.k-trust p{margin:0;font-size:.88rem;color:var(--on-navy-muted)}
.k-photo{position:relative;min-height:420px}
.k-photo img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18%);
  mask-image:linear-gradient(90deg,transparent 0,#000 18%);
}
.k-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,24,48,0) 55%,var(--navy-950) 96%)}
@media (max-width:920px){
  .k-hero-grid{grid-template-columns:minmax(0,1fr)}
  .k-hero-copy{padding-block:56px 8px}
  .k-photo{min-height:340px;margin-inline:-24px}
  .k-photo img{-webkit-mask-image:none;mask-image:none}
}
/* gold wave divider */
.k-wave{display:block;width:100%;height:auto;margin-top:-1px}

/* ════════ feature band (honest, no invented stats) ════════ */
.k-band{background:var(--paper)}
.k-feats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px;text-align:center}
@media (max-width:880px){.k-feats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.k-feat .kf-ic{
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;margin:0 auto 14px;
  color:var(--accent-ink);border:1.5px solid var(--line);background:var(--surface);box-shadow:var(--card-shadow);
}
.k-feat b{display:block;font-family:var(--font-display);font-weight:700;font-size:1.06rem;color:var(--ink);margin-bottom:4px}
.k-feat span{font-size:.9rem;color:var(--muted)}

/* ════════ solution cards with photos ════════ */
.sol-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:44px}
@media (max-width:980px){.sol-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.sol-grid{grid-template-columns:1fr}}
.sol{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--card-shadow);display:flex;flex-direction:column;
  transition:transform .18s ease,box-shadow .18s ease;
}
.sol:hover{transform:translateY(-5px);box-shadow:0 20px 44px rgba(21,34,59,.16)}
.sol-img{position:relative;aspect-ratio:4/3;background:linear-gradient(160deg,var(--navy-800),var(--navy-950));overflow:hidden}
.sol-img img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.sol-img .sol-ic{
  position:absolute;right:14px;bottom:-18px;width:40px;height:40px;border-radius:50%;
  background:var(--navy-900);color:var(--led);display:grid;place-items:center;
  border:2px solid var(--surface);box-shadow:0 6px 16px rgba(21,34,59,.3);
}
.sol-img.icon-only{display:grid;place-items:center;color:var(--led)}
.sol-body{padding:24px 22px 20px}
.sol-body h3{font-size:1.14rem;font-weight:700;color:var(--ink);margin-bottom:.3em}
.sol-body p{color:var(--muted);font-size:.92rem;margin:0 0 14px}
.sol-more{font-family:var(--font-display);font-weight:600;font-size:.92rem;color:var(--accent-ink);text-decoration:none;display:inline-flex;gap:7px;align-items:center;transition:gap .15s ease}
.sol-more:hover{gap:11px}

/* ════════ split: stress-free ════════ */
.k-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:52px;align-items:center}
@media (max-width:880px){.k-split{grid-template-columns:1fr;gap:30px}}
.k-split-img{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--navy-line);aspect-ratio:4/5;width:min(100%,440px);justify-self:center;align-self:center;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.k-split-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 15%}
.k-split-img::after{content:"";position:absolute;inset:0;background:linear-gradient(200deg,rgba(11,24,48,0) 50%,rgba(11,24,48,.55))}

/* ════════ how it works on navy ════════ */
.k-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px;margin-top:50px;text-align:center;position:relative}
@media (max-width:880px){.k-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
.k-step .ks-ic{
  width:64px;height:64px;border-radius:50%;display:grid;place-items:center;margin:0 auto 16px;
  color:var(--led);border:1.5px solid var(--navy-line);background:var(--navy-800);
}
.k-step b{display:block;font-family:var(--font-display);font-weight:700;font-size:1.08rem;color:var(--on-navy);margin-bottom:5px}
.k-step span{font-size:.9rem;color:var(--on-navy-muted)}

/* ════════ gold CTA bar ════════ */
.k-gold{background:linear-gradient(120deg,#E4B44A,#C9992F);color:#231A05}
.k-gold-inner{display:flex;flex-wrap:wrap;align-items:center;gap:18px;padding-block:30px}
.k-gold-inner h2{margin:0;font-size:clamp(1.3rem,2.6vw,1.7rem);font-weight:800;color:#231A05}
.k-gold-inner p{margin:0;color:#4A3A12}
.k-gold .btn{margin-left:auto;background:var(--navy-950);color:#fff;box-shadow:0 8px 20px rgba(11,24,48,.35)}
.k-gold .btn:hover{transform:translateY(-2px)}
@media (max-width:720px){.k-gold .btn{margin-left:0}}

/* staggered reveals */
html.js .svc.reveal,html.js .sol.reveal,html.js .k-feat.reveal,html.js .k-step.reveal,html.js .k-mo.reveal{transition-delay:calc(var(--i,0)*.08s)}

/* ════════ beyond picture day — milestone services ════════ */
.k-more{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:40px}
@media (max-width:880px){.k-more{grid-template-columns:1fr}}
.k-mo{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--card-shadow)}
.k-mo-img{aspect-ratio:3/2;overflow:hidden;background:linear-gradient(160deg,var(--navy-800),var(--navy-950))}
.k-mo-img img{width:100%;height:100%;object-fit:cover;display:block}
.k-mo-body{padding:22px 24px 24px}
.k-mo b{display:block;font-family:var(--font-display);font-weight:700;font-size:1.08rem;color:var(--ink);margin-bottom:6px}
.k-mo p{font-size:.92rem;color:var(--muted);margin:0}

/* parallax helper */
[data-plx]{will-change:transform}
@media (prefers-reduced-motion: reduce){[data-plx]{transform:none!important}}

/* cards keep ink text inside dark bands */
.svc,.svc h3,.step,.step h3,.form-card,.form-card h3,.sol-body h3{color:var(--ink)}

/* ════════ gallery prints (restored for navy skin) ════════ */
.gal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;margin-top:48px}
@media (max-width:880px){.gal{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}}
.gal-col{display:flex;flex-direction:column;gap:26px;min-width:0}
.print{
  background:#fff;padding:10px 10px 38px;border-radius:4px;position:relative;
  box-shadow:0 14px 40px rgba(30,42,68,.15), 0 2px 8px rgba(30,42,68,.1);
  border:1px solid #EFE8D6;
}
.print img{display:block;width:100%;height:auto;border-radius:2px}
.print .cap{
  position:absolute;left:12px;bottom:12px;right:12px;
  font-family:var(--font-mono);font-size:.58rem;letter-spacing:.18em;color:#8A93A6;
  text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.gal .print:nth-child(odd){transform:rotate(-1.1deg)}
.gal .print:nth-child(even){transform:rotate(1.1deg)}
.gal .print{transition:transform .25s ease,box-shadow .25s ease}
.gal .print:hover{transform:rotate(0) translateY(-6px);box-shadow:0 24px 54px rgba(21,34,59,.24)}

/* ════════ filmstrip marquee (album soul, navy band) ════════ */
.filmstrip{background:var(--navy-950);border-block:1px solid var(--navy-line);padding:26px 0;overflow:hidden;position:relative}
.filmstrip::before,.filmstrip::after{
  content:"";position:absolute;left:0;right:0;height:10px;z-index:2;
  background-image:repeating-linear-gradient(90deg,transparent 0 10px,var(--navy-800) 10px 22px,transparent 22px 32px);
}
.filmstrip::before{top:7px}
.filmstrip::after{bottom:7px}
.film-track{display:flex;width:max-content;animation:filmroll 285s linear infinite;padding-block:14px}
.filmstrip:hover .film-track{animation-play-state:paused}
@keyframes filmroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.film-cell{flex:none;width:150px;margin-right:18px}
.film-cell img{display:block;width:100%;height:188px;object-fit:cover;border-radius:3px;border:1px solid var(--navy-line)}

/* hero print fan (multiple portraits) */
.k-hero-grid{align-items:center}
.print-fan{position:relative;min-height:540px;margin-block:48px}
.print-fan .print{position:absolute;padding:12px 12px 44px;box-shadow:0 22px 60px rgba(0,0,0,.5),0 3px 10px rgba(0,0,0,.3)}
.print-a{width:52%;left:0;top:24px;transform:rotate(-5deg);z-index:1}
.print-b{width:56%;right:0;top:0;transform:rotate(3.5deg);z-index:2}
.print-c{width:46%;left:22%;bottom:0;transform:rotate(-1.5deg);z-index:3}
@media (max-width:920px){
  .print-fan{min-height:440px;max-width:440px;margin:8px auto 40px;width:100%}
}