:root{
    --ink:#0B1F3A;
    --ink-soft:#16305A;
    --charcoal:#2B2B2B;
    --bronze:#966C3A;
    --bronze-dark:#7C5A2E;
    --bone:#F5F2EC;
    --bone-dim:#ECE7DB;
    --hairline:#DAD4C6;
    --hairline-dark:rgba(245,242,236,0.16);
    --white:#FFFFFF;
    --max:1180px;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
  }

  html, body{ overflow-x:hidden; width:100%; }
  body{
    margin:0;
    background:var(--bone);
    color:var(--charcoal);
    font-family:'Inter', -apple-system, sans-serif;
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }

  h1,h2,h3{
    font-family:'Lora', Georgia, serif;
    font-weight:600;
    color:var(--ink);
    margin:0;
  }

  a{color:inherit;}
  img,svg{display:block; max-width:100%;}

  .wrap{max-width:var(--max); margin:0 auto; padding:0 32px;}
  @media (max-width:640px){ .wrap{padding:0 22px;} }

  .eyebrow{
    font-family:'Inter',sans-serif;
    font-size:12px;
    font-weight:600;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--bronze);
  }
  .eyebrow.on-dark{ color:#C9A26C; }

  /* ---------- Signature meridian rule (recurring device) ---------- */
  .meridian-rule{
    display:flex; align-items:center; gap:10px;
    margin:18px 0 26px;
  }
  .meridian-rule::before{
    content:"";
    width:6px; height:6px; border-radius:50%;
    background:var(--bronze);
    flex-shrink:0;
  }
  .meridian-rule::after{
    content:"";
    height:1px; flex:1;
    background:linear-gradient(90deg, var(--bronze), var(--hairline) 60%);
  }
  .meridian-rule.on-dark::after{ background:linear-gradient(90deg, #C9A26C, var(--hairline-dark) 60%); }

  /* ---------- Header ---------- */
  header{
    position:fixed; top:0; left:0; right:0; z-index:50;
    background:rgba(245,242,236,0.0);
    border-bottom:1px solid transparent;
    transition:background .35s ease, border-color .35s ease, box-shadow .35s ease;
  }
  header.scrolled{
    background:rgba(245,242,236,0.94);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--hairline);
  }
  .header-inner{
    max-width:var(--max); margin:0 auto; padding:18px 32px;
    display:flex; align-items:center; justify-content:space-between;
  }
  @media (max-width:640px){ .header-inner{padding:16px 22px;} }

  .brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
  .brand-seal{ width:30px; height:30px; flex-shrink:0; }
  .brand-word{
    font-family:'Lora', serif; font-weight:600; font-size:15px;
    letter-spacing:.05em; color:var(--ink); white-space:nowrap;
  }
  .brand-word small{
    display:block; font-family:'Inter',sans-serif; font-weight:600;
    font-size:9px; letter-spacing:.22em; color:var(--bronze); margin-top:1px;
  }

  nav.primary-nav{ display:flex; align-items:center; gap:34px; }
  nav.primary-nav a{
    font-size:13px; font-weight:500; text-decoration:none; color:var(--charcoal);
    letter-spacing:.02em; position:relative; padding:4px 0;
  }
  nav.primary-nav a::after{
    content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
    background:var(--bronze); transform:scaleX(0); transform-origin:left;
    transition:transform .25s ease;
  }
  nav.primary-nav a:hover::after{ transform:scaleX(1); }
  nav.primary-nav a.cta{
    color:var(--ink); font-weight:600; border:1px solid var(--ink);
    padding:8px 16px; border-radius:2px;
  }
  nav.primary-nav a.cta::after{ display:none; }
  nav.primary-nav a.cta:hover{ background:var(--ink); color:var(--bone); }

  .nav-toggle{ display:none; background:none; border:none; cursor:pointer; padding:6px; }
  .nav-toggle span{ display:block; width:22px; height:1.5px; background:var(--ink); margin:5px 0; transition:transform .25s, opacity .25s; }

  @media (max-width:860px){
    nav.primary-nav{
      position:fixed; top:0; right:-340px; height:100vh; width:300px;
      background:var(--bone); flex-direction:column; align-items:flex-start;
      justify-content:center; gap:26px; padding:40px 36px;
      transition:right .35s ease;
      box-shadow:-8px 0 30px rgba(0,0,0,.08);
    }
    nav.primary-nav.open{ right:0; }
    nav.primary-nav a{ font-size:16px; }
    .nav-toggle{ display:block; z-index:60; }
    .nav-toggle.open span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
    .nav-toggle.open span:nth-child(2){ opacity:0; }
    .nav-toggle.open span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }
  }

  /* ---------- Hero ---------- */
  .hero{
    position:relative; overflow:hidden;
    padding:190px 0 130px;
    background:
      radial-gradient(ellipse 900px 500px at 88% 8%, rgba(150,108,58,0.10), transparent 60%),
      var(--bone);
    border-bottom:1px solid var(--hairline);
  }
  .hero-arc{
    position:absolute; right:-180px; top:50%; transform:translateY(-50%);
    width:820px; height:820px; opacity:.55; pointer-events:none;
  }
  @media (max-width:860px){ .hero-arc{ right:-320px; opacity:.35; width:640px; height:640px;} }

  .hero-inner{ position:relative; max-width:720px; }
  .hero h1{
    font-size:clamp(34px, 5vw, 54px); line-height:1.12; letter-spacing:-.01em;
    margin:16px 0 22px;
  }
  .hero h1 em{ font-style:italic; color:var(--bronze); }
  .hero p.lead{
    font-size:18px; line-height:1.7; color:var(--charcoal); max-width:560px;
    margin:0 0 34px;
  }
  .hero-actions{ display:flex; gap:16px; flex-wrap:wrap; }
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    font-family:'Inter',sans-serif; font-size:13.5px; font-weight:600;
    letter-spacing:.02em; text-decoration:none; padding:13px 22px; border-radius:2px;
    transition:all .2s ease;
  }
  .btn-primary{ background:var(--ink); color:var(--bone); border:1px solid var(--ink); }
  .btn-primary:hover{ background:var(--ink-soft); }
  .btn-ghost{ background:transparent; color:var(--ink); border:1px solid var(--hairline); }
  .btn-ghost:hover{ border-color:var(--ink); }

  /* ---------- Dark section shell ---------- */
  .section-dark{ background:var(--ink); color:#D9DEE8; }
  .section-dark h2{ color:var(--bone); }
  .section-dark .sub{ color:#A9B4C8; }

  section{ padding:100px 0; }
  @media (max-width:640px){ section{ padding:72px 0; } }

  /* ---------- Overview ---------- */
  .overview-grid{
    display:grid; grid-template-columns:280px 1fr; gap:60px;
  }
  @media (max-width:860px){ .overview-grid{ grid-template-columns:1fr; gap:28px; } }
  .overview-grid h2{ font-size:30px; line-height:1.25; }
  .overview-copy p{ font-size:16.5px; line-height:1.85; color:#CBD2DF; margin:0 0 20px; }
  .overview-copy p:last-child{ margin-bottom:0; }
  .overview-copy strong{ color:var(--bone); font-weight:600; }

  .name-note{
    margin-top:44px; padding-top:36px; border-top:1px solid var(--hairline-dark);
    display:grid; grid-template-columns:1fr 1fr; gap:36px;
  }
  @media (max-width:640px){ .name-note{ grid-template-columns:1fr; } }
  .name-note h3{ color:var(--bone); font-size:16px; font-style:italic; margin-bottom:8px; }
  .name-note p{ font-size:14.5px; color:#A9B4C8; margin:0; line-height:1.7; }

  /* ---------- Portfolio ---------- */
  .portfolio-head{ max-width:640px; margin-bottom:56px; }
  .portfolio-head h2{ font-size:30px; margin-bottom:16px; }
  .portfolio-head p{ font-size:16px; color:var(--charcoal); opacity:.85; }

  .portfolio-grid{
    display:grid; grid-template-columns:repeat(3, 1fr); gap:1px;
    background:var(--hairline); border:1px solid var(--hairline);
  }
  @media (max-width:860px){ .portfolio-grid{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:560px){ .portfolio-grid{ grid-template-columns:1fr; } }

  .portfolio-card{
    background:var(--bone); padding:34px 28px; min-height:210px;
    display:flex; flex-direction:column; justify-content:space-between;
    transition:background .25s ease;
  }
  .portfolio-card:hover{ background:var(--white); }
  .portfolio-card .glyph{ width:30px; height:30px; margin-bottom:22px; color:var(--bronze); }
  .portfolio-card h3{ font-size:18px; margin-bottom:8px; }
  .portfolio-card p{ font-size:13.5px; color:var(--charcoal); opacity:.75; margin:0; line-height:1.6; }
  .portfolio-card .tag{
    margin-top:18px; font-size:11px; font-weight:600; letter-spacing:.1em;
    text-transform:uppercase; color:var(--bronze);
  }
  .portfolio-card.placeholder{
    display:flex; align-items:center; justify-content:center; text-align:center;
  }
  .portfolio-card.placeholder p{ font-size:13.5px; font-style:italic; opacity:.6; }

  /* ---------- Approach ---------- */
  .approach-list{ display:grid; grid-template-columns:1fr; gap:0; margin-top:50px; }
  .approach-item{
    display:grid; grid-template-columns:150px 1fr; gap:36px;
    padding:34px 0; border-top:1px solid var(--hairline);
  }
  .approach-item:last-child{ border-bottom:1px solid var(--hairline); }
  @media (max-width:640px){ .approach-item{ grid-template-columns:1fr; gap:10px; } }
  .approach-coord{ font-family:'Lora',serif; font-style:italic; color:#C9A26C; font-size:14px; padding-top:2px; }
  .approach-item h3{ font-size:19px; margin-bottom:8px; }
  .approach-item p{ font-size:15px; color:var(--charcoal); opacity:.82; margin:0; max-width:620px; }

  /* ---------- Contact ---------- */
  .contact-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:44px; margin-top:54px;
  }
  @media (max-width:860px){ .contact-grid{ grid-template-columns:1fr; gap:36px; } }
  .contact-card h3{ color:var(--bone); font-size:16px; margin-bottom:10px; }
  .contact-card p{ font-size:14.5px; color:#A9B4C8; margin:0 0 14px; line-height:1.65; }
  .contact-card a.email{
    font-size:14px; font-weight:600; color:#C9A26C; text-decoration:none;
    border-bottom:1px solid rgba(201,162,108,.4); padding-bottom:2px;
  }
  .contact-card a.email:hover{ border-color:#C9A26C; }

  .contact-head{ max-width:640px; }
  .contact-head h2{ font-size:30px; }
  .contact-head p{ color:#A9B4C8; font-size:16px; margin-top:16px; }

  /* ---------- Footer ---------- */
  footer{ background:#081729; color:#8592A8; padding:56px 0 36px; }
  .footer-top{
    display:flex; justify-content:space-between; align-items:flex-start;
    gap:40px; flex-wrap:wrap; padding-bottom:36px; border-bottom:1px solid var(--hairline-dark);
  }
  .footer-brand{ display:flex; align-items:center; gap:12px; }
  .footer-brand .brand-word{ color:var(--bone); }
  .footer-legal{ max-width:480px; font-size:13px; line-height:1.75; }
  .footer-bottom{
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
    padding-top:26px; font-size:12.5px;
  }
  .footer-bottom a{ text-decoration:none; color:#8592A8; }
  .footer-bottom a:hover{ color:var(--bone); }

  /* ---------- Reveal-on-scroll ---------- */
  .js .reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; }
  .js .reveal.in{ opacity:1; transform:none; }


/* =====================================================
   WordPress additions
   ===================================================== */
.screen-reader-text{
  border:0; clip:rect(1px,1px,1px,1px); clip-path:inset(50%); height:1px; margin:-1px;
  overflow:hidden; padding:0; position:absolute; width:1px; word-wrap:normal !important;
}
.skip-link:focus{
  clip:auto; clip-path:none; height:auto; width:auto; margin:0; overflow:visible;
  left:16px; top:16px; z-index:100000; background:var(--ink); color:var(--bone);
  padding:12px 18px; font-weight:600; text-decoration:none;
}
:focus-visible{ outline:2px solid var(--bronze); outline-offset:3px; }
.section-dark :focus-visible, footer :focus-visible{ outline-color:#C9A26C; }

.admin-bar #site-header{ top:32px; }
@media (max-width:782px){ .admin-bar #site-header{ top:46px; } }

.brand .custom-logo-link{ display:flex; }
.brand .custom-logo{ max-height:34px; width:auto; }

body:not(.home) #site-header{
  background:rgba(245,242,236,0.94);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--hairline);
}
.page-main{ padding:150px 0 90px; min-height:60vh; }
.page-content{ max-width:780px; }
.page-content h1{ font-size:clamp(30px,4vw,42px); margin:0 0 28px; line-height:1.15; }
.page-content h2{ font-size:24px; margin:40px 0 14px; }
.page-content h3{ font-size:19px; margin:30px 0 10px; }
.page-content p, .page-content li{ font-size:16.5px; line-height:1.8; }
.page-content a{ color:var(--bronze-dark); }
.page-content article{ margin-bottom:48px; }
.page-content h1 a{ text-decoration:none; color:var(--ink); }

#approach h2{ font-size:30px; }
#approach .approach-item h3{ color:var(--bone); }
#approach .approach-item p{ color:#A9B4C8; opacity:1; }
#contact .contact-head p{ color:var(--charcoal); opacity:.8; }
#contact .contact-card h3{ color:var(--ink); }
#contact .contact-card p{ color:var(--charcoal); opacity:.75; }
#contact .contact-card a.email{ color:var(--bronze-dark); border-color:rgba(150,108,58,.4); }
#contact .contact-card a.email:hover{ border-color:var(--bronze); }
footer .brand-word small{ color:#C9A26C; }
.footer-links{ display:flex; gap:22px; flex-wrap:wrap; }
.portfolio-card h3 a{ text-decoration:none; border-bottom:1px solid var(--hairline); }
.portfolio-card h3 a:hover{ border-color:var(--bronze); }

.contact-form{
  margin-top:64px; padding-top:44px; border-top:1px solid var(--hairline);
  display:grid; grid-template-columns:1fr 1fr; gap:22px 28px; max-width:820px;
}
.contact-form > h3{ grid-column:1 / -1; font-size:20px; }
.contact-form .form-notice, .contact-form .hp{ grid-column:1 / -1; }
.hp{ position:absolute; left:-9999px; height:0; overflow:hidden; }
.form-row{ display:flex; flex-direction:column; gap:6px; }
.form-row.full{ grid-column:1 / -1; }
.form-row label{ font-size:12.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink); }
.form-row input, .form-row select, .form-row textarea{
  font-family:'Inter',sans-serif; font-size:15px; color:var(--charcoal);
  background:var(--white); border:1px solid var(--hairline); border-radius:2px;
  padding:12px 14px; width:100%;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus{ border-color:var(--ink); }
.form-notice{ margin:0; padding:12px 16px; font-size:14.5px; border-left:3px solid var(--bronze); background:var(--bone-dim); }
.form-notice.err{ border-left-color:#A33A3A; }
.contact-form button.btn{ cursor:pointer; justify-self:start; }
@media (max-width:640px){ .contact-form{ grid-template-columns:1fr; } }