/* ============================================================
   topstudy.com — design language v2.1 (2026) — SITE-WIDE CHROME
   Tokens + buttons + utility bar + glass header + footer v2 +
   lead widget + reveal. Loaded on EVERY page (layout_main head).
   Homepage-only component styles live in ts-home.css.
   NO global resets here (variables.css/typography.css own those).
   ============================================================ */

:root{
  /* brand core */
  --pink:#ff066f;
  --pink-hover:color-mix(in oklch, var(--pink) 88%, black);
  --pink-active:color-mix(in oklch, var(--pink) 78%, black);
  --pink-bright:color-mix(in oklch, var(--pink) 80%, white);
  --pink-soft:color-mix(in oklch, var(--pink) 9%, white);
  --pink-soft2:color-mix(in oklch, var(--pink) 14%, white);
  --pink-ring:color-mix(in oklch, var(--pink) 40%, transparent);

  --navy:#12275d;
  --navy-deep:#0a1834;
  --ts-blue:#1a73e8;
  --ts-text:#23315c;
  --ts-muted:#5a678c;
  --ts-line:#e7eaf2;
  --hero-top:#cfe7f6;
  --hero-bot:#e9f4fb;
  --footer-blue:#e8f2fc;
  --ts-gold:#fbbc04;

  /* elevation */
  --shadow-1:0 1px 2px rgba(18,39,93,.06), 0 2px 8px -2px rgba(18,39,93,.08);
  --shadow-2:0 2px 4px rgba(18,39,93,.05), 0 10px 24px -12px rgba(18,39,93,.18);
  --shadow-3:0 4px 8px rgba(18,39,93,.05), 0 24px 48px -20px rgba(18,39,93,.28);
  --shadow-pink:0 4px 10px -4px color-mix(in oklch, var(--pink) 55%, transparent),
                0 14px 28px -10px color-mix(in oklch, var(--pink) 45%, transparent);

  /* radius */
  --r-s:8px; --r-m:12px; --r-l:16px; --r-xl:22px; --r-full:999px;

  /* spacing (4px base) */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px;

  /* fluid type */
  --fs-xs:clamp(12px,.72rem + .1vw,13px);
  --fs-s:clamp(13px,.78rem + .15vw,14.5px);
  --fs-m:clamp(14.5px,.86rem + .2vw,16px);
  --fs-l:clamp(17px,1rem + .3vw,19px);
  --fs-h3:clamp(17px,1rem + .35vw,19px);
  --fs-h2:clamp(24px,1.35rem + 1vw,31px);
  --fs-h1:clamp(36px,1.7rem + 2.7vw,57px);
  --fs-script:clamp(42px,1.9rem + 3vw,63px);

  /* motion */
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-spring:cubic-bezier(.34,1.4,.44,1);
  --t-fast:.16s var(--ease-out);
  --t-med:.28s var(--ease-out);

  /* families */
  --ts-display:'Poppins',sans-serif;
  --ts-body:'Open Sans',sans-serif;
  --ts-script:'Caveat',cursive;
}

/* shared container used by the new chrome + homepage */
.ts .wrap,.ts-nav .wrap,.ts-footer .wrap,.fband .wrap{max-width:1180px;margin-inline:auto;padding-inline:var(--s-5)}

/* ============ Buttons ============ */
.btn-primary{background:var(--pink);color:#fff;font-family:var(--ts-display);font-weight:600;font-size:16px;padding:15px 30px;border-radius:var(--r-m);transition:background var(--t-fast),transform var(--t-fast),box-shadow var(--t-fast);box-shadow:var(--shadow-pink);display:inline-flex;align-items:center;gap:10px;justify-content:center;line-height:1.1}
.btn-primary:hover{background:var(--pink-hover);transform:translateY(-2px)}
.btn-primary:active{background:var(--pink-active);transform:translateY(0) scale(.99)}
.btn-ghost{background:rgba(255,255,255,.7);color:var(--navy);font-family:var(--ts-display);font-weight:600;font-size:16px;padding:14px 26px;border-radius:var(--r-m);border:1.5px solid #c9d6ea;display:inline-flex;align-items:center;gap:10px;justify-content:center;transition:background var(--t-fast),border-color var(--t-fast),transform var(--t-fast);line-height:1.1}
.btn-ghost:hover{background:#fff;border-color:#a9bbd9;transform:translateY(-2px)}
.btn-ghost svg{width:18px;height:18px;color:var(--pink)}

/* ============ Eyebrow pill ============ */
.eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.75);backdrop-filter:blur(6px);border:1px solid #fff;border-radius:var(--r-full);padding:7px 16px;font-family:var(--ts-display);font-weight:600;font-size:13px;color:var(--navy);box-shadow:var(--shadow-1)}
.eyebrow .star{color:var(--ts-gold)}
.eyebrow-plain{background:var(--pink-soft);border-color:transparent;color:var(--pink);box-shadow:none}

/* ============================================================
   New chrome wrapper. Scoped under .ts-nav so it overrides the
   legacy `nav{position:fixed}` rules in nav.css purely by
   specificity (class > type). The legacy .nav-mobile-menu-wrapper
   / .sub-menu / .hamburger-menu-button styling in nav.css is left
   intact and reused for the mobile menu + language/currency lists.
   ============================================================ */
/* The whole chrome (utility bar + glass header) sticks to the top as one
   unit. Sticking the nav itself — rather than the inner header — avoids the
   "short containing block" trap (a sticky child only sticks within its
   parent's box, so a header inside a ~120px nav would unstick immediately).
   Needs no scroll/overflow ancestor between here and the viewport;
   body uses overflow-x:clip (not hidden) precisely so this keeps working. */
nav.ts-nav{position:sticky;top:0;height:auto;background:none;box-shadow:none;padding:0;display:block;z-index:60}

/* ---- Utility bar (navy-deep) ---- */
/* relative + raised z-index so its language/currency dropdowns paint above
   the sticky glass header and the hero below. */
.ts-nav .utilbar{background:var(--navy-deep);color:#dfe6f5;position:relative;z-index:60}
.ts-nav .utilbar .wrap{display:flex;align-items:center;justify-content:space-between;height:46px;font-size:var(--fs-s)}
.ts-nav .util-item{display:flex;align-items:center;gap:8px;cursor:pointer;color:#e6ecfa;font-weight:500;padding:6px 4px;border-radius:var(--r-s);transition:color var(--t-fast);position:relative}
.ts-nav .util-item:hover{color:#fff}
.ts-nav .util-item svg{width:17px;height:17px;flex:none}
.ts-nav .util-phone{font-weight:700;letter-spacing:.2px}
.ts-nav .util-phone a{display:flex;align-items:center;gap:8px;color:inherit}
.ts-nav .util-right{display:flex;align-items:center;gap:26px}
.ts-nav .chev{width:13px;height:13px;opacity:.8}
/* utilbar dropdowns reuse the legacy .sub-menu lists populated by navbar.js */
/* Dropdown sits flush under the item (top:100%, no gap) so moving the cursor
   onto an option never crosses an unhovered gap — that gap was closing the
   menu mid-click. A transparent top padding gives visual spacing without a
   hover hole; pointer-events:auto keeps it interactive. */
.ts-nav .util-item{padding-bottom:6px}
.ts-nav .util-item .sub-menu{position:absolute;top:100%;right:0;min-width:160px;background:#fff;color:var(--ts-text);border-radius:var(--r-m);box-shadow:var(--shadow-3);border:1px solid var(--ts-line);padding:6px;list-style:none;margin:0;display:none;z-index:200;max-height:60vh;overflow:auto}
.ts-nav .util-item.open .sub-menu,.ts-nav .util-item:focus-within .sub-menu{display:block}
/* Language selector sits at the LEFT of the utilbar, so the default right:0
   anchor pushes its dropdown off the left screen edge on mobile. Anchor it
   left:0 instead (currency stays right:0 — it lives in .util-right). */
.ts-nav #langSel .sub-menu{left:0;right:auto}
.ts-nav .util-item .sub-menu li{padding:9px 12px;border-radius:var(--r-s);font-size:var(--fs-s);font-weight:600;color:#3c476e;cursor:pointer;white-space:nowrap}
.ts-nav .util-item .sub-menu li:hover{background:var(--pink-soft);color:var(--pink)}

/* ---- Glass header (sticky) ---- */
.ts-nav .ts-header{background:rgba(255,255,255,.82);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);border-bottom:1px solid #f0f2f8;position:relative;z-index:1;transition:box-shadow var(--t-med)}
.ts-nav.scrolled .ts-header{box-shadow:var(--shadow-2)}
.ts-nav .ts-header .wrap{display:flex;align-items:center;justify-content:space-between;height:74px;gap:var(--s-5)}
.ts-nav .logo{display:inline-flex;align-items:center}
.ts-nav .logo img{height:clamp(22px,.6vw + 20px,28px);width:auto;display:block}
.ts-nav .tagline{font-family:var(--ts-display);font-weight:600;font-size:var(--fs-l);color:var(--navy);text-align:right}
.ts-nav .tagline .since{font-family:var(--ts-script);font-weight:700;color:var(--navy);font-size:1.35em;position:relative;padding:0 2px;white-space:nowrap}
.ts-nav .tagline .since::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:7px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='8' viewBox='0 0 120 8'><path d='M2 5 C30 1 90 1 118 4' stroke='%23ff066f' stroke-width='2.4' fill='none' stroke-linecap='round'/></svg>") no-repeat center/contain}
/* hamburger only on mobile (legacy nav.css styles it); hide leading title host */
.ts-nav .ts-hamburger{display:none}
.ts-nav .leading{display:none}
/* Re-show the hamburger on mobile. nav.css does this via `.hamburger-menu-button`
   (specificity 0,1,0) which loses to `.ts-nav .ts-hamburger` (0,2,0) above, so the
   button stayed hidden at every width and the mobile menu (incl. language switch)
   was unreachable. Match nav.css's 1000px breakpoint with equal specificity. */
@media(max-width:1000px){.ts-nav .ts-hamburger{display:flex}}

/* ============ Footer band (pre-footer CTA) — used on homepage ============ */
.fband{margin-top:58px;background:var(--footer-blue)}
.fband .wrap{display:grid;grid-template-columns:1.15fr auto auto;align-items:center;gap:clamp(26px,4vw,58px);padding-block:40px}
.fband .help{display:flex;align-items:center;gap:18px;min-width:0}
.fband .help .hcirc{width:64px;height:64px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-2);flex:none}
.fband .help .hcirc svg{width:32px;height:32px;color:var(--pink)}
.fband .help h4{font-family:var(--ts-display);font-size:clamp(18px,1.05rem + .55vw,23px);font-weight:700;color:var(--navy);line-height:1.22;max-width:420px}
.fband .help h4 .hand{font-family:var(--ts-script);font-weight:700;color:var(--pink);font-size:1.35em;line-height:1;padding:0 2px}
.fband .help p{font-size:var(--fs-s);color:var(--ts-muted);margin-top:5px}
.fband .feats{list-style:none;display:flex;flex-direction:column;gap:12px;padding-left:clamp(26px,4vw,58px);border-left:1.5px solid #cfdff3}
.fband .feats li{display:flex;align-items:center;gap:11px;font-family:var(--ts-display);font-size:var(--fs-s);color:var(--navy);font-weight:600;white-space:nowrap}
.fband .feats .fck{width:23px;height:23px;border-radius:50%;background:#fff;color:var(--pink);display:flex;align-items:center;justify-content:center;flex:none;box-shadow:var(--shadow-1)}
.fband .feats .fck svg{width:12px;height:12px}
.fband .fband-cta{display:flex;flex-direction:column;align-items:center;gap:13px}
.fband .fband-cta .btn-primary{box-shadow:var(--shadow-pink);white-space:nowrap}
.fband .fphone{display:flex;align-items:center;gap:8px;font-size:var(--fs-xs);color:var(--ts-muted);white-space:nowrap}
.fband .fphone svg{width:15px;height:15px;color:var(--pink);flex:none}
.fband .fphone b{font-family:var(--ts-display);font-weight:700;font-size:14px;color:var(--navy);transition:color var(--t-fast)}
.fband .fphone:hover b{color:var(--pink)}

/* ============ Footer v2 (site-wide) ============ */
/* .ts-footer neutralizes legacy common.css `.footer{background:black;text-align:center;padding:2rem}` */
.footer.ts-footer{background:var(--navy-deep);color:#9fb0d4;margin-top:0;text-align:left;padding:0;display:block}
.ts-footer .f-grid{display:grid;grid-template-columns:1.3fr .9fr .9fr 1.1fr;gap:44px;padding-block:54px 40px}
.ts-footer .logo{display:inline-flex;align-items:center}
.ts-footer .logo img{height:26px;width:auto;display:block}
.ts-footer .f-brand p{font-size:var(--fs-s);line-height:1.7;color:#8d9ec5;margin:14px 0 20px;max-width:300px}
.ts-footer h5{font-family:var(--ts-display);font-weight:700;font-size:14px;color:#fff;letter-spacing:.4px;text-transform:uppercase;margin-bottom:16px}
.ts-footer .f-col{display:flex;flex-direction:column;align-items:flex-start;gap:11px}
.ts-footer .f-col a{font-size:var(--fs-s);color:#aebbdd;transition:color var(--t-fast),transform var(--t-fast)}
.ts-footer .f-col a:hover{color:#fff;transform:translateX(3px)}
.ts-footer .f-contact{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.ts-footer .f-contact .fc-phone{font-family:var(--ts-display);font-weight:700;font-size:20px;color:#fff}
.ts-footer .f-contact .fc-mail{font-size:var(--fs-s);color:#aebbdd}
.ts-footer .f-contact .fc-mail:hover{color:#fff}
.ts-footer .f-contact .fc-note{font-size:12.5px;color:#7d8fb8;display:flex;align-items:center;gap:7px}
.ts-footer .f-contact .fc-note svg{width:14px;height:14px;color:#39c47a}
.ts-footer .btn-sm{padding:12px 22px;font-size:14.5px;margin-top:4px}
.ts-footer .f-bottom{border-top:1px solid rgba(255,255,255,.09);padding-block:18px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:var(--fs-xs)}
.ts-footer .f-bottom .powered{color:#6f80a8}
.ts-footer .fsocial{display:flex;gap:12px;align-items:center}
.ts-footer .fsocial a{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;transition:background var(--t-fast),transform var(--t-fast)}
.ts-footer .fsocial a:hover{background:var(--pink);transform:translateY(-2px)}
.ts-footer .fsocial img{width:16px;height:16px}

/* ============ Lead widget (sticky quote form) — site-wide ============ */
.lead-tab{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:80;background:var(--pink);color:#fff;font-family:var(--ts-display);font-weight:600;font-size:14.5px;padding:14px 12px;border-radius:var(--r-m) 0 0 var(--r-m);writing-mode:vertical-rl;text-orientation:mixed;letter-spacing:.4px;box-shadow:var(--shadow-pink);display:flex;align-items:center;gap:10px;transition:background var(--t-fast),padding var(--t-fast)}
.lead-tab:hover{background:var(--pink-hover);padding-right:18px}
.lead-tab svg{width:18px;height:18px;transform:rotate(90deg)}
.lead-bar{display:none}
.lead-backdrop{position:fixed;inset:0;background:rgba(10,24,52,.45);backdrop-filter:blur(3px);z-index:90;opacity:0;pointer-events:none;transition:opacity var(--t-med)}
.lead-open .lead-backdrop{opacity:1;pointer-events:auto}
.lead-panel{position:fixed;top:0;right:0;height:100dvh;width:min(420px,100vw);background:#fff;z-index:95;box-shadow:-24px 0 60px -30px rgba(10,24,52,.4);transform:translateX(105%);transition:transform .34s var(--ease-out);display:flex;flex-direction:column}
.lead-open .lead-panel{transform:none}
.lead-head{background:var(--navy-deep);color:#fff;padding:22px 26px;position:relative}
.lead-head h3{font-family:var(--ts-display);color:#fff;font-size:20px;font-weight:700;margin-bottom:4px}
.lead-head p{color:#aebbdd;font-size:var(--fs-s)}
.lead-close{position:absolute;top:16px;right:16px;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;display:flex;align-items:center;justify-content:center;transition:background var(--t-fast)}
.lead-close:hover{background:rgba(255,255,255,.22)}
.lead-close svg{width:16px;height:16px}
.lead-body{padding:24px 26px;overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:14px}
.lf-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.lf-field{display:flex;flex-direction:column;gap:6px}
.lf-field label{font-family:var(--ts-display);font-weight:600;font-size:var(--fs-xs);color:var(--navy)}
.lf-field input,.lf-field select{font-family:var(--ts-body);font-size:14.5px;color:var(--ts-text);padding:11px 13px;border:1.5px solid var(--ts-line);border-radius:var(--r-s);background:#fff;transition:border-color var(--t-fast),box-shadow var(--t-fast);appearance:none;width:100%}
.lf-field select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%239aa6c4' stroke-width='2' fill='none' stroke-linecap='round'/></svg>");background-repeat:no-repeat;background-position:right 12px center;padding-right:34px}
.lf-field input:focus,.lf-field select:focus{border-color:var(--pink);box-shadow:0 0 0 3px var(--pink-ring);outline:none}
.lf-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.lead-submit{margin-top:6px;width:100%}
.lead-submit[disabled]{opacity:.6;cursor:default}
.lead-error{display:none;font-size:13px;color:#d12c4f;font-weight:600;text-align:center}
.lead-assure{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-top:2px}
.lead-assure span{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ts-muted);font-weight:600}
.lead-assure svg{width:14px;height:14px;color:var(--pink)}
.lead-success{display:none;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:40px 10px}
.lead-success .okc{width:74px;height:74px;border-radius:50%;background:#e7f8ef;color:#1d9e5f;display:flex;align-items:center;justify-content:center}
.lead-success .okc svg{width:36px;height:36px}
.lead-success h4{font-family:var(--ts-display);font-size:19px;font-weight:700}
.lead-success p{font-size:var(--fs-s);color:var(--ts-muted);max-width:280px}
.lead-panel.sent .lead-form{display:none}
.lead-panel.sent .lead-success{display:flex}

/* ============ Scroll reveal (no-JS / print safe) ============ */
.reveal{opacity:1;transform:none}
@media (prefers-reduced-motion:no-preference){
  html.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
  html.js .reveal.in{opacity:1;transform:none}
}

/* ============ Responsive (chrome) — 860 / 600 ============ */
@media(max-width:860px){
  .fband .wrap{grid-template-columns:1fr;gap:24px;justify-items:start;padding-block:34px}
  .fband .feats{border-left:none;padding-left:0;flex-direction:row;flex-wrap:wrap;gap:10px 22px}
  .fband .fband-cta{flex-direction:row;align-items:center;gap:18px;flex-wrap:wrap}
  .ts-footer .f-grid{grid-template-columns:1fr 1fr;gap:36px}
}
@media(max-width:600px){
  .ts-nav .utilbar .wrap{font-size:12px;gap:8px}
  .ts-nav .util-phone span,.ts-nav .util-item span.lbl-full{display:none}
  .ts-nav .ts-header .wrap{height:62px;gap:12px}
  .ts-nav .tagline{display:none}
  .ts-footer .f-grid{grid-template-columns:1fr;gap:30px;padding-block:40px 30px}
  .ts-footer .f-bottom{flex-direction:column;align-items:flex-start}
  .fband .feats{flex-direction:column;gap:11px}
  .fband .fband-cta{width:100%}
  .fband .fband-cta .btn-primary{flex:1;text-align:center}
  /* lead widget: bottom bar instead of side tab */
  .lead-tab{display:none}
  .lead-bar{display:flex;position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:80;background:var(--pink);color:#fff;font-family:var(--ts-display);font-weight:600;font-size:15.5px;padding:15px;border-radius:var(--r-l);box-shadow:var(--shadow-pink);align-items:center;justify-content:center;gap:10px}
  .lead-bar svg{width:19px;height:19px}
  body{padding-bottom:74px}
}

/* ============ RTL (Arabic) ============ */
html[dir='rtl'] .ts-nav .tagline{text-align:left}
html[dir='rtl'] .ts-nav .util-item .sub-menu{right:auto;left:0}
html[dir='rtl'] .ts-nav .tagline .since::after{transform:scaleX(-1)}
html[dir='rtl'] .ts-footer .f-col a:hover{transform:translateX(-3px)}
html[dir='rtl'] .fband .feats{border-left:none;border-right:1.5px solid #cfdff3;padding-left:0;padding-right:clamp(26px,4vw,58px)}
html[dir='rtl'] .lead-tab{right:auto;left:0;border-radius:0 var(--r-m) var(--r-m) 0}
html[dir='rtl'] .lead-panel{right:auto;left:0;transform:translateX(-105%);box-shadow:24px 0 60px -30px rgba(10,24,52,.4)}
html[dir='rtl'] .lead-open .lead-panel{transform:none}
html[dir='rtl'] .lead-close{right:auto;left:16px}
@media(max-width:860px){html[dir='rtl'] .fband .feats{border-right:none;padding-right:0}}