/* Jinba IT, Design 1 "Chevron". Dark only. Palette: designs/d1/palette.py (contrast in tools/contrast.py). */
:root{
  --bg:#071a1d;--surface:#0d2c31;--raised:#12393f;--tile:#0a2428;--head:#071d21;--line:#1f5961;
  --text:#e9f2f3;--muted:#a9c4c8;--orange:#f29100;--orange-hi:#ffa21f;--on-orange:#071a1d;
  --teal:#00b9c5;--teal-hi:#5fdbe5;--teal-deep:#009da7;--on-teal:#04161a;--foot:#05262b;--err:#ff8f85;--ok:#62d69e;
  --teal-a:0,185,197;   /* logo teal as an rgb triple for translucent washes */
  --head:"Nunito",ui-rounded,"Segoe UI",system-ui,sans-serif;
  --body:"Nunito Sans","Segoe UI",system-ui,sans-serif;
  --mono:"Red Hat Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --r:14px;--r-lg:22px;--wrap:1200px;--gut:clamp(16px,4vw,32px);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:88px;background:var(--bg)}
/* body has no background of its own, so the fixed .fx layer (z-index:-1) shows between the canvas and the content */
body{margin:0;color:var(--text);font:400 1.0625rem/1.65 var(--body);overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--teal);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--teal-hi)}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:6px}
h1,h2,h3,h4{overflow-wrap:break-word;font-family:var(--head);line-height:1.15;margin:0 0 .6em;letter-spacing:-.01em;color:var(--text)}
h1{font-size:clamp(2.1rem,4.6vw,3.6rem);font-weight:900}
h2{font-size:clamp(1.6rem,3vw,2.3rem);font-weight:800}
h3{font-size:1.2rem;font-weight:800}
p{margin:0 0 1em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.wrap.narrow{max-width:820px}
.skip{position:absolute;left:-9999px;top:0;background:var(--orange);color:var(--on-orange);padding:.6rem 1rem;z-index:100;font-weight:700}
.skip:focus{left:1rem;top:1rem}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;padding:.8rem 1.35rem;border-radius:999px;
  font:800 1rem/1.1 var(--head);text-decoration:none;white-space:nowrap;border:2px solid transparent;transition:background .15s,color .15s,border-color .15s}
.btn-primary,.btn-primary:visited{background:var(--orange);color:var(--on-orange)}
.btn-primary:hover{background:var(--orange-hi);color:var(--on-orange)}
.btn-ghost,.btn-ghost:visited{border-color:var(--line);color:var(--text)}
.btn-ghost:hover{border-color:var(--teal);color:var(--text)}
.actions{display:flex;flex-wrap:wrap;gap:.75rem;margin:1.6rem 0 0}

/* ---------- header ---------- */
.masthead{position:sticky;top:0;z-index:50;background:var(--head);border-bottom:1px solid var(--line);box-shadow:inset 0 -2px 0 rgba(var(--teal-a),.22)}
.bar{display:flex;align-items:center;gap:1.25rem;min-height:72px}
.brand{flex:0 0 auto;display:block}
.brand img{height:38px;width:auto}
.nav{display:flex;align-items:center;gap:.15rem;margin-left:auto}
.nav>a,.nav-menu>summary{color:var(--text);text-decoration:none;font:700 .98rem/1 var(--head);padding:.65rem .7rem;border-radius:10px;white-space:nowrap;cursor:pointer}
.nav>a:hover,.nav-menu>summary:hover{background:var(--raised);color:var(--text)}
.nav>a[aria-current="page"]{color:var(--orange)}
.nav-menu{position:relative}
.nav-menu>summary{list-style:none;display:flex;align-items:center;gap:.35rem}
.nav-menu>summary::-webkit-details-marker{display:none}
.nav-menu>summary::after{content:"";width:.45rem;height:.45rem;border-right:2px solid var(--teal);border-bottom:2px solid var(--teal);transform:rotate(45deg) translateY(-2px)}
.nav-menu[open]>summary{background:var(--raised)}
.mega{position:absolute;top:calc(100% + 10px);left:-1rem;width:min(620px,90vw);list-style:none;margin:0;padding:.75rem;
  display:grid;grid-template-columns:1fr 1fr;gap:.2rem;background:var(--raised);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 18px 50px rgba(0,0,0,.45)}
.mega a{display:block;padding:.6rem .75rem;border-radius:10px;text-decoration:none}
.mega a b{display:block;color:var(--text);font:800 .97rem/1.3 var(--head)}
.mega a b::before{content:"› ";color:var(--teal)}
.mega a span{display:block;color:var(--muted);font-size:.86rem;line-height:1.4}
.mega a:hover{background:var(--surface)}
.bar-end{display:flex;align-items:center;gap:.75rem;flex:0 0 auto}
.hdr-phone{display:inline-flex;align-items:center;gap:.4rem;color:var(--text);text-decoration:none;font:600 .95rem/1 var(--mono);white-space:nowrap}
.hdr-phone svg{width:18px;height:18px;fill:var(--teal)}
.hdr-phone:hover{color:var(--teal-hi)}
.cta{padding:.7rem 1.15rem}
.cta .lbl-short{display:none}
.nav-m{display:none;position:relative}
.nav-m>summary{list-style:none;display:flex;align-items:center;gap:.5rem;cursor:pointer;padding:.6rem .7rem;border:2px solid var(--teal-deep);border-radius:999px;font:800 .95rem/1 var(--head);color:var(--text)}
.nav-m>summary::-webkit-details-marker{display:none}
.burger,.burger::before,.burger::after{display:block;width:18px;height:2px;background:var(--text);border-radius:2px;position:relative}
.burger::before,.burger::after{content:"";position:absolute;left:0}
.burger::before{top:-6px}.burger::after{top:6px}
.m-panel{position:absolute;right:0;top:calc(100% + 10px);width:min(320px,calc(100vw - 32px));max-height:calc(100vh - 100px);overflow:auto;
  background:var(--raised);border:1px solid var(--line);border-radius:var(--r);padding:.6rem;box-shadow:0 18px 50px rgba(0,0,0,.5)}
.m-panel a{display:block;padding:.55rem .7rem;color:var(--text);text-decoration:none;border-radius:8px;font-weight:600}
.m-panel a:hover{background:var(--surface)}
.m-panel a[aria-current="page"]{color:var(--orange)}
.m-head{margin:.6rem .7rem .2rem;font:600 .78rem/1 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--teal)}

@media (max-width:1180px){.hdr-phone span{display:none}.hdr-phone{padding:.55rem;border:2px solid var(--teal-deep);border-radius:999px}}
@media (max-width:1060px){.nav{display:none}.nav-m{display:block}.bar-end{margin-left:auto}}
@media (max-width:560px){
  .brand img{height:30px}
  .cta{padding:.6rem .9rem}.cta .lbl-full{display:none}.cta .lbl-short{display:inline}
  .bar{gap:.6rem}.bar-end{gap:.45rem}
  .nav-m .m-lbl{display:none}.nav-m>summary{padding:.6rem}
}
@media (max-width:359px){.hdr-phone{display:none}}

/* ---------- breadcrumbs ---------- */
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.35rem;margin:0;padding:1.1rem var(--gut) 0;font:500 .85rem/1.4 var(--mono);color:var(--muted)}
.crumbs.wrap ol{padding-left:0;padding-right:0}
.crumbs li+li::before{content:"›";color:var(--teal);margin-right:.35rem}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--teal-hi)}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;padding:clamp(2.5rem,6vw,5rem) 0 clamp(2.5rem,5vw,4rem)}
.hero-grid{position:relative;display:grid;gap:2.5rem;align-items:center}
.hero.has-panel .hero-grid{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
.hero-grid>*{min-width:0;position:relative}
.deco{position:absolute!important;right:-160px;top:50%;width:640px;height:640px;transform:translateY(-50%);pointer-events:none;z-index:0}
.hero.has-panel .deco{right:auto;left:42%}
.hero-copy,.panel{z-index:1}
.eyebrow,.kicker,.h1-eyebrow{display:block;font:600 .82rem/1.3 var(--mono);text-transform:uppercase;letter-spacing:.09em;color:var(--teal);margin:0 0 .9rem}
.eyebrow::before,.kicker::before,.h1-eyebrow::before{content:"› ";color:var(--orange)}
.hero .eyebrow,.hero .h1-eyebrow,.post-head .eyebrow,.eyebrow a{color:var(--teal-hi)}
.hero .lede a{color:var(--teal-hi)}
.sec-head h2::after{content:"";display:block;width:56px;height:4px;margin-top:.55em;border-radius:4px;background:linear-gradient(90deg,var(--teal) 0 70%,var(--orange) 70%)}
h1 .h1-eyebrow{margin-bottom:1rem}
.lede{font-size:clamp(1.08rem,1.6vw,1.25rem);color:var(--muted);max-width:44rem;margin:0}
.hero-slim{padding:clamp(2rem,4vw,3rem) 0 1.5rem}
.hero-slim h1{font-size:clamp(2rem,4vw,3rem)}

/* panel: the "service board" */
.panel{background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--teal);border-radius:var(--r-lg);padding:1.4rem 1.5rem;box-shadow:0 20px 60px rgba(0,0,0,.35),0 0 0 1px rgba(var(--teal-a),.08)}
.panel-title{display:flex;align-items:center;gap:.6rem;font:800 1.1rem/1.2 var(--head);margin:0 0 .9rem}
.panel-title::before{content:"";width:14px;height:14px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 4px rgba(var(--teal-a),.22);flex:0 0 auto}
.panel dl{margin:0}
.panel .row{display:flex;justify-content:space-between;gap:1rem;padding:.62rem 0;border-top:1px dashed var(--line)}
.panel dt{color:var(--muted);font-size:.95rem}
.panel dd{margin:0;text-align:right;font:600 .92rem/1.4 var(--mono);color:var(--text)}
.panel dd a{color:var(--teal)}
.panel-note,.panel p{color:var(--muted);font-size:.92rem;margin:.9rem 0 0}

/* ---------- sections ---------- */
.sec{padding:clamp(2.75rem,6vw,4.75rem) 0}
/* bands: a translucent logo-teal wash, so the animated background still moves underneath */
.sec.band{background:rgba(var(--teal-a),.04);border-top:1px solid rgba(var(--teal-a),.16);border-bottom:1px solid rgba(var(--teal-a),.16)}
.sec-head{max-width:46rem;margin-bottom:2rem}
.sec-head h2{margin-bottom:.4em}
.intro{color:var(--muted);margin:0;font-size:1.05rem}
.foot-note{margin:1.6rem 0 0;color:var(--muted)}
.foot-note a{font-weight:700}

/* stats strip */
.sec-stats{padding:0;background:rgba(var(--teal-a),.04);border-top:1px solid rgba(var(--teal-a),.16);border-bottom:1px solid rgba(var(--teal-a),.16)}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.stat{padding:1.5rem 1.25rem;border-left:1px solid var(--line);min-width:0}
.stat:first-child{border-left:0;padding-left:0}
.stat b{display:block;font:800 clamp(1.6rem,3vw,2.2rem)/1.1 var(--head);color:var(--teal-hi)}
.stat span{display:block;color:var(--muted);font-size:.95rem;margin-top:.3rem}

/* cards */
.cards{display:grid;gap:1.1rem}
.cards.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cards.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cards.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{position:relative;min-width:0;background:linear-gradient(180deg,var(--surface),var(--tile));border:1px solid var(--line);border-radius:var(--r);padding:1.4rem 1.4rem 1.3rem;transition:border-color .15s,transform .15s}
.card::before{content:"";position:absolute;left:1.4rem;top:-1px;width:42px;height:4px;border-radius:0 0 4px 4px;background:var(--teal);transition:width .2s}
.card:has(a):hover::before{width:72px}
.card h3 a{color:var(--text);text-decoration:none}
.card h3 a::after{content:"";position:absolute;inset:0;border-radius:var(--r)}
.card p{color:var(--muted);margin:0}
.card .more{display:inline-block;margin-top:.9rem;color:var(--teal);font:700 .92rem/1 var(--head)}
.card .more::after{content:" ›"}
.card:has(a):hover{border-color:var(--teal);transform:translateY(-2px);box-shadow:0 14px 40px rgba(0,0,0,.35),0 0 0 1px rgba(var(--teal-a),.25)}
.card:has(a):hover .more{color:var(--teal-hi)}
.card p a{position:relative;z-index:1}

/* steps: chevron route */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.1rem;counter-reset:s}
.steps:has(> li:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
.step{position:relative;min-width:0;background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--teal-deep);border-radius:var(--r);padding:1.3rem 1.3rem 1.2rem}
.step .tag{display:inline-block;font:600 .8rem/1 var(--mono);color:var(--on-orange);background:var(--orange);padding:.4rem .7rem;border-radius:999px;margin-bottom:.9rem;text-transform:uppercase;letter-spacing:.05em}
.step p{color:var(--muted);margin:0}
.step:not(:last-child)::after{content:"";position:absolute;right:-14px;top:1.55rem;width:14px;height:14px;border-top:3px solid var(--teal);border-right:3px solid var(--teal);transform:rotate(45deg);border-radius:2px}

/* split */
.split{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:2.5rem;align-items:start}
.split>*{min-width:0}
.prose p,.prose li{color:var(--text)}
.side{background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--teal);border-radius:var(--r);padding:1.4rem}
.side h3{color:var(--teal-hi)}
.side h3{font-size:1.05rem;margin-bottom:.8rem}
.side p{color:var(--muted);margin:.8rem 0 0}
.ticks,.checklist{list-style:none;margin:0;padding:0}
.ticks li,.checklist li{position:relative;padding-left:1.6rem;margin:.55rem 0}
.ticks li::before,.checklist li::before{content:"";position:absolute;left:.15rem;top:.55em;width:.5rem;height:.5rem;border-top:3px solid var(--teal);border-right:3px solid var(--teal);transform:rotate(45deg);border-radius:1px}
.checklist{display:grid;gap:.2rem 2rem}
.checklist.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.checklist li{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:.85rem 1rem .85rem 2.3rem;margin:.3rem 0;min-width:0}
.checklist li::before{left:1rem;top:1.3em}

/* compare */
.compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem}
.cmp{min-width:0;border-radius:var(--r);padding:1.4rem;border:1px solid var(--line);background:var(--surface)}
.cmp-brand{border-top:4px solid var(--orange)}
.cmp-muted{border-top:4px solid var(--line)}
.cmp-brand h3{color:var(--teal-hi)}
.cmp-muted .ticks li::before{border-color:var(--muted)}

/* table */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;min-width:520px;background:var(--surface)}
th,td{text-align:left;padding:.85rem 1rem;border-bottom:1px solid var(--line);vertical-align:top}
thead th{background:var(--raised);font:600 .8rem/1.3 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--teal-hi);border-bottom:2px solid var(--teal-deep)}
tbody th{font-weight:700;color:var(--text)}
tbody td{color:var(--muted)}
tbody tr:last-child>*{border-bottom:0}

/* FAQ */
.faq{display:grid;gap:.6rem;max-width:56rem}
.qa{background:var(--surface);border:1px solid var(--line);border-radius:12px}
.qa[open]{border-color:var(--teal-deep);box-shadow:inset 4px 0 0 var(--teal)}
.qa summary{list-style:none;cursor:pointer;padding:1rem 3rem 1rem 1.2rem;position:relative;font:800 1.05rem/1.35 var(--head)}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"";position:absolute;right:1.3rem;top:1.25rem;width:.55rem;height:.55rem;border-right:3px solid var(--teal);border-bottom:3px solid var(--teal);transform:rotate(45deg);transition:transform .15s}
.qa[open] summary::after{transform:rotate(-135deg);top:1.5rem}
.qa .a{padding:0 1.2rem .4rem}
.qa .a p{color:var(--muted)}

/* quote */
.sec-quote{padding:clamp(2.5rem,5vw,4rem) 0}
.quote{margin:0;max-width:52rem;position:relative;padding-left:clamp(1.5rem,4vw,3rem);border-left:4px solid var(--orange)}
.quote blockquote{margin:0}
.quote p{font:800 clamp(1.3rem,2.6vw,1.9rem)/1.35 var(--head);color:var(--text)}
.quote figcaption{font:500 .85rem/1.3 var(--mono);color:var(--muted);text-transform:uppercase;letter-spacing:.06em}

/* call to action */
.sec-cta{padding:clamp(2.5rem,5vw,4rem) 0}
.cta-box{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;
  background:linear-gradient(135deg,#0e3a40,var(--surface) 60%);border:1px solid var(--teal-deep);border-radius:var(--r-lg);padding:clamp(1.6rem,4vw,2.8rem)}
.cta-box>div{position:relative;max-width:40rem;min-width:0}
.cta-box h2{margin-bottom:.4em}
.cta-box p{color:var(--muted);margin:0}
.cta-box .actions{position:relative;margin:0}
.disc{position:absolute;right:-90px;bottom:-120px;width:300px;height:300px;border-radius:50%;background:var(--orange);opacity:.12}

/* link list */
.link-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.link-list li{min-width:0;background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--teal);border-radius:12px;padding:1.1rem 1.2rem}
.link-list a{font:800 1.05rem/1.3 var(--head);text-decoration:none;display:block}
.link-list a::after{content:" ›"}
.link-list span{display:block;color:var(--muted);font-size:.95rem;margin-top:.3rem}

/* ---------- contact ---------- */
.sec-form{padding-top:clamp(2rem,5vw,3.5rem)}
.form-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:2.5rem;align-items:start}
.form-grid>*{min-width:0}
.form-copy .panel{margin-top:2rem}
.form-card{background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--teal);border-radius:var(--r-lg);padding:clamp(1.25rem,3vw,2rem)}
.enquiry .row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.enquiry .row>*{min-width:0}
.field{margin-bottom:1rem}
.field label{display:block;font:700 .95rem/1.3 var(--head);margin-bottom:.35rem;color:var(--text)}
.enquiry input,.enquiry select,.enquiry textarea{width:100%;font:400 1rem/1.4 var(--body);color:var(--text);background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:.75rem .85rem}
.enquiry textarea{resize:vertical;min-height:7rem}
.enquiry input:focus,.enquiry select:focus,.enquiry textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(var(--teal-a),.3)}
.enquiry ::placeholder{color:#82a0a5}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.ts-widget{min-height:65px;margin:.4rem 0 1rem}
.enquiry .btn{width:100%;padding:1rem}
.status{min-height:1.4em;margin:.9rem 0 0;font-weight:700}
.status.ok{color:var(--ok)}.status.err{color:var(--err)}
.note-small{font-size:.88rem;color:var(--muted);margin:.8rem 0 0}

/* ---------- blog ---------- */
.cat-nav{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 2rem}
.cat-nav a{padding:.45rem .85rem;border:1px solid var(--line);background:var(--surface);border-radius:999px;text-decoration:none;color:var(--text);font:700 .9rem/1.2 var(--head)}
.cat-nav a:hover{border-color:var(--teal)}
.cat-nav a[aria-current="page"]{background:var(--orange);border-color:var(--orange);color:var(--on-orange)}
.post-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1rem}
.post-card{position:relative;min-width:0;display:flex;flex-direction:column;background:linear-gradient(180deg,var(--surface),var(--tile));border:1px solid var(--line);border-radius:var(--r);padding:1.3rem;overflow:hidden}
.post-card img{margin:-1.3rem -1.3rem 1.1rem;width:calc(100% + 2.6rem);max-width:none;aspect-ratio:16/9;object-fit:cover}
.post-card .meta{font:500 .82rem/1.3 var(--mono);color:var(--muted);margin:0 0 .5rem;display:flex;gap:.6rem;align-items:center}
.badge{font:600 .72rem/1 var(--mono);text-transform:uppercase;background:var(--teal);color:var(--on-teal);padding:.3rem .5rem;border-radius:999px}
.post-card h3{font-size:1.15rem}
.post-card h3 a{color:var(--text);text-decoration:none}
.post-card h3 a::after{content:"";position:absolute;inset:0}
.post-card h3 a:hover{color:var(--teal-hi)}
.post-card>p{color:var(--muted);font-size:.97rem}
.post-card .cats{margin:auto 0 0;font-size:.85rem;position:relative;z-index:1}
.pager{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;margin:2.5rem 0 0;font:700 1rem/1 var(--head)}
.pager a,.pager span{padding:.65rem .95rem;border:1px solid var(--line);border-radius:999px;text-decoration:none;color:var(--text);background:var(--surface)}
.pager span{background:var(--orange);border-color:var(--orange);color:var(--on-orange)}
.pager a:hover{border-color:var(--teal)}
.topics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem}
.topic{min-width:0;background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--teal);border-radius:var(--r);padding:1.4rem}
.topic h2{font-size:1.35rem}
.topic h2 a{color:var(--text);text-decoration:none}
.topic>p{color:var(--muted)}
.topic-list{list-style:none;margin:0;padding:0}
.topic-list li{padding:.5rem 0;border-top:1px dashed var(--line)}
.topic-list time{display:block;font:500 .8rem/1.3 var(--mono);color:var(--muted)}

/* single post */
.post-head{padding-top:clamp(1.75rem,4vw,3rem);padding-bottom:1.5rem}
.post-head>*{max-width:880px}
.post-head h1{font-size:clamp(1.9rem,4vw,3rem)}
.post-meta{font:500 .9rem/1.4 var(--mono);color:var(--muted);margin:0}
.post-grid-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:3rem;align-items:start;padding-bottom:clamp(2.5rem,6vw,4.5rem)}
.post-aside{position:sticky;top:96px}
.post-aside .panel{box-shadow:none}
.post-aside .btn{margin-top:.2rem}
.post-body{font-size:1.08rem;max-width:46rem}
.featured{margin:0 0 2rem}
.featured img{border-radius:var(--r);border:1px solid var(--line)}
.prose h2{font-size:clamp(1.4rem,2.4vw,1.8rem);margin:2.2rem 0 .7rem}
.prose h3{font-size:1.25rem;margin:1.8rem 0 .5rem}
.prose h4,.prose h5,.prose h6{font-size:1.08rem;margin:1.5rem 0 .4rem}
.prose ul,.prose ol{padding-left:1.4rem;margin:0 0 1.1rem}
.prose li{margin:.35rem 0}
.prose li::marker{color:var(--teal)}
.prose img{border-radius:12px;margin:1.4rem 0;background:#fff}
.prose blockquote{margin:1.5rem 0;padding:.4rem 0 .4rem 1.2rem;border-left:4px solid var(--orange);font-family:var(--head);font-weight:700;font-size:1.15rem}
.prose table{min-width:0;margin:1.2rem 0 1.6rem;border:1px solid var(--line);border-radius:12px;display:block;overflow-x:auto}
.prose code{font-family:var(--mono);font-size:.92em;background:var(--raised);padding:.1rem .35rem;border-radius:6px}
.prose a{word-break:break-word}
.prose .checked{font:500 .85rem/1.3 var(--mono);color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.sources li{font-size:.95rem}

/* ---------- footer ---------- */
/* footer: deep logo teal, a teal-to-orange rule (the logo's two colours) and one big faint chevron */
.foot{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--foot),#041d21);border-top:3px solid var(--teal-deep);padding:3.5rem 0 1.5rem;margin-top:0}
.foot::before{content:"";position:absolute;left:0;right:0;top:-3px;height:3px;background:linear-gradient(90deg,var(--teal) 0 82%,var(--orange) 82%)}
.foot::after{content:"";position:absolute;right:-60px;bottom:-80px;width:340px;height:340px;pointer-events:none;opacity:.07;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M30 12 L68 50 L30 88' fill='none' stroke='%2300b9c5' stroke-width='14' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.foot>.wrap{position:relative;z-index:1}
.foot>.wrap:first-child{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:2rem}
.foot>.wrap>*{min-width:0}
.foot-brand img{height:40px;width:auto;margin-bottom:1rem}
.foot p{color:var(--muted);font-size:.95rem}
.foot h2{font:600 .8rem/1.3 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--teal);margin:0 0 .9rem}
.foot h2::before{content:"› ";color:var(--orange)}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin:.4rem 0}
.foot li a{color:var(--text);text-decoration:none;font-size:.95rem}
.foot li a:hover{color:var(--teal-hi);text-decoration:underline}
.foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.75rem;margin-top:2.5rem;padding-top:1.25rem;border-top:1px solid rgba(var(--teal-a),.25);font-size:.85rem;color:var(--muted)}

/* ---------- animated background ----------
   One fixed layer behind everything (markup: .fx in render.py). Three soft radial glows in the logo teals drift
   and breathe; a field of faint chevrons slides slowly right, the way the logo points. Only transform and
   opacity animate, each child is its own compositor layer, and the sticky header is opaque (no backdrop-filter),
   so nothing is repainted per frame. Alphas match designs/d1/palette.py, which measures text over the
   brightest point (all glow centres + a chevron stroke on one pixel). prefers-reduced-motion: no animation. */
.fx{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;contain:strict}
.fx i{position:absolute;display:block;will-change:transform}
.fx-glow{border-radius:50%}
.fx .g1{width:90vmax;height:90vmax;left:-38vmax;top:-46vmax;background:radial-gradient(closest-side,rgba(0,185,197,.10),rgba(0,185,197,0));animation:fx-g1 4.4s ease-in-out infinite alternate}
.fx .g2{width:80vmax;height:80vmax;right:-40vmax;bottom:-44vmax;background:radial-gradient(closest-side,rgba(0,157,167,.08),rgba(0,157,167,0));animation:fx-g2 5.6s ease-in-out infinite alternate}
.fx .g3{width:46vmax;height:46vmax;left:46%;top:18%;background:radial-gradient(closest-side,rgba(0,185,197,.04),rgba(0,185,197,0));will-change:transform,opacity;animation:fx-g3 3.2s ease-in-out infinite alternate}
.fx .fx-chev{top:0;bottom:0;left:-260px;right:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cg fill='none' stroke='%2300b9c5' stroke-opacity='.045' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M40 40 L80 80 L40 120' stroke-width='14'/%3E%3Cpath d='M165 160 L190 185 L165 210' stroke-width='9'/%3E%3C/g%3E%3C/svg%3E") 0 0/260px 260px repeat;
  animation:fx-drift 6.4s linear infinite}
@keyframes fx-g1{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(30vmax,24vmax,0) scale(1.12)}}
@keyframes fx-g2{from{transform:translate3d(0,0,0)}to{transform:translate3d(-34vmax,-20vmax,0)}}
@keyframes fx-g3{0%{transform:translate3d(-12vmax,0,0);opacity:.35}50%{opacity:1}100%{transform:translate3d(10vmax,26vmax,0);opacity:.5}}
@keyframes fx-drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(260px,0,0)}}

/* ---------- Jinba Hub preview: an app window ---------- */
.hub-demo{position:relative;min-width:0}
.hub-frame{background:var(--surface);border:1px solid var(--teal-deep);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 0 0 1px rgba(var(--teal-a),.12),0 30px 70px -24px rgba(0,0,0,.7)}
.hub-bar{display:flex;align-items:center;gap:.9rem;padding:.65rem 1rem;background:var(--raised);border-bottom:1px solid var(--line)}
.hub-dots{flex:0 0 auto;width:44px;height:12px;
  background:radial-gradient(circle at 6px 6px,var(--orange) 5px,transparent 5.5px),radial-gradient(circle at 22px 6px,var(--teal) 5px,transparent 5.5px),radial-gradient(circle at 38px 6px,var(--line) 5px,transparent 5.5px)}
.hub-url{flex:0 1 26rem;min-width:0;margin:0 auto;padding:.4rem .9rem .4rem 2rem;border-radius:999px;background:var(--bg) no-repeat .8rem 50%/.7rem .85rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 17'%3E%3Cpath d='M3.5 7V5a3.5 3.5 0 0 1 7 0v2' fill='none' stroke='%2300b9c5' stroke-width='2'/%3E%3Crect y='7' width='14' height='10' rx='2' fill='%2300b9c5'/%3E%3C/svg%3E");
  border:1px solid var(--line);font:500 .85rem/1.2 var(--mono);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
.hub-tiles{list-style:none;margin:0;padding:clamp(.75rem,2.5vw,1.25rem);display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:.75rem;
  background:radial-gradient(120% 70% at 0 0,rgba(var(--teal-a),.09),rgba(var(--teal-a),0) 60%),var(--bg)}
.hub-tile{position:relative;min-width:0;display:flex;flex-direction:column;gap:.3rem;padding:.95rem 1rem .85rem 1.15rem;background:var(--tile);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.hub-tile::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--teal)}
/* tiles without a refresh label (forms, guides): same height in the row, content top-aligned, deep-teal bar */
.hub-tile:not(:has(em))::before{background:var(--teal-deep)}
.hub-tile b{font:800 1rem/1.3 var(--head);color:var(--text);overflow-wrap:anywhere}
.hub-tile span{color:var(--muted);font-size:.9rem;line-height:1.45}
.hub-tile em{margin-top:auto;padding-top:.45rem;display:flex;align-items:center;gap:.45rem;font:500 .74rem/1.25 var(--mono);font-style:normal;
  color:var(--teal-hi);text-transform:uppercase;letter-spacing:.06em}
.hub-tile em::before{content:"";flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:var(--teal);animation:hub-live 2.8s ease-in-out infinite}
.hub-tile:nth-child(3n+2) em::before{animation-delay:-.9s}
.hub-tile:nth-child(3n) em::before{animation-delay:-1.8s}
@keyframes hub-live{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
.hub-cta{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;margin:1.4rem 0 0;color:var(--muted)}
.hub-cta .btn{flex:0 0 auto}
.hub-cta>a:not(.btn){font-weight:700}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .hero.has-panel .hero-grid{grid-template-columns:minmax(0,1fr)}
  .hero.has-panel .deco{left:auto;right:-220px;top:24%}
  .cards.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cards.cols-3,.post-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps,.steps:has(> li:nth-child(3):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
  .step::after{display:none}
  .split,.form-grid,.post-grid-layout{grid-template-columns:minmax(0,1fr)}
  .post-aside{position:static}
  .foot>.wrap:first-child{grid-template-columns:repeat(2,minmax(0,1fr))}
  .link-list{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:720px){
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat{border-left:0;padding:1.1rem .75rem 1.1rem 0;border-top:1px solid var(--line)}
  .stat:nth-child(-n+2){border-top:0}
  .cards.cols-2,.cards.cols-3,.cards.cols-4,.post-grid,.steps,.steps:has(> li:nth-child(3):last-child),.compare,.checklist.cols-2,.topics{grid-template-columns:minmax(0,1fr)}
  .enquiry .row{grid-template-columns:minmax(0,1fr);gap:0}
  .panel .row{flex-direction:column;gap:.15rem}
  .panel dd{text-align:left}
  .foot>.wrap:first-child{grid-template-columns:minmax(0,1fr)}
  .deco{opacity:.6}
  .hub-bar{gap:.6rem;padding:.6rem .75rem}
  .hub-url{padding-left:1.8rem;background-position:.7rem 50%}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
  .fx i{animation:none!important;will-change:auto}
  .card:has(a):hover{transform:none}
}

/* home hero, centred with no panel (owner 2026-10-16) */
.hero-center .hero-grid{grid-template-columns:minmax(0,1fr)}
.hero-center .hero-copy{text-align:center;max-width:54rem;margin-inline:auto}
.hero-center h1{max-width:22ch;margin-inline:auto}
.hero-center .lede{margin-inline:auto}
.hero-center .actions{justify-content:center}
.hero-center .h1-eyebrow{text-align:center}
/* "Go modern." on its own row, a third larger than the rest of the h1 (owner 2026-10-16) */
.h1-lead{display:block;font-size:min(1.33em,12.5vw);line-height:1.05;margin-bottom:.12em}

/* stat badges: figure centred, subtitle underneath it, left-aligned (owner 2026-10-18) */
.stat{display:flex;flex-direction:column;justify-content:flex-start}
.stat b{text-align:center}
.stat span{text-align:left}

/* stat subtitles stay on one line (owner 2026-10-19): 4 across above 900px, 2 across to 561px, then stacked */
.stat span{white-space:nowrap}
@media (max-width:900px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.stat{border-left:0;padding:1.1rem .75rem 1.1rem 0;border-top:1px solid var(--line)}.stat:nth-child(-n+2){border-top:0}}
@media (max-width:560px){.stats{grid-template-columns:minmax(0,1fr)}.stat:nth-child(2){border-top:1px solid var(--line)}}

/* stat subtitles centred under the figure (owner 2026-10-19) */
.stat span{text-align:center}

/* pinned header once scrolled: fully opaque, base colour #071d21 darkened 80% to #010607, with a shadow edge,
   so nothing scrolling underneath shows through or competes with the header (owner 2026-10-19) */
.masthead{transition:background-color .2s ease,box-shadow .2s ease}
.scrolled .masthead{background:rgba(1,6,7,.8);box-shadow:0 6px 18px rgba(0,0,0,.55);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%)}
/* glass: 80% opaque #010607 plus a blur (owner 2026-10-19). Worst case, white text directly under it: header text 10.3:1, teal 4.9:1. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.scrolled .masthead{background:rgba(1,6,7,.92)}}

/* dated sub-heading under a section heading, e.g. each use case (owner 2026-11-02) */
.sec-date{margin:-.35rem 0 1rem;font:700 1.05rem/1.3 var(--head);color:var(--muted);letter-spacing:.01em}

/* wide illustration under a section heading, e.g. the team on the home page (owner 2026-11-02) */
.sec-figure{margin:.5rem auto 2.25rem;max-width:880px}
.sec-figure img{display:block;width:100%;height:auto}

/* a little more room between the header phone and the Contact button (owner 2026-11-02):
   1.5rem in total on wider screens, .8rem on small screens (header widths re-checked) */
.hdr-phone{margin-right:.75rem}
@media (max-width:560px){.hdr-phone{margin-right:.35rem}}

/* ---------- enquiry form: field errors (shared validator in jinba.FORM_JS) ---------- */
input.field-error,select.field-error,textarea.field-error{border-color:#ff8f85!important;box-shadow:0 0 0 2px #ff8f85!important}
.field-msg{margin:.35rem 0 0;font-size:.85rem;font-weight:600;line-height:1.35;color:#ff8f85}
.field-msg:empty{display:none}