/* ===================================================================
       SMART PHYSIOTHERAPY CENTER — design system
       Palette + rhythm inspired by fullscript.com: warm cream page,
       deep forest green panels, white cards, one gold accent.
       =================================================================== */
    :root{
      --forest:#16382B;
      --forest-mid:#27563F;
      --forest-deep:#0E2A1F;
      --cream:#F6F2E7;
      --cream-2:#FBF8F0;
      --paper:#FFFFFF;
      --sage:#E7EFE4;
      --mint:#D8E7D7;
      --lilac:#E6E0F3;
      --gold:#C6A15B;
      --gold-2:#A9853F;
      --line:#E5DECC;
      --line-2:#EFE9DA;
      --ink:#152A21;
      --muted:#5C6B62;
      --muted-2:#8A8468;
      --on-dark:#F4EFE4;
      --on-dark-dim:rgba(244,239,228,.72);
      --on-dark-soft:rgba(244,239,228,.55);
      --on-dark-line:rgba(244,239,228,.16);
      --r-xl:34px; --r-lg:26px; --r-md:18px; --r-sm:12px;
      --shadow-card:0 1px 2px rgba(21,42,33,.04);
      --shadow-lift:0 20px 44px rgba(21,42,33,.11);
      --shadow-deep:0 32px 70px rgba(0,0,0,.32);
    }

    html{ scroll-behavior:smooth; }
    body{
      margin:0; background:var(--cream); color:var(--ink);
      font-family:'Inter','Hind Siliguri',sans-serif;
      font-size:16px; -webkit-font-smoothing:antialiased;
    }
    *{ box-sizing:border-box; }
    a{ color:inherit; text-decoration:none; }
    img{ max-width:100%; }
    button{ font-family:inherit; }
    input,select,textarea{ font-family:inherit; }
    /* Every framed image fills its container and is cropped by the
       container's aspect-ratio, so an editor can drop in a photo of any
       shape without the layout moving. */
    .hero-frame img,
    .steps-art img,
    .doc-frame img,
    .prod-img img,
    .avatars .av img,
    .mock-av img{ width:100%; height:100%; display:block; object-fit:cover; }
    /* equipment shots are on white backgrounds — show the whole unit */
    .mach-img img{ width:100%; height:100%; display:block; object-fit:contain; }
    ::selection{ background:var(--gold); color:var(--forest); }

    /* ---------- type ---------- */
    .dsp{ font-family:'Fraunces','Noto Serif Bengali',serif; font-weight:600; letter-spacing:0; }
    .lang-bn .dsp{ font-weight:700; }
    .h1{ font-size:clamp(36px,5.1vw,60px); line-height:1.16; margin:0 0 20px; }
    .h2{ font-size:clamp(28px,3.9vw,44px); line-height:1.2; margin:0 0 16px; }
    .h3{ font-size:clamp(21px,2.4vw,28px); line-height:1.28; margin:0 0 12px; }
    .h4{ font-size:19.5px; line-height:1.35; margin:0 0 10px; }
    .lang-bn .h1{ line-height:1.4; }
    .lang-bn .h2{ line-height:1.42; }
    .lang-bn .h3{ line-height:1.45; }
    .lang-bn .h4{ line-height:1.5; }
    .lead{ font-size:17.5px; line-height:1.78; color:var(--muted); margin:0; }
    .lang-bn .lead{ line-height:1.95; }
    .body-sm{ font-size:15px; line-height:1.75; color:var(--muted); margin:0; }
    .lang-bn .body-sm{ line-height:1.9; }
    .eyebrow{
      font-size:12.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
      color:var(--gold-2); margin-bottom:14px;
    }
    .eyebrow-gold{ color:var(--gold); }
    /* Bengali has no case and reads badly when tracked out — soften the
       letterspaced label styles whenever the page is in Bangla. */
    .lang-bn .eyebrow,
    .lang-bn .badge,
    .lang-bn .prod-tag,
    .lang-bn .mach-n,
    .lang-bn .ft-h,
    .lang-bn .contact-card .k{ letter-spacing:.03em; text-transform:none; }
    .on-dark{ color:var(--on-dark); }
    .on-dark-dim{ color:var(--on-dark-dim); }
    .center{ text-align:center; }

    /* ---------- layout ---------- */
    .wrap{ max-width:1180px; margin:0 auto; padding:0 20px; }
    .wrap-narrow{ max-width:820px; margin:0 auto; padding:0 20px; }
    .sec{ padding:92px 0; }
    .sec-sm{ padding:44px 0; }
    .sec-head{ max-width:660px; margin:0 auto 52px; text-align:center; }
    .split{ display:grid; grid-template-columns:1.02fr .98fr; gap:60px; align-items:center; }
    .g3{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
    .g2{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }

    .panel{ border-radius:var(--r-xl); padding:62px 48px; }
    .panel-dark{
      background:var(--forest); color:var(--on-dark);
      background-image:radial-gradient(900px 420px at 88% -12%, rgba(198,161,91,.16), transparent 62%);
    }
    .panel-sage{ background:var(--sage); }
    .panel-lilac{ background:var(--lilac); }

    .card{
      background:var(--paper); border:1px solid var(--line-2); border-radius:var(--r-lg);
      padding:26px; box-shadow:var(--shadow-card);
      transition:transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s ease, border-color .28s ease;
    }
    .card-hov:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lift); border-color:var(--line); }
    .card-dark{
      background:rgba(244,239,228,.055); border:1px solid var(--on-dark-line);
      border-radius:var(--r-lg); padding:26px;
    }

    /* horizontal scroll rail */
    .rail{
      display:grid; grid-auto-flow:column; grid-auto-columns:minmax(268px,286px); gap:18px;
      overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
      padding:4px 4px 20px; margin:0 -4px; scrollbar-width:none; cursor:grab;
    }
    .rail::-webkit-scrollbar{ display:none; }
    .rail-item{ scroll-snap-align:start; }
    /* Snapping has to be suspended for both scripted moves:
       - while dragging, `mandatory` pulls scrollLeft back to the nearest
         snap point on every frame, so the drag feels stuck;
       - during a smooth scrollBy(), Chrome cancels the animation outright
         and leaves the container where it started. */
    .rail.dragging{ scroll-snap-type:none; scroll-behavior:auto; cursor:grabbing; user-select:none; }
    .rail-nav{ display:flex; align-items:center; gap:8px; }
    .rail-btn{
      width:38px; height:38px; border-radius:50%; flex-shrink:0; cursor:pointer;
      border:1px solid var(--on-dark-line); background:transparent;
      display:flex; align-items:center; justify-content:center;
      transition:background .2s ease, border-color .2s ease;
    }
    .rail-btn:hover{ background:rgba(244,239,228,.1); border-color:var(--gold); }
    .rail-btn svg{ stroke:var(--on-dark); }

    /* ---------- buttons ---------- */
    .btn{
      display:inline-flex; align-items:center; justify-content:center; gap:9px;
      padding:12px 22px; border-radius:999px; border:1.5px solid transparent;
      font-size:15px; font-weight:600; cursor:pointer; white-space:nowrap;
      transition:background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
    }
    .btn:active{ transform:translateY(1px); }
    .btn-lg{ padding:15px 30px; font-size:16px; }
    .btn-primary{ background:var(--forest); color:var(--on-dark); }
    .btn-primary:hover{ background:var(--forest-mid); }
    .btn-gold{ background:var(--gold); color:var(--forest); }
    .btn-gold:hover{ background:var(--on-dark); }
    .btn-outline{ border-color:rgba(21,42,33,.22); color:var(--ink); background:transparent; }
    .btn-outline:hover{ border-color:var(--forest); background:rgba(22,56,43,.05); }
    .btn-onwhite{ background:var(--paper); color:var(--forest); }
    .btn-onwhite:hover{ background:var(--gold); }
    .btn-ondark{ border-color:var(--on-dark-line); color:var(--on-dark); background:transparent; }
    .btn-ondark:hover{ border-color:var(--gold); color:var(--gold); }
    .btn-row{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
    .link-arrow{
      display:inline-flex; align-items:center; gap:7px; font-size:15px; font-weight:600;
      color:var(--forest); border-bottom:1.5px solid rgba(22,56,43,.25); padding-bottom:2px;
      transition:border-color .2s ease, color .2s ease;
    }
    .link-arrow:hover{ color:var(--gold-2); border-color:var(--gold); }

    /* ---------- header ---------- */
    .hdr{
      position:sticky; top:0; z-index:60;
      background:rgba(246,242,231,.88); backdrop-filter:blur(14px);
      border-bottom:1px solid var(--line);
    }
    .hdr-in{ max-width:1180px; margin:0 auto; padding:11px 20px; display:flex; align-items:center; gap:18px; }
    .brand{ display:flex; align-items:center; gap:11px; flex-shrink:0; min-width:0; }
    .brand-mark{
      width:42px; height:42px; border-radius:13px; background:var(--forest);
      display:flex; align-items:center; justify-content:center; position:relative; flex-shrink:0;
    }
    .brand-mark span{ font-family:'Fraunces',serif; font-weight:700; font-size:14px; letter-spacing:.4px; color:var(--on-dark); }
    .brand-name{ font-family:'Fraunces','Noto Serif Bengali',serif; font-weight:700; font-size:16px; color:var(--forest); display:block; line-height:1.3; }
    .brand-tag{ font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted-2); display:block; }
    .hdr-nav{ display:flex; align-items:center; gap:24px; margin:0 auto; font-size:15px; font-weight:500; color:var(--forest); }
    .hdr-nav a{ position:relative; padding:6px 0; transition:color .2s ease; }
    .hdr-nav a::after{
      content:''; position:absolute; left:0; right:100%; bottom:0; height:1.5px;
      background:var(--gold); transition:right .25s ease;
    }
    .hdr-nav a:hover{ color:var(--gold-2); }
    .hdr-nav a:hover::after{ right:0; }
    .hdr-act{ display:flex; align-items:center; gap:10px; margin-left:auto; }
    .lang{ display:flex; border:1px solid var(--line); border-radius:999px; padding:3px; background:var(--cream-2); }
    .lang button{
      border:none; cursor:pointer; border-radius:999px; padding:6px 13px;
      font-size:13px; font-weight:600; background:transparent; color:var(--muted);
      transition:background .2s ease, color .2s ease;
    }
    .lang button.on{ background:var(--forest); color:var(--on-dark); }
    .burger{
      display:none; width:42px; height:42px; border-radius:13px; cursor:pointer;
      border:1px solid var(--line); background:var(--cream-2); align-items:center; justify-content:center;
    }
    .hdr-mob{
      border-top:1px solid var(--line); background:var(--cream-2);
      padding:14px 20px 20px; display:flex; flex-direction:column; gap:2px;
    }
    .hdr-mob a{
      padding:13px 4px; font-size:16px; font-weight:500; color:var(--forest);
      border-bottom:1px solid var(--line-2);
    }
    .hdr-mob .btn{ margin-top:14px; }

    /* ---------- hero ---------- */
    .hero{ padding:74px 0 34px; }
    .hero-in{ display:grid; grid-template-columns:1.05fr .95fr; gap:58px; align-items:center; }
    .hero-copy{ animation:spcUp .7s cubic-bezier(.2,.7,.3,1) both; }
    .hero-art{ animation:spcUp .7s cubic-bezier(.2,.7,.3,1) .12s both; position:relative; }
    .pill-eyebrow{
      display:inline-flex; align-items:center; gap:9px; background:var(--paper);
      border:1px solid var(--line); border-radius:999px; padding:7px 16px 7px 12px;
      font-size:13px; font-weight:600; color:var(--forest); margin-bottom:22px;
    }
    .pill-eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--gold); flex-shrink:0; }
    .hero .lead{ max-width:50ch; margin-bottom:30px; }
    .hero-trust{ display:flex; align-items:center; gap:14px; margin-top:28px; flex-wrap:wrap; }
    .avatars{ display:flex; }
    .avatars .av{
      width:38px; height:38px; border-radius:50%; overflow:hidden; flex-shrink:0;
      border:2.5px solid var(--cream); margin-left:-11px; background:var(--mint);
    }
    .avatars .av:first-child{ margin-left:0; }
    .avatars-lg .av{ width:52px; height:52px; border-color:var(--forest); margin-left:-14px; }
    .avatars-lg .av:first-child{ margin-left:0; }
    .hero-trust-txt{ font-size:14.5px; color:var(--muted); line-height:1.6; }
    .hero-frame{
      border-radius:var(--r-xl); overflow:hidden; aspect-ratio:5/4.4;
      box-shadow:var(--shadow-lift); background:var(--mint);
    }
    .hero-chip{
      position:absolute; background:var(--paper); border:1px solid var(--line-2);
      border-radius:var(--r-md); padding:12px 16px; box-shadow:0 14px 32px rgba(21,42,33,.16);
      display:flex; align-items:center; gap:11px;
    }
    .hero-chip-a{ left:-18px; bottom:38px; }
    .hero-chip-b{ right:-14px; top:32px; }
    .hero-chip .n{ font-family:'Fraunces','Noto Serif Bengali',serif; font-weight:700; font-size:21px; color:var(--forest); }
    .hero-chip .l{ font-size:12.5px; line-height:1.45; color:var(--muted); max-width:15ch; }
    .chip-ico{
      width:32px; height:32px; border-radius:10px; background:var(--sage);
      display:flex; align-items:center; justify-content:center; flex-shrink:0;
    }

    /* ---------- stats band ---------- */
    .stats{ padding:56px 0 74px; }
    .stats-label{
      text-align:center; font-size:15.5px; color:var(--muted); margin:0 0 40px;
      max-width:44ch; margin-left:auto; margin-right:auto; line-height:1.7;
    }
    .stats-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
    .stat{ text-align:center; padding:0 10px; border-left:1px solid var(--line); }
    .stat:first-child{ border-left:none; }
    .stat-n{ font-size:clamp(32px,4.4vw,50px); line-height:1.1; color:var(--forest); }
    .stat-l{ font-size:14px; color:var(--muted); margin-top:8px; line-height:1.6; }

    /* ---------- promise panel ---------- */
    .promise{ text-align:center; }
    .promise .avatars{ justify-content:center; margin-bottom:26px; }
    .promise .h2{ max-width:20ch; margin-left:auto; margin-right:auto; }
    .promise .lead{ max-width:60ch; margin:0 auto 30px; }
    .prom-pts{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
    .prom-pt{
      display:inline-flex; align-items:center; gap:8px; border:1px solid var(--on-dark-line);
      background:rgba(244,239,228,.05); border-radius:999px; padding:9px 18px;
      font-size:14px; font-weight:500; color:var(--on-dark-dim);
    }

    /* ---------- services ---------- */
    .svc-art{
      background:var(--sage); border-radius:var(--r-md); height:104px;
      display:flex; align-items:center; justify-content:center; margin-bottom:20px;
      position:relative; overflow:hidden;
    }
    .svc-art::after{
      content:''; position:absolute; right:-30px; bottom:-46px; width:110px; height:110px;
      border-radius:50%; border:1.5px solid rgba(22,56,43,.1);
    }
    .svc-icon{
      width:56px; height:56px; border-radius:17px; background:var(--paper);
      display:flex; align-items:center; justify-content:center; box-shadow:0 6px 16px rgba(21,42,33,.09);
    }
    .svc{ display:flex; flex-direction:column; }
    .svc .body-sm{ flex:1; }          /* keeps every card's tag on the same baseline */
    .svc .tag{
      display:inline-block; align-self:flex-start; margin-top:16px; font-size:12.5px; font-weight:600;
      color:var(--gold-2); background:rgba(198,161,91,.12); border-radius:999px; padding:6px 13px;
    }

    /* ---------- steps ---------- */
    .steps{ list-style:none; margin:28px 0 30px; padding:0; display:flex; flex-direction:column; gap:0; }
    .step{ display:flex; gap:18px; padding:20px 0; border-top:1px solid rgba(22,56,43,.13); }
    .step:first-child{ border-top:none; padding-top:0; }
    .step-n{
      font-family:'Fraunces','Noto Serif Bengali',serif; font-weight:700; font-size:15px;
      width:34px; height:34px; border-radius:50%; background:var(--forest); color:var(--on-dark);
      display:flex; align-items:center; justify-content:center; flex-shrink:0;
    }
    .step h3{ font-size:18px; margin:4px 0 5px; }
    .steps-art{ border-radius:var(--r-lg); overflow:hidden; aspect-ratio:3/2; box-shadow:var(--shadow-lift); background:var(--mint); }

    /* ---------- technology ---------- */
    .tech-head{ max-width:680px; margin:0 auto 40px; text-align:center; }
    .tech-words{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px 20px; margin:0 0 22px; }
    .tech-word{
      display:inline-flex; align-items:center; gap:8px;
      font-family:'Fraunces','Noto Serif Bengali',serif; font-weight:600; font-size:19px; color:var(--gold);
    }
    .tech-cards{ margin-bottom:46px; }
    .badge{
      display:inline-flex; align-items:center; gap:7px; border:1px solid rgba(198,161,91,.4);
      border-radius:999px; padding:5px 13px; font-size:11.5px; font-weight:700;
      letter-spacing:.1em; text-transform:uppercase; color:var(--gold); margin-bottom:16px;
    }
    .mach-wrap{ border-top:1px solid var(--on-dark-line); padding-top:36px; }
    /* let the rail bleed into the panel's padding so the cut-off card reads
       as "there is more to scroll", not as a clipping bug */
    .mach-wrap .rail{ margin-right:-48px; padding-right:48px; }
    .mach-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:22px; flex-wrap:wrap; }
    .mach-hint{ font-size:13.5px; color:var(--on-dark-soft); margin-right:6px; }
    .mach{
      background:var(--paper); border-radius:var(--r-lg); overflow:hidden;
      display:flex; flex-direction:column; transition:transform .28s cubic-bezier(.2,.7,.3,1);
    }
    .mach:hover{ transform:translateY(-5px); }
    .mach-img{ aspect-ratio:4/3; background:#FFFFFF; border-bottom:1px solid var(--line-2); }
    .mach-body{ padding:18px 20px 22px; }
    .mach-n{ font-size:11.5px; font-weight:700; letter-spacing:.14em; color:var(--gold-2); }
    .mach-body h4{ font-family:'Fraunces','Noto Serif Bengali',serif; font-weight:600; font-size:16.5px; color:var(--forest); margin:6px 0 6px; line-height:1.4; }
    .mach-body p{ font-size:13.5px; line-height:1.7; color:var(--muted); margin:0; }

    /* ---------- doctor ---------- */
    .doc-frame{
      border-radius:var(--r-xl); overflow:hidden; aspect-ratio:4/5;
      box-shadow:var(--shadow-lift); background:var(--mint); max-width:440px;
    }
    .creds{ display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
    .cred{
      font-size:13px; font-weight:600; color:var(--forest); background:var(--sage);
      border-radius:999px; padding:7px 15px;
    }
    .quote-mark{ font-family:'Fraunces',serif; font-size:56px; line-height:.6; color:var(--gold); display:block; margin-bottom:14px; }

    /* ---------- supplements ---------- */
    .prod{ padding:0; overflow:hidden; display:flex; flex-direction:column; }
    .prod-img{ aspect-ratio:5/4; background:var(--mint); }
    .prod-body{ padding:24px 24px 26px; display:flex; flex-direction:column; gap:9px; flex:1; }
    .prod-tag{ font-size:11.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--gold-2); }
    .prod-foot{ display:flex; align-items:center; gap:8px; margin-top:6px; font-size:13.5px; font-weight:600; color:var(--muted); }

    /* ---------- care / lilac ---------- */
    .care-pts{ display:flex; flex-direction:column; gap:16px; margin:26px 0 30px; }
    .care-pt{ display:flex; gap:14px; align-items:flex-start; }
    .care-ico{
      width:38px; height:38px; border-radius:12px; background:rgba(255,255,255,.75);
      display:flex; align-items:center; justify-content:center; flex-shrink:0;
    }
    .care-pt h3{ font-size:16.5px; margin:2px 0 4px; }
    .mock{
      background:var(--paper); border-radius:var(--r-lg); overflow:hidden;
      box-shadow:var(--shadow-lift); max-width:400px; margin:0 auto;
    }
    .mock-top{ display:flex; align-items:center; gap:12px; padding:16px 18px; background:var(--forest); }
    .mock-av{ width:40px; height:40px; border-radius:50%; overflow:hidden; flex-shrink:0; background:var(--mint); }
    .mock-name{ font-size:14.5px; font-weight:600; color:var(--on-dark); }
    .mock-status{ font-size:12px; color:var(--on-dark-soft); display:flex; align-items:center; gap:6px; }
    .mock-status::before{ content:''; width:6px; height:6px; border-radius:50%; background:#6FD08C; }
    .mock-body{ padding:18px; display:flex; flex-direction:column; gap:12px; background:var(--cream-2); }
    .bub{ max-width:82%; padding:11px 14px; font-size:13.5px; line-height:1.65; border-radius:16px; position:relative; }
    .lang-bn .bub{ line-height:1.85; }
    .bub-in{ background:var(--paper); border:1px solid var(--line-2); color:var(--ink); border-bottom-left-radius:5px; align-self:flex-start; }
    .bub-out{ background:var(--sage); color:var(--forest); border-bottom-right-radius:5px; align-self:flex-end; }
    .bub-time{ display:block; font-size:10.5px; color:var(--muted-2); margin-top:5px; }

    /* ---------- reviews ---------- */
    .rev-stage{ display:flex; align-items:center; gap:18px; max-width:900px; margin:0 auto; }
    .rev-card{
      flex:1; background:var(--paper); border:1px solid var(--line-2); border-radius:var(--r-xl);
      padding:48px 46px; text-align:center; box-shadow:var(--shadow-card); min-height:270px;
      display:flex; flex-direction:column; align-items:center; justify-content:center;
    }
    .stars{ color:var(--gold); font-size:16px; letter-spacing:3px; margin-bottom:18px; }
    .rev-q{ font-size:clamp(18px,2.2vw,25px); line-height:1.55; color:var(--forest); margin:0 0 24px; max-width:34ch; }
    .lang-bn .rev-q{ line-height:1.7; }
    .rev-who{ font-size:14.5px; color:var(--muted); }
    .rev-who b{ color:var(--ink); }
    .rev-nav{
      width:46px; height:46px; border-radius:50%; border:1px solid var(--line);
      background:var(--paper); cursor:pointer; flex-shrink:0;
      display:flex; align-items:center; justify-content:center;
      transition:background .2s ease, border-color .2s ease;
    }
    .rev-nav:hover{ background:var(--forest); border-color:var(--forest); }
    .rev-nav:hover svg{ stroke:var(--on-dark); }
    .dots{ display:flex; justify-content:center; gap:8px; margin-top:26px; }
    .dots button{
      width:8px; height:8px; border-radius:999px; border:none; cursor:pointer;
      background:rgba(22,56,43,.2); padding:0; transition:width .25s ease, background .25s ease;
    }
    .dots button.on{ width:26px; background:var(--forest); }

    /* ---------- trust row ---------- */
    .trust-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; padding:44px 0; border-top:1px solid var(--line); }
    .trust-it{ display:flex; align-items:center; gap:14px; justify-content:center; text-align:left; }
    .trust-ico{
      width:44px; height:44px; border-radius:14px; background:var(--sage);
      display:flex; align-items:center; justify-content:center; flex-shrink:0;
    }
    .trust-it .t{ font-size:15px; font-weight:600; color:var(--forest); }
    .trust-it .s{ font-size:13px; color:var(--muted); }

    /* ---------- faq ---------- */
    .faq-item{ border-bottom:1px solid var(--line); }
    .faq-q{
      width:100%; background:none; border:none; cursor:pointer; text-align:left;
      display:flex; align-items:center; justify-content:space-between; gap:20px;
      padding:24px 4px; font-size:17px; font-weight:600; color:var(--forest); line-height:1.5;
    }
    .faq-q:hover{ color:var(--gold-2); }
    .faq-ico{
      width:30px; height:30px; border-radius:50%; border:1px solid var(--line);
      display:flex; align-items:center; justify-content:center; flex-shrink:0;
      transition:transform .3s cubic-bezier(.2,.7,.3,1), background .3s ease;
    }
    .faq-a{ overflow:hidden; transition:max-height .34s cubic-bezier(.2,.7,.3,1), opacity .3s ease; }
    .faq-a p{ font-size:15.5px; line-height:1.85; color:var(--muted); margin:0 0 24px; padding-right:50px; }
    .lang-bn .faq-a p{ line-height:2; }

    /* ---------- cta band ---------- */
    .cta{ text-align:center; }
    .cta .h2{ max-width:18ch; margin-left:auto; margin-right:auto; }
    .cta .lead{ max-width:52ch; margin:0 auto 30px; }
    .cta .btn-row{ justify-content:center; }

    /* ---------- booking ---------- */
    .book-in{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
    .contact-card{
      display:flex; align-items:center; gap:14px; background:rgba(244,239,228,.06);
      border:1px solid var(--on-dark-line); border-radius:var(--r-md); padding:16px 20px;
      color:var(--on-dark); transition:border-color .2s ease, background .2s ease;
    }
    .contact-card:hover{ border-color:var(--gold); background:rgba(244,239,228,.1); }
    .contact-card .k{ display:block; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--on-dark-soft); }
    .contact-card .v{ font-weight:700; font-size:17.5px; }
    .form-card{ background:var(--cream-2); border-radius:var(--r-xl); padding:36px 32px; box-shadow:var(--shadow-deep); }
    .field{ display:flex; flex-direction:column; gap:7px; font-size:14px; font-weight:600; color:var(--forest); }
    .field input,.field select,.field textarea{
      width:100%; padding:13px 15px; border-radius:var(--r-sm); border:1px solid var(--line);
      background:var(--paper); font-size:15.5px; color:var(--ink); outline:none;
      transition:border-color .2s ease, box-shadow .2s ease;
    }
    .field input:focus,.field select:focus,.field textarea:focus{
      border-color:var(--gold); box-shadow:0 0 0 3px rgba(198,161,91,.18);
    }
    .field textarea{ resize:vertical; }
    .meta-line{ display:flex; gap:12px; align-items:flex-start; font-size:15px; color:var(--on-dark-dim); line-height:1.75; }

    /* ---------- footer ---------- */
    .ft{ background:var(--forest-deep); color:var(--on-dark); padding:64px 0 28px; }
    .ft-top{ display:grid; grid-template-columns:1.15fr 2fr; gap:48px; padding-bottom:44px; border-bottom:1px solid var(--on-dark-line); }
    .ft-blurb{ font-size:14.5px; line-height:1.85; color:var(--on-dark-soft); margin:16px 0 20px; max-width:34ch; }
    .ft-cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
    .ft-h{ font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin-bottom:16px; }
    .ft-col a{ display:block; font-size:14.5px; color:var(--on-dark-dim); padding:6px 0; transition:color .2s ease; }
    .ft-col a:hover{ color:var(--gold); }
    .ft-bot{ padding-top:24px; display:flex; flex-wrap:wrap; gap:14px 32px; justify-content:space-between; }
    .ft-bot p{ font-size:12.5px; line-height:1.8; color:var(--on-dark-soft); margin:0; max-width:56ch; }
    .soc{ display:flex; gap:10px; }
    .soc a{
      width:36px; height:36px; border-radius:11px; border:1px solid var(--on-dark-line);
      display:flex; align-items:center; justify-content:center; transition:border-color .2s ease, background .2s ease;
    }
    .soc a:hover{ border-color:var(--gold); background:rgba(198,161,91,.12); }

    /* ---------- floating whatsapp ---------- */
    .fab{
      position:fixed; right:20px; bottom:20px; z-index:70;
      width:56px; height:56px; border-radius:50%; background:#1FA855;
      display:flex; align-items:center; justify-content:center;
      box-shadow:0 12px 30px rgba(0,0,0,.28); transition:transform .2s ease;
    }
    .fab:hover{ transform:scale(1.06); }

    @keyframes spcUp{ from{ opacity:0; transform:translateY(20px); } to{ opacity:1; transform:none; } }

    /* ===================== responsive ===================== */
    @media (max-width:1040px){
      .hdr-nav{ gap:18px; font-size:14.5px; }
      .panel{ padding:52px 34px; }
    }
    @media (max-width:900px){
      .hdr-nav{ display:none; }
      .hdr-cta{ display:none; }
      .burger{ display:flex; }
      .hero{ padding:52px 0 24px; }
      .hero-in{ grid-template-columns:1fr; gap:44px; }
      .hero-art{ max-width:460px; }
      .split{ grid-template-columns:1fr; gap:40px; }
      .book-in{ grid-template-columns:1fr; gap:40px; }
      .g3{ grid-template-columns:repeat(2,1fr); }
      .sec{ padding:68px 0; }
      .stats-row{ grid-template-columns:repeat(2,1fr); gap:32px 20px; }
      .stat:nth-child(3){ border-left:none; }
      .ft-top{ grid-template-columns:1fr; gap:36px; }
      .doc-frame{ max-width:340px; margin:0 auto; }
    }
    @media (max-width:620px){
      /* the brand lockup cannot shrink, so trim it before it pushes the
         language toggle and burger past the viewport edge */
      .hdr-in{ gap:10px; }
      .brand-tag{ display:none; }
      .brand-name{ font-size:15px; }
      .brand-mark{ width:38px; height:38px; border-radius:12px; }
      .lang button{ padding:6px 10px; font-size:12.5px; }
      .panel{ padding:40px 22px; border-radius:26px; }
      .mach-wrap .rail{ margin-right:-22px; padding-right:22px; }
      .g3,.g2{ grid-template-columns:1fr; }
      .trust-row{ grid-template-columns:1fr; gap:20px; }
      .trust-it{ justify-content:flex-start; }
      .rev-stage{ gap:8px; }
      .rev-card{ padding:34px 22px; min-height:auto; }
      .rev-nav{ width:38px; height:38px; }
      .ft-cols{ grid-template-columns:1fr 1fr; gap:24px; }
      .hero-chip-a{ left:0; bottom:14px; }
      .hero-chip-b{ right:0; top:14px; }
      .form-card{ padding:28px 20px; }
      .stat{ text-align:left; border-left:none; padding:0; }
      .stats-label{ text-align:left; margin-left:0; }
      .faq-a p{ padding-right:0; }
      .sec-head{ text-align:left; margin-bottom:36px; }
      .promise{ text-align:left; }
      .promise .avatars{ justify-content:flex-start; }
      .promise .h2,.promise .lead{ margin-left:0; }
      .prom-pts{ justify-content:flex-start; }
      .tech-head{ text-align:left; }
      .tech-words{ justify-content:flex-start; }
      .cta .h2,.cta .lead{ margin-left:0; }
      .cta{ text-align:left; }
      .cta .btn-row{ justify-content:flex-start; }
    }

    /* ---------- static-site additions ---------- */
    /* skip link: first tab stop, hidden until focused */
    .skip{
      position:absolute; left:-9999px; top:0; z-index:200;
      background:var(--forest); color:var(--on-dark);
      padding:12px 20px; border-radius:0 0 var(--r-sm) 0; font-weight:600;
    }
    .skip:focus{ left:0; }

    /* visible keyboard focus everywhere — the design file had none */
    a:focus-visible,
    button:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible{
      outline:2px solid var(--gold); outline-offset:3px; border-radius:4px;
    }
    .panel-dark a:focus-visible,
    .panel-dark button:focus-visible,
    .ft a:focus-visible{ outline-color:var(--gold); }

    /* language switch is a link between two real pages now, not a JS toggle */
    .lang a{
      display:inline-flex; align-items:center; border-radius:999px;
      padding:6px 13px; font-size:13px; font-weight:600; color:var(--muted);
      transition:background .2s ease, color .2s ease;
    }
    .lang a.on{ background:var(--forest); color:var(--on-dark); }
    .lang a:not(.on):hover{ color:var(--forest); }

    /* form feedback */
    .form-error{
      background:#FBECEC; border:1px solid #E8C4C4; color:#8A2B2B;
      border-radius:var(--r-sm); padding:12px 14px; font-size:14px; line-height:1.6;
    }
    button[aria-busy="true"]{ opacity:.65; pointer-events:none; }

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

    /* ---------- behaviour hooks the static page relies on ---------- */

    /* Several components set display:flex/grid, which beats the browser's
       own [hidden] rule — so hiding via the attribute needs to win here. */
    [hidden]{ display:none !important; }

    /* the FAQ is a native <details> now: drop the default disclosure triangle */
    .faq-item summary{ list-style:none; cursor:pointer; }
    .faq-item summary::-webkit-details-marker{ display:none; }
    .faq-item summary::marker{ content:''; }

    /* booking-form honeypot: invisible to people, tempting to bots */
    .hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0; }

    /* ---------- video (YouTube, loaded on click) ---------- */
    .video-frame,
    .video-player{
      display:block; position:relative; width:100%; max-width:960px; margin:0 auto;
      aspect-ratio:16/9; border-radius:var(--r-xl); overflow:hidden; border:0;
      background:var(--forest); box-shadow:var(--shadow-lift);
    }
    .video-frame img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; }
    .video-frame:hover img{ transform:scale(1.03); }
    .video-play{
      position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
      width:78px; height:78px; border-radius:50%; background:var(--gold);
      display:flex; align-items:center; justify-content:center;
      box-shadow:0 14px 34px rgba(0,0,0,.3); transition:transform .2s ease, background .2s ease;
    }
    .video-frame:hover .video-play{ transform:translate(-50%,-50%) scale(1.08); background:var(--on-dark); }
    .video-play svg{ margin-left:4px; }

    /* ---------- CMS-driven pieces ---------- */
    /* an uploaded logo: fixed height, any width up to a sensible maximum */
    .brand-logo{ display:flex; align-items:center; height:42px; flex-shrink:0; }
    .brand-logo img{ height:100%; width:auto; max-width:200px; object-fit:contain; display:block; }
    /* a logo made for light backgrounds, shown in the dark footer */
    .brand-logo.on-chip{ background:#F4EFE4; border-radius:12px; padding:5px 10px; height:46px; }
    @media (max-width:620px){ .brand-logo{ height:36px; } .brand-logo img{ max-width:150px; } }

    /* reviews with fewer than five stars */
    .stars-off{ color:rgba(22,56,43,.18); }

    /* a footer item with nowhere to link to */
    .ft-col .ft-txt{ display:block; font-size:14.5px; color:var(--on-dark-dim); padding:6px 0; }