/* Self-hosted fonts (no third-party requests). Latin subset. */
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:200 800;font-display:swap;src:url("../fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2")}

/* ==========================================================================
   A1 Top Up Services - public site
   Direction: a transaction slip. Ruled lists, notched ticket banners, one interactive receipt in the hero.
   Colour: peacock teal (brand) + marigold (accent) on mist; deep peacock ink for dark areas.
   ========================================================================== */
:root{
  --brand:#0B7A75; --accent:#FFB000;
  --brand-ink:color-mix(in srgb,var(--brand) 78%,#000);
  --ink:#0A2E36; --ink-2:#3B565C; --ink-3:#536A6F;
  --mist:#EDF5F4; --mist-2:#E1EEEC; --line:#D3E2E0; --paper:#fff;
  --ok:#12805C; --err:#B4400F;
  --display:"Bricolage Grotesque","IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --r-s:6px; --r-m:10px; --r-l:16px;
  --wrap:1180px; --pad:clamp(1rem,4vw,2rem);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5rem}
body{margin:0;font:400 1.0625rem/1.65 var(--body);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{max-width:100%;height:auto}
svg.ic{flex:none;vertical-align:-.15em}
a{color:var(--brand-ink);text-underline-offset:.18em;text-decoration-thickness:.08em}
a:hover{color:var(--brand)}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:2px}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.12;letter-spacing:-.018em;margin:0 0 .6em;text-wrap:balance}
h1{font-size:clamp(2.2rem,4.6vw,3.5rem);letter-spacing:-.028em}
h2{font-size:clamp(1.65rem,3.2vw,2.35rem)}
h3{font-size:1.2rem;letter-spacing:-.01em}
p{margin:0 0 1em}
ul,ol{margin:0;padding:0}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.skip{position:absolute;left:1rem;top:-4rem;z-index:100;background:var(--ink);color:#fff;padding:.6rem 1rem;border-radius:var(--r-s)}
.skip:focus{top:1rem}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.wrap--mid{max-width:960px}
.wrap--narrow{max-width:780px}
.preview-bar{background:var(--accent);color:var(--ink);text-align:center;padding:.4rem 1rem;font-weight:500;font-size:.9rem}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.62rem 1.15rem;border:2px solid transparent;border-radius:var(--r-s);font:600 .95rem/1.2 var(--body);text-decoration:none;cursor:pointer;transition:background-color .15s,color .15s,border-color .15s;white-space:nowrap}
.btn--lg{padding:.85rem 1.5rem;font-size:1rem}
.btn--primary{background:var(--brand);color:#fff}
.btn--primary:hover{background:var(--brand-ink);color:#fff}
.btn--accent{background:var(--accent);color:var(--ink)}
.btn--accent:hover{background:color-mix(in srgb,var(--accent) 85%,#fff);color:var(--ink)}
.btn--outline{border-color:currentColor;color:var(--brand-ink);background:transparent}
.btn--outline:hover{background:var(--brand);border-color:var(--brand);color:#fff}
.btn--ghost{border-color:rgba(255,255,255,.55);color:#fff;background:transparent}
.btn--ghost:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn--wa{background:#1FA855;color:#fff}.btn--wa:hover{background:#178a45;color:#fff}
.icon-btn{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:var(--r-s);border:0;background:transparent;color:inherit;cursor:pointer}
.icon-btn:hover{background:var(--mist-2)}

/* ---- announcement + header ---- */
.announce{background:var(--ink);color:#E6F0EF;font-size:.92rem}
.announce__in{padding-block:.5rem}.announce p{margin:0;text-align:center}
.announce a{color:var(--accent);font-weight:600}
.site-head{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.97);border-bottom:1px solid var(--line)}
.site-head__in{display:flex;align-items:center;gap:1rem;min-height:68px}
.brand{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink);font-family:var(--display);font-weight:700;font-size:1.12rem;letter-spacing:-.02em}
.brand img{height:40px;width:auto;max-width:200px}
.brand__mark{display:inline-grid;place-items:center;height:36px;padding:0 .5rem;background:var(--accent);color:var(--ink);font-weight:800;border-radius:var(--r-s);
  -webkit-mask:radial-gradient(circle 5px at 0 50%,transparent 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 5px at 100% 50%,transparent 98%,#000) right/51% 100% no-repeat;
  mask:radial-gradient(circle 5px at 0 50%,transparent 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 5px at 100% 50%,transparent 98%,#000) right/51% 100% no-repeat}
.brand--light{color:#fff}
.nav-toggle{display:none;margin-left:auto;width:44px;height:44px;border:0;background:transparent;cursor:pointer;border-radius:var(--r-s)}
.nav-toggle__bar,.nav-toggle__bar::before,.nav-toggle__bar::after{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;margin:auto;position:relative;transition:transform .2s,background-color .2s}
.nav-toggle__bar::before,.nav-toggle__bar::after{content:"";position:absolute;left:0}
.nav-toggle__bar::before{top:-7px}.nav-toggle__bar::after{top:7px}
.nav-toggle[aria-expanded=true] .nav-toggle__bar{background:transparent}
.nav-toggle[aria-expanded=true] .nav-toggle__bar::before{transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded=true] .nav-toggle__bar::after{transform:translateY(-7px) rotate(-45deg)}
.site-nav{display:flex;align-items:center;flex:1;gap:1rem}
.site-nav__list{display:flex;align-items:center;gap:.15rem;list-style:none;margin-left:1rem}
.site-nav__item{position:relative}
.site-nav__split{display:flex;align-items:center}
.site-nav__link{display:block;padding:.6rem .7rem;color:var(--ink);text-decoration:none;font-weight:500;font-size:.98rem;border-radius:var(--r-s)}
.site-nav__link:hover,.site-nav__link.is-current{color:var(--brand)}
.site-nav__link.is-current{box-shadow:inset 0 -3px 0 var(--accent);border-radius:0}
.site-nav__more{display:inline-grid;place-items:center;width:28px;height:36px;margin-left:-.35rem;border:0;background:none;color:var(--ink-2);cursor:pointer;border-radius:var(--r-s)}
.site-nav__more svg{transition:transform .2s}
.site-nav__more[aria-expanded=true] svg{transform:rotate(180deg)}
.site-nav__tools{display:flex;align-items:center;gap:.4rem;margin-left:auto}
.sub{position:absolute;left:0;top:100%;min-width:260px;background:#fff;border:1px solid var(--line);border-radius:var(--r-m);padding:.5rem;box-shadow:0 18px 40px -18px rgba(10,46,54,.35);display:none}
.sub.is-open{display:block}
.sub__list{list-style:none;display:grid;gap:.1rem}
.sub__link{display:flex;gap:.7rem;align-items:flex-start;padding:.6rem .7rem;border-radius:var(--r-s);text-decoration:none;color:var(--ink)}
.sub__link:hover{background:var(--mist)}
.sub__link strong{display:block;font-weight:600;font-size:.96rem;line-height:1.3}
.sub__link small{display:block;color:var(--ink-3);font-size:.82rem;line-height:1.4;margin-top:.1rem}
.sub__icon{color:var(--brand);margin-top:.1rem}
.sub--mega{width:min(880px,calc(100vw - 2rem));left:-6rem}
.sub--mega .sub__list{grid-template-columns:repeat(3,1fr)}
@media (max-width:1080px){.sub--mega{left:-2rem;width:min(760px,calc(100vw - 2rem))}.sub--mega .sub__list{grid-template-columns:repeat(2,1fr)}}
@media (max-width:900px){
  .nav-toggle{display:block}
  .site-nav{position:absolute;top:100%;left:0;right:0;height:calc(100vh - 68px);height:calc(100dvh - 68px);background:#fff;border-top:1px solid var(--line);flex-direction:column;align-items:stretch;justify-content:flex-start;padding:1rem var(--pad) 2rem;overflow-y:auto;display:none;gap:1rem}
  .site-nav.is-open{display:flex}
  .site-nav__list{flex-direction:column;align-items:stretch;margin:0;gap:0}
  .site-nav__link{padding:.85rem .2rem;font-size:1.08rem;border-bottom:1px solid var(--line);flex:1}
  .site-nav__link.is-current{box-shadow:none;color:var(--brand)}
  .site-nav__split{align-items:stretch}
  .site-nav__link{border-radius:0}
  .site-nav__more{width:48px;height:auto;margin:0;border-bottom:1px solid var(--line);border-radius:0}
  .sub,.sub--mega{position:static;width:auto;min-width:0;border:0;box-shadow:none;padding:0 0 .5rem .6rem;background:transparent}
  .sub--mega .sub__list{grid-template-columns:1fr}
  .sub__link small{display:none}
  .site-nav__tools{margin-left:0;justify-content:space-between}
  .site-nav__tools .btn{flex:1}
}

/* ---- sections ---- */
.sec{padding-block:clamp(3.5rem,8vw,6.25rem)}
.sec--tight{padding-block:clamp(2rem,4vw,3.25rem)}
.sec--white{background:var(--paper)}
.sec--soft{background:var(--mist)}
.sec--dark{background:var(--ink);color:#DCEAE8}
.sec--dark h2,.sec--dark h3{color:#fff}
.sec--dark a:not(.btn){color:var(--accent)}
.sec--brand{background:var(--brand);color:#fff}
.sec--brand h2,.sec--brand h3{color:#fff}
.sec--hero{padding-block:clamp(2.5rem,6vw,5rem) clamp(3rem,7vw,5.5rem);background:linear-gradient(180deg,var(--mist) 0,var(--paper) 100%)}
.sec-cta{padding-block:0}
.sec__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1rem 2rem;margin-bottom:clamp(1.75rem,4vw,2.75rem)}
.sec__head>div{max-width:44rem}
.sec__head h2{margin-bottom:.35em}
.sec__lead{font-size:1.12rem;color:var(--ink-2);margin:0}
.sec--dark .sec__lead{color:#B9CFCC}
.sec__label{font-size:.95rem;font-weight:600;color:var(--brand);margin:0 0 .5rem}
.sec--dark .sec__label{color:var(--accent)}

/* ---- hero + sample slip ---- */
.hero__grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(2rem,6vw,5rem);align-items:center}
.hero__copy h1{margin-bottom:.45em}
.hero__lead{font-size:clamp(1.1rem,1.7vw,1.3rem);color:var(--ink-2);max-width:36rem;margin-bottom:1.6rem}
.hero__actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:1.75rem}
.hero__media img{border-radius:var(--r-l);width:100%}
.ticks{list-style:none;display:grid;gap:.5rem;max-width:36rem}
.ticks li{display:flex;gap:.6rem;align-items:flex-start;color:var(--ink-2)}
.ticks svg{color:var(--ok);margin-top:.3rem}
.ticks--light li{color:#CFE2DF}.ticks--light svg{color:var(--accent)}
.slip-wrap{display:flex;justify-content:center;padding:1rem;filter:drop-shadow(0 22px 20px rgba(10,46,54,.22))}
.slip{position:relative;width:min(100%,380px);background:#fff;padding:1.5rem 1.5rem 2.6rem;font-family:var(--mono);font-size:.9rem;line-height:1.5;color:var(--ink);
  transform:rotate(1.2deg);
  --z:9px;-webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/calc(var(--z)*2) 100%;mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/calc(var(--z)*2) 100%}
.slip::before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:var(--accent)}
.slip__title{font-family:var(--display);font-weight:700;font-size:1.05rem;letter-spacing:-.01em;margin:.4rem 0 1rem}
.slip__rows{margin:0}
.slip__rows>div{display:flex;justify-content:space-between;gap:1rem;padding:.2rem 0}
.slip__rows dt{color:var(--ink-3)}
.slip__rows dd{margin:0;text-align:right;font-weight:500;word-break:break-all}
.slip__rule{border-top:2px dotted #B7CBC8;margin:.8rem 0}
.slip__btn{width:100%;margin-top:1rem;font-family:var(--body)}
.slip__note{margin:.75rem 0 0;font-family:var(--body);font-size:.8rem;color:var(--ink-3)}
.slip--static{transform:rotate(-1.5deg);margin:0 0 2rem;width:min(100%,300px);padding-bottom:2rem}
.chip{display:inline-block;padding:.05rem .55rem;border-radius:99px;background:var(--mist-2);color:var(--ink-2);font-weight:500;font-size:.82rem}
.chip--err{background:#FBE5DA;color:var(--err)}
[data-slip][data-state=pending] .chip{background:#FFF0C7;color:#7A5200}
[data-slip][data-state=success] .chip{background:#D5F1E5;color:#0C6446}
[data-slip][data-state=pending] .chip::after{content:"";display:inline-block;width:.5em;height:.5em;margin-left:.45em;border-radius:50%;background:currentColor;animation:blink 1s steps(2,start) infinite}
@keyframes blink{50%{opacity:.2}}
@media (max-width:900px){.hero__grid{grid-template-columns:1fr}.slip-wrap{justify-content:flex-start;padding:0}.slip{transform:none}}

/* ---- service index (ruled list) ---- */
.svc-index{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(1.5rem,4vw,3.5rem);border-top:2px solid var(--ink)}
.svc-index--one{grid-template-columns:1fr}
.svc-row{border-bottom:1px solid var(--line)}
.svc-row a{display:flex;gap:1rem;padding:1.15rem .5rem 1.15rem 0;text-decoration:none;color:inherit;height:100%;transition:background-color .15s,padding .15s}
.svc-row a:hover{background:var(--mist);padding-left:.75rem}
.svc-row__icon{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r-s);background:var(--mist-2);color:var(--brand)}
.sec--soft .svc-row__icon{background:#fff}
.svc-row__body{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.svc-row__body strong{font-family:var(--display);font-size:1.15rem;line-height:1.25;color:var(--ink)}
.svc-row a:hover strong{color:var(--brand)}
.svc-row__body span{color:var(--ink-2);font-size:.98rem;line-height:1.5}
.svc-row__body small{color:var(--ink-3);font-size:.84rem}
@media (max-width:760px){.svc-index{grid-template-columns:1fr}}

/* ---- feature lists (ruled, no boxes) ---- */
.feat{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.25rem clamp(1.5rem,4vw,3rem)}
.feat--two{grid-template-columns:repeat(2,minmax(0,1fr))}
.feat__item{border-top:2px solid var(--ink);padding-top:1.1rem}
.sec--dark .feat__item{border-color:rgba(255,255,255,.35)}
.feat__icon{display:inline-block;color:var(--brand);margin-bottom:.6rem}
.feat__item h3{margin-bottom:.35em}
.feat__item p{color:var(--ink-2);margin:0}
@media (max-width:900px){.feat{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.feat,.feat--two{grid-template-columns:1fr}}
.sec--audience .feat{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1000px){.sec--audience .feat{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.sec--audience .feat{grid-template-columns:1fr}}
.sec--audience .feat__item{border-top:0;border-left:4px solid var(--accent);padding:.15rem 0 .15rem 1rem}

/* ---- steps (a real sequence) ---- */
.steps{list-style:none;counter-reset:s;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5rem;position:relative}
.steps__item{position:relative;padding-top:3.6rem}
.steps__n{position:absolute;top:0;left:0;display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:50%;background:var(--ink);color:#fff;font:700 1.05rem/1 var(--display);z-index:1}
.steps__item::before{content:"";position:absolute;top:1.3rem;left:2.6rem;right:-1.5rem;border-top:2px dotted #9BB6B2}
.steps__item:last-child::before{display:none}
.steps__item h3{margin-bottom:.3em}.steps__item p{color:var(--ink-2);margin:0}
.steps--stack{grid-template-columns:1fr;gap:0}
.steps--stack .steps__item{padding:0 0 1.6rem 3.75rem;min-height:3.4rem}
.steps--stack .steps__item::before{top:2.9rem;bottom:.35rem;left:1.3rem;right:auto;border-top:0;border-left:2px dotted #9BB6B2}
@media (max-width:900px){.steps{grid-template-columns:1fr;gap:0}.steps__item{padding:0 0 1.6rem 3.75rem;min-height:3.4rem}.steps__item::before{top:2.9rem;bottom:.35rem;left:1.3rem;right:auto;border-top:0;border-left:2px dotted #9BB6B2}}

/* ---- integration (dark) ---- */
.integ{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.integ__actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem}
.codeslab{margin:0;background:#06222A;border:1px solid #1B4650;border-radius:var(--r-m);overflow:hidden}
.codeslab figcaption{padding:.65rem 1rem;color:#8FB0B0;font-size:.85rem;border-bottom:1px solid #1B4650}
.codeslab pre{margin:0;padding:1.1rem 1.2rem;overflow-x:auto;font:400 .86rem/1.65 var(--mono);color:#D5ECE8;tab-size:2}
@media (max-width:900px){.integ{grid-template-columns:1fr}}

/* ---- quotes ---- */
.quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem}
.quote{margin:0;border-top:2px solid var(--ink);padding-top:1.1rem}
.quote blockquote{margin:0 0 1rem;font-family:var(--display);font-size:1.2rem;line-height:1.45;font-weight:500}
.quote blockquote p{margin:0}
.quote figcaption{display:flex;gap:.7rem;align-items:center;color:var(--ink-2)}
.quote figcaption img{border-radius:50%;object-fit:cover}
.quote small{display:block;color:var(--ink-3)}
@media (max-width:900px){.quotes{grid-template-columns:1fr}}
.stats{display:flex;flex-wrap:wrap;gap:2rem 3rem;margin:0}
.stats__item{display:flex;flex-direction:column-reverse}
.stats dt{color:var(--ink-2)}.stats dd{margin:0;font:700 2.4rem/1.1 var(--display)}

/* ---- blog cards ---- */
.post-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.25rem clamp(1.25rem,3vw,2rem)}
.post-grid--two{grid-template-columns:repeat(2,minmax(0,1fr))}
.post-card__media{display:block;aspect-ratio:16/10;border-radius:var(--r-m);overflow:hidden;background:var(--mist-2)}
.post-card__media img{width:100%;height:100%;object-fit:cover;display:block}
.post-card__ph{display:grid;place-items:center;width:100%;height:100%;color:var(--brand);
  background:repeating-linear-gradient(0deg,transparent 0 17px,rgba(11,122,117,.13) 17px 18px),var(--mist-2)}
.post-card__body{padding-top:.9rem}
.post-card h3{font-size:1.22rem;margin:.15rem 0 .4rem}
.post-card h3 a{color:var(--ink);text-decoration:none}
.post-card h3 a:hover{color:var(--brand);text-decoration:underline}
.post-card p{color:var(--ink-2);margin:0;font-size:.98rem}
.post-card .meta{margin:0}
.meta{color:var(--ink-3);font-size:.9rem;margin:0 0 .6rem}
.meta a{color:var(--brand-ink);font-weight:500;text-decoration:none}
@media (max-width:900px){.post-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.post-grid,.post-grid--two{grid-template-columns:1fr}}

/* ---- FAQ ---- */
.faq__title{margin-bottom:1rem}
.faq{border-top:2px solid var(--ink)}
.faq__title+.faq__item{border-top:0}
.faq__item{border-bottom:1px solid var(--line)}
.faq__item summary{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.05rem 0;cursor:pointer;list-style:none;font-family:var(--display);font-weight:600;font-size:1.12rem}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary svg{transition:transform .2s;color:var(--brand)}
.faq__item[open] summary svg{transform:rotate(180deg)}
.faq__item .rich{padding-bottom:1rem;color:var(--ink-2)}

/* ---- CTA ticket ---- */
.cta-band{padding-block:clamp(2.5rem,6vw,4.5rem)}
.ticket{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem 2.5rem;padding:clamp(1.75rem,4vw,3rem) clamp(1.75rem,5vw,3.5rem);border-radius:var(--r-m);color:#fff;
  -webkit-mask:radial-gradient(circle 16px at 0 50%,transparent 96%,#000) left/51% 100% no-repeat,radial-gradient(circle 16px at 100% 50%,transparent 96%,#000) right/51% 100% no-repeat;
  mask:radial-gradient(circle 16px at 0 50%,transparent 96%,#000) left/51% 100% no-repeat,radial-gradient(circle 16px at 100% 50%,transparent 96%,#000) right/51% 100% no-repeat}
.ticket--brand{background:var(--brand)}
.ticket--dark{background:var(--ink)}
.ticket--light{background:var(--mist-2);color:var(--ink)}
.ticket__text{flex:1 1 26rem}
.ticket h2{margin-bottom:.3em;color:inherit;font-size:clamp(1.55rem,3vw,2.25rem)}
.ticket p{margin:0;max-width:40rem;opacity:.92}
.ticket__actions{display:flex;flex-wrap:wrap;gap:.75rem}
.ticket--light .btn--ghost{border-color:var(--ink);color:var(--ink)}
.ticket--light .btn--ghost:hover{background:var(--ink);color:#fff}

/* ---- page heads ---- */
.page-head{background:var(--mist);padding-block:clamp(2rem,5vw,3.75rem) clamp(1.75rem,4vw,3rem);border-bottom:1px solid var(--line)}
.page-head h1{font-size:clamp(2rem,4.4vw,3.2rem);max-width:22ch}
.page-head__lead{font-size:1.18rem;color:var(--ink-2);max-width:44rem;margin:0 0 1.2rem}
.page-head__sub{color:var(--ink-2);max-width:44rem}
.page-head__grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:2.5rem;align-items:center}
.page-head__icon{display:inline-grid;place-items:center;width:56px;height:56px;border-radius:var(--r-s);background:var(--accent);color:var(--ink);margin-bottom:1rem}
.page-head__media img{border-radius:var(--r-l);width:100%}
@media (max-width:900px){.page-head__grid{grid-template-columns:1fr}}
.crumbs{margin-bottom:1rem;font-size:.9rem}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.2rem .5rem;color:var(--ink-3)}
.crumbs li+li::before{content:"/";margin-right:.5rem;color:#9BB0AD}
.crumbs a{color:var(--ink-2)}

/* ---- detail layout ---- */
.detail{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:clamp(2rem,5vw,4rem);align-items:start}
.detail__side{position:sticky;top:5.5rem}
.panel-form{background:var(--mist);border:1px solid var(--line);border-radius:var(--r-m);padding:1.5rem;border-top:5px solid var(--accent)}
.panel-form h2{font-size:1.45rem;margin-bottom:.3em}
.panel-form>p{color:var(--ink-2);font-size:.98rem}
.side-link{margin-top:1rem;text-align:center}
.block{margin-top:clamp(2rem,4vw,3.25rem)}
.block>h2,.block h2{font-size:clamp(1.4rem,2.5vw,1.85rem)}
.block--image-left,.block--image-right{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center}
.block--image-left .block__media{order:-1}
.block__media img{border-radius:var(--r-m);width:100%;height:auto}
@media (max-width:980px){.detail{grid-template-columns:1fr}.detail__side{position:static}.block--image-left,.block--image-right{grid-template-columns:1fr}.block--image-left .block__media{order:0}}

/* ---- rich text (admin-authored content) ---- */
.rich{max-width:44rem}
.detail__main .rich,.post__body .rich{max-width:none}
.rich>*+*{margin-top:1em}
.rich h2{margin-top:1.8em;font-size:clamp(1.4rem,2.5vw,1.8rem)}
.rich h3{margin-top:1.5em;font-size:1.25rem}
.rich h4{margin-top:1.3em;font-size:1.1rem}
.rich ul,.rich ol{padding-left:1.4rem}
.rich li{margin:.35em 0}
.rich li::marker{color:var(--brand)}
.rich blockquote{margin:1.5em 0;padding:.2em 0 .2em 1.25rem;border-left:4px solid var(--accent);font-family:var(--display);font-size:1.15rem}
.rich img{border-radius:var(--r-m);height:auto}
.rich table{width:100%;border-collapse:collapse;font-size:.95rem}
.rich th,.rich td{border-bottom:1px solid var(--line);padding:.6rem .7rem;text-align:left}
.rich th{background:var(--mist)}
.rich pre{background:var(--ink);color:#DCEAE8;padding:1rem 1.1rem;border-radius:var(--r-s);overflow-x:auto;font:400 .88rem/1.6 var(--mono)}
.rich code{font-family:var(--mono);font-size:.9em;background:var(--mist-2);padding:.05em .3em;border-radius:4px}
.rich pre code{background:none;padding:0}
.rich details.faq-block{border-bottom:1px solid var(--line);padding:.3rem 0}
.rich details.faq-block summary{cursor:pointer;font-family:var(--display);font-weight:600;padding:.6rem 0}
.rich--intro{margin-bottom:2rem}

/* ---- blog ---- */
.blog-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(2rem,4vw,3.5rem);align-items:start}
@media (max-width:980px){.blog-layout{grid-template-columns:1fr}}
.lead-post{display:grid;grid-template-columns:1.1fr 1fr;gap:1.75rem;align-items:center;margin-bottom:2.75rem;padding-bottom:2.75rem;border-bottom:2px solid var(--ink)}
.lead-post__media{display:block;aspect-ratio:16/10;border-radius:var(--r-m);overflow:hidden;background:var(--mist-2)}
.lead-post__media img{width:100%;height:100%;object-fit:cover}
.lead-post h2{font-size:clamp(1.5rem,2.6vw,2rem)}
.lead-post h2 a{color:var(--ink);text-decoration:none}.lead-post h2 a:hover{color:var(--brand)}
@media (max-width:760px){.lead-post{grid-template-columns:1fr}}
.side-block{margin-bottom:2rem}
.side-block h2{font-size:1.05rem;margin-bottom:.7rem;padding-bottom:.5rem;border-bottom:2px solid var(--ink)}
.side-block--accent{background:var(--mist);padding:1.25rem;border-radius:var(--r-m);border-top:5px solid var(--accent)}
.side-block--accent h2{border:0;padding:0}
.side-list{list-style:none}
.side-list li{display:flex;justify-content:space-between;gap:1rem;padding:.45rem 0;border-bottom:1px solid var(--line)}
.side-list a{color:var(--ink);text-decoration:none}.side-list a:hover{color:var(--brand)}
.side-list span{color:var(--ink-3);font-size:.9rem}
.side-list--plain li{display:block}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem}
.chips a{display:inline-block;padding:.4rem .9rem;border:1.5px solid var(--line);border-radius:99px;color:var(--ink);text-decoration:none;font-weight:500;font-size:.94rem;background:#fff}
.chips a:hover{border-color:var(--brand);color:var(--brand)}
.chips a.is-current{background:var(--ink);border-color:var(--ink);color:#fff}
.chips--small a{padding:.25rem .7rem;font-size:.86rem}
.filter-bar{display:flex;flex-wrap:wrap;gap:1rem 1.5rem;align-items:center;justify-content:space-between;margin-bottom:1.75rem}
.search-inline{display:flex;align-items:center;gap:.25rem;border:1.5px solid var(--line);border-radius:var(--r-s);padding-left:.75rem;background:#fff}
.search-inline:focus-within{border-color:var(--brand)}
.search-inline input{border:0;outline:0;background:none;font:inherit;padding:.6rem .25rem;min-width:0;width:220px;color:var(--ink)}
.search-inline--block{width:100%;margin-bottom:1.5rem;padding-right:.25rem}
.search-inline--block input{flex:1;width:auto}
.search-inline--lg input{font-size:1.15rem;padding-block:.8rem}
.result-count{color:var(--ink-2);margin-bottom:1.25rem}
.empty{padding:2.5rem 0;text-align:left}
.results{margin-top:2rem}
.results ul{list-style:none;border-top:2px solid var(--ink)}
.results li{padding:1rem 0;border-bottom:1px solid var(--line)}
.results li p{margin:.2rem 0 0;color:var(--ink-2)}
.results h2{font-size:1.3rem;margin-bottom:.6rem}
.pager{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;margin-top:2.5rem}
.pager ul{list-style:none;display:flex;gap:.3rem}
.pager a{display:inline-grid;place-items:center;min-width:2.5rem;height:2.5rem;padding:0 .7rem;border-radius:var(--r-s);text-decoration:none;color:var(--ink);font-weight:500;border:1.5px solid var(--line)}
.pager a:hover{border-color:var(--brand)}
.pager a.is-current{background:var(--ink);border-color:var(--ink);color:#fff}
.pager__gap{display:grid;place-items:center;min-width:1.5rem;color:var(--ink-3)}

/* ---- blog post ---- */
.post__head{background:var(--mist);padding-block:clamp(2rem,5vw,3.5rem) clamp(1.5rem,3vw,2.25rem);border-bottom:1px solid var(--line)}
.post__head h1{font-size:clamp(2rem,4.6vw,3.1rem);max-width:24ch}
.byline{margin:0;color:var(--ink-2)}
.post__hero{width:100%;height:auto;border-radius:var(--r-l);margin-top:-1px;margin-block:2rem 0}
.post__layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(2rem,4vw,3.5rem);padding-block:2.5rem clamp(3rem,6vw,4.5rem);align-items:start}
.post__body{max-width:46rem;font-size:1.1rem}
.post__side{position:sticky;top:5.5rem}
@media (max-width:980px){.post__layout{grid-template-columns:1fr}.post__side{position:static}}
.toc{background:var(--mist);padding:1.1rem 1.25rem;border-radius:var(--r-m);margin-bottom:2rem;font-size:.98rem}
.toc h2{font-size:1rem;margin-bottom:.5rem}
.toc ol{list-style:none;display:grid;gap:.25rem}
.toc a{color:var(--ink);text-decoration:none}.toc a:hover{color:var(--brand);text-decoration:underline}
.toc__l3{padding-left:1rem}
.post__tags{margin-top:2rem}
.share{display:flex;align-items:center;gap:.5rem;margin-top:2rem;padding-top:1.25rem;border-top:1px solid var(--line);color:var(--ink-2)}
.share a,.share button{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1.5px solid var(--line);background:#fff;color:var(--ink);cursor:pointer}
.share a:hover,.share button:hover{border-color:var(--brand);color:var(--brand)}
.author-box{display:flex;gap:1rem;align-items:flex-start;margin-top:2rem;padding:1.25rem;background:var(--mist);border-radius:var(--r-m)}
.author-box img{border-radius:50%;object-fit:cover}
.author-box p{margin:0 0 .3rem;font-size:.98rem}
.post-nav{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:2rem}
.post-nav a{display:block;padding:1rem;border:1.5px solid var(--line);border-radius:var(--r-m);text-decoration:none;color:var(--ink)}
.post-nav a:hover{border-color:var(--brand)}
.post-nav small{display:block;color:var(--ink-3)}.post-nav span{font-family:var(--display);font-weight:600}
.post-nav__next{text-align:right;grid-column:2}
@media (max-width:600px){.post-nav{grid-template-columns:1fr}.post-nav__next{grid-column:auto}}

/* ---- forms ---- */
.lead-form__grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.field{display:flex;flex-direction:column;gap:.3rem;min-width:0}
.field--wide{grid-column:1/-1}
.field label{font-weight:600;font-size:.94rem}
.req{color:var(--err)}
.field input,.field select,.field textarea,.news input{width:100%;font:inherit;color:var(--ink);background:#fff;border:1.5px solid #B8CDCA;border-radius:var(--r-s);padding:.65rem .8rem;line-height:1.4}
.field textarea{resize:vertical;min-height:7rem}
.field input:focus,.field select:focus,.field textarea:focus,.news input:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px rgba(11,122,117,.2)}
.field [aria-invalid=true]{border-color:var(--err)}
.field__err{color:var(--err);font-size:.88rem;margin:0}
.form-note{font-size:.86rem;color:var(--ink-3);margin:1rem 0}
.form-status{margin:0 0 1rem;font-weight:500}
.form-status:empty{display:none}
.form-status.is-ok{padding:.75rem 1rem;background:#D9F2E7;color:#0D5F44;border-radius:var(--r-s)}
.form-status.is-err{padding:.75rem 1rem;background:#FBE5DA;color:#8B3209;border-radius:var(--r-s)}
.lead-form .btn{width:100%}
@media (max-width:520px){.lead-form__grid{grid-template-columns:1fr}}
.contact-cards{list-style:none;display:grid;gap:1.1rem;margin-top:2.25rem;padding-top:1.75rem;border-top:2px solid var(--ink)}
.contact-cards li{display:flex;gap:.9rem;align-items:flex-start}
.contact-cards svg{color:var(--brand);margin-top:.2rem}
.contact-cards strong{display:block}
.map{margin-top:1.75rem;border-radius:var(--r-m);overflow:hidden;border:1px solid var(--line)}
.map iframe{display:block;width:100%;height:320px;border:0}
.notfound h1{font-size:clamp(2rem,4vw,3rem)}
.notfound__h{margin-top:2.5rem;font-size:1.3rem}

/* ---- footer ---- */
.site-foot{background:var(--ink);color:#B9CFCC;padding-top:clamp(2.75rem,6vw,4.5rem);font-size:.98rem}
.site-foot__grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr) 1.3fr;gap:2rem clamp(1.25rem,3vw,2.5rem);padding-bottom:2.5rem}
.site-foot h2{font-size:1rem;color:#fff;margin-bottom:.8rem;font-family:var(--display)}
.site-foot ul{list-style:none;display:grid;gap:.45rem}
.site-foot a{color:#D3E4E1;text-decoration:none}
.site-foot a:hover{color:var(--accent);text-decoration:underline}
.site-foot__about p{margin:1rem 0;max-width:24rem}
.contact-list li{display:flex;gap:.6rem;align-items:flex-start}
.contact-list svg{margin-top:.28rem;color:var(--accent)}
.news__lead{margin-bottom:.8rem}
.news__row{display:flex;flex-direction:column;gap:.6rem;align-items:stretch}
.news input{background:#0F3A44;border-color:#2B5762;color:#fff}
.news input::placeholder{color:#8FB0B0}
.site-foot .form-status.is-ok{background:#0F4A3A;color:#BFF0DB}
.site-foot .form-status.is-err{background:#4A2110;color:#FFD5C0}
.site-foot__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem 1.5rem;padding-block:1.4rem;border-top:1px solid #1D4750;font-size:.9rem}
.site-foot__bar p{margin:0}
.social{display:flex;gap:.4rem}
.social a{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1.5px solid #2B5762}
@media (max-width:1000px){.site-foot__grid{grid-template-columns:repeat(2,1fr)}.site-foot__about{grid-column:1/-1}}
@media (max-width:560px){.site-foot__grid{grid-template-columns:1fr}}

/* ---- floating widgets ---- */
.wa-float{position:fixed;right:1rem;bottom:1rem;z-index:60;display:inline-flex;align-items:center;gap:.55rem;padding:.75rem;border-radius:99px;background:#1FA855;color:#fff;text-decoration:none;font-weight:600;box-shadow:0 10px 24px -8px rgba(0,0,0,.4)}
.wa-float span{max-width:0;overflow:hidden;white-space:nowrap;transition:max-width .25s,margin .25s}
.wa-float:hover span,.wa-float:focus-visible span{max-width:11rem;margin-right:.4rem}
.wa-float:hover{background:#178a45;color:#fff;text-decoration:none}
.cookie{position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:70;max-width:640px;margin-inline:auto;display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.25rem;padding:1rem 1.25rem;background:var(--ink);color:#DCEAE8;border-radius:var(--r-m);box-shadow:0 20px 40px -12px rgba(0,0,0,.5);font-size:.94rem}
.cookie[hidden]{display:none}
.cookie p{margin:0;flex:1 1 18rem}.cookie a{color:var(--accent)}
body:has(.cookie:not([hidden])) .wa-float{bottom:7.5rem}

/* ---- motion preferences ---- */
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media print{.site-head,.site-foot,.wa-float,.cookie,.cta-band,.announce{display:none!important}}