/* Reusable components: buttons, cards, flip cards, lists, tickets, FAQ, CTA band */

/* ---------- Buttons (Uiverse.io "playstore" button by Yaya12085, recolored to the site palette) ---------- */
.c-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  align-self:flex-start;
  border:2px solid var(--btn-bg);
  border-radius:9999px;
  background-color:var(--btn-bg);
  padding:13px 24px;
  text-align:center;
  color:var(--btn-ink);
  font-family:'Work Sans',sans-serif;
  font-weight:700;
  font-size:0.94rem;
  text-decoration:none;
  outline:0;
  cursor:pointer;
  vertical-align:middle;
  transition:all 0.2s ease;
}
.c-button:hover{
  background-color:transparent;
  color:var(--btn-hover-ink);
}
.c-button:active{ transform:translateY(1px); }
.c-button--accent{
  border-color:var(--accent);
  background-color:var(--accent);
  color:#241505;
}
.c-button--accent:hover{
  background-color:transparent;
  color:var(--accent);
}

.card{
  background:var(--surface);
  border:1px solid var(--line-soft);
  border-radius:var(--radius);
  padding:clamp(20px, 3vw, 26px) clamp(18px, 3vw, 24px);
  transition:transform 0.15s ease, box-shadow 0.15s ease;
  display:flex;
  flex-direction:column;
}
@media (hover:hover){
  .card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
}
.card .icon{
  width:38px;height:38px;
  border-radius:10px;
  background:var(--surface-2);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:16px;
  color:var(--accent);
}
.card h3{ font-size:1.08rem; margin-bottom:8px; }
.card p{ color:var(--ink-soft); font-size:0.94rem; flex:1 0 auto; }
.card .c-button{ margin-top:18px; }
.card--muted{ background:var(--surface-2); }
.card-lede{ margin-top:6px; }

/* Simple tick list used inside cards */
.check-list{ list-style:none; padding:0; margin:14px 0 0; display:grid; gap:10px; }
.check-list li{ display:flex; gap:10px; color:var(--ink-soft); font-size:0.92rem; }
.check-list li svg{ flex:none; color:var(--accent); margin-top:2px; }

/* Navy panels get a faint outline in dark mode so they don't melt into the page */
.svc-card, .approach-card, .cta-band{ border:1px solid var(--panel-border); }

/* ---------- Services cards (Uiverse.io flip-reveal by suleymanlaarabidev, same component as the approach cards below: icon + heading on the front, full detail on the back). Cards start compact (front content only) and expand on hover via a generously overshot max-height, so each card grows to its own real content height with no clipping and without stretching its siblings. ---------- */
.svc-card{
  position:relative;
  background:var(--panel);
  border-radius:var(--radius);
  overflow:hidden;
  cursor:pointer;
  max-height:clamp(215px, 26vw, 250px);
  transition:max-height 0.4s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.svc-card.is-open,
.svc-card:focus-within{ max-height:900px; }
@media (hover:hover){
  .svc-card:hover{ max-height:900px; transform:translateY(-3px); box-shadow:var(--shadow); }
}
.svc-tag{
  position:absolute;
  top:16px; left:16px;
  z-index:3;
  background:var(--accent);
  color:var(--panel-ink);
  padding:5px 12px;
  border-radius:999px;
  font-size:0.68rem;
  font-weight:700;
  letter-spacing:0.05em;
  text-transform:uppercase;
}
.svc-back{
  display:flex;
  flex-direction:column;
  padding:clamp(52px, 7vw, 58px) clamp(20px, 3vw, 24px) clamp(22px, 3vw, 28px);
}
.svc-front{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:14px;
  padding:clamp(22px, 3vw, 28px) clamp(20px, 3vw, 24px);
  background:var(--panel);
  opacity:1;
  transform:translateY(0);
  transition:opacity 0.3s ease, transform 0.3s ease;
  z-index:2;
}
.svc-card.is-open .svc-front,
.svc-card:focus-within .svc-front{ opacity:0; transform:translateY(-10px); pointer-events:none; }
@media (hover:hover){
  .svc-card:hover .svc-front{ opacity:0; transform:translateY(-10px); pointer-events:none; }
}
.svc-front .icon{
  width:52px; height:52px;
  border-radius:50%;
  background:rgba(246,243,236,0.1);
  display:flex; align-items:center; justify-content:center;
  color:var(--accent);
}
.svc-front h3{ color:var(--panel-ink); font-size:1.32rem; }
.svc-back p{ color:var(--panel-ink-soft); font-size:0.92rem; line-height:1.5; }
.svc-back .svc-includes{ margin-top:14px; }
.svc-back .svc-includes li{
  padding:8px 0;
  font-size:0.92rem;
  color:rgba(246,243,236,0.82);
  border-top-color:rgba(246,243,236,0.16);
}
.svc-back .svc-includes li strong{ color:var(--panel-ink); }
.svc-back .c-button{ margin-top:16px; align-self:flex-start; }

/* ---------- "How the work actually happens" flip-reveal cards (Uiverse.io by suleymanlaarabidev, recolored + adapted for text content) ---------- */
.approach-grid{ gap:clamp(20px, 4vw, 32px); }
.approach-card{
  position:relative;
  background:var(--panel);
  border-radius:var(--radius);
  overflow:hidden;
  height:clamp(220px, 30vw, 240px);
  cursor:pointer;
  transition:transform 0.3s ease, box-shadow 0.3s ease;
}
@media (hover:hover){
  .approach-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
}
.approach-front, .approach-back{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:24px;
  transition:opacity 0.3s ease, transform 0.3s ease;
}
.approach-front{ opacity:1; transform:translateY(0); }
.approach-card.is-open .approach-front{ opacity:0; transform:translateY(-10px); pointer-events:none; }
@media (hover:hover){
  .approach-card:hover .approach-front{ opacity:0; transform:translateY(-10px); pointer-events:none; }
}
.approach-front h3{ color:var(--panel-ink); font-size:1.32rem; }
.approach-back{ opacity:0; transform:translateY(10px); pointer-events:none; }
.approach-card.is-open .approach-back{ opacity:1; transform:translateY(0); pointer-events:auto; }
@media (hover:hover){
  .approach-card:hover .approach-back{ opacity:1; transform:translateY(0); pointer-events:auto; }
}
.approach-back p{ color:rgba(246,243,236,0.92); font-size:0.92rem; line-height:1.55; }

.creds-list{ list-style:none; margin:20px 0 0; padding:0; display:grid; gap:10px; }
.creds-list li{
  display:flex; gap:10px; align-items:flex-start;
  font-size:0.92rem; color:var(--ink-soft);
  padding:10px 0;
  border-top:1px solid var(--line-soft);
}
.creds-list li strong{ color:var(--ink); }
.creds-list li svg{ flex:none; margin-top:3px; color:var(--accent); }

.disclosure-box{
  margin-top:clamp(42px, calc(5vw + 10px), 58px);
  background:var(--surface-2);
  border:1px solid var(--line-soft);
  border-radius:var(--radius);
  padding:clamp(18px, 3vw, 22px) clamp(20px, 3vw, 24px);
}
.disclosure-box h4{
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:0.98rem;
  margin-bottom:8px;
}
.disclosure-box p{ font-size:0.88rem; color:var(--ink-soft); }
.disclosure-box p + p{ margin-top:8px; }

/* Fact list (spec-sheet style label/value rows, used on light-surface cards) */
.fact-list{
  margin:4px 0 0;
  border-top:1px solid var(--line-soft);
}
.fact-list .fact-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  padding:10px 0;
  font-size:0.86rem;
  border-bottom:1px solid var(--line-soft);
}
.fact-list .fact-row dt{ color:var(--ink-soft); font-weight:500; }
.fact-list .fact-row dd{ margin:0; color:var(--ink); font-weight:600; text-align:right; }
.subnote{ font-size:0.88rem; color:var(--ink-soft); margin-top:6px; }

/* Session-package tickets (Uiverse.io "ticket" by zeeshan_2112, recolored to the site palette) */
.pack-ticket-wrap{
  --pt-bg:var(--panel);
  --pt-bg-light:var(--panel-2);
  --pt-accent:var(--accent);
  --pt-accent-glow:rgba(198,129,30,0.45);
  --pt-text-main:var(--panel-ink);
  --pt-text-muted:rgba(246,243,236,0.62);
  display:flex;
  width:100%;
  height:100%;
  font-size:clamp(14.5px, 1.7vw, 16.5px);
  perspective:1000px;
}
.pack-ticket{
  position:relative;
  width:100%;
  display:flex;
  flex-direction:column;
  color:var(--pt-text-main);
  font-family:'Work Sans', ui-sans-serif, system-ui, sans-serif;
  transform-style:preserve-3d;
  transition:transform 0.5s cubic-bezier(0.23,1,0.32,1), filter 0.5s ease;
  filter:drop-shadow(0 10px 20px rgba(15,22,38,0.3));
}
.pack-ticket-wrap:hover .pack-ticket{
  transform:rotateX(2deg) rotateY(-4deg) scale(1.012);
  filter:drop-shadow(0 16px 28px rgba(15,22,38,0.38)) drop-shadow(0 0 16px var(--pt-accent-glow));
}
.pack-ticket-wrap:active .pack-ticket{ transform:rotateX(3deg) rotateY(-2deg) scale(0.99); }
.pack-ticket::after{
  content:"";
  position:absolute; inset:0;
  border-radius:var(--radius);
  pointer-events:none;
  background:linear-gradient(115deg, transparent 0%, transparent 40%, rgba(255,255,255,0.08) 45%, rgba(255,255,255,0.22) 50%, rgba(255,255,255,0.08) 55%, transparent 60%, transparent 100%);
  z-index:3;
  background-size:250% 250%;
  background-position:100% 100%;
  opacity:0;
  transition:opacity 0.4s ease, background-position 0.6s cubic-bezier(0.23,1,0.32,1);
  mix-blend-mode:overlay;
}
.pack-ticket-wrap:hover .pack-ticket::after{ opacity:1; background-position:0% 0%; }
.pt-main{
  flex:1 0 auto;
  padding:2.2em 2.2em 1.4em;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at bottom left, transparent 1em, var(--pt-bg) 1.05em),
    radial-gradient(circle at bottom right, transparent 1em, var(--pt-bg) 1.05em);
  background-size:51% 100%;
  background-position:bottom left, bottom right;
  background-repeat:no-repeat;
  border-top-left-radius:var(--radius);
  border-top-right-radius:var(--radius);
}
.pt-main::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(198,129,30,0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(198,129,30,0.14) 1px, transparent 1px);
  background-size:2em 2em;
  opacity:0.5;
  z-index:0;
  pointer-events:none;
}
.pt-content{ position:relative; z-index:1; }
.pt-header{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:1.8em; }
.pt-logo{ font-family:'Bricolage Grotesque','Work Sans',sans-serif; font-weight:800; font-size:1.1em; letter-spacing:-0.02em; }
.pt-type{
  font-size:0.62em; text-transform:uppercase; letter-spacing:0.16em;
  color:var(--pt-accent); border:1px solid var(--pt-accent);
  padding:0.4em 0.9em; border-radius:9999px; font-weight:700;
}
.pt-title{ font-family:'Bricolage Grotesque','Work Sans',sans-serif; font-size:2.2em; font-weight:800; line-height:1.1; margin:0 0 0.25em; color:var(--pt-text-main); }
.pt-subtitle{ color:var(--pt-text-muted); font-size:0.92em; margin:0 0 2em; }
.pt-details{ display:grid; grid-template-columns:1fr 1fr; gap:1.4em 1em; }
.pt-detail{ display:flex; flex-direction:column; gap:0.25em; }
.pt-label{ font-size:0.64em; text-transform:uppercase; letter-spacing:0.1em; color:var(--pt-text-muted); }
.pt-value{ font-size:1.05em; font-weight:700; }
.pt-main ul{ list-style:none; margin:1.6em 0 0; padding:0; display:grid; gap:0.85em; }
.pt-main ul li{ display:flex; gap:0.7em; font-size:0.9em; color:rgba(246,243,236,0.82); }
.pt-main ul li svg{ flex:none; color:var(--pt-accent); margin-top:0.15em; width:1.15em; height:1.15em; }
.pt-cta{ margin-top:1.8em; width:100%; }
.pt-perforation{ display:flex; justify-content:space-between; height:1em; align-items:center; position:relative; z-index:2; }
.pt-perf-line{ flex-grow:1; height:0; border-top:2px dashed rgba(246,243,236,0.22); margin:0 1.6em; }
.pt-stub{
  padding:1.6em 2.2em;
  background:
    radial-gradient(circle at top left, transparent 1em, var(--pt-bg-light) 1.05em),
    radial-gradient(circle at top right, transparent 1em, var(--pt-bg-light) 1.05em);
  background-size:51% 100%;
  background-position:top left, top right;
  background-repeat:no-repeat;
  border-bottom-left-radius:var(--radius);
  border-bottom-right-radius:var(--radius);
  display:flex; justify-content:space-between; align-items:center;
}
.pt-save,.pt-admit{ display:flex; flex-direction:column; gap:0.2em; }
.pt-admit{ text-align:right; }
.pt-save-label,.pt-admit-label{ font-size:0.68em; text-transform:uppercase; letter-spacing:0.1em; color:var(--pt-text-muted); }
.pt-save-value,.pt-admit-num{ font-size:1.5em; font-weight:800; line-height:1; color:var(--pt-accent); text-shadow:0 0 10px var(--pt-accent-glow); }

/* FAQ */
.faq-item{
  border-bottom:1px solid var(--line-soft);
}
.faq-item:first-child{ border-top:1px solid var(--line-soft); }
.faq-q{
  width:100%;
  text-align:left;
  background:none;
  border:none;
  cursor:pointer;
  padding:20px 4px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:1.02rem;
  color:var(--ink);
}
.faq-q .plus{
  flex:none;
  width:26px;height:26px;
  border-radius:50%;
  border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;
  transition:transform 0.15s ease;
}
.faq-item[data-open="true"] .plus{ transform:rotate(45deg); }
.faq-a{
  max-height:0;
  overflow:hidden;
  transition:max-height 0.2s ease;
}
.faq-a-inner{ padding:0 4px 22px; color:var(--ink-soft); font-size:0.94rem; max-width:68ch; }

/* CTA banner */
.cta-band{
  background:var(--panel);
  color:var(--panel-ink);
  border-radius:24px;
  padding:clamp(26px, 5vw, 44px) clamp(22px, 4vw, 36px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
}
.cta-band h3{ color:var(--panel-ink); font-size:clamp(1.15rem, 3vw, 1.4rem); }
.cta-band p{ color:rgba(241,238,230,0.75); margin-top:6px; max-width:48ch; }