/* ===========================================================
   Eric Capehart — ericcapehart.com
   Site stylesheet
   =========================================================== */

  :root{
    --blue:#2176b5;
    --blue-dk:#16527f;
    --blue-lt:#7fb3db;
    --blue-pale:#e8f1f7;
    --ink:#1a2230;
    --ink-soft:#46505f;
    --ink-muted:#7a8290;
    --cream:#f6f1e7;
    --cream-2:#efe7d5;
    --paper:#fbf7ef;
    --white:#ffffff;
    --border:#e2ddd2;
    --border-soft:#eee9de;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'Inter',sans-serif;
    font-size:17px;
    line-height:1.65;
    color:var(--ink);
    background:var(--white);
    -webkit-font-smoothing:antialiased;
  }

  /* === Navigation === */
  .nav{
    position:fixed;
    top:0;left:0;right:0;
    z-index:100;
    background:rgba(255,255,255,.95);
    backdrop-filter:blur(12px);
    border-bottom:1px solid var(--border-soft);
    padding:1rem 0;
  }
  .nav-inner{
    max-width:1200px;
    margin:0 auto;
    padding:0 2rem;
    display:flex;
    align-items:center;
    justify-content:space-between;
    position:relative;
  }
  .nav-logo{width:160px;}
  .nav-logo img{width:100%;}
  .nav-links{display:flex;gap:2.5rem;align-items:center;}
  .nav-links a{
    font-family:'Inter',sans-serif;
    font-weight:600;
    font-size:14px;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--ink-soft);
    text-decoration:none;
    transition:color .2s;
  }
  .nav-links a:hover{color:var(--blue);}
  .nav-links a.is-active{color:var(--blue);}
  .nav-cta{
    background:var(--blue);
    color:#fff !important;
    padding:.7rem 1.5rem;
    border-radius:6px;
    font-weight:600;
    font-size:14px;
    letter-spacing:.08em;
    text-transform:uppercase;
    text-decoration:none;
    transition:background .2s;
  }
  .nav-cta:hover{background:var(--blue-dk);}

  /* === Hero === */
  .hero{
    background:var(--cream);
    padding:8rem 0 5rem;
    overflow:hidden;
  }
  .hero-inner{
    max-width:1200px;
    margin:0 auto;
    padding:0 2rem;
    display:grid;
    grid-template-columns:1.2fr 1fr;
    gap:4rem;
    align-items:center;
  }
  .hero-content .eyebrow{
    font-family:'Inter',sans-serif;
    font-weight:600;
    font-size:14px;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:var(--blue);
    margin-bottom:1.5rem;
    display:flex;
    align-items:center;
    gap:.75rem;
  }
  .hero-content .eyebrow::before{
    content:'';
    width:40px;
    height:2px;
    background:var(--blue);
  }
  .hero h1{
    font-family:'Playfair Display',serif;
    font-weight:700;
    font-size:64px;
    line-height:1.05;
    color:var(--ink);
    margin-bottom:1.5rem;
    letter-spacing:-.02em;
  }
  .hero h1 .it{font-style:italic;color:var(--blue);}
  .hero-tagline{
    font-family:'Inter',sans-serif;
    font-weight:600;
    font-size:20px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--ink-soft);
    margin-bottom:2rem;
  }
  .hero-tagline span{color:var(--blue);}
  .hero-desc{
    font-size:18px;
    color:var(--ink-soft);
    max-width:520px;
    margin-bottom:2.5rem;
  }
  .hero-ctas{display:flex;gap:1rem;flex-wrap:wrap;}
  .btn-primary{
    background:var(--blue);
    color:#fff;
    padding:1rem 2rem;
    border-radius:8px;
    font-weight:600;
    font-size:15px;
    letter-spacing:.08em;
    text-transform:uppercase;
    text-decoration:none;
    transition:background .2s,transform .2s;
    display:inline-flex;
    align-items:center;
    gap:.5rem;
  }
  .btn-primary:hover{background:var(--blue-dk);transform:translateY(-1px);}
  .btn-secondary{
    background:transparent;
    color:var(--ink);
    padding:1rem 2rem;
    border-radius:8px;
    font-weight:600;
    font-size:15px;
    letter-spacing:.08em;
    text-transform:uppercase;
    text-decoration:none;
    border:2px solid var(--ink);
    transition:background .2s,color .2s;
    display:inline-flex;
    align-items:center;
    gap:.5rem;
  }
  .btn-secondary:hover{background:var(--ink);color:#fff;}

  .hero-photo{
    position:relative;
  }
  .hero-photo img{
    width:100%;
    height:auto;
    border-radius:16px;
    box-shadow:0 20px 60px rgba(26,34,48,.15);
  }
  .hero-photo .badge{
    position:absolute;
    bottom:-20px;
    left:-20px;
    background:var(--blue);
    color:#fff;
    padding:1.25rem 1.75rem;
    border-radius:12px;
    font-family:'Playfair Display',serif;
    font-style:italic;
    font-size:18px;
    line-height:1.3;
    max-width:220px;
    box-shadow:0 10px 30px rgba(33,118,181,.3);
  }

  /* === Section base === */
  section{padding:5rem 0;}
  .container{max-width:1200px;margin:0 auto;padding:0 2rem;}
  .section-eyebrow{
    font-family:'Inter',sans-serif;
    font-weight:600;
    font-size:14px;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:var(--blue);
    margin-bottom:1rem;
  }
  .section-title{
    font-family:'Playfair Display',serif;
    font-weight:700;
    font-size:42px;
    line-height:1.1;
    color:var(--ink);
    margin-bottom:1rem;
    letter-spacing:-.01em;
  }
  .section-title .it{font-style:italic;color:var(--blue);}
  .section-lead{
    font-size:19px;
    color:var(--ink-soft);
    max-width:680px;
    margin-bottom:3rem;
  }

  /* === About === */
  .about{
    background:var(--white);
  }
  .about-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:4rem;
    align-items:start;
  }
  .about-text p{
    font-size:18px;
    color:var(--ink-soft);
    margin-bottom:1.5rem;
  }
  .about-text p strong{color:var(--ink);font-weight:600;}
  .values-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1.5rem;
    margin-top:2.5rem;
  }
  .value-card{
    background:var(--cream);
    border-radius:12px;
    padding:2rem;
    text-align:center;
    transition:transform .2s,box-shadow .2s;
  }
  .value-card:hover{
    transform:translateY(-3px);
    box-shadow:0 10px 30px rgba(26,34,48,.08);
  }
  .value-card .value-num{
    font-family:'Playfair Display',serif;
    font-weight:700;
    font-size:32px;
    color:var(--blue-lt);
    margin-bottom:.5rem;
  }
  .value-card .value-name{
    font-family:'Playfair Display',serif;
    font-weight:600;
    font-size:22px;
    color:var(--ink);
  }

  /* === Work / Approach === */
  .approach{
    background:var(--ink);
    color:#fff;
  }
  .approach .section-eyebrow{color:var(--blue-lt);}
  .approach .section-title{color:#fff;}
  .approach .section-lead{color:rgba(255,255,255,.7);}
  .approach-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:2rem;
  }
  .approach-card{
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.1);
    border-radius:16px;
    padding:2.5rem;
    transition:background .2s;
  }
  .approach-card:hover{background:rgba(255,255,255,.08);}
  .approach-card .card-num{
    font-family:'Playfair Display',serif;
    font-weight:700;
    font-size:48px;
    color:var(--blue-lt);
    line-height:1;
    margin-bottom:1.5rem;
  }
  .approach-card h3{
    font-family:'Playfair Display',serif;
    font-weight:600;
    font-size:24px;
    color:#fff;
    margin-bottom:1rem;
  }
  .approach-card p{
    font-size:16px;
    color:rgba(255,255,255,.6);
    line-height:1.6;
  }

  /* === Instagram Feed (Behold.so widget) === */
  .feed{
    background:var(--cream);
  }
  .feed-widget{
    margin-bottom:2.5rem;
    min-height:280px;
  }
  .feed-noscript{
    text-align:center;
    padding:3rem 1rem;
    font-size:15px;
  }
  .feed-noscript a{
    color:var(--blue);
    font-weight:600;
  }
  .feed-footer{
    display:flex;
    justify-content:center;
    gap:1rem;
  }


  /* === Contact === */
  .contact{
    background:var(--blue);
    border-top:4px solid var(--blue-dk);
    position:relative;
    z-index:1;
    color:#fff;
    text-align:center;
  }
  .contact .section-eyebrow{color:rgba(255,255,255,.6);}
  .contact .section-title{color:#fff;}
  .contact .section-title .it{color:var(--blue-lt);}
  .contact .section-lead{color:rgba(255,255,255,.8);margin:0 auto 3rem;}
  .contact-form{
    max-width:560px;
    margin:0 auto;
    text-align:left;
  }
  .form-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1.5rem;
    margin-bottom:1.5rem;
  }
  .form-field{margin-bottom:1.5rem;}
  .form-field label{
    display:block;
    font-size:13px;
    font-weight:600;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:rgba(255,255,255,.6);
    margin-bottom:.5rem;
  }
  .form-field input,
  .form-field textarea{
    width:100%;
    background:rgba(255,255,255,.1);
    border:1px solid rgba(255,255,255,.2);
    border-radius:8px;
    padding:1rem;
    font-family:'Inter',sans-serif;
    font-size:16px;
    color:#fff;
    outline:none;
    transition:border-color .2s,background .2s;
  }
  .form-field input::placeholder,
  .form-field textarea::placeholder{color:rgba(255,255,255,.4);}
  .form-field input:focus,
  .form-field textarea:focus{
    border-color:rgba(255,255,255,.5);
    background:rgba(255,255,255,.15);
  }
  .form-field textarea{resize:vertical;min-height:120px;}
  .form-submit{
    width:100%;
    background:#fff;
    color:var(--blue);
    border:none;
    padding:1.1rem;
    border-radius:8px;
    font-family:'Inter',sans-serif;
    font-weight:700;
    font-size:15px;
    letter-spacing:.1em;
    text-transform:uppercase;
    cursor:pointer;
    transition:background .2s;
  }
  .form-submit:hover{background:var(--cream);}

  /* === Footer === */
  .footer{
    background:var(--ink);
    color:rgba(255,255,255,.5);
    padding:3rem 0 2rem;
  }
  .footer-inner{
    max-width:1200px;
    margin:0 auto;
    padding:0 2rem;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:1.5rem;
  }
  .footer-logo{width:200px;padding:0 10px;}
  .footer-logo img{width:100%;}
  .footer-social{
    display:flex;
    gap:1.5rem;
  }
  .footer-social a{
    width:40px;height:40px;
    border-radius:50%;
    background:rgba(255,255,255,.1);
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    transition:background .2s;
  }
  .footer-social a:hover{background:var(--blue);}
  .footer-social svg{width:18px;height:18px;fill:#fff;}
  .footer-copy{
    font-size:13px;
    color:rgba(255,255,255,.4);
    margin-top:1rem;
  }

  /* === Mobile nav toggle === */
  .nav-toggle{
    display:none;
    position:relative;
    width:32px;
    height:32px;
    background:none;
    border:none;
    cursor:pointer;
    padding:0;
    z-index:101;
    flex-shrink:0;
  }
  .nav-toggle span{
    position:absolute;
    left:4px;
    right:4px;
    height:2px;
    background:var(--ink);
    transition:transform .25s ease,opacity .2s ease,top .25s ease;
  }
  .nav-toggle span:nth-child(1){top:10px;}
  .nav-toggle span:nth-child(2){top:15px;}
  .nav-toggle span:nth-child(3){top:20px;}
  .nav-toggle[aria-expanded="true"] span:nth-child(1){top:15px;transform:rotate(45deg);}
  .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
  .nav-toggle[aria-expanded="true"] span:nth-child(3){top:15px;transform:rotate(-45deg);}

  /* === Contact form: status message + honeypot + loading state === */
  .form-field.form-hp{
    position:absolute;
    left:-9999px;
    top:-9999px;
    width:1px;
    height:1px;
    overflow:hidden;
    margin:0;
  }
  .form-message{
    display:none;
    margin-top:1.5rem;
    padding:1rem 1.25rem;
    border-radius:8px;
    font-size:14px;
    line-height:1.5;
  }
  .form-message.visible{display:block;}
  .form-message.success{
    background:rgba(255,255,255,.14);
    border:1px solid rgba(255,255,255,.35);
    color:#fff;
  }
  .form-message.error{
    background:rgba(120,30,30,.25);
    border:1px solid rgba(255,150,150,.4);
    color:#fff;
  }
  .form-submit{position:relative;display:flex;align-items:center;justify-content:center;gap:.6rem;}
  .form-submit:disabled{opacity:.65;cursor:not-allowed;}
  .form-submit .spinner{
    width:15px;height:15px;
    border:2px solid rgba(33,118,181,.3);
    border-top-color:var(--blue);
    border-radius:50%;
    animation:spin .6s linear infinite;
    display:none;
  }
  .form-submit.loading .spinner{display:inline-block;}
  .form-submit.loading .btn-label{opacity:.7;}
  @keyframes spin{to{transform:rotate(360deg);}}

  /* === Accessible focus states === */
  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  textarea:focus-visible{
    outline:2px solid var(--blue);
    outline-offset:3px;
  }

  /* === Responsive === */
  @media(max-width:900px){
    .hero-inner,.about-grid{grid-template-columns:1fr;}
    .approach-grid{grid-template-columns:1fr;}
    .hero h1{font-size:44px;}
    .section-title{font-size:32px;}
    .nav-toggle{display:block;}
    .nav-links{
      position:absolute;
      top:100%;
      left:0;
      right:0;
      flex-direction:column;
      align-items:flex-start;
      gap:1.25rem;
      background:rgba(255,255,255,.98);
      backdrop-filter:blur(12px);
      border-bottom:1px solid var(--border-soft);
      padding:1.5rem 2rem 2rem;
      max-height:0;
      overflow:hidden;
      opacity:0;
      pointer-events:none;
      transition:max-height .3s ease,opacity .2s ease;
    }
    .nav-links.open{
      max-height:320px;
      opacity:1;
      pointer-events:auto;
    }
    .form-row{grid-template-columns:1fr;}
    .hero-photo{max-width:400px;margin:0 auto;}
  }
  @media(max-width:600px){
    .values-grid{grid-template-columns:1fr;}
    .hero h1{font-size:36px;}
  }