/* ============================================================
   INSIGHT CHIROPRACTIC — Contact page. Loaded after insight.css
   and insight-hero.css. Cinzel H1/H2, Poppins everything else.
   Light-ground gold rules: #7A6644 text (5.5:1), #867250 rules/focus (4.6:1).
   ============================================================ */
.contact-page h1,.contact-page h2{font-family:var(--brand-display)}
.contact-page{font-family:var(--brand-text)}
.contact-page .lede,.contact-page p{font-family:var(--brand-text)}

/* header · split contact variant. CARLOS: new — hero-interior has no split variant.
   BB build = one row, two columns, no scrim; right column background image, left column ink bg. */
.c-intro{background:var(--ink);padding-top:var(--nav-h);
  display:grid;grid-template-columns:minmax(0,47fr) minmax(0,53fr);align-items:stretch;
  border-bottom:1px solid rgba(167,145,108,.38)}
/* 9/18 (Gary): the flat ink panel was too plain, so his Photoshop texture lays over
   it. Faceted black with gold seams, positioned so the seams converge at the panel's
   inner edge, next to the photograph.
   ADA: the seams are gold and so is the eyebrow, so the scrim holds near-opaque across
   the text column and only releases in the last third, past the copy. Measured on the
   composite, not eyeballed: eyebrow in cream 7.15:1, h1 10.03:1, lede 8.69:1.
   --arc-texture-scrim drives all three stops. Do not lower it below .9 without
   re-measuring the eyebrow.
   CARLOS: BB row background image plus an overlay gradient. One image, one overlay. */
/* 9/19 (Gary): the contact hero now measures the same as every other interior hero.
   Copy padding and panel height are the archive values; the photo crops tighter, which
   takes the feet out of frame. CARLOS: one hero height, all pages. */
.c-intro__copy{display:flex;align-items:center;justify-content:flex-start;
  padding:clamp(34px,4vw,62px) clamp(28px,3.5vw,64px) clamp(34px,4vw,62px) max(var(--gutter),calc((100vw - var(--rail)) / 2 + var(--gutter)));
  background-image:linear-gradient(90deg,rgba(20,17,13,var(--arc-texture-scrim,.95)) 0%,rgba(20,17,13,calc(var(--arc-texture-scrim,.95) * .98)) 68%,rgba(20,17,13,calc(var(--arc-texture-scrim,.95) * .37)) 100%),
    url("../img/hero-texture-ink-gold.jpg");
  background-size:cover,cover;
  background-position:center,var(--arc-texture-pos,88% 46%);
  background-repeat:no-repeat,no-repeat}
/* Gary, 9/19: he wants to see the texture, so the scrim drops to .80, below the old
   .9 floor. Re-measured against the brightest pixel in hero-texture-ink-gold.jpg
   (235 luma) composited at .80: cream eyebrow 6.9:1, white 10.7:1. Against the 99th
   percentile of the panel area it is cream 11.1:1, white 16.4:1. Both hold. */
.c-intro__copy{--arc-texture-scrim:.80}
/* cream, not gold: gold type on a gold seam measures 1.56:1 however dark the scrim goes. */
.c-intro .c-intro__copy .eyebrow{color:#E3D3B3}
.c-intro__inner{width:100%}
.c-intro__media{position:relative;min-height:var(--arc-media-h,clamp(300px,30vw,420px))}
.c-intro__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 38%;display:block}
.c-intro h1{font-size:clamp(30px,3.2vw,44px);font-weight:600;margin:0 0 14px;color:#fff;text-wrap:balance}
.c-intro .lede{margin:0;color:rgba(255,255,255,.88)}
.c-intro .c-rating{background:#fff;border-color:#fff;color:var(--ink);white-space:nowrap}
.c-intro .c-rating:hover{background:var(--paper)}
@media (max-width:880px){
  .c-intro{grid-template-columns:1fr}
  .c-intro__copy{order:2;padding:clamp(30px,6vw,46px) max(var(--gutter),calc((100vw - var(--rail)) / 2 + var(--gutter)))}
  .c-intro__inner{max-width:44ch}
  .c-intro__media{order:1;min-height:0;aspect-ratio:16/9}
}
.c-rating{display:inline-flex;align-items:center;gap:9px;margin-top:22px;padding:8px 16px;border:1px solid #867250;
  border-radius:999px;text-decoration:none;font-size:13.5px;font-weight:500;color:var(--ink);
  transition:background-color .2s ease}
.c-rating:hover{background:rgba(167,145,108,.12)}
.c-rating .g-logo{width:15px;height:15px}
.c-rating .stars{color:#7A6644;letter-spacing:1.5px;font-size:13px}

/* main split */
.section:has(> .c-main){padding-top:clamp(28px,3.2vw,44px);padding-bottom:clamp(28px,3.2vw,48px)}
.contact-page .reviews{padding-top:clamp(28px,3.2vw,48px)}
.c-main{display:grid;grid-template-columns:minmax(300px,2fr) minmax(0,3fr);gap:clamp(28px,4vw,64px);align-items:start}
@media (max-width:880px){.c-main{grid-template-columns:1fr}}

/* left rail: contact rows */
.c-rows{display:flex;flex-direction:column}
.c-row{display:flex;gap:16px;align-items:center;padding:22px 0;border-bottom:1px solid var(--hairline);text-decoration:none}
.c-row:first-child{padding-top:0}
.c-row:last-child{border-bottom:0}
.c-row .tile{flex:none;width:44px;height:44px;border-radius:10px;background:var(--ink);color:var(--gold);
  display:grid;place-items:center;font-size:17px}
.c-row dt,.c-row .lbl{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--fineprint);margin:0}
.c-row dd,.c-row .val{margin:2px 0 0;font-size:16px;font-weight:500;color:var(--ink)}
a.c-row:hover .val{color:#7A6644}
a.c-row:focus-visible{outline:3px solid #867250;outline-offset:-3px}

/* booking panel · the rail's head, answering the form card on the right.
   Gold fill + white label matches every button on the homepage. */
/* booking panel · the rail's head, answering the form card on the right */
.c-book{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;
  gap:16px;margin:0 0 30px;min-height:0;box-sizing:border-box;
  background:var(--ink);color:#fff;text-decoration:none;
  padding:20px 24px;border-radius:12px;
  transition:background-color .25s ease}
.c-book__mark{position:absolute;z-index:-1;top:-38%;right:14%;width:84px;height:auto;
  color:rgba(167,145,108,.22);transform:rotate(12deg)}
.c-book__label{font-family:var(--brand-display);font-weight:600;font-size:clamp(22px,2.4vw,27px);
  line-height:1;letter-spacing:.01em}
.c-book__arrow{margin-left:auto;font-size:24px;line-height:1;color:var(--gold);
  transition:transform .25s ease}
.c-book:hover{background:#2B2412}
.c-book:hover .c-book__arrow{transform:translateX(5px)}
.c-book:focus-visible{outline:3px solid #867250;outline-offset:3px}
@media (prefers-reduced-motion:reduce){.c-book,.c-book__arrow{transition:none}
  .c-book:hover .c-book__arrow{transform:none}}

/* hours card */
.c-hours{margin-top:34px;background:var(--paper);border:1px solid var(--hairline);border-radius:12px;padding:26px 26px 24px}
.c-hours h2{font-size:19px;margin:0 0 18px}
.c-hours dl{margin:0;display:grid;gap:11px}
.c-hours div{display:flex;justify-content:space-between;gap:16px;font-size:14.5px}
.c-hours dt{color:var(--body);margin:0}
.c-hours dd{margin:0;font-variant-numeric:tabular-nums;color:var(--ink);font-weight:500;white-space:nowrap}
.c-hours .closed dd{color:var(--fineprint);font-weight:400}
.c-hours .confirm{margin:18px 0 0;font-size:12.5px;color:var(--fineprint)}
.c-hours .confirm strong{color:#7A6644}

/* map */
.c-map{margin-top:34px;border:1px solid var(--hairline);border-radius:12px;overflow:hidden}
.c-map iframe{display:block;width:100%;height:260px;border:0}
.c-dirs{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:16px;width:100%;box-sizing:border-box;
  background:var(--paper);color:var(--ink);border:1px solid #867250;text-decoration:none;font-weight:600;font-size:15px;
  padding:15px 20px;border-radius:8px;transition:background-color .2s ease}
.c-dirs i{color:#7A6644}
.c-dirs:hover{background:#F2EBE0}
.c-dirs:focus-visible{outline:3px solid #867250;outline-offset:2px}

/* right: the form card · contact-split, Kirkpatrick treatment */
.c-formwrap{position:sticky;top:calc(var(--nav-h) + 20px)}
.c-card{background:#fff;border:1px solid var(--hairline);border-radius:12px;
  box-shadow:0 18px 44px rgba(20,17,13,.13);
  padding:clamp(26px,3.2vw,44px) clamp(22px,2.8vw,40px)}
.c-card h2{font-size:clamp(22px,2.2vw,28px);margin:0}
.c-card__sub{margin:8px 0 0;font-size:15px;color:var(--body)}
.c-fields{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:26px}
.c-field--full{grid-column:1/-1}
.c-field label{display:block;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  color:var(--body);margin-bottom:7px}
.c-field input{width:100%;box-sizing:border-box;border:1px solid var(--hairline);
  border-radius:6px;background:var(--paper);padding:13px 14px;
  font-family:var(--brand-text);font-size:16px;color:var(--ink);transition:border-color .15s ease,background-color .15s ease}
.c-field input:hover{border-color:#867250}
.c-field input:focus-visible{outline:3px solid #867250;outline-offset:1px;
  border-color:#867250;background:#fff}
.c-send{margin-top:24px;width:100%;background:var(--ink);color:#fff;border:0;border-radius:8px;cursor:pointer;
  font-family:var(--brand-text);font-size:15.5px;font-weight:600;letter-spacing:.03em;padding:16px 32px;
  transition:background-color .2s ease}
.c-send:hover{background:#2B2412}
.c-send:focus-visible{outline:3px solid #867250;outline-offset:2px}
/* off-palette: the only red on the site, reserved for this HIPAA warning. 5.3:1 on white. */
.c-hipaa{margin:16px 0 0;font-size:12.5px;line-height:1.6;color:#B3261E}
@media (max-width:880px){.c-formwrap{position:static}}
@media (max-width:620px){.c-fields{grid-template-columns:1fr}}

/* right: map and directions (replaces the form, Gary 10/2) */
.c-mapwrap{position:sticky;top:calc(var(--nav-h) + 20px)}
.c-mapwrap__h{font-family:var(--font-display,'Cinzel'),serif;font-size:clamp(24px,2.2vw,30px);color:var(--ink);margin:0 0 6px}
.c-mapwrap__addr{margin:0 0 18px;color:var(--body,#4A443C)}
.c-mapwrap .c-map{margin-top:0}
.c-map--lg iframe{height:clamp(320px,34vw,460px)}
.c-from{margin-top:28px;padding-top:22px;border-top:1px solid var(--hairline)}
.c-from h3{font-family:'Open Sans',sans-serif;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#7A6644;margin:0 0 12px}
.c-from ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 24px}
.c-from a{display:flex;justify-content:space-between;align-items:center;gap:8px;color:var(--ink);text-decoration:none;font-weight:600;padding:8px 0;border-bottom:1px solid var(--hairline)}
.c-from a::after{content:"\2192";color:#7A6644;transition:transform .2s ease}
.c-from a:hover::after{transform:translateX(4px)}
.c-from a:focus-visible{outline:3px solid #867250;outline-offset:2px}
/* When You Arrive (Gary, 10-3): a second panel under the hours, one numbered step per line.
   It shares .c-hours for the panel and the small heading. Cream on ink numerals, 13.9:1. */
.c-hours.c-arrive{margin-top:18px}
.c-arrive ol{list-style:none;counter-reset:arrive;margin:0;padding:0;display:grid;gap:14px}
.c-arrive li{counter-increment:arrive;display:grid;grid-template-columns:26px minmax(0,1fr);gap:12px;align-items:start;font-size:15.5px;line-height:1.5;color:var(--ink)}
.c-arrive li::before{content:counter(arrive);display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--ink);color:#F1E6CF;font-size:13px;font-weight:600;line-height:1}
@media (max-width:880px){.c-mapwrap{position:static}}
@media (prefers-reduced-motion:reduce){.c-from a::after{transition:none}}

/* Doctor page header (Gary, 10-3): a vertical portrait on the left, on the full-width ink
   and gold texture; the name, write-up, up to three quick facts
   and the doctor's own booking button on the right. It replaces the wide photo split of
   10-2, which blew a vertical headshot up to fill a landscape panel. Texture and scrim are
   the single-page hero's. Against the brightest texture pixel through the .62 scrim: cream
   6.7:1, white 9.8:1. */
.dr-hero{padding-top:var(--nav-h);color:#fff;
  background:linear-gradient(rgba(11,9,7,.62),rgba(11,9,7,.62)),#14110D url("../img/hero-texture-ink-gold.jpg") center/cover no-repeat}
/* Gary, 10-3: the portrait runs the full height of the header, top to bottom, the way the
   photo does in every other header. The copy column sets the height and carries the padding. */
.dr-hero__in{display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);column-gap:clamp(36px,5.5vw,76px);
  align-items:stretch}
/* Gary, 10-3: every doctor's header is the same height, so the portraits match from page to
   page. The heights below are the tallest copy column today (Dr. Cox's five-line write-up) at
   each width, measured; a shorter write-up centres inside. If a write-up ever runs longer than
   these, that header grows and the match is lost: trim the write-up or raise the numbers. */
.dr-hero__portrait{position:relative;margin:0;min-height:624px;overflow:hidden}
@media (max-width:1280px){.dr-hero__portrait{min-height:612px}}
@media (max-width:1000px){.dr-hero__portrait{min-height:664px}}
.dr-hero__portrait img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;
  object-position:var(--dr-crop,50% 10%)}
.dr-hero__copy{align-self:center;padding-block:clamp(36px,3.6vw,52px)}
.dr-hero h1{font-size:clamp(34px,4vw,54px);line-height:1.08;margin:0 0 18px;color:#fff;text-wrap:balance}
.dr-hero .eyebrow{font:400 15px/1.3 var(--text);letter-spacing:.16em;text-transform:uppercase;margin:0 0 14px;color:#E3D3B3}
.dr-hero .lede{font-size:clamp(17px,1.35vw,19px);line-height:1.65;color:#fff;max-width:54ch;margin:0}
.dr-hero__facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.2vw,28px);
  margin:30px 0 0;padding-top:20px;border-top:1px solid rgba(167,145,108,.55)}
.dr-hero__facts dt{font:400 13px/1.3 var(--text);letter-spacing:.14em;text-transform:uppercase;color:#E3D3B3;margin:0 0 6px}
.dr-hero__facts dd{font:500 15px/1.45 var(--text);color:#fff;margin:0}
.dr-hero .btn-row{margin-top:28px;display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.dr-hero__more{color:#E3D3B3;font-weight:600;font-size:15px;text-decoration:none;border-bottom:1px solid rgba(227,211,179,.5);padding-bottom:2px;transition:border-color .2s ease}
.dr-hero__more::after{content:" \2193"}
.dr-hero__more:hover{border-bottom-color:#E3D3B3}
.dr-hero__more:focus-visible{outline:3px solid #E3D3B3;outline-offset:3px}
@media (max-width:900px){
  .dr-hero__in{grid-template-columns:minmax(0,300px) minmax(0,1fr)}
  .dr-hero__facts{grid-template-columns:1fr;gap:14px}
  .dr-hero__portrait{min-height:712px}
}
@media (max-width:800px){.dr-hero__portrait{min-height:840px}}
@media (max-width:700px){
  .dr-hero__in{grid-template-columns:1fr}
  /* stacked: the portrait spans the screen edge to edge above the copy, as the other headers do */
  .dr-hero__portrait{margin-inline:calc(var(--gutter) * -1);min-height:0;height:min(118vw,560px)}
  .dr-hero__copy{padding-block:28px 40px}
}
/* Doctor page body (Gary, 10-3): the story as one read on the left and Credentials in a
   panel on the right that stays in view. One layout for every doctor. single-vef_team.php builds it from the page's own split,
   text and ledger blocks. It replaces the photo-and-text splits of 10-2, which ran about
   3,400px on Dr. Cox's page and left Dr. Fencl's story floating in a narrow column. */
.dr-body{padding-block:clamp(44px,5vw,72px);scroll-margin-top:var(--nav-h)}
.dr-body__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);column-gap:clamp(36px,5.5vw,76px);align-items:start}
.dr-story h2{font-size:clamp(26px,2.6vw,34px);margin:1.4em 0 .45em}
.dr-story > h2:first-child{margin-top:0}
.dr-story p{font-size:17px;line-height:1.72;margin:0 0 1.05em;max-width:68ch}
/* Gary, 10-3: no row of three. A vertical photo sits in the story beside its own section,
   text wrapping on the left; on phones it runs full width under the section heading. */
.dr-story h2{clear:both}
.dr-story::after{content:"";display:block;clear:both}
.dr-story__photo{float:right;width:clamp(200px,36%,260px);margin:6px 0 20px clamp(22px,3vw,36px)}
.dr-story__photo img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:50% 20%}
@media (max-width:600px){
  .dr-story__photo{float:none;width:100%;margin:4px 0 22px}
  .dr-story__photo img{aspect-ratio:4/5}
}
.dr-record{position:sticky;top:100px;background:var(--paper);border-top:3px solid #A7916C;padding:clamp(22px,2.4vw,30px)}
.dr-record .ledger{padding:0;background:none;border:0}
.dr-record .ledger > .rail{width:auto;padding:0;margin:0}
.dr-record .ledger__head{margin:0 0 6px}
.dr-record .ledger__head h2{font-size:clamp(24px,2.2vw,28px);margin:0 0 6px}
.dr-record .ledger__head .lede{font-size:15px;line-height:1.5;margin:0;max-width:none}
.dr-record .ledger__main h3{font-size:17px;margin:22px 0 4px}
.dr-record .deflist{border-top:0}
/* Gary, 10-3: the years a little bigger, same face. The column is wide enough for "September". */
.dr-record .deflist div{grid-template-columns:104px 1fr;gap:14px;padding:11px 0}
.dr-record .deflist dt{font-size:14px}
.dr-record .deflist dd{font-size:14.5px;line-height:1.5}
.dr-record__book{display:flex;justify-content:center;margin-top:24px;border-radius:8px}
@media (max-width:900px){
  .dr-body__in{grid-template-columns:1fr;row-gap:36px}
  .dr-record{position:static}
}
