:root{
    --ink: #12161d;
    --ink-2: #1b212b;
    --ink-line: rgba(239,234,224,0.14);
    --parchment: #efeae0;
    --parchment-2: #e2dbc9;
    --brass: #b8935a;
    --brass-bright: #cfa96f;
    --slate: #5c7a80;
    --cream-text: #efeae0;
    --cream-text-dim: rgba(239,234,224,0.72);
    --ink-text: #1b212b;
    --ink-text-dim: rgba(27,33,43,0.68);

    --serif: 'Fraunces', serif;
    --sans: 'Inter', sans-serif;
    --mono: 'IBM Plex Mono', monospace;

    --fs-hero: clamp(2.4rem, 4.4vw + 1rem, 4.4rem);
    --fs-h2: clamp(1.7rem, 2.4vw + 1rem, 2.6rem);
    --fs-h3: 1.3rem;
    --fs-body: 1.05rem;
    --fs-small: 0.9rem;

    --nav-h: 84px;
    --maxw: 1180px;
    --ease: cubic-bezier(.22,.61,.36,1);
  }

  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family: var(--sans);
    background: var(--parchment);
    color: var(--ink-text);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
  }
  img{max-width:100%; display:block;}
  a{color:inherit; text-decoration:none;}
  ul{list-style:none;}
  section{position:relative;}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 2.5rem;}
  @media (max-width:600px){ .wrap{padding:0 1.5rem;} }

  h1,h2,h3{font-family:var(--serif); font-weight:500; letter-spacing:-0.01em; line-height:1.1;}
  h2{font-size:var(--fs-h2); color:inherit;}
  h3{font-size:var(--fs-h3); font-weight:500;}

  .eyebrow{
    display:flex; align-items:center; gap:0.75rem;
    font-family:var(--mono); font-size:0.75rem; letter-spacing:0.16em; text-transform:uppercase;
    color: var(--brass); margin-bottom:1.25rem;
  }
  .eyebrow::before{content:""; width:28px; height:1px; background:var(--brass); display:block;}

  .btn{
    display:inline-flex; align-items:center; gap:0.5rem;
    font-family:var(--mono); font-size:0.8rem; letter-spacing:0.08em; text-transform:uppercase;
    padding:0.95rem 1.6rem; border:1px solid var(--brass); color:var(--cream-text);
    transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
    white-space:nowrap;
  }
  .btn-solid{ background:var(--brass); color:var(--ink); border-color:var(--brass); }
  .btn-solid:hover{ background:var(--brass-bright); border-color:var(--brass-bright); }
  .btn-line{ background:transparent; }
  .btn-line:hover{ background: rgba(184,147,90,0.12); }
  .btn-line.dark{ color:var(--ink-text); border-color: var(--ink-text); }
  .btn-line.dark:hover{ background: rgba(27,33,43,0.06); }

  a:focus-visible, button:focus-visible{ outline:2px solid var(--brass); outline-offset:3px; }

  /* -------- Skip link -------- */
  .skip-link{
    position:absolute; left:-999px; top:auto;
    background:var(--brass); color:var(--ink); padding:0.75rem 1.25rem; font-family:var(--mono); font-size:0.8rem; z-index:200;
  }
  .skip-link:focus{ left:1rem; top:1rem; }

  /* -------- Nav -------- */
  header.nav{
    position:fixed; top:0; left:0; right:0; z-index:100; height:var(--nav-h);
    background:rgba(18,22,29,0.88); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    border-bottom:1px solid var(--ink-line);
  }
  .nav-inner{ height:100%; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }
  .wrap.nav-inner{ max-width:1360px; }
  .wordmark{ display:flex; align-items:baseline; gap:0.55rem; color:var(--cream-text); white-space:nowrap; flex-shrink:0; }
  .wordmark .name{ font-family:var(--serif); font-size:1.25rem; letter-spacing:0.02em; }
  .wordmark .sub{ font-family:var(--mono); font-size:0.62rem; letter-spacing:0.2em; color:var(--brass); }
  .nav-links{ display:flex; align-items:center; gap:1.4rem; flex-wrap:nowrap; }
  .nav-links a{
    font-family:var(--mono); font-size:0.72rem; letter-spacing:0.05em; text-transform:uppercase;
    color: var(--cream-text-dim); position:relative; padding:0.3rem 0; white-space:nowrap;
  }
  .nav-links a::after{
    content:""; position:absolute; left:0; bottom:-2px; width:0; height:1px; background:var(--brass);
    transition:width .3s var(--ease);
  }
  .nav-links a:hover{ color:var(--cream-text); }
  .nav-links a:hover::after{ width:100%; }
  .nav-cta{ display:flex; align-items:center; gap:1.75rem; }
  .menu-toggle{ display:none; background:none; border:none; color:var(--cream-text); cursor:pointer; padding:0.5rem; }
  .menu-toggle svg{ width:22px; height:22px; }

  @media (max-width:940px){
    .nav-links{
      position:fixed; inset:var(--nav-h) 0 0 0; height:calc(100vh - var(--nav-h));
      background:var(--ink); flex-direction:column; justify-content:center; gap:1.9rem;
      transform:translateY(-8px); opacity:0; pointer-events:none;
      transition:opacity .3s var(--ease), transform .3s var(--ease);
    }
    .nav-links.open{ opacity:1; pointer-events:auto; transform:translateY(0); }
    .nav-links a{ font-size:1rem; }
    .menu-toggle{ display:block; }
    .nav-cta .btn-line{ display:none; }
  }

  /* -------- Elevation rail (signature scroll device) -------- */
  .rail{
    position:fixed; right:2.1rem; top:50%; transform:translateY(-50%); z-index:90;
    display:flex; flex-direction:column; align-items:center; gap:0; height:280px; justify-content:space-between;
  }
  .rail-line{ position:absolute; top:0; bottom:0; left:50%; width:1px; background:rgba(184,147,90,0.35); transform:translateX(-50%); }
  .rail-item{ position:relative; display:flex; align-items:center; z-index:2; }
  .rail-dot{ width:7px; height:7px; border-radius:50%; background:var(--ink-line); border:1px solid rgba(184,147,90,0.5); transition:background .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease); }
  .rail-label{
    position:absolute; right:1.15rem; top:50%; transform:translateY(-50%);
    font-family:var(--mono); font-size:0.63rem; letter-spacing:0.14em; text-transform:uppercase; white-space:nowrap;
    color: var(--ink-text-dim); opacity:0; transform:translateY(-50%) translateX(6px);
    transition:opacity .3s var(--ease), transform .3s var(--ease); pointer-events:none;
  }
  .rail-item.active .rail-dot{ background:var(--brass); transform:scale(1.5); box-shadow:0 0 0 4px rgba(184,147,90,0.18); }
  .rail-item.active .rail-label{ opacity:1; transform:translateY(-50%) translateX(0); color:var(--ink-text); }
  @media (max-width:1180px){ .rail{ display:none; } }

  /* -------- Hero -------- */
  .hero{
    background:radial-gradient(120% 100% at 78% 8%, #1a212c 0%, var(--ink) 55%), var(--ink);
    color:var(--cream-text); padding:calc(var(--nav-h) + 6.5rem) 0 0; overflow:hidden;
  }
  .hero-inner{ position:relative; display:grid; grid-template-columns:1fr; gap:1rem; padding-bottom:5rem; }
  .hero-arcs{ position:absolute; top:-4rem; right:-8rem; width:640px; height:640px; opacity:0.55; pointer-events:none; }
  @media (max-width:700px){ .hero-arcs{ width:420px; height:420px; right:-10rem; } }
  .hero h1{ font-size:var(--fs-hero); max-width:15ch; margin-bottom:1.6rem; }
  .hero h1 em{ font-style:italic; color:var(--brass-bright); }
  .hero p.lede{ font-size:1.15rem; color:var(--cream-text-dim); max-width:46ch; margin-bottom:2.5rem; }
  .hero-actions{ display:flex; align-items:center; gap:1.75rem; flex-wrap:wrap; }
  .hero-actions .quiet{ font-family:var(--mono); font-size:0.8rem; color:var(--cream-text-dim); border-bottom:1px solid rgba(239,234,224,0.3); padding-bottom:2px; }
  .hero-actions .quiet:hover{ color:var(--cream-text); border-color:var(--cream-text); }

  .horizon-rule{ height:1px; background:linear-gradient(90deg, transparent, var(--brass) 12%, var(--brass) 88%, transparent); }

  .facts-strip{ background:var(--ink-2); border-top:1px solid var(--ink-line); }
  .facts-grid{ display:grid; grid-template-columns:repeat(4,1fr); }
  .facts-grid li{
    font-family:var(--mono); font-size:0.72rem; letter-spacing:0.05em; text-transform:uppercase;
    color:var(--cream-text-dim); padding:1.35rem 1.75rem; border-left:1px solid var(--ink-line);
  }
  .facts-grid li:first-child{ border-left:none; }
  .facts-grid li strong{ display:block; color:var(--cream-text); font-family:var(--sans); font-size:0.95rem; text-transform:none; letter-spacing:0; margin-bottom:0.2rem; font-weight:600; }
  @media (max-width:900px){
    .facts-grid{ grid-template-columns:repeat(2,1fr); }
    .facts-grid li:nth-child(3){ border-left:none; }
  }
  @media (max-width:560px){
    .facts-grid{ grid-template-columns:1fr; }
    .facts-grid li{ border-left:none !important; border-top:1px solid var(--ink-line); }
    .facts-grid li:first-child{ border-top:none; }
  }

  /* -------- Reveal -------- */
  .reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
  .reveal.in{ opacity:1; transform:translateY(0); }
  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    .reveal{ opacity:1; transform:none; transition:none; }
    .rail-dot, .rail-label, .nav-links a::after{ transition:none; }
  }

  /* -------- Section spacing / alt backgrounds -------- */
  .section{ padding:6.5rem 0; }
  @media (max-width:700px){ .section{ padding:4.5rem 0; } }
  .on-parchment{ background:var(--parchment); color:var(--ink-text); }
  .on-ink{ background:var(--ink); color:var(--cream-text); }
  .on-ink .eyebrow{ color:var(--brass); }

  /* -------- Problem -------- */
  .problem-grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:4rem; align-items:start; }
  @media (max-width:860px){ .problem-grid{ grid-template-columns:1fr; gap:2.5rem; } }
  .problem-grid p{ color:var(--ink-text-dim); font-size:var(--fs-body); margin-top:1.2rem; max-width:52ch; }
  .pull-quote{
    font-family:var(--serif); font-style:italic; font-size:1.7rem; line-height:1.35;
    color:var(--ink-text); border-left:1px solid var(--brass); padding-left:1.75rem;
  }
  .pull-quote span{ display:block; font-family:var(--mono); font-style:normal; font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--slate); margin-top:1rem; }

  /* -------- Approach -------- */
  .steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:3.5rem; position:relative; }
  .steps::before{ content:""; position:absolute; top:0.75rem; left:6%; right:6%; height:1px; background:rgba(184,147,90,0.3); }
  @media (max-width:860px){ .steps{ grid-template-columns:1fr; gap:2.75rem; } .steps::before{ display:none; } }
  .step{ position:relative; padding-right:2rem; }
  .step .num{ font-family:var(--mono); font-size:0.8rem; color:var(--brass); display:block; margin-bottom:1.4rem; position:relative; z-index:2; }
  .step .num::before{ content:""; display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--ink); border:1px solid var(--brass); margin-right:0.6rem; vertical-align:middle; }
  .step h3{ color:var(--cream-text); margin-bottom:0.6rem; }
  .step p{ color:var(--cream-text-dim); font-size:0.98rem; max-width:32ch; }

  /* -------- Services -------- */
  .cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.75rem; margin-top:3.5rem; }
  @media (max-width:900px){ .cards{ grid-template-columns:1fr; } }
  .card{
    background:var(--parchment-2); border:1px solid rgba(27,33,43,0.08); padding:2.4rem 2.1rem;
    display:flex; flex-direction:column; gap:1.4rem; transition:transform .4s var(--ease), box-shadow .4s var(--ease);
  }
  .card:hover{ transform:translateY(-4px); box-shadow:0 18px 34px -22px rgba(27,33,43,0.35); }
  .card .tag{ font-family:var(--mono); font-size:0.68rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--slate); }
  .card p{ color:var(--ink-text-dim); font-size:0.98rem; flex-grow:1; }
  .card .learn{ font-family:var(--mono); font-size:0.78rem; letter-spacing:0.05em; color:var(--ink-text); border-bottom:1px solid var(--brass); align-self:flex-start; padding-bottom:2px; }
  .card .learn:hover{ color:var(--brass); }

  /* -------- Partners -------- */
  .partners{ background:var(--ink-2); color:var(--cream-text); }
  .partners .wrap{ display:grid; grid-template-columns:1fr 1fr; gap:3.5rem; align-items:center; }
  @media (max-width:860px){ .partners .wrap{ grid-template-columns:1fr; } }
  .partners p{ color:var(--cream-text-dim); font-size:var(--fs-body); margin-bottom:2rem; max-width:48ch; }

  /* -------- About -------- */
  .about-grid{ display:grid; grid-template-columns:0.8fr 1.2fr; gap:3.5rem; align-items:start; }
  @media (max-width:860px){ .about-grid{ grid-template-columns:1fr; } }
  .portrait{
    aspect-ratio:3/4; border:1px solid rgba(184,147,90,0.55); background:var(--ink-2);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.75rem;
  }
  .portrait .mono{ font-family:var(--serif); font-weight:400; font-size:3.4rem; color:var(--brass); letter-spacing:0.05em; }
  .portrait .cap{ font-family:var(--mono); font-size:0.62rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--cream-text-dim); text-align:center; padding:0 1.5rem; }
  .about-body p{ color:var(--cream-text-dim); font-size:var(--fs-body); margin-bottom:1.2rem; max-width:56ch; }
  .about-body .pull-quote{ color:var(--cream-text); border-left-color:var(--brass); margin-top:2rem; }
  .about-body .pull-quote span{ color:var(--brass); }

  /* -------- Insights -------- */
  .insight-list{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.75rem; margin-top:3.5rem; }
  @media (max-width:900px){ .insight-list{ grid-template-columns:1fr; } }
  .insight{ border-top:1px solid rgba(27,33,43,0.15); padding-top:1.4rem; }
  .insight .tag{ font-family:var(--mono); font-size:0.66rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--slate); display:block; margin-bottom:0.8rem; }
  .insight h3{ font-size:1.12rem; margin-bottom:0.5rem; }
  .insight a{ font-family:var(--mono); font-size:0.75rem; color:var(--ink-text-dim); border-bottom:1px solid transparent; }
  .insight a:hover{ color:var(--ink-text); border-color:var(--ink-text); }
  .insights-note{ font-family:var(--mono); font-size:0.75rem; color:var(--ink-text-dim); margin-top:2.5rem; }

  /* -------- Final CTA -------- */
  .final-cta{ text-align:center; }
  .final-cta .wrap{ max-width:680px; }
  .final-cta h2{ margin-bottom:1.25rem; }
  .final-cta p{ color:var(--cream-text-dim); font-size:1.05rem; margin-bottom:2.5rem; }
  .final-cta .btn{ margin-bottom:0; }
  .final-cta .note{ font-family:var(--mono); font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; color:rgba(239,234,224,0.5); }
  .cta-actions{ display:flex; align-items:center; justify-content:center; gap:1.75rem; flex-wrap:wrap; margin-bottom:1.75rem; }
  .cta-actions .quiet-email{ font-family:var(--mono); font-size:0.8rem; color:var(--cream-text-dim); border-bottom:1px solid rgba(239,234,224,0.3); padding-bottom:2px; }
  .cta-actions .quiet-email:hover{ color:var(--cream-text); border-color:var(--cream-text); }

  /* -------- Footer -------- */
  footer{ background:var(--ink); color:var(--cream-text-dim); border-top:1px solid var(--ink-line); padding:4.5rem 0 2.5rem; }
  .footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:3rem; padding-bottom:3rem; }
  @media (max-width:700px){ .footer-grid{ grid-template-columns:1fr; gap:2.25rem; } }
  .footer-grid h4{ font-family:var(--mono); font-size:0.68rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--brass); margin-bottom:1.1rem; }
  .footer-grid li{ margin-bottom:0.6rem; font-size:0.92rem; }
  .footer-grid li a:hover{ color:var(--cream-text); }
  .footer-word .name{ font-family:var(--serif); font-size:1.3rem; color:var(--cream-text); }
  .footer-word .sub{ font-family:var(--mono); font-size:0.62rem; letter-spacing:0.2em; color:var(--brass); display:block; margin-top:0.35rem; }
  .footer-word p{ margin-top:1.1rem; max-width:34ch; font-size:0.9rem; }
  .footer-bottom{ border-top:1px solid var(--ink-line); padding-top:1.75rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:0.75rem; font-family:var(--mono); font-size:0.72rem; letter-spacing:0.04em; }

/* Portrait frame: supports either the monogram placeholder or a real uploaded photo */
.portrait{ overflow:hidden; padding:0; }
.portrait img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ============================================================
   Resources page: content typed via the block editor, plus
   Jetpack Form blocks. Jetpack's exact markup can vary by
   version, so these selectors are intentionally broad rather
   than targeting one specific class structure.
   ============================================================ */

.downloads-content h2{
  margin-top:3rem;
  margin-bottom:0.5rem;
  font-size:1.5rem;
  color:var(--ink-text);
}
.downloads-content h2:first-child{ margin-top:0; }
.downloads-content p{
  color:var(--ink-text-dim);
  font-size:1.02rem;
  margin-bottom:1rem;
}
.downloads-content hr{
  border:none;
  border-top:1px solid rgba(27,33,43,0.12);
  margin:2.5rem 0;
}

/* Jetpack Form wrapper: give it a card-like frame so it reads as a
   distinct, intentional module rather than a bare, unstyled form. */
.downloads-content .wp-block-jetpack-contact-form,
.downloads-content form.contact-form,
.downloads-content .contact-form{
  background:var(--parchment-2);
  border:1px solid rgba(27,33,43,0.08);
  padding:1.75rem;
  margin:1.25rem 0 3rem;
}

.downloads-content .wp-block-jetpack-contact-form label,
.downloads-content .contact-form label{
  display:block;
  font-family:var(--mono);
  font-size:0.72rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--slate);
  margin-bottom:0.4rem;
}

.downloads-content .wp-block-jetpack-contact-form input[type="text"],
.downloads-content .wp-block-jetpack-contact-form input[type="email"],
.downloads-content .wp-block-jetpack-contact-form input[type="tel"],
.downloads-content .wp-block-jetpack-contact-form input[type="url"],
.downloads-content .wp-block-jetpack-contact-form textarea,
.downloads-content .contact-form input[type="text"],
.downloads-content .contact-form input[type="email"],
.downloads-content .contact-form textarea{
  width:100%;
  font-family:var(--sans);
  font-size:0.98rem;
  color:var(--ink-text);
  background:var(--parchment);
  border:1px solid rgba(27,33,43,0.2);
  padding:0.7rem 0.85rem;
  margin-bottom:1.1rem;
  border-radius:0;
}
.downloads-content .wp-block-jetpack-contact-form input:focus,
.downloads-content .wp-block-jetpack-contact-form textarea:focus,
.downloads-content .contact-form input:focus,
.downloads-content .contact-form textarea:focus{
  outline:2px solid var(--brass);
  outline-offset:1px;
  border-color:var(--brass);
}

.downloads-content .wp-block-jetpack-contact-form .wp-block-button__link,
.downloads-content .wp-block-jetpack-contact-form button[type="submit"],
.downloads-content .contact-form button[type="submit"]{
  font-family:var(--mono) !important;
  font-size:0.8rem !important;
  letter-spacing:0.08em;
  text-transform:uppercase;
  background:var(--brass) !important;
  color:var(--ink) !important;
  border:1px solid var(--brass) !important;
  border-radius:0 !important;
  padding:0.85rem 1.6rem !important;
  cursor:pointer;
}
.downloads-content .wp-block-jetpack-contact-form .wp-block-button__link:hover,
.downloads-content .contact-form button[type="submit"]:hover{
  background:var(--brass-bright) !important;
  border-color:var(--brass-bright) !important;
}