:root {
  --sage:    #b89aea;   /* primary lilac — buttons, nav CTA, active */
  --sagl:    #9b6edc;   /* hover / deeper lilac */
  --sagp:    #f0ebfa;   /* pale lilac tint — card bg, icon bg */
  --crm:     #faf7fe;   /* page background — very slight purple warmth */
  --ww:      #fdf9ff;   /* section background */
  --bark:    #6c3c84;   /* stat badge, deep orchid */
  --ch:      #242424;
  --mid:     #5c5c5c;
  --lt:      #9a9a9a;
  --sand:    #f0e8da;
  --ah:      #2c1f4a;   /* after-hours band — deep purple-navy */
  --lilacd:  #783c90;   /* deep accent — section labels, role text, tags */
  --lilacp:  #f5f0fa;   /* pale accent — icon bg, chip bg */
  --orchid:  #c0b4cc;   /* soft mid lilac */
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'DM Sans', sans-serif; background: var(--ww); color: var(--ch); overflow-x: hidden; }
.icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.icon svg { width: 100%; height: 100%; }

/* ── NAV ── */
nav.main { position: fixed; top: 0; left: 0; right: 0; z-index: 500; background: rgba(250,247,242,.97); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid rgba(120,60,144,.1); height: 70px; display: flex; align-items: center; padding: 0 5%; justify-content: space-between; }
.nbrand { display: flex; align-items: center; gap: 11px; text-decoration: none; flex-shrink: 0; }
.nbname { font-family: 'Playfair Display', serif; font-size: 15px; font-weight: 700; color: var(--ch); display: block; line-height: 1.2; }
.nbsub  { font-size: 10px; font-weight: 300; color: var(--lt); letter-spacing: .14em; text-transform: uppercase; display: block; }
.nright { display: flex; align-items: center; gap: 2px; }
.nlist  { display: flex; align-items: center; gap: 2px; list-style: none; }
.nitem  { position: relative; list-style: none; }
.nlink  { display: flex; align-items: center; gap: 4px; font-size: 13.5px; font-weight: 400; color: var(--mid); text-decoration: none; padding: 8px 12px; border-radius: 8px; transition: color .18s, background .18s; background: none; border: none; cursor: pointer; font-family: 'DM Sans', sans-serif; white-space: nowrap; }
.nlink:hover { color: var(--sage); background: var(--sagp); }
.chev   { width: 14px; height: 14px; transition: transform .2s; flex-shrink: 0; }
.ndrop  { position: relative; }
.ndmenu { position: absolute; top: calc(100% + 10px); left: 0; background: #fff; border: 1px solid rgba(120,60,144,.12); border-radius: 14px; box-shadow: 0 10px 40px rgba(0,0,0,.1); padding: 8px; min-width: 230px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s, transform .2s, visibility .2s; z-index: 600; pointer-events: none; }
.ndrop:hover .ndmenu, .ndrop:focus-within .ndmenu { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.ndrop:hover .chev { transform: rotate(180deg); }
.ddsec  { padding: 4px 0; }
.ddsec + .ddsec { border-top: 1px solid rgba(0,0,0,.05); margin-top: 4px; padding-top: 8px; }
.ddlbl  { font-size: 10px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--lilacd); padding: 2px 10px 6px; }
.ddlnk  { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--mid); text-decoration: none; padding: 8px 10px; border-radius: 8px; transition: color .15s, background .15s; }
.ddlnk:hover { color: var(--sage); background: var(--sagp); }
.ddlnk .icon { width: 15px; height: 15px; color: var(--lt); }
.ddlnk:hover .icon { color: var(--sage); }
.nphone { font-size: 13.5px; font-weight: 500; color: var(--lilacd); text-decoration: none; display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 8px; transition: background .18s; white-space: nowrap; }
.nphone:hover { background: var(--lilacp); }
.nphone .icon { width: 15px; height: 15px; }
.ncta   { display: inline-flex; align-items: center; gap: 7px; background: var(--sage); color: #fff; font-size: 13.5px; font-weight: 500; padding: 9px 18px; border-radius: 100px; text-decoration: none; transition: background .2s; margin-left: 4px; white-space: nowrap; }
.ncta:hover { background: var(--sagl); }
.nham   { display: none; width: 44px; height: 44px; background: none; border: none; cursor: pointer; align-items: center; justify-content: center; color: var(--ch); border-radius: 10px; flex-shrink: 0; }
.nham:hover { background: var(--sagp); }
.nham .icon { width: 24px; height: 24px; }

/* Mobile drawer */
.mdrawer { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 490; background: rgba(0,0,0,.4); opacity: 0; transition: opacity .25s; }
.mdrawer.open { opacity: 1; }
.mpanel  { position: fixed; top: 0; right: 0; bottom: 0; width: min(300px,88vw); background: #fff; box-shadow: -4px 0 40px rgba(0,0,0,.15); transform: translateX(100%); transition: transform .28s cubic-bezier(.4,0,.2,1); overflow-y: auto; z-index: 700; display: flex; flex-direction: column; }
.mdrawer.open .mpanel { transform: translateX(0); }
.mphead  { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid rgba(0,0,0,.07); }
.mpclose { width: 40px; height: 40px; background: none; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--mid); border-radius: 8px; }
.mpclose:hover { background: var(--sagp); }
.mpclose .icon { width: 20px; height: 20px; }
.mplinks { padding: 12px 12px 20px; flex: 1; }
.mplink  { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 400; color: var(--ch); text-decoration: none; padding: 12px 14px; border-radius: 10px; transition: background .15s; }
.mplink:hover { background: var(--sagp); color: var(--sage); }
.mplink .icon { width: 18px; height: 18px; color: var(--sagl); }
.mpacc   { width: 100%; background: none; border: none; cursor: pointer; font-family: 'DM Sans', sans-serif; display: flex; align-items: center; justify-content: space-between; font-size: 15px; font-weight: 400; color: var(--ch); padding: 12px 14px; border-radius: 10px; transition: background .15s; }
.mpacc:hover { background: var(--sagp); color: var(--sage); }
.mpacc .icon { width: 18px; height: 18px; color: var(--sagl); }
.mpacc .chev { margin-left: auto; transition: transform .2s; }
.mpacc.open .chev { transform: rotate(180deg); }
.mpsub   { display: none; padding: 4px 0 4px 14px; margin-top: 2px; border-left: 2px solid var(--sagp); margin-left: 14px; }
.mpsub.open { display: block; }
.mpsub a { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--mid); text-decoration: none; padding: 9px 10px; border-radius: 8px; transition: background .15s; }
.mpsub a:hover { background: var(--sagp); color: var(--sage); }
.mpsub .icon { width: 14px; height: 14px; color: var(--sagl); }
.mpfooter { padding: 16px 20px; border-top: 1px solid rgba(0,0,0,.07); display: flex; flex-direction: column; gap: 10px; }
.mpfooter .btnp { width: 100%; justify-content: center; padding: 13px; }
.mptel   { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; color: var(--lilacd); text-decoration: none; justify-content: center; }
.mptel .icon { width: 16px; height: 16px; }

/* ── UTILITIES ── */
.slbl   { display: inline-block; font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--lilacd); margin-bottom: 14px; }
.stitle { font-family: 'Playfair Display', serif; font-size: clamp(28px,3.5vw,44px); font-weight: 700; line-height: 1.18; color: var(--ch); margin-bottom: 16px; }
.stitle em { font-style: italic; color: var(--sage); }
.ssub   { font-size: 16px; font-weight: 300; line-height: 1.75; color: var(--mid); max-width: 500px; }
.btnp   { display: inline-flex; align-items: center; gap: 8px; background: var(--sage); color: #fff; font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 500; padding: 14px 26px; border-radius: 100px; text-decoration: none; transition: background .2s, transform .2s, box-shadow .2s; border: none; cursor: pointer; }
.btnp:hover { background: var(--sagl); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(120,60,144,.28); }
.btnp .icon { width: 16px; height: 16px; }
.btno   { display: inline-flex; align-items: center; gap: 8px; background: transparent; color: var(--ch); font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 400; padding: 14px 26px; border-radius: 100px; text-decoration: none; border: 1.5px solid rgba(36,36,36,.18); transition: border-color .2s, color .2s; }
.btno:hover { border-color: var(--sage); color: var(--sage); }
.btno .icon { width: 16px; height: 16px; }
.btnw   { display: inline-flex; align-items: center; gap: 8px; background: #fff; font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 500; padding: 13px 24px; border-radius: 100px; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.btnw:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.btnw .icon { width: 16px; height: 16px; }
.btn-ghost { display: inline-flex; align-items: center; gap: 8px; background: transparent; color: #fff; font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 400; padding: 13px 24px; border-radius: 100px; text-decoration: none; border: 1.5px solid rgba(255,255,255,.4); transition: border-color .2s; }
.btn-ghost:hover { border-color: #fff; }

/* ── SECTION PATTERNS ── */
.phdr   { padding: 130px 5% 72px; text-align: center; background: linear-gradient(135deg, var(--sand) 0%, var(--crm) 55%, var(--sagp) 100%); }
.phdr h1 { font-family: 'Playfair Display', serif; font-size: clamp(30px,4.5vw,52px); font-weight: 700; line-height: 1.12; color: var(--ch); margin-bottom: 16px; }
.phdr p  { font-size: 16px; font-weight: 300; color: var(--mid); line-height: 1.7; max-width: 540px; margin: 0 auto; }
.phdr .slbl { color: var(--lilacd); }

/* Image hero variant */
.phdr-img-wrap { position: relative; overflow: hidden; }
.phdr-img-wrap .phdr { position: relative; z-index: 2; }
.phdr-img-wrap .phdr h1 { color: #fff; }
.phdr-img-wrap .phdr p  { color: rgba(255,255,255,.82); }
.phdr-img-wrap .phdr .slbl { color: rgba(255,255,255,.6); }
.phdr-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; z-index: 0; }
.phdr-overlay { position: absolute; inset: 0; background: linear-gradient(135deg,rgba(10,61,79,.85) 0%,rgba(120,60,144,.5) 100%); z-index: 1; }

.breadcrumb { display: flex; align-items: center; gap: 8px; justify-content: center; margin-bottom: 16px; }
.breadcrumb a { color: rgba(255,255,255,.55); text-decoration: none; font-size: 12.5px; font-weight: 300; transition: color .15s; }
.breadcrumb a:hover { color: #fff; }
.breadcrumb span { color: rgba(255,255,255,.3); font-size: 12px; }

/* CTA band */
.cta-sage  { background: var(--sage); padding: 72px 5%; text-align: center; color: #fff; }
.cta-lilac { background: var(--lilacd); padding: 72px 5%; text-align: center; color: #fff; }
.cta-dark  { background: var(--ah); padding: 72px 5%; text-align: center; color: #fff; }
.cta-sage h2, .cta-lilac h2, .cta-dark h2 { font-family: 'Playfair Display', serif; font-size: clamp(26px,3vw,40px); font-weight: 700; margin-bottom: 12px; }
.cta-sage p, .cta-lilac p, .cta-dark p { font-size: 15.5px; font-weight: 300; opacity: .8; margin-bottom: 30px; max-width: 460px; margin-left: auto; margin-right: auto; }
.cta-btns { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }

/* Values strip */
.vals-strip { background: var(--sagp); padding: 48px 5%; display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
.vs-item { display: flex; align-items: flex-start; gap: 12px; }
.vs-ico  { width: 38px; height: 38px; min-width: 38px; background: #fff; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--sage); }
.vs-ico .icon { width: 18px; height: 18px; }
.vs-item h4 { font-size: 14px; font-weight: 500; color: var(--ch); margin-bottom: 3px; }
.vs-item p  { font-size: 13px; font-weight: 300; color: var(--mid); line-height: 1.6; }

/* Info band */
.iband { background: var(--sage); padding: 64px 5%; display: grid; grid-template-columns: repeat(3,1fr); gap: 40px; }
.ibitem { color: #fff; }
.ibico  { width: 44px; height: 44px; background: rgba(255,255,255,.15); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.ibico .icon { width: 22px; height: 22px; }
.iblbl  { font-size: 10.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; opacity: .65; margin-bottom: 10px; }
.ibval  { font-family: 'Playfair Display', serif; font-size: 19px; font-weight: 600; line-height: 1.4; }
.ibsub  { font-size: 13px; font-weight: 300; opacity: .72; margin-top: 5px; }
.ibitem a { color: #fff; text-decoration: none; }
.ibitem a:hover { text-decoration: underline; }

/* After-hours feature */
.ahfeat  { background: var(--ah); padding: 80px 5%; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.ahftxt  { color: #fff; }
.ahflbl  { font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.55); margin-bottom: 14px; display: block; }
.ahftxt h2 { font-family: 'Playfair Display', serif; font-size: clamp(26px,3vw,40px); font-weight: 700; line-height: 1.18; color: #fff; margin-bottom: 16px; }
.ahftxt p  { font-size: 15px; font-weight: 300; line-height: 1.75; color: rgba(255,255,255,.72); margin-bottom: 28px; }
.ahfcards { display: flex; flex-direction: column; gap: 14px; }
.ahfcard  { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: 16px; padding: 20px 22px; display: flex; align-items: flex-start; gap: 14px; }
.ahfcico  { width: 40px; height: 40px; min-width: 40px; background: rgba(255,255,255,.12); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff; }
.ahfcico .icon { width: 20px; height: 20px; }
.ahfcard h4 { font-size: 14px; font-weight: 500; color: #fff; margin-bottom: 4px; }
.ahfcard p  { font-size: 12.5px; font-weight: 300; color: rgba(255,255,255,.65); line-height: 1.6; }

/* ── FOOTER ── */
footer  { background: var(--ch); padding: 68px 5% 32px; color: rgba(255,255,255,.55); }
.fgrid  { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 56px; }
.flogo  { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.fbrand { font-family: 'Playfair Display', serif; font-size: 16px; font-weight: 700; color: #fff; }
.fdesc  { font-size: 13.5px; line-height: 1.75; }
.fhd    { font-size: 10.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: #fff; margin-bottom: 18px; }
.flinks { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.flinks a { font-size: 13.5px; color: rgba(255,255,255,.5); text-decoration: none; transition: color .18s; }
.flinks a:hover { color: var(--sagl); }
.fbot   { border-top: 1px solid rgba(255,255,255,.08); padding-top: 24px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 12px; }

/* ── HOMEPAGE ── */
.hero   { min-height: 100vh; padding: 110px 5% 80px; display: flex; align-items: center; position: relative; overflow: hidden; background: var(--crm); }
.hblob  { position: absolute; right: -80px; top: 50%; transform: translateY(-50%); width: 600px; height: 660px; background: linear-gradient(140deg, var(--sagp) 0%, rgba(240,232,218,.5) 100%); border-radius: 62% 38% 40% 60%/55% 35% 65% 45%; animation: blob 12s ease-in-out infinite; pointer-events: none; }
@keyframes blob { 0%,100%{border-radius:62% 38% 40% 60%/55% 35% 65% 45%}33%{border-radius:40% 60% 60% 40%/40% 60% 40% 60%}66%{border-radius:55% 45% 35% 65%/60% 40% 60% 40%} }
.hcont  { position: relative; z-index: 2; max-width: 560px; }
.hbadge { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid rgba(192,180,204,.35); border-radius: 100px; padding: 7px 16px; font-size: 12px; font-weight: 500; color: var(--lilacd); letter-spacing: .04em; margin-bottom: 28px; animation: riseup .6s ease both; }
.dot    { width: 7px; height: 7px; background: var(--orchid); border-radius: 50%; animation: breathe 2.2s ease infinite; flex-shrink: 0; }
@keyframes breathe { 0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.4)} }
h1.hh   { font-family: 'Playfair Display', serif; font-size: clamp(40px,5.5vw,70px); font-weight: 700; line-height: 1.08; color: var(--ch); margin-bottom: 22px; animation: riseup .6s .08s ease both; }
h1.hh em { font-style: italic; color: var(--sage); }
.hsub   { font-size: 17px; font-weight: 300; line-height: 1.75; color: var(--mid); margin-bottom: 40px; animation: riseup .6s .16s ease both; }
.hact   { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; animation: riseup .6s .24s ease both; }
.hstats { display: flex; gap: 36px; margin-top: 60px; animation: riseup .6s .32s ease both; }
.hsn    { font-family: 'Playfair Display', serif; font-size: 36px; font-weight: 700; color: var(--ch); line-height: 1; }
.hsl    { font-size: 11px; font-weight: 300; color: var(--lilacd); letter-spacing: .07em; text-transform: uppercase; margin-top: 5px; }
.hcard-area { position: absolute; right: 4%; top: 50%; transform: translateY(-50%); width: 300px; z-index: 2; animation: riseup .8s .2s ease both; }
.hcard  { background: #fff; border-radius: 22px; overflow: hidden; box-shadow: 0 6px 40px rgba(0,0,0,.09); }
.hcard-body { padding: 20px; }
.hcardtitle { font-family: 'Playfair Display', serif; font-size: 16px; font-weight: 600; color: var(--ch); margin-bottom: 6px; }
.hcardsub   { font-size: 13px; font-weight: 300; color: var(--mid); line-height: 1.6; }
.hctags { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 12px; }
.hctag  { background: var(--lilacp); color: var(--lilacd); font-size: 11px; font-weight: 500; padding: 4px 11px; border-radius: 100px; }
.hfloat { position: absolute; background: #fff; border-radius: 14px; padding: 10px 14px; box-shadow: 0 4px 20px rgba(0,0,0,.09); display: flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 500; color: var(--ch); z-index: 3; }
.hfloat .icon { width: 17px; height: 17px; }
.hf1    { right: 330px; top: 26%; animation: bob 3.5s ease-in-out infinite; color: var(--sage); }
.hf1 .icon { color: var(--sage); }
.hf2    { right: 10px; bottom: 28%; animation: bob 3.5s 1.8s ease-in-out infinite; }
.hf2 .icon { color: var(--ah); }
@keyframes bob { 0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)} }
@keyframes riseup { from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)} }
.strip  { background: var(--ch); padding: 18px 5%; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; }
.sitem  { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.62); font-size: 13px; font-weight: 300; padding: 7px 18px; border-right: 1px solid rgba(255,255,255,.07); }
.sitem:last-child { border-right: none; }
.sitem .icon { width: 15px; height: 15px; color: #b89aea; }
.ahban  { background: var(--ah); padding: 20px 5%; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.ahbl   { display: flex; align-items: center; gap: 14px; }
.ahico  { width: 44px; height: 44px; min-width: 44px; background: rgba(255,255,255,.12); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #fff; }
.ahico .icon { width: 22px; height: 22px; }
.ahtitle { font-size: 14px; font-weight: 500; color: #fff; margin-bottom: 2px; }
.ahsub   { font-size: 12.5px; font-weight: 300; color: rgba(255,255,255,.7); }
.ahbadge { background: rgba(255,255,255,.15); color: #fff; font-size: 12px; font-weight: 500; padding: 8px 18px; border-radius: 100px; border: 1px solid rgba(255,255,255,.25); white-space: nowrap; display: flex; align-items: center; gap: 7px; text-decoration: none; }
.ahbadge .icon { width: 14px; height: 14px; }

/* About section on homepage */
.about-home { background: #fff; padding: 100px 5%; }
.agrid  { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.aframe { border-radius: 28px; overflow: hidden; aspect-ratio: 4/3; }
.aframe img { width: 100%; height: 100%; object-fit: cover; }
.abadge { background: var(--bark); color: #fff; border-radius: 18px; padding: 18px 22px; box-shadow: 0 10px 32px rgba(107,79,58,.28); display: inline-block; margin-top: 20px; }
.abadge .n { font-family: 'Playfair Display', serif; font-size: 38px; font-weight: 700; line-height: 1; }
.abadge .l { font-size: 10px; font-weight: 300; letter-spacing: .12em; text-transform: uppercase; opacity: .75; margin-top: 4px; }
.afeats { margin-top: 36px; display: flex; flex-direction: column; gap: 18px; }
.afeat  { display: flex; gap: 16px; align-items: flex-start; }
.afico  { width: 42px; height: 42px; min-width: 42px; background: var(--lilacp); border-radius: 11px; display: flex; align-items: center; justify-content: center; color: var(--lilacd); }
.afico .icon { width: 20px; height: 20px; }
.afeat h4 { font-size: 14.5px; font-weight: 500; color: var(--ch); margin-bottom: 4px; }
.afeat p  { font-size: 13.5px; font-weight: 300; color: var(--mid); line-height: 1.65; }

/* Services section on homepage */
.svcsec { background: var(--crm); padding: 100px 5%; }
.svchdr { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 24px; margin-bottom: 40px; }
.tabs   { display: flex; gap: 8px; margin-bottom: 48px; flex-wrap: wrap; }
.tab    { display: flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 100px; font-size: 13.5px; font-weight: 400; cursor: pointer; border: 1.5px solid transparent; background: #fff; color: var(--mid); font-family: 'DM Sans', sans-serif; transition: all .2s; }
.tab .icon { width: 16px; height: 16px; }
.tab.on { background: var(--sage); color: #fff; border-color: var(--sage); }
.tab:hover:not(.on) { border-color: var(--lilacd); color: var(--lilacd); }
.sgrid  { display: grid; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); gap: 16px; }
.panel  { display: none; }
.panel.on { display: grid; }
.sc     { background: #fff; border-radius: 18px; padding: 26px; border: 1px solid rgba(0,0,0,.045); transition: transform .22s, box-shadow .22s, border-color .22s; text-decoration: none; color: inherit; display: block; }
.sc:hover { transform: translateY(-4px); box-shadow: 0 14px 44px rgba(0,0,0,.08); border-color: rgba(120,60,144,.22); }
.scico  { width: 44px; height: 44px; background: var(--lilacp); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--lilacd); margin-bottom: 16px; transition: background .2s; }
.sc:hover .scico { background: var(--sage); color: #fff; }
.scico .icon { width: 22px; height: 22px; }
.sc h3  { font-size: 15px; font-weight: 500; color: var(--ch); margin-bottom: 7px; }
.sc p   { font-size: 13px; font-weight: 300; color: var(--mid); line-height: 1.65; }
.scarr  { margin-top: 14px; color: var(--sage); display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; opacity: 0; transition: opacity .2s; }
.scarr .icon { width: 14px; height: 14px; }
.sc:hover .scarr { opacity: 1; }

/* Testimonials */
.testi  { background: #fff; padding: 100px 5%; }
.tgrid  { display: grid; grid-template-columns: repeat(auto-fill,minmax(280px,1fr)); gap: 20px; margin-top: 48px; }
.tcard  { background: var(--crm); border-radius: 22px; padding: 30px; }
.tstars { display: flex; gap: 3px; margin-bottom: 14px; }
.tstars .icon { width: 15px; height: 15px; color: #e8a838; }
.tq     { font-family: 'Playfair Display', serif; font-size: 52px; line-height: .8; color: var(--lilacp); margin-bottom: 8px; }
.ttxt   { font-size: 14.5px; font-weight: 300; line-height: 1.75; color: var(--mid); margin-bottom: 20px; }
.tauth  { display: flex; align-items: center; gap: 12px; }
.tav    { width: 42px; height: 42px; border-radius: 50%; overflow: hidden; background: var(--lilacp); display: flex; align-items: center; justify-content: center; color: var(--lilacd); flex-shrink: 0; }
.tav img { width: 100%; height: 100%; object-fit: cover; object-position: center 15%; }
.tav .icon { width: 22px; height: 22px; }
.tname  { font-size: 14px; font-weight: 500; color: var(--ch); }
.tpet   { font-size: 12px; font-weight: 300; color: var(--lt); }

/* ── SERVICES PAGE ── */
.snav   { position: sticky; top: 70px; z-index: 90; background: #fff; border-bottom: 1px solid rgba(0,0,0,.06); padding: 0 5%; display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.snav a { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 400; color: var(--mid); text-decoration: none; padding: 16px 20px; border-bottom: 2.5px solid transparent; transition: all .2s; white-space: nowrap; }
.snav a:hover { color: var(--sage); border-color: var(--sage); }
.snav .icon { width: 16px; height: 16px; flex-shrink: 0; }
.svcblock { padding: 80px 5%; }
.svcblock:nth-child(odd)  { background: #fff; }
.svcblock:nth-child(even) { background: var(--crm); }
.sbhdr  { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 48px; padding-bottom: 24px; border-bottom: 1px solid rgba(0,0,0,.06); flex-wrap: wrap; gap: 16px; }
.sico   { width: 52px; height: 52px; background: var(--lilacp); border-radius: 16px; display: flex; align-items: center; justify-content: center; color: var(--lilacd); flex-shrink: 0; }
.sico .icon { width: 28px; height: 28px; }
.sgrid2 { display: grid; grid-template-columns: repeat(auto-fill,minmax(260px,1fr)); gap: 20px; }
.sc2    { background: #fff; border-radius: 18px; padding: 28px; border: 1px solid rgba(0,0,0,.045); transition: transform .22s, box-shadow .22s, border-color .22s; }
.sc2:hover { transform: translateY(-4px); box-shadow: 0 14px 44px rgba(0,0,0,.08); border-color: rgba(120,60,144,.22); }
.svcblock:nth-child(even) .sc2 { background: #fff; }
.sc2ico { width: 46px; height: 46px; background: var(--lilacp); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--lilacd); margin-bottom: 16px; transition: background .2s; }
.sc2:hover .sc2ico { background: var(--sage); color: #fff; }
.sc2ico .icon { width: 23px; height: 23px; }
.sc2 h3 { font-size: 16px; font-weight: 500; color: var(--ch); margin-bottom: 8px; }
.sc2 p  { font-size: 13.5px; font-weight: 300; color: var(--mid); line-height: 1.65; }
.sc2tag { display: inline-block; margin-top: 14px; background: var(--lilacp); color: var(--lilacd); font-size: 11px; font-weight: 500; padding: 4px 11px; border-radius: 100px; }

/* ── ABOUT PAGE ── */
.about-phdr { padding: 120px 5% 72px; background: linear-gradient(135deg,var(--sand) 0%,var(--crm) 55%,var(--sagp) 100%); text-align: center; }
.about-phdr .slbl { color: var(--lilacd); }
.about-phdr h1 { font-family: 'Playfair Display', serif; font-size: clamp(32px,4.5vw,54px); font-weight: 700; line-height: 1.12; color: var(--ch); margin-bottom: 16px; }
.about-phdr p { font-size: 16.5px; font-weight: 300; color: var(--mid); line-height: 1.75; max-width: 540px; margin: 0 auto; }
.story-sec  { padding: 88px 5%; background: #fff; }
.story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.story-frame { border-radius: 24px; overflow: hidden; aspect-ratio: 4/3; }
.story-frame img { width: 100%; height: 100%; object-fit: cover; }
.story-text p { font-size: 15.5px; font-weight: 300; color: var(--mid); line-height: 1.8; margin-bottom: 16px; }
.values-sec { padding: 88px 5%; background: var(--crm); }
.values-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(260px,1fr)); gap: 24px; margin-top: 56px; }
.val-card { background: #fff; border-radius: 20px; padding: 30px; border: 1px solid rgba(0,0,0,.04); }
.val-ico  { width: 48px; height: 48px; background: var(--lilacp); border-radius: 14px; display: flex; align-items: center; justify-content: center; color: var(--lilacd); margin-bottom: 18px; }
.val-ico .icon { width: 24px; height: 24px; }
.val-card h3 { font-family: 'Playfair Display', serif; font-size: 18px; font-weight: 600; color: var(--ch); margin-bottom: 10px; }
.val-card p  { font-size: 13.5px; font-weight: 300; color: var(--mid); line-height: 1.7; }
.pets-sec { padding: 72px 5%; background: #fff; }
.photo-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-bottom: 40px; }
.photo-grid-item { border-radius: 12px; overflow: hidden; aspect-ratio: 1; }
.photo-grid-item img { width: 100%; height: 100%; object-fit: cover; }
.pet-chips { display: flex; gap: 12px; flex-wrap: wrap; }
.pet-chip  { display: flex; align-items: center; gap: 9px; background: var(--lilacp); border-radius: 100px; padding: 11px 18px; font-size: 14px; font-weight: 400; color: var(--lilacd); }
.pet-chip .icon { width: 20px; height: 20px; }
.photo-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 40px; }
.photo-pair-item { border-radius: 18px; overflow: hidden; aspect-ratio: 3/4; }
.photo-pair-item img { width: 100%; height: 100%; object-fit: cover; object-position: center 8%; }

/* ── TEAM PAGE ── */
.team-phdr { padding: 130px 5% 72px; position: relative; overflow: hidden; text-align: center; }
.team-phdr-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.team-phdr-overlay { position: absolute; inset: 0; background: linear-gradient(135deg,rgba(10,61,79,.85) 0%,rgba(120,60,144,.5) 100%); }
.team-phdr-content { position: relative; z-index: 2; }
.team-phdr .slbl { color: rgba(255,255,255,.55); }
.team-phdr h1 { font-family: 'Playfair Display', serif; font-size: clamp(30px,4.5vw,52px); font-weight: 700; line-height: 1.12; color: #fff; margin-bottom: 14px; }
.team-phdr h1 em { font-style: italic; }
.team-phdr p { font-size: 16px; font-weight: 300; color: rgba(255,255,255,.8); line-height: 1.7; max-width: 520px; margin: 0 auto; }
.team-sec   { padding: 72px 5%; }
.team-sec:nth-child(odd)  { background: #fff; }
.team-sec:nth-child(even) { background: var(--crm); }
.sec-label  { font-size: 10px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--lilacd); margin-bottom: 8px; display: block; }
.sec-title  { font-family: 'Playfair Display', serif; font-size: clamp(24px,2.8vw,36px); font-weight: 700; color: var(--ch); margin-bottom: 8px; line-height: 1.2; }
.sec-title em { font-style: italic; color: var(--sage); }
.sec-div    { width: 48px; height: 3px; background: linear-gradient(90deg,var(--orchid),var(--lilacd)); border-radius: 2px; margin: 12px 0 36px; }
.team-grid  { display: grid; gap: 24px; }
.team-grid.vets   { grid-template-columns: repeat(4,1fr); }
.team-grid.nurses { grid-template-columns: repeat(3,1fr); }
.tc { background: var(--crm); border-radius: 20px; overflow: hidden; border: 1px solid rgba(0,0,0,.05); transition: transform .22s, box-shadow .22s, border-color .22s; }
.team-sec:nth-child(even) .tc { background: #fff; }
.tc:hover { transform: translateY(-5px); box-shadow: 0 16px 48px rgba(0,0,0,.09); border-color: rgba(120,60,144,.2); }
.tc-photo { height: 300px; position: relative; overflow: hidden; background: var(--sagp); }
.tc-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 15%; transition: transform .4s; }
.tc:hover .tc-photo img { transform: scale(1.04); }
.tc-placeholder { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: linear-gradient(135deg,var(--sagp) 0%,var(--lilacp) 100%); }
.tc-placeholder .ph-ico { width: 64px; height: 64px; background: rgba(255,255,255,.6); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--sage); }
.tc-placeholder .ph-ico .icon { width: 32px; height: 32px; }
.tc-placeholder p { font-size: 12px; font-weight: 400; color: var(--mid); letter-spacing: .04em; }
.tc-badge { position: absolute; bottom: 12px; left: 12px; font-size: 10.5px; font-weight: 500; letter-spacing: .06em; padding: 5px 12px; border-radius: 100px; backdrop-filter: blur(8px); }
.tc-badge.vet     { background: rgba(10,61,79,.82);   color: #fff; }
.tc-badge.nurse   { background: rgba(120,60,144,.82); color: #fff; }
.tc-badge.locum   { background: rgba(120,60,144,.82); color: #fff; }
.tc-badge.manager { background: rgba(107,79,58,.82);  color: #fff; }
.tc-body  { padding: 20px 22px 24px; }
.tc-name  { font-family: 'Playfair Display', serif; font-size: 20px; font-weight: 700; color: var(--ch); margin-bottom: 3px; }
.tc-role  { font-size: 11px; font-weight: 500; color: var(--lilacd); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 12px; }
.tc-bio   { font-size: 13.5px; font-weight: 300; color: var(--mid); line-height: 1.72; }
.tc-tags  { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.tc-tag   { background: var(--lilacp); color: var(--lilacd); font-size: 11px; font-weight: 500; padding: 3px 10px; border-radius: 100px; }
.tc-tag.tl { background: var(--sagp); color: var(--sage); }
.gallery-sec { padding: 64px 5%; background: var(--crm); }
.gal-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 40px; }
.gal-img  { border-radius: 16px; overflow: hidden; aspect-ratio: 3/4; }
.gal-img img { width: 100%; height: 100%; object-fit: cover; object-position: center 8%; transition: transform .4s; }
.gal-img:hover img { transform: scale(1.04); }

/* ── LOCATION PAGES ── */
.loc-phdr { padding: 130px 5% 72px; position: relative; overflow: hidden; text-align: center; }
.loc-phdr-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.loc-phdr-overlay { position: absolute; inset: 0; background: linear-gradient(135deg,rgba(10,61,79,.82) 0%,rgba(120,60,144,.6) 100%); }
.loc-phdr-content { position: relative; z-index: 2; }
.loc-phdr .slbl { color: rgba(255,255,255,.6); }
.loc-phdr h1 { font-family: 'Playfair Display', serif; font-size: clamp(30px,4.5vw,52px); font-weight: 700; line-height: 1.12; color: #fff; margin-bottom: 14px; }
.loc-phdr h1 em { font-style: italic; }
.loc-phdr p  { font-size: 16px; font-weight: 300; color: rgba(255,255,255,.82); line-height: 1.7; max-width: 540px; margin: 0 auto; }
.prose-sec  { padding: 80px 5%; background: #fff; }
.prose-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.prose-img  { border-radius: 22px; overflow: hidden; aspect-ratio: 4/3; }
.prose-img img { width: 100%; height: 100%; object-fit: cover; }
.prose p    { font-size: 15.5px; font-weight: 300; color: var(--mid); line-height: 1.8; margin-bottom: 16px; }
.loc-svc    { padding: 72px 5%; background: var(--crm); }
.loc-grid   { display: grid; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); gap: 16px; margin-top: 40px; }
.loc-card   { background: #fff; border-radius: 18px; padding: 24px; border: 1px solid rgba(0,0,0,.045); display: flex; gap: 14px; align-items: flex-start; }
.lc-ico     { width: 40px; height: 40px; min-width: 40px; background: var(--lilacp); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--lilacd); flex-shrink: 0; }
.lc-ico .icon { width: 20px; height: 20px; }
.loc-card h3 { font-size: 14.5px; font-weight: 500; color: var(--ch); margin-bottom: 4px; }
.loc-card p  { font-size: 13px; font-weight: 300; color: var(--mid); line-height: 1.6; }
.map-sec    { padding: 64px 5%; background: var(--crm); }
.map-grid   { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; margin-bottom: 0; }
.map-box    { background: var(--sagp); border-radius: 22px; height: 280px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; border: 2px dashed rgba(120,60,144,.2); }
.map-box .icon { width: 40px; height: 40px; color: var(--sage); }
.map-box p  { font-size: 14.5px; font-weight: 300; color: var(--mid); }
.map-box a  { font-size: 13.5px; font-weight: 500; color: var(--sage); text-decoration: none; }
.map-box a:hover { text-decoration: underline; }
.nearby-sec { padding: 64px 5%; background: #fff; }
.nearby-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(200px,1fr)); gap: 14px; margin-top: 32px; }
.nearby-card { background: var(--crm); border-radius: 14px; padding: 20px; text-decoration: none; display: flex; align-items: center; gap: 12px; transition: transform .2s, box-shadow .2s; border: 1px solid rgba(0,0,0,.04); }
.nearby-card:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(0,0,0,.07); }
.nearby-card .icon { width: 20px; height: 20px; color: var(--sage); flex-shrink: 0; }
.nearby-card span { font-size: 14px; font-weight: 500; color: var(--ch); }

/* ── 404 PAGE ── */
.page404 { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 120px 5% 80px; text-align: center; background: var(--crm); position: relative; overflow: hidden; }
.bbl    { position: absolute; left: -120px; top: 10%; width: 400px; height: 400px; background: var(--sagp); border-radius: 60% 40% 50% 50%/50% 60% 40% 50%; animation: bbl 14s ease-in-out infinite; pointer-events: none; }
.bbr    { position: absolute; right: -100px; bottom: 5%; width: 360px; height: 360px; background: linear-gradient(140deg,var(--lilacp) 0%,var(--sand) 100%); border-radius: 40% 60% 60% 40%/60% 30% 70% 40%; animation: bbr 11s ease-in-out infinite; pointer-events: none; }
@keyframes bbl { 0%,100%{border-radius:60% 40% 50% 50%/50% 60% 40% 50%;transform:translateY(0)}50%{border-radius:40% 60% 40% 60%/60% 40% 60% 40%;transform:translateY(-20px)} }
@keyframes bbr { 0%,100%{border-radius:40% 60% 60% 40%/60% 30% 70% 40%;transform:translateY(0)}50%{border-radius:60% 40% 40% 60%/40% 60% 40% 60%;transform:translateY(16px)} }
.c404   { position: relative; z-index: 2; max-width: 560px; }
.numwrap { position: relative; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.num404 { font-family: 'Playfair Display', serif; font-size: clamp(100px,20vw,180px); font-weight: 700; line-height: 1; color: transparent; -webkit-text-stroke: 3px var(--lilacp); letter-spacing: -4px; user-select: none; pointer-events: none; }
.pawmid { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-52%); color: var(--sagl); animation: pawbob 3s ease-in-out infinite; }
.pawmid .icon { width: clamp(60px,10vw,88px); height: clamp(60px,10vw,88px); }
@keyframes pawbob { 0%,100%{transform:translate(-50%,-52%) rotate(-6deg) scale(1)}50%{transform:translate(-50%,-56%) rotate(6deg) scale(1.08)} }
.tag404 { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid rgba(192,180,204,.35); border-radius: 100px; padding: 7px 18px; font-size: 12px; font-weight: 500; color: var(--lilacd); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 22px; }
.tagdot { width: 7px; height: 7px; background: var(--orchid); border-radius: 50%; animation: breathe 2.2s ease infinite; }
h1.h404 { font-family: 'Playfair Display', serif; font-size: clamp(28px,4vw,42px); font-weight: 700; line-height: 1.18; color: var(--ch); margin-bottom: 16px; }
h1.h404 em { font-style: italic; color: var(--sagl); }
.sub404 { font-size: 16px; font-weight: 300; line-height: 1.75; color: var(--mid); margin-bottom: 40px; max-width: 440px; margin-left: auto; margin-right: auto; }
.act404 { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin-bottom: 64px; }
.qllbl  { font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--lt); margin-bottom: 18px; }
.qlinks { display: flex; align-items: stretch; justify-content: center; gap: 14px; flex-wrap: wrap; }
.qlink  { display: flex; flex-direction: column; align-items: center; gap: 10px; background: #fff; border-radius: 18px; padding: 22px 20px; width: 136px; text-decoration: none; border: 1px solid rgba(0,0,0,.05); transition: transform .2s, box-shadow .2s, border-color .2s; }
.qlink:hover { transform: translateY(-4px); box-shadow: 0 12px 36px rgba(0,0,0,.08); border-color: rgba(192,180,204,.4); }
.qlico  { width: 44px; height: 44px; background: var(--lilacp); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--lilacd); transition: background .2s; }
.qlink:hover .qlico { background: var(--sage); color: #fff; }
.qlico .icon { width: 22px; height: 22px; }
.qllabel { font-size: 13px; font-weight: 500; color: var(--ch); margin-top: 2px; }
.qlsub  { font-size: 11.5px; font-weight: 300; color: var(--lt); text-align: center; line-height: 1.4; }
.dogfloat { position: absolute; bottom: 12%; left: 8%; background: #fff; border-radius: 16px; padding: 12px 18px; box-shadow: 0 6px 28px rgba(0,0,0,.09); display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 400; color: var(--mid); z-index: 3; animation: dfloat 4s ease-in-out infinite; white-space: nowrap; }
.dogfloat .icon { width: 22px; height: 22px; color: var(--sagl); flex-shrink: 0; }
@keyframes dfloat { 0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-10px) rotate(2deg)} }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .nright { display: none; }
  .nham   { display: flex; }
  .mdrawer { display: block; }
  .vals-strip { grid-template-columns: repeat(2,1fr); }
  .team-grid.vets   { grid-template-columns: repeat(2,1fr); }
  .team-grid.nurses { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 768px) {
  .fgrid  { grid-template-columns: 1fr 1fr; }
  .agrid, .story-grid, .prose-grid, .ahfeat, .map-grid { grid-template-columns: 1fr; gap: 40px; }
  .iband  { grid-template-columns: 1fr; padding: 48px 5%; }
  .hact   { flex-direction: column; align-items: stretch; }
  .hact a { justify-content: center; }
  .hcard-area, .hfloat { display: none; }
  .hblob  { right: -200px; }
  .svchdr { flex-direction: column; align-items: flex-start; }
  .sgrid  { grid-template-columns: 1fr 1fr; }
  .photo-grid { grid-template-columns: 1fr 1fr; }
  .gal-grid { grid-template-columns: 1fr 1fr; }
  .ahban  { flex-direction: column; align-items: flex-start; }
  .cta-btns { flex-direction: column; align-items: stretch; }
  .cta-btns a { justify-content: center; }
  .phdr, .about-phdr { padding: 110px 5% 56px; }
}
@media (max-width: 480px) {
  .team-grid.vets   { grid-template-columns: 1fr; }
  .team-grid.nurses { grid-template-columns: 1fr; }
  .sgrid  { grid-template-columns: 1fr; }
  .tabs   { gap: 6px; }
  .tab    { padding: 9px 14px; font-size: 13px; }
  .fgrid  { grid-template-columns: 1fr; }
  .nearby-grid { grid-template-columns: 1fr 1fr; }
  .act404 { flex-direction: column; align-items: stretch; }
  .act404 a { justify-content: center; }
  .qlink  { width: calc(50% - 7px); max-width: 160px; }
  .dogfloat { display: none; }
  .vals-strip { grid-template-columns: 1fr 1fr; padding: 36px 5%; }
}