/*
Theme Name: Kevin Sturmer
Theme URI: https://kevinsturmer.com
Author: Kevin Sturmer
Description: Custom portfolio theme for kevinsturmer.com (v2). Dark "visual brand storyteller" homepage with a self-hosted hero video, interactive testimonial wall, and a dynamic Selected Work feed, plus a Project custom post type powering the portfolio archive and case-study pages, and dedicated About and Work-with-Kevin pages. One sans typeface (Gotham, Montserrat fallback). Contact via Fluent Forms.
Version: 2.2.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kevinsturmer
*/

/* =========================================================================
   style.css is the HOMEPAGE (front-page) stylesheet: the dark navy brand
   look. It is enqueued only on the front page. Inner pages load their own
   self-contained stylesheets from /assets/css/ so nothing cross-contaminates.
   ========================================================================= */

  /* Navy (#253450) portfolio homepage. One sans typeface, headings Bold not Black */
  :root{
    --bg:#253450; --bg2:#1F2D45; --card:#2C3E5D; --fg:#F1F5FB; --muted:#AEBAD2;
    --line:rgba(241,245,251,.14); --line2:rgba(241,245,251,.26);
    --accent:#8FB9E8; --accent-ink:#13203A;
    --font:'Gotham','Montserrat',Arial,sans-serif;
    color-scheme:dark;
  }
  *{box-sizing:border-box}
  html,body{margin:0}
  body{background:var(--bg);color:var(--fg);font-family:var(--font);line-height:1.6;-webkit-font-smoothing:antialiased}
  a{color:inherit;text-decoration:none}
  img{max-width:100%}
  .wrap{max-width:1180px;margin-inline:auto;padding-inline:clamp(16px,4vw,44px)}
  .eyebrow{font-size:.74rem;font-weight:600;text-transform:uppercase;letter-spacing:.22em;color:var(--accent);margin:0 0 1rem}
  h2{font-weight:700;font-size:clamp(1.8rem,4.4vw,2.6rem);line-height:1.1;letter-spacing:-.01em;margin:0;text-wrap:balance}
  section{padding-block:clamp(3rem,8vw,5.5rem)}
  #work{background:linear-gradient(180deg,#253450 0%,#212e49 100%);padding-top:clamp(1.3rem,3vw,2rem)}
  .brand{display:flex;align-items:center;gap:11px}
  .brand .klogo{height:30px;width:auto;display:block}
  .brand .nm{font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.2em}
  .hero{position:relative;min-height:min(86vh,760px);display:flex;align-items:center;overflow:hidden}
  .hero .bg{position:absolute;inset:0;z-index:0;overflow:hidden}
  .hero .bg img{width:100%;height:100%;object-fit:cover}
  .hero .bg .vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0;pointer-events:none}
  .hero .scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,rgba(26,40,66,.96) 0%,rgba(26,40,66,.84) 34%,rgba(26,40,66,.44) 62%,rgba(26,40,66,.12) 100%),linear-gradient(0deg,rgba(26,40,66,.9) 0%,rgba(26,40,66,0) 30%)}
  .hero .wrap{position:relative;z-index:2;width:100%}
  .kick{font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.24em;color:var(--accent);margin:0 0 1.1rem}
  .hero h1{font-weight:700;font-size:clamp(2.7rem,7.4vw,5rem);line-height:1.02;letter-spacing:-.02em;margin:0;max-width:15ch;text-wrap:balance}
  .hero .val{font-size:clamp(1rem,1.7vw,1.16rem);color:#CBD6EC;max-width:42ch;margin:1.4rem 0 0;font-weight:400}
  .cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:2rem}
  .btn{display:inline-flex;align-items:center;gap:9px;border-radius:999px;padding:14px 26px;font-size:.82rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;cursor:pointer;border:0}
  .btn.primary{background:var(--accent);color:var(--accent-ink)}
  .btn.primary:hover{background:#A6CAF0}
  .btn.ghost{border:1px solid var(--line2);background:none;color:var(--fg)} .btn.ghost:hover{border-color:var(--accent);color:var(--accent)}
  .proof{background:#253450;border-top:1px solid var(--line)}
  .proof .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,4vw,44px);padding-block:clamp(1.8rem,4vw,2.6rem)}
  .stat .fig{font-weight:700;font-size:clamp(1.7rem,3.8vw,2.4rem);line-height:1;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
  .stat .fig b{color:var(--accent);font-weight:700}
  .stat .lab{font-size:.72rem;font-weight:500;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-top:.5rem;line-height:1.45}
  @media(max-width:640px){.proof .wrap{grid-template-columns:1fr;gap:1.1rem}}
  .sig{position:relative;background:#253450;overflow:hidden}
  .sig .aud{position:relative;line-height:0}
  .sig .crowdsvg{display:block;width:100%;height:auto}
  .sig .quote{position:absolute;top:0;left:0;right:0;z-index:2;padding-top:clamp(1.3rem,4.2vw,2.6rem)}
  .sig .q{font-weight:700;font-size:clamp(1.75rem,4.25vw,2.875rem);line-height:1.26;letter-spacing:-.01em;margin:0;max-width:36ch;color:var(--fg);background:none;border:0;border-radius:0;padding:0}
  .sig .sigbar{position:relative;z-index:2;background:#253450}
  .sig .sigbar .wrap{padding-block:13px}
  .sig .s{font-size:clamp(1rem,1.7vw,1.16rem);font-weight:400;color:#CBD6EC;margin:0;line-height:1.5}
  .sig .s .lead{color:#fff}
  .sig .s a{color:var(--accent)} .sig .s a:hover{text-decoration:underline}
  .sec-head{margin-bottom:clamp(1.8rem,4vw,2.6rem)}
  .feature{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(20px,4vw,40px);align-items:center;background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden}
  .feature .shot{min-width:0;height:100%}
  .feature .shot img{width:100%;height:100%;object-fit:cover;display:block;min-height:260px}
  .feature .body{padding:clamp(22px,3.5vw,38px) clamp(22px,3.5vw,38px) clamp(22px,3.5vw,38px) 0}
  .tagline{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:var(--accent);margin:0 0 .9rem}
  .feature h3{font-weight:700;font-size:clamp(1.4rem,3vw,1.9rem);line-height:1.14;letter-spacing:-.01em;margin:0 0 .8rem;text-wrap:balance}
  .feature p{color:var(--muted);margin:0 0 1.3rem;max-width:42ch}
  .readlink{font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--fg);border-bottom:1px solid var(--accent);padding-bottom:3px}
  .readlink:hover{color:var(--accent)}
  @media(max-width:720px){.feature{grid-template-columns:1fr}.feature .body{padding:0 24px 28px}.feature .shot img{min-height:200px}}
  .work-more{margin-top:clamp(28px,4.5vw,46px);display:flex;justify-content:center}

  /* interactive testimonial wall */
  .tw-wall{display:grid;grid-template-columns:2.3fr .9fr .9fr;gap:16px;height:468px;margin-top:clamp(1.8rem,4vw,2.6rem);transition:grid-template-columns .55s cubic-bezier(.2,.75,.2,1)}
  .tw-wall:has(.tw-card:nth-child(2):hover){grid-template-columns:.9fr 2.3fr .9fr}
  .tw-wall:has(.tw-card:nth-child(3):hover){grid-template-columns:.9fr .9fr 2.3fr}
  .tw-card{position:relative;min-width:0;border-radius:18px;overflow:hidden;cursor:default;box-shadow:0 16px 40px rgba(0,0,0,.34);outline:1px solid rgba(241,245,251,.08);outline-offset:-1px}
  .tw-card .tw-face{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 26%}
  .tw-card .tw-shade{position:absolute;inset:0;transition:background .5s;background:linear-gradient(180deg,rgba(12,19,35,0) 38%,rgba(12,19,35,.9) 100%)}
  .tw-card .tw-content{position:absolute;left:0;right:0;bottom:0;padding:24px 26px;color:#fff}
  .tw-card .tw-who b{display:block;font-size:1.04rem;font-weight:700;letter-spacing:-.01em;white-space:nowrap}
  .tw-card .tw-who span{display:block;font-size:.8rem;color:#c3cfe4;margin-top:2px;white-space:nowrap}
  .tw-card .tw-quote{margin:0 0 15px;font-size:1.06rem;line-height:1.5;font-weight:500;width:min(30rem,46vw);opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .35s ease, transform .35s ease}
  .tw-card:nth-child(1) .tw-shade,.tw-card:hover .tw-shade{background:linear-gradient(180deg,rgba(12,19,35,.18) 0%,rgba(12,19,35,.55) 40%,rgba(12,19,35,.92) 100%)}
  .tw-card:nth-child(1) .tw-quote,.tw-card:hover .tw-quote{opacity:1;transform:none;transition:opacity .5s ease, transform .55s cubic-bezier(.2,.75,.2,1)}
  .tw-wall:has(.tw-card:nth-child(2):hover) .tw-card:nth-child(1) .tw-quote,
  .tw-wall:has(.tw-card:nth-child(3):hover) .tw-card:nth-child(1) .tw-quote{opacity:0;transform:translateY(12px);transition:opacity .3s ease, transform .3s ease}
  .tw-wall:has(.tw-card:nth-child(2):hover) .tw-card:nth-child(1) .tw-shade,
  .tw-wall:has(.tw-card:nth-child(3):hover) .tw-card:nth-child(1) .tw-shade{background:linear-gradient(180deg,rgba(12,19,35,0) 38%,rgba(12,19,35,.9) 100%)}
  @media(max-width:760px){
    .tw-wall{grid-template-columns:1fr;height:auto}
    .tw-card{min-height:380px}
    .tw-card .tw-quote{width:auto;opacity:1;transform:none}
    .tw-card .tw-shade{background:linear-gradient(180deg,rgba(12,19,35,.2) 0%,rgba(12,19,35,.6) 42%,rgba(12,19,35,.93) 100%)}
  }

  .quotes{background:var(--bg2);border-block:1px solid var(--line)}
  .about .wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(24px,5vw,56px);align-items:center}
  .portrait{aspect-ratio:4/5;border-radius:16px;overflow:hidden;background:var(--card)}
  .portrait img{width:100%;height:100%;object-fit:cover;display:block}
  .about h2{margin-bottom:1rem}
  .about p{color:var(--muted);max-width:46ch}
  .about .more{display:inline-block;margin-top:.6rem;font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--fg);border-bottom:1px solid var(--accent);padding-bottom:3px}
  .about .more:hover{color:var(--accent)}
  @media(max-width:720px){.about .wrap{grid-template-columns:1fr}.portrait{max-width:300px}}
  .contact{text-align:center;border-top:1px solid var(--line)}
  .contact h2{max-width:20ch;margin:0 auto 1rem}
  .contact .sub{color:var(--muted);max-width:40ch;margin:0 auto 2rem}
  .cform{max-width:460px;margin:0 auto;text-align:left;display:flex;flex-direction:column;gap:14px}
  .field{display:flex;flex-direction:column;gap:6px}
  .field label{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
  .field input,.field textarea{font-family:var(--font);font-size:.98rem;color:var(--fg);background:var(--bg2);border:1px solid var(--line2);border-radius:10px;padding:12px 14px;resize:vertical}
  .field input:focus,.field textarea:focus{outline:none;border-color:var(--accent)}
  .cform .btn{justify-content:center;margin-top:4px}
  .formnote{font-size:.72rem;color:var(--muted);text-align:center;margin:.3rem 0 0}
  .contact .ln{display:block;font-size:.82rem;color:var(--muted);margin-top:1.4rem}
  .contact .ln a{color:var(--accent)}
  footer{border-top:1px solid var(--line);background:var(--bg2)}
  footer .wrap{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;padding-block:26px}
  footer .fl{display:flex;gap:22px;font-size:.74rem;font-weight:500;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
  footer .fl a:hover{color:var(--accent)}
  footer .copy{flex-basis:100%;font-size:.72rem;letter-spacing:.04em;color:var(--muted)}
  .note{text-align:center;color:var(--muted);font-size:.68rem;letter-spacing:.06em;padding:16px;opacity:.7}
  :focus-visible{outline:2px solid var(--accent);outline-offset:3px}


/* ---------- Fluent Forms skin (matches dark theme) ---------- */
.contact .cform{max-width:460px;margin:0 auto;text-align:left}
.contact .fluentform .ff-el-group{margin-bottom:14px}
.contact .fluentform .ff-el-input--label label{font-size:.78rem;color:var(--muted);font-weight:500;margin-bottom:6px;display:block}
.contact .fluentform .ff-el-form-control{width:100%;background:var(--bg2);border:1px solid var(--line);color:var(--fg);border-radius:10px;padding:12px 14px;font:inherit;font-size:.95rem}
.contact .fluentform .ff-el-form-control:focus{outline:none;border-color:var(--accent);box-shadow:none}
.contact .fluentform textarea.ff-el-form-control{min-height:120px;resize:vertical}
.contact .fluentform ::placeholder{color:#7f8db0}
.contact .fluentform .ff-btn-submit{background:var(--accent);color:var(--accent-ink);border:0;border-radius:999px;padding:13px 26px;font:inherit;font-weight:700;cursor:pointer;width:100%;margin-top:4px}
.contact .fluentform .ff-btn-submit:hover{filter:brightness(1.06)}
.contact .ff-message-success{color:var(--fg);margin-top:10px}
.contact .error,.contact .text-danger{color:#ffb4b4}