/* ============================================================
   Services hub + program detail
   ============================================================ */

body.themed{
  background:var(--t-bg); color:var(--t-ink);
  transition:background .9s var(--ease), color .7s var(--ease);
}
.theme-motif{
  position:fixed; inset:0; z-index:0; pointer-events:none; opacity:0;
  transition:opacity .9s var(--ease), transform 1.4s var(--ease-out);
  transform:scale(1.12);
}
.theme-motif.on{ opacity:.13; transform:none; }
.theme-motif svg{ position:absolute; right:-8%; top:50%; translate:0 -50%; width:min(64vw,820px); height:auto; }
.theme-motif[data-motif="board"] svg{ width:150vw; right:-25%; opacity:.45; }
main{ position:relative; z-index:1; }

/* ---------- services head ---------- */
.svc-head{
  padding:calc(var(--nav-h) + 6rem) 0 3.5rem;
  background:linear-gradient(180deg, color-mix(in srgb, var(--t-accent) 12%, transparent), transparent);
  transition:background .9s var(--ease);
}
.svc-head .eyebrow{ color:var(--t-accent-2); }
.svc-head h1{ font-size:clamp(2.05rem,4.8vw,3.7rem); margin:1.3rem 0 0; color:var(--t-ink); }
.svc-lede{ margin-top:1.6rem; max-width:52ch; color:color-mix(in srgb,var(--t-ink) 72%, transparent); }
.svc-trial{
  margin-top:1.4rem; font-size:.78rem; letter-spacing:.02em;
  color:color-mix(in srgb,var(--t-ink) 58%, transparent);
}
.svc-trial a{ color:var(--t-accent); border-bottom:1px solid currentColor; padding-bottom:1px; }

/* ---------- services grid ---------- */
.svc-grid-sec{ padding-bottom:clamp(4rem,8vw,7rem); }
.svc-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:1rem; }
.svc{
  position:relative; grid-column:span 2; min-height:290px; display:flex; flex-direction:column;
  justify-content:flex-end; padding:1.9rem; border-radius:22px; overflow:hidden;
  background:#fff;
  border:1px solid color-mix(in srgb, var(--t-ink) 10%, transparent);
  box-shadow:0 1px 2px rgba(11,27,61,.04);
  transition:transform .6s var(--ease-out), border-color .5s, box-shadow .5s;
}
.svc:hover{ box-shadow:0 26px 54px -30px color-mix(in srgb, var(--t-accent) 60%, transparent);
  border-color:color-mix(in srgb, var(--t-accent) 40%, transparent); }
.svc:nth-child(4), .svc:nth-child(5){ grid-column:span 3; }
.svc:hover{ transform:translateY(-6px); }
.svc-ico{
  position:absolute; right:-14%; top:-16%; width:62%; opacity:.16; color:var(--t-accent);
  transition:opacity .6s var(--ease), transform .9s var(--ease-out);
}
.svc:hover .svc-ico{ opacity:.34; transform:scale(1.07) rotate(-4deg); }
.svc-n{
  position:absolute; top:1.6rem; left:1.9rem;
  font-size:.68rem; letter-spacing:.18em;
  color:color-mix(in srgb, var(--t-ink) 45%, transparent);
}
.svc h3{ font-size:clamp(1.45rem,2.6vw,2.1rem); letter-spacing:-.04em; color:var(--t-ink); }
.svc p{ margin-top:.7rem; font-size:.94rem; max-width:36ch;
  color:color-mix(in srgb, var(--t-ink) 62%, transparent); }
.svc-go{
  margin-top:1.4rem; display:inline-flex; align-items:center; gap:.5rem;
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--t-accent);
}
.svc-go svg{ transition:transform .45s var(--ease-out); }
.svc:hover .svc-go svg{ transform:translateX(5px); }
.svc-kick{
  position:absolute; top:1.6rem; right:1.9rem; white-space:nowrap;
  font-size:.6rem; letter-spacing:.1em; text-transform:uppercase;
  color:color-mix(in srgb, var(--t-ink) 46%, transparent);
  padding:.3rem .65rem; border-radius:99px;
  border:1px solid color-mix(in srgb, var(--t-ink) 14%, transparent);
  transition:border-color .5s var(--ease), color .5s var(--ease);
}
.svc:hover .svc-kick{ border-color:color-mix(in srgb, var(--t-accent) 55%, transparent);
  color:var(--t-accent); }
@media (max-width:1180px){ .svc-kick{ font-size:.55rem; padding:.26rem .5rem; } }
@media (max-width:520px){ .svc-kick{ display:none; } }

.svc-cta{ padding:0 0 clamp(5rem,9vw,8rem); }
.svc-cta-in{
  display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap;
  padding:clamp(2.2rem,4vw,3.4rem); border-radius:26px;
  background:linear-gradient(150deg, color-mix(in srgb,var(--t-accent) 14%, transparent), #fff);
  border:1px solid color-mix(in srgb, var(--t-ink) 14%, transparent);
}
.svc-cta .eyebrow{ color:var(--t-accent-2); }
.svc-cta h2{ font-size:clamp(1.5rem,2.8vw,2.2rem); margin-top:1rem; color:var(--t-ink); }

@media (max-width:900px){
  .svc-grid{ grid-template-columns:1fr; }
  .svc, .svc:nth-child(4), .svc:nth-child(5){ grid-column:span 1; }
}

/* ============================================================
   Program detail page
   ============================================================ */
.pg-head{
  padding:calc(var(--nav-h) + 6rem) 0 clamp(3rem,6vw,5rem);
  background:linear-gradient(180deg, color-mix(in srgb, var(--t-accent) 14%, transparent), transparent 78%);
}
.pg-back{
  display:inline-flex; align-items:center; gap:.5rem; 
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:color-mix(in srgb,var(--t-ink) 55%, transparent); transition:color .3s, gap .35s var(--ease-out);
}
.pg-back:hover{ color:var(--t-accent); gap:.85rem; }
.pg-head h1{ font-size:clamp(2.05rem,4.6vw,3.6rem); margin:1.6rem 0 0; max-width:15ch; color:var(--t-ink); }
.pg-lead{ margin-top:1.6rem; max-width:56ch; font-size:clamp(1rem,1.35vw,1.14rem);
  color:color-mix(in srgb,var(--t-ink) 72%, transparent); line-height:1.6; }
.pg-actions{ display:flex; gap:.8rem; flex-wrap:wrap; margin-top:2.2rem; }

/* advantage */
.adv{ padding:clamp(3rem,6vw,5rem) 0; }
.adv-in{
  border-top:1px solid color-mix(in srgb, var(--t-ink) 14%, transparent);
  padding-top:clamp(2.5rem,5vw,4rem);
}
.adv h2{ font-size:clamp(1.55rem,2.9vw,2.25rem); color:var(--t-ink); }
.adv-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:2.6rem; }
.adv-item{
  padding:1.8rem; border-radius:18px;
  background:#fff;
  border:1px solid color-mix(in srgb, var(--t-ink) 10%, transparent);
  transition:border-color .5s, background .5s, box-shadow .5s;
}
.adv-item:hover{ border-color:color-mix(in srgb, var(--t-accent) 55%, transparent);
  background:color-mix(in srgb, var(--t-accent) 10%, transparent); }
.adv-k{
  font-size:.64rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--t-accent); display:block;
}
.adv-item p{ margin-top:.95rem; font-size:.96rem; line-height:1.6;
  color:color-mix(in srgb,var(--t-ink) 74%, transparent); }

/* options */
.opts{ padding:0 0 clamp(4rem,8vw,7rem); }
.opts h2{ font-size:clamp(1.55rem,2.9vw,2.25rem); color:var(--t-ink); }
.opt-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1rem; margin-top:2.6rem; }
.opt{
  display:flex; flex-direction:column; padding:2rem; border-radius:22px; position:relative; overflow:hidden;
  background:#fff;
  border:1px solid color-mix(in srgb, var(--t-ink) 10%, transparent);
  box-shadow:0 1px 2px rgba(11,27,61,.04);
  transition:transform .55s var(--ease-out), border-color .5s, box-shadow .5s;
}
.opt:hover{ transform:translateY(-5px); border-color:color-mix(in srgb, var(--t-accent) 60%, transparent); }
.opt::before{
  content:""; position:absolute; inset:auto 0 0 0; height:3px;
  background:linear-gradient(90deg, var(--t-accent), transparent);
  transform:scaleX(0); transform-origin:left; transition:transform .7s var(--ease-out);
}
.opt:hover::before{ transform:scaleX(1); }
.opt-ico{ color:var(--t-accent); margin-bottom:1.2rem; }
.opt h3{ font-size:1.24rem; letter-spacing:-.035em; color:var(--t-ink); }
.opt-p{ margin-top:.9rem; font-size:.93rem; line-height:1.62; flex:1;
  color:color-mix(in srgb,var(--t-ink) 70%, transparent); }
.opt-price{
  margin-top:1.5rem; font-size:.9rem; letter-spacing:.02em;
  color:var(--t-accent); font-weight:500; display:flex; align-items:baseline; gap:.5rem;
}
.opt-price em{ font-style:normal; font-size:.62rem; letter-spacing:.2em; text-transform:uppercase;
  color:color-mix(in srgb,var(--t-ink) 45%, transparent); }
.opt .btn{ margin-top:1.3rem; align-self:flex-start; }
.opt-note{
  margin-top:1.8rem; padding:1.2rem 1.4rem; border-radius:14px;
  border:1px dashed color-mix(in srgb, var(--t-ink) 22%, transparent);
  font-size:.92rem; color:color-mix(in srgb,var(--t-ink) 66%, transparent);
}

/* contact strip shared by program pages */
.strip{ padding:0 0 clamp(5rem,9vw,8rem); }
.strip-in{
  display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(2rem,5vw,4rem); align-items:center;
  padding:clamp(2.4rem,5vw,4rem); border-radius:28px;
  background:linear-gradient(150deg, color-mix(in srgb,var(--t-accent) 16%, transparent), #fff);
  border:1px solid color-mix(in srgb, var(--t-ink) 14%, transparent);
}
.strip .eyebrow{ color:var(--t-accent-2); }
.strip h2{ font-size:clamp(1.55rem,2.9vw,2.3rem); margin-top:1rem; color:var(--t-ink); }
.strip p{ margin-top:1.1rem; max-width:44ch; color:color-mix(in srgb,var(--t-ink) 72%, transparent); }
.strip-lines{ display:grid; gap:.7rem; }
.strip-line{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding:.9rem 1.1rem; border-radius:12px;
  background:#fff;
  border:1px solid color-mix(in srgb, var(--t-ink) 10%, transparent);
  transition:.4s var(--ease);
}
.strip-line:hover{ border-color:color-mix(in srgb,var(--t-accent) 60%, transparent); }
.strip-line span{ font-size:.6rem; letter-spacing:.2em; text-transform:uppercase;
  color:color-mix(in srgb,var(--t-ink) 50%, transparent); }
.strip-line a{ font-weight:600; color:var(--t-ink); }
.strip .btn{ margin-top:1.4rem; }

@media (max-width:900px){
  .adv-grid{ grid-template-columns:1fr; }
  .strip-in{ grid-template-columns:1fr; }
}