/* ==========================================================================
   Footer v4 — Figma "Footer PC" 4270:10906 (1920x709) and "Footer Mobile" 3638:8467 (390x1622).
   Solid #422666, three bands with gap 48 (mobile 32): brand (logo 232 | intro 480 | email + hours + social 340, pb 40,
   border-bottom) · four branch columns under the first authored heading, gap32 · bottom bar (pt 24, pb 28,
   border-top; copyright 620 | policy links + badges). 2026 Gilroy tokens; PC Figma white alpha variants, mobile opaque.
   Content 1280 wide at >=1344 viewport; narrower: same grid, fluid. Tablet 768-1023: groups stacked. <=767: one column.
   The UX Block wrapper section (.qh_f1) is neutralised so the footer controls its own spacing.
   ========================================================================== */
.qh_f1.section{padding:0!important;background:none!important}
.qh_f1 > .section-content > .row,.qh_f1 .row > .col{max-width:none;padding:0;margin:0;flex-basis:100%}

.ohio-footer{--k:.8;background:#422666;color:#fff;font:400 var(--fs-caption)/var(--lh-caption) var(--font-base);padding:72px 32px 0;overflow:hidden}
.ohio-footer,.ohio-footer :not(.ohio-footer__sr){font-family:var(--ohio-font-body,"SVN-Gilroy","Be Vietnam Pro",Arial,sans-serif)}
.ohio-footer a{color:inherit;text-decoration:none}
.ohio-footer a:hover{color:#fff;text-decoration:underline}
.ohio-footer :where(p,h4,h5,ul,li){margin:0;padding:0;list-style:none;color:inherit}
.ohio-footer__in{max-width:1280px;margin:0 auto;display:flex;flex-direction:column;gap:48px}
.ohio-footer__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* band 1 */
.ohio-footer__brand{display:grid;grid-template-columns:minmax(160px,232px) minmax(0,480px) minmax(240px,340px);justify-content:space-between;
  column-gap:32px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.15)}
.ohio-footer__logo{display:block;margin-top:10px;align-self:start;line-height:0}
.ohio-footer__logo img{display:block;width:100%;max-width:232px;height:auto}
.ohio-footer__intro{margin-top:26px;color:rgba(255,255,255,.85)}
.ohio-footer__reach{display:flex;flex-direction:column;gap:6px}
.ohio-footer__li{color:rgba(255,255,255,.85)}
.ohio-footer__follow{margin-top:10px;display:flex;flex-direction:column;gap:10px}
.ohio-footer__follow p{font-size:var(--fs-caption);line-height:var(--lh-caption);color:rgba(255,255,255,.6)}
.ohio-footer__social{display:flex;flex-wrap:wrap;gap:10.7px}
.ohio-footer__social img{display:block;width:44.3px;height:44.3px;object-fit:contain}

/* band 2 */
.ohio-footer__bands{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 32px}
.ohio-footer__group{display:flex;flex-direction:column;gap:24px;min-width:0}
.ohio-footer__group:nth-child(n+2){grid-column:span 3}
.ohio-footer .ohio-footer__title{font:600 var(--fs-label)/var(--lh-label) var(--font-base);letter-spacing:.6px;text-transform:uppercase;color:#fff;padding-bottom:15px;position:relative}
.ohio-footer__title::after{content:"";position:absolute;left:0;bottom:0;width:32px;height:3px;border-radius:2px;background:#F6911C}
.ohio-footer__branches{display:grid;grid-template-columns:repeat(var(--cols,1),minmax(0,1fr));gap:32px}
.ohio-footer__group:nth-child(n+2) .ohio-footer__branches{--cols:3}
.ohio-footer__group:only-child{grid-column:1 / -1}
.ohio-footer__group:only-child .ohio-footer__branches{--cols:4}   /* old content: one group, all branches */
/* Checklist21/10 sample: one shared heading and four branch columns, same sections on mobile.
   Keep authored secondary group headings for assistive technology; never rewrite the UX Block. */
.ohio-footer__bands .ohio-footer__group,.ohio-footer__bands .ohio-footer__branches{display:contents}
.ohio-footer__bands .ohio-footer__title{grid-column:1 / -1}
.ohio-footer__bands .ohio-footer__group:nth-child(n+2) > .ohio-footer__title{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ohio-footer__branch{display:flex;flex-direction:column;min-width:0}
.ohio-footer__kicker{font-size:var(--fs-caption);line-height:var(--lh-caption);color:rgba(255,255,255,.6)}
.ohio-footer .ohio-footer__branch-name{font:600 var(--fs-h4)/var(--lh-h4) var(--font-base);color:#fff;margin:2px 0 8px;text-transform:none;letter-spacing:0}
.ohio-footer__addr{min-height:44px;margin-bottom:8px;color:rgba(255,255,255,.85)}
.ohio-footer__tel{color:rgba(255,255,255,.85);margin-bottom:8px}
.ohio-footer__tel a{font-weight:600;font-size:var(--fs-caption);color:#fff}
.ohio-footer__lic{font-size:var(--fs-caption);line-height:var(--lh-caption);color:rgba(255,255,255,.55)}

/* band 3 */
.ohio-footer__bottom{display:flex;justify-content:space-between;align-items:center;gap:32px;padding:24px 0 28px;border-top:1px solid rgba(255,255,255,.15)}
.ohio-footer__copy{flex:0 1 620px;font-size:var(--fs-caption);line-height:var(--lh-caption);color:rgba(255,255,255,.6)}
.ohio-footer__right{display:flex;align-items:center;gap:32px}
.ohio-footer__policies{display:flex;gap:24px;white-space:nowrap}
.ohio-footer__policies :is(a,span){font:400 var(--fs-caption)/var(--lh-caption) var(--font-base);color:rgba(255,255,255,.9);text-transform:none}
.ohio-footer__badges{display:flex;align-items:center;gap:calc(9.6px*var(--k))}
/* the badge PNGs carry transparent margins: scale so the visible art is 128.8x40.5 / 120.4x45.6 (mobile) x --k */
.ohio-footer .ohio-footer__dmca{flex:none;width:calc(144.7px*var(--k));height:auto;margin:calc(-3.2px*var(--k)) calc(-7.2px*var(--k)) calc(-2.4px*var(--k)) calc(-8.7px*var(--k))}
.ohio-footer .ohio-footer__bct{flex:none;width:calc(124.4px*var(--k));height:auto;margin:calc(-.8px*var(--k)) calc(-.8px*var(--k)) calc(-.8px*var(--k)) calc(-3.2px*var(--k))}
/* the <img> box IS the Figma badge box (DMCA 128.81x40.51, BCT 120.42x45.63, gap 12, x --k): object-view-box crops the PNG's transparent margins (DMCA 182x58 art 11,4..173,55; BCT 156x58 art 4,1..155,57) */
@supports (object-view-box:inset(0)){
  .ohio-footer__badges{gap:calc(12px*var(--k))}
  .ohio-footer .ohio-footer__dmca{width:calc(128.81px*var(--k));height:calc(40.51px*var(--k));margin:0;object-view-box:inset(6.897% 4.945% 5.172% 6.044%)}
  .ohio-footer .ohio-footer__bct{width:calc(120.42px*var(--k));height:calc(45.63px*var(--k));margin:0;object-view-box:inset(1.724% .641% 1.724% 2.564%)}
}
/* PC bar 1280x107 (frame 4164:9888): the copyright is 3 lines (54) at 620; a shorter admin text keeps the bar height, content centred */
@media (min-width:1024px){.ohio-footer__bottom{min-height:107px;box-sizing:border-box}}

/* Footer PC PA B 4823:21149: component type and alpha colours take precedence
   over the shared guide. Mobile layout below follows 4823:24087. */
html body.ohio-hh :is(#wrapper,#footer) .ohio-footer.ohio-on-dark p[class]{font:400 14px/22px "SVN-Gilroy",sans-serif!important;letter-spacing:0;text-transform:none}
html body.ohio-hh :is(#wrapper,#footer) .ohio-footer.ohio-on-dark :is(p.ohio-footer__intro,p.ohio-footer__li,p.ohio-footer__addr,p.ohio-footer__tel){color:rgba(255,255,255,.85)!important}
html body.ohio-hh :is(#wrapper,#footer) .ohio-footer.ohio-on-dark :is(p.ohio-footer__kicker,p.ohio-footer__copy,.ohio-footer__follow p){font-size:13px!important;line-height:20px!important;color:rgba(255,255,255,.6)!important}
html body.ohio-hh :is(#wrapper,#footer) .ohio-footer.ohio-on-dark .ohio-footer__hint{color:rgba(255,255,255,.6)!important;font:inherit!important}
html body.ohio-hh :is(#wrapper,#footer) .ohio-footer.ohio-on-dark p.ohio-footer__lic{font-size:13px!important;line-height:20px!important;color:rgba(255,255,255,.55)!important}
html body.ohio-hh :is(#wrapper,#footer) .ohio-footer.ohio-on-dark .ohio-footer__policies li :is(a,span){font:500 14px/20px "SVN-Gilroy",sans-serif!important;color:rgba(255,255,255,.9)!important}
html body.ohio-hh :is(#wrapper,#footer) .ohio-footer.ohio-on-dark p.ohio-footer__li :is(a,span:not(.ohio-footer__hint)){color:inherit!important;font:inherit!important}
html body.ohio-hh :is(#wrapper,#footer) .ohio-footer.ohio-on-dark p.ohio-footer__tel a{font:600 15px/22px "SVN-Gilroy",sans-serif!important;color:#fff!important}
html body.ohio-hh :is(#wrapper,#footer) .ohio-footer.ohio-on-dark :is(.ohio-footer__title,.ohio-footer__branch-name){font:600 20px/28px "SVN-Gilroy",sans-serif!important;color:#fff!important}
html body.ohio-hh :is(#wrapper,#footer) .ohio-footer.ohio-on-dark .ohio-footer__title{letter-spacing:.8px!important}
@media(min-width:1024px){
  .ohio-footer__brand{align-items:center}
  .ohio-footer__logo{margin:0;align-self:center}
  .ohio-footer__logo img{height:120.296px;object-fit:fill}
  .ohio-footer__intro{margin:0}
  .ohio-footer__follow{margin-top:10px}
  .ohio-footer__social{gap:10.7px}
  /* Restore authored 1 + 3 groups only on PC; responsive flattening stays intact. */
  .ohio-footer__bands .ohio-footer__group{display:flex}
  .ohio-footer__bands .ohio-footer__branches{display:grid}
  .ohio-footer__bands .ohio-footer__group:nth-child(n+2) > .ohio-footer__title{position:relative;width:auto;height:auto;padding:0 0 15px;overflow:visible;clip:auto;white-space:normal}
  .ohio-footer__title{padding-bottom:15px}
  .ohio-footer .ohio-footer__branch-name{margin:2px 0 8px}
  .ohio-footer__bottom{min-height:112px}
  .ohio-footer__tel{height:22px} /* 15px number must not inflate the 22px Figma line box. */
}
/* Figma Footer Mobile 4823:24087: use the same authored groups and data as PC.
   Stack both groups on tablet as well; no sample-A flattening or hidden partner title. */
@media (max-width:1023px){
  .ohio-footer.ohio-on-dark{--k:1;padding:40px 20px 104px}
  .ohio-footer__in{gap:32px}
  .ohio-footer__brand{display:flex;flex-direction:column;align-items:flex-start;gap:20px;padding-bottom:32px;border-color:#fff}
  .ohio-footer__logo{width:154.286px;height:80px;margin:0;flex:none}
  .ohio-footer__logo img{width:154.286px;height:80px;object-fit:fill}
  .ohio-footer__intro{margin:0}
  .ohio-footer__reach{width:100%;gap:6px}
  .ohio-footer__follow{margin-top:14px;gap:10px}
  .ohio-footer__bands{display:flex;flex-direction:column;gap:32px}
  .ohio-footer__bands .ohio-footer__group{display:flex;flex-direction:column;gap:20px;width:100%}
  .ohio-footer__bands .ohio-footer__branches{display:flex;flex-direction:column;gap:20px;width:100%}
  .ohio-footer__bands .ohio-footer__group:nth-child(n+2) > .ohio-footer__title{position:relative;width:auto;height:auto;padding:0 0 13px;overflow:visible;clip:auto;white-space:normal}
  .ohio-footer .ohio-footer__title{padding-bottom:13px}
  .ohio-footer__branch{gap:6px}
  .ohio-footer .ohio-footer__branch-name{margin:-4px 0 0}
  .ohio-footer__addr{min-height:0;margin:0}
  .ohio-footer__tel{margin:0}
  .ohio-footer__group:nth-child(n+2) .ohio-footer__branch:not(:last-child){border-bottom:1px solid #fff;padding-bottom:20px}
  .ohio-footer__bottom{flex-direction:column;align-items:flex-start;gap:16px;padding:24px 0 0;border-color:#fff}
  .ohio-footer__right{flex-direction:column;align-items:flex-start;gap:16px}
  .ohio-footer__policies{gap:20px;white-space:normal;flex-wrap:wrap}
  .ohio-footer__copy{flex:none;order:2}
  html body.ohio-hh :is(#wrapper,#footer) .ohio-footer.ohio-on-dark :is(p[class],.ohio-footer__follow p){font:400 12px/18px "SVN-Gilroy",sans-serif!important}
  html body.ohio-hh :is(#wrapper,#footer) .ohio-footer.ohio-on-dark :is(p[class],.ohio-footer__follow p,.ohio-footer__hint,.ohio-footer__policies li :is(a,span)){color:#fff!important}
  html body.ohio-hh :is(#wrapper,#footer) .ohio-footer.ohio-on-dark :is(.ohio-footer__title,.ohio-footer__branch-name){font:600 18px/26px "SVN-Gilroy",sans-serif!important;letter-spacing:0!important}
  html body.ohio-hh :is(#wrapper,#footer) .ohio-footer.ohio-on-dark p.ohio-footer__tel{font-size:13px!important;line-height:22px!important}
  html body.ohio-hh :is(#wrapper,#footer) .ohio-footer.ohio-on-dark p.ohio-footer__tel a{font-size:14px!important;line-height:22px!important}
  html body.ohio-hh :is(#wrapper,#footer) .ohio-footer.ohio-on-dark .ohio-footer__policies li :is(a,span){font-size:13px!important;line-height:20px!important}
}

/* Empty headings (owner 31/10, 03/11): a group heading left empty (or typed as "_") draws no text and no orange underline.
   PC: its row keeps the height of a filled heading (one blank line) while another heading of the row is filled, so the columns
   stay level; with every heading empty the row is dropped. Stacked (<1024): the heading is dropped and the group continues the
   list above it with the same divider and spacing as between two branches (no extra gap). A branch's small line left empty keeps
   one blank line side by side (PC), only while another small line is filled; stacked it is dropped. */
.ohio-footer__title--empty::before{content:"\00a0"}
.ohio-footer .ohio-footer__title--empty::after{display:none}
.ohio-footer__bands:not(:has(.ohio-footer__title:not(.ohio-footer__title--empty))) .ohio-footer__title--empty{display:none}
@media (max-width:1023px){
  .ohio-footer__bands .ohio-footer__group > .ohio-footer__title--empty{display:none}
  .ohio-footer__bands .ohio-footer__group:has(> .ohio-footer__title--empty):not(:first-child){margin-top:-12px}   /* 32 band gap - 12 = 20, the branch gap */
  .ohio-footer__bands .ohio-footer__group:has(+ .ohio-footer__group > .ohio-footer__title--empty) .ohio-footer__branch:last-child{border-bottom:1px solid #fff;padding-bottom:20px}
}
.ohio-footer__kicker--empty{display:none}
@media(min-width:1024px){
  .ohio-footer__bands:has(p.ohio-footer__kicker:not(.ohio-footer__kicker--empty)) .ohio-footer__kicker--empty{display:block}
  .ohio-footer__kicker--empty::before{content:"\00a0"}
}
