/* First Hightower Infotech - design two, layer 2
   =========================================================================
   ORDER MATTERS. Keep this file in this shape:
     1. surfaces and decoration
     2. components, written desktop first
     3. ONE responsive layer at the very end (1180 -> 980 -> 640 -> touch)
   Never append a plain rule after the responsive layer, it will silently beat
   the media queries and break the phone layout.
   ========================================================================= */

/* ---------- 1. surfaces ---------- */
body{background:#fff}
html{-webkit-tap-highlight-color:rgba(16,96,168,.14)}
.sec-soft{background:linear-gradient(180deg,#F7FAFD 0%,#EEF4FA 100%)}
.sec-tint{background:linear-gradient(180deg,#FFFFFF 0%,#F4F8FC 100%)}
.sec-deep{background:linear-gradient(180deg,#0A1A2B 0%,#0B2A4A 100%);color:rgba(255,255,255,.76)}
.sec-deep h2,.sec-deep h3,.sec-deep h4{color:#fff}
.sec-deep .lead{color:rgba(255,255,255,.74)}
.sec-deep .kicker{color:var(--cyan-2)}
.sec-deep .kicker::before{background:linear-gradient(90deg,var(--red) 0 40%,var(--cyan-2) 40%)}
.sec-rel{position:relative;overflow:hidden;isolation:isolate}
.bloom{position:absolute;border-radius:50%;pointer-events:none;z-index:-1;filter:blur(8px)}
.bloom-a{width:620px;height:620px;left:-220px;top:-200px;background:radial-gradient(circle,rgba(64,184,232,.18),transparent 66%)}
.bloom-b{width:720px;height:720px;right:-260px;bottom:-320px;background:radial-gradient(circle,rgba(16,96,168,.14),transparent 66%)}
.grid-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(rgba(16,96,168,.14) 1px,transparent 1px);background-size:26px 26px;-webkit-mask-image:radial-gradient(ellipse 65% 60% at 50% 0%,#000,transparent 72%);mask-image:radial-gradient(ellipse 65% 60% at 50% 0%,#000,transparent 72%);opacity:.5}

/* ---------- 2. header ---------- */
.progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;transform:scaleX(0);transform-origin:0 50%;background:linear-gradient(90deg,var(--red),var(--brand) 40%,var(--cyan));z-index:2}
.head{background:rgba(255,255,255,.82)}
.head.stuck{background:rgba(255,255,255,.94);box-shadow:0 10px 40px -28px rgba(10,26,43,.7)}
.head-row{height:78px;transition:height .25s}
.head.stuck .head-row{height:68px}
.brand{display:flex;align-items:center;gap:12px}
.brand img{transition:height .25s}
.head.stuck .brand img{height:38px}
.nav>a,.drop>button{position:relative;font-weight:500}
.nav>a::after,.drop>button::after{content:"";position:absolute;left:14px;right:14px;bottom:2px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--brand),var(--cyan));transform:scaleX(0);transform-origin:50%;transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.nav>a:hover::after,.drop:hover>button::after,.nav>a[aria-current="page"]::after,.drop.current>button::after{transform:scaleX(1)}
.nav>a:hover,.drop>button:hover{background:transparent}
.head-right .btn-fill{background:linear-gradient(135deg,var(--brand),#1B7FD0);box-shadow:0 12px 26px -14px rgba(16,96,168,.9)}
.head-right .btn-fill:hover{background:linear-gradient(135deg,var(--navy),var(--brand))}

/* mega menu */
.mega{width:800px;grid-template-columns:1fr 1fr 270px;padding:16px;border-radius:22px}
.mega-feat{grid-column:3;grid-row:1/99;border-radius:16px;overflow:hidden;position:relative;background:linear-gradient(160deg,#0B3D73,#1060A8);display:flex;flex-direction:column;justify-content:flex-end;min-height:230px;padding:18px;color:#fff}
.mega-feat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.32;transition:transform .5s,opacity .4s}
.mega-feat:hover img{transform:scale(1.05);opacity:.42}
.mega-feat span.t{position:relative;font-family:var(--f-head);font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan-2)}
.mega-feat b{position:relative;display:block;margin-top:6px;font-family:var(--f-head);font-size:17px;line-height:1.25}
.mega-feat i{position:relative;display:inline-flex;align-items:center;gap:7px;margin-top:12px;font-style:normal;font-size:13.5px;color:var(--cyan-2);font-weight:600}
.mega-foot{grid-column:1/3}

/* mobile menu, collapsible services group */
.mnav-group{border-bottom:1px solid var(--line)}
.mnav-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;gap:12px;padding:16px 4px;background:none;border:0;font-family:var(--f-head);font-weight:600;font-size:18px;color:var(--ink);text-align:left}
.mnav-toggle .ico{width:20px;height:20px;color:var(--brand);transition:transform .3s}
.mnav-group.open .mnav-toggle .ico{transform:rotate(180deg)}
.mnav .sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s cubic-bezier(.2,.7,.2,1)}
.mnav-group.open .sub{grid-template-rows:1fr}
.mnav .sub>div{overflow:hidden;min-height:0}
.mnav .sub a{border-bottom:0}

/* ---------- 3. brand block ---------- */
.block::after{content:"";position:absolute;left:50%;top:-120px;width:760px;height:760px;transform:translateX(-50%);border-radius:50%;border:1px solid rgba(255,255,255,.07);box-shadow:0 0 0 60px rgba(255,255,255,.03),0 0 0 140px rgba(255,255,255,.02);pointer-events:none}
.pill{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.pill:hover{transform:translateY(-1px)}

/* ---------- 4. logo wall ---------- */
.wall{border:1px solid var(--line);border-radius:22px;background:#fff;box-shadow:var(--sh);overflow:hidden}
.wall-head{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 26px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#FBFDFF,#F4F8FC)}
.wall-head p{font-size:14.5px;color:var(--muted)}
.wall-head b{font-family:var(--f-head);color:var(--ink);font-weight:700}
.wall-row{display:grid;grid-template-columns:repeat(4,1fr)}
.vendor{display:flex;flex-direction:column;align-items:center;gap:10px;padding:30px 18px;border-left:1px solid var(--line);transition:background .25s}
.vendor:first-child{border-left:0}
.vendor:hover{background:var(--cyan-soft)}
.vendor .ico{width:40px;height:40px;color:#7E93A8;transition:color .25s,transform .25s}
.vendor:hover .ico{color:var(--brand);transform:translateY(-2px)}
.vendor b{font-family:var(--f-head);font-size:15px;color:var(--ink);font-weight:700}
.vendor span{font-size:12.5px;color:var(--muted);text-align:center;line-height:1.4}
.wall-foot{display:flex;align-items:center;gap:12px;padding:16px 26px;border-top:1px solid var(--line);font-size:14px;color:var(--muted);background:#FBFDFF}
.wall-foot .ico{width:17px;height:17px;color:var(--brand);flex-shrink:0}

/* ---------- 5. proof band ---------- */
.proof{position:relative;display:grid;grid-template-columns:1.18fr .82fr;margin:0;border-radius:24px;
  overflow:hidden;isolation:isolate;background:linear-gradient(140deg,#0B3D73 0%,#092E58 48%,#071F3B 100%)}
.proof::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:58px 58px;
  -webkit-mask-image:radial-gradient(ellipse 72% 88% at 22% 0%,#000,transparent 72%);
          mask-image:radial-gradient(ellipse 72% 88% at 22% 0%,#000,transparent 72%)}
.proof::after{content:"";position:absolute;z-index:0;pointer-events:none;
  width:620px;height:420px;right:-170px;bottom:-230px;border-radius:50%;filter:blur(8px);
  background:radial-gradient(ellipse at center,rgba(64,184,232,.34) 0%,rgba(27,118,198,.16) 45%,transparent 72%)}
.proof-main,.proof-side{position:relative;z-index:1}

.proof-main{padding:46px 48px;display:flex;flex-direction:column;align-items:flex-start}
.proof-main .kicker{color:var(--cyan-2)}
.proof-main .kicker::before{background:var(--cyan-2)}
.proof-main blockquote{margin:20px 0 0;position:relative;padding-left:26px;
  font-family:var(--f-head);font-weight:700;font-size:clamp(21px,2.1vw,30px);line-height:1.32;
  letter-spacing:-.022em;color:#fff;text-wrap:balance}
.proof-main blockquote::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;
  border-radius:3px;background:linear-gradient(180deg,var(--red) 0 26%,var(--cyan) 26%)}
.proof-main figcaption{margin-top:18px;font-size:14px;line-height:1.5;color:rgba(255,255,255,.6);
  max-width:46ch}
.proof-main .sec-cta{display:inline-flex;align-items:center;gap:8px;margin-top:26px;
  font-family:var(--f-head);font-weight:600;font-size:14.5px;color:#fff;
  padding-bottom:3px;border-bottom:1px solid rgba(255,255,255,.28);transition:border-color .2s,gap .2s}
.proof-main .sec-cta .ico{width:16px;height:16px;color:var(--cyan-2)}
.proof-main .sec-cta:hover{border-bottom-color:var(--cyan);gap:12px}

.proof-side{padding:30px 34px;display:flex;flex-direction:column;justify-content:center;
  background:rgba(4,17,33,.34);border-left:1px solid rgba(255,255,255,.09)}
.proof-side .item{display:flex;gap:14px;align-items:flex-start;padding:17px 0}
.proof-side .item+.item{border-top:1px solid rgba(255,255,255,.09)}
.proof-side .item:first-child{padding-top:0}
.proof-side .item:last-child{padding-bottom:0}
.proof-side .pi{width:34px;height:34px;border-radius:10px;flex-shrink:0;display:grid;place-items:center;
  background:rgba(64,184,232,.13);border:1px solid rgba(64,184,232,.22)}
.proof-side .pi .ico{width:17px;height:17px;color:var(--cyan-2)}
.proof-side b{display:block;font-family:var(--f-head);color:#fff;font-size:15.5px;
  font-weight:600;line-height:1.32}
.proof-side span{display:block;font-size:13.5px;color:rgba(255,255,255,.62);line-height:1.48;margin-top:3px}

/* ---------- 5b. enquiry forms ---------- */
/* the honeypot. Off screen rather than display:none, because some bots skip
   anything that is hidden outright */
.hp{position:absolute!important;left:-9999px!important;top:auto;width:1px;height:1px;overflow:hidden}
.form-note{display:block;margin:0 0 20px;padding:14px 18px;border-radius:12px;
  font-size:15.5px;line-height:1.5;font-weight:500;border:1px solid}
.form-note:focus{outline:2px solid var(--brand);outline-offset:2px}
.form-note.ok{background:#E9F6F0;border-color:#BCE1D1;color:#0E7A56}
.form-note.bad{background:#FDEDED;border-color:#F4CCCE;color:#B3161D}
.form-card button[type=submit][disabled]{opacity:.6;cursor:default}

/* ---------- 5c. office cards on the globe ---------- */
/* positions come from the row now, so a new office places itself */
.note-left,.note-right{position:absolute;width:246px;z-index:3}
.globe-stage .note{border:1px solid var(--line);border-radius:14px;padding:14px 16px;
  box-shadow:0 18px 40px -26px rgba(10,26,43,.5)}

/* ---------- 5d. social links ---------- */
.social-row{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap}
.social-row a{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;
  border:1px solid var(--line);background:#fff;color:var(--body);
  transition:color .16s ease,border-color .16s ease,background .16s ease,transform .16s ease}
.social-row a:hover{color:#fff;background:var(--brand);border-color:var(--brand);
  transform:translateY(-1px)}
.social-row .ico,.social-row img{width:17px;height:17px}
.social-row img{object-fit:contain}

/* the strip at the very top is dark and tight */
.social-top{margin:0 0 0 6px;gap:2px;padding-left:12px;border-left:1px solid rgba(255,255,255,.16)}
.social-top a{width:26px;height:26px;border:0;background:none;border-radius:7px;
  color:rgba(255,255,255,.66)}
.social-top a:hover{background:rgba(255,255,255,.12);color:#fff;transform:none}
.social-top .ico,.social-top img{width:14px;height:14px}

/* ---------- 5e. partners and portraits ---------- */
.partner-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px}
.partner{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px 22px;
  display:flex;flex-direction:column;align-items:flex-start;gap:12px;
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.partner:hover{border-color:var(--cyan);box-shadow:0 16px 36px -26px rgba(10,26,43,.5);
  transform:translateY(-2px)}
.partner b{font-family:var(--f-head);font-size:19px;color:var(--ink);letter-spacing:-.015em}
.partner span{font-size:14px;color:var(--muted);line-height:1.5}

/* one mark treatment, whether it is an uploaded logo or our own glyph */
.vendor-mark{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(160deg,#F2F7FC,#E8F1F9);border:1px solid var(--line);flex:0 0 auto}
.vendor-mark .ico{width:24px;height:24px;color:var(--brand)}
.vendor-mark.has-logo{background:#fff;padding:9px}
.vendor-mark.has-logo img{width:100%;height:100%;object-fit:contain}

/* a face when there is one, initials until then */
.mono-av.has-photo{padding:0;overflow:hidden;background:none;border:1px solid var(--line)}
.mono-av.has-photo img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- 5f. leadership ---------- */
.mono-av-lg{width:84px;height:84px;font-size:26px;border-radius:20px}
.bio-more{margin-top:14px;border-top:1px solid var(--line);padding-top:14px}
.bio-more summary{display:inline-flex;align-items:center;gap:7px;cursor:pointer;list-style:none;
  font-family:var(--f-head);font-weight:600;font-size:14.5px;color:var(--brand)}
.bio-more summary::-webkit-details-marker{display:none}
.bio-more summary:hover{color:var(--navy)}
.bio-more summary .ico{width:14px;height:14px;transition:transform .2s ease}
.bio-more[open] summary .ico{transform:rotate(90deg)}
.bio-more p{margin-top:12px}
.bio-focus{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.bio-focus h4{font-family:var(--f-head);font-size:12px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin-bottom:12px}

/* ---------- 6. stat cards ---------- */
.stats{border:0;background:transparent;grid-template-columns:repeat(4,1fr);gap:16px;border-radius:0;overflow:visible;align-items:stretch}
.stat{position:relative;display:flex;flex-direction:column;min-height:250px;padding:26px 24px 24px;border:1px solid var(--line);border-radius:0;background:linear-gradient(180deg,#FFFFFF,#F4F9FD);overflow:hidden;
  clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,0 100%);
  transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s,background .35s}
.stat::before{content:"";position:absolute;right:0;top:0;width:22px;height:22px;background:linear-gradient(225deg,#CBD9E7 0 50%,transparent 50%);transition:background .35s}
.stat::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--red),var(--brand) 45%,var(--cyan));opacity:0;transition:opacity .3s}
.stat:hover,.stat:focus-within{transform:translateY(-5px);box-shadow:0 26px 54px -28px rgba(10,37,64,.6);background:linear-gradient(180deg,#FFFFFF,#EAF3FB)}
.stat:hover::before,.stat:focus-within::before{background:linear-gradient(225deg,var(--cyan) 0 50%,transparent 50%)}
.stat:hover::after,.stat:focus-within::after{opacity:1}
.stat .si{width:42px;height:42px;border-radius:12px;background:var(--cyan-soft);color:var(--brand);display:grid;place-items:center;margin-bottom:16px;transition:background .3s,color .3s,transform .3s}
.stat:hover .si,.stat:focus-within .si{background:linear-gradient(150deg,var(--navy),var(--brand));color:#fff;transform:translateY(-2px)}
.stat .si .ico{width:21px;height:21px}
.stat .n{background:linear-gradient(135deg,var(--ink) 20%,var(--brand));-webkit-background-clip:text;background-clip:text;color:transparent}
.stat .n sup{-webkit-text-fill-color:var(--cyan);color:var(--cyan)}
.stat>p{margin-top:10px}
.stat .sm{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .45s cubic-bezier(.2,.7,.2,1),opacity .3s}
.stat:hover .sm,.stat:focus-within .sm{grid-template-rows:1fr;opacity:1}
.stat .sm>div{overflow:hidden;min-height:0}
.stat .sm p{margin-top:14px;padding-top:13px;border-top:1px solid var(--line);font-size:13.8px;line-height:1.55;color:var(--muted)}

/* ---------- 7. cards with photos ---------- */
.matrix-3{grid-template-columns:repeat(3,1fr)}
.pillar{padding:0;overflow:hidden}
.pillar-media{position:relative;height:178px;overflow:hidden;background:var(--soft)}
.pillar-media img{width:100%;height:100%;object-fit:cover;transform:scale(1.05);transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.pillar-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,48,92,.30) 0%,rgba(8,48,92,.06) 42%,rgba(255,255,255,.72) 82%,#fff 100%)}
.pillar:hover .pillar-media img{transform:scale(1)}
.pillar-body{padding:0 30px 30px;margin-top:-34px;position:relative;z-index:1}
.pillar .pi{box-shadow:0 12px 28px -14px rgba(10,26,43,.6)}
.pillar h3{margin-top:18px}

.ph-card{position:relative;overflow:hidden}
.ph-card .ph-img{position:absolute;inset:0;opacity:0;transition:opacity .45s}
.ph-card .ph-img img{width:100%;height:100%;object-fit:cover}
.ph-card .ph-img::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(11,61,115,.92),rgba(10,26,43,.9))}
.ph-card>*{position:relative;z-index:1}
.ph-card:hover .ph-img{opacity:1}
.ph-card:hover{border-color:transparent;box-shadow:var(--sh-lg)}
.ph-card:hover h4,.ph-card:hover h3{color:#fff}
.ph-card:hover p,.ph-card:hover small{color:rgba(255,255,255,.78)}
.ph-card:hover .ico{color:var(--cyan-2)}

/* ---------- 8. notched feature cards ---------- */
.fcards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:30px}
.fcard{position:relative;display:flex;flex-direction:column;min-height:272px;padding:21px 22px 44px;background:linear-gradient(180deg,#FFFFFF,#EFF5FB);color:var(--body);border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(10,26,43,.06),0 14px 30px -22px rgba(10,26,43,.35);
  clip-path:polygon(0 0,calc(100% - 24px) 0,100% 24px,100% 100%,0 100%);
  transition:background .4s cubic-bezier(.2,.7,.2,1),color .3s,transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s}
.fcard::before{content:"";position:absolute;right:0;top:0;width:24px;height:24px;background:linear-gradient(225deg,#CBD9E7 0 50%,transparent 50%);transition:background .4s}
.fcard:hover,.fcard:focus-within{border-color:transparent;background:linear-gradient(160deg,#0B3D73,#0A2540);color:rgba(255,255,255,.78);transform:translateY(-5px);box-shadow:0 28px 60px -30px rgba(10,37,64,.7)}
.fcard:hover::before,.fcard:focus-within::before{background:linear-gradient(225deg,var(--cyan) 0 50%,transparent 50%)}
.fc-img{position:absolute;inset:0;z-index:0;opacity:0;transition:opacity .5s cubic-bezier(.2,.7,.2,1)}
.fc-img img{width:100%;height:100%;object-fit:cover}
.fc-img::after{content:"";position:absolute;inset:0;background:linear-gradient(155deg,rgba(11,61,115,.72),rgba(8,26,45,.88))}
.fcard:hover .fc-img,.fcard:focus-within .fc-img{opacity:1}
.fc-top,.fc-body,.fc-hint{position:relative;z-index:1}
.fc-top{display:flex;align-items:center;gap:11px}
.fc-ico{width:34px;height:34px;border-radius:10px;background:var(--cyan-soft);color:var(--brand);display:grid;place-items:center;flex-shrink:0;transition:background .35s,color .35s}
.fcard:hover .fc-ico,.fcard:focus-within .fc-ico{background:rgba(64,184,232,.16);color:var(--cyan-2)}
.fc-ico .ico{width:18px;height:18px}
.fc-tag{font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);transition:color .3s}
.fcard:hover .fc-tag,.fcard:focus-within .fc-tag{color:var(--cyan-2)}
.fc-body{margin-top:auto}
.fcard h3{font-size:19.5px;line-height:1.25;transition:color .3s}
.fcard:hover h3,.fcard:focus-within h3{color:#fff}
.fcard p{margin-top:8px;font-size:14.8px;line-height:1.55}
.fc-more{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .45s cubic-bezier(.2,.7,.2,1),opacity .3s}
.fcard:hover .fc-more,.fcard:focus-within .fc-more{grid-template-rows:1fr;opacity:1}
.fc-more>div{overflow:hidden;min-height:0}
.fc-more p{margin-top:14px;padding-top:13px;border-top:1px solid rgba(255,255,255,.18);font-size:13.6px;line-height:1.55;color:rgba(255,255,255,.74)}
.fc-hint{position:absolute;right:20px;bottom:16px;display:inline-flex;align-items:center;gap:7px;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);transition:opacity .3s}
.fcard:hover .fc-hint,.fcard:focus-within .fc-hint{opacity:0}

/* ---------- 9. comparison and diagrams ---------- */
.compare{position:relative;align-items:stretch}
.cmp{position:relative;display:flex;flex-direction:column;overflow:hidden;padding:28px}
.cmp>*{position:relative;z-index:1}
.cmp h3{font-size:22px}
.cmp-bad{background:linear-gradient(180deg,#FFFFFF,#F5F8FB)}
.cmp-good{box-shadow:0 30px 70px -30px rgba(11,61,115,.7)}
.cmp-good::before{content:"";position:absolute;inset:0;z-index:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:radial-gradient(ellipse 70% 70% at 80% 0%,#000,transparent 70%);mask-image:radial-gradient(ellipse 70% 70% at 80% 0%,#000,transparent 70%)}
.cmp-tag{align-self:flex-start;display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:100px;font-family:var(--f-head);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:16px}
.cmp-bad .cmp-tag{background:#EEF2F6;color:#7A8CA0}
.cmp-good .cmp-tag{background:rgba(64,184,232,.18);color:var(--cyan-2)}
.cmp .dia{width:100%;max-width:430px;height:auto;display:block;margin:14px auto 2px}
.cmp ul{margin-top:auto;padding-top:18px;gap:11px}
.cmp li{font-size:15px}
.vs{position:absolute;left:50%;top:50%;z-index:3;transform:translate(-50%,-50%);width:54px;height:54px;border-radius:50%;
  display:grid;place-items:center;background:#fff;border:1px solid var(--line);box-shadow:0 12px 30px -14px rgba(10,26,43,.45);
  font-family:var(--f-head);font-weight:700;font-size:13px;letter-spacing:.06em;color:var(--muted)}
.dia text{font-family:var(--f-head);font-size:12px;font-weight:600;text-anchor:middle;dominant-baseline:middle}
.dia .node{transform-box:fill-box;transform-origin:center;animation:pop 2.8s ease-in-out infinite}
@keyframes pop{0%,100%{opacity:.5;transform:scale(.85)}50%{opacity:1;transform:scale(1.2)}}
@keyframes flow{to{stroke-dashoffset:-44}}
.dia-bad .lines path{fill:none;stroke:#BBC8D7;stroke-width:1.5;stroke-dasharray:5 6;animation:flow 3.6s linear infinite}
.dia-bad .chip{fill:#fff;stroke:#D5DFEA}
.dia-bad .chip-t{fill:var(--muted)}
.dia-bad .org{fill:#EDF2F7;stroke:#C9D6E3}
.dia-bad .org-t{fill:var(--ink)}
.dia-bad .warn{fill:#E9A13B}
.dia-good .lines path{fill:none;stroke:rgba(140,215,245,.8);stroke-width:1.7;stroke-dasharray:4 7;animation:flow 2.8s linear infinite}
.dia-good .trunk{fill:none;stroke:var(--cyan);stroke-width:2.6;stroke-linecap:round}
.dia-good .chip{fill:rgba(255,255,255,.1);stroke:rgba(255,255,255,.3)}
.dia-good .chip-t{fill:rgba(255,255,255,.9)}
.dia-good .hub{fill:rgba(64,184,232,.2);stroke:var(--cyan);stroke-width:1.6}
.dia-good .hub-t{fill:#fff;font-size:13.5px}
.dia-good .org{fill:rgba(255,255,255,.1);stroke:rgba(255,255,255,.34)}
.dia-good .org-t{fill:#fff}
.dia-good .node{fill:var(--cyan-2)}
.cmp-good:hover .dia-good .lines path,.cmp-good:hover .dia-good .node{animation-duration:1.4s}

/* ---------- 10. flow ---------- */
.flow{grid-auto-flow:column;grid-auto-columns:1fr;grid-template-columns:none}
.step{padding:0 14px}
.step .sn{background:#fff;border-width:2px;box-shadow:0 10px 24px -14px rgba(16,96,168,.8)}
.sec-deep .step .sn{background:#0B2A4A;border-color:var(--cyan);color:var(--cyan-2)}
.sec-deep .step p{color:rgba(255,255,255,.66)}
.step::after{content:"";position:absolute;left:50%;top:29px;width:9px;height:9px;border-radius:50%;background:var(--cyan);transform:translate(-50%,-50%) scale(0);transition:transform .3s}
.step:hover::after{transform:translate(-50%,-50%) scale(1.6);opacity:.35}

/* ---------- 11. page hero ---------- */
.page-hero{background:linear-gradient(180deg,#F7FAFD,#EFF5FA);padding:66px 0 70px}
.page-hero.dark{background:linear-gradient(150deg,#08305C,#0B3D73 45%,#1060A8);border-bottom:0;color:rgba(255,255,255,.78)}
.page-hero.dark h1,.page-hero.dark h2{color:#fff}
.page-hero.dark .lead{color:rgba(255,255,255,.8)}
.page-hero.dark .crumbs{color:rgba(255,255,255,.58)}
.page-hero.dark .crumbs a:hover{color:#fff}
.page-hero.dark::before{background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px)}
.ph-shot{position:relative;border-radius:20px;overflow:hidden;box-shadow:var(--sh-lg);aspect-ratio:16/10}
.ph-shot img{width:100%;height:100%;object-fit:cover}
.ph-shot::after{content:"";position:absolute;inset:0;background:linear-gradient(140deg,rgba(11,61,115,.42),rgba(64,184,232,.12) 55%,transparent)}
.ph-badge{position:absolute;left:16px;bottom:16px;z-index:2;display:inline-flex;align-items:center;gap:9px;height:36px;padding:0 14px;border-radius:100px;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);font-family:var(--f-head);font-weight:600;font-size:13.5px;color:var(--ink);box-shadow:var(--sh)}
.ph-badge .ico{width:16px;height:16px;color:var(--brand)}
.facts{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.18)}
.page-hero.dark .fact{background:rgba(255,255,255,.07)}
.page-hero.dark .fact small{color:var(--cyan-2)}
.page-hero.dark .fact b{color:#fff}

/* ---------- 12. CTA ---------- */
.cta-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;padding:74px 56px 40px;max-width:1180px;margin:0 auto;text-align:left}
.cta-grid .lead{margin:18px 0 0;max-width:520px}
.cta-grid .btns{justify-content:flex-start;margin-top:30px}
.cta-grid .btns .btn{height:52px;padding:0 22px;font-size:15.5px}
.cta-cards{display:grid;gap:12px}
.cta-card{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:16px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);transition:background .25s,transform .25s}
.cta-card:hover{background:rgba(255,255,255,.14);transform:translateX(4px)}
.cta-card .ci{width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.12);display:grid;place-items:center;flex-shrink:0}
.cta-card .ico{width:20px;height:20px;color:var(--cyan-2)}
.cta-card b{display:block;font-family:var(--f-head);color:#fff;font-size:15.5px}
.cta-card span{display:block;font-size:13.2px;color:rgba(255,255,255,.62);margin-top:2px}

/* ---------- 13. misc polish ---------- */
.note{backdrop-filter:blur(6px);background:rgba(255,255,255,.96)}
.globe-stage{aspect-ratio:auto;height:clamp(460px,46vw,640px)}
#globe{touch-action:pan-y}
.sector-note{display:flex;align-items:center;gap:10px;margin-top:18px;font-size:14px;color:var(--muted)}
.sector-note .ico{width:16px;height:16px;color:var(--brand)}
.panel{box-shadow:var(--sh-lg)}
.panel-media{position:relative}
.course-panel{box-shadow:var(--sh)}
.course{transition:background .25s}
.course:hover{background:var(--cyan-soft)}
.person{background:linear-gradient(180deg,#FFFFFF,#FBFDFF)}
.mono-av{box-shadow:0 14px 30px -16px rgba(11,61,115,.9)}
.feature,.perk,.program,.office,.value{background:linear-gradient(180deg,#FFFFFF,#FBFDFF)}
.foot{background:linear-gradient(180deg,#FFFFFF,#F5F9FC)}


/* ---------- 13b. insights, listing and article ---------- */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.post-card{display:flex;flex-direction:column;background:linear-gradient(180deg,#FFFFFF,#FBFDFF);
  border:1px solid var(--line);border-radius:20px;overflow:hidden;
  transition:transform .25s,box-shadow .25s,border-color .25s}
.post-card:hover{transform:translateY(-4px);box-shadow:var(--sh);border-color:var(--cyan-line)}
.post-img{display:block;height:190px;overflow:hidden;background:var(--soft)}
.post-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.post-card:hover .post-img img{transform:scale(1.04)}
.post-img-blank{background:linear-gradient(150deg,#0B3D73,#1060A8);position:relative}
.post-img-blank::after{content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.18) 1px,transparent 1px);background-size:22px 22px}
.post-body{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1}
.post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:12.5px;color:var(--muted)}
.post-cat{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:100px;
  background:var(--cyan-soft);color:var(--brand);font-family:var(--f-head);font-weight:700;font-size:11.5px;
  letter-spacing:.05em;text-transform:uppercase}
.post-card h3{margin-top:12px;font-size:20px;line-height:1.28}
.post-card h3 a{color:var(--ink)}
.post-card:hover h3 a{color:var(--brand)}
.post-card p{margin-top:9px;font-size:15px;line-height:1.6;color:var(--muted)}
.post-card .link{margin-top:auto;padding-top:16px}

.post-page{padding-top:56px}
.post-head{max-width:760px}
.post-cover{margin:34px 0 8px;border-radius:20px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--sh)}
.post-cover img{width:100%;height:auto;display:block}
.prose{max-width:720px;margin:34px 0 0;font-size:17.5px;line-height:1.75;color:var(--body)}
.prose > *:first-child{margin-top:0}
.prose p{margin:0 0 20px}
.prose h2{margin:38px 0 14px;font-size:clamp(23px,2.4vw,30px);line-height:1.22}
.prose h3{margin:30px 0 10px;font-size:20px}
.prose ul,.prose ol{margin:0 0 20px;padding-left:22px;list-style:disc}
.prose ol{list-style:decimal}
.prose li{margin-bottom:9px}
.prose a{color:var(--brand);text-decoration:underline;text-underline-offset:3px}
.prose blockquote{margin:26px 0;padding:18px 24px;border-left:3px solid var(--cyan);background:var(--soft);
  border-radius:0 14px 14px 0;font-family:var(--f-head);font-size:19px;line-height:1.45;color:var(--ink)}
.prose img{border-radius:14px;margin:24px 0}
.prose code{background:var(--soft);border:1px solid var(--line);border-radius:6px;padding:2px 6px;
  font-family:var(--f-mono);font-size:.9em}
.post-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;
  max-width:720px;margin-top:40px;padding-top:26px;border-top:1px solid var(--line)}

/* =========================================================================
   14. RESPONSIVE LAYER. Nothing below this point except media queries.
   ========================================================================= */
/* ---------- 5d1. heading size, chosen per page in the admin ---------- */
/* The default .h1 clamps between 38 and 60px. A long heading at that size
   dominates the page, so each page can drop a step or two. */
.h1.h1-medium{font-size:clamp(32px,3.7vw,48px)}
.h1.h1-small{font-size:clamp(28px,3vw,38px)}
.h1.h1-xsmall{font-size:clamp(24px,2.4vw,31px);letter-spacing:-.025em}

/* ---------- 5d2. the header must never wrap ---------- */
/* Renaming Services to Products and Services, and adding Case Studies, made
   the menu wider than the breakpoints were written for. Measured: at full size
   the header needs about 1275px and the container caps at 1288, so it wrapped
   below 1300. Tightened it needs about 1020, so it wrapped below 1040. Both
   tiers below are set from those numbers. */
.nav>a,.drop>button{white-space:nowrap}
.head-right .btn{white-space:nowrap}

/* ---------- 5e. case study rail in the home hero ---------- */
/* One line at a time. It sits under the buttons rather than above the
   headline, so the home page leads with what the company does. */
/* Centred under the buttons, and stacked: the line on top, the dots and the
   all link beneath it. Laid out as one row it sat hard left while the dots sat
   hard right, which fought the centred hero above it. */
.cs-rail{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:30px}
.cs-track{display:flex;justify-content:center;max-width:100%;min-width:0}
.cs-item{display:none;align-items:center;gap:10px;min-width:0;max-width:100%;
  height:40px;padding:0 6px 0 16px;border-radius:100px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
  color:#fff;font-size:14px;transition:background .2s}
.cs-item.is-on{display:inline-flex}
.cs-meta{display:flex;align-items:center;justify-content:center;gap:16px}
.cs-item:hover{background:rgba(255,255,255,.2)}
.cs-tag{flex:none;font-family:var(--f-head);font-weight:600;font-size:11px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--cyan)}
.cs-txt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-item .pi{flex:none;display:grid;place-items:center;width:28px;height:28px;
  border-radius:50%;background:#fff;color:var(--navy)}
.cs-item .pi .ico{width:14px;height:14px}
.cs-dots{display:flex;gap:6px;flex:none}
.cs-dot{width:7px;height:7px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.3);transition:background .2s,transform .2s}
.cs-dot.is-on{background:var(--cyan);transform:scale(1.35)}
.cs-dot:hover{background:rgba(255,255,255,.6)}
.cs-all{flex:none;display:inline-flex;align-items:center;gap:6px;
  font-size:13.5px;color:rgba(255,255,255,.75);white-space:nowrap}
.cs-all:hover{color:#fff}
.cs-all .ico{width:13px;height:13px}

/* ---------- 5g. product cards ---------- */
.prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.prod{position:relative;border:1px solid var(--line);border-radius:20px;background:#fff;
  padding:28px;transition:border-color .25s,box-shadow .25s,transform .25s}
.prod:hover{border-color:var(--cyan-line);box-shadow:var(--sh);transform:translateY(-3px)}
.prod .ii{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;
  background:linear-gradient(150deg,var(--navy),var(--brand));color:#fff}
.prod .ii .ico,.prod .ii img{width:24px;height:24px}
.prod .abbr{display:inline-block;margin-top:16px;font-family:var(--f-head);font-weight:600;
  font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--brand)}
.prod h3{margin:6px 0 0;font-size:18.5px;line-height:1.3}
.prod p{margin:10px 0 0;color:var(--muted);font-size:15px}
.prod .ticks{margin-top:16px}

/* ---------- 5f. the case studies page ---------- */
.cs-grid{display:grid;gap:18px}
.cs-card{border:1px solid var(--line);border-radius:20px;background:#fff;padding:26px 28px;
  transition:border-color .25s,box-shadow .25s,transform .25s;scroll-margin-top:110px}
.cs-card:hover{border-color:var(--cyan-line);box-shadow:var(--sh);transform:translateY(-2px)}
.cs-card .client{font-family:var(--f-head);font-weight:600;font-size:12px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--brand)}
.cs-card h3{margin:6px 0 0;font-size:21px}
.cs-card .scope{margin:10px 0 0;color:var(--muted)}
.cs-card dl{display:grid;gap:10px;margin:18px 0 0}
.cs-card dt{font-family:var(--f-head);font-weight:600;font-size:12.5px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.cs-card dd{margin:3px 0 0}
.cs-card .chips{padding-top:16px}

@media (max-width:1300px){
  /* no room for the full size menu and the button together */
  .nav>a,.drop>button{padding:0 10px;font-size:15px}
  .head-right .btn{display:none}
}

@media (max-width:1180px){
  .mega{width:640px;grid-template-columns:1fr 1fr}
  .mega-feat{display:none}
  .mega-foot{grid-column:1/-1}
  .proof{grid-template-columns:1fr}
  .proof-side{border-left:0;border-top:1px solid rgba(255,255,255,.09)}
  .proof::after{right:-220px;bottom:-280px}
  .cta-grid{grid-template-columns:1fr;gap:30px;padding:56px 32px 36px}
  .vs{position:relative;left:auto;top:auto;transform:none;margin:-6px auto}
}

@media (max-width:1040px){
  /* even tightened the menu no longer fits, so hand over to the burger.
     head-right needs pushing right itself: the nav was what held the space,
     and margin-left:auto on the burger only moves it inside its own wrapper. */
  .nav{display:none}
  .head-right{margin-left:auto}
  .head-right .btn{display:none}
  .burger{display:inline-flex}
}

@media (max-width:980px){
  .prod-grid{grid-template-columns:repeat(2,1fr)}
  /* header */
  .head-row{height:64px}
  .head.stuck .head-row{height:60px}
  .brand img{height:36px}
  .head.stuck .brand img{height:34px}
  .head-right{margin-left:auto}
  .burger{width:44px;height:44px;border-radius:12px}
  .prod-grid{grid-template-columns:1fr}
  .prod{padding:22px 20px}

  /* the case study rail stays centred and stacked, the line may take two rows */
  .cs-rail{margin-top:24px;gap:12px}
  .cs-track{width:100%}
  .cs-item{height:auto;min-height:44px;padding:9px 8px 9px 16px;text-align:left}
  .cs-txt{white-space:normal;overflow:visible;text-overflow:clip;
          display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
          overflow:hidden;line-height:1.3}
  .cs-meta{gap:14px}
  .cs-card{padding:22px 20px}

  /* Utility strip. It was written as two equal halves, then the social row was
     added as a third child, so the icons dropped onto a line of their own. The
     phone and the email still share the space; the icons take only what they
     need and never wrap. */
  .utility .wrap{height:auto;min-height:44px;padding:0;gap:0;justify-content:stretch}
  .utility-msg{display:none}
  .utility-links{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;
                 gap:0;width:100%;align-items:stretch}
  .utility a{justify-content:center;min-height:44px;padding:0 8px;font-size:13.5px;
             min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .utility-links>a+a{border-left:1px solid rgba(255,255,255,.14)}
  .utility a:active{background:rgba(255,255,255,.1)}
  /* the icons sit in the third cell, on one line, and stay tappable */
  .utility .social-top{flex-wrap:nowrap;margin:0;padding:0 6px 0 8px;
                       border-left:1px solid rgba(255,255,255,.14);align-items:center}
  .utility .social-top a{min-height:38px;width:34px;padding:0;border:0}
  /* buttons never crop their label */
  .btn{white-space:normal;text-align:center;line-height:1.25;height:auto;min-height:50px;padding:12px 20px}
  .btn-lg{min-height:54px}
  /* section rhythm */
  .sec{padding:56px 0}
  .sec-sm{padding:36px 0}
  .sec-head{margin-bottom:28px;text-align:left;margin-left:0}
  .sec-head.center{text-align:left;justify-items:start}
  .sec-head .lead{max-width:none}
  /* hero block */
  .block-in{padding:48px 20px 76px}
  .pill{height:auto;border-radius:14px;padding:11px 8px 11px 14px;text-align:left;gap:12px;font-size:13.5px;line-height:1.35;align-items:center}
  .pill .pi{width:28px;height:28px}
  .block .btns{flex-direction:column;align-items:stretch}
  .block .btns .btn{width:100%}
  .hero-strip{padding:0 20px 34px;gap:10px 18px;font-size:13.5px}
  /* globe */
  .globe-stage{height:auto}
  .note{box-shadow:var(--sh-sm)}
  /* logo wall */
  .wall-row{grid-template-columns:1fr 1fr}
  .vendor:nth-child(3){border-left:0}
  .vendor:nth-child(n+3){border-top:1px solid var(--line)}
  /* cards */
  .matrix-3{grid-template-columns:1fr}
  .post-grid{grid-template-columns:1fr 1fr;gap:18px}
  .post-page{padding-top:40px}
  .fcards{grid-template-columns:1fr;gap:14px}
  .fcard{min-height:0}
  .fc-hint{display:none}
  .fc-more,.stat .sm{grid-template-rows:1fr;opacity:1}
  .fc-more p{border-top-color:var(--line);color:var(--muted)}
  .fc-tag,.note .tag,.course small,.course-card small{font-size:12px}
  .stats{grid-template-columns:1fr 1fr}
  .stat{min-height:0;padding:22px 20px}
  .stat::after{opacity:1}
  .stat .sm p{margin-top:12px;padding-top:11px}
  .pillar-body{padding:0 24px 24px}
  /* flow */
  .flow{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:1fr}
  .step::after{display:none}
  /* course panel */
  .course-foot{flex-direction:column;align-items:stretch;gap:14px}
  .course-foot .link{justify-content:center;min-height:50px;border:1px solid var(--line-2);border-radius:12px;padding:0 18px}
  /* CTA */
  .cta-card{min-height:62px}
  .cta-card .ci{background:rgba(8,32,60,.35)}
  .cta-card .ico{color:#fff}
  /* page hero */
  .page-hero{padding:44px 0 48px}
  /* footer: two columns of links keeps it short */
  .foot{padding-top:48px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:28px 20px}
  .foot-brand{grid-column:1/-1}
  .foot-grid>div:last-child{grid-column:1/-1}
  .foot ul{gap:0;margin-top:8px}
  .foot li a{display:flex;align-items:center;min-height:42px}
  .foot-contact li{padding:6px 0}
  .foot-contact a{display:inline-flex;align-items:center;min-height:34px}
  .foot-contact span>a{min-height:32px}
  .foot-bottom{margin-top:28px;padding:18px 0 24px}
  /* forms: iOS zooms in on anything under 16px */
  .field input,.field select,.field textarea{font-size:16px}
  /* touch targets */
  .link{min-height:44px}
  .crumbs{gap:10px}
  .crumbs a{display:inline-flex;align-items:center;min-height:38px}
  .office .ol a,.office .ol div{min-height:44px}
  .hours-card li{padding:14px 0}
  .mnav .sub a{min-height:46px}
}

@media (max-width:640px){
  .block-in{padding:40px 16px 68px}
  .hero-strip{padding:0 16px 30px}
  .sec{padding:48px 0}
  .sec-sm{padding:30px 0}
  .wall-row{grid-template-columns:1fr}
  .wall-head{flex-direction:column;align-items:flex-start;gap:12px}
  .wall-head .link{white-space:nowrap}
  .vendor{border-left:0;border-top:1px solid var(--line);flex-direction:row;justify-content:flex-start;text-align:left;padding:16px 18px}
  .vendor:first-child{border-top:0}
  .vendor span{text-align:left}
  .post-grid{grid-template-columns:1fr}
  .post-img{height:170px}
  .prose{font-size:16.5px}
  .stats{grid-template-columns:1fr}
  .proof-main{padding:28px 22px}
  .proof-side{padding:20px 22px 24px}
  .proof-main blockquote{padding-left:18px}
  .cmp{padding:22px}
  .cmp .dia{margin:12px auto 0}
  .cta-grid{padding:40px 20px 24px;gap:22px}
  .cta-grid .btns{flex-direction:column;align-items:stretch}
  .cta-grid .btns .btn{width:100%}
  /* the bottom glow must not wash out the cards sitting on it */
  .glow{bottom:-380px;opacity:.6}
  .outcome{background:rgba(6,28,54,.32);border-color:rgba(255,255,255,.2)}
  .foot-grid{gap:24px 16px}
}

/* any touch device, including tablets above the width breakpoints */
@media (pointer:coarse){
  .field input,.field select,.field textarea{font-size:16px}
  .utility a{min-height:44px}
  .foot ul{gap:0}
  .foot li a{display:flex;align-items:center;min-height:44px}
  .foot-contact li{padding:6px 0}
  .foot-contact a{display:inline-flex;align-items:center;min-height:38px}
  .link{min-height:44px}
  .crumbs a{display:inline-flex;align-items:center;min-height:38px}
  .office .ol a,.office .ol div{min-height:44px}
  .hours-card li{padding:13px 0}
  .nav>a,.drop>button{height:44px}
  .subnav a{height:44px}
  .tab{height:46px}
  /* no hover on touch, so show the detail and keep the accent on */
  .fcard .fc-more,.stat .sm{grid-template-rows:1fr;opacity:1}
  .stat::after{opacity:1}
  .fc-hint{display:none}
}

@media (prefers-reduced-motion:reduce){
  .dia .lines path{animation:none}
  .dia .node{animation:none;opacity:.9}
}