/* Nelson T. Goff, D.C. — site styles. Design base: ChatGPT V3 opening page (purple on cream, serif headings). */
:root{
  --plum:#390448; --plum-2:#5a1a6e; --cream:#f8f6f3; --paper:#ffffff; --ink:#2b2330; --muted:#6d6572;
  --rule:#e3dde4; --soft:#f1ecf2; --warn:#7a2a00; --warn-bg:#fff4ec;
  --serif: Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);font:17px/1.6 var(--sans)}
img{max-width:100%;height:auto;display:block}
a{color:var(--plum)}
a:hover{color:var(--plum-2)}
:focus-visible{outline:3px solid var(--plum-2);outline-offset:2px}
.skip{position:absolute;left:-999px;top:0;background:var(--plum);color:#fff;padding:8px 12px;z-index:9}
.skip:focus{left:8px}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px}
h1,h2,h3,.h-serif,.display{font-family:var(--serif);color:var(--plum);font-weight:400;line-height:1.15}
h1{font-size:clamp(2rem,5vw,3.4rem);margin:.2em 0 .3em}
h2{font-size:1.6rem;margin:1.4em 0 .5em}
h3{font-size:1.25rem;margin:.6em 0 .4em}
em{font-style:italic}
.eyebrow{font:600 .74rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--plum);margin:0 0 .6rem}
.muted{color:var(--muted)}
.small{font-size:.9rem}
.fine{font-size:.82rem;color:var(--muted)}
.center{text-align:center}
.big{font-size:1.15rem}
.todo{background:#fff1a8;color:#4a3d00;padding:0 .25em;border-radius:3px;font-size:.9em}

/* top + header */
.topbar{background:var(--plum);color:#fff;font:600 .72rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;display:flex;justify-content:space-between;gap:12px;padding:9px 24px}
.topbar a{color:#fff;text-decoration:none}
header.site{max-width:1140px;margin:0 auto;padding:22px 24px 16px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none}
.logo{width:58px}
.b-name{display:block;font:400 1.6rem/1.1 var(--serif);color:var(--plum)}
.b-tag{display:block;font-size:.9rem;color:var(--ink);margin-top:4px}
.h-cta{display:flex;align-items:center;gap:18px}
.h-phone{display:flex;flex-direction:column;text-decoration:none;font:600 1.05rem/1.2 var(--sans);color:var(--plum);border-left:1px solid var(--rule);padding-left:18px}
.h-phone span{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.btn{display:inline-block;background:var(--plum);color:#fff!important;text-decoration:none;font:600 .95rem/1 var(--sans);padding:15px 22px;border:0;cursor:pointer}
.btn:hover{background:var(--plum-2)}
.btn-link{font-weight:600;text-decoration:none;margin-left:14px}
.btns{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:1.2em 0}
.menu{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.menu ul{list-style:none;margin:0 auto;padding:0 24px;max-width:1140px}
.menu .wide{display:flex;flex-wrap:wrap;gap:4px 22px;padding-top:10px;padding-bottom:10px}
.menu a{text-decoration:none;color:var(--ink);font-size:.95rem}
.menu a[aria-current]{color:var(--plum);font-weight:700;border-bottom:2px solid var(--plum)}
.menu details{display:none}
.direct{background:var(--soft);font-size:.92rem}
.direct p{max-width:1140px;margin:0 auto;padding:10px 24px}

/* home */
.home-hero{display:grid;grid-template-columns:1.05fr 1fr;grid-template-areas:"left right" "mary michael";gap:40px 26px;padding:56px 0 18px;align-items:end}
.hh-left{grid-area:left}.hh-right{grid-area:right}.p-mary{grid-area:mary}.p-michael{grid-area:michael}
.home-hero .pic{align-self:start}
.home-hero .pic img{aspect-ratio:3/2;object-fit:cover;width:100%}
img.doc{width:100%;border:1px solid var(--rule)}
.display{font-size:clamp(2.6rem,6.4vw,4.6rem);margin:0;letter-spacing:-.01em}
.lede-dark{font-size:1.15rem;margin:0 0 .8em}
.direct-inline{font-size:.9rem;border-left:3px solid var(--plum);padding-left:12px}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin:18px 0}
.pair.three{grid-template-columns:repeat(3,1fr)}
.pic{margin:0;background:var(--paper);border:1px solid var(--rule)}
.pic figcaption{padding:16px 20px;font-size:.95rem;color:var(--muted)}
.pic.wide{margin:24px 0}
.pic.office{max-width:520px}
.start{padding:30px 0}
.h-serif{font-size:clamp(1.6rem,3vw,2.1rem)}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:20px 0}
.card{display:block;background:var(--paper);border:1px solid var(--rule);padding:20px;text-decoration:none;color:var(--ink);transition:border-color .15s}
.card:hover{border-color:var(--plum)}
.card h3{margin:0 0 .3em}
.card p{margin:0;font-size:.92rem;color:var(--muted)}
.cards.small .card{padding:14px 18px}
.cards.small h3{font-size:1.05rem}
.meet{display:grid;grid-template-columns:300px 1fr;gap:36px;align-items:start;padding:36px 0;border-top:1px solid var(--rule)}
.creds{padding-left:1.1em}
.creds li{margin:.35em 0}
.docphoto{margin:0}
.ph{aspect-ratio:4/5;background:repeating-linear-gradient(135deg,#efe9f0,#efe9f0 10px,#f6f2f6 10px,#f6f2f6 20px);border:1px dashed #b9a9bd;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:16px;font-family:var(--serif);color:var(--plum);font-size:1.1rem}
.ph span{font:400 .8rem/1.4 var(--sans);color:var(--muted);margin-top:6px}
.docphoto.wide .ph,.video .ph{aspect-ratio:16/7}
.video{margin:0}
.video .ph{aspect-ratio:16/9;background:#2b1633;color:#fff;border:0}
.video .ph span{color:#d9cbe0}
.poster{margin:0;max-width:300px}
.poster img{border:1px solid var(--rule)}
.review-badge{min-height:1px}

/* inner pages */
.page-hero{padding:48px 0 10px;max-width:820px}
.quote{font-family:var(--serif);font-style:italic;font-size:1.3rem;color:var(--plum-2);margin:.2em 0 .6em}
.lede{font-size:1.12rem}
.block{padding:8px 0 10px;max-width:980px}
.block.rule{border-left:4px solid var(--plum);padding-left:18px;margin:18px 0}
.block.rule h2{margin-top:.2em}
.two{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.panel{background:var(--paper);border:1px solid var(--rule);padding:6px 22px 14px}
.spaced li{margin:.6em 0}
.standard li,.steps li{margin:.6em 0}
.note{background:var(--paper);border-left:4px solid var(--plum);padding:12px 16px}
.note.warn{border-left-color:var(--warn);background:var(--warn-bg)}
.cta{margin:18px 0}
.sa{background:var(--paper);border:1px solid var(--rule);border-top:4px solid var(--plum);padding:12px 18px;margin:18px 0;max-width:640px}
.sa-k{margin:0;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.sa-t{margin:.25em 0;font-family:var(--serif);font-size:1.2rem;color:var(--plum)}
.sa-l{margin:0;font-size:.88rem}
a.gl{text-decoration:underline dotted;text-underline-offset:3px;color:inherit}
a.gl:hover{color:var(--plum)}
.learn{border-top:1px solid var(--rule);margin-top:28px;padding-top:4px}
.h-small{font-size:1.15rem}
.learn ul{display:flex;flex-wrap:wrap;gap:6px 22px;list-style:none;padding:0}
.tbl{overflow-x:auto;margin:12px 0}
table{border-collapse:collapse;width:100%;background:var(--paper);font-size:.95rem}
caption{text-align:left;font-family:var(--serif);color:var(--plum);font-size:1.1rem;padding:6px 0}
th,td{border:1px solid var(--rule);padding:9px 12px;text-align:left;vertical-align:top}
th{background:var(--soft);font-weight:600}
.contact-list{list-style:none;padding:0}
.contact-list li{margin:.6em 0}
.form{background:var(--paper);border:1px solid var(--rule);padding:6px 22px 18px}
.form label{display:block;margin:.7em 0;font-size:.92rem;font-weight:600}
.form input:not([type=checkbox]),.form textarea{display:block;width:100%;margin-top:4px;padding:10px;border:1px solid #cfc6d1;font:inherit;background:#fff}
.form .check{font-weight:400;display:flex;gap:10px;align-items:flex-start}
.form .check input{margin-top:5px}
.badge-slot{margin:6px 0}
.g-toc{font-size:.9rem;margin:10px 0 0}
.g-part{border-top:1px solid var(--rule);padding-top:.8em}
.g-term{font-size:1.15rem;margin:1.2em 0 .2em;scroll-margin-top:12px}
.g-sec p{margin:.3em 0 .6em;max-width:820px}
.g-sec p.src{font-size:.85rem;margin:.2em 0;word-break:break-word}
.legal{max-width:820px}

/* visit strip (V3 "Have more questions?") */
.visit{max-width:1140px;margin:40px auto 0;padding:48px 24px;display:grid;grid-template-columns:1.2fr 1fr;gap:40px;border-top:1px solid var(--rule)}
.v-q{font:400 1.4rem/1.2 var(--serif);color:var(--plum);margin:0}
.v-big{font:400 clamp(2.4rem,5vw,3.4rem)/1.08 var(--serif);color:var(--plum);margin:.3em 0 .5em}
.v-charlie{display:flex;align-items:center;gap:26px}
.v-call{font:400 1.9rem/1 var(--serif);color:var(--plum);text-decoration:none;white-space:nowrap}
.v-poster img{width:150px;border:1px solid var(--rule);box-shadow:0 2px 8px rgba(57,4,72,.12)}
.v-sub{font-size:.9rem;color:var(--muted);max-width:440px}
.v-meet{font:400 1.6rem/1.2 var(--serif);color:var(--plum);margin:.8em 0 .2em}
.v-right{border-left:1px solid var(--rule);padding-left:30px;align-self:center}
.v-name{font:400 1.7rem/1.2 var(--serif);color:var(--plum);margin:0}
.v-addr{font-size:1.1rem;margin:1em 0 .4em}
.v-links a{font-weight:600;font-size:.92rem;text-decoration:none;color:var(--ink);line-height:2.1}

/* footer */
.foot{max-width:1140px;margin:0 auto;padding:26px 24px 40px;border-top:1px solid var(--rule)}
.f-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.f-name{font:400 1.3rem/1.2 var(--serif);color:var(--plum);margin:0}
.f-links a{text-decoration:none}
.totop{float:right;text-decoration:none}

@media (max-width:860px){
  .two,.meet,.visit,.f-grid{grid-template-columns:1fr}
  .home-hero{grid-template-columns:1fr;grid-template-areas:"mary" "left" "right" "michael";padding-top:16px;gap:18px}
  .pair,.pair.three{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr 1fr}
  .menu .wide{display:none}
  .menu details{display:block;padding:10px 24px}
  .menu summary{cursor:pointer;font-weight:600;color:var(--plum)}
  .menu details ul{padding:8px 0 0}
  .menu details li{padding:6px 0}
  .v-right{border-left:0;padding-left:0;border-top:1px solid var(--rule);padding-top:20px}
  .h-phone{border-left:0;padding-left:0}
  .meet{gap:20px}
  .docphoto{max-width:300px}
  .topbar span{display:none}
}
@media (max-width:480px){
  body{font-size:16px}
  .wrap,.visit,.foot{padding-left:16px;padding-right:16px}
  header.site{padding:16px}
  .cards{grid-template-columns:1fr}
  .v-charlie{gap:14px}
  .v-poster img{width:110px}
  .v-call{font-size:1.5rem}
  .h-cta{width:100%;justify-content:space-between}
  table{font-size:.84rem}
  th,td{padding:7px 6px}
}
@media print{.topbar,.menu,.direct,.visit,.h-cta{display:none}}

/* image, then information */
.intro{display:grid;grid-template-columns:300px 1fr;gap:36px;align-items:start;padding:32px 0 8px}
.intro .page-hero{padding-top:0}
.intro .pic.office{max-width:none}
.lead{margin-top:28px}
.lead + .page-hero{padding-top:24px}
.first-block{margin-top:18px}
.video.wide{margin:18px 0;max-width:820px}
@media (max-width:860px){
  .intro{grid-template-columns:1fr;gap:18px;padding-top:18px}
  .intro .docphoto,.intro .poster{max-width:320px}
  .v-left{display:flex;flex-direction:column}
  .v-charlie{display:contents}
  .v-poster{order:-1;margin-bottom:16px}
  .v-call{margin:.2em 0 .4em}
  .v-poster img{width:170px}
}

.pic.photo img{aspect-ratio:1/1;object-fit:cover}
.honor{display:grid;grid-template-columns:1fr 1.2fr;gap:32px;align-items:center;background:var(--paper);border:1px solid var(--rule);border-top:4px solid var(--plum);padding:22px;margin:28px 0 8px}
.honor h2{margin:.1em 0 .4em}
.honor-img{margin:0}
.honor-img .ph{aspect-ratio:3/2}
.link-cards{display:grid;grid-template-columns:repeat(2,minmax(0,320px));gap:18px;margin:12px 0}
.lcard{display:block;background:var(--paper);border:1px solid var(--rule);text-decoration:none;color:var(--ink)}
.lcard:hover{border-color:var(--plum)}
.lcard img{aspect-ratio:16/9;object-fit:cover;width:100%}
.lc-t{display:block;font:400 1.1rem/1.3 var(--serif);color:var(--plum);padding:10px 14px 0}
.lc-s{display:block;font-size:.88rem;color:var(--muted);padding:2px 14px 12px}
@media (max-width:860px){.honor{grid-template-columns:1fr;gap:14px}.link-cards{grid-template-columns:1fr}}

.learn-cards{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.learn-cards .lcard img,.tile{aspect-ratio:16/9;object-fit:cover;object-position:top left;width:100%}
.tile{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:16px;background:linear-gradient(135deg,var(--plum),#6b2a80);color:#fff}
.tile-n{font:400 1.25rem/1.2 var(--serif)}
.tile-d{font-size:.8rem;opacity:.8;margin-top:6px}
.learn ul:empty{display:none}
.pic.half{max-width:520px}

.pcards{grid-template-columns:repeat(4,1fr)}
.pcard{padding:0;display:flex;flex-direction:column;overflow:hidden}
.card-img{display:block;aspect-ratio:3/2;overflow:hidden;background:var(--soft)}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.pcard:hover .card-img img{transform:scale(1.03)}
.card-ph{display:flex;height:100%;align-items:center;justify-content:center;text-align:center;padding:10px;font:400 .95rem/1.3 var(--serif);color:var(--plum);background:repeating-linear-gradient(135deg,#efe9f0,#efe9f0 10px,#f6f2f6 10px,#f6f2f6 20px)}
.card-body{display:block;padding:14px 18px 16px}
@media (max-width:860px){.pcards{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.pcards{grid-template-columns:1fr}}

.tap{display:block;font:600 .8rem/1.2 var(--sans);color:var(--plum);letter-spacing:.02em;margin-top:8px}
.lcard .tap{padding:0 14px 12px;margin-top:-4px}
/* office photo: fit the area (landscape crop of the tall building photo) */
.pic.office img{aspect-ratio:4/3;object-fit:cover;object-position:center 72%;width:100%}
.pic.office{max-width:440px}
.intro .pic.office{max-width:300px}
@media (max-width:760px){.pic.office,.intro .pic.office{max-width:100%}.pic.office img{aspect-ratio:16/10}}
/* videos: thumbnail is the button; tap direction below */
.videos{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px;margin:12px 0}
.vid{margin:0;background:#fff;border:1px solid var(--rule)}
.yt{display:block;position:relative;width:100%;padding:0;border:0;background:#000;cursor:pointer}
.yt img{aspect-ratio:16/9;object-fit:cover;width:100%}
.yt .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;font-size:26px;line-height:64px;text-align:center;padding-left:4px}
.vid iframe{width:100%;aspect-ratio:16/9;border:0;display:block}
.vid figcaption{padding:10px 14px 14px;display:flex;flex-direction:column;gap:2px}
.vid .tap{font-size:.85rem;font-weight:600;color:var(--plum)}
/* attorney questions */
.qa li{margin-bottom:12px}.qa li span{display:block;color:var(--muted)}
/* veterans extras */
.say{background:#fff;border-left:4px solid var(--plum);padding:14px 18px;font-family:var(--serif);font-size:1.15rem;margin:10px 0}
.crisis{background:#f3eef4;border:1px solid var(--rule);padding:12px 16px;border-radius:6px}
/* navigation: never trapped — sticky menu bar, every page in the menu, a Back button */
.menu{position:sticky;top:0;z-index:50;background:var(--cream)}
.m-bar{display:flex;align-items:flex-start;justify-content:space-between;max-width:1140px;margin:0 auto}
.m-bar details{flex:1}
.back{display:none;margin:8px 24px 8px 0;padding:6px 12px;border:1px solid var(--rule);background:#fff;color:var(--plum);font:600 .9rem var(--sans);border-radius:6px;cursor:pointer;white-space:nowrap}
.m-more{margin:10px 0 0;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.menu details[open] ul{max-height:none}
@media (max-width:860px){
  .back:not([hidden]){display:inline-block}
  .menu details[open]{max-height:75vh;overflow:auto}
}
@media (min-width:861px){.m-bar{display:none}}
.h-phone small{font:500 .7rem/1.2 var(--sans);color:var(--muted);letter-spacing:0;text-transform:none}
.badge-slot img{max-width:300px;width:100%;height:auto;margin:8px 0}

.v-call small{display:block;font:600 .85rem/1.3 var(--sans,system-ui,sans-serif);color:var(--ink,#333);letter-spacing:.02em;margin-bottom:.25em}