/* Shodhyantri Engineering Services — public site
   Palette taken from the company logo: deep teal-blue and orange. */
:root{
  --blue:#00587E;      --blue-d:#003A56;   --blue-l:#1B7FA8;
  --navy:#0A2644;      --navy-d:#061A30;
  --orange:#F39200;    --orange-d:#CE7B00;
  --cyan:#56C8E0;
  --ink:#12212E;       --body:#41576A;     --mut:#7A8C9B;
  --line:#DCE6ED;      --line-s:#EDF3F7;
  --paper:#FFFFFF;     --wash:#F5F9FB;     --wash2:#EAF2F7;
  --good:#1B7F53;      --warn:#B4690E;     --crit:#B23028;
  --r:14px;            --r-s:8px;
  --sh:0 1px 2px rgba(10,38,68,.05), 0 12px 32px -18px rgba(10,38,68,.30);
  --sh-l:0 2px 6px rgba(10,38,68,.06), 0 28px 60px -30px rgba(10,38,68,.40);
  --max:1200px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--body);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:16.5px; line-height:1.72; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:var(--blue); text-decoration:none}
a:hover{color:var(--orange)}
h1,h2,h3,h4{font-family:"Manrope","Inter",sans-serif; color:var(--ink);
  line-height:1.14; margin:0 0 .5em; letter-spacing:-.02em; text-wrap:balance}
h1{font-size:clamp(2.1rem,4.6vw,3.5rem); font-weight:800}
h2{font-size:clamp(1.65rem,3.1vw,2.5rem); font-weight:800}
h3{font-size:clamp(1.15rem,1.7vw,1.42rem); font-weight:700}
p{margin:0 0 1.1em}
.wrap{max-width:var(--max); margin:0 auto; padding:0 24px}
.narrow{max-width:820px}
section{padding:88px 0}
.tight{padding:56px 0}
:focus-visible{outline:3px solid var(--orange); outline-offset:3px; border-radius:4px}

/* ---------------- eyebrow / lede ---------------- */
.eyebrow{font-size:.74rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--blue); margin:0 0 .8em; display:block}
.eyebrow.on-dark{color:var(--cyan)}
.lede{font-size:1.16rem; color:var(--body); max-width:68ch}
.muted{color:var(--mut)}
.center{text-align:center}
.center .lede{margin-left:auto; margin-right:auto}

/* ---------------- buttons ---------------- */
.btn{display:inline-flex; align-items:center; gap:.6em; border:0; cursor:pointer;
  font:inherit; font-weight:700; font-size:.98rem; padding:.86em 1.6em; border-radius:999px;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), background .18s;
  text-decoration:none}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--orange); color:#241800; box-shadow:0 8px 22px -10px rgba(243,146,0,.9)}
.btn-primary:hover{background:var(--orange-d); color:#241800}
.btn-dark{background:var(--navy); color:#fff}
.btn-dark:hover{background:var(--blue); color:#fff}
.btn-ghost{background:transparent; color:#fff; box-shadow:inset 0 0 0 2px rgba(255,255,255,.42)}
.btn-ghost:hover{background:rgba(255,255,255,.12); color:#fff}
.btn-outline{background:transparent; color:var(--blue); box-shadow:inset 0 0 0 2px var(--line)}
.btn-outline:hover{box-shadow:inset 0 0 0 2px var(--blue); color:var(--blue)}
.btn-row{display:flex; gap:14px; flex-wrap:wrap}

/* ---------------- header ---------------- */
.topbar{background:var(--navy); color:#B9CEDD; font-size:.82rem}
.topbar .wrap{display:flex; gap:20px; align-items:center; justify-content:space-between;
  padding-top:9px; padding-bottom:9px; flex-wrap:wrap}
.topbar a{color:#D6E6F0}
.topbar a:hover{color:var(--orange)}
.topbar .dot{color:#3D5A72}

header.site{position:sticky; top:0; z-index:60; background:rgba(255,255,255,.92);
  backdrop-filter:saturate(150%) blur(12px); border-bottom:1px solid var(--line);
  transition:box-shadow .25s}
header.site.scrolled{box-shadow:0 6px 26px -18px rgba(10,38,68,.55)}
header.site .wrap{display:flex; align-items:center; gap:26px; padding-top:12px; padding-bottom:12px}
.brand{display:flex; align-items:center; gap:12px; flex:none}
.brand img{height:46px; width:auto}
.brand > span{display:block}
.brand .n{display:block; font-family:"Manrope",sans-serif; font-weight:800; font-size:1.28rem;
  color:var(--blue); letter-spacing:.4px; line-height:1}
.brand .t{display:block; font-size:.6rem; font-weight:700; letter-spacing:.22em;
  color:var(--orange); text-transform:uppercase; margin-top:3px}
nav.main{margin-left:auto; display:flex; align-items:center; gap:4px}
nav.main a{color:var(--ink); font-weight:600; font-size:.92rem; padding:.55em .8em;
  border-radius:8px; position:relative; white-space:nowrap}
nav.main a:hover{background:var(--wash); color:var(--blue)}
nav.main a.active{color:var(--blue)}
nav.main a.active::after{content:""; position:absolute; left:.8em; right:.8em; bottom:.24em;
  height:2px; background:var(--orange); border-radius:2px}
.has-sub{position:relative}
.sub{position:absolute; top:calc(100% + 8px); left:0; min-width:290px; background:#fff;
  border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh-l); padding:8px;
  opacity:0; visibility:hidden; transform:translateY(-8px); transition:.2s var(--ease)}
.has-sub:hover .sub,.has-sub:focus-within .sub{opacity:1; visibility:visible; transform:none}
.sub a{display:block; padding:.55em .8em; font-weight:600; font-size:.9rem; border-radius:8px}
.sub a span{display:block; font-weight:500; font-size:.78rem; color:var(--mut)}
.navtoggle{display:none; margin-left:auto; background:none; border:0; cursor:pointer; padding:8px}
.navtoggle span{display:block; width:26px; height:2.5px; background:var(--ink); border-radius:2px;
  margin:5px 0; transition:.25s var(--ease)}
.navtoggle.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.navtoggle.open span:nth-child(2){opacity:0}
.navtoggle.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

@media (max-width:1040px){
  nav.main{position:fixed; inset:auto 0 0 0; top:0; background:#fff; flex-direction:column;
    align-items:stretch; gap:0; padding:96px 24px 40px; transform:translateX(100%);
    transition:transform .32s var(--ease); overflow-y:auto; height:100dvh; z-index:59}
  nav.main.open{transform:none}
  nav.main a{padding:.9em .4em; font-size:1.05rem; border-bottom:1px solid var(--line-s)}
  .sub{position:static; opacity:1; visibility:visible; transform:none; border:0; box-shadow:none;
    padding:0 0 0 14px; min-width:0}
  .navtoggle{display:block; z-index:61; position:relative}
  .brand .t{display:none}
}

/* ---------------- hero ---------------- */
.hero{position:relative; color:#fff; overflow:hidden; background:var(--navy-d)}
.hero .bg{position:absolute; inset:0; background:url("../img/hero.jpg") center/cover no-repeat;
  transform:scale(1.06); animation:heroDrift 26s ease-in-out infinite alternate}
.hero::after{content:""; position:absolute; inset:0;
  background:linear-gradient(105deg, rgba(6,26,48,.94) 0%, rgba(6,26,48,.80) 42%, rgba(0,88,126,.42) 100%)}
@keyframes heroDrift{from{transform:scale(1.06) translate3d(0,0,0)}
  to{transform:scale(1.14) translate3d(-24px,-16px,0)}}
.hero .wrap{position:relative; z-index:2; padding-top:112px; padding-bottom:112px}
.hero h1{color:#fff; max-width:17ch}
.hero h1 em{font-style:normal; color:var(--orange); display:block}
.hero .lede{color:#C6DBE8; font-size:1.2rem; max-width:56ch}
.hero .btn-row{margin-top:32px}
.hero-stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:2px;
  margin-top:66px; background:rgba(255,255,255,.14); border-radius:var(--r); overflow:hidden}
.hero-stats div{background:rgba(6,26,48,.62); padding:22px 20px; backdrop-filter:blur(3px)}
.hero-stats b{display:block; font-family:"Manrope",sans-serif; font-size:2rem; font-weight:800;
  color:#fff; line-height:1}
.hero-stats span{font-size:.82rem; color:#9EBACD; letter-spacing:.04em}

/* ---------------- page banner ---------------- */
.pagehead{position:relative; color:#fff; background:var(--navy-d); overflow:hidden}
.pagehead img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.9}
.pagehead::after{content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(6,26,48,.92), rgba(6,26,48,.55))}
.pagehead .wrap{position:relative; z-index:2; padding:74px 24px 68px}
.pagehead h1{color:#fff; margin-bottom:.3em}
.pagehead p{color:#B9D2E0; max-width:62ch; margin:0}
.crumb{font-size:.8rem; color:#8FB0C6; margin-bottom:14px}
.crumb a{color:#B9D2E0}

/* ---------------- cards & grids ---------------- */
.grid{display:grid; gap:26px}
.g2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.card{background:#fff; border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  box-shadow:var(--sh); transition:transform .28s var(--ease), box-shadow .28s var(--ease),
  border-color .28s}
.card:hover{transform:translateY(-6px); box-shadow:var(--sh-l); border-color:#C4D8E4}
.card .body{padding:26px}
.card h3{margin-bottom:.4em}
.card p{font-size:.95rem; margin-bottom:.9em}
.card .more{font-weight:700; font-size:.9rem; display:inline-flex; align-items:center; gap:.4em}
.card .more::after{content:"→"; transition:transform .2s var(--ease)}
.card:hover .more::after{transform:translateX(5px)}
.card img{aspect-ratio:900/620; object-fit:cover}

.tile{background:var(--wash); border:1px solid var(--line); border-radius:var(--r);
  padding:26px; transition:.25s var(--ease)}
.tile:hover{background:#fff; border-color:var(--blue-l); transform:translateY(-4px)}
.tile .n{font-family:"Manrope",sans-serif; font-weight:800; font-size:1.6rem; color:var(--blue);
  line-height:1; margin-bottom:.35em}
.tile h3{font-size:1.06rem}
.tile p{font-size:.92rem; margin:0}

.chips{display:flex; flex-wrap:wrap; gap:10px}
.chip{background:var(--wash2); color:var(--blue-d); border-radius:999px; padding:.5em 1.05em;
  font-size:.87rem; font-weight:600; border:1px solid #CFE1EC; transition:.2s}
.chip:hover{background:var(--blue); color:#fff; border-color:var(--blue)}

.ticks{list-style:none; padding:0; margin:0; display:grid; gap:12px}
.ticks li{position:relative; padding-left:34px; font-size:.99rem}
.ticks li::before{content:""; position:absolute; left:0; top:.42em; width:20px; height:20px;
  border-radius:50%; background:var(--blue)}
.ticks li::after{content:""; position:absolute; left:6px; top:.78em; width:8px; height:4px;
  border-left:2.5px solid #fff; border-bottom:2.5px solid #fff; transform:rotate(-45deg)}
.ticks.orange li::before{background:var(--orange)}

.split{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center}
@media (max-width:900px){.split{grid-template-columns:1fr; gap:34px}}

.band{background:var(--wash)}
.band-dark{background:var(--navy); color:#C8DAE6}
.band-dark h2,.band-dark h3{color:#fff}
.band-dark .lede{color:#AFC8D8}
.band-blue{background:linear-gradient(135deg,var(--blue-d),var(--blue)); color:#DCEDF5}
.band-blue h2,.band-blue h3{color:#fff}

.stat-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:28px;
  text-align:center}
.stat-row b{display:block; font-family:"Manrope",sans-serif; font-size:2.6rem; font-weight:800;
  color:var(--blue); line-height:1}
.band-dark .stat-row b{color:var(--orange)}
.stat-row span{font-size:.9rem}

/* ---------------- steps ---------------- */
.steps{display:grid; gap:0; counter-reset:st}
.step{display:grid; grid-template-columns:88px 1fr; gap:26px; padding:28px 0;
  border-top:1px solid var(--line)}
.step:last-child{border-bottom:1px solid var(--line)}
.step .num{font-family:"Manrope",sans-serif; font-weight:800; font-size:1.5rem; color:#fff;
  width:64px; height:64px; border-radius:50%; background:var(--blue); display:grid;
  place-items:center}
.step:nth-child(even) .num{background:var(--orange); color:#241800}
.step h3{margin-bottom:.25em}
.step p{margin:0; font-size:.97rem}

/* ---------------- table ---------------- */
.tablewrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); background:#fff}
table.data{border-collapse:collapse; width:100%; min-width:640px; font-size:.94rem}
table.data th{background:var(--navy); color:#fff; text-align:left; padding:14px 16px;
  font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700}
table.data td{padding:13px 16px; border-bottom:1px solid var(--line-s); vertical-align:top}
table.data tr:last-child td{border-bottom:0}
table.data tbody tr:hover td{background:var(--wash)}

/* ---------------- accordion ---------------- */
.acc{border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:#fff}
.acc + .acc{margin-top:12px}
.acc summary{cursor:pointer; padding:20px 56px 20px 22px; font-weight:700; color:var(--ink);
  position:relative; list-style:none; font-size:1.02rem}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+"; position:absolute; right:22px; top:50%; transform:translateY(-50%);
  font-size:1.5rem; color:var(--blue); font-weight:400; transition:transform .25s var(--ease)}
.acc[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.acc .in{padding:0 22px 22px; font-size:.97rem}
.acc[open]{border-color:var(--blue-l)}

/* ---------------- forms ---------------- */
.form{display:grid; gap:16px}
.form .two{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media (max-width:640px){.form .two{grid-template-columns:1fr}}
label{font-size:.82rem; font-weight:700; color:var(--ink); display:block; margin-bottom:6px;
  letter-spacing:.02em}
input,select,textarea{width:100%; font:inherit; font-size:.98rem; color:var(--ink);
  background:#fff; border:1.5px solid var(--line); border-radius:var(--r-s); padding:.78em .9em;
  transition:border-color .18s, box-shadow .18s}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--blue);
  box-shadow:0 0 0 4px rgba(0,88,126,.12)}
textarea{min-height:130px; resize:vertical}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.formnote{font-size:.84rem; color:var(--mut)}
.msg{border-radius:var(--r-s); padding:14px 16px; font-size:.94rem; display:none}
.msg.ok{display:block; background:#E7F6EE; color:#14603E; border:1px solid #B7E0CA}
.msg.err{display:block; background:#FDECEA; color:#8E2019; border:1px solid #F3C6C1}

/* ---------------- gallery ---------------- */
.gallery{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:18px}
.gallery a{display:block; border-radius:var(--r-s); overflow:hidden; border:1px solid var(--line);
  background:#fff; transition:.28s var(--ease)}
.gallery a:hover{transform:translateY(-5px) scale(1.015); box-shadow:var(--sh-l)}
.gallery img{aspect-ratio:1; object-fit:cover}
.lightbox{position:fixed; inset:0; background:rgba(6,20,36,.92); display:none; z-index:200;
  align-items:center; justify-content:center; padding:30px; cursor:zoom-out}
.lightbox.on{display:flex; animation:fadeIn .2s}
.lightbox img{max-width:min(92vw,900px); max-height:88vh; border-radius:10px; width:auto}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ---------------- footer ---------------- */
footer.site{background:var(--navy-d); color:#A8C2D4; padding:40px 0 0; font-size:.93rem}
footer.site h4{color:#fff; font-size:.8rem; letter-spacing:.16em; text-transform:uppercase;
  margin-bottom:1.1em}
footer.site a{color:#A8C2D4; display:block; padding:.16em 0}
footer.site a:hover{color:var(--orange)}
.fgrid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1.3fr; gap:22px 30px}
@media (max-width:900px){.fgrid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.fgrid{grid-template-columns:1fr}}
.fbrand{display:flex; gap:12px; align-items:center; margin-bottom:12px}
.fbrand img{height:46px}
.fbrand > span{display:block}
.fbrand .n{display:block; font-family:"Manrope",sans-serif; font-weight:800; color:#fff;
  font-size:1.2rem}
.fbrand .t{display:block; font-size:.58rem; letter-spacing:.2em; color:var(--orange);
  text-transform:uppercase}
.legal{border-top:1px solid #163049; margin-top:24px; padding:14px 0 18px; font-size:.83rem;
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; color:#7E9AAF}
footer.site .legal a{display:inline; padding:0}
footer.site .legal > div:last-child{flex:0 0 auto; white-space:nowrap}
.disclaimer{background:#04121F; color:#6E8CA2; font-size:.8rem; padding:16px 0; line-height:1.7}

/* ---------------- floating actions ---------------- */
.wa{position:fixed; right:20px; bottom:20px; z-index:80; display:flex; flex-direction:column;
  gap:12px; align-items:flex-end}
.wa a{display:flex; align-items:center; gap:10px; background:#25D366; color:#08331A;
  border-radius:999px; padding:13px 20px 13px 15px; font-weight:700; font-size:.94rem;
  box-shadow:0 12px 30px -10px rgba(37,211,102,.75); transition:transform .2s var(--ease)}
.wa a:hover{transform:translateY(-3px); color:#08331A}
.wa a svg{width:24px; height:24px; flex:none}
.wa .call{background:var(--navy); color:#fff; box-shadow:0 12px 30px -12px rgba(10,38,68,.9)}
.wa .call:hover{color:#fff}
.wa .pulse{position:relative}
.wa .pulse::before{content:""; position:absolute; inset:-4px; border-radius:999px;
  border:2px solid rgba(37,211,102,.55); animation:pulse 2.4s ease-out infinite}
@keyframes pulse{0%{transform:scale(.96); opacity:.9} 70%{transform:scale(1.14); opacity:0}
  100%{opacity:0}}
@media (max-width:600px){.wa a span{display:none} .wa a{padding:14px}}

/* ---------------- reveal animation ---------------- */
[data-rv]{opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease),
  transform .7s var(--ease)}
[data-rv].in{opacity:1; transform:none}
[data-rv="l"]{transform:translateX(-30px)}
[data-rv="r"]{transform:translateX(30px)}
[data-rv="s"]{transform:scale(.95)}
[data-rv].in{transform:none}
@media (prefers-reduced-motion:reduce){
  [data-rv]{opacity:1 !important; transform:none !important; transition:none}
  .hero .bg{animation:none}
  .wa .pulse::before{animation:none}
  html{scroll-behavior:auto}
}

/* ---------------- misc ---------------- */
.rule{height:4px; width:70px; background:var(--orange); border-radius:2px; margin:0 0 26px}
.center .rule{margin-left:auto; margin-right:auto}
.note-box{border-left:4px solid var(--orange); background:var(--wash); padding:20px 24px;
  border-radius:0 var(--r-s) var(--r-s) 0; font-size:.96rem}
.note-box strong{color:var(--ink)}
.kv{display:grid; grid-template-columns:auto 1fr; gap:8px 20px; font-size:.96rem}
.kv dt{font-weight:700; color:var(--ink)}
.kv dd{margin:0}
.article h2{margin-top:1.6em}
.article h3{margin-top:1.4em}
.article ul,.article ol{padding-left:1.3em}
.article li{margin-bottom:.5em}
.toc{background:var(--wash); border:1px solid var(--line); border-radius:var(--r); padding:22px 26px}
.toc h4{margin:0 0 .7em; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--blue)}
.toc ol{margin:0; padding-left:1.2em}
.pill-row{display:flex; gap:8px; flex-wrap:wrap; font-size:.82rem; color:var(--mut)}

/* ---------------------------------------------------------------- office address */
.faddr{grid-column:1 / 2; align-self:start; font-style:normal; margin-top:22px; line-height:1.6; color:#A8C2D4;
  border-left:3px solid var(--orange); padding-left:14px}
.faddr strong{display:block; color:#fff; font-size:.74rem; letter-spacing:.16em;
  text-transform:uppercase; margin-bottom:7px}
.faddr a{display:inline-block; color:var(--orange); margin-top:8px; padding:0}
.addr-card{display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:start;
  background:#fff; border:1px solid var(--line); border-left:4px solid var(--orange);
  border-radius:12px; padding:22px 24px; margin:22px 0}
.addr-card .pin{width:42px; height:42px; border-radius:50%; background:#E7F1F6;
  display:grid; place-items:center; color:var(--blue)}
.addr-card h4{margin:0 0 6px; font-family:"Manrope",sans-serif; font-size:1rem; color:var(--ink)}
.addr-card p{margin:0; line-height:1.8; color:var(--body)}
.addr-card a{color:var(--blue); font-weight:600}

/* ---------------------------------------------------------------- showcase */
.poster{margin:0}
.poster a{display:block; position:relative; border-radius:16px; overflow:hidden;
  box-shadow:var(--sh-l); background:#fff}
.poster img{display:block; width:100%; height:auto}
.poster .zoom{position:absolute; right:14px; bottom:14px; background:rgba(10,38,68,.88);
  color:#fff; font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:.55em 1.1em; border-radius:999px; opacity:0; transition:opacity .25s ease}
.poster a:hover .zoom, .poster a:focus-visible .zoom{opacity:1}
.poster figcaption{margin-top:14px; font-size:.87rem; color:var(--mut); line-height:1.65}
.fig3d{margin:0; text-align:center}
.fig3d img{width:100%; max-width:520px; height:auto}
.fig3d figcaption{margin-top:6px; font-size:.87rem; color:var(--mut); line-height:1.65;
  max-width:460px; margin-left:auto; margin-right:auto}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{display:inline-block; background:#EDF3F7; color:var(--blue); border:1px solid var(--line);
  border-radius:999px; padding:.4em 1em; font-size:.82rem; font-weight:600}
.card.sm img{height:170px; object-fit:cover; object-position:top}
.card.sm .body h3{font-size:1.05rem}

/* ---------------------------------------------------------------- 3D category tiles */
.cat3d{background:#fff; border:1px solid var(--line); border-radius:16px; padding:26px 24px 28px;
  text-align:center; box-shadow:var(--sh); transition:transform .3s ease, box-shadow .3s ease}
.cat3d:hover{transform:translateY(-5px); box-shadow:var(--sh-l)}
.cat3d img{width:150px; height:150px; margin:0 auto 14px; display:block}
.cat3d h3{font-size:1.06rem; margin:0 0 8px}
.cat3d p{margin:0; font-size:.92rem; color:var(--body); line-height:1.65}
.analysis3d{display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
@media (max-width:900px){.analysis3d{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.analysis3d{grid-template-columns:1fr}}
.analysis3d figure{margin:0; background:#fff; border:1px solid var(--line); border-radius:16px;
  padding:16px 18px 20px; text-align:center; box-shadow:var(--sh)}
.analysis3d img{width:100%; height:auto; display:block}
.analysis3d h3{font-size:1rem; margin:6px 0 6px}
.analysis3d figcaption{font-size:.88rem; color:var(--body); line-height:1.6}

/* ---------------------------------------------------------------- sticky header, compact on scroll */
header.site{will-change:padding}
header.site .wrap{transition:padding .28s var(--ease)}
header.site.scrolled{background:rgba(255,255,255,.97);
  box-shadow:0 8px 30px -20px rgba(10,38,68,.65)}
header.site.scrolled .wrap{padding-top:7px; padding-bottom:7px}
header.site.scrolled .brand img{height:38px}
header.site .brand img{transition:height .28s var(--ease)}
.topbar{transition:margin-top .3s var(--ease)}

/* ---------------------------------------------------------------- 3D motion */
@media (prefers-reduced-motion:no-preference){
  .tilt{transform-style:preserve-3d; transition:transform .5s var(--ease), box-shadow .5s var(--ease)}
  .tilt-in{transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))
    translateZ(var(--tz,0px))}
  .card, .cat3d, .analysis3d figure, .poster a{transform-style:preserve-3d}
  .card:hover, .cat3d:hover{transform:perspective(1000px) translateY(-7px) rotateX(2.2deg)
    rotateY(-2.2deg) translateZ(10px)}
  .analysis3d figure:hover{transform:perspective(1000px) translateY(-6px) rotateY(3deg);
    box-shadow:var(--sh-l)}
  .analysis3d figure{transition:transform .45s var(--ease), box-shadow .45s var(--ease)}
  .poster a:hover{transform:perspective(1400px) rotateY(-2.4deg) translateZ(14px)}
  .poster a{transition:transform .55s var(--ease)}
}

/* ---------------------------------------------------------------- 3D flow chart
   Five steps standing in a row, each card turned in space so the sequence reads
   as a receding line. Hovering a step brings it square to the reader. */
.flow3d{perspective:1400px; padding:8px 0 4px}
.flow3d .stage{display:grid; grid-template-columns:repeat(5,1fr); gap:26px; align-items:start;
  transform-style:preserve-3d}
.flow3d .fstep{position:relative; transform-style:preserve-3d}
.flow3d .slab{position:relative; height:118px; border-radius:13px;
  background:linear-gradient(150deg,#FFFFFF 0%,#EAF2F7 100%);
  border:1px solid var(--line);
  box-shadow:0 18px 34px -22px rgba(10,38,68,.62), inset 0 1px 0 #fff;
  transform:rotateY(-17deg) rotateX(7deg) translateZ(0);
  transform-origin:right center;
  transition:transform .55s var(--ease), box-shadow .55s var(--ease)}
.flow3d .fstep:nth-child(2) .slab{transform:rotateY(-13deg) rotateX(6deg) translateY(-6px)}
.flow3d .fstep:nth-child(3) .slab{transform:rotateY(-9deg)  rotateX(5deg) translateY(-12px)}
.flow3d .fstep:nth-child(4) .slab{transform:rotateY(-5deg)  rotateX(4deg) translateY(-18px)}
.flow3d .fstep:nth-child(5) .slab{transform:rotateY(-1deg)  rotateX(3deg) translateY(-24px);
  background:linear-gradient(150deg,#FFF6E8 0%,#FFE3B8 100%); border-color:#F0C68A}
.flow3d .fstep:hover .slab{transform:rotateY(0deg) rotateX(0deg) translateY(-30px) scale(1.04);
  box-shadow:0 30px 50px -24px rgba(10,38,68,.7)}
.flow3d .slab .num{position:absolute; left:16px; top:12px; font-family:"Manrope",sans-serif;
  font-weight:800; font-size:1.7rem; color:var(--blue); opacity:.28; line-height:1}
.flow3d .slab .ic{position:absolute; right:15px; bottom:14px; width:40px; height:40px;
  color:var(--blue); opacity:.9}
.flow3d .fstep:nth-child(5) .slab .ic{color:#B5730B}
.flow3d .fstep:nth-child(5) .slab .num{color:#B5730B; opacity:.42}
.flow3d .link{position:absolute; top:52px; right:-19px; width:16px; height:2px;
  background:var(--blue); opacity:.45}
.flow3d .link:after{content:""; position:absolute; right:-1px; top:-4px;
  border-left:7px solid var(--blue); border-top:4.5px solid transparent;
  border-bottom:4.5px solid transparent}
.flow3d .fstep:last-child .link{display:none}
.flow3d .cap{margin-top:16px}
.flow3d .cap h3{font-size:1rem; margin:0 0 6px; line-height:1.35}
.flow3d .cap p{margin:0; font-size:.88rem; line-height:1.65; color:var(--body)}
@media (max-width:1050px){
  .flow3d .stage{grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:24px}
  .flow3d .slab, .flow3d .fstep:nth-child(n) .slab{transform:none; height:92px}
  .flow3d .fstep:hover .slab{transform:translateY(-6px)}
  .flow3d .link{display:none}
}
@media (prefers-reduced-motion:reduce){
  .flow3d .slab, .flow3d .fstep:nth-child(n) .slab, .flow3d .fstep:hover .slab{transform:none}
}

/* ---------------------------------------------------------------- richer footer */
.fgrid.wide{grid-template-columns:1.5fr 1fr 1fr 1fr 1.15fr}
@media (max-width:1100px){.fgrid.wide{grid-template-columns:1.4fr 1fr 1fr}}
@media (max-width:760px){.fgrid.wide{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.fgrid.wide{grid-template-columns:1fr}}
.fvalues{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin:0 0 26px;
  padding:0 0 40px; border-bottom:1px solid #163049}
@media (max-width:900px){.fvalues{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.fvalues{grid-template-columns:1fr}}
.fvalues div{display:flex; gap:12px; align-items:flex-start}
.fvalues .fi{flex:none; width:36px; height:36px; border-radius:9px; background:#12385A;
  display:grid; place-items:center; color:var(--orange)}
.fvalues b{display:block; color:#fff; font-size:.92rem; margin-bottom:3px;
  font-family:"Manrope",sans-serif}
.fvalues p{margin:0; font-size:.85rem; line-height:1.6; color:#94AEC2}
.fpay{grid-column:2 / -1; margin-top:22px; background:#0C2A45; border:1px solid #17405F; border-radius:10px;
  padding:14px 16px}
.fpay b{display:block; color:#fff; font-size:.74rem; letter-spacing:.16em;
  text-transform:uppercase; margin-bottom:8px}
.fpay dl{display:grid; grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr); gap:7px 16px; align-items:baseline; margin:0; font-size:.85rem}
@media (max-width:1200px){.fpay dl{grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr)}}
@media (max-width:760px){.faddr,.fpay{grid-column:1 / -1}}
@media (max-width:640px){.fpay dl{grid-template-columns:auto minmax(0,1fr)}}
.fpay dt{color:#7E9AAF; font-size:.78rem; letter-spacing:.04em; margin-top:0; white-space:nowrap}
.fpay dt:first-of-type{margin-top:0}
.fpay dd{margin:0; color:#DCE9F2; font-variant-numeric:tabular-nums; word-break:normal; overflow-wrap:anywhere; line-height:1.45}
.fpay .none{color:#94AEC2; font-size:.84rem; line-height:1.6; margin:0}

/* ---------------------------------------------------------------- alternate artwork */
.altwork{margin-top:20px; border-top:1px solid var(--line); padding-top:16px}
.altwork h4{font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; color:var(--mut);
  margin:0 0 12px}
.altwork a{display:flex; gap:14px; align-items:center; background:var(--wash);
  border:1px solid var(--line); border-radius:12px; padding:10px 14px 10px 10px;
  transition:border-color .25s, transform .25s var(--ease)}
.altwork a:hover{border-color:var(--blue); transform:translateX(3px)}
.altwork img{width:82px; height:82px; object-fit:cover; border-radius:8px; flex:none}
.altwork span{font-size:.88rem; line-height:1.55; color:var(--body)}
.altwork b{display:block; color:var(--blue); margin-top:4px}
/* ---------------------------------------------------------------- 2026-09-11: HD logo, ten-tab menu, no sideways scroll on phones */
header.site .brand img.brand-full{height:56px;width:auto}
header.site.scrolled .brand img.brand-full{height:46px}
@media (max-width:560px){header.site .brand img.brand-full{height:44px}}
@media (min-width:1041px){header.site nav.main > a, header.site nav.main > .has-sub > a{white-space:nowrap}}
@media (min-width:1041px) and (max-width:1279px){header.site nav.main > a, header.site nav.main > .has-sub > a{padding-left:7px;padding-right:7px;font-size:.86rem}}
@media (max-width:1040px){html,body{overflow-x:clip}}

/* ===== Social media icons (Connect with Us) ===== */
.social-connect{margin-top:22px}
.social-connect .sc-title{display:block;margin:0 0 12px;font:700 1.05rem/1.2 Manrope,Inter,sans-serif;color:#22c5e0;letter-spacing:.01em}
.social-connect .social-icons{display:flex;flex-wrap:wrap;gap:12px;margin:0;padding:0}
.social-connect .social-icons a{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;margin:0;padding:0;border-radius:10px;color:#fff;font-size:22px;line-height:1;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease}
.social-connect .social-icons a:hover,.social-connect .social-icons a:focus-visible{transform:translateY(-3px);box-shadow:0 8px 18px rgba(0,0,0,.28);color:#fff}
.social-connect .social-icons a.ig{background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285aeb 90%)}
.social-connect .social-icons a.fb{background:#1877f2}
.social-connect .social-icons a.li{background:#0a66c2}
.social-connect.on-light{margin:6px 0 22px}
.social-connect.on-light .sc-title{color:#0b6e8a}

/* ===== Top bar social icons (front page, before the phone number) ===== */
.topbar .top-social{display:inline-flex;align-items:center;gap:6px;vertical-align:middle;margin:-3px 0}
.topbar .top-social a{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;margin:0;padding:0;border-radius:6px;color:#fff;font-size:12px;line-height:1;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease}
.topbar .top-social a:hover,.topbar .top-social a:focus-visible{transform:translateY(-2px);box-shadow:0 4px 10px rgba(0,0,0,.35);color:#fff}
.topbar .top-social a.ig{background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285aeb 90%)}
.topbar .top-social a.fb{background:#1877f2}
.topbar .top-social a.li{background:#0a66c2}