/*
Theme Name: Grimm
Theme URI: https://thegrimmcompany.com
Author: The Grimm Company
Description: The Grimm Company marketing site — "Low-Key Light" strategy-firm system. Custom classic theme.
Version: 1.0.0
License: Proprietary
Text Domain: grimm
*/

/* ============================================================
   THE GRIMM COMPANY — "Low-Key" design system (LIGHT) · shared
   Strategy-firm premium: warm paper canvas, near-black ink,
   amber accent, dark cinematic reserved for video modules.
   Loaded by every page. Page-specific one-offs stay inline.
   ============================================================ */
:root{
  --paper:#F7F5EF; --paper-2:#FFFFFF; --paper-3:#EFEBE2;
  --ink:#16140F; --ink-soft:#46423A; --muted:#6C675D; --muted-2:#8C8678;
  --hair:rgba(22,20,15,.12); --hair-2:rgba(22,20,15,.20);
  --ember:#A9631A; --ember-soft:rgba(169,99,26,.10);
  --night:#0B0C0E; --maxw:1180px; --r:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper); color:var(--ink); font-family:"Inter",system-ui,sans-serif;
  font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased; letter-spacing:-.01em}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 34px}
.wrap-narrow{max-width:860px; margin:0 auto; padding:0 34px}
h1,h2,h3,h4{font-family:"Fraunces",Georgia,serif; font-weight:500; line-height:1.06; letter-spacing:-.02em; color:var(--ink)}
.eyebrow{font-family:"Inter"; font-size:12.5px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--ember)}
.muted{color:var(--muted)}
a{color:inherit; text-decoration:none}
img{display:block; max-width:100%; height:auto}
.kicker{display:block; margin-bottom:16px}
em{font-style:italic; color:var(--ember)}

.input-slot{display:inline-block; font-family:"Inter"; font-size:11.5px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ember); background:var(--ember-soft); border:1px dashed var(--hair-2);
  padding:6px 12px; border-radius:8px}
.input-slot.on-dark{color:#E0A458; background:rgba(224,164,88,.14); border-color:rgba(224,164,88,.3)}

/* buttons */
.btn{display:inline-flex; align-items:center; gap:.55em; font-family:"Inter"; font-weight:600; font-size:15px;
  padding:14px 24px; border-radius:999px; transition:transform .15s ease, background .2s ease, color .2s ease; cursor:pointer}
.btn-primary{background:var(--ink); color:var(--paper)} .btn-primary:hover{transform:translateY(-1px); background:#000}
.btn-ghost{color:var(--ink); border:1px solid var(--hair-2)} .btn-ghost:hover{border-color:var(--ink)}
.btn .arr{font-size:1.05em; line-height:0}

/* nav */
nav{position:sticky; top:0; z-index:50; background:rgba(247,245,239,.82); backdrop-filter:blur(12px); border-bottom:1px solid var(--hair)}
.nav-in{display:flex; align-items:center; justify-content:space-between; height:76px}
.logo{display:flex; align-items:baseline; gap:.3ch; font-family:"Fraunces"; font-weight:600; font-size:21px; color:var(--ink)}
.logo .dot{color:var(--ember)}
.logo .sub{font-family:"Inter"; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted-2); align-self:center; margin-left:8px; font-weight:500}
.nav-links{display:flex; align-items:center; gap:32px; font-size:15px; color:var(--ink-soft); font-weight:500}
.nav-links a:hover{color:var(--ink)} .nav-links a.active{color:var(--ink); border-bottom:2px solid var(--ember); padding-bottom:3px}

/* bands */
.band{padding:92px 0; border-top:1px solid var(--hair)}
.band-sunk{padding:88px 0; background:var(--paper-3); border-top:1px solid var(--hair)}
.band-tight{padding:64px 0; border-top:1px solid var(--hair)}
.section-head{max-width:64ch}
.section-head h2{font-size:42px; margin-top:14px}
.section-head p{color:var(--muted); margin-top:18px; font-size:18px; max-width:60ch}

/* page hero (interior pages) */
.page-hero{padding:72px 0 24px}
.page-hero .crumb{font-size:13px; color:var(--muted-2); letter-spacing:.04em; margin-bottom:18px}
.page-hero .crumb a:hover{color:var(--ink)}
.page-hero h1{font-size:54px; max-width:18ch}
.page-hero .lede{font-size:20px; color:var(--ink-soft); margin-top:22px; max-width:46ch}
.page-hero .cta-row{display:flex; gap:16px; margin-top:30px; flex-wrap:wrap}

/* hero (home) */
.hero{padding:88px 0 92px}
.hero-grid{display:grid; grid-template-columns:1.08fr .92fr; gap:60px; align-items:center}
.hero h1{font-size:60px; margin:20px 0 0}
.hero .lede{font-size:20px; color:var(--ink-soft); margin-top:26px; max-width:34ch}
.hero .cta-row{display:flex; align-items:center; gap:18px; margin-top:36px; flex-wrap:wrap}

/* video card (dark inset) */
.video-card{position:relative; border-radius:var(--r); overflow:hidden; aspect-ratio:4/5; background:var(--night);
  box-shadow:0 36px 80px -42px rgba(22,20,15,.55); border:1px solid var(--hair)}
.video-card img{width:100%; height:100%; object-fit:cover; object-position:50% 26%}
.video-card .grad{position:absolute; inset:0; background:linear-gradient(180deg,rgba(11,12,14,0) 40%,rgba(11,12,14,.6) 100%)}
.video-card .play{position:absolute; left:22px; bottom:20px; display:flex; align-items:center; gap:12px; font-size:13.5px; color:#F4F1EA; font-weight:500}
.ring{width:46px; height:46px; border-radius:50%; border:1.5px solid rgba(244,241,234,.75); display:grid; place-items:center; backdrop-filter:blur(4px); flex:none}
.ring span{border-left:12px solid #F4F1EA; border-top:7.5px solid transparent; border-bottom:7.5px solid transparent; margin-left:3px}
.flag-dark{position:absolute; display:inline-flex; font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:#F4F1EA; background:rgba(11,12,14,.7); border:1px solid rgba(244,241,234,.25); padding:6px 11px; border-radius:999px; top:16px; left:16px}

/* problem / symptoms */
.problem h2{font-size:46px; max-width:24ch; line-height:1.1}
.symptoms{display:grid; grid-template-columns:1fr 1fr; gap:18px 40px; margin-top:40px; max-width:880px}
.symptom{display:flex; gap:14px; align-items:flex-start; font-size:17px; color:var(--ink-soft); padding-top:18px; border-top:1px solid var(--hair)}
.symptom .x{flex:none; color:var(--ember); font-family:"Fraunces"; font-weight:600}

/* moat / 3-col */
.moat{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:48px}
.mcol{padding:30px 26px; background:var(--paper-2); border:1px solid var(--hair); border-radius:var(--r)}
.mcol .num{font-family:"Fraunces"; font-size:14px; color:var(--ember); font-weight:600; letter-spacing:.04em}
.mcol h3{font-size:25px; margin-top:14px} .mcol p{color:var(--muted); margin-top:12px; font-size:15.5px}
.moat-close{margin-top:34px; font-family:"Fraunces"; font-size:24px; line-height:1.32; max-width:40ch; color:var(--ink)}

/* split section (copy + media) */
.split{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center}
.split.flip .media{order:-1}
.split .media{border-radius:var(--r); overflow:hidden; aspect-ratio:4/3; background:var(--night); border:1px solid var(--hair); position:relative}
.split .media img{width:100%;height:100%;object-fit:cover}
.split h2{font-size:38px} .split p{color:var(--ink-soft); margin-top:18px; font-size:17px}

/* feature list */
.flist{list-style:none; margin-top:24px; display:flex; flex-direction:column; gap:14px}
.flist li{display:flex; gap:13px; align-items:flex-start; font-size:16.5px; color:var(--ink-soft)}
.flist li .ic{flex:none; color:var(--ember); font-weight:700}
.flist.dark li{color:#cfcabf} .flist.dark li .ic{color:#E0A458}

/* who it's for / not for */
.fit{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:40px}
.fit .col{padding:28px 26px; border-radius:var(--r); border:1px solid var(--hair)}
.fit .yes{background:var(--paper-2)} .fit .no{background:transparent}
.fit h4{font-family:"Inter"; font-size:13px; letter-spacing:.14em; text-transform:uppercase; margin-bottom:16px}
.fit .yes h4{color:var(--ember)} .fit .no h4{color:var(--muted-2)}
.fit ul{list-style:none; display:flex; flex-direction:column; gap:11px}
.fit li{font-size:15.5px; display:flex; gap:11px; color:var(--ink-soft)} .fit li .ic{flex:none}
.fit .yes li .ic{color:var(--ember)} .fit .no li .ic{color:var(--muted-2)}

/* steps */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:48px}
.step{padding-top:26px; border-top:2px solid var(--ink)}
.step .n{font-family:"Fraunces"; font-size:15px; color:var(--ember); font-weight:600}
.step h3{font-size:23px; margin-top:12px} .step p{color:var(--muted); margin-top:10px; font-size:15.5px}

/* dark feature module (founder film / system showcase / stakes) */
.dark-mod{background:var(--night); border-radius:var(--r); overflow:hidden; display:grid; grid-template-columns:1.15fr .85fr; align-items:stretch; border:1px solid var(--hair)}
.dark-mod .copy{padding:52px 44px; color:#F4F1EA}
.dark-mod .copy .eyebrow{color:#E0A458}
.dark-mod .copy h2,.dark-mod .copy h3{color:#F4F1EA}
.dark-mod .copy p{color:#A9A39A; margin-top:18px; font-size:16.5px}
.dark-mod .media{position:relative; min-height:380px; background:#000}
.dark-mod .media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 24%}
.dark-mod .media .play{position:absolute; inset:0; display:grid; place-items:center}
.dark-mod .media .ring{width:62px;height:62px;border-width:2px} .dark-mod .media .ring span{border-left-width:16px; border-top-width:10px; border-bottom-width:10px}

/* logo wall */
.logos-lead{text-align:center; color:var(--muted); font-size:15px; max-width:54ch; margin:0 auto 34px}
.logo-wall{display:grid; grid-template-columns:repeat(6,1fr); gap:14px}
.logo-cell{height:64px; display:grid; place-items:center; text-align:center; background:var(--paper-2); border:1px solid var(--hair); border-radius:10px;
  font-family:"Inter"; font-weight:600; font-size:13px; color:var(--ink-soft); padding:0 8px; line-height:1.15}

/* stakes / dark band */
.stakes{background:var(--ink); color:var(--paper); border-radius:var(--r); padding:56px 48px; text-align:center}
.stakes .eyebrow{color:#E0A458} .stakes h2{color:var(--paper); font-size:34px; max-width:24ch; margin:14px auto 0}
.stakes p{color:#B7B2A8; margin-top:18px; max-width:58ch; margin-left:auto; margin-right:auto}

/* pricing tier */
.tier{background:var(--paper-2); border:1px solid var(--hair-2); border-radius:var(--r); padding:36px 34px; max-width:560px}
.tier .price{font-family:"Fraunces"; font-size:40px; color:var(--ink); margin:6px 0 2px}
.tier .price small{font-size:16px; color:var(--muted)}
.deliverables{list-style:none; margin-top:22px; display:flex; flex-direction:column; gap:12px}
.deliverables li{display:flex; gap:12px; font-size:16px; color:var(--ink-soft)} .deliverables li .ic{color:var(--ember); flex:none}

/* faq */
.faq{max-width:820px; margin-top:30px}
.faq details{border-top:1px solid var(--hair); padding:22px 0}
.faq summary{font-family:"Fraunces"; font-size:21px; cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:20px}
.faq summary::-webkit-details-marker{display:none} .faq summary .pm{color:var(--ember); font-family:"Inter"; font-weight:500}
.faq p{color:var(--muted); margin-top:14px; font-size:16px; max-width:68ch}

/* intake / form */
.form-card{background:var(--paper-2); border:1px solid var(--hair); border-radius:var(--r); padding:38px 34px; max-width:640px}
.form-card label{display:block; font-size:13px; font-weight:600; letter-spacing:.04em; color:var(--ink-soft); margin:18px 0 7px}
.form-card input,.form-card textarea{width:100%; padding:13px 15px; border:1px solid var(--hair-2); border-radius:10px; background:#fff; font:inherit; color:var(--ink)}
.form-card textarea{min-height:110px; resize:vertical}
.form-note{font-size:13px; color:var(--muted-2); margin-top:14px}

/* final cta */
.final{text-align:center; padding:104px 0}
.final h2{font-size:48px; max-width:20ch; margin:0 auto}
.final .cta-row{display:flex; gap:18px; justify-content:center; margin-top:34px; flex-wrap:wrap}
.final .cta-note{color:var(--muted); font-size:14px; margin-top:20px}

/* footer */
footer{border-top:1px solid var(--hair); padding:46px 0; color:var(--muted); font-size:14px; background:var(--paper-3)}
.foot-in{display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:22px}
.foot-in a{color:var(--ink-soft)} .foot-in a:hover{color:var(--ink)}
.foot-nap{font-size:13.5px; color:var(--muted); line-height:1.7}

@media(max-width:900px){
  .wrap,.wrap-narrow{padding:0 22px}
  .hero{padding:46px 0 60px} .hero-grid{grid-template-columns:1fr; gap:38px} .hero h1{font-size:42px}
  .video-card{aspect-ratio:3/4; max-width:440px}
  .nav-links{display:none} .logo .sub{display:none} .nav-in .btn-primary{padding:11px 17px; font-size:14px}
  .moat,.steps,.symptoms,.split,.fit{grid-template-columns:1fr; gap:0}
  .split{gap:32px} .split.flip .media{order:0}
  .moat .mcol,.fit .col{margin-bottom:16px} .step,.symptom{padding:20px 0}
  .dark-mod{grid-template-columns:1fr} .dark-mod .media{min-height:260px} .dark-mod .copy{padding:34px 26px}
  .logo-wall{grid-template-columns:repeat(2,1fr)}
  .page-hero{padding:44px 0 16px} .page-hero h1{font-size:38px}
  .section-head h2,.problem h2,.split h2{font-size:30px} .final h2{font-size:32px} .moat-close{font-size:20px}
  .band,.band-sunk{padding:58px 0}
}

/* prose — generic page/post body (page.php, single.php) */
.prose{font-size:18px; color:var(--ink-soft); line-height:1.7}
.prose h2{font-size:30px; margin:38px 0 14px}
.prose h3{font-size:23px; margin:30px 0 10px}
.prose p{margin:0 0 18px}
.prose ul,.prose ol{margin:0 0 18px 1.3em}
.prose li{margin:6px 0}
.prose a{color:var(--ember); text-decoration:underline; text-underline-offset:2px}
.prose img{border-radius:var(--r); margin:24px 0}
.prose blockquote{border-left:3px solid var(--ember); padding-left:20px; margin:24px 0; font-family:"Fraunces",serif; font-size:22px; color:var(--ink)}
.pagination{display:flex; gap:10px; flex-wrap:wrap} .pagination .page-numbers{padding:8px 14px; border:1px solid var(--hair-2); border-radius:8px} .pagination .current{background:var(--ink); color:var(--paper)}

/* article featured image — cap height, crop nicely instead of stretch */
.single .wp-post-image,.post-thumb img{width:100%;height:auto;max-height:520px;object-fit:cover;border-radius:var(--r)}