/* ==========================================================================
   Indonesia Crypto Scam Victims Support Centre
   Dressed as a case file: document paper, evidence tags, stage numbering,
   and a teal seal colour reserved for things that have been established.
   Red appears only where something is genuinely a warning.
   ========================================================================== */

:root{
  /* dark plates */
  --ink:       #0E1620;
  --ink-2:     #16232F;

  /* paper */
  --paper:     #F4F7F9;
  --paper-2:   #FFFFFF;
  --tint:      #EDF2F5;

  /* ink and rules */
  --text:      #17232E;
  --muted:     #5D6E7D;
  --dim:       #8698A7;
  --rule:      #DCE4EA;
  --rule-dark: rgba(255,255,255,.14);

  /* meaning */
  --seal:      #0C7A66;   /* established / verified */
  --seal-lt:   #16A085;
  --stamp:     #C0392B;   /* warning */
  --ochre:     #C8912F;   /* evidence highlight */
  --wa:        #25D366;

  --disp:  "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --body:  "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:  "Roboto Mono", ui-monospace, Consolas, monospace;

  /* The page runs edge to edge; these cap the reading measure inside each
     band, and widen in step with the viewport at the breakpoints below. */
  --gutter: 18px;
  --max:    980px;
  --wide:   1180px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font:400 16px/1.78 var(--body);
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:var(--seal); }

:focus-visible{ outline:3px solid var(--seal-lt); outline-offset:2px; }

.wrap{ background:var(--paper); }

/* ---------- type helpers ----------------------------------------------- */

.eyebrow{
  margin:0 0 14px;
  font:600 11px/1 var(--mono);
  letter-spacing:.2em;
  color:var(--seal);
}
.eyebrow--light{ color:var(--seal-lt); }

.mark{
  background:linear-gradient(180deg, transparent 58%, rgba(200,145,47,.35) 58%);
  font-weight:600;
}
.warn{ color:var(--stamp); }

/* ---------- buttons ----------------------------------------------------- */

.btn{
  display:flex; align-items:center; justify-content:center; gap:11px;
  width:100%;
  padding:16px 18px;
  border-radius:8px;
  font:600 16px/1.3 var(--body);
  text-decoration:none;
  text-align:left;
  transition:transform .15s ease, filter .15s ease, background-color .15s ease;
}
.btn__sub{
  display:block; margin-top:3px;
  font:400 12px/1.35 var(--body);
  opacity:.82;
}
.ico-wa{ width:28px; height:30px; flex:none; }

.btn--wa{
  background:var(--wa);
  color:#06301A;
  box-shadow:0 10px 22px -12px rgba(37,211,102,.9);
}
.btn--wa:hover{ filter:brightness(1.06); transform:translateY(-1px); }

.btn--call{
  background:var(--paper-2);
  color:var(--text);
  border:1.5px solid #C6D2DB;
}
.btn--call:hover{ border-color:var(--seal); color:var(--seal); }

.btn--lg{ padding:20px 22px; font-size:17px; }

/* ---------- header ------------------------------------------------------ */

.head{
  position:sticky; top:0; z-index:60;
  background:var(--ink);
  border-bottom:1px solid var(--rule-dark);
}
.head__in{
  max-width:var(--wide); margin:0 auto;
  padding:9px var(--gutter);
  display:flex; align-items:center; gap:12px;
}

.brand{ display:flex; align-items:center; gap:9px; text-decoration:none; margin-right:auto; min-width:0; }
.brand__seal{ width:26px; flex:none; }
.brand__name{
  display:block;
  font:700 12.5px/1.22 var(--disp);
  letter-spacing:-.005em;
  color:#F2F6F8;
}
.brand__sub{
  display:none;
  margin-top:4px;
  font:500 8.5px/1 var(--mono);
  letter-spacing:.16em;
  color:#7E93A4;
}

.head__cta{
  display:flex; align-items:center; gap:7px;
  flex:none;
  padding:9px 13px;
  border-radius:7px;
  background:var(--wa);
  color:#06301A;
  font:700 12.5px/1 var(--body);
  text-decoration:none;
  white-space:nowrap;
}
.head__cta .ico-wa{ width:18px; height:19px; }

/* ---------- first view --------------------------------------------------- */

.fv{
  padding:44px var(--gutter) 52px;
  color:#EAF0F4;
  background:
    linear-gradient(180deg, rgba(14,22,32,.72) 0%, rgba(14,22,32,.9) 55%, var(--ink) 100%),
    url("../images/hero-bg.jpg") center 30% / cover no-repeat;
}
.fv__in{ max-width:var(--max); margin:0 auto; }

.fv__chips{
  display:flex; flex-wrap:wrap; gap:7px;
  margin:0 0 26px; padding:0; list-style:none;
}
.fv__chips li{
  padding:5px 11px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:999px;
  font:500 11.5px/1 var(--body);
  color:#B9C9D5;
}

.fv__kicker{
  display:flex; align-items:center; gap:9px;
  margin:0 0 16px;
  font:600 11px/1 var(--mono);
  letter-spacing:.2em;
  color:var(--seal-lt);
}
.fv__tick{ width:20px; height:1px; background:var(--seal-lt); flex:none; }

.fv__title{
  margin:0 0 20px;
  font:800 clamp(29px,7.4vw,50px)/1.13 var(--disp);
  letter-spacing:-.022em;
}
.fv__title em{
  font-style:normal;
  color:#78D8C4;
}

.fv__lead{
  margin:0 0 30px;
  max-width:48ch;
  color:#BCCBD6;
  font-size:16px;
}

.fv__badges{
  display:grid; gap:1px;
  margin:0 0 24px; padding:0; list-style:none;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.14);
  border-radius:10px;
  overflow:hidden;
}
.badge{ padding:16px 16px; background:rgba(255,255,255,.04); }
.badge__num{
  display:block;
  font:700 30px/1 var(--disp);
  color:#FFFFFF;
  letter-spacing:-.02em;
}
.badge__num small{
  font:500 12px/1 var(--mono);
  color:#8FB6AE;
  margin-left:4px;
}
.badge__lb{
  display:block; margin-top:7px;
  font-size:12.5px; line-height:1.5;
  color:#9BAFBD;
}

.fv__note{
  margin:0;
  padding:14px 16px;
  border-left:3px solid rgba(192,57,43,.85);
  background:rgba(0,0,0,.28);
  font-size:12.5px; line-height:1.65;
  color:#A9BAC7;
}

/* ---------- CTA bands ---------------------------------------------------- */

.cta{
  padding:46px var(--gutter) 50px;
  background:var(--ink-2);
  color:#EAF0F4;
  text-align:center;
}
.cta--alt{ background:var(--ink); }
.cta__in{ max-width:640px; margin:0 auto; }

.cta__flag{
  display:inline-block;
  margin:0 0 16px;
  padding:5px 13px;
  border-radius:999px;
  background:var(--stamp);
  color:#fff;
  font:700 11.5px/1 var(--body);
  letter-spacing:.06em;
  text-transform:uppercase;
}
.cta__title{
  margin:0 0 12px;
  font:700 clamp(22px,5.6vw,31px)/1.28 var(--disp);
  letter-spacing:-.015em;
}
.cta__sub{ margin:0 0 26px; color:#A9BAC7; font-size:14.5px; }

.cta__card{
  padding:22px 18px;
  border-radius:12px;
  background:var(--paper-2);
  color:var(--text);
  box-shadow:0 24px 50px -26px rgba(0,0,0,.7);
  text-align:left;
}
.cta__label{
  margin:0 0 14px;
  font:600 10.5px/1 var(--mono);
  letter-spacing:.18em;
  color:var(--dim);
  text-transform:uppercase;
  text-align:center;
}
.cta__stack{ display:grid; gap:12px; }
.cta__or{
  margin:0;
  font:500 12px/1 var(--mono);
  color:var(--dim);
  text-align:center;
}
.cta__hours{
  margin:18px 0 0;
  padding-top:16px;
  border-top:1px solid var(--rule);
  font-size:13px; line-height:1.6;
  color:var(--muted);
  text-align:center;
}
.cta__hours strong{ color:var(--text); }

/* ---------- generic section --------------------------------------------- */

.sec{ padding:52px var(--gutter) 56px; }
.sec--tint{ background:var(--tint); }

.sec__head{ max-width:var(--max); margin:0 auto 30px; }
.sec__title{
  margin:0 0 12px;
  font:700 clamp(23px,5.8vw,34px)/1.22 var(--disp);
  letter-spacing:-.02em;
  max-width:22ch;
}
.sec__sub{ margin:0; max-width:56ch; color:var(--muted); font-size:14.8px; }
.sec__body{ max-width:var(--max); margin:0 auto; }

.lede{
  margin:0 0 28px;
  font-size:16.5px; line-height:1.8;
  color:#2A3A47;
}
.lede b{ color:var(--text); }

.band{
  margin:0 0 28px;
  border-radius:10px;
  overflow:hidden;
  border:1px solid var(--rule);
  background:var(--paper-2);
}
.band img{ width:100%; }
.band figcaption{
  padding:11px 15px;
  font:400 12.5px/1.55 var(--body);
  color:var(--muted);
  border-top:1px solid var(--rule);
}

.notes{ margin:24px 0 0; padding:0; list-style:none; }
.notes li{
  position:relative;
  padding-left:20px;
  margin-bottom:11px;
  font-size:13.5px; line-height:1.7;
  color:var(--muted);
}
.notes li::before{
  content:""; position:absolute; left:0; top:.78em;
  width:10px; height:1px; background:var(--seal);
}
.notes b{ color:var(--stamp); }

/* ---------- case patterns ------------------------------------------------ */

.pattern{
  margin-bottom:22px;
  background:var(--paper-2);
  border:1px solid var(--rule);
  border-radius:10px;
  overflow:hidden;
}
.pattern__title{
  margin:0;
  padding:16px 18px;
  background:var(--ink);
  color:#fff;
  font:700 17px/1.35 var(--disp);
  letter-spacing:-.012em;
}
.pattern__tag{
  display:block;
  margin-bottom:6px;
  font:600 10.5px/1 var(--mono);
  letter-spacing:.18em;
  color:var(--seal-lt);
}
.pattern__fig{ margin:0; }
.pattern__body{ padding:18px; }
.pattern__body p{ margin:0; font-size:14.8px; color:#31414E; }

/* ---------- still worth investigating box -------------------------------- */

.checkbox{
  position:relative;
  margin-top:8px;
  padding:26px 18px 20px;
  background:var(--paper-2);
  border:2px solid var(--seal);
  border-radius:10px;
}
.checkbox__tag{
  position:absolute; top:-12px; left:14px;
  margin:0;
  padding:4px 12px;
  border-radius:999px;
  background:var(--seal);
  color:#fff;
  font:700 11px/1.4 var(--body);
}
.checks{ margin:0; padding:0; list-style:none; }
.checks li{
  position:relative;
  padding:9px 0 9px 30px;
  border-bottom:1px dashed var(--rule);
  font-size:14.5px; line-height:1.6;
}
.checks li:last-child{ border-bottom:0; }
.checks li::before{
  content:""; position:absolute; left:4px; top:1.02em;
  width:11px; height:6px;
  border-left:2.5px solid var(--seal);
  border-bottom:2.5px solid var(--seal);
  transform:rotate(-45deg);
}
.checkbox__foot{
  margin:16px 0 0;
  padding-top:14px;
  border-top:1px solid var(--rule);
  font-size:13.5px;
  color:var(--muted);
}

/* ---------- the trace chain (signature) ---------------------------------- */

.trace{
  padding:56px var(--gutter) 60px;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(12,122,102,.2), transparent 62%),
    var(--ink);
  color:#E7EEF2;
}
.trace__in{ max-width:var(--wide); margin:0 auto; }
.trace__title{
  margin:0 0 12px;
  font:700 clamp(23px,5.8vw,34px)/1.22 var(--disp);
  letter-spacing:-.02em;
  max-width:22ch;
}
.trace__sub{ margin:0 0 38px; max-width:56ch; color:#9FB4C1; font-size:14.8px; }

.chain{
  position:relative;
  margin:0; padding:0 0 0 26px;
  list-style:none;
}
/* the rail the money runs along */
.chain::before,
.chain::after{
  content:"";
  position:absolute; left:5px; top:8px; bottom:8px;
  width:2px;
  border-radius:2px;
}
.chain::before{ background:rgba(255,255,255,.13); }
.chain::after{
  background:linear-gradient(180deg, var(--seal-lt), #6FD9C2);
  transform:scaleY(0); transform-origin:top;
  transition:transform 1.5s cubic-bezier(.35,.75,.35,1);
}
.chain.is-on::after{ transform:scaleY(1); }

.hop{ position:relative; padding:0 0 26px; }
.hop:last-child{ padding-bottom:0; }

.hop__dot{
  position:absolute; left:-26px; top:6px;
  width:12px; height:12px;
  border-radius:50%;
  background:var(--ink);
  border:2px solid rgba(255,255,255,.28);
  transition:border-color .4s ease, box-shadow .4s ease, background-color .4s ease;
}
.chain.is-on .hop__dot{
  background:var(--seal-lt);
  border-color:#6FD9C2;
  box-shadow:0 0 0 4px rgba(22,160,133,.2);
}
.hop:nth-child(1) .hop__dot{ transition-delay:.12s; }
.hop:nth-child(2) .hop__dot{ transition-delay:.42s; }
.hop:nth-child(3) .hop__dot{ transition-delay:.72s; }
.hop:nth-child(4) .hop__dot{ transition-delay:1.02s; }
.hop:nth-child(5) .hop__dot{ transition-delay:1.32s; }

.hop__stage{
  margin:0 0 6px;
  font:600 10px/1 var(--mono);
  letter-spacing:.17em;
  color:#7E96A6;
}
.hop__title{
  margin:0 0 7px;
  font:700 17px/1.3 var(--disp);
  letter-spacing:-.012em;
  color:#fff;
}
.hop__text{ margin:0 0 10px; font-size:14px; line-height:1.65; color:#9FB4C1; }
.hop__ev{
  margin:0;
  padding:8px 11px;
  border-left:2px solid rgba(22,160,133,.6);
  background:rgba(22,160,133,.09);
  font:500 12.5px/1.55 var(--body);
  color:#8FD5C4;
}

.hop.is-key .hop__title{ color:#78D8C4; }
.hop.is-key .hop__ev{
  border-left-color:var(--seal-lt);
  background:rgba(22,160,133,.17);
  color:#A9E6D8;
}

.trace__fine{
  margin:32px 0 0;
  padding-top:18px;
  border-top:1px solid var(--rule-dark);
  font-size:12.8px; line-height:1.7;
  color:#7E96A6;
  max-width:70ch;
}

/* ---------- reasons ------------------------------------------------------ */

.reason{
  margin-bottom:22px;
  background:var(--paper-2);
  border:1px solid var(--rule);
  border-radius:10px;
  overflow:hidden;
}
.reason__title{
  display:flex; align-items:flex-start; gap:12px;
  margin:0;
  padding:16px 18px;
  border-bottom:1px solid var(--rule);
  font:700 17px/1.35 var(--disp);
  letter-spacing:-.012em;
}
.reason__no{
  flex:none;
  min-width:30px; height:30px;
  display:grid; place-items:center;
  border-radius:6px;
  background:var(--ink);
  color:#78D8C4;
  font:600 12px/1 var(--mono);
}
.reason__fig{ margin:0; }
.reason__body{ padding:18px; }
.reason__body p{ margin:0; font-size:14.8px; color:#31414E; }
.reason__body b{ color:var(--text); font-weight:700; }

/* ---------- fees ---------------------------------------------------------- */

.fee{
  padding:26px 20px;
  border:1px solid var(--rule);
  border-radius:12px;
  background:var(--paper-2);
  text-align:center;
}
.fee__lb{
  margin:0;
  font:600 11px/1 var(--mono);
  letter-spacing:.16em;
  color:var(--dim);
  text-transform:uppercase;
}
.fee__free{
  margin:14px 0 12px;
  font:800 62px/1 var(--disp);
  letter-spacing:-.03em;
  color:var(--seal);
}
.fee__free small{ font-size:24px; margin-right:3px; vertical-align:.32em; }
.fee__note{ margin:0 auto; max-width:44ch; font-size:14px; color:var(--muted); }

.fee__row{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:6px 14px;
  margin-top:22px; padding-top:18px;
  border-top:1px solid var(--rule);
  text-align:left;
}
.fee__row-lb{ font:600 15px/1.3 var(--disp); }
.fee__row-val{ font-size:14px; color:var(--muted); }
.fee__row-val b{ color:var(--text); font-size:19px; }

/* ---------- process steps ------------------------------------------------- */

.steps{ margin:0; padding:0; list-style:none; }
.step{
  display:grid; grid-template-columns:auto 1fr; gap:16px;
  padding:22px 0;
  border-top:1px solid var(--rule);
}
.step:last-child{ border-bottom:1px solid var(--rule); }
.step__no{
  width:34px; height:34px;
  display:grid; place-items:center;
  border-radius:50%;
  background:var(--seal);
  color:#fff;
  font:600 14px/1 var(--mono);
}
.step__title{ margin:0 0 7px; font:700 17px/1.3 var(--disp); letter-spacing:-.012em; }
.step__body p{ margin:0 0 8px; font-size:14.6px; color:#31414E; }
.step__body p:last-child{ margin-bottom:0; }
.step__meta{
  font:600 10.5px/1 var(--mono) !important;
  letter-spacing:.14em;
  color:var(--dim) !important;
  text-transform:uppercase;
}

/* ---------- voices --------------------------------------------------------- */

.voice{
  margin-bottom:20px;
  background:var(--paper-2);
  border:1px solid var(--rule);
  border-radius:10px;
  overflow:hidden;
}
.voice__head{ padding:18px; border-bottom:1px solid var(--rule); background:var(--tint); }
.voice__title{
  margin:0 0 14px;
  font:700 18px/1.35 var(--disp);
  letter-spacing:-.015em;
}
.voice__meta{ display:flex; align-items:center; gap:11px; }
.voice__avatar{
  width:38px; height:38px; flex:none;
  display:grid; place-items:center;
  border-radius:50%;
  background:var(--ink);
  color:#78D8C4;
  font:700 15px/1 var(--disp);
}
.voice__who{ font-size:12.5px; line-height:1.5; color:var(--muted); }
.voice__tag{
  display:inline-block;
  margin-top:4px;
  padding:2px 8px;
  border-radius:4px;
  background:rgba(12,122,102,.1);
  color:var(--seal);
  font:600 11px/1.5 var(--body);
}

.voice__body{ padding:18px; }
.voice__clip{
  position:relative;
  max-height:190px;
  overflow:hidden;
}
.voice__clip::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:74px;
  background:linear-gradient(180deg, rgba(255,255,255,0), var(--paper-2));
  pointer-events:none;
}
.voice__clip.is-open{ max-height:none; }
.voice__clip.is-open::after{ display:none; }
.voice__clip p{ margin:0 0 13px; font-size:14.6px; line-height:1.8; color:#31414E; }
.voice__clip p:last-child{ margin-bottom:0; }

.voice__more{
  margin-top:14px;
  padding:10px 16px;
  width:100%;
  border:1.5px solid var(--rule);
  border-radius:7px;
  background:transparent;
  color:var(--seal);
  font:600 13.5px/1 var(--body);
  cursor:pointer;
}
.voice__more:hover{ border-color:var(--seal); }

.voices__fine{
  margin:22px 0 0;
  font-size:12.5px; line-height:1.7;
  color:var(--dim);
}

/* ---------- faq ------------------------------------------------------------ */

.faq{
  border:1px solid var(--rule);
  border-radius:10px;
  overflow:hidden;
  background:var(--paper-2);
}
.faq__item + .faq__item{ border-top:1px solid var(--rule); }

.faq__q{
  position:relative;
  width:100%;
  padding:18px 46px 18px 18px;
  border:0; background:none;
  color:var(--text);
  font:700 15.5px/1.45 var(--disp);
  letter-spacing:-.01em;
  text-align:left;
  cursor:pointer;
}
.faq__q::before,
.faq__q::after{
  content:""; position:absolute; right:18px; top:50%;
  width:13px; height:2px;
  background:var(--seal);
  transition:transform .22s ease;
}
.faq__q::before{ transform:rotate(90deg); }
.faq__item.is-open .faq__q::before{ transform:rotate(0); }

.faq__a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .28s ease; }
.faq__item.is-open .faq__a{ grid-template-rows:1fr; }
.faq__a > div{ overflow:hidden; }
.faq__a p{
  margin:0;
  padding:0 18px 20px;
  font-size:14.5px; line-height:1.78;
  color:#31414E;
}
.faq__a b{ color:var(--text); font-weight:700; }

/* ---------- closing contact ---------------------------------------------- */

.final{
  padding:56px var(--gutter) 62px;
  color:#EAF0F4;
  text-align:center;
  background:
    linear-gradient(180deg, rgba(14,22,32,.9), rgba(14,22,32,.95)),
    url("../images/form-bg.jpg") center 35% / cover no-repeat;
}
.final__in{ max-width:660px; margin:0 auto; }

.final__flag{
  margin:0 0 14px;
  font:600 11px/1.5 var(--mono);
  letter-spacing:.18em;
  color:var(--seal-lt);
  text-transform:uppercase;
}
.final__title{
  margin:0 0 14px;
  font:700 clamp(26px,6.4vw,40px)/1.18 var(--disp);
  letter-spacing:-.022em;
}
.final__lead{
  margin:0 auto 28px;
  max-width:52ch;
  color:#A9BAC7;
  font-size:15.5px;
}
.final__acts{ display:grid; gap:12px; text-align:left; }
.final__acts .btn--call{
  background:transparent;
  color:#EAF0F4;
  border-color:rgba(255,255,255,.28);
}
.final__acts .btn--call:hover{ border-color:var(--seal-lt); color:#78D8C4; }

.final__note{
  margin:26px 0 0;
  padding-top:20px;
  border-top:1px solid var(--rule-dark);
  font-size:12.8px; line-height:1.7;
  color:#8AA0AE;
}

/* ---------- centre details ----------------------------------------------- */

.centre{ padding:52px var(--gutter) 56px; }
.centre__in{ max-width:var(--max); margin:0 auto; }

.centre__mark{
  display:flex; align-items:center; gap:14px;
  margin-bottom:24px;
  padding-bottom:22px;
  border-bottom:2px solid var(--ink);
}
.centre__mark img{ width:44px; flex:none; }
.centre__name{ margin:0; font:700 17px/1.3 var(--disp); letter-spacing:-.015em; }
.centre__en{
  margin:5px 0 0;
  font:500 9.5px/1.4 var(--mono);
  letter-spacing:.14em;
  color:var(--dim);
}

.centre__row{
  display:grid; gap:3px;
  margin:0;
  padding:14px 0;
  border-bottom:1px solid var(--rule);
}
.centre__row dt{
  font:600 10.5px/1 var(--mono);
  letter-spacing:.16em;
  color:var(--dim);
  text-transform:uppercase;
}
.centre__row dd{ margin:0; font-size:14.8px; line-height:1.6; }
.centre__row a{ color:var(--seal); font-weight:600; }

/* ---------- footer -------------------------------------------------------- */

.foot{
  padding:34px var(--gutter) 110px;
  background:var(--ink);
  color:#93A6B4;
}
.foot__nav{
  display:flex; flex-wrap:wrap; gap:8px 22px;
  max-width:var(--max); margin:0 auto 22px;
}
.foot__nav a{ color:#C4D2DB; font-size:13.5px; text-decoration:none; }
.foot__nav a:hover{ color:#78D8C4; }

.foot__disc{
  max-width:var(--max);
  margin:0 auto 18px;
  padding-top:20px;
  border-top:1px solid var(--rule-dark);
  font-size:12.3px; line-height:1.75;
}
.foot__disc b{ color:#C4D2DB; }

.foot__copy{
  display:block;
  max-width:var(--max); margin:0 auto;
  font:400 11.5px/1 var(--mono);
  color:#61798A;
}

/* ---------- fixed bar ------------------------------------------------------ */

.bar{
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  padding:9px var(--gutter) calc(9px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(8px);
  border-top:1px solid var(--rule);
  transform:translateY(110%);
  transition:transform .28s ease;
}
.bar.is-on{ transform:translateY(0); }
.bar__in{
  max-width:var(--max); margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; gap:9px;
}
.bar .btn{ padding:13px 10px; font-size:14px; justify-content:center; }
.bar .ico-wa{ width:20px; height:22px; }

/* ---------- leaving prompt -------------------------------------------------- */

.pop{ position:fixed; inset:0; z-index:90; display:none; }
.pop.is-on{ display:block; }
.pop__scrim{ position:absolute; inset:0; background:rgba(6,12,18,.72); }
.pop__box{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:min(420px, calc(100vw - 32px));
  max-height:calc(100vh - 40px);
  overflow-y:auto;
  padding:28px 22px 22px;
  border-radius:14px;
  background:var(--paper-2);
  box-shadow:0 34px 70px -24px rgba(0,0,0,.75);
  text-align:center;
}
.pop__x{
  position:absolute; top:8px; right:10px;
  width:34px; height:34px;
  border:0; background:none;
  color:var(--dim);
  font-size:26px; line-height:1;
  cursor:pointer;
}
.pop__eyebrow{
  margin:0 0 10px;
  font:600 10.5px/1 var(--mono);
  letter-spacing:.2em;
  color:var(--seal);
}
.pop__title{ margin:0 0 12px; font:700 24px/1.25 var(--disp); letter-spacing:-.02em; }
.pop__text{ margin:0 0 20px; font-size:14.3px; color:var(--muted); }
.pop__later{
  margin-top:12px;
  border:0; background:none;
  color:var(--dim);
  font-size:13px;
  text-decoration:underline;
  cursor:pointer;
}

/* ==========================================================================
   Wider viewports
   ========================================================================== */

@media (min-width:560px){
  :root{ --gutter:26px; }
  .brand__sub{ display:block; }
  .brand__seal{ width:32px; }
  .brand__name{ font-size:14px; }
  .fv__badges{ grid-template-columns:repeat(3,1fr); }
  .cta__card{ padding:26px 24px; }
  .final__acts{ grid-template-columns:1fr 1fr; }
  .centre__row{ grid-template-columns:180px 1fr; gap:16px; align-items:baseline; }
}

@media (min-width:900px){
  :root{ --gutter:40px; }
  .fv{ padding:82px var(--gutter) 88px; }
  .fv__title br{ display:block; }
  .sec{ padding:84px var(--gutter); }
  .sec__head{ margin-bottom:44px; }
  .cta{ padding:72px var(--gutter); }
  .trace{ padding:88px var(--gutter); }
  .centre{ padding:84px var(--gutter); }
  .final{ padding:96px var(--gutter); }

  /* picture beside the account of it, rather than stacked — halves the
     scroll depth through nine illustrated cards */
  .pattern,
  .reason{
    display:grid;
    grid-template-columns:minmax(0,42%) minmax(0,1fr);
  }
  .pattern__title,
  .reason__title{ grid-column:1 / -1; padding:20px 26px; font-size:19px; }
  .pattern__fig,
  .reason__fig{ height:100%; }
  .pattern__fig img,
  .reason__fig img{ height:100%; width:100%; object-fit:cover; min-height:230px; }
  .pattern__body,
  .reason__body{
    display:flex; align-items:center;
    padding:26px 28px;
    border-left:1px solid var(--rule);
  }

  /* free-standing photographs stay a band, not a wall */
  .band img{ max-height:380px; object-fit:cover; }
  .band--sm img{ max-height:300px; }
  .voice__head,
  .voice__body{ padding:26px; }
  .faq__q{ padding:22px 52px 22px 26px; font-size:16.5px; }
  .faq__a p{ padding:0 26px 24px; }
  .checkbox{ padding:32px 26px 26px; }
  .fee{ padding:38px 32px; }

  /* the chain becomes a five stage flow diagram */
  .chain{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:24px;
    padding:34px 0 0;
  }
  .chain::before,
  .chain::after{
    left:0; right:0; top:5px; bottom:auto;
    width:auto; height:2px;
  }
  .chain::after{
    background:linear-gradient(90deg, var(--seal-lt), #6FD9C2);
    transform:scaleX(0); transform-origin:left;
  }
  .chain.is-on::after{ transform:scaleX(1); }

  .hop{ padding:0; }
  .hop__body{ display:flex; flex-direction:column; height:100%; }
  .hop__ev{ margin-top:auto; }   /* evidence tags line up along the bottom */
  .hop__dot{ left:0; top:-34px; }
  .hop__title{ font-size:16px; }
  .hop__text{ font-size:13.3px; }
  .hop__ev{ font-size:11.8px; }

  .foot{ padding-bottom:44px; }
  .bar{ display:none; }
}

/* Large screens: the page is edge to edge, so the reading measure, the gutters
   and the base type all grow with the viewport rather than stranding the
   content in a narrow column. */
@media (min-width:1280px){
  :root{ --gutter:56px; --max:1140px; --wide:1400px; }
  .fv{
    /* fills a normal screen, but does not open a void on a very tall one */
    min-height:clamp(560px, calc(100vh - 62px), 880px);
    display:grid; align-content:center;
  }
  .fv__in{ width:100%; }
  .fv__lead{ font-size:17px; }
  .cta__in{ max-width:720px; }
  .final__in{ max-width:820px; }
}

@media (min-width:1700px){
  :root{ --gutter:88px; --max:1340px; --wide:1680px; }
  body{ font-size:17px; }
  .cta__in{ max-width:820px; }
  .final__in{ max-width:900px; }
  .band img{ max-height:460px; }
  .band--sm img{ max-height:360px; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .chain::after{ transform:none !important; }
}

/* ==========================================================================
   2026 visual + motion refinement
   The interface stays calm and evidence-led: paper texture, measured depth,
   gentle chapter reveals and clear interaction feedback rather than spectacle.
   ========================================================================== */

:root{
  --page-progress:0;
  --ease-out:cubic-bezier(.2,.78,.2,1);
  --seal-glow:rgba(22,160,133,.2);
  --lift-shadow:0 24px 56px -42px rgba(14,22,32,.62);
}

body{
  background:
    radial-gradient(900px 600px at 8% 12%, rgba(22,160,133,.04), transparent 68%),
    #E8EEF2;
}
.wrap{
  position:relative;
  box-shadow:0 0 80px -58px rgba(14,22,32,.46);
}
.wrap::before{
  content:"";
  position:fixed; inset:0; z-index:80;
  pointer-events:none;
  opacity:.12;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.84' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.1'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}

.head{
  background:rgba(14,22,32,.94);
  backdrop-filter:blur(14px) saturate(1.15);
  box-shadow:0 16px 40px rgba(5,10,15,.08);
  transition:box-shadow .25s ease, background-color .25s ease;
}
.head.is-scrolled{
  background:rgba(14,22,32,.975);
  box-shadow:0 18px 46px rgba(5,10,15,.2);
}
.head::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-1px;
  height:2px;
  background:linear-gradient(90deg, var(--seal-lt), #78D8C4);
  box-shadow:0 0 16px var(--seal-glow);
  transform:scaleX(var(--page-progress));
  transform-origin:left;
  will-change:transform;
}
.brand__seal{
  filter:drop-shadow(0 7px 12px rgba(0,0,0,.24));
  transition:transform .42s var(--ease-out), filter .42s ease;
}
.brand:hover .brand__seal{
  transform:translateY(-2px) rotate(-2deg);
  filter:drop-shadow(0 9px 16px rgba(22,160,133,.24));
}

.fv{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:
    linear-gradient(90deg, rgba(14,22,32,.96) 0%, rgba(14,22,32,.84) 50%, rgba(14,22,32,.66) 100%),
    url("../images/hero-bg.jpg") center 30% / cover no-repeat;
}
.fv::before{
  content:"";
  position:absolute; z-index:-1;
  width:700px; height:700px; right:-250px; top:-390px;
  border:1px solid rgba(120,216,196,.14);
  border-radius:50%;
  box-shadow:
    0 0 0 86px rgba(120,216,196,.025),
    0 0 0 172px rgba(120,216,196,.02),
    0 0 0 258px rgba(120,216,196,.014);
  animation:case-radar 13s ease-in-out infinite alternate;
}
.fv::after{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(110deg, transparent 0 55%, rgba(120,216,196,.055) 55.1%, transparent 55.4%);
  opacity:.75;
}
.fv__in{ position:relative; z-index:1; }

@keyframes case-radar{
  from{ opacity:.5; transform:scale(.94); }
  to{ opacity:1; transform:scale(1.06); }
}
@keyframes case-in{
  from{ opacity:0; transform:translateY(20px); }
  to{ opacity:1; transform:none; }
}
.motion-ready .fv__chips,
.motion-ready .fv__kicker,
.motion-ready .fv__title,
.motion-ready .fv__lead,
.motion-ready .fv__badges,
.motion-ready .fv__note{
  animation:case-in .72s var(--ease-out) both;
}
.motion-ready .fv__kicker{ animation-delay:.06s; }
.motion-ready .fv__title{ animation-delay:.11s; }
.motion-ready .fv__lead{ animation-delay:.17s; }
.motion-ready .fv__badges{ animation-delay:.23s; }
.motion-ready .fv__note{ animation-delay:.3s; }

.fv__chips li,
.badge{
  transition:transform .3s var(--ease-out), border-color .3s ease, background-color .3s ease;
}
.fv__chips li:hover{
  transform:translateY(-2px);
  border-color:rgba(120,216,196,.46);
  background:rgba(22,160,133,.1);
  color:#DCE9EE;
}
.badge:hover{
  transform:translateY(-3px);
  background:rgba(255,255,255,.075);
}

.btn,
.head__cta{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  transition:transform .2s var(--ease-out), filter .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.btn::after,
.head__cta::after{
  content:"";
  position:absolute; z-index:-1; inset:-2px;
  background:linear-gradient(105deg, transparent 35%, rgba(255,255,255,.28) 49%, transparent 63%);
  transform:translateX(-125%);
  transition:transform .64s var(--ease-out);
}
.btn:hover::after,
.head__cta:hover::after{ transform:translateX(125%); }
.btn:active,
.head__cta:active{ transform:translateY(1px) scale(.986); }
.btn--wa,
.head__cta{
  box-shadow:0 14px 28px -18px rgba(37,211,102,.95), inset 0 1px 0 rgba(255,255,255,.28);
}
.btn--wa:hover,
.head__cta:hover{
  box-shadow:0 18px 34px -18px rgba(37,211,102,.9), 0 0 0 1px rgba(37,211,102,.14), inset 0 1px 0 rgba(255,255,255,.3);
}

.cta__card,
.pattern,
.checkbox,
.reason,
.fee,
.voice,
.faq,
.centre__in{
  position:relative;
  box-shadow:var(--lift-shadow);
}
.cta__card::before,
.fee::before{
  content:"";
  position:absolute; left:0; right:0; top:0;
  height:3px;
  background:linear-gradient(90deg, var(--seal), var(--seal-lt), transparent 88%);
  border-radius:inherit;
}
.pattern,
.reason,
.voice,
.checkbox,
.fee{
  transition:transform .34s var(--ease-out), border-color .3s ease, box-shadow .34s ease;
}
.pattern:hover,
.reason:hover,
.voice:hover,
.checkbox:hover,
.fee:hover{
  transform:translateY(-5px);
  border-color:#C9D7DF;
  box-shadow:0 30px 64px -42px rgba(14,22,32,.72);
}
.pattern__fig,
.reason__fig,
.band{
  overflow:hidden;
}
.pattern__fig img,
.reason__fig img,
.band img{
  transition:transform .8s var(--ease-out), filter .5s ease;
}
.pattern:hover .pattern__fig img,
.reason:hover .reason__fig img,
.band:hover img{
  transform:scale(1.025);
  filter:saturate(1.04) contrast(1.02);
}
.reason__no,
.step__no{
  transition:transform .3s var(--ease-out), color .3s ease, background-color .3s ease;
}
.reason:hover .reason__no,
.step:hover .step__no{ transform:translateY(-2px); color:var(--seal); }
.step{
  transition:background-color .26s ease, padding-left .3s var(--ease-out);
}
.step:hover{
  background:linear-gradient(90deg, rgba(12,122,102,.045), transparent 75%);
  padding-left:8px;
}
.faq__q{ transition:color .22s ease, background-color .22s ease; }
.faq__q:hover{ color:var(--seal); background:rgba(12,122,102,.025); }
.faq__item.is-open{ background:rgba(12,122,102,.022); }

.chain{
  filter:drop-shadow(0 16px 30px rgba(0,0,0,.1));
}
.hop__body{
  transition:transform .3s var(--ease-out), background-color .3s ease, border-color .3s ease;
}
.hop:hover .hop__body{ transform:translateY(-4px); }
.chain.is-on .hop__dot{ box-shadow:0 0 0 5px rgba(22,160,133,.12), 0 0 22px rgba(22,160,133,.24); }

.motion-ready .reveal-item{
  opacity:0;
  transform:translateY(24px);
  transition:
    opacity .72s var(--ease-out) var(--reveal-delay,0ms),
    transform .72s var(--ease-out) var(--reveal-delay,0ms);
}
.motion-ready .reveal-item.is-visible{
  opacity:1;
  transform:none;
}

.final{
  position:relative;
  overflow:hidden;
}
.final::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 0%, rgba(120,216,196,.13), transparent 48%),
    repeating-radial-gradient(circle at 50% 5%, transparent 0 55px, rgba(120,216,196,.025) 56px 57px);
}
.final__in{ position:relative; }

.pop__scrim{ animation:pop-fade .2s ease both; backdrop-filter:blur(3px); }
.pop__box{ animation:pop-rise .34s var(--ease-out) both; }
@keyframes pop-fade{ from{opacity:0} to{opacity:1} }
@keyframes pop-rise{
  from{ opacity:0; transform:translate(-50%, calc(-50% + 18px)) scale(.98); }
  to{ opacity:1; transform:translate(-50%,-50%) scale(1); }
}
.bar.is-on .bar__in{ animation:bar-rise .4s var(--ease-out) both; }
@keyframes bar-rise{
  from{ opacity:0; transform:translateY(12px); }
  to{ opacity:1; transform:none; }
}

@media (hover:none){
  .pattern:hover,
  .reason:hover,
  .voice:hover,
  .checkbox:hover,
  .fee:hover,
  .badge:hover{ transform:none; }
  .step:hover{ padding-left:0; }
}

@media (max-width:559px){
  .fv::before{ width:430px; height:430px; right:-270px; top:-210px; }
  .fv::after{ opacity:.35; }
  .wrap::before{ opacity:.08; }
}

@media (prefers-reduced-motion:reduce){
  .fv::before{ animation:none !important; }
  .motion-ready .fv__chips,
  .motion-ready .fv__kicker,
  .motion-ready .fv__title,
  .motion-ready .fv__lead,
  .motion-ready .fv__badges,
  .motion-ready .fv__note,
  .motion-ready .reveal-item{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
  }
  .head::after{ transition:none; }
}

/* ==========================================================================
   Light theme
   A bright, reassuring case-file palette replaces the dark campaign bands.
   The Jakarta image now appears as a distinct hero visual with readable copy.
   ========================================================================== */

body{
  background:
    radial-gradient(900px 600px at 8% 10%, rgba(22,160,133,.065), transparent 68%),
    #EAF0F3;
}
.wrap{ background:#F8FAFB; }
.wrap::before{ opacity:.055; }

.head,
.head.is-scrolled{
  background:rgba(255,255,255,.94);
  border-bottom-color:#DCE5E9;
}
.head{ box-shadow:0 16px 40px rgba(25,44,55,.06); }
.head.is-scrolled{ box-shadow:0 18px 46px rgba(25,44,55,.12); }
.brand__name{ color:#172832; }
.brand__sub{ color:#748893; }
.brand__seal{ filter:drop-shadow(0 7px 12px rgba(27,59,54,.14)); }

.fv{
  color:var(--text);
  background:
    radial-gradient(640px 460px at 82% 10%, rgba(22,160,133,.1), transparent 70%),
    linear-gradient(180deg, #FFFFFF 0%, #F3F7F8 100%);
  border-bottom:1px solid var(--rule);
}
.fv::before{
  border-color:rgba(12,122,102,.12);
  box-shadow:
    0 0 0 86px rgba(12,122,102,.02),
    0 0 0 172px rgba(12,122,102,.016),
    0 0 0 258px rgba(12,122,102,.012);
}
.fv::after{
  background:linear-gradient(110deg, transparent 0 55%, rgba(12,122,102,.035) 55.1%, transparent 55.4%);
}
.fv__chips li{
  border-color:#C8D6DC;
  background:rgba(255,255,255,.7);
  color:#526772;
}
.fv__chips li:hover{ color:#185F52; background:#ECF7F4; border-color:#9BCBC1; }
.fv__kicker{ color:var(--seal); }
.fv__tick{ background:var(--seal); }
.fv__title{ color:#13242E; }
.fv__title em{ color:#0B806A; }
.fv__lead{ color:#526672; }
.fv__badges{
  background:#D6E1E5;
  border-color:#D6E1E5;
  box-shadow:0 22px 50px -42px rgba(23,47,58,.55);
}
.badge{ background:rgba(255,255,255,.94); }
.badge:hover{ background:#FFFFFF; }
.badge__num{ color:#13242E; }
.badge__num small{ color:#39796D; }
.badge__lb{ color:#637681; }
.fv__note{
  border-left-color:rgba(192,57,43,.7);
  background:#FFF5F3;
  color:#6D5958;
}

.fv__media{
  position:relative;
  min-width:0;
  height:clamp(250px,54vw,430px);
  margin:30px 0 0;
  overflow:hidden;
  border:1px solid #CAD8DE;
  border-radius:18px;
  background:#12313A;
  box-shadow:0 32px 72px -42px rgba(19,43,54,.58);
}
.fv__media::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:linear-gradient(180deg, transparent 48%, rgba(6,20,27,.72) 100%);
}
.fv__media img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center;
  transition:transform 1.1s var(--ease-out), filter .55s ease;
}
.fv__media:hover img{ transform:scale(1.025); filter:saturate(1.05) brightness(1.04); }
.fv__media figcaption{
  position:absolute; left:18px; right:18px; bottom:16px; z-index:2;
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  color:#EFF8F6;
  font-size:12px; line-height:1.45;
}
.fv__media figcaption span{
  flex:none;
  padding:5px 9px;
  border:1px solid rgba(255,255,255,.32);
  border-radius:999px;
  background:rgba(6,20,27,.22);
  font:600 9.5px/1 var(--mono);
  letter-spacing:.16em;
}
.motion-ready .fv__media{ animation:case-in .82s .18s var(--ease-out) both; }

.cta,
.cta--alt{
  color:var(--text);
  background:
    radial-gradient(600px 280px at 50% 0%, rgba(22,160,133,.09), transparent 72%),
    #EEF5F4;
  border-block:1px solid #D8E6E2;
}
.cta--alt{ background:#F4F7F8; }
.cta__title{ color:#172832; }
.cta__sub{ color:#637680; }
.cta__card{
  border:1px solid #D7E2E6;
  box-shadow:0 28px 60px -42px rgba(20,43,54,.5);
}

.trace{
  color:var(--text);
  background:
    radial-gradient(100% 70% at 50% 0%, rgba(22,160,133,.1), transparent 62%),
    #EAF4F1;
  border-block:1px solid #D1E2DD;
}
.trace__title{ color:#172832; }
.trace__sub,
.hop__text{ color:#60747D; }
.chain::before{ background:#C7D9D5; }
.hop__dot{ background:#F7FBFA; border-color:#A9C4BE; }
.hop__stage{ color:#70858D; }
.hop__title{ color:#1C313A; }
.hop__ev{
  border-left-color:#48A995;
  background:#DDF0EB;
  color:#2C6B60;
}
.hop.is-key .hop__title{ color:#08725E; }
.hop.is-key .hop__ev{ background:#CDEAE3; color:#195F53; }
.trace__fine{ border-top-color:#C8DAD5; color:#6A7F87; }
.chain{ filter:drop-shadow(0 16px 30px rgba(31,64,59,.06)); }

.final{
  color:var(--text);
  background:
    linear-gradient(180deg, rgba(247,251,250,.88), rgba(239,247,245,.96)),
    url("../images/form-bg.jpg") center 35% / cover no-repeat;
  border-top:1px solid #D4E3DF;
}
.final::before{
  background:
    radial-gradient(circle at 50% 0%, rgba(22,160,133,.12), transparent 48%),
    repeating-radial-gradient(circle at 50% 5%, transparent 0 55px, rgba(12,122,102,.028) 56px 57px);
}
.final__flag{ color:var(--seal); }
.final__title{ color:#172832; }
.final__lead{ color:#60737E; }
.final__acts .btn--call{
  color:#263A43;
  background:#FFFFFF;
  border-color:#C7D6DC;
}
.final__acts .btn--call:hover{ border-color:var(--seal); color:var(--seal); }
.final__note{ border-top-color:#CCDCD8; color:#6B7F88; }

.centre{ background:#FFFFFF; }
.centre__mark{ border-bottom-color:#B8C9CF; }
.centre__in{ box-shadow:none; }
.foot{
  color:#657780;
  background:#EEF3F4;
  border-top:1px solid #D6E0E4;
}
.foot__nav a{ color:#344A54; }
.foot__nav a:hover{ color:var(--seal); }
.foot__disc{ border-top-color:#D3DEE2; }
.foot__disc b{ color:#344A54; }
.foot__copy{ color:#7A8B93; }

.pattern,
.reason,
.voice,
.checkbox,
.fee,
.faq{ box-shadow:0 24px 56px -46px rgba(20,43,54,.52); }

@media (min-width:900px){
  .fv__in{
    display:grid;
    grid-template-columns:minmax(0,1.02fr) minmax(380px,.98fr);
    grid-template-rows:auto auto auto auto auto auto;
    column-gap:56px;
    align-items:start;
  }
  .fv__chips{ grid-column:1; grid-row:1; }
  .fv__kicker{ grid-column:1; grid-row:2; }
  .fv__title{ grid-column:1; grid-row:3; }
  .fv__lead{ grid-column:1; grid-row:4; }
  .fv__badges{ grid-column:1; grid-row:5; }
  .fv__note{ grid-column:1; grid-row:6; }
  .fv__media{
    grid-column:2;
    grid-row:1 / 7;
    align-self:stretch;
    height:auto;
    min-height:560px;
    margin:0;
  }
}

@media (min-width:1280px){
  .fv__in{ column-gap:74px; }
  .fv__media{ min-height:620px; }
}

@media (max-width:559px){
  .fv__media figcaption{ display:block; }
  .fv__media figcaption span{ display:table; margin-bottom:8px; }
}

@media (prefers-reduced-motion:reduce){
  .motion-ready .fv__media{ animation:none !important; opacity:1 !important; transform:none !important; }
}

/* ---------- floating conversion button -------------------------------- */

.bar{ display:none !important; }
.fixed-contact{
  position:fixed; left:50%; right:auto; bottom:24px; z-index:75;
  width:min(326px, calc(100vw - 32px));
  transform:translateX(-50%);
  display:flex; align-items:center; gap:12px;
  min-width:0;
  padding:12px 14px 12px 12px;
  border:1px solid rgba(255,255,255,.62);
  border-radius:18px;
  background:linear-gradient(135deg, #35DD78, #20BD62);
  color:#07351C;
  text-decoration:none;
  box-shadow:
    0 18px 38px -14px rgba(13,132,65,.6),
    0 0 0 1px rgba(37,211,102,.15),
    0 0 30px rgba(37,211,102,.34),
    inset 0 1px 0 rgba(255,255,255,.5);
  isolation:isolate;
  animation:fixed-contact-bob 2.35s ease-in-out infinite;
  transition:transform .22s var(--ease-out), box-shadow .22s ease, filter .22s ease;
}
.fixed-contact::before{
  content:"";
  position:absolute; inset:-7px; z-index:-1;
  border:2px solid rgba(37,211,102,.42);
  border-radius:23px;
  animation:fixed-contact-ring 2.35s ease-out infinite;
}
.fixed-contact:hover{
  transform:translateX(-50%) scale(1.035);
  filter:brightness(1.025);
  box-shadow:
    0 22px 44px -14px rgba(13,132,65,.68),
    0 0 0 1px rgba(37,211,102,.2),
    0 0 44px rgba(37,211,102,.48),
    inset 0 1px 0 rgba(255,255,255,.55);
}
.fixed-contact:active{ transform:translateX(-50%) scale(.985); }
.fixed-contact__icon{
  width:42px; height:42px; flex:none;
  display:grid; place-items:center;
  border-radius:13px;
  background:rgba(255,255,255,.92);
  box-shadow:0 8px 18px -10px rgba(7,73,35,.55);
}
.fixed-contact__icon img{ width:27px; height:29px; object-fit:contain; }
.fixed-contact__copy{ min-width:0; line-height:1.15; }
.fixed-contact__copy strong{
  display:block;
  font:700 15px/1.15 var(--disp);
  letter-spacing:-.005em;
}
.fixed-contact__copy small{
  display:block; margin-top:4px;
  font:500 10.5px/1.2 var(--body);
  opacity:.72;
  white-space:nowrap;
}
.fixed-contact__arrow{
  margin-left:auto;
  font:600 21px/1 var(--mono);
  transition:transform .22s var(--ease-out);
}
.fixed-contact:hover .fixed-contact__arrow{ transform:translateX(3px); }

@keyframes fixed-contact-bob{
  0%,100%{ margin-bottom:0; }
  50%{ margin-bottom:10px; }
}
@keyframes fixed-contact-ring{
  0%{ opacity:.6; transform:scale(.94); }
  72%,100%{ opacity:0; transform:scale(1.11); }
}

@media (max-width:559px){
  .fixed-contact{
    left:50%; right:auto;
    bottom:calc(14px + env(safe-area-inset-bottom));
    width:calc(100vw - 32px);
  }
  .fixed-contact__copy small{ white-space:normal; }
  .foot{ padding-bottom:124px; }
}

@media (prefers-reduced-motion:reduce){
  .fixed-contact,
  .fixed-contact::before{ animation:none !important; }
}