:root{
    --paper:#FAF7F1; --surface:#FFFFFF; --surface-2:#F1EBDF;
    --ink:#1B1A17; --ink-soft:#5C574C; --ink-faint:#8b8474;
    --gold:#A37F28; --gold-soft:#C9A857; --gold-bright:#B8924A;
    --dark:#131210;
    --line:rgba(27,26,23,.10); --line-gold:rgba(163,127,40,.28);
    --maxw:1180px;
  }
  *{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; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden}
  h1,h2,h3,.serif{font-family:'Playfair Display',Georgia,serif; font-weight:600; line-height:1.08}
  a{color:inherit; text-decoration:none}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px}
  .eyebrow{font-size:.72rem; letter-spacing:.26em; text-transform:uppercase; color:var(--gold); font-weight:600; display:inline-flex; align-items:center; gap:14px}
  .eyebrow::before{content:""; width:34px; height:1px; background:var(--gold); opacity:.7}

  header{position:fixed; inset:0 0 auto 0; z-index:50; transition:background .4s, box-shadow .4s, padding .4s; padding:20px 0; background:rgba(250,247,241,.78); backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
  header.scrolled{background:rgba(250,247,241,.96); box-shadow:0 6px 30px rgba(27,26,23,.07); padding:13px 0}
  .nav{display:flex; align-items:center; justify-content:space-between; gap:24px}
  .brand{display:flex; align-items:baseline; gap:12px}
  .brand .mark{font-family:'Playfair Display',serif; font-size:1.35rem; font-weight:600}
  .brand .mark b{color:var(--gold); font-weight:600}
  .brand .role{font-size:.62rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold)}
  .nav-links{display:flex; align-items:center; gap:34px}
  .nav-links a{font-size:.84rem; letter-spacing:.04em; color:var(--ink-soft); transition:color .25s; position:relative}
  .nav-links a:hover{color:var(--ink)}
  .nav-links a::after{content:""; position:absolute; left:0; bottom:-6px; width:0; height:1px; background:var(--gold); transition:width .3s}
  .nav-links a:hover::after{width:100%}
  .btn{display:inline-flex; align-items:center; gap:9px; font-size:.82rem; letter-spacing:.06em; font-weight:600; padding:12px 22px; border:1px solid var(--gold); color:var(--gold); border-radius:2px; transition:all .3s; cursor:pointer; background:none; font-family:'Inter',sans-serif}
  .btn:hover{background:var(--gold); color:#fff}
  .btn-solid{background:linear-gradient(135deg,var(--gold-soft),var(--gold-bright)); color:#221c0e; border-color:transparent}
  .btn-solid:hover{filter:brightness(1.06)}
  .menu-toggle{display:none; background:none; border:0; color:var(--ink); cursor:pointer; padding:6px}

  .hero{position:relative; min-height:100vh; display:flex; align-items:center; overflow:hidden}
  .hero-grid{display:grid; grid-template-columns:0.82fr 1fr; width:100%; align-items:stretch}
  .hero-photo{position:relative; min-height:100vh}
  .hero-photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:60% center}
  .hero-photo::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(250,247,241,0) 50%, var(--paper) 100%),linear-gradient(0deg, rgba(250,247,241,.4), rgba(250,247,241,0) 35%)}
  .hero-copy{position:relative; display:flex; flex-direction:column; justify-content:center; padding:120px 60px 80px 64px; z-index:2}
  .hero-crest{position:absolute; right:-60px; top:50%; transform:translateY(-50%); width:560px; height:560px; opacity:.07; z-index:0; pointer-events:none}
  .hero h1{font-size:clamp(2.7rem,5.6vw,4.9rem); margin:18px 0 6px; letter-spacing:-.01em}
  .hero h1 em{font-style:italic; color:var(--gold)}
  .hero .role-line{font-size:clamp(1.05rem,1.5vw,1.32rem); color:var(--ink-soft); font-family:'Playfair Display',serif; font-style:italic}
  .hero .rule{width:120px; height:1px; background:linear-gradient(90deg,var(--gold),transparent); margin:30px 0}
  .hero p.lede{max-width:48ch; color:var(--ink-soft); font-size:1.04rem}
  .hero-actions{display:flex; gap:16px; margin-top:38px; flex-wrap:wrap}
  .hero-meta{display:flex; gap:30px; margin-top:46px; flex-wrap:wrap}
  .hero-meta .item{font-size:.86rem; color:var(--ink)}
  .hero-meta .k{color:var(--gold); letter-spacing:.18em; text-transform:uppercase; font-size:.64rem; display:block; margin-bottom:4px}

  section{position:relative}
  .pad{padding:120px 0}
  .sec-head{max-width:700px; margin-bottom:64px}
  .sec-head h2{font-size:clamp(2rem,3.6vw,3rem); margin:18px 0 18px}
  .sec-head p{color:var(--ink-soft); font-size:1.05rem}
  .divider{display:flex; justify-content:center; padding:10px 0}
  .divider svg{width:46px; height:46px; opacity:.55}

.about{background:var(--surface-2)}
.about-grid{display:grid; grid-template-columns:1fr 1.25fr; gap:70px; align-items:center}
.about-photo{position:relative; max-width:440px; border:1px solid var(--line-gold); padding:14px; background:var(--surface)}
.about-photo img,
.about-photo .portrait{display:block; width:100%; aspect-ratio:4 / 5; height:auto; object-fit:cover; object-position:center 22%; filter:none}
.about-photo .tag{position:absolute; left:14px; right:14px; bottom:14px; background:rgba(19,18,16,.82); backdrop-filter:blur(6px); border-top:2px solid var(--gold); padding:16px 18px}
.about-photo .tag .serif{font-size:1.2rem; color:#fff}
.about-photo .tag span{color:var(--gold-soft); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase}
.about-body p{margin-bottom:18px; color:var(--ink-soft)}
.about-body p:first-of-type{font-size:1.16rem; color:var(--ink)}


  .creds{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:42px; border-top:1px solid var(--line); padding-top:34px}
  .creds .num{font-family:'Playfair Display',serif; font-size:2.4rem; color:var(--gold)}
  .creds .lab{font-size:.78rem; color:var(--ink-soft); letter-spacing:.04em}

  .practice-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-gold); border:1px solid var(--line-gold)}
  .pcard{background:var(--surface); padding:42px 34px; transition:background .35s; position:relative}
  .pcard:hover{background:#FBF7EE}
  .pcard .pnum{font-family:'Playfair Display',serif; font-size:.95rem; color:var(--gold)}
  .pcard h3{font-size:1.45rem; margin:18px 0 14px}
  .pcard p{color:var(--ink-soft); font-size:.95rem}
  .pcard .barbic{position:absolute; left:0; top:0; width:0; height:2px; background:var(--gold); transition:width .4s ease}
  .pcard:hover .barbic{width:100%}

  .approach{background:var(--surface-2)}
  .app-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:46px}
  .app-item{padding-top:26px; border-top:1px solid var(--line-gold)}
  .app-item .step{font-family:'Playfair Display',serif; font-style:italic; color:var(--gold); font-size:1.1rem}
  .app-item h3{font-size:1.35rem; margin:14px 0 12px}
  .app-item p{color:var(--ink-soft); font-size:.95rem}

  .contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:64px}
  .contact-info .row{display:flex; gap:18px; padding:22px 0; border-bottom:1px solid var(--line); align-items:flex-start}
  .contact-info .row:first-child{padding-top:0}
  .contact-info .ic{flex:0 0 42px; height:42px; border:1px solid var(--gold); border-radius:50%; display:grid; place-items:center; color:var(--gold)}
  .contact-info .ic svg{width:18px; height:18px}
  .contact-info .k{font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-bottom:4px}
  .contact-info .v{font-size:1.08rem; color:var(--ink)}
  .contact-info .v a:hover{color:var(--gold)}
  .wa{display:inline-flex; align-items:center; gap:10px; margin-top:28px; font-size:.85rem; color:var(--gold); letter-spacing:.04em; font-weight:600}
  .wa svg{width:18px;height:18px}
  .form{background:var(--surface); border:1px solid var(--line-gold); padding:40px; box-shadow:0 18px 50px rgba(27,26,23,.06)}
  .form h3{font-size:1.5rem; margin-bottom:8px}
  .form .sub{color:var(--ink-soft); font-size:.9rem; margin-bottom:26px}
  .field{margin-bottom:20px}
  .field label{display:block; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:9px}
  .field input,.field textarea,.field select{width:100%; background:var(--paper); border:1px solid var(--line); color:var(--ink); padding:14px 16px; font-family:'Inter',sans-serif; font-size:.95rem; border-radius:2px; transition:border-color .25s}
  .field input:focus,.field textarea:focus,.field select:focus{outline:none; border-color:var(--gold)}
  .field textarea{resize:vertical; min-height:110px}
  .hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
  .form .btn{width:100%; justify-content:center; margin-top:6px}
  .form-status{margin-top:16px; font-size:.9rem; display:none; padding:14px 16px; border-radius:2px}
  .form-status.show{display:block}
  .form-status.ok{background:#EAF3EA; color:#2c6b39; border:1px solid #bcd9bf}
  .form-status.err{background:#FBEDED; color:#9b2f2f; border:1px solid #e6c2c2}
  .form-status.note{background:var(--surface-2); color:var(--ink-soft); border:1px solid var(--line-gold)}

  footer{border-top:3px solid var(--gold); padding:54px 0 40px; background:var(--dark); color:#cfc9bd}
  .foot-grid{display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap}
  .foot-grid .mark{font-family:'Playfair Display',serif; font-size:1.3rem; color:#f3efe4}
  .foot-grid .mark b{color:var(--gold-soft); font-weight:600}
  .foot-links{display:flex; gap:26px; flex-wrap:wrap}
  .foot-links a{color:#a39d90; font-size:.85rem}
  .foot-links a:hover{color:#f3efe4}
  .disclaimer-note{max-width:var(--maxw); margin:36px auto 0; padding:24px 28px 0; border-top:1px solid rgba(255,255,255,.1); color:#857f72; font-size:.76rem; line-height:1.7}
  .disclaimer-note b{color:var(--gold-soft); letter-spacing:.12em; text-transform:uppercase; font-size:.68rem; display:block; margin-bottom:8px; font-weight:600}
  .copy{text-align:center; color:#6f6a5f; font-size:.78rem; margin-top:30px; letter-spacing:.03em}

  .modal{position:fixed; inset:0; z-index:200; background:rgba(19,18,16,.55); backdrop-filter:blur(5px); display:grid; place-items:center; padding:24px}
  .modal[hidden]{display:none}
  .modal-box{max-width:620px; background:var(--surface); border:1px solid var(--line-gold); border-top:3px solid var(--gold); padding:46px 44px; text-align:center; box-shadow:0 30px 80px rgba(0,0,0,.25)}
  .modal-box .mcrest{width:54px; height:54px; margin:0 auto 18px; opacity:.8}
  .modal-box h2{font-size:1.7rem; margin-bottom:18px}
  .modal-box p{color:var(--ink-soft); font-size:.92rem; line-height:1.7; margin-bottom:14px}
  .modal-actions{display:flex; gap:14px; justify-content:center; margin-top:30px; flex-wrap:wrap}
  .modal .note{display:none; color:var(--gold); font-size:.82rem; margin-top:16px}

  .reveal{opacity:0; transform:translateY(24px); transition:opacity .8s ease, transform .8s ease}
  .reveal.in{opacity:1; transform:none}

  @media(max-width:900px){
    .nav-links{position:fixed; inset:0 0 0 auto; width:min(78vw,320px); background:var(--surface); border-left:1px solid var(--line-gold); flex-direction:column; justify-content:center; gap:30px; transform:translateX(100%); transition:transform .4s ease; padding:40px; box-shadow:-20px 0 60px rgba(0,0,0,.08)}
    .nav-links.open{transform:none}
    .nav-links .btn{width:100%; justify-content:center}
    .menu-toggle{display:block; z-index:60}
    .hero-grid{grid-template-columns:1fr}
    .hero-photo{min-height:46vh; order:-1}
    .hero-photo img{object-position:60% 38%}
    .hero-copy{padding:54px 28px 70px}
    .hero{min-height:auto}
    .about-grid,.practice-grid,.app-grid,.contact-grid{grid-template-columns:1fr}
    .creds{grid-template-columns:repeat(3,1fr); gap:14px}
    .pad{padding:80px 0}
    .modal-box{padding:34px 26px}
  }
  @media(max-width:520px){ .creds{grid-template-columns:1fr 1fr} .hero-meta{gap:20px} .form{padding:26px} }
  @media(prefers-reduced-motion:reduce){ *{animation:none!important; transition:none!important; scroll-behavior:auto!important} .reveal{opacity:1; transform:none} }
@media(max-width:900px){ .about-photo{max-width:460px; margin:0 auto} }

/* ===================== Multi-page additions ===================== */

/* active nav item */
.nav-links a.active{color:var(--ink)}
.nav-links a.active::after{width:100%}

/* clickable practice cards */
a.pcard{display:block; color:inherit; text-decoration:none}
.pcard .go{display:inline-flex; align-items:center; gap:7px; margin-top:18px; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--gold); opacity:0; transform:translateX(-6px); transition:opacity .35s, transform .35s}
.pcard:hover .go{opacity:1; transform:none}
.practice-all{margin-top:40px; text-align:center}

/* inner page hero */
.page-hero{position:relative; overflow:hidden; padding:170px 0 72px; border-bottom:1px solid var(--line); background:var(--paper)}
.page-hero-crest{position:absolute; right:-30px; top:50%; transform:translateY(-50%); width:380px; height:380px; opacity:.06; pointer-events:none}
.page-hero .breadcrumb{font-size:.76rem; letter-spacing:.04em; color:var(--ink-soft); margin-bottom:18px}
.page-hero .breadcrumb a{color:var(--ink-soft)}
.page-hero .breadcrumb a:hover{color:var(--gold)}
.page-hero h1{font-size:clamp(2.3rem,5vw,3.8rem); margin:16px 0 14px; letter-spacing:-.01em}
.page-hero .lede{color:var(--ink-soft); max-width:62ch; font-size:1.08rem}

/* practice detail layout */
.detail-grid{display:grid; grid-template-columns:1fr .4fr; gap:64px; align-items:start}
.detail-main .lead-para{font-size:1.2rem; color:var(--ink); line-height:1.7; margin-bottom:36px}
.whatwedo-title{font-size:1.5rem; margin-bottom:22px}
.whatwedo{list-style:none}
.whatwedo li{position:relative; padding:16px 0 16px 34px; border-bottom:1px solid var(--line); color:var(--ink-soft)}
.whatwedo li::before{content:""; position:absolute; left:0; top:22px; width:16px; height:1px; background:var(--gold)}
.whatwedo li::after{content:""; position:absolute; left:7px; top:15px; width:3px; height:14px; background:var(--gold); transform:rotate(0); display:none}

/* sidebar */
.detail-side{position:sticky; top:96px; display:flex; flex-direction:column; gap:26px}
.keycontact{border:1px solid var(--line-gold); border-top:3px solid var(--gold); background:var(--surface); padding:30px}
.kc-label{font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); display:block; margin-bottom:12px}
.kc-name{font-size:1.4rem}
.kc-role{color:var(--ink-soft); font-size:.9rem; margin-bottom:18px}
.kc-rows{display:flex; flex-direction:column; gap:8px; margin-bottom:22px; padding-top:18px; border-top:1px solid var(--line)}
.kc-rows a{font-size:.95rem}
.kc-rows a:hover{color:var(--gold)}
.side-nav{padding:6px 4px}
.side-nav a{display:block; padding:11px 0; border-bottom:1px solid var(--line); color:var(--ink-soft); font-size:.95rem; transition:color .2s, padding .2s}
.side-nav a:hover{color:var(--gold); padding-left:6px}

/* closing CTA band (dark, echoes the card) */
.cta-band{background:var(--dark); color:#efeadf; text-align:center; padding:88px 0}
.cta-band h2{font-size:clamp(1.8rem,3.4vw,2.7rem); color:#fff; margin:16px 0 14px}
.cta-band p{color:#b3aa9a; max-width:50ch; margin:0 auto 30px}
.cta-actions{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}
.btn-light{border-color:rgba(255,255,255,.4); color:#efeadf}
.btn-light:hover{background:#fff; color:var(--dark); border-color:#fff}

/* contact map */
.map-frame{border:1px solid var(--line-gold); padding:10px; background:var(--surface)}
.map-frame iframe{width:100%; height:380px; border:0; display:block; filter:grayscale(.25) contrast(1.02)}

@media(max-width:900px){
  .detail-grid{grid-template-columns:1fr; gap:40px}
  .detail-side{position:static}
  .page-hero{padding:130px 0 56px}
}

/* ===================== Legal pages + footer legal row ===================== */
.legal{padding:80px 0}
.legal .wrap{max-width:820px}
.legal .updated{font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:26px}
.legal h2{font-size:1.45rem; margin:40px 0 14px}
.legal h3{font-size:1.08rem; margin:26px 0 10px}
.legal p{color:var(--ink-soft); margin-bottom:16px; line-height:1.75}
.legal ul{margin:0 0 18px 20px; color:var(--ink-soft)}
.legal li{margin-bottom:9px; line-height:1.7}
.legal a{color:var(--gold)}
.legal a:hover{text-decoration:underline}
.legal strong{color:var(--ink)}

.foot-legal{display:flex; gap:24px; flex-wrap:wrap; justify-content:center; margin-top:34px; padding-top:24px; border-top:1px solid rgba(255,255,255,.08)}
.foot-legal a{color:#857f72; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase}
.foot-legal a:hover{color:var(--gold-soft)}

/* ===================== Error pages ===================== */
.error-page{position:relative; overflow:hidden; min-height:74vh; display:flex; align-items:center; text-align:center; padding:150px 0 100px}
.error-page .wrap{max-width:640px; position:relative; z-index:2}
.error-crest{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:480px; height:480px; opacity:.05; pointer-events:none; z-index:0}
.error-code{font-family:'Playfair Display',serif; font-size:clamp(5rem,16vw,9rem); line-height:1; color:var(--gold); letter-spacing:-.02em}
.error-page h1{font-size:clamp(1.6rem,3vw,2.3rem); margin:8px 0 16px}
.error-page p{color:var(--ink-soft); font-size:1.05rem; margin:0 auto 32px; max-width:48ch}
.error-actions{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}