/* Footer v3 (lead 2026-10-13). One aligned grid, short link list. Variants: f3-a (slim rows), f3-b (four columns). */
.dio-footer-v3{padding:clamp(40px,5vw,64px) 0 28px}
.dio-footer-v3 .f3-in{width:var(--dio-col,min(1280px,calc(100% - 32px)));margin:0 auto;box-sizing:border-box;padding-inline:clamp(0px,1vw,8px)}
.dio-footer-v3 a{text-decoration:none}
.dio-footer-v3 h2{margin:0 0 14px;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#33444f}
.dio-footer-v3 a[aria-label="Done In One home"]{display:block;line-height:0}
.dio-footer-v3 a[aria-label="Done In One home"] img{width:64px;height:auto}
.dio-footer-v3 .tel-stack{display:flex;flex-direction:column;gap:2px;min-height:0}
.dio-footer-v3 .tel-words{font-size:20px;font-weight:700;color:#1c3341;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.dio-footer-v3 .tel-digits{font-size:15px;color:#526773}
.dio-footer-v3 .f3-social .dfs-row{display:flex;gap:10px}
.dio-footer-v3 .f3-social .dfs-group{display:block;margin-top:12px;font-size:14px;line-height:1.45;text-decoration:underline;text-underline-offset:3px;max-width:30ch}
/* 2026-11-11 audit: keyed on the list, not on the link address. The launch build rewrites these links to /locations/..., so the old
   a[href^="offices.html#"] selectors stopped matching and names ran into addresses ("Boca Raton327 Plaza Real") on every built page. */
.dio-footer-v3 .f3-list a strong{display:block;font-size:15px;color:#1c3341}
.dio-footer-v3 .f3-list a span{display:block;font-size:14px;line-height:1.45;color:#526773}
.dio-footer-v3 .soon{margin-left:6px;vertical-align:1px}
.dio-footer-v3 .f3-base{margin-top:32px;padding-top:20px;border-top:1px solid rgba(32,56,70,.16)}
.dio-footer-v3 .footer-review{margin:0;font-size:12px;color:#526773}
/* A: slim rows */
.f3-a .f3-top{display:grid;grid-template-columns:auto auto 1fr;gap:clamp(24px,4vw,56px);align-items:center;padding-bottom:28px;border-bottom:1px solid rgba(32,56,70,.16)}
.f3-a .f3-social{justify-self:end;display:flex;align-items:center;gap:20px}
.f3-a .f3-social .dfs-group{margin:0;max-width:26ch;text-align:right}
.f3-a .f3-offices{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px;padding-top:28px}
.f3-a .f3-base{display:flex;justify-content:space-between;align-items:center;gap:16px 32px;flex-wrap:wrap}
.f3-a .f3-links{display:flex;flex-wrap:wrap;gap:8px 26px}
.f3-a .f3-links a{font-size:15px;font-weight:600;color:#1c3341}
/* B: four columns */
.f3-b .f3-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:clamp(24px,4vw,56px);align-items:start}
.f3-b .f3-brand{display:grid;gap:20px;justify-items:start}
.f3-b .f3-list{display:grid;gap:16px}
.f3-b .f3-links{display:grid;gap:10px;align-content:start}
.f3-b .f3-links a{font-size:15px;color:#1c3341}
.f3-b .f3-links a:hover,.f3-a .f3-links a:hover{text-decoration:underline;text-underline-offset:3px}
@media(max-width:900px){.f3-a .f3-top{grid-template-columns:auto 1fr}.f3-a .f3-social{grid-column:1/-1;justify-self:start;flex-wrap:wrap}.f3-a .f3-social .dfs-group{text-align:left}.f3-a .f3-offices{grid-template-columns:repeat(2,minmax(0,1fr))}
 .f3-b .f3-grid{grid-template-columns:1fr 1fr}.f3-b .f3-brand{grid-column:1/-1}}
@media(max-width:520px){.f3-a .f3-top{grid-template-columns:1fr}.f3-b .f3-grid{grid-template-columns:1fr 1fr}.f3-b .f3-links{grid-column:1/-1;grid-template-columns:1fr 1fr}.f3-b .f3-links h2{grid-column:1/-1}}
.dio-footer-v3 .soon{display:inline-block;margin-left:6px;padding:2px 8px;border-radius:999px;background:#ed873c;color:#1C2E3A;font-size:11px;font-style:normal;font-weight:700;letter-spacing:.06em;text-transform:uppercase;vertical-align:middle}
.dio-footer-v3 nav.f3-links{display:grid!important;grid-template-columns:1fr!important;border:0;padding:0;margin:0}
.f3-a nav.f3-links{display:flex!important}
@media(max-width:520px){.f3-b nav.f3-links{grid-template-columns:1fr 1fr!important}}
.dio-footer-v3 nav.f3-links a{min-height:0;padding:4px 0;line-height:1.4}.f3-b nav.f3-links{gap:6px!important}
/* Coming soon column (Daniel 2026-10-13: "find a spot for the coming soon where it looks aligned"): the heading is the one orange tag;
   the per-office tags are hidden here so the city names line up with the Florida column. */
.f3-soon h2{display:inline-block;margin-bottom:14px;padding:3px 10px;border-radius:999px;background:#ed873c;color:#1C2E3A;font-size:11px;letter-spacing:.12em}
.f3-soon .soon{display:none}
.f3-soon h2{margin:-3px 0 11px}
.f3-soon h2{display:block;width:fit-content;line-height:16px;margin:0 0 12px}.f3-b nav.f3-links h2{margin-bottom:8px}
/* Logo (Daniel 2026-10-13: "should the DIO logo be a little bigger"): larger, top edge on the column-heading line, phone tucked under it. */
.f3-b .f3-brand{gap:16px}.f3-b .f3-brand a[aria-label="Done In One home"] img{width:96px}.f3-b .f3-brand a[aria-label="Done In One home"]{margin:0 0 4px}
/* Alignment pass (Daniel 2026-10-13 "it still feels malaligned"): four equal columns flush with the bands above; row one = logo beside
   the headings (headings sit on the logo's bottom edge); row two = phone, first office, first office, first link on one line. */
.dio-footer-v3 .f3-in{padding-inline:0}
.f3-b .f3-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.f3-b .f3-brand{gap:0}
.f3-b .f3-brand a[aria-label="Done In One home"]{margin:0}
.f3-b .f3-col:not(.f3-brand)>h2{margin-top:33px}
.f3-b .f3-brand .tel-stack{margin-top:-7px}
.f3-b .f3-brand .f3-social{margin-top:20px}
/* New offices: plain heading like Florida offices; each office keeps its own flag, on its own line under the address */
.f3-soon h2{display:block;width:auto;margin:33px 0 14px;padding:0;border-radius:0;background:none;color:#33444f;font-size:13px;letter-spacing:.14em;line-height:normal}
.f3-soon .soon{display:inline-block;margin:6px 0 0}
@media(max-width:900px){.f3-b .f3-grid{grid-template-columns:1fr 1fr}.f3-b .f3-col:not(.f3-brand)>h2,.f3-soon h2{margin-top:0}.f3-b .f3-brand .tel-stack{margin-top:14px}}
/* Footer phone (Daniel 2026-10-13): no "Call" word; digits a touch larger */
.dio-footer-v3 .tel-digits{font-size:17px}
.dio-footer-v3 .dio-footer-phone .tel-digits{font-size:17px!important}.dio-footer-v3 .dio-footer-phone .tel-words{font-size:20px!important}
.f3-b .f3-brand .tel-stack{margin-top:14px!important;line-height:1.4!important}.f3-b .f3-brand .tel-stack>span{line-height:1.4!important}
/* Daniel 2026-10-13: "the top of the DIO logo should line up with the top of the other columns". Headings start at the top line
   with the logo; the logo link is held to the image's own size on every page (Home and Cost were adding 20px). */
.dio-footer-v3 a[aria-label="Done In One home"]{display:block!important;line-height:0!important;min-height:0!important;height:auto!important;padding:0!important}
.dio-footer-v3 a[aria-label="Done In One home"] img{display:block}
.f3-b .f3-col:not(.f3-brand)>h2,.f3-b .f3-soon h2{margin-top:0!important}
.dio-footer-v3 a[aria-label="Done In One home"] img{margin:0!important}
/* Daniel 2026-10-13: "the left columns features look too prominent and big... i just want it to all appear correct". The brand column
   takes the same type scale as the office columns: phone like an office name, digits like an address, smaller logo and icons. */
.f3-b .f3-brand a[aria-label="Done In One home"] img{width:76px!important}
.dio-footer-v3 .dio-footer-phone .tel-words{font-size:17px!important;letter-spacing:0;text-underline-offset:3px}
.dio-footer-v3 .dio-footer-phone .tel-digits{font-size:15px!important;color:#526773}
.f3-b .f3-brand .tel-stack{margin-top:12px!important}
.f3-b .f3-brand .f3-social{margin-top:16px}
.dio-footer-v3 .f3-social .dfs-row{gap:8px}
.dio-footer-v3 .f3-social .dfs-icon{width:34px!important;height:34px!important;min-width:0;min-height:0}
.dio-footer-v3 .f3-social .dfs-icon svg{width:15px!important;height:15px!important}
.dio-footer-v3 .f3-social .dfs-group{font-size:13px;margin-top:10px;max-width:28ch}
/* Daniel 2026-10-13: "tone down the size of the phone number from being so bold" */
.dio-footer-v3 .dio-footer-phone .tel-words{font-size:16px!important;font-weight:600!important}
.dio-footer-v3 a[href="why-dio.html#our-lab"]{display:block}.dio-footer-v3 a[href="why-dio.html#our-lab"] strong{display:block;font-size:15px;color:#1c3341}.dio-footer-v3 a[href="why-dio.html#our-lab"] span{display:block;font-size:14px;line-height:1.45;color:#526773}
/* Daniel 2026-10-13: "put that address under the DIO logo and tone down the phone number size... make it all look correct relative to
   other columns". The brand column now uses the office columns' styles exactly: address = office address, phone = office name, digits = address. */
.dio-footer-v3 .f3-addr{margin:14px 0 0;font-size:14px;line-height:1.45;color:#526773}
.dio-footer-v3 .dio-footer-phone .tel-words{font-size:15px!important;font-weight:700!important;text-decoration-thickness:1px}
.dio-footer-v3 .dio-footer-phone .tel-digits{font-size:14px!important;line-height:1.45!important}
.f3-b .f3-brand .tel-stack{margin-top:16px!important;gap:0}
/* Pages that bold every link (Answers) must not bold the footer */
.dio-footer-v3 a,.dio-footer-v3 a span,.dio-footer-v3 .f3-addr{font-weight:400}.dio-footer-v3 a strong,.dio-footer-v3 .tel-words{font-weight:700}
/* Daniel 2026-10-17: "move this DIO logo to be centered over the column". The brand block shrinks to its widest line (the group link) and the logo centres over it. Desktop only; on tablet and phone the brand block
   spans the full row and stays left with its text. */
@media(min-width:901px){.f3-b .f3-brand{width:fit-content}.f3-b .f3-brand a[aria-label="Done In One home"]{justify-self:center}}
/* mirror check 2026-10-17 */

/* Headquarters label (Daniel 2026-10-27: Congress Ave is headquarters, not a patient office) */
.f3-hq{display:block;font-size:11px;letter-spacing:.12em;font-weight:650;text-transform:uppercase;opacity:.75;margin-bottom:4px}
.f3-find{display:inline-block;margin-top:6px;font-size:14px;font-weight:600;text-decoration:underline;text-underline-offset:3px;min-height:24px}

/* Logo and column alignment (Daniel 2026-10-27: "improving the centering of the logo for appearance of the columns").
   Desktop: the logo sits flush left on the brand column's text edge (no longer centred over ragged-left text), above the
   heading row; the other columns drop by the logo's height plus the address gap, so HEADQUARTERS / FLORIDA OFFICES /
   NEW OFFICES / EXPLORE share one line and the first text lines below them line up. HQ label uses the column-heading style. */
@media(min-width:901px){
  .f3-b .f3-brand{width:auto;justify-items:start}
  .f3-b .f3-brand a[aria-label="Done In One home"]{justify-self:start}
  .f3-b .f3-brand a[aria-label="Done In One home"]{margin-bottom:8px}
  .f3-b .f3-col:not(.f3-brand){padding-top:64px}
}
.f3-b .f3-hq{font-size:13px;line-height:1.5;letter-spacing:.14em;font-weight:700;color:rgb(51,68,79);opacity:1;margin-bottom:14px}

/* 2026-11-11 audit: the phone and tablet bottom bar (Call + Free Consultation) covered the last footer line. The v2 footer reserved
   room for it (shell-structure.css) and the v3 padding above took it back. */
@media(max-width:1000px){.dio-footer-v3{padding-bottom:calc(28px + 88px + env(safe-area-inset-bottom,0px))}}
/* 2026-11-11 audit: tablet used one column of Explore links beside an empty two-thirds; two columns like the phone. */
@media(min-width:521px) and (max-width:900px){.f3-b nav.f3-links{grid-template-columns:1fr 1fr!important}.f3-b nav.f3-links h2{grid-column:1/-1}}
/* 2026-11-12 Daniel: each office's phone number in the footer, under its address */
.f3-office{display:block}
.f3-office .f3-tel{display:block;width:fit-content;margin-top:4px;font-size:14px;line-height:1.45;font-weight:600;color:#a84a14;text-decoration:none;white-space:nowrap}
.f3-office .f3-tel:hover,.f3-office .f3-tel:focus-visible{text-decoration:underline}
/* 2026-11-12 Daniel: "put the phone number in the same format as the other offices and put the now open below" */
.dio-footer-v3 .f3-list .f3-office .f3-tel{display:block;width:fit-content}
.dio-footer-v3 .f3-list .f3-office .soon{display:block;width:fit-content;margin:6px 0 0}