/* ---- ported from the seven approved DFY mockups ----
   Merged with first-definition-wins, because the mockups reuse class
   names for different layouts. See merge_css.py. ---- */
:root{--navy:#023368; --blue:#3170a4; --blue-soft:#eaf0f8; --text:#646464; --text-dark:#414141; --line:#E4E9F0; --slate:#56688A; --slate-deep:#465877; --slate-deeper:#3A4A66; --ground:#F3F5F8; --ink:#0d1b2e;}
*{box-sizing:border-box;margin:0;padding:0;}
html{color-scheme:light;}
body{font-family:'Raleway',sans-serif;color:var(--text);background:#DCE3EA;line-height:1.75;font-size:16px;}
.page{width:100%;background:#fff;overflow:hidden;}
.wrap{max-width:1140px;margin:0 auto;padding:0 20px;}
h1,h2,h3,h4{font-family:'Nunito',sans-serif;color:var(--navy);line-height:1.15;text-wrap:balance;}
h1{font-size:54px;font-weight:800;}
h2{font-size:36px;font-weight:800;}
h3{font-size:20px;font-weight:800;}
h4{font-size:15px;font-weight:800;}
h1 .tone,h2 .tone{color:var(--blue);}
a{color:inherit;text-decoration:none;}
section{position:relative;padding:90px 0;}
.center{text-align:center;}
.center p{max-width:640px;margin-left:auto;margin-right:auto;}
p + p{margin-top:14px;}
.split-head{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:end;margin-bottom:46px;}
.split-head p{font-size:15px;}
.more{display:inline-block;margin-top:10px;font-family:'Nunito',sans-serif;font-weight:800;font-size:14px;color:var(--navy);}
.more::after{content:" \2192";}
.btn{display:inline-flex;align-items:center;justify-content:center;font-family:'Nunito',sans-serif;font-weight:700;font-size:13.5px;white-space:nowrap; padding:0 26px;height:44px;border-radius:5px;border:2px solid transparent;cursor:pointer;transition:.15s;}
.btn-navy{background:var(--navy);color:#fff;}
.btn-navy:hover{background:var(--blue);}
.btn-white{background:#fff;color:var(--navy);}
.btn-white:hover{background:var(--blue-soft);}
.row-btn{display:flex;gap:14px;flex-wrap:wrap;align-items:center;}
.play{width:46px;height:46px;border-radius:50%;background:var(--navy);display:inline-flex;align-items:center;justify-content:center;flex:none;box-shadow:0 8px 20px rgba(2,51,104,.3);}
.play::after{content:"";border-left:14px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent;margin-left:4px;}
.ph-img{position:relative;border:2px dashed var(--blue);border-radius:6px; background:repeating-linear-gradient(45deg,#EEF2F5,#EEF2F5 9px,#E3E9EE 9px,#E3E9EE 18px); display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center; padding:22px;color:#5A6B7A;font-size:13.5px;min-height:200px;}
.ph-img b{color:var(--navy);margin-bottom:4px;}
.ph-inline{background:none;color:inherit;padding:0;font-weight:inherit;}
header.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 40px;position:sticky;top:0;background:rgba(255,255,255,.96);backdrop-filter:blur(6px);z-index:20;gap:20px;border-bottom:1px solid var(--line);}
.logo img{height:58px;width:auto;display:block;}
nav ul{display:flex;gap:30px;list-style:none;font-family:'Nunito',sans-serif;font-size:14px;font-weight:700;color:var(--navy);align-items:center;}
nav li{white-space:nowrap;cursor:pointer;}
nav li.active{color:var(--blue);}
nav li .car::after{content:" \25BE";font-size:11px;}
.socials{display:flex;gap:10px;}
.socials span{width:30px;height:30px;border-radius:50%;background:var(--blue-soft);display:flex;align-items:center;justify-content:center;font-family:'Nunito',sans-serif;font-size:11px;font-weight:800;color:var(--navy);}
.hero{min-height:660px;display:flex;align-items:center;padding:80px 0 120px;background-color:var(--slate);background-size:cover;background-position:center 30%;background-repeat:no-repeat}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(2,51,104,.9) 0%,rgba(2,51,104,.72) 45%,rgba(2,51,104,.12) 100%);}
.hero .wrap{position:relative;z-index:2;max-width:none;margin:0;padding:0 40px;}
.hero-copy{max-width:600px;}
.hero h1{color:#fff;}
.hero h1 .tone{color:#9CC7EA;}
.hero p{max-width:520px;margin:20px 0 30px;font-size:16px;color:#E6EDF5;}
.hero .btn-white{box-shadow:0 10px 24px rgba(0,0,0,.18);}
.hero .call{color:#fff;font-family:'Nunito',sans-serif;font-weight:800;font-size:14px;display:inline-flex;align-items:center;gap:10px;}
.stats{display:flex;gap:42px;margin-top:8px;}
.stat b{display:block;font-family:'Nunito',sans-serif;font-size:36px;font-weight:800;color:#fff;line-height:1;}
.stat span{font-size:12.5px;font-weight:600;letter-spacing:.04em;color:#C5D5E8;}
.tiles{margin-top:-70px;position:relative;z-index:3;}
.tile-band{background:var(--slate);border-radius:18px;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0;}
.tile{position:relative;color:#fff;text-align:center;padding:48px 26px;transition:transform .25s ease,background .25s ease,box-shadow .25s ease,border-radius .25s ease;cursor:pointer;}
.tile:first-child{border-radius:18px 0 0 18px;}
.tile:last-child{border-radius:0 18px 18px 0;}
.tile + .tile::before{content:"";position:absolute;left:0;top:28px;bottom:28px;width:1px;background:rgba(255,255,255,.14);}
.tile:hover{background:var(--navy);transform:scale(1.1);box-shadow:0 24px 50px rgba(2,51,104,.35);z-index:2;border-radius:14px;}
.tile:hover::before,.tile:hover + .tile::before{opacity:0;}
.tile .ic{width:44px;height:44px;border-radius:50%;border:2px solid rgba(255,255,255,.45);display:flex;align-items:center;justify-content:center;margin:0 auto 14px;}
.tile h3{color:#fff;font-size:17px;margin-bottom:8px;}
.tile p{font-size:13.5px;color:#DCE4F0;}
.about{padding-top:110px;}
.about-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:0;align-items:stretch;border-radius:18px;overflow:hidden;box-shadow:0 24px 50px rgba(2,51,104,.18);}
.about-media{position:relative;min-height:560px;background:var(--blue-soft);}
.about-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.about-panel{background:var(--slate);color:#E6ECF5;padding:64px 60px;display:flex;flex-direction:column;justify-content:center;}
.about-panel h2{color:#fff;font-size:40px;margin-bottom:20px;}
.about-panel p{font-size:16px;line-height:1.8;}
.about-panel .btn{margin-top:26px;align-self:flex-start;}
.why{display:grid;grid-template-columns:auto 1fr 1fr 1fr;gap:0;margin-top:30px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 20px 40px rgba(2,51,104,.06);align-items:center;}
.why .lead{padding:26px 28px;border-right:1px solid var(--line);}
.why .lead h3{font-size:18px;margin-bottom:4px;}
.why .lead p{font-size:13.5px;max-width:200px;}
.why-item{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start;padding:26px 24px;}
.why-item + .why-item{border-left:1px solid var(--line);}
.why-item .ic{width:44px;height:44px;border-radius:10px;background:var(--blue-soft);display:flex;align-items:center;justify-content:center;}
.why-item b{display:block;font-family:'Nunito',sans-serif;font-weight:800;color:var(--navy);font-size:15px;}
.why-item span{font-size:13.5px;}
.partners{padding:20px 0 90px;position:relative;}
.partners .head{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:end;margin-bottom:30px;}
.partners p{font-size:14.5px;}
.ins-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;}
.ins{background:#fff;border:1px solid var(--line);border-radius:10px;height:74px;display:flex;align-items:center;justify-content:center;padding:0 14px;text-align:center;transition:transform .2s,box-shadow .2s;}
.ins:hover{transform:translateY(-3px);box-shadow:0 14px 28px rgba(2,51,104,.1);}
.ins span{font-family:'Nunito',sans-serif;font-weight:800;font-size:15px;letter-spacing:-.01em;line-height:1.15;}
.ins-note{font-size:13px;margin-top:16px;color:#8a8a8a;}
.svc-band{background:var(--ground);}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;align-items:center;}
.svc{position:relative;width:310px;height:310px;margin:0 auto;border-radius:50%;text-align:center;padding:40px 34px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;color:var(--text);transition:color .3s;}
.svc::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--slate);transform:scale(.6);opacity:0;transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .3s;z-index:0;box-shadow:0 24px 50px rgba(2,51,104,.25);}
.svc::after{content:"";position:absolute;inset:-16px;border-radius:50%;border:2px solid rgba(86,104,138,.3);transform:scale(.8);opacity:0;transition:transform .4s cubic-bezier(.2,.8,.2,1),opacity .3s;}
.svc > *{position:relative;z-index:1;}
.svc .ic{width:52px;height:52px;border-radius:50%;background:var(--blue-soft);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;transition:background .3s;}
.svc .ic svg{stroke:#023368;transition:stroke .3s;}
.svc h3{margin-bottom:10px;transition:color .3s;}
.svc p{font-size:14px;margin-bottom:16px;}
.svc .btn{background:var(--navy);color:#fff;transition:background .3s,color .3s;}
.svc.circle{color:#fff;}
.svc.circle::before{transform:scale(1);opacity:1;}
.svc.circle::after{transform:scale(1);opacity:1;}
.svc.circle h3,.svc.circle p{color:#fff;}
.svc.circle .ic{background:rgba(255,255,255,.15);}
.svc.circle .ic svg{stroke:#fff;}
.svc.circle .btn{background:#fff;color:var(--navy);}
.svc-list{display:grid;grid-template-columns:repeat(4,1fr);gap:8px 26px;margin-top:56px;padding-top:34px;border-top:1px solid var(--line);}
.svc-list a{font-family:'Nunito',sans-serif;font-weight:700;font-size:14.5px;color:var(--navy);display:flex;align-items:center;gap:10px;padding:5px 0;}
.svc-list a::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--blue);flex:none;}
.form-band{background:var(--slate);color:#E6ECF5;padding:0;}
.form-grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr 1fr;gap:30px;align-items:center;padding:90px 0 0;}
.form-band h2{color:#fff;font-size:34px;}
.form-band p{font-size:14.5px;margin:16px 0 26px;}
.form-band .photo{align-self:end;}
.form-band .photo img{width:100%;height:470px;object-fit:cover;object-position:center top;border-radius:160px 160px 0 0;display:block;box-shadow:0 -10px 40px rgba(0,0,0,.15);background:var(--slate-deep);}
.lead-form{padding:0 0 90px;}
.lead-form h3{color:#fff;margin-bottom:14px;}
.fld{margin-bottom:12px;}
.fld input,.fld select,.fld textarea{width:100%;height:44px;border:1px solid rgba(255,255,255,.35);border-radius:5px;padding:0 14px;font:14px 'Raleway',sans-serif;color:var(--ink);background:#fff;}
.fld textarea{height:96px;padding:12px 14px;resize:vertical;}
.steps{display:grid;grid-template-columns:1fr 40px 1fr 40px 1fr;gap:18px;align-items:center;}
.step{background:var(--ground);border-radius:14px;padding:34px 26px;text-align:center;}
.step .ic{width:54px;height:54px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;margin:-62px auto 14px;border:4px solid #fff;box-shadow:0 8px 20px rgba(2,51,104,.12);}
.step h3{margin-bottom:8px;}
.step p{font-size:13.5px;}
.step.hi{background:var(--slate);color:#E6ECF5;transform:scale(1.06);box-shadow:0 24px 50px rgba(2,51,104,.25);}
.step.hi h3{color:#fff;}
.arrow{color:#B7C1D0;font-size:26px;text-align:center;}
.test-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch;border-radius:14px;overflow:hidden;box-shadow:0 24px 50px rgba(2,51,104,.15);}
.test-grid img{width:100%;height:100%;min-height:380px;object-fit:cover;display:block;background:var(--blue-soft);}
.rev-card{background:var(--navy);color:#DCE4F0;padding:46px 44px 70px;position:relative;}
.rev{display:none;}
.rev.active{display:block;}
.rev .stars{color:#F5B301;letter-spacing:3px;font-size:16px;margin-bottom:14px;}
.rev p{font-family:'Nunito',sans-serif;font-weight:600;font-size:17px;line-height:1.6;color:#fff;}
.rev .who{display:flex;align-items:center;gap:12px;margin-top:22px;}
.rev .who .av{width:44px;height:44px;border-radius:50%;background:var(--slate);}
.rev .who b{display:block;font-family:'Nunito',sans-serif;color:#fff;font-size:14px;}
.rev .who span{font-size:12.5px;}
.rev-card .q{position:absolute;right:30px;bottom:14px;font-family:Georgia,serif;font-size:80px;line-height:1;color:rgba(255,255,255,.18);}
.rev-nav{position:absolute;left:44px;bottom:30px;display:flex;gap:8px;}
.rev-nav span{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.35);cursor:pointer;}
.rev-nav span.active{background:#fff;}
.cta-band{background-size:cover;background-position:center;background-repeat:no-repeat;background-color:var(--slate);text-align:center;color:#E6ECF5;}
.cta-band::before{content:"";position:absolute;inset:0;background:var(--slate);opacity:.88}
.cta-band .wrap{position:relative;z-index:2;}
.cta-band h2{color:#fff;font-size:36px;}
.cta-band p{max-width:560px;margin:14px auto 28px;font-size:15px;}
.cta-band .row-btn{justify-content:center;}
.card-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:46px;max-width:860px;margin-left:auto;margin-right:auto;}
.office{display:grid;grid-template-columns:1fr 1.2fr;gap:0;margin:40px auto 0;max-width:860px;background:var(--ground);border-radius:14px;overflow:hidden;align-items:center;}
.office .media{height:100%;min-height:260px;position:relative;background:var(--blue-soft);}
.office .media img{width:100%;height:100%;object-fit:cover;display:block;position:absolute;inset:0;}
.office .body{padding:34px 36px;}
.office .body h3{margin-bottom:8px;}
.office .body p{font-size:14.5px;}
.office .hrs{display:inline-block;background:var(--navy);color:#fff;font-family:'Nunito',sans-serif;font-weight:800;font-size:12px;padding:6px 12px;border-radius:8px;margin-bottom:12px;}
.card{background:#fff;border-radius:14px;position:relative;}
.card .media{height:230px;border-radius:14px;overflow:hidden;position:relative;background:var(--blue-soft);}
.card .media img{width:100%;height:100%;object-fit:cover;display:block;}
.card .media .ph-img{height:100%;border-radius:14px;}
.card .badge{position:absolute;left:16px;top:200px;background:var(--navy);color:#fff;font-family:'Nunito',sans-serif;font-weight:800;font-size:12px;padding:8px 12px;border-radius:8px;line-height:1.1;text-align:center;}
.card .body{padding:30px 6px 0;}
.card .tag{font-size:12px;font-weight:600;color:var(--blue);letter-spacing:.04em;display:block;margin-bottom:6px;}
.card h3{margin-bottom:8px;}
.card p{font-size:14px;}
.faq-wrap{max-width:820px;margin:40px auto 0;}
.faq{background:#fff;border-radius:12px;margin-bottom:12px;padding:0 24px;}
.faq h3{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px 0;cursor:pointer;font-size:17px;}
.faq h3 span{width:28px;height:28px;border-radius:50%;background:var(--blue-soft);color:var(--navy);display:flex;align-items:center;justify-content:center;font-size:18px;flex:none;transition:.2s;}
.faq p{display:none;padding:0 0 20px;max-width:720px;font-size:14.5px;}
.faq.open p{display:block;}
.faq.open h3 span{transform:rotate(45deg);background:var(--navy);color:#fff;}
footer.base{background:var(--slate);color:#DCE4F0;position:relative;}
.f-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:40px;padding:50px 0 46px;}
.f-grid h4{color:#fff;margin-bottom:14px;}
.f-grid ul{list-style:none;line-height:2.05;font-size:14px;}
.f-grid p{font-size:14px;}
.f-logo{background:#fff;padding:8px 12px;border-radius:6px;display:inline-block;margin-bottom:14px;}
.f-logo img{height:48px;display:block;}
.f-copy{background:var(--slate-deeper);padding:16px 0;font-size:12.5px;text-align:center;color:#B7C1D0;}
.f-copy a{color:#DCE4F0;}
.callbar{display:none;}
.stat .ph-inline{font-size:30px;padding:0 6px;}
.why h3{font-size:18px;margin-bottom:8px;}
.why > p{font-size:14px;margin-bottom:22px;}
.partners .row{display:grid;grid-template-columns:1fr 2fr;gap:40px;align-items:center;}
.partners h3{margin-bottom:6px;}
.logos{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;}
.logos div{font-family:'Nunito',sans-serif;font-weight:800;font-size:17px;color:#B7C1D0;letter-spacing:.02em;display:flex;align-items:center;gap:8px;}
.logos div::before{content:"";width:26px;height:26px;border-radius:50%;border:3px solid #C9D2DE;}
.banner{background:var(--navy);padding:64px 0 72px;text-align:center;overflow:hidden;}
.banner::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 15% 20%,rgba(49,112,164,.55),transparent 45%),radial-gradient(circle at 85% 80%,rgba(86,104,138,.6),transparent 45%);}
.banner::after{content:"";position:absolute;left:50%;bottom:-140px;width:900px;height:220px;transform:translateX(-50%);border-radius:50%;border:1px solid rgba(255,255,255,.12);}
.banner .wrap{position:relative;z-index:2;}
.crumbs{font-family:'Nunito',sans-serif;font-size:12.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#9CC7EA;margin-bottom:14px;}
.crumbs span{color:#fff;}
.banner h1{color:#fff;font-size:44px;}
.banner p{color:#C5D5E8;max-width:620px;margin:14px auto 0;font-size:16px;}
.office-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:0;align-items:stretch;border-radius:18px;overflow:hidden;box-shadow:0 24px 50px rgba(2,51,104,.18);}
.office-media{position:relative;min-height:560px;background:var(--blue-soft);}
.office-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.office-panel{background:var(--slate);color:#E6ECF5;padding:64px 60px;display:flex;flex-direction:column;justify-content:center;}
.office-panel h2{color:#fff;font-size:40px;margin-bottom:20px;}
.office-panel p{font-size:16px;line-height:1.8;}
.office-panel .btn{margin-top:26px;align-self:flex-start;}
.visit{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:30px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 20px 40px rgba(2,51,104,.06);}
.visit .row{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start;padding:26px 24px;}
.visit .row + .row{border-left:1px solid var(--line);}
.visit .row .ic{width:44px;height:44px;border-radius:10px;background:var(--blue-soft);display:flex;align-items:center;justify-content:center;}
.visit b{display:block;font-family:'Nunito',sans-serif;font-weight:800;color:var(--navy);font-size:15px;}
.visit span{font-size:13.5px;}
.pillars{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;}
.pillar{background:#fff;border-radius:14px;padding:30px 28px;display:grid;grid-template-columns:52px 1fr;gap:18px;align-items:start;transition:transform .25s,box-shadow .25s;}
.pillar:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(2,51,104,.12);}
.pillar .ic{width:52px;height:52px;border-radius:50%;background:var(--blue-soft);display:flex;align-items:center;justify-content:center;}
.pillar h3{margin-bottom:6px;font-size:18px;}
.pillar p{font-size:14px;}
.doc-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:46px;}
.doc{display:grid;grid-template-columns:220px 1fr;gap:26px;align-items:start;background:var(--ground);border-radius:14px;padding:26px;}
.doc .ph-img{min-height:260px;border-radius:12px;}
.doc h3{margin-bottom:2px;}
.doc .cred{display:block;font-family:'Nunito',sans-serif;font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);margin-bottom:12px;}
.doc p{font-size:14.5px;}
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:46px;}
.member{text-align:center;}
.member .photo{height:280px;border-radius:14px;overflow:hidden;background:var(--blue-soft);margin-bottom:14px;position:relative;}
.member .photo img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;}
.member .photo .ph-img{height:100%;}
.member h3{font-size:17px;margin-bottom:2px;}
.member span{font-size:13px;color:var(--blue);font-weight:600;}
.hands{background-size:cover;background-position:center;background-repeat:no-repeat;background-color:var(--slate);color:#E6ECF5;}
.hands::before{content:"";position:absolute;inset:0;background:var(--slate);opacity:.88}
.hands .wrap{position:relative;z-index:2;}
.hands-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center;}
.hands h2{color:#fff;}
.hands p{font-size:15px;}
.loc-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:40px;}
.loc{background:#fff;border-radius:14px;padding:30px;display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;border:1px solid var(--line);}
.loc h3{margin-bottom:4px;}
.loc p{font-size:14px;}
.loc .tag{display:block;font-size:12px;font-weight:700;color:var(--blue);letter-spacing:.04em;margin-bottom:4px;}
.cities{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;justify-content:center;}
.cities a{background:var(--blue-soft);color:var(--navy);font-family:'Nunito',sans-serif;font-weight:800;font-size:13.5px;padding:10px 18px;border-radius:100px;}
.appt{background:var(--ground);}
.appt-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:center;}
.eyebrow{display:block;font-family:'Nunito',sans-serif;font-size:12.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin-bottom:10px;}
.appt-points{list-style:none;margin-top:26px;display:grid;gap:14px;}
.appt-points li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:baseline;padding-left:18px;position:relative;font-size:14px;}
.appt-points li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;border-radius:50%;background:var(--blue);}
.appt-points b{font-family:'Nunito',sans-serif;font-weight:800;color:var(--navy);font-size:15px;}
.appt-card{background:#fff;border-radius:16px;padding:34px 34px 30px;box-shadow:0 24px 50px rgba(2,51,104,.12);border-top:6px solid var(--navy);}
.appt-card-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:18px;flex-wrap:wrap;}
.appt-card-head span{font-size:13px;color:var(--blue);font-weight:600;}
.appt-card .fld label{display:block;font-family:'Nunito',sans-serif;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--navy);margin-bottom:6px;}
.appt-card .fld input,.appt-card .fld select,.appt-card .fld textarea{border:1px solid #D5DCE4;background:#FBFCFD;}
.appt-card .two{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.intro-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:60px;align-items:center;}
.intro-grid h2{font-size:38px;}
.intro-grid p{font-size:16px;}
.cat-pills{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px;}
.cat-pills a{background:var(--blue-soft);color:var(--navy);font-family:'Nunito',sans-serif;font-weight:800;font-size:13.5px;padding:10px 18px;border-radius:100px;transition:.15s;}
.cat-pills a:hover{background:var(--navy);color:#fff;}
.intro-photo{border-radius:18px;overflow:hidden;height:400px;background:var(--blue-soft);box-shadow:0 24px 50px rgba(2,51,104,.15);}
.intro-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.sgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px;}
.sgrid.four{grid-template-columns:repeat(4,1fr);gap:20px;}
.sgrid.four .scard{padding:26px 22px 22px;}
.sgrid.four .scard h3{font-size:17px;}
.scard{background:#fff;border:1px solid var(--line);border-radius:16px;padding:30px 28px 26px;display:flex;flex-direction:column;position:relative;overflow:hidden;transition:transform .25s,box-shadow .25s,background .25s;}
.scard::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--navy);transform:scaleX(0);transform-origin:left;transition:transform .3s;}
.scard:hover{transform:translateY(-5px);box-shadow:0 24px 50px rgba(2,51,104,.14);}
.scard:hover::after{transform:scaleX(1);}
.scard .ico{width:64px;height:64px;border-radius:14px;background:var(--blue-soft);display:flex;align-items:center;justify-content:center;margin-bottom:18px;padding:10px;}
.scard .ico img{max-width:100%;max-height:100%;display:block;}
.scard h3{font-size:19px;margin-bottom:8px;}
.scard p{font-size:14px;flex:1;}
.scard .go{margin-top:16px;font-family:'Nunito',sans-serif;font-weight:800;font-size:13.5px;color:var(--blue);}
.group-head{display:flex;align-items:center;gap:16px;margin-top:56px;}
.group-head h2{font-size:26px;white-space:nowrap;}
.group-head::after{content:"";flex:1;height:1px;background:var(--line);}
.group-head:first-of-type{margin-top:0;}
.more-svc{margin-top:46px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px 30px;display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center;}
.more-svc b{font-family:'Nunito',sans-serif;font-weight:800;color:var(--navy);font-size:16px;white-space:nowrap;}
.more-svc .list{display:flex;flex-wrap:wrap;gap:8px 22px;}
.more-svc .list a{font-family:'Nunito',sans-serif;font-weight:700;font-size:14px;color:var(--navy);display:flex;align-items:center;gap:8px;}
.more-svc .list a::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--blue);}
.ins-band{background:var(--navy);color:#C5D5E8;padding:34px 0;}
.ins-band .wrap{display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap;}
.ins-band b{font-family:'Nunito',sans-serif;font-weight:800;color:#fff;font-size:20px;display:block;}
.ins-band span{font-size:14px;}
.fix-band{background:var(--navy);color:#C5D5E8;}
.fix-band h2{color:#fff;}
.fix-band .center p{color:#C5D5E8;}
.fix-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:40px;}
.fix{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:24px 20px;display:flex;align-items:center;gap:14px;transition:background .2s,transform .2s;}
.fix:hover{background:var(--slate);transform:translateY(-3px);}
.fix .ic{width:46px;height:46px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;flex:none;}
.fix span{font-family:'Nunito',sans-serif;font-weight:800;color:#fff;font-size:15px;line-height:1.3;}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:40px;}
.gallery div{border-radius:14px;overflow:hidden;height:220px;background:var(--blue-soft);}
.gallery img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s;}
.gallery div:hover img{transform:scale(1.05);}
.why-cos{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
.why-list{display:grid;gap:16px;margin-top:8px;}
.why-list > div{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start;}
.why-list .ic{width:44px;height:44px;border-radius:10px;background:var(--blue-soft);display:flex;align-items:center;justify-content:center;}
.why-list b{display:block;font-family:'Nunito',sans-serif;font-weight:800;color:var(--navy);font-size:15.5px;}
.why-list span{font-size:14px;}
.why-photo{border-radius:18px;overflow:hidden;height:460px;background:var(--blue-soft);box-shadow:0 24px 50px rgba(2,51,104,.15);}
.why-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;align-items:start;}
.info-stack{display:grid;gap:16px;}
.info{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px 24px;display:grid;grid-template-columns:48px 1fr;gap:16px;align-items:start;transition:transform .2s,box-shadow .2s;}
.info:hover{transform:translateY(-3px);box-shadow:0 18px 36px rgba(2,51,104,.1);}
.info .ic{width:48px;height:48px;border-radius:12px;background:var(--blue-soft);display:flex;align-items:center;justify-content:center;}
.info b{display:block;font-family:'Nunito',sans-serif;font-weight:800;color:var(--navy);font-size:16px;margin-bottom:2px;}
.info span{font-size:14px;display:block;}
.info .hrs{display:grid;grid-template-columns:auto 1fr;gap:2px 16px;font-size:14px;margin-top:4px;}
.info .hrs b{font-size:13.5px;margin:0;}
.routes{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px;}
.route{background:#fff;border:1px solid var(--line);border-radius:16px;padding:30px 28px;display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s;}
.route:hover{transform:translateY(-5px);box-shadow:0 24px 50px rgba(2,51,104,.12);}
.route .tag{display:inline-block;align-self:flex-start;background:var(--blue-soft);color:var(--navy);font-family:'Nunito',sans-serif;font-weight:800;font-size:12px;letter-spacing:.06em;text-transform:uppercase;padding:6px 12px;border-radius:100px;margin-bottom:14px;}
.route h3{margin-bottom:8px;}
.route p{font-size:14px;flex:1;}
.route .btn{margin-top:18px;align-self:flex-start;}
.route.hot{background:var(--navy);border-color:var(--navy);}
.route.hot .tag{background:rgba(255,255,255,.15);color:#fff;}
.route.hot h3{color:#fff;}
.route.hot p{color:#C5D5E8;}
.map-wrap{border-radius:18px;overflow:hidden;box-shadow:0 24px 50px rgba(2,51,104,.15);border:1px solid var(--line);}
.map-wrap iframe{width:100%;height:440px;border:0;display:block;}
.map-wrap .ph-img{min-height:440px;border-radius:0;}
.map-grid{display:grid;grid-template-columns:1fr 2fr;gap:40px;align-items:center;}
.q-band{background:var(--slate);color:#E6ECF5;}
.q-band h2{color:#fff;}
.q-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:50px;align-items:center;}
.q-band .big{font-family:'Nunito',sans-serif;font-weight:800;font-size:34px;color:#fff;display:block;line-height:1.1;}
.bring{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:40px;}
.bring > div{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px 22px;text-align:center;transition:transform .2s,box-shadow .2s;}
.bring > div:hover{transform:translateY(-4px);box-shadow:0 18px 36px rgba(2,51,104,.1);}
.bring .ic{width:54px;height:54px;border-radius:50%;background:var(--blue-soft);display:flex;align-items:center;justify-content:center;margin:0 auto 14px;}
.bring b{display:block;font-family:'Nunito',sans-serif;font-weight:800;color:var(--navy);font-size:15.5px;margin-bottom:4px;}
.bring span{font-size:13.5px;}
.timeline{position:relative;margin-top:50px;display:grid;gap:0;}
.timeline::before{content:"";position:absolute;left:31px;top:20px;bottom:20px;width:2px;background:var(--line);}
.tl{display:grid;grid-template-columns:64px 1fr;gap:26px;align-items:start;padding:22px 0;position:relative;}
.tl .n{width:64px;height:64px;border-radius:50%;background:#fff;border:2px solid var(--line);display:flex;align-items:center;justify-content:center;position:relative;z-index:1;transition:.2s;}
.tl:hover .n{background:var(--navy);border-color:var(--navy);}
.tl:hover .n svg{stroke:#fff;}
.tl .body{background:var(--ground);border-radius:14px;padding:24px 28px;}
.tl h3{margin-bottom:6px;}
.tl p{font-size:14.5px;}
.tl .mins{display:inline-block;font-family:'Nunito',sans-serif;font-weight:800;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--blue);margin-bottom:8px;}
.know-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
.know-photo{border-radius:18px;overflow:hidden;height:460px;background:var(--blue-soft);box-shadow:0 24px 50px rgba(2,51,104,.15);}
.know-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.forms-band{background:var(--navy);color:#C5D5E8;}
.forms-band h2{color:#fff;}
.forms-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center;}
.forms-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:30px;}
.forms-card h3{color:#fff;margin-bottom:8px;}
.forms-card p{font-size:14px;}
.forms-card ul{list-style:none;margin:16px 0 20px;display:grid;gap:8px;}
.forms-card li{display:flex;gap:10px;align-items:center;font-size:14px;color:#fff;font-family:'Nunito',sans-serif;font-weight:700;}
.forms-card li::before{content:"\2713";color:#9CC7EA;}
.filters{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:0 0 40px;}
.filters a{background:#fff;border:1px solid var(--line);color:var(--navy);font-family:'Nunito',sans-serif;font-weight:800;font-size:13.5px;padding:10px 18px;border-radius:100px;cursor:pointer;transition:.15s;}
.filters a.on,.filters a:hover{background:var(--navy);border-color:var(--navy);color:#fff;}
.post{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s;}
.post:hover{transform:translateY(-5px);box-shadow:0 24px 50px rgba(2,51,104,.12);}
.pimg{position:relative;height:210px;background:var(--blue-soft);}
.pimg .ph-img{height:100%;border-radius:0;border:none;}
.pimg .cat{position:absolute;left:16px;top:16px;background:var(--navy);color:#fff;font-family:'Nunito',sans-serif;font-weight:800;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;padding:6px 12px;border-radius:100px;}
.pbody{padding:24px 26px 26px;display:flex;flex-direction:column;flex:1;}
.pbody .date{font-size:12.5px;font-weight:600;color:var(--blue);letter-spacing:.04em;margin-bottom:8px;}
.pbody h3{font-size:18px;margin-bottom:8px;}
.pbody p{font-size:14px;flex:1;}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.post.feat{display:grid;grid-template-columns:1.15fr .85fr;margin-bottom:26px;}
.post.feat .pimg{height:100%;min-height:360px;}
.post.feat .pbody{padding:44px 44px;justify-content:center;}
.post.feat h3{font-size:30px;}
.post.feat p{font-size:15.5px;flex:0;}
.post.feat .date::before{content:"Latest post \00b7 ";color:var(--navy);font-weight:800;}
.pager{display:flex;justify-content:center;gap:8px;margin-top:46px;}
.pager a{width:42px;height:42px;border-radius:50%;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-family:'Nunito',sans-serif;font-weight:800;color:var(--navy);font-size:14px;}
.pager a.on{background:var(--navy);border-color:var(--navy);color:#fff;}
.pager a.wide{width:auto;padding:0 18px;border-radius:100px;}
@media(prefers-reduced-motion:reduce){
*{transition:none!important;}
}
@media(max-width:980px){
section{padding:56px 0;}
h1{font-size:36px;}
h2{font-size:28px;}
header.nav{padding:8px 20px;}
.logo img{height:48px;}
nav ul,.socials{display:none;}
.hero-grid,.split-head,.svc-grid,.form-grid,.test-grid,.card-grid,.office,.partners .head{grid-template-columns:1fr;}
.ins-grid{grid-template-columns:1fr 1fr;}
.hero{min-height:520px;padding:56px 0 100px;background-position:70% center;}
.hero::before{background:linear-gradient(180deg,rgba(2,51,104,.9),rgba(2,51,104,.78));}
.stats{flex-wrap:wrap;gap:24px;}
.hero .wrap{padding:0 20px;}
.tile-band{grid-template-columns:1fr 1fr;}
.tile{padding:28px 18px;}
.tile:first-child,.tile:last-child{border-radius:0;}
.tile:hover{transform:none;}
.about{padding-top:56px;}
.about-grid,.why{grid-template-columns:1fr;}
.about-media{min-height:280px;}
.about-panel{padding:36px 26px;}
.about-panel h2{font-size:30px;}
.why .lead{border-right:none;border-bottom:1px solid var(--line);}
.why-item + .why-item{border-left:none;border-top:1px solid var(--line);}
.svc{width:260px;height:260px;padding:26px;}
.svc::after{display:none;}
.svc-list{grid-template-columns:1fr 1fr;}
.form-grid{padding-top:56px;}
.form-band .photo img{height:300px;}
.steps{grid-template-columns:1fr;gap:40px;}
.arrow{display:none;}
.step.hi{transform:none;}
.test-grid img{min-height:260px;}
.rev-card{padding:34px 24px 60px;}
.rev-nav{left:24px;}
.f-grid{grid-template-columns:1fr 1fr;}
.callbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--navy);color:#fff;font-family:'Nunito',sans-serif;font-weight:800;font-size:15px;justify-content:center;align-items:center;padding:14px;box-shadow:0 -8px 24px rgba(0,0,0,.2);}
.partners .row{grid-template-columns:1fr;}
.about-media img{position:static;width:100%;height:260px;}
.banner{padding:44px 0 52px;}
.appt-grid,.appt-card .two{grid-template-columns:1fr;}
.banner h1{font-size:30px;}
.office-grid,.visit,.pillars,.doc-grid,.doc,.hands-grid,.loc-grid,.loc{grid-template-columns:1fr;}
.visit .row + .row{border-left:none;border-top:1px solid var(--line);}
.office-panel{padding:36px 26px;}
.office-panel h2{font-size:30px;}
.team-grid{grid-template-columns:1fr 1fr;}
.office-media{min-height:280px;}
.intro-grid,.sgrid,.sgrid.four,.more-svc{grid-template-columns:1fr;}
.intro-grid h2{font-size:30px;}
.intro-photo{height:260px;}
.group-head h2{white-space:normal;font-size:22px;}
.fix-grid,.gallery{grid-template-columns:1fr 1fr;}
.why-cos{grid-template-columns:1fr;}
.why-photo{height:280px;}
.contact-grid,.routes,.map-grid,.q-grid{grid-template-columns:1fr;}
.map-wrap iframe,.map-wrap .ph-img{height:300px;min-height:300px;}
.bring{grid-template-columns:1fr 1fr;}
.know-grid,.forms-grid{grid-template-columns:1fr;}
.know-photo{height:280px;}
.timeline::before{display:none;}
.tl{grid-template-columns:1fr;}
.pgrid{grid-template-columns:1fr;}
.post.feat{grid-template-columns:1fr;}
.post.feat .pimg{min-height:220px;}
.post.feat .pbody{padding:28px 24px;}
.post.feat h3{font-size:24px;}
}


/* ---- token bridge -------------------------------------------------------
   The shared LLS machinery (Elementor shim, form, chrome) is written against
   generic token names. Point them at the DFY palette so one palette drives
   both layers. The design values above are the mockups' own.              */
:root{
  --moss:var(--navy);        --moss-dark:#01234a;
  --sage:var(--blue);        --sage-dark:#245780;
  --wash:var(--blue-soft);   --lightsage:var(--blue-soft);
  --cream:var(--ground);     --cream2:#fafbfd;
  --heading:var(--navy);     --body:var(--text);
  --muted:#6b7a90;           --white:#fff;
  --charcoal:var(--slate-deep);
  --radius:14px;
  --shadow:0 24px 55px -24px rgba(2,51,104,.30);
  --shadow-sm:0 12px 30px -16px rgba(2,51,104,.26);
  /* accessible small-text blue: #3170a4 measures 4.05:1 on white */
  --blue-text:#245780;
}


/* ---- deliberate corrections to the ported mockup CSS ---------------------
   1. The mockups set body{background:#DCE3EA} and wrap the page in .page to
      get a framed preview. On the real site the page IS the document, so the
      body ground is white and .page loses its overflow clip, which would
      otherwise trap the sticky header.
   2. Small blue text uses --blue-text, not --blue: #3170a4 measures 4.05:1
      on white and fails WCAG AA. Icons, borders and large headings keep
      --blue.                                                              */
body{background:#fff}
.page{overflow:visible}
a.more,.svc-list a,.ins small{color:var(--blue-text)}
.dfy-skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--navy);color:#fff;padding:.7rem 1.2rem;border-radius:0 0 8px 0}
.dfy-skip:focus{left:0}


/* ---- Elementor shim + shared machinery (LLS toolkit) ---- */
.dfy-skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--moss);color:#fff;padding:.7rem 1.2rem;border-radius:0 0 8px 0}
.dfy-skip:focus{left:0}
.dfy-hours{list-style:none;padding:0;margin:0}
.dfy-hours li{display:flex;justify-content:space-between;gap:1rem;font-size:.96rem}
.dfy-hours li b{color:var(--heading);font-weight:600}
.dfy-hours-note{font-size:.88rem;color:var(--muted);margin-top:.3rem}
.hp-field{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.elementor-widget.elementor-widget-heading:not(:last-child){margin-block-end:0}
.elementor-section.elementor-section-boxed > .elementor-container{max-width:100%}
.dfy-page .elementor-widget-html > .elementor-widget-container{overflow:visible}
body.dfy-page [data-dfy-slot="clinic-1"]{background-position:center 38%}
.reviews.rot .rev-rot{position:relative;max-width:720px;margin:0 auto}
.reviews.rot .rev{text-align:center;padding:2.4rem 2rem}
.reviews.rot .rev + .rev{margin-top:1.2rem}
.reviews.rot .rev .rev-context{border-left:none;border-top:3px solid var(--sage);padding:.9rem 0 0;margin-top:.6rem}
.reviews.rot .rev .who2{justify-content:center}
.dfy-js .reviews.rot .rev{position:absolute;top:0;left:0;right:0;margin:0;opacity:0;visibility:hidden;transition:opacity .5s ease}
.dfy-js .reviews.rot .rev.active{opacity:1;visibility:visible}
.dfy-page .elementor-widget:not(:last-child){margin-block-end:0}
.dfy-page .elementor-section > .elementor-container{width:100%}
.dfy-page .dfy-el > .elementor-container{width:min(1180px,92%);margin-inline:auto;display:block}
.dfy-page .dfy-el > .elementor-container > .elementor-column{width:100%}
.dfy-page .dfy-el .elementor-widget-wrap{padding:0}
.dfy-page .pagehead.dfy-el > .elementor-container{padding:92px 0;position:relative;z-index:2}
.dfy-page .prose.dfy-el > .elementor-container{width:min(820px,92%)}
.dfy-page .pullband.dfy-el > .elementor-container{width:min(760px,92%)}
.dfy-page .prose.dfy-el .elementor-widget:first-child h2{margin-top:0}
.dfy-page .dfy-el .elementor-widget-text-editor > .elementor-widget-container > *:last-child{margin-bottom:0}
.dfy-page .dfy-el2 > .elementor-container{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.dfy-page .dfy-el2 > .elementor-container > .elementor-column{width:auto;position:relative}
.dfy-page .svc.rev.dfy-el2 > .elementor-container > .elementor-column:first-child{order:2}
.dfy-page .svc.dfy-el .elementor-widget-image img{display:block;width:100%;aspect-ratio:5/4.6;object-fit:cover;border-radius:18px;box-shadow:var(--shadow-sm)}
.dfy-page .svc.dfy-el .dfy-tag{position:absolute;left:-18px;bottom:-18px;background:var(--moss);color:#fff;border-radius:14px;padding:1rem 1.3rem;box-shadow:var(--shadow);display:flex;gap:.7rem;align-items:center;max-width:230px}
.dfy-page .svc.dfy-el .dfy-tag svg{width:30px;height:30px;stroke:var(--lightsage);fill:none;stroke-width:1.7;flex:0 0 30px}
.dfy-page .svc.dfy-el .dfy-tag b{font-family:'Raleway';font-weight:600;font-size:.98rem;color:#fff;line-height:1.2}
.dfy-page .svc.dfy-el .elementor-widget-html{position:static}
.dfy-page .elementor-widget-button .elementor-button{display:inline-flex;align-items:center;gap:.5rem;font-family:'Raleway',sans-serif;font-weight:600;font-size:.98rem;padding:.92rem 1.9rem;border-radius:8px;background:var(--moss);color:#fff;transition:.25s ease;border:none;line-height:1.2}
.dfy-page .elementor-widget-button .elementor-button:hover{background:var(--moss-dark);color:#fff;transform:translateY(-2px)}
.dfy-page .elementor-widget-button.btn-sage .elementor-button{background:var(--sage)}
.dfy-page .elementor-widget-button.btn-sage .elementor-button:hover{background:var(--sage-dark)}
.dfy-page .elementor-widget-button.btn-white .elementor-button{background:#fff;color:var(--moss)}
.dfy-page .dfy-el .elementor-widget-button{margin-top:1.4rem}
.dfy-page .featband.dfy-el > .elementor-container,.dfy-page .cond.dfy-el > .elementor-container{width:min(1180px,92%)}
.dfy-page .featband.dfy-el .sec-head,.dfy-page .cond.dfy-el .head{max-width:none}
.dfy-page .featband.dfy-el .elementor-widget-heading,.dfy-page .cond.dfy-el .elementor-widget-heading{max-width:720px}
.dfy-page .cond.dfy-el > .elementor-container{text-align:center}
.dfy-page .cond.dfy-el .elementor-widget-heading{margin-inline:auto}
.dfy-page .cond.dfy-el .elementor-widget-text-editor{max-width:70ch;margin-inline:auto}
.dfy-page .featband.dfy-el .elementor-widget-html,.dfy-page .cond.dfy-el .elementor-widget-html{margin-top:2.2rem}
.dfy-el .elementor-section>.elementor-container{width:min(1180px,92%);margin-inline:auto;max-width:none}
.dfy-el .elementor-section{padding:0}
@media(max-width:960px){
.dfy-page .dfy-el2 > .elementor-container{grid-template-columns:1fr;gap:2.6rem}
.dfy-page .svc.rev.dfy-el2 > .elementor-container > .elementor-column:first-child{order:0}
.dfy-page .svc.dfy-el .dfy-tag{position:static;max-width:none;margin-top:1rem}
}
@media(max-width:640px){
.dfy-page .pagehead.dfy-el > .elementor-container{padding:64px 0}
}

/* ==========================================================================
   Bands the section library emits that the mockups do not draw directly.
   Every value here is derived from the mockups' own scale: 14px radius,
   90px section padding, 1140px wrap, Nunito 800 headings, Raleway body,
   navy #023368 / blue #3170a4 / slate #56688A / ground #F3F5F8.
   ========================================================================== */

/* --- image slots ---------------------------------------------------------
   Every photo box is .ph. It is position:relative with the image absolutely
   positioned inside, because an in-flow <img> with height:100% resolves
   against a parent whose height is being derived from that same content, and
   one card in four then renders taller than its siblings.                  */
.ph{position:relative;overflow:hidden;border-radius:14px;background:var(--blue-soft);
  background-size:cover;background-position:center;min-height:100%}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ph:empty::after{content:"";position:absolute;inset:0;
  background:linear-gradient(135deg,var(--blue-soft),#dbe5f2)}

/* --- hero background rotation ------------------------------------------- */
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-slide{position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;transition:opacity 1.1s ease}
.hero-slide.active{opacity:1}
.hero-dots{position:absolute;right:40px;bottom:28px;z-index:3;display:flex;gap:9px}
.hero-dot{width:10px;height:10px;border-radius:50%;border:2px solid rgba(255,255,255,.8);
  background:transparent;cursor:pointer;padding:0}
.hero-dot.active{background:#fff}

/* --- generic band grounds ------------------------------------------------ */
section.ground,.svc-band.ground,.prose.ground{background:var(--ground)}
.faq-band{background:var(--ground)}
.sec-head{max-width:760px;margin-bottom:38px}
.sec-head h2{margin-bottom:12px}

/* --- prose ---------------------------------------------------------------- */
.prose .wrap{max-width:820px}
.prose h2{margin-bottom:16px}
.prose h3{margin:26px 0 10px}
.prose p{margin-bottom:14px}
.prose ul,.prose ol{margin:0 0 16px 20px}
.prose li{margin-bottom:7px}

/* --- centred pull band ---------------------------------------------------- */
.pullband{background:var(--ground)}
.pullband .wrap{max-width:760px;text-align:center}
.pullband h2{margin-bottom:14px}
.pullband p{margin-bottom:12px}
.ticks{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:9px;text-align:left;
  max-width:520px;margin-inline:auto}
.ticks li{position:relative;padding-left:28px;font-size:14.5px}
.ticks li::before{content:"";position:absolute;left:0;top:7px;width:16px;height:16px;
  border-radius:50%;background:var(--blue-soft);
  box-shadow:inset 0 0 0 2px var(--blue)}

/* --- inline mid-page CTA --------------------------------------------------- */
.inlinecta{background:var(--ground);padding:56px 0}
.inlinecta .wrap{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap}
.inlinecta h2{font-size:26px;margin-bottom:6px}
.inlinecta p{font-size:14.5px;margin:0}

/* --- feature / value / includes grids -------------------------------------- */
.feat-grid,.val-grid,.incl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.feat-grid.two{grid-template-columns:repeat(2,1fr)}
.feat,.val,.incl{background:#fff;border:1px solid var(--line);border-radius:14px;padding:28px 26px}
section.ground .feat,section.ground .val,section.ground .incl{background:#fff}
.feat .ic,.val .ic,.incl .ic{width:52px;height:52px;border-radius:14px;background:var(--blue-soft);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.feat .ic svg,.val .ic svg,.incl .ic svg{width:24px;height:24px;color:var(--navy)}
.feat h2,.feat h3,.val h3,.incl h3{font-size:19px;margin-bottom:9px}
.feat p,.val p,.incl p{font-size:14.5px;margin-bottom:10px}
.feat p:last-child,.val p:last-child,.incl p:last-child{margin-bottom:0}
.feat ul,.incl ul{margin:0 0 0 18px;font-size:14.5px}

/* --- chip row -------------------------------------------------------------- */
.chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:26px}
.chip{background:#fff;border:1px solid var(--line);border-radius:200px;
  padding:9px 18px;font-size:14px;font-weight:600;color:var(--navy)}

/* --- split band (the service / location workhorse) ------------------------- */
.svc-split-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.svc-split.rev .svc-media{order:2}
.svc-media .ph{aspect-ratio:5/4.4;min-height:0}
.svc-copy h2{margin-bottom:14px}
.svc-copy p{margin-bottom:13px}
.svc-copy ul{margin:0 0 15px 20px}
.svc-copy li{margin-bottom:7px}
.svc-copy .btn{margin-top:8px}

/* --- credential split ------------------------------------------------------ */
.cert-split{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}

/* --- quick-contact row ------------------------------------------------------ */
.quick-row{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.mini-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px 20px;
  display:block;transition:.2s ease}
.mini-card:hover{border-color:var(--blue);transform:translateY(-3px)}
.mini-card .ic{width:44px;height:44px;border-radius:12px;background:var(--blue-soft);
  display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.mini-card .ic svg{width:21px;height:21px;color:var(--navy)}
.mini-card b{display:block;font-family:'Nunito',sans-serif;font-size:16px;color:var(--navy);margin-bottom:4px}
.mini-card span{font-size:13.5px;display:block;color:var(--text)}

/* --- team band (real photos only) ------------------------------------------ */
.tm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.tm{margin:0}
.tm .frame{border-radius:14px;overflow:hidden}
.tm .frame .ph{aspect-ratio:4/3;min-height:0}
.tm figcaption{font-size:13.5px;padding-top:11px;color:var(--text)}

/* --- references ------------------------------------------------------------- */
.ref-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.ref{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px}
.ref h3{font-size:18px;margin-bottom:8px}
.ref p{font-size:14.5px;margin:0}

/* --- inset dark card --------------------------------------------------------- */
.inset{background:var(--navy);border-radius:26px;overflow:hidden;display:grid;
  grid-template-columns:1fr 1.1fr;align-items:stretch}
.inset-media .ph{height:100%;border-radius:0;min-height:300px}
.inset-copy{padding:46px 44px;color:#DCE4F0}
.inset-copy h2{color:#fff;margin-bottom:14px}
.inset-copy p{color:#DCE4F0;margin-bottom:13px}
.inset-copy .btn.btn-navy{background:#fff;color:var(--navy)}

/* --- full-bleed category row -------------------------------------------------- */
.cat-row{display:grid;grid-template-columns:repeat(3,1fr)}
.cat-panel{position:relative;min-height:440px;display:flex;align-items:flex-end;overflow:hidden}
.cat-panel .ph{position:absolute;inset:0;border-radius:0}
.cat-panel::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(2,51,104,0) 35%,rgba(2,51,104,.88) 100%)}
.cat-copy{position:relative;z-index:2;padding:34px 30px;color:#fff}
.cat-copy h3{color:#fff;margin-bottom:8px}
.cat-copy p{color:rgba(255,255,255,.88);font-size:14px;margin-bottom:14px}
.pill-btn{display:inline-block;background:#fff;color:var(--navy);font-family:'Nunito',sans-serif;
  font-weight:800;font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  padding:10px 20px;border-radius:200px}

/* --- rating line --------------------------------------------------------------- */
.rating-line{font-size:15px}
.rating-line .stars{color:#F2B705;letter-spacing:2px;margin-right:6px}
.rating-line b{color:var(--navy)}

/* --- screen reader only ---------------------------------------------------------- */
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap}

/* --- responsive ------------------------------------------------------------------ */
@media(max-width:980px){
  .feat-grid,.val-grid,.incl-grid,.tm-grid,.ref-grid{grid-template-columns:repeat(2,1fr)}
  .quick-row{grid-template-columns:repeat(2,1fr)}
  .svc-split-grid,.cert-split,.inset{grid-template-columns:1fr;gap:32px}
  .svc-split.rev .svc-media{order:0}
  .cat-row{grid-template-columns:1fr}
  .cat-panel{min-height:320px}
  .inset-copy{padding:34px 28px}
  .hero-dots{right:20px}
}
@media(max-width:640px){
  .feat-grid,.feat-grid.two,.val-grid,.incl-grid,.tm-grid,.ref-grid,.quick-row{grid-template-columns:1fr}
  .chips{justify-content:flex-start}
  .inlinecta .wrap{flex-direction:column;align-items:flex-start}
}


/* ---- WordPress menu markup + chrome the mockups do not cover -------------
   The mockups draw the nav as a plain <ul><li> with no links. WordPress emits
   ul.menu > li.menu-item > a, with ul.sub-menu for children, so the mockup's
   `nav ul` / `nav li` rules are extended rather than replaced.

   The .sub-menu rule below is load-bearing: without `position:absolute` the
   dropdown items lay out in the same flex row as the top-level items and the
   nav becomes ~2800px wide, which scrolls the whole page sideways.

   Link colours are written at (0,2,1)+ so Elementor's .elementor-kit-N a
   rule (0,1,1), which loads after this file, cannot win.                   */
header.nav nav ul.menu{display:flex;gap:30px;list-style:none;font-family:'Nunito',sans-serif;font-size:14px;font-weight:700;align-items:center;margin:0;padding:0}
header.nav nav ul.menu li{white-space:nowrap;position:relative}
header.nav nav a[href]{color:var(--navy);display:block;padding:6px 0}
header.nav nav a[href]:hover,header.nav nav .current-menu-item > a[href]{color:var(--blue-text)}
header.nav nav .menu-item-has-children > a[href]::after{content:" \25BE";font-size:11px}
header.nav .logo{display:block}
header.nav .logo-txt{font-family:'Nunito',sans-serif;font-weight:800;font-size:20px;color:var(--navy)}
header.nav .nav-r{display:flex;align-items:center;gap:14px}
header.nav .socials a{width:30px;height:30px;border-radius:50%;background:var(--blue-soft);display:flex;align-items:center;justify-content:center;font-family:'Nunito',sans-serif;font-size:11px;font-weight:800;color:var(--navy)}

/* dropdowns: present in the delivered HTML, revealed on hover/focus (spec 7) */
header.nav nav .sub-menu{position:absolute;left:0;top:100%;min-width:230px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 40px -22px rgba(2,51,104,.45);padding:10px 0;list-style:none;display:flex;flex-direction:column;gap:0;opacity:0;visibility:hidden;transform:translateY(6px);transition:.18s ease;z-index:40}
header.nav nav li:hover > .sub-menu,header.nav nav li:focus-within > .sub-menu{opacity:1;visibility:visible;transform:none}
header.nav nav .sub-menu a[href]{padding:8px 18px;font-weight:600;white-space:normal}

/* hamburger (deliberate addition: the mockups hide the nav below 980px and
   put nothing in its place, which is not shippable) */
.nav-toggle{display:none;width:42px;height:42px;border:1px solid var(--line);border-radius:10px;background:#fff;position:relative;cursor:pointer}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:11px;width:20px;height:2px;background:var(--navy);transition:.2s ease}
.nav-toggle span{top:20px}
.nav-toggle span::before{top:-6px;left:0}
.nav-toggle span::after{top:6px;left:0}
.nav-toggle[aria-expanded="true"] span{background:transparent}
.nav-toggle[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

/* footer additions */
footer.base a[href]{color:#DCE4F0}
footer.base a[href]:hover{color:#fff}
footer.base .f-copy a[href]{color:#DCE4F0;text-decoration:underline}
footer.base .f-grid ul{list-style:none;margin:0;padding:0}
footer.base .dfy-hours{list-style:none;margin:0;padding:0;font-size:14px;line-height:2.05}
footer.base .dfy-hours b{color:#fff;font-weight:700}
footer.base .dfy-hours-note{font-size:12.5px;color:#B7C1D0;line-height:1.6;padding:6px 0}
footer.base .f-addr{padding-top:10px}
footer.base .f-social{margin-top:10px}
footer.base .btn.btn-navy{margin-top:16px}
.f-compliance{font-size:12px;line-height:1.7;color:#B7C1D0;border-top:1px solid rgba(255,255,255,.14);padding:18px 0 26px;margin:0}

@media(max-width:980px){
  header.nav .nav-toggle{display:block}
  header.nav nav{position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 20px 40px -26px rgba(2,51,104,.5);max-height:0;overflow:hidden;transition:max-height .28s ease}
  header.nav nav.open{max-height:80vh;overflow:auto}
  header.nav nav ul.menu{display:block;padding:8px 20px 18px}
  header.nav nav ul.menu li{white-space:normal}
  header.nav nav a[href]{padding:11px 0;border-bottom:1px solid var(--line)}
  header.nav nav .sub-menu{position:static;opacity:1;visibility:visible;transform:none;border:0;box-shadow:none;padding:0 0 0 14px;border-radius:0}
  .f-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .f-grid{grid-template-columns:1fr}
}


/* the accordion button JS injects inside the FAQ h3 */
.faq h3 .faq-btn{all:unset;display:flex;justify-content:space-between;align-items:center;gap:20px;width:100%;cursor:pointer;font:inherit;color:inherit}
.faq h3 .faq-btn:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:6px}

/* ==========================================================================
   Bands the section library emits that the mockups do not draw directly.
   Every value here is derived from the mockups' own scale: 14px radius,
   90px section padding, 1140px wrap, Nunito 800 headings, Raleway body,
   navy #023368 / blue #3170a4 / slate #56688A / ground #F3F5F8.
   ========================================================================== */

/* --- image slots ---------------------------------------------------------
   Every photo box is .ph. It is position:relative with the image absolutely
   positioned inside, because an in-flow <img> with height:100% resolves
   against a parent whose height is being derived from that same content, and
   one card in four then renders taller than its siblings.                  */
.ph{position:relative;overflow:hidden;border-radius:14px;background:var(--blue-soft);
  background-size:cover;background-position:center;min-height:100%}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ph:empty::after{content:"";position:absolute;inset:0;
  background:linear-gradient(135deg,var(--blue-soft),#dbe5f2)}

/* --- hero background rotation ------------------------------------------- */
/* The hero scrim is .hero::before. A pseudo-element with z-index:auto is
   painted in DOM order against other positioned children, and ::before comes
   FIRST, so the photo layer was covering the scrim and the white H1 sat on a
   bright photograph. Explicit layers: photo 0, scrim 1, copy 2. */
.hero-bg{position:absolute;inset:0;z-index:0}
.hero::before{z-index:1}
.hero > .wrap{position:relative;z-index:2}
.hero-slide{position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;transition:opacity 1.1s ease}
.hero-slide.active{opacity:1}
.hero-dots{position:absolute;right:40px;bottom:28px;z-index:3;display:flex;gap:9px}
.hero-dot{width:10px;height:10px;border-radius:50%;border:2px solid rgba(255,255,255,.8);
  background:transparent;cursor:pointer;padding:0}
.hero-dot.active{background:#fff}

/* --- generic band grounds ------------------------------------------------ */
section.ground,.svc-band.ground,.prose.ground{background:var(--ground)}
.faq-band{background:var(--ground)}
.sec-head{max-width:760px;margin-bottom:38px}
.sec-head h2{margin-bottom:12px}

/* --- prose ---------------------------------------------------------------- */
.prose .wrap{max-width:820px}
.prose h2{margin-bottom:16px}
.prose h3{margin:26px 0 10px}
.prose p{margin-bottom:14px}
.prose ul,.prose ol{margin:0 0 16px 20px}
.prose li{margin-bottom:7px}

/* --- centred pull band ---------------------------------------------------- */
.pullband{background:var(--ground)}
.pullband .wrap{max-width:760px;text-align:center}
.pullband h2{margin-bottom:14px}
.pullband p{margin-bottom:12px}
.ticks{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:9px;text-align:left;
  max-width:520px;margin-inline:auto}
.ticks li{position:relative;padding-left:28px;font-size:14.5px}
.ticks li::before{content:"";position:absolute;left:0;top:7px;width:16px;height:16px;
  border-radius:50%;background:var(--blue-soft);
  box-shadow:inset 0 0 0 2px var(--blue)}

/* --- inline mid-page CTA --------------------------------------------------- */
.inlinecta{background:var(--ground);padding:56px 0}
.inlinecta .wrap{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap}
.inlinecta h2{font-size:26px;margin-bottom:6px}
.inlinecta p{font-size:14.5px;margin:0}

/* --- feature / value / includes grids -------------------------------------- */
.feat-grid,.val-grid,.incl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.feat-grid.two{grid-template-columns:repeat(2,1fr)}
.feat,.val,.incl{background:#fff;border:1px solid var(--line);border-radius:14px;padding:28px 26px}
section.ground .feat,section.ground .val,section.ground .incl{background:#fff}
.feat .ic,.val .ic,.incl .ic{width:52px;height:52px;border-radius:14px;background:var(--blue-soft);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.feat .ic svg,.val .ic svg,.incl .ic svg{width:24px;height:24px;color:var(--navy)}
.feat h2,.feat h3,.val h3,.incl h3{font-size:19px;margin-bottom:9px}
.feat p,.val p,.incl p{font-size:14.5px;margin-bottom:10px}
.feat p:last-child,.val p:last-child,.incl p:last-child{margin-bottom:0}
.feat ul,.incl ul{margin:0 0 0 18px;font-size:14.5px}

/* --- chip row -------------------------------------------------------------- */
.chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:26px}
.chip{background:#fff;border:1px solid var(--line);border-radius:200px;
  padding:9px 18px;font-size:14px;font-weight:600;color:var(--navy)}

/* --- split band (the service / location workhorse) ------------------------- */
.svc-split-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.svc-split.rev .svc-media{order:2}
.svc-media .ph{aspect-ratio:5/4.4;min-height:0}
.svc-copy h2{margin-bottom:14px}
.svc-copy p{margin-bottom:13px}
.svc-copy ul{margin:0 0 15px 20px}
.svc-copy li{margin-bottom:7px}
.svc-copy .btn{margin-top:8px}

/* --- credential split ------------------------------------------------------ */
.cert-split{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}

/* --- quick-contact row ------------------------------------------------------ */
.quick-row{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.mini-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px 20px;
  display:block;transition:.2s ease}
.mini-card:hover{border-color:var(--blue);transform:translateY(-3px)}
.mini-card .ic{width:44px;height:44px;border-radius:12px;background:var(--blue-soft);
  display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.mini-card .ic svg{width:21px;height:21px;color:var(--navy)}
.mini-card b{display:block;font-family:'Nunito',sans-serif;font-size:16px;color:var(--navy);margin-bottom:4px}
.mini-card span{font-size:13.5px;display:block;color:var(--text)}

/* --- team band (real photos only) ------------------------------------------ */
.tm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.tm{margin:0}
.tm .frame{border-radius:14px;overflow:hidden}
.tm .frame .ph{aspect-ratio:4/3;min-height:0}
.tm figcaption{font-size:13.5px;padding-top:11px;color:var(--text)}

/* --- references ------------------------------------------------------------- */
.ref-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.ref{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px}
.ref h3{font-size:18px;margin-bottom:8px}
.ref p{font-size:14.5px;margin:0}

/* --- inset dark card --------------------------------------------------------- */
.inset{background:var(--navy);border-radius:26px;overflow:hidden;display:grid;
  grid-template-columns:1fr 1.1fr;align-items:stretch}
.inset-media .ph{height:100%;border-radius:0;min-height:300px}
.inset-copy{padding:46px 44px;color:#DCE4F0}
.inset-copy h2{color:#fff;margin-bottom:14px}
.inset-copy p{color:#DCE4F0;margin-bottom:13px}
.inset-copy .btn.btn-navy{background:#fff;color:var(--navy)}

/* --- full-bleed category row -------------------------------------------------- */
.cat-row{display:grid;grid-template-columns:repeat(3,1fr)}
.cat-panel{position:relative;min-height:440px;display:flex;align-items:flex-end;overflow:hidden}
.cat-panel .ph{position:absolute;inset:0;border-radius:0}
.cat-panel::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(2,51,104,0) 35%,rgba(2,51,104,.88) 100%)}
.cat-copy{position:relative;z-index:2;padding:34px 30px;color:#fff}
.cat-copy h3{color:#fff;margin-bottom:8px}
.cat-copy p{color:rgba(255,255,255,.88);font-size:14px;margin-bottom:14px}
.pill-btn{display:inline-block;background:#fff;color:var(--navy);font-family:'Nunito',sans-serif;
  font-weight:800;font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  padding:10px 20px;border-radius:200px}

/* --- rating line --------------------------------------------------------------- */
.rating-line{font-size:15px}
.rating-line .stars{color:#F2B705;letter-spacing:2px;margin-right:6px}
.rating-line b{color:var(--navy)}

/* --- screen reader only ---------------------------------------------------------- */
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap}

/* --- responsive ------------------------------------------------------------------ */
@media(max-width:980px){
  .feat-grid,.val-grid,.incl-grid,.tm-grid,.ref-grid{grid-template-columns:repeat(2,1fr)}
  .quick-row{grid-template-columns:repeat(2,1fr)}
  .svc-split-grid,.cert-split,.inset{grid-template-columns:1fr;gap:32px}
  .svc-split.rev .svc-media{order:0}
  .cat-row{grid-template-columns:1fr}
  .cat-panel{min-height:320px}
  .inset-copy{padding:34px 28px}
  .hero-dots{right:20px}
}
@media(max-width:640px){
  .feat-grid,.feat-grid.two,.val-grid,.incl-grid,.tm-grid,.ref-grid,.quick-row{grid-template-columns:1fr}
  .chips{justify-content:flex-start}
  .inlinecta .wrap{flex-direction:column;align-items:flex-start}
}

/* The tile band uses h2, not h3, so the home page has no h1-to-h3 heading
   skip. Size is unchanged: these are still visually small tile titles. */
.tile h2{font-size:20px;font-weight:800;margin-bottom:8px;color:inherit}
.tile.active h2,.tile:hover h2{color:#fff}
/* Review quotes are wrapped in <blockquote> so the style gate's
   customer-words exemption applies. It must add no visual margin. */
.rev blockquote{margin:0;padding:0;border:0}

/* ==========================================================================
   Home page corrections found by measuring the rendered page
   ========================================================================== */

/* 1. The mockups' `section{padding:90px 0}` also matched Elementor's own
      <section class="elementor-section"> wrappers, which put a 90px white
      band above the hero and doubled the padding on every raw band. The
      wrapper gets no padding; the band inside it keeps its own. Sections
      that ARE the band (.dfy-el, where the band class sits on the Elementor
      section itself) are deliberately left alone. */
.dfy-page section.elementor-section.dfy-raw{padding:0}
.dfy-page section.elementor-section.dfy-raw > .elementor-container{padding:0}

/* 2. The sticky mobile call bar. This was dropped in error when the mockup
      CSS was merged: the filter that strips designer scaffolding treated
      .callbar as a mockup artefact, but it is a real feature. Desktop hides
      it; below 980px it is a fixed bar at the bottom of the screen. */
.callbar{display:none}

/* 3. The nav walker emits a <button class="sub-toggle"> for each menu item
      that has children. It had no styling, so it inherited the Elementor
      kit's button fill and rendered as a navy block under About and
      Services. On desktop the dropdowns open on hover and focus, so the
      button is hidden; on mobile it is the control that opens the submenu. */
header.nav .sub-toggle{display:none;all:unset}

@media(max-width:980px){
  .callbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;
    background:var(--navy);color:#fff;font-family:'Nunito',sans-serif;font-weight:800;
    font-size:15px;justify-content:center;align-items:center;padding:14px;
    box-shadow:0 -8px 24px rgba(0,0,0,.2)}
  /* keep the fixed bar from covering the end of the footer */
  footer.base{padding-bottom:64px}

  header.nav .sub-toggle{display:inline-flex;all:revert;appearance:none;background:transparent;
    border:0;cursor:pointer;width:44px;height:44px;align-items:center;justify-content:center;
    position:absolute;right:0;top:2px;color:var(--navy);font-size:0;padding:0}
  header.nav .sub-toggle::after{content:"";width:9px;height:9px;border-right:2px solid currentColor;
    border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);transition:.2s}
  header.nav .sub-toggle[aria-expanded="true"]::after{transform:rotate(-135deg) translate(-2px,-2px)}
  header.nav nav .menu-item-has-children{position:relative}
  header.nav nav .menu-item-has-children > a[href]::after{content:none}
  /* on mobile the submenu is collapsed until its toggle opens it */
  .dfy-js header.nav nav .sub-menu{display:none}
  .dfy-js header.nav nav li.open > .sub-menu{display:block}
}

/* 4. Tile copy measured 4.38:1 on the slate band, just under WCAG AA for
      small text. Lightened to clear 4.5:1. Measured in-page rather than
      trusted from the mockup. */
.tile p{color:#E8EDF5}

/* 5. The mockups colour the second half of a two-tone heading, and every
      eyebrow, with --blue (#3170a4). That works on white. On the slate
      bands it measures 1.06:1 against the ground, which is invisible rather
      than subtle. On dark grounds both switch to a light tint: large
      headings clear AA-large, small eyebrows clear AA.
      Measured in-page, not taken from the mockup. */
.about-panel .tone,.form-band .tone,.cta-band .tone,.banner .tone,
.forms-band .tone,.tiles .tone,footer.base .tone{color:#A8CBEC}
.about-panel .eyebrow,.form-band .eyebrow,.cta-band .eyebrow,.banner .eyebrow,
.forms-band .eyebrow,.hands .eyebrow,.tiles .eyebrow,footer.base .eyebrow{color:#E6EEF8}
.hero .tone{color:#BFD9F2}

/* ROUND 6 (Chloe): "You're in Great Hands" was unreadable, and auditing the
   rest of the page found three more of the same kind.

   .hands was in rule 9's white-HEADING list but never in this .tone list, so
   round 2 fixed the white half of the two-tone heading and left the blue half
   at 1.06:1 against its own ground. That is invisible, not subtle, and it
   only got worse once round 6 restored the photo behind the scrim. It takes
   the hero's lighter tint rather than #A8CBEC because its ground is slate,
   not navy: #A8CBEC measures 3.34:1 there, which clears AA-large only just,
   and the photo under the 88% scrim moves the ground around.

   .banner .tone had the same gap: 2.38:1 on navy, under the AA-large 3.0.

   .appt was in BOTH dark lists but its ground is #F3F5F8. The "fix" was
   painting near-white on near-white: its eyebrow measured 1.07:1 and its
   heading tint 1.55:1. It is a light band, so it takes light-band colours.

   Every number here is measured in the rendered page. */
.dfy-page .hands .tone,.dfy-page .q-band .tone{color:#BFD9F2}
.dfy-page .hands .eyebrow,.dfy-page .q-band .eyebrow{color:#E6EEF8}
.dfy-page .hands p,.dfy-page .hands .lead-line,
.dfy-page .q-band p,.dfy-page .q-band .lead-line{color:#E6ECF5}
.dfy-page .appt .tone{color:#3170A4}
.dfy-page .appt .eyebrow{color:#23486E}

/* ROUND 6 (Chloe): the mockup sets .stats{margin-top:8px}, which reads as the
   stat row being stuck to the buttons. Client asked for air between the two
   rows. */
.hero .stats{margin-top:32px}

/* 6. The mockup styles the form band's arched photo as `.form-band .photo img`
      with an explicit height. The render-time image filler wraps every slot in
      a .ph box, and the generic .ph rule (position:relative, no height) made
      that box collapse to 0, so the photo vanished. Give the .ph box the
      mockup's dimensions and let the image fill it. */
.form-band .photo .ph{position:relative;min-height:0;height:470px;
  border-radius:160px 160px 0 0;overflow:hidden;background:var(--blue-soft)}
.form-band .photo .ph img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center top}
@media(max-width:980px){
  .form-band .photo .ph{height:300px}
}

/* 7. The mockup's form band is `align-items:center`, which works there
      because its placeholder form is short. The real form has more fields
      (name, phone, email, service, message, consent, HIPAA note), so it is
      roughly four times taller and centring left the copy column floating in
      the middle of a large empty area. Copy sits at the top; the arched photo
      keeps its own align-self:end so it still rises out of the band. */
.form-band .form-grid{align-items:center}
.form-band .photo{align-self:end}

/* 8. About page: the mockup sizes its placeholder boxes as .ph-img, but the
      render-time image filler emits .ph. Give .ph the same dimensions so the
      dentist and team photo slots hold their shape whether or not a real
      photograph exists yet. */
.doc .ph{min-height:260px;border-radius:12px;background:var(--blue-soft)}
.doc .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top}
.member .photo .ph{height:100%;min-height:0;border-radius:0}

/* .cred is uppercase 12.5px on the --ground panel; --blue measures under 4.5:1
   at that size, so small credential text uses the accessible blue. */
.doc .cred{color:var(--blue-text)}
.member span{color:var(--blue-text)}

/* helper classes this build adds to the ported bands */
.hands-aside{text-align:center}
.hands .lead-line{font-family:'Nunito',sans-serif;font-weight:800;color:#fff;font-size:18px;margin-bottom:18px}
.hands .row-btn{justify-content:center}
.chip-intro{margin-top:36px;font-size:14px}

/* 9. Headings on dark bands come out navy-on-navy.
      The mockups style them as `.banner h1{color:#fff}` etc, but the
      widgetizer turns a band heading into an Elementor Heading widget
      (`h1.elementor-heading-title`), and Elementor's own stylesheet loads
      after this file. The banner H1 measured 1.0:1 against its ground, i.e.
      completely invisible. Written here at (0,2,1) so it wins, and covering
      every band whose ground is navy or slate. */
.dfy-page .banner h1,.dfy-page .banner h2,
.dfy-page .hands h2,.dfy-page .hands h3,
.dfy-page .office-panel h2,.dfy-page .about-panel h2,
.dfy-page .cta-band h2,.dfy-page .form-band h2,
.dfy-page .tiles h2,.dfy-page .tiles h3,
.dfy-page .cat-panel h3,.dfy-page .inset-copy h2,
footer.base h2,footer.base h3,footer.base h4{color:#fff}

/* and the body copy that sits with them */
.dfy-page .banner p{color:#C5D5E8}
/* .hands p moved up to #E6ECF5 in round 6: #C5D5E8 is 3.76:1 on slate. */
.dfy-page .office-panel p,.dfy-page .about-panel p,
.dfy-page .cta-band p,.dfy-page .form-band p{color:#E6ECF5}

/* 10. Icon tiles. The mockups hardcode stroke="#023368" on every inline SVG;
       dfy_icon() emits stroke="currentColor" so one icon set can sit on light
       and dark grounds. Without a colour the icons inherited the grey body
       text and read as disabled. Light tiles get navy, dark bands get white. */
.ic svg,.pillar .ic svg,.visit .ic svg,.feat .ic svg,.val .ic svg,
.incl .ic svg,.mini-card .ic svg,.step .ic svg,.info .ic svg,
.why-item .ic svg,.svc .ic svg{color:var(--navy)}
.tiles .ic svg,.tile .ic svg,.inset-copy .ic svg,
.form-band .ic svg,.cta-band .ic svg{color:#fff}
.ic svg{width:24px;height:24px}
.pillar .ic svg,.svc .ic svg{width:26px;height:26px}

/* 11. .btn-outline-navy is used by the service mockup's intro band but the
       merged CSS only defines the filled variants, so it rendered as bare
       text with no affordance. */
a.btn.btn-outline-navy,button.btn.btn-outline-navy{background:transparent;color:var(--navy);
  box-shadow:inset 0 0 0 2px var(--navy)}
a.btn.btn-outline-navy:hover,button.btn.btn-outline-navy:hover{background:var(--navy);color:#fff}
.dfy-page .elementor-widget-button.btn-outline-navy .elementor-button{background:transparent;
  color:var(--navy);box-shadow:inset 0 0 0 2px var(--navy)}

/* 12. The mockup sizes `.intro-photo img` directly; the image filler wraps
       every slot in a .ph box, so give that box the container's height or it
       collapses and the photo never shows. Same pattern as the form band. */
.intro-photo .ph{height:100%;min-height:0;border-radius:0}
.intro-photo .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* 13. bandify groups short sections into .scard cards and keeps their <h2>
       so the document outline stays correct, but an h2 inside a card must not
       render at full section size. */
.scard h2{font-size:19px;margin-bottom:10px;line-height:1.25}
.scard h2 + p,.scard h3 + p{margin-top:0}
.scard p{font-size:14.5px}
.scard p:last-child{margin-bottom:0}

/* 14. FORM BAND BALANCE.
       The mockup's three-column form band assumes the mockup's own five-field
       placeholder form. The real form is longer for good reasons: it has a
       service selector, a consent checkbox and a HIPAA note telling patients
       not to send medical history. That made the band 1232px tall against a
       266px copy column, so the left third was mostly empty slate.
       Two changes, no structural departure from the mockup:
        a) inside this band the form drops its own intro and trailing hint,
           which duplicate the copy column beside it, and tightens its spacing;
        b) the arched photo grows to fill the taller band instead of sitting
           at a fixed 470px with a void above it.
       The contact page keeps the full, roomier form: this is scoped. */
.form-band .lead-form p.sub,
.form-band .lead-form .hint-foot{display:none}
.form-band .lead-form h2{font-size:26px;margin-bottom:16px}
.form-band .lead-form .field{margin-bottom:10px}
.form-band .lead-form .field label{font-size:13px;margin-bottom:4px}
.form-band .lead-form textarea{height:74px}
.form-band .lead-form .hint{font-size:12px;line-height:1.5;margin-top:4px}
.form-band .lead-form .form-consent{margin:12px 0 14px;font-size:13px;line-height:1.45}

/* ROUND 6 (Chloe): round 4 stretched the arched photo to the full height of
   the band, which made a 749px arch with the face cropped out of the top and
   left the copy column stranded. The mockup's arch is a fixed height sitting
   flush on the bottom edge of the band, so it goes back to that. 560 rather
   than the mockup's 470 because this band is taller than the mockup's: the
   real form carries labels, a service selector, a consent checkbox and the
   HIPAA note, none of which the mockup's five-field stub had. */
.form-band .photo{align-self:end;display:block}
.form-band .photo .ph{height:560px;min-height:0;max-height:none;width:100%}
@media(max-width:980px){
  .form-band .photo .ph{height:300px}
}

/* ROUND 6: and the band itself comes down from 839px to ~740px. Name and
   phone share a row (both are short values), the fields tighten, and the
   band's own padding comes off 90px. */
.form-band .form-grid{padding:72px 0 0}
.form-band .lead-form{padding:0 0 72px}
.form-band .lead-form .field{margin-bottom:8px}
.form-band .lead-form .field label{margin-bottom:3px}
.form-band .lead-form textarea{height:64px}
.form-band .lead-form .form-consent{margin:10px 0 12px;line-height:1.5}
@media(min-width:981px){
  .form-band .lead-form .frow{display:grid;grid-template-columns:1fr 1fr;column-gap:12px}
  .form-band .lead-form .frow > .field:nth-child(n+3){grid-column:1/-1}
}

/* 15. STEPS BAND.
       .step .ic is pulled up 62px so it straddles the top edge of its card,
       which is the mockup's design. Without clearance above the grid those
       raised circles collide with the band's intro paragraph. The middle
       card's icon also sits in a WHITE circle even though the card behind it
       is slate, so it stays navy like the others (see the removal above). */
.steps{margin-top:86px}
.step .ic svg{color:var(--navy)}
@media(max-width:980px){
  .steps{margin-top:70px}
}

/* 16. REVIEW ROTATOR DOTS.
       The mockup draws these as <span>; the shortcode emits <button> so they
       are reachable by keyboard. Without a reset they inherited the Elementor
       kit's button fill and rendered as three navy rectangles with a border,
       the same defect the nav sub-toggle had. */
.rev-nav .rev-dot{all:unset;box-sizing:border-box;width:9px;height:9px;border-radius:50%;
  background:rgba(255,255,255,.35);cursor:pointer;display:block;flex:none}
.rev-nav .rev-dot.active{background:#fff}
.rev-nav .rev-dot:focus-visible{outline:2px solid #fff;outline-offset:3px}
.rev-nav{position:absolute;left:44px;bottom:30px;display:flex;gap:8px}
@media(max-width:980px){ .rev-nav{left:24px} }

/* 17. REVIEWS: a plain centred slider.
       Replaces the mockup's photo-plus-navy-card split. That layout paired
       every review with a stock photograph of nobody in particular, which
       said nothing about the review beside it, and the card only ever showed
       one review anyway. One card, centred, dots underneath. */
.reviews-band .rev-slider{position:relative;max-width:820px;margin:38px auto 0}
.reviews-band .rev{display:none;margin:0;background:#fff;border:1px solid var(--line);
  border-radius:16px;padding:44px 48px 40px;text-align:center;
  box-shadow:0 20px 44px -26px rgba(2,51,104,.28)}
.reviews-band .rev.active{display:block}
.reviews-band .rev .stars{color:#F5B301;letter-spacing:3px;font-size:17px;margin-bottom:16px}
.reviews-band .rev blockquote{margin:0;padding:0;border:0}
.reviews-band .rev blockquote p{font-family:'Nunito',sans-serif;font-weight:600;
  font-size:19px;line-height:1.6;color:var(--navy);margin:0}
.reviews-band .rev figcaption{display:flex;align-items:center;justify-content:center;
  gap:12px;margin-top:26px}
.reviews-band .rev .av{width:44px;height:44px;border-radius:50%;background:var(--blue-soft);
  display:flex;align-items:center;justify-content:center;font-family:'Nunito',sans-serif;
  font-weight:800;font-size:14px;color:var(--navy);flex:none}
.reviews-band .rev .who-n{text-align:left}
.reviews-band .rev .who-n b{display:block;font-family:'Nunito',sans-serif;
  font-size:15px;color:var(--navy)}
.reviews-band .rev .who-n span{font-size:13px;color:var(--text)}

/* dots sit under the card on the light ground, so they are navy here */
.reviews-band .rev-nav{position:static;display:flex;justify-content:center;
  gap:9px;margin-top:26px}
.reviews-band .rev-nav .rev-dot{all:unset;box-sizing:border-box;width:10px;height:10px;
  border-radius:50%;background:rgba(2,51,104,.22);cursor:pointer;display:block;flex:none}
.reviews-band .rev-nav .rev-dot.active{background:var(--navy)}
.reviews-band .rev-nav .rev-dot:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
.reviews-band .rev-more{text-align:center;margin-top:24px}

@media(max-width:640px){
  .reviews-band .rev{padding:32px 24px 28px}
  .reviews-band .rev blockquote p{font-size:17px}
}

/* 18. CTA BAND BUTTON.
       The mockup defines `.btn-navy{background:var(--navy)}` unscoped. The
       widgetizer puts the anchor's classes on the Elementor Button widget's
       DIV wrapper as well, so that wrapper picked up the navy fill and
       stretched the full width of the band, producing a solid bar with the
       label floating in it. Button styling belongs to the control itself, so
       the wrapper is neutralised and the widget is centred. */
.dfy-page .elementor-widget-button.btn,
.dfy-page .elementor-widget-button.btn-navy,
.dfy-page .elementor-widget-button.btn-white,
.dfy-page .elementor-widget-button.btn-outline-navy{background:transparent;border:0;
  padding:0;height:auto;box-shadow:none;display:block;width:auto}
/* Elementor puts widgets in a flex .elementor-widget-wrap, so a button widget
   shrinks to its own width and pins to the start. text-align on the wrapper
   cannot centre it; auto side margins on the flex item can. */
.dfy-page .cta-band .elementor-widget-button,
.dfy-page .banner .elementor-widget-button,
.dfy-page .pullband .elementor-widget-button,
.dfy-page .inlinecta .elementor-widget-button{margin-left:auto;margin-right:auto;text-align:center}
.dfy-page .cta-band .elementor-button,
.dfy-page .banner .elementor-button{display:inline-flex;width:auto}

/* 19. The review attribution was inheriting an italic from the machinery's
       figure/figcaption styling. The reviewer's name is not an aside. */
.reviews-band .rev figcaption,
.reviews-band .rev .who-n b,
.reviews-band .rev .who-n span{font-style:normal}

/* 20. OUR OFFICE CARD.
       The mockup styles the small label as `.card .tag{display:block}` and
       never covers `.office .tag`, so inside the office card it stayed inline
       and ran straight into the navy hours pill:
       "Our OfficeMon to Thu, 8 am to 5 pm". Same treatment as the card
       version, plus spacing so the pill, address and copy stack cleanly. */
.office .body .tag{display:block;font-size:12px;font-weight:600;color:var(--blue-text);
  letter-spacing:.04em;margin-bottom:8px}
.office .body .hrs{display:inline-block;margin-bottom:14px}
.office .body h3{margin-bottom:10px}
.office .body p{margin-bottom:4px}

/* 21. HERO STATS ROW.
       The three stats already shared one type scale (36px/800 value,
       12.5px/600 label, 65px tall) so nothing was wrong with the lettering.
       What was uneven was the blocks: each was only as wide as its own label,
       measuring 87 / 98 / 101px, so with a fixed 42px flex gap the numbers
       never lined up and the spacing read as arbitrary.
       An equal-column grid under a fit-content container sizes every track to
       the widest label, which makes the three blocks genuinely identical
       without hard-coding a pixel width, so changing a label re-measures
       itself. `.stats` is the hero's only user, via [dfy_stats].
       Kept on flex below 980px, where the mockup wraps the row. */
@media(min-width:981px){
  .hero .stats{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
    width:-moz-fit-content;width:fit-content;gap:42px;align-items:start}
}


/* ROUND 6 (Chloe): TOP MENU BASELINES.
   The two dropdown items sat ~15px higher than the other four. The cause is
   the .sub-toggle button: it is display:inline, so after the block <a> it
   opens its own line box and adds the menu's 28px line-height to the <li>.
   With .menu{align-items:center} the taller <li> centred correctly but its
   link sat at the top of it, which is what the eye reads as misalignment.
   Making the <li> a flex row puts the link and the zero-height button on one
   line. Scoped above 980px so the mobile drawer is untouched. */
@media(min-width:981px){
  .menu > li{display:flex;align-items:center}
}

/* ROUND 6: FOOTER WORK HOURS.
   .dfy-hours li was flex/space-between, which is fine in a wide column but
   the footer's fourth column is 240px, so "Monday through Thursday:" and the
   time were forced apart and both wrapped mid-value. The mockup writes these
   as ordinary lines, so they are ordinary lines. */
.f-grid .dfy-hours li{display:block}
.f-grid .dfy-hours li b{white-space:nowrap}

/* ROUND 6: the header social chips are real glyphs now, not the mockup's
   placeholder letters. */
.socials svg{display:block}

/* ===== BEGIN r7-locations.css ===== */
/* ============================================================================
   ROUND 7 (Chloe): LOCATION NAP BAND
   ---------------------------------------------------------------------------
   The shape accidentinjuryspecialist.com uses on its city pages, which the
   client asked for: copy column left, a card right holding the map, the
   practice's details and a directions button. Emitted by dfy_s_nap_band().

   Two traps this block exists to avoid:

   1. [dfy_map] renders <div class="mapsec"><iframe>, and .mapsec has NO CSS
      anywhere in this stylesheet. On the contact page the iframe gets its
      height from `.map-wrap iframe{height:440px}`, so nothing looked wrong
      there and the gap was invisible. Dropped into any other container the
      iframe falls back to its intrinsic 300x150 and the card looks broken.
      Same family as the `.ph` collapse noted at fix 12.

   2. `.dfy-hours li` is flex/space-between, which pushes
      "Monday through Thursday:" and the time to opposite ends of a 420px
      card and wraps both mid-value. Exactly the footer bug from round 6, so
      the same fix: ordinary lines.
   ========================================================================== */

/* align-items:center, not start. The card is ~717px and the copy column is
   ~250px, so aligning to the top dumped 460px of dead white space under the
   copy and the band read as broken. This is what .map-grid already does. */
.nap-grid{display:grid;grid-template-columns:1fr 420px;gap:56px;align-items:center}
.nap-copy .eyebrow{color:var(--blue-text)}   /* 7.6:1; --blue is 4.05:1 at this size */
.nap-copy h2{margin:0 0 18px}
.nap-copy p{margin:0 0 18px}
.nap-copy .btn{margin-top:6px}
.nap-also{margin-top:34px;padding-top:26px;border-top:1px solid var(--line)}
.nap-also > span{display:block;font-family:'Nunito',sans-serif;font-size:12px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:var(--slate-deep)}
.nap-also .cities{justify-content:flex-start;margin-top:14px}

.nap-card{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fff;
  box-shadow:var(--shadow-sm)}
.nap-card .mapsec{margin:0;line-height:0}
.nap-card .mapsec iframe{display:block;width:100%;height:auto;aspect-ratio:16/8;border:0;
  border-bottom:1px solid var(--line)}
.nap-card .body{padding:22px 24px}
.nap-card .row{display:flex;gap:14px;padding:13px 0;border-bottom:1px solid var(--line)}
.nap-card .row:last-of-type{border-bottom:none}
.nap-card .row .k{flex:none;width:96px;padding-top:3px;font-family:'Nunito',sans-serif;
  font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--slate-deep)}                    /* 7.2:1; --muted is only 4.36:1 */
/* 104px, not AIS's 90px: at this font "From Coweta", "From Bixby", "From Jenks"
   and "From Owasso" all wrap to two lines under 100px. North Broken Arrow is
   long enough that it wraps regardless. */
.nap-card .row .k{width:104px}
.nap-card .row .v{font-size:15.5px;line-height:1.55;color:var(--text)}
.nap-card .row .v b{display:block;color:var(--navy);font-size:19px;font-weight:700}
.nap-card .row .v a{color:inherit;text-decoration:none}
.nap-card .row .v a:hover{text-decoration:underline}
.nap-card .dfy-hours li{display:block;font-size:15px;line-height:1.55}
.nap-card .dfy-hours li span{color:var(--text)}
.nap-card .dfy-hours li b{font-weight:600;white-space:nowrap}
.nap-card .dfy-hours-note{margin-top:.45rem;color:var(--slate-deep)}  /* --muted is 4.36:1 at 14px */
.nap-card .napbtn{display:flex;width:100%;margin-top:18px}

@media(max-width:1100px){
  .nap-grid{grid-template-columns:1fr 360px;gap:40px}
  .nap-card .row .k{width:92px}
}
@media(max-width:980px){
  .nap-grid{grid-template-columns:1fr;gap:34px;align-items:start}
  .nap-card{max-width:560px}
}
/* ===== END r7-locations.css ===== */

/* ===== BEGIN r8-photos.css ===== */
/* ============================================================================
   ROUND 8 (Chloe): reversed photo bands
   ---------------------------------------------------------------------------
   dfy_s_svc()'s reverse modifier used to be class "rev", which collides with
   the mockups' `.rev{display:none}` review-rotator card. Every reversed band
   was therefore invisible. The modifier is "photo-right" now, so these two
   rules replace the `.svc-split.rev` pair in the generated stylesheet.
   ========================================================================== */
.svc-split.photo-right .svc-media{order:2}
@media(max-width:980px){
  .svc-split.photo-right .svc-media{order:0}
}
/* ===== END r8-photos.css ===== */

/* ===== BEGIN r9-grids.css ===== */
/* Round 9 — under-filled grids sat hard left instead of centred.
 *
 * .sgrid is repeat(3,1fr) and .q-grid is 1.2fr/.8fr, but a lot of bands only
 * ever produce two cards (bandify groups a short section into .sgrid without
 * knowing how many items it will end up with) and the contact page's .q-grid
 * only ever gets one child. Grid fills from the start line, so the row ended
 * with a column-and-a-bit of dead white space on the right and read as broken.
 * Found on 25 pages for .sgrid and 1 for .q-grid by counting children against
 * declared columns across all 42 rendered pages, not by eye.
 *
 * The cards keep the exact width they have in a full three-up row —
 * (100% - 2 gaps) / 3 — and the CONTAINER is narrowed and auto-margined, so a
 * two-card row still lines up with the three-card rows above and below it
 * rather than turning into two wide slabs.
 *
 * Scoped to >=981px because line 445 already collapses .sgrid to one column
 * below that, and this file is appended so it would otherwise win everywhere.
 */
@media(min-width:981px){

  /* exactly two children */
  .sgrid:not(.four):has(> :nth-child(2):last-child){
    grid-template-columns:repeat(2,minmax(0,1fr));
    max-width:calc((100% - 48px) / 3 * 2 + 24px);
    margin-left:auto;
    margin-right:auto;
  }

  /* .sgrid.four with two or three children: same idea at the 4-up card width */
  .sgrid.four:has(> :nth-child(2):last-child){
    grid-template-columns:repeat(2,minmax(0,1fr));
    max-width:calc((100% - 60px) / 4 * 2 + 20px);
    margin-left:auto;
    margin-right:auto;
  }
  .sgrid.four:has(> :nth-child(3):last-child){
    grid-template-columns:repeat(3,minmax(0,1fr));
    max-width:calc((100% - 60px) / 4 * 3 + 40px);
    margin-left:auto;
    margin-right:auto;
  }

  /* a lone card would be a skinny orphan at one-third width, so give it two */
  .sgrid:not(.four):has(> :only-child){
    grid-template-columns:minmax(0,1fr);
    max-width:calc((100% - 48px) / 3 * 2 + 24px);
    margin-left:auto;
    margin-right:auto;
  }

  /* contact page: .q-grid is a two-column shell but only .routes is emitted,
   * so the three route cards were crammed into the 1.2fr column. */
  .q-grid:has(> :only-child){
    grid-template-columns:minmax(0,1fr);
  }
}
/* ===== END r9-grids.css ===== */

/* ===== BEGIN r9-faq.css ===== */
/* Round 9 — the consolidated /faq/ page, and cards with no photograph.
 *
 * 1. .faq-index   the jump chips at the top of /faq/
 * 2. .faq-src     the label above each sub-group, naming the page the
 *                 questions came off and linking back to it
 * 3. .faq h4      questions are h4 inside a group (h3 is the group label),
 *                 so every .faq h3 rule needs an h4 twin
 * 4. .no-photo    doc / card / office with a real-only slot behind it now
 *                 render no media box at all instead of an empty colour block
 */

/* ---- 1. jump index ---- */
.faq-index-note{max-width:620px;margin:14px auto 0;}
.faq-index{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:30px;}
.faq-jump{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);
  border-radius:100px;padding:10px 16px;font-family:'Nunito',sans-serif;font-weight:700;
  font-size:14px;color:var(--navy);transition:background .2s,border-color .2s,transform .2s;}
.faq-jump:hover{background:var(--navy);border-color:var(--navy);color:#fff;transform:translateY(-2px);}
.faq-jump span{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;
  padding:0 6px;border-radius:100px;background:var(--blue-soft);color:var(--navy);
  font-size:12px;font-weight:800;transition:background .2s,color .2s;}
.faq-jump:hover span{background:rgba(255,255,255,.2);color:#fff;}

/* The anchor has to clear the sticky header or the group heading lands under
 * it. Every generated group section carries an id, so this applies to all. */
.faq-band[id]{scroll-margin-top:110px;}

/* ---- 2. sub-group label ---- */
.faq-src{max-width:820px;margin:38px auto 14px;display:flex;flex-wrap:wrap;align-items:baseline;
  justify-content:space-between;gap:10px 20px;border-bottom:1px solid var(--line);padding-bottom:10px;}
.faq-src h3{font-size:17px;margin:0;color:var(--navy);}
.faq-src a{font-family:'Nunito',sans-serif;font-weight:800;font-size:13px;color:var(--blue-text);
  white-space:nowrap;}
.faq-src a:hover{text-decoration:underline;}
/* the first group in a section already has the heading block above it */
.faq-src:first-of-type{margin-top:34px;}
/* a group's rows start tight under their own label rather than at the
 * .faq-wrap default, which was spaced for a band heading */
.faq-src + .faq-wrap{margin-top:0;}

/* ---- 3. questions as h4 ---- */
.faq h4{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px 0;
  cursor:pointer;font-size:17px;}
.faq h4 span{width:28px;height:28px;border-radius:50%;background:var(--blue-soft);color:var(--navy);
  display:flex;align-items:center;justify-content:center;font-size:18px;flex:none;transition:.2s;}
.faq.open h4 span{transform:rotate(45deg);background:var(--navy);color:#fff;}
.faq h4 .faq-btn{all:unset;display:flex;justify-content:space-between;align-items:center;gap:20px;
  width:100%;cursor:pointer;font:inherit;color:inherit;}
.faq h4 .faq-btn:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:6px;}

/* ---- 4. cards with no photograph ---- */
/* .doc is 220px + 1fr; with the headshot box gone the bio would sit in the
 * 220px column. */
.doc.no-photo{grid-template-columns:1fr;}
/* .card .badge is absolutely positioned at top:200px against a 230px media
 * box that no longer exists, so it would land on top of the bio. */
.card.no-photo{border:1px solid var(--line);padding:26px 24px;}
.card.no-photo .body{padding:0;}
.card.no-photo .badge{position:static;display:inline-block;margin-bottom:12px;}
/* .office is 1fr + 1.2fr with the photo in the first column. */
.office.no-photo{grid-template-columns:1fr;}
.office.no-photo .body{padding:30px 32px;}

/* ---- 5. narrow screens ---- */
@media(max-width:700px){
  /* the back-link is a page title ("Teeth Cleaning and Prevention in Broken
   * Arrow") and would push past the viewport at nowrap on a phone. */
  .faq-src{display:block;}
  .faq-src a{white-space:normal;display:inline-block;margin-top:4px;}
  .faq-jump{font-size:13px;padding:9px 13px;}
  /* .office has no mobile collapse of its own; with no photo it must not
   * stay a two-column grid at phone width. */
  .office.no-photo .body{padding:24px 22px;}
}
/* ===== END r9-faq.css ===== */

/* ===== BEGIN r10-blog.css ===== */
/* Round 10: the migrated blog.
   Single article, category archive and the paginated index. Everything here
   reuses the tokens and the band rhythm the rest of the site already uses. */

/* ---- article banner -------------------------------------------------- */
.post-banner h1{font-size:40px;max-width:900px;margin:0 auto;}
.post-banner .crumbs a:hover{color:#fff;}
.post-meta{display:flex;justify-content:center;align-items:center;gap:10px;
  margin-top:16px;color:#9CC7EA;font-family:'Nunito',sans-serif;font-weight:700;
  font-size:13.5px;letter-spacing:.04em;}
.post-meta span[aria-hidden]{opacity:.55;}

/* Featured image sits between the navy banner and the prose, lifted into the
   banner so the two read as one unit. --natural is the file's own width, set
   per post, so a 400px legacy image is never blown up to band width. */
.post-hero{padding:0;margin-top:-46px;z-index:3;}
.post-hero .wrap{max-width:900px;}
.post-hero figure{border-radius:16px;overflow:hidden;box-shadow:0 26px 60px rgba(2,51,104,.18);
  background:var(--ground);aspect-ratio:16/9;
  width:min(100%, var(--natural, 900px));margin:0 auto;}
.post-hero img{width:100%;height:100%;object-fit:cover;display:block;}
.post-body{padding-top:56px;}

/* ---- article body ---------------------------------------------------- */
.post-body .wrap{max-width:760px;}
.post-body h2{font-size:28px;margin:38px 0 14px;}
.post-body h3{font-size:20px;margin:28px 0 10px;}
.post-body h4{font-size:16px;margin:22px 0 8px;}
.post-body > .wrap > *:first-child{margin-top:0;}
.post-body p,.post-body li{font-size:16.5px;}
.post-body a:not(.btn){color:var(--blue);text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px;}
.post-body a:not(.btn):hover{color:var(--navy);}
.post-body img{max-width:100%;height:auto;border-radius:12px;display:block;}
.post-body img.alignright{float:right;margin:6px 0 18px 24px;max-width:46%;}
.post-body img.alignleft{float:left;margin:6px 24px 18px 0;max-width:46%;}
.post-body img.aligncenter,.post-body img.alignnone{margin:24px auto;}
.post-body ul,.post-body ol{margin:0 0 18px 22px;}
.post-body li{margin-bottom:8px;}
.post-body blockquote{border-left:4px solid var(--blue);background:var(--ground);
  padding:18px 22px;margin:24px 0;border-radius:0 10px 10px 0;}
.post-body table{width:100%;border-collapse:collapse;margin:22px 0;font-size:15px;}
.post-body th,.post-body td{border:1px solid var(--line);padding:10px 12px;text-align:left;}
.post-body th{background:var(--ground);color:var(--navy);font-family:'Nunito',sans-serif;font-weight:800;}
.post-body figure{margin:24px 0;}
.post-body figcaption{font-size:13.5px;color:var(--text);margin-top:8px;}

/* ---- category pills, now real links ---------------------------------- */
.filters a b{font-weight:800;opacity:.55;font-size:12px;margin-left:2px;}
.filters a.on b{opacity:.7;}

/* ---- pager ----------------------------------------------------------- */
.pager{display:flex;justify-content:center;align-items:center;gap:8px;
  flex-wrap:wrap;margin-top:44px;}
.pg{display:inline-flex;align-items:center;justify-content:center;min-width:42px;
  height:42px;padding:0 14px;border-radius:100px;border:1px solid var(--line);
  background:#fff;color:var(--navy);font-family:'Nunito',sans-serif;
  font-weight:800;font-size:13.5px;transition:.15s;}
a.pg:hover{background:var(--navy);border-color:var(--navy);color:#fff;}
.pg.on{background:var(--navy);border-color:var(--navy);color:#fff;}
.pg.gap{border:0;background:none;min-width:22px;padding:0;}
/* Drawn here rather than written into the markup: the style gate reads the
   text of <main> and counts a literal ellipsis as body copy. */
.pg.gap::before{content:"\2026";opacity:.5;}
.pg.is-off{opacity:.35;}

/* ---- cards: the migrated posts have long titles ---------------------- */
.post h3{line-height:1.25;}
.pimg{aspect-ratio:3/2;background:var(--ground);overflow:hidden;}
.pimg img{width:100%;height:100%;object-fit:cover;display:block;}
.post.feat .pimg{aspect-ratio:auto;}

@media (max-width:900px){
  .post-banner h1{font-size:27px;}
  .post-hero{margin-top:-30px;}
  .post-hero figure{aspect-ratio:16/9;}
  .post-body{padding-top:40px;}
  .post-body .wrap{max-width:100%;}
  .post-body h2{font-size:23px;}
  .post-body img.alignright,.post-body img.alignleft{float:none;margin:20px auto;max-width:100%;}
  .post-body table{display:block;overflow-x:auto;}
  .post-meta{flex-wrap:wrap;}
}

/* The "Latest post" prefix lost its trailing space: in CSS a hex escape eats
   the space that terminates it, so \00b7 followed by a space rendered as
   "Latest post \00b7Sep 28". A non-breaking space terminates it instead. */
.post.feat .date::before{content:"Latest post \00b7\00a0";}
/* ===== END r10-blog.css ===== */

/* ===== BEGIN r11-polish.css ===== */
/* ==========================================================================
   Round 11 - look-and-feel polish.
   Four measured defects plus the vertical rhythm. Every number here came out
   of the rendered page, not out of a screenshot.
   ========================================================================== */

/* 1. HEADER. The logo read as a hard-edged bright white rectangle over every
   dark band. The bar is rgba(255,255,255,.96), so dark content behind it tints
   the bar - but the logo PNG carries an opaque white background of its own and
   does not tint with it. Four percent is enough to draw an edge. Opaque. */
header.nav{background:#fff;}

/* 2. INSURANCE TILES.
   2a. The carrier note ("Tricare & Active Duty Plans", "by VA referral") is a
       <small> inside the name span and had no display rule, so it ran inline
       and both tiles carrying one read as a single garbled word. */
.ins small{display:block;font-size:11px;font-weight:700;line-height:1.35;margin-top:4px;letter-spacing:0;}
/*  2b. The tile was a fixed 74px. A two-line carrier name plus a note overflows
       it, which is what pushed the note out of the box in the first place. */
.ins{height:auto;min-height:78px;padding:14px 12px;}
/*  2c. Carrier colours. The inline style is no longer emitted (see the note in
       dfy-shortcodes.php); 22 wordmarks in 22 brand colours read as a rainbow
       rather than a logo wall, and eight of them measured under 4.5:1 on white.
       One navy, one accent for the note. */
.ins span{color:var(--navy);}
.ins small{color:var(--blue-text);}

/* 3. THE LEAD FORM in the home page's slate band. The contact page keeps the
      roomier form; all of this is scoped.
   3a. The textarea was 64px and clipped its own placeholder mid-word. The
       placeholder runs to three lines at this column width: 3 x 21px of text
       box plus 24px of padding. */
.form-band .lead-form textarea{height:88px;}
/*  3b. The consent line was a bare <label>, so the checkbox sat on the text
       baseline and the two lines of copy ran together. */
.form-band .lead-form .form-consent label,
.appt-card .form-consent label{display:flex;align-items:flex-start;gap:9px;line-height:1.55;}
.form-band .lead-form .form-consent input[type="checkbox"],
.appt-card .form-consent input[type="checkbox"]{flex:0 0 auto;margin-top:4px;width:15px;height:15px;}

/* 4. SPLIT HEADS. `align-items:end` bottom-aligns a one-line h2 against a
      column that holds a paragraph AND a "View all ..." link, so on the home
      page the heading dropped about 40px below the copy it introduces and the
      row read as a mistake. Centring holds for the one-line and the two-line
      case alike. */
.split-head,.partners .head{align-items:center;}

/* 5. VERTICAL RHYTHM - the seam between two bands that share a ground.
      `section{padding:90px 0}` is right at a colour change, where the change
      does the separating on its own. Where the ground does not change the two
      paddings add up: About ran three #F3F5F8 bands end to end and carried two
      180px voids inside what reads as one section. dfy-seams.php stamps
      seam-t / seam-b on any top-level section whose neighbour shares its
      ground; these four rules collapse that seam to 40px a side.
      Mobile values are mirrored below so this cannot outrank the 980px step. */
.dfy-page .elementor-top-section.seam-t.dfy-el{padding-top:40px;}
.dfy-page .elementor-top-section.seam-b.dfy-el{padding-bottom:40px;}
.dfy-page .elementor-top-section.seam-t > .elementor-container .elementor-widget-html > section{padding-top:40px;}
.dfy-page .elementor-top-section.seam-b > .elementor-container .elementor-widget-html > section{padding-bottom:40px;}

@media(max-width:980px){
  .dfy-page .elementor-top-section.seam-t.dfy-el{padding-top:26px;}
  .dfy-page .elementor-top-section.seam-b.dfy-el{padding-bottom:26px;}
  .dfy-page .elementor-top-section.seam-t > .elementor-container .elementor-widget-html > section{padding-top:26px;}
  .dfy-page .elementor-top-section.seam-b > .elementor-container .elementor-widget-html > section{padding-bottom:26px;}
}

/* 6. The "Why Patients Stay" card. `align-items:center` shrank each cell to its
      own content and centred it, so the four icons sat at three different
      heights and the 1px dividers between the cells were short ragged stubs
      rather than full-height rules. Stretching makes the cells equal, which
      lines the icons up on their shared 26px padding and runs the dividers the
      full height of the card. */
.why{align-items:stretch;}

/* 7. The home form band centred its copy column against the tallest column (the
      form), which left ~250px of empty slate above "Book Your Visit" and put
      the heading level with the middle of the form. Top-aligned it reads with
      "Request an appointment". The arched photo keeps its own align-self:end,
      which is what sits it flush on the band's bottom edge. */
.form-band .form-grid{align-items:start;}

/* 8. .ins-note was #8a8a8a, which measures 3.05:1 on white and fails AA for
      body copy. --text is 5.74:1. */
.ins-note{color:var(--text);}

/* 9. Two pages still scrolled sideways on a phone. Both are min-content
      problems, which the round-9 stylesheet parse could not see because both
      grids DO carry a mobile override - the override just is not small enough.
      Found by measuring every element's right edge against the viewport at
      390px across all 42 pages.

   9a. About's "Our Office" visit row. It collapses to one column at 980px, but
       `info@dentistryforyoubrokenarrow.com` is a single unbreakable token, and a
       `1fr` track is minmax(auto,1fr) - auto being min-content, that one word
       set the floor and pushed the card 33px past the viewport. minmax(0,1fr)
       lets the track shrink and overflow-wrap lets the address break. */
.visit b,.visit span{overflow-wrap:anywhere;}
@media(max-width:980px){
  /* Scoped to the breakpoint that collapses .visit in the first place. An
     unscoped minmax(0,1fr) here overrode the desktop repeat(4,1fr) further up
     the file and stacked the four items into a column at every width. */
  .visit{grid-template-columns:minmax(0,1fr);}
  .visit .row{grid-template-columns:44px minmax(0,1fr);}
}

/*  9b. Payment Options' navy carrier tiles. `.fix-grid` drops from four columns
       to two below 980px, but a tile is a 46px icon plus a gap plus the carrier
       name plus 40px of padding - about 198px - so two of them need 412px and
       the phone has 350px. One column below 600px. */
@media(max-width:600px){
  .fix-grid{grid-template-columns:1fr;}
}
/* ===== END r11-polish.css ===== */

/* ===== BEGIN r12-logo.css ===== */
/* Round 12 (Markup pin 1): "Broken Arrow" sits beside the logo wordmark. */
header.nav .logo{display:flex;align-items:flex-end;gap:12px;text-decoration:none}
header.nav .logo-city{font-family:'Nunito',sans-serif;font-weight:800;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);line-height:1;padding:0 0 8px 12px;border-left:2px solid var(--line);white-space:nowrap}
@media (max-width:760px){header.nav .logo-city{display:none}}
/* ===== END r12-logo.css ===== */

/* ===== BEGIN r12-single.css ===== */
/* Round 12: a grid left with a single card centres it instead of leaving an empty right column. */
.card-grid:has(> .card:only-child){grid-template-columns:minmax(0,620px);justify-content:center}
.doc-grid:has(> .doc:only-child){grid-template-columns:minmax(0,720px);justify-content:center}
/* ===== END r12-single.css ===== */

/* ===== BEGIN r12-cards.css ===== */
/* Round 12: multi-paragraph service cards. .scard p{flex:1} made every paragraph grow
   equally, so a card with four paragraphs showed huge gaps. Paragraphs now stack
   normally and only the trailing link is pushed to the bottom. */
.scard p{flex:0 0 auto}
.scard p+p{margin-top:10px}
.scard .go{margin-top:auto;padding-top:16px}
/* ===== END r12-cards.css ===== */

/* 2026-10-15: bullet lists in pasted copy (fix-pasted-lists.php). The reset zeroes ul padding, so bullets hung outside the text column. */
.dfy-page ul.dfy-list,ul.dfy-list{list-style:disc;padding-left:1.25em;margin:0 0 1em}
ul.dfy-list li{margin:0 0 .35em;padding-left:.15em}
ul.dfy-list li::marker{color:var(--navy,#0b3a6e)}