/* ============================================================================
   css/site.css — Digital IPD, single site-wide stylesheet
   ============================================================================
   Replaces: style.css, css/brand-type.css, css/page.css, css/legal.css,
   css/book-a-demo.css, css/blog.css, css/blog-post.css, css/why-caresoft.css,
   css/location.css, css/inside-the-ward.css, css/privacy.css — all of which
   were loaded in different combinations per page, several re-declaring the
   same :root/reset/nav/footer rules with slightly different values, which is
   what caused the footer text and "Book a demo" button to look different
   from page to page. This file is the only stylesheet now linked in
   inc/head.php; every page loads the same one file (better caching too —
   one download instead of 2-3 per page).

   DEDUPE PASS NOTES (this version):
   - Removed duplicate --plum / --paper redeclared in a second :root block
     (--paper conflicted: #FAF7FC vs the locked #FAF7F2 — the locked value wins).
   - Removed conflicting height:100dvh from the first .hero-section block;
     sizing is now owned by the later, fixed .hero-section block only.
   - Scoped the IBM-Plex-Mono .eyebrow override to .hero-section .eyebrow so
     it no longer silently overrides the sitewide Bricolage Grotesque .eyebrow.
   - Removed duplicate px-based .promise-row (kept the var(--sp-4) version).
   - Removed duplicate .btn override in the page.css section (kept the
     original Buttons-section .btn).
   - Removed duplicate .btn-outline (kept the var(--purple)/1.5px version).
   - Removed the entire first FAQ implementation ([8] FAQ — .faq-pill /
     .faq-header premium design), which was fully shadowed by the later
     brand-type.css FAQ block. Only one FAQ system remains.
   - Renamed the "inside the ward" status badge from .chip to .iw-chip —
     it collided with the WEDGE feature-chip .chip and was clobbering it.
     Update the matching class in inside-the-ward markup from chip → iw-chip.
   ============================================================================ */

/* ============================================================
   BRAND TOKENS  (locked — do not approximate)
   ============================================================ */
:root{
  --paper:      #FAF7F2;   /* warm paper — page base */
  --paper-2:    #F2ECE2;   /* deeper cream — alternating sections */
  --plum:       #2C1036;   /* replaces black EVERYWHERE (text, ink) */
  --purple:     #7A2090;   /* Royal Purple — primary accent */
  --violet:     #4E1560;   /* Deep Violet — gradient partner */
  --rose:       #AE3A48;   /* Crimson-Rose — warm accent, sparing */
  --teal:       #1F9E97;   /* Clinical Teal — SYNCED / FUNCTIONAL states ONLY */

  --bg:#FAF7FC;
  --text:#2C1036;

  --white:#fff;
  --transition:.4s ease;

  --bg-gradient: linear-gradient(180deg, #f8f6f9 0%, #ffffff 100%);
  --primary-purple: #3b1d48;
  --accent-color: #703380;
  --card-bg: #ffffff;
  --card-border: #e8dee9;
  --text-dark: #1f1d2b;
  --text-muted: #64607d;
  --shadow-sm: 0 4px 12px rgba(59, 29, 72, 0.03);
  --shadow-hover: 0 12px 24px rgba(112, 51, 128, 0.08);

  --ink-90: rgba(44,16,54,.90);
  --ink-70: rgba(44,16,54,.68);
  --ink-45: rgba(44,16,54,.45);
  --line:   rgba(44,16,54,.12);

  --on-dark-90: rgba(250,247,242,.92);
  --on-dark-60: rgba(250,247,242,.60);
  --on-dark-line: rgba(250,247,242,.14);

  --maxw: 1090px;
  --measure: 62ch;
  --pad-y: clamp(5.5rem, 11vw, 9.5rem);
  --radius: 18px;

  --grad-dark: linear-gradient(155deg, #3A155A 0%, #2C1036 55%, #22052E 100%);

  /* Aliases needed by pages merged into this file (legal, book-a-demo, blog,
     why-caresoft, inside-the-ward, location) — same colours/sizes as above,
     kept under their old names so those page sections don't have to be
     rewritten selector-by-selector. Do not give these new values. */
  --ink:     #2C1036;               /* = --plum */
  --gutter:  clamp(1.5rem,5vw,4.5rem);
  --max:     1180px;                /* secondary-page content width */
  --sect:    clamp(5.5rem,11vw,9.5rem);
  --display: 'Fraunces',Georgia,'Times New Roman',serif;
  --body:    'Bricolage Grotesque',system-ui,-apple-system,sans-serif;
  --primary:   #7A2090;             /* = --purple, used by blog pages */
  --secondary: #4E1560;             /* = --violet */
  --accent:    #AE3A48;             /* = --rose */

  /* Final-CTA-section-only tokens (deep violet CTA background family).
     --plum and --paper were previously redeclared here too — removed;
     the locked values at the top of this file are the single source. */
  --brand-purple: #7A2090;
  --deep-violet: #4E1560;
  --brand-rose: #AE3A48;
  --mid-purple: #A24FB5;
  --lilac: #C9A4D4;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto;-webkit-text-size-adjust:100%}
body.wt-locked{
  overflow:hidden;
  height:100vh;
}
html.wt-locked{
  overflow:hidden;
}
html, body{
  overflow-anchor: none; /* browser ko apni marzi se scroll shift karne se roko */
}
body{
  background:var(--paper);
  color:var(--plum);
  font-family:"Bricolage Grotesque",system-ui,sans-serif;
  font-size:clamp(1rem,.55vw + .9rem,1.14rem);
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{text-decoration: none;}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(1.25rem,4vw,2.5rem)}

/* Type roles ------------------------------------------------ */
.display{
  font-family:"Fraunces",Georgia,serif;
  font-weight:500;
  line-height:1.03;
  letter-spacing:-.015em;
  font-optical-sizing:auto;
}
.display em{font-style:italic;font-weight:500;color:var(--purple)}
h1.display{font-size:clamp(2.7rem,6.4vw,5.1rem)}
h2.display{font-size:clamp(2.05rem,4.4vw,3.35rem)}
.eyebrow{
  font-family:"Bricolage Grotesque",sans-serif;
  font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--purple);
}
.eyebrow.on-dark{color:#C69BE0}
.hand{font-family:"Caveat",cursive;font-weight:500}

/* Buttons --------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:"Bricolage Grotesque",sans-serif;font-weight:600;font-size:1.02rem;
  padding:.95rem 1.7rem;border-radius:999px;border:0;cursor:pointer;
  text-decoration:none;transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
.btn-primary{background:var(--purple);color:#fff;box-shadow:0 10px 26px -12px rgba(122,32,144,.7)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 34px -12px rgba(122,32,144,.8)}
.btn-primary.on-dark{background:#fff;color:var(--plum);box-shadow:0 10px 30px -14px rgba(0,0,0,.6)}
.btn .arw{transition:transform .18s ease}
.btn:hover .arw{transform:translateX(3px)}
.textlink{
  display:inline-flex;align-items:center;gap:.4rem;
  color:var(--ink-70);text-decoration:none;font-weight:500;font-size:.98rem;
  border-bottom:1px solid var(--line);padding-bottom:2px;transition:color .16s,border-color .16s;
}
.textlink:hover{color:var(--purple);border-color:var(--purple)}
.textlink.on-dark{color:var(--on-dark-60);border-color:var(--on-dark-line)}
.textlink.on-dark:hover{color:#fff;border-color:#fff}

/* ============================================================
   [1] WALKTHROUGH HANDOFF  (stub — the 3D cinema lands here)
   Dev B: this dark panel is where the existing 80%-done 3D
   walkthrough ends. The SEAM is the dark→cream dissolve into
   the Promise below. Replace the inner placeholder with the
   final frame / canvas handoff of the walkthrough.
   ============================================================ */
.handoff{
  position:relative;background:var(--grad-dark);color:var(--on-dark-90);
  min-height:100vh;display:grid;place-items:center;text-align:center;
  overflow:hidden;
}
.handoff::after{ /* the seam: dissolve into paper */
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:38%;
  background:linear-gradient(to bottom,rgba(250,247,242,0),var(--paper));
  pointer-events:none;
}
.handoff-inner{position:relative;z-index:2;padding:2rem}
.handoff .stub-tag{
  display:inline-block;border:1px dashed var(--on-dark-line);border-radius:999px;
  padding:.5rem 1.1rem;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--on-dark-60);margin-bottom:1.6rem;
}
.handoff h2{font-family:"Fraunces",serif;font-weight:500;font-size:clamp(1.5rem,3vw,2.2rem);color:var(--on-dark-90);max-width:20ch;margin-inline:auto;line-height:1.15}
.scrollcue{position:absolute;bottom:calc(38% + 14px);left:50%;transform:translateX(-50%);z-index:2;color:var(--on-dark-60);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;opacity:0;transition:opacity .4s ease;pointer-events:none}
.scrollcue.show{opacity:1}

/* ---- scroll-scrubbed walkthrough (frame sequence) ---- */
#handoff-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block}
.handoff-veil{position:absolute;inset:0;z-index:1;opacity:.45;pointer-events:none}
.handoff-vignette{position:absolute;inset:0;z-index:1;opacity:0;pointer-events:none;
}
#handoff-loader{
  position:absolute;inset:0;z-index:5;display:grid;place-items:center;
  color:var(--on-dark-90);
  font-family:"Bricolage Grotesque",sans-serif;font-size:.9rem;letter-spacing:.08em;text-transform:uppercase;
}
#handoff-prog{position:absolute;top:0;left:0;height:3px;width:0%;z-index:3;background:var(--purple);transition:width .05s linear}
.handoff-st{
  position:absolute;left:50%;bottom:22%;transform:translateX(-50%);z-index:2;
  text-align:center;padding:0 1.5rem;opacity:0;pointer-events:none;max-width:30ch;
}
.handoff-st .stub-tag{
  display:inline-block;border:1px dashed var(--on-dark-line);border-radius:999px;
  padding:.5rem 1.1rem;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--on-dark-60);margin-bottom:1.6rem;
}
.handoff-st h2{font-family:"Fraunces",serif;font-weight:500;font-size:clamp(1.4rem,3vw,2.1rem);color:var(--on-dark-90);line-height:1.15}

/* ============================================================
   [2] PROMISE / HERO
   ============================================================ */
.hero-section{
  max-width:100%;
  width:100%;
  text-align:center;
  position:relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  /* height:100dvh removed — sizing now owned solely by the
     .hero-section rule in the "brand-type" section below, which
     fixes small-screen clipping. Do not reintroduce a fixed height
     here. */
}

.hero-section .eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-weight:600;
  font-size:12px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--purple);
  margin-bottom:28px;
}

/* animation start */

.zoomInUpTitle{
    opacity: 0;
    transform: scale(0.2) translateY(300px);
    animation: zoomInUp 2.5s cubic-bezier(.175,.885,.32,1.275) forwards;
    transform-origin: center bottom;
    font-family: 'IBM Plex Mono', monospace;
}

@keyframes zoomInUp {
    0% {
        opacity: 0;
        transform: scale(0.2) translateY(300px);
    }

    60% {
        opacity: 1;
        transform: scale(0.6) translateY(-20px);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.zoomInDownTitle{
    opacity: 0;
    transform: scale(0.15) translateY(-250px);
    transform-origin: center top;
    animation: zoomInDown 2.5s cubic-bezier(.175,.885,.32,1.275) forwards;
}

.zoomInDownTitle .line2{
    display: block;
    color: var(--purple);
    font-style: italic;
}

@keyframes zoomInDown{
    0%{
        opacity: 0;
        transform: scale(0.15) translateY(-250px);
    }

    60%{
        opacity: 1;
        transform: scale(0.6) translateY(20px);
    }

    100%{
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* animation end */

h1{
    font-family:'Newsreader', serif;
    font-weight:500;
    font-size:clamp(38px, 5.6vw, 66px);
    line-height:1.08;
    letter-spacing:-0.01em;
    margin:0 0 6px;
    color:var(--ink);
}

h1 .line2{
    display:block;
    font-style:italic;
    font-weight:500;
    color:var(--teal);
    margin-top:4px;
}

.sub{
    max-width:560px;
    margin:30px auto 0;
    font-size:17px;
    line-height:1.65;
    color:var(--slate);
}

.byline{
    font-family:'Newsreader', serif;
    font-style:italic;
    font-weight:500;
    font-size:15px;
    color:#8A9198;
    margin-top:22px;
}

.promise-row{
    margin-top:var(--sp-4);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:.9rem;
}

.promise{
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:#7A2090;
    color: #fff;
    font-family:'Inter', sans-serif;
    font-weight:600;
    font-size:15px;
    padding:16px 30px;
    border-radius:100px;
    text-decoration:none;
    border:none;
    cursor:pointer;
    transition:transform 0.18s ease, background 0.18s ease;
}
.promise:hover{
    background: white;
    color:black;
    transform:translateY(-1px);
}
.promise svg{width:16px;height:16px;}

.caption{
    font-family:'IBM Plex Mono', monospace;
    font-size:12px;
    letter-spacing:0.06em;
    color:#9CA3A8;
}

/* --- signature trace graphic --- */
.trace-wrap{
    margin-top:64px;
    width:100%;
}
.trace-wrap svg{
    width:100%;
    height:auto;
    display:block;
    overflow:visible;
}

.trace-path{
    fill:none;
    stroke:var(--ink);
    stroke-width:2.2;
    stroke-linecap:round;
    stroke-linejoin:round;
}
.branch{
    fill:none;
    stroke:var(--teal);
    stroke-width:2;
    stroke-linecap:round;
    opacity:0.85;
}
.dot{
    fill:var(--amber);
}
.pulse-dot{
    fill:var(--amber);
}
.node-label{
    font-family:'IBM Plex Mono', monospace;
    font-size:12.5px;
    font-weight:600;
    fill:var(--ink);
    letter-spacing:0.01em;
}
.note-label{
    font-family:'IBM Plex Mono', monospace;
    font-size:11px;
    fill:#9CA3A8;
    letter-spacing:0.08em;
    text-transform:uppercase;
}

@media (max-width:640px){
    .trace-wrap{margin-top:44px;}
    .sub{font-size:16px;}
}

@media (prefers-reduced-motion: no-preference){
    .trace-path{
      stroke-dasharray: 900;
      stroke-dashoffset: 900;
      animation: draw 1.8s ease-out forwards;
    }
    .branch{
      stroke-dasharray: 200;
      stroke-dashoffset: 200;
      animation: draw 1s ease-out forwards;
      animation-delay: 1.4s;
    }
    .node-label, .dot{
      opacity:0;
      animation: fadein 0.6s ease-out forwards;
      animation-delay: 2.1s;
    }
    @keyframes draw{ to { stroke-dashoffset: 0; } }
    @keyframes fadein{ to { opacity:1; } }
}

/* ============================================================
   [3] VILLAIN
   ============================================================ */
.villain{background:var(--paper-2);padding-block:var(--pad-y);position:relative}
.villain .eyebrow{color:var(--rose)}
.villain h2 {
    max-width: 16ch;
    margin-top: 1.3rem;
    font-size: 35px;
}
.beats{margin-top:3rem;display:flex;flex-direction:column;gap:0;max-width:760px}
.beat {
    padding: 0.7rem 0;
    border-top: 1px solid var(--line);
    font-size: 19px;
    line-height: 1.5;
    color: var(--ink-90);
    font-family: "Fraunces", serif;
    font-weight: 400;
}
.beat:last-of-type{border-bottom:1px solid var(--line)}
.beat.grow{color:var(--plum)} /* third beat — the one that breathes */
.payroll {
    margin-top: 3%;
    font-family: "Fraunces", serif;
    font-weight: 600;
    font-style: italic;
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    color: var(--rose);
}
.villain .tease {
    margin-top: 0.5rem;
}

/* Layout */
.villain-grid {
    display: grid;
    grid-template-columns: 0.7fr 0.89fr;
    align-items: center;
    gap: 70px;
}

/* Right Image */
.villain-image{
    display:flex;
    justify-content:center;
    align-items:center;
}

.villain-image video {
    width: 100%;
    max-width: 700px;
    height: auto;
    display: block;
    border-radius: 10px;
}

/* Responsive */
@media (max-width:1100px){

    .villain-grid{
        grid-template-columns:1fr;
        gap:50px;
    }

    .villain-image{
        order:-1; /* remove this line if you want image below content */
    }

    .villain-image img{
        max-width:700px;
        margin:auto;
    }
}

/* ============================================================
   [4] WEDGE  + note-flow SIGNATURE animation
   ============================================================ */
.wedge{background:var(--grad-dark);color:var(--on-dark-90);padding-block:var(--pad-y);position:relative;overflow:hidden}
.wedge .eyebrow{color:#C69BE0}
.wedge h2{color:#fff;max-width:18ch;margin-top:1.2rem}
.wedge .lead{color:var(--on-dark-60);max-width:52ch;margin-top:1.4rem;font-size:1.08rem}
.wedge .lead b{color:var(--on-dark-90);font-weight:500}
.nobridge{
  font-family:"Fraunces",serif;font-weight:500;font-style:italic;
  font-size:clamp(1.5rem,3.2vw,2.35rem);color:#fff;margin:2.4rem 0 1rem;max-width:20ch;
}
.wedge .kicker{color:var(--on-dark-90);max-width:48ch;font-size:1.06rem}
.wedge .kicker em{color:var(--teal);font-style:normal;font-weight:600}

/* --- the animation stage --- */
.flow{
  margin-top:3.4rem;background:rgba(250,247,242,.04);
  border:1px solid var(--on-dark-line);border-radius:var(--radius);
  padding:clamp(1.5rem,3vw,2.6rem);display:grid;gap:1.8rem;
  grid-template-columns:1fr;max-width:920px;
}
@media(min-width:780px){.flow{grid-template-columns:minmax(0,340px) 1fr;align-items:center}}
.note-card{
  background:var(--paper);color:var(--plum);border-radius:12px;padding:1.4rem 1.5rem;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.7);position:relative;
}
.note-card .formlabel{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-45);margin-bottom:.7rem}
.note-line{height:1px;background:var(--line);margin:.85rem 0}
.note-hand{font-family:"Caveat",cursive;font-size:1.5rem;line-height:1.3;color:var(--violet);min-height:2.6em}
.note-hand .cursor{display:inline-block;width:2px;height:1.1em;background:var(--purple);vertical-align:-2px;margin-left:1px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.synced{
  display:inline-flex;align-items:center;gap:.45rem;margin-top:1rem;
  font-weight:600;font-size:.92rem;color:var(--teal);
  opacity:0;transform:translateY(4px);transition:opacity .4s,transform .4s;
}
.synced.on{opacity:1;transform:none}
.synced .tick{width:18px;height:18px;border-radius:50%;background:var(--teal);color:#fff;display:grid;place-items:center;font-size:.7rem}

.flow-right{display:flex;flex-direction:column;gap:.9rem}
.flow-cap{font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark-60);margin-bottom:.2rem}
.chips{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.chip{
  border:1px solid var(--on-dark-line);border-radius:11px;padding:.85rem 1rem;
  display:flex;align-items:center;gap:.6rem;color:var(--on-dark-60);
  transition:border-color .5s,color .5s,background .5s,box-shadow .5s;
}
.chip .dot{width:9px;height:9px;border-radius:50%;background:var(--on-dark-60);transition:background .5s,box-shadow .5s}
.chip .lbl{font-weight:500;font-size:.98rem}
.chip.lit{border-color:rgba(31,158,151,.6);color:#fff;background:rgba(31,158,151,.10)}
.chip.lit .dot{background:var(--teal);box-shadow:0 0 0 4px rgba(31,158,151,.22)}
.flow-foot{display:flex;align-items:center;justify-content:space-between;margin-top:.4rem;gap:1rem;flex-wrap:wrap}
.flow-foot .simul{font-size:.9rem;color:var(--on-dark-60)}
.flow-foot .simul b{color:var(--teal);font-weight:600}
.replay{
  background:transparent;border:1px solid var(--on-dark-line);color:var(--on-dark-90);
  border-radius:999px;padding:.5rem 1rem;font-family:inherit;font-size:.85rem;font-weight:500;cursor:pointer;
  display:inline-flex;align-items:center;gap:.45rem;transition:border-color .15s,background .15s;
}
.replay:hover{border-color:var(--teal);background:rgba(31,158,151,.08)}

/* --- Side-by-Side Grid Layout --- */
.wedge-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
}

@media (min-width: 992px) {
  .wedge-grid {
    grid-template-columns: 1fr 1fr; /* Text on Left, Flow Stage on Right */
    gap: 3.5rem;
  }
}

/* Adjust Flow Container for Right Side Placement */
.wedge .flow {
  margin-top: 0;                   /* Removes top margin now that it is inline */
  width: 100%;
  max-width: 100%;
  grid-template-columns: 1fr;       /* Stacks Note Card above Chips on right side */
  gap: 1.8rem;
}

/* Ensure flow grid maintains vertical card-above-chips stack on all screens */
@media (min-width: 780px) {
  .wedge .flow {
    grid-template-columns: 1fr;    /* Keeps Top (Card) -> Bottom (Chips) layout */
    align-items: stretch;
  }
}

/* ============================================================
   [5] ADOPTION
   ============================================================ */
.adopt{padding-block:var(--pad-y)}
.adopt-grid{display:grid;gap:clamp(2rem,5vw,4rem);grid-template-columns:1fr}
@media(min-width:860px){.adopt-grid{grid-template-columns:1.05fr .95fr;align-items:center}}
.adopt h2{max-width:15ch;margin-top:1.2rem}
.adopt .lines{margin-top:1.8rem;display:flex;flex-direction:column;gap:1.15rem;max-width:44ch}
.adopt .lines p{font-size:1.12rem;color:var(--ink-90)}
.adopt .lines .lead-line{font-family:"Fraunces",serif;font-size:1.28rem;color:var(--plum)}
.adopt .oneday{
  margin-top:1.9rem;font-family:"Fraunces",serif;font-weight:600;font-style:italic;
    font-size:clamp(1.8rem, 3.5vw, 2.8rem);
  color:var(--purple);
}
.imgslot{
  aspect-ratio:4/5;border-radius:var(--radius);border:1px dashed var(--line);
  background:
    radial-gradient(120% 90% at 70% 20%,rgba(122,32,144,.10),transparent 60%),
    var(--paper-2);
  display:grid;place-items:center;text-align:center;padding:2rem;color:var(--ink-45);
}
.imgslot .ph{font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;max-width:22ch;line-height:1.5}
.imgslot .hand{font-size:1.6rem;color:var(--purple);opacity:.6;margin-top:.8rem}

/* ===========================
   Adoption Image Slider
=========================== */

.imgslot{
    overflow:hidden;
    position:relative;
    padding:0;
}

.slider{
    width:100%;
    height:100%;
    position:relative;
}

.slide{
    position:absolute;
    inset:0;

    opacity:0;
    transition:opacity .9s ease;

    display:flex;
    align-items:center;
    justify-content:center;
}

.slide.active{
    opacity:1;
    z-index:2;
}

.slide img{
    width:100%;
    height:100%;
    object-fit:cover;

    border-radius:inherit;
    display:block;
}

/* Pause animation on hover */

.imgslot:hover .slide{
    transition-duration:.9s;
}

/* ============================================================
   [6] CALCULATOR  (PARKED — awaiting sales/research numbers)
   Dev B: build the interactive component into this container
   once numbers are locked. Inputs: beds + nurses/shift.
   Output: nurse-hours returned/month (headline) + ₹ saved (support).
   NEVER show per-user price here — that stays in the demo.
   ============================================================ */
.calc{padding-top: 0;
    padding-bottom: 140px;
    ;text-align:center}
.calc-shell{
  max-width:820px;margin:2.2rem auto 0;border:1px dashed var(--purple);
  border-radius:var(--radius);background:
    linear-gradient(180deg,rgba(122,32,144,.05),rgba(122,32,144,.02));
  padding:clamp(2.5rem,6vw,4.5rem) 1.5rem;color:var(--ink-45);
}
.calc-shell .tag{display:inline-block;border:1px solid var(--purple);color:var(--purple);border-radius:999px;padding:.4rem 1rem;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;margin-bottom:1.2rem}
.calc-shell h3{font-family:"Fraunces",serif;font-weight:500;font-size:1.5rem;color:var(--plum);margin-bottom:.6rem}
.calc-shell p{max-width:44ch;margin-inline:auto;font-size:.98rem}

/* ============================================================
   [7] PROOF / PEDIGREE / PORTFOLIO
   ============================================================ */
.proof{background:var(--paper-2);padding-block:var(--pad-y);text-align:center}
.proof h2{max-width:14ch;margin:1.2rem auto 0}
.stats{
  margin:3rem auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;max-width:820px;
}
@media(max-width:640px){.stats{grid-template-columns:1fr;gap:1.8rem}}
.stat .big{font-family:"Fraunces",serif;font-weight:600;font-size:clamp(2.4rem,5vw,3.6rem);color:var(--purple);line-height:1}
.stat .lbl{margin-top:.7rem;font-size:.9rem;color:var(--ink-70);letter-spacing:.02em}
.proof .portfolio-line{
  margin:3rem auto 0;max-width:52ch;font-family:"Fraunces",serif;font-size:1.24rem;
  line-height:1.5;color:var(--plum);font-style:italic;
}
.products{
  margin:1.7rem auto 0;display:inline-flex;flex-wrap:wrap;justify-content:center;gap:.6rem 1.4rem;
  font-size:.86rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-45);font-weight:600;
}
.products span{position:relative}
.products span:not(:last-child)::after{content:"·";position:absolute;right:-.85rem;color:var(--ink-45)}
/* quote slot */
.quote{
  margin:3.4rem auto 0;max-width:640px;border-top:1px solid var(--line);padding-top:2.4rem;
}
.quote blockquote{font-family:"Fraunces",serif;font-size:clamp(1.2rem,2.2vw,1.6rem);line-height:1.45;color:var(--plum);font-style:italic}
.quote .who{margin-top:1.1rem;font-size:.92rem;color:var(--ink-45);font-style:normal}
.quote .slotnote{margin-top:.6rem;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--purple);opacity:.7}

/* ============================================================
   [7] PROOF / PEDIGREE — premium stage version
============================================================ */

.proof{
    padding-top: 0;
    background:var(--paper);
    overflow:hidden;
}

.proof-head{
    max-width:760px;
    margin:0 auto;
    text-align:center;
}

.proof h2{
    margin-top:1rem;
}

.proof-intro{
    margin:1.8rem auto 0;
    max-width:56ch;
    color:var(--ink-70);
    font-size:1.05rem;
    line-height:1.8;
}

/* ===========================
   Premium Container
=========================== */

.proof-stage{
    position:relative;
    margin-top:4rem;
    padding:clamp(2rem,4vw,3.5rem);
    border-radius:28px;
    overflow:hidden;
    background:linear-gradient(145deg,#351047,#5B1772);
    box-shadow:
        0 30px 60px rgba(44,16,54,.18);
}

/* Background Glow */
.proof-bg{
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
    radial-gradient(circle at 80% 10%,
    rgba(255,255,255,.10),
    transparent 35%),
    radial-gradient(circle at 15% 90%,
    rgba(122,32,144,.30),
    transparent 45%),
    radial-gradient(circle at 60% 40%,
    rgba(255,255,255,.03),
    transparent 45%);
}

/* ===========================
   Header
=========================== */

.proof-stage-head{
    position:relative;
    z-index:2;
    text-align:center;
    margin-bottom:3.2rem;
}

.proof-tag{
    display:inline-block;
    font-size:.78rem;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:#F06B6B;
    font-weight:600;
    margin-bottom:1rem;
}

.proof-stage-head h3{
    color:#fff;
    font-family:"Fraunces",serif;
    font-size:clamp(2rem,4vw,3rem);
    font-weight:400;
    line-height:1.25;
}

.proof-stage-head h3 em{
    color:#D8B5E6;
    font-style:italic;
}

/* ===========================
   Cards
=========================== */

.proof-grid{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1.6rem;
}

/* Card */
.proof-card{
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.12);
    border-radius:18px;
    padding:2rem;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    min-height:330px;
    transition:.35s ease;
    backdrop-filter:blur(10px);
}

.proof-card:hover{
    transform:translateY(-8px);
    background:rgba(255,255,255,.09);
    border-color:#D8B5E6;
}

/* Highlight Card */
.proof-card.active{
    background:#fff;
    color:var(--plum);
    border:1px solid #D56A74;
    transform:translateY(-12px);
    margin-top: 6%;
    box-shadow:
    0 20px 45px rgba(0,0,0,.18);
}

.proof-card.active:hover{
    transform:translateY(-18px);
}

/* Label */
.proof-label{
    display:block;
    color:#D8B5E6;
    font-size:.76rem;
    letter-spacing:.16em;
    text-transform:uppercase;
    font-weight:700;
    margin-bottom:1rem;
}

.proof-card.active .proof-label{
    color:#D56A74;
}

/* Heading */
.proof-card h4{
    font-family:"Fraunces",serif;
    font-size:2rem;
    font-weight:500;
    color:#fff;
    line-height:1.2;
    margin-bottom:1rem;
}

.proof-card.active h4{
    color:var(--purple);
}

/* Description */
.proof-card p{
    color:rgba(255,255,255,.82);
    line-height:1.8;
    font-size:.96rem;
}

.proof-card.active p{
    color:var(--ink-80);
}

/* Badge */
.proof-badge{
    align-self:center;
    margin-top:2rem;
    padding:.75rem 1.3rem;
    border-radius:100px;
    border:1px solid rgba(255,255,255,.30);
    color:#fff;
    font-size:.72rem;
    text-transform:uppercase;
    letter-spacing:.12em;
    font-weight:600;
}

.proof-card.active .proof-badge{
    background:#F4ECF8;
    color:var(--purple);
    border-color:#A14AB6;
}

/* ===========================
   Products
=========================== */

.proof-products{
    position:relative;
    z-index:2;
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:.8rem;
    margin-top:3rem;
}

.proof-products span{
    padding:.8rem 1.2rem;
    border-radius:999px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.10);
    color:#fff;
    font-size:.78rem;
    text-transform:uppercase;
    letter-spacing:.12em;
}

/* ===========================
   Quote
=========================== */

.proof-quote{
    position:relative;
    z-index:2;
    margin-top:3rem;
    padding-top:2rem;
    text-align:center;
    border-top:1px solid rgba(255,255,255,.15);
}

.proof-quote blockquote{
    font-family:"Fraunces",serif;
    font-size:clamp(1.25rem,2vw,1.7rem);
    color:#fff;
    font-style:italic;
    line-height:1.6;
    max-width:38ch;
    margin:auto;
}

.proof-author{
    margin-top:1.3rem;
    color:#D8B5E6;
    font-size:.92rem;
}

.proof-note{
    margin-top:.6rem;
    font-size:.74rem;
    text-transform:uppercase;
    letter-spacing:.12em;
    color:#F06B6B;
    opacity:.8;
}

/* ===========================
   Responsive
=========================== */

@media(max-width:991px){
.proof-grid{
grid-template-columns:1fr;
}
.proof-card.active{
transform:none;
}
.proof-card{
min-height:auto;
}
}

@media(max-width:600px){
.proof-stage{
padding:1.5rem;
border-radius:22px;
}
.proof-stage-head{
margin-bottom:2rem;
}
.proof-card{
padding:1.5rem;
}
.proof-products{
gap:.6rem;
}
.proof-products span{
width:100%;
text-align:center;
}
}

/* ============================================================
   PROOF - PREMIUM EFFECTS
============================================================ */

/* Floating Gradient Animation */
.proof-bg{
    animation: proofGlow 10s ease-in-out infinite alternate;
}

@keyframes proofGlow{
    0%{
        transform:scale(1) rotate(0deg);
        opacity:1;
    }
    100%{
        transform:scale(1.08) rotate(4deg);
        opacity:.92;
    }
}

/* Card Shine */
.proof-card{
    position:relative;
    overflow:hidden;
}

.proof-card::before{
    content:"";
    position:absolute;
    top:0;
    left:-130%;
    width:65%;
    height:100%;
    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.12),
        transparent
    );
    transition:.8s;
}

.proof-card:hover::before{
    left:150%;
}

/* Product Pills */
.proof-products span{
    transition:.3s ease;
}

.proof-products span:hover{
    transform:translateY(-3px);
    background:rgba(255,255,255,.16);
}

/* Quote Animation */
.proof blockquote{
    transition:.4s ease;
}

.proof-quote:hover blockquote{
    transform:translateY(-3px);
}

/* Card Headings */
.proof-card h4{
    transition:.35s ease;
}

.proof-card:hover h4{
    letter-spacing:.01em;
}

/* Smooth Transition */
.proof *{
    transition:
        background .35s ease,
        color .35s ease,
        border-color .35s ease;
}

/* ============================================================
   [8] FAQ  (single implementation — plain card design)
   NOTE: an earlier "premium" purple-pill FAQ implementation
   (.faq-pill / .faq-header / accent-color icon circles) used to
   live here as well, targeting the same .faq-section/.faq-list/
   .faq-card/.faq-question/.faq-toggle-icon/.faq-answer selectors.
   It was fully shadowed by this block (same selectors, later in
   the cascade) and has been removed so there is exactly one FAQ
   design in the file. If you want the purple-pill look back,
   restyle this block rather than re-adding a second one.
   ============================================================ */
.faq-section{ padding-block:var(--sp-6); }
.faq-h{ text-align:center; margin-bottom:var(--sp-4); }
.faq-list{ max-width:56rem; margin-inline:auto; display:grid; gap:.85rem; }
.faq-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:1.15rem 1.4rem; transition:border-color .2s, box-shadow .2s;
}
.faq-card[open]{ border-color:rgba(122,32,144,.35); box-shadow:0 14px 34px -26px rgba(44,16,54,.5); }
.faq-question{
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  font-size:var(--t-md); font-weight:600; cursor:pointer; list-style:none;
}
.faq-question::-webkit-details-marker{ display:none; }
.faq-toggle-icon{ position:relative; width:16px; height:16px; flex:none; }
.faq-toggle-icon::before,.faq-toggle-icon::after{
  content:""; position:absolute; inset:50% 0 auto 0; height:2px; background:var(--purple);
  transition:transform .25s;
}
.faq-toggle-icon::after{ transform:rotate(90deg); }
.faq-card[open] .faq-toggle-icon::after{ transform:rotate(0); }
.faq-answer{ padding-top:.85rem; color:var(--ink-70); }
.faq-answer p{ font-size:var(--t-base); line-height:1.6; }

/* ============================================================
   [9] FINAL CTA — Deep Violet background (#4E1560)
   ============================================================ */
.final {
  position: relative;
  background: var(--deep-violet); /* #4E1560 Base Background */
  color: var(--paper);
  padding: clamp(100px, 13vw, 150px) 0;
  text-align: center;
  overflow: hidden;
  border-bottom: none;
  margin-top: 3%;
}

/* Tonal ambient overlay over Deep Violet canvas */
.final .premium-bg {
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(70% 60% at 50% 10%, rgba(122, 32, 144, 0.35) 0%, transparent 70%),
    radial-gradient(85% 75% at 50% 90%, rgba(174, 58, 72, 0.2) 0%, transparent 80%),
    linear-gradient(180deg, var(--deep-violet) 0%, #3B0F49 100%);
  pointer-events: none;
  z-index: 1;
}

/* Subtle Animated Ambient Glow Spot */
.final .ambient-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 650px;
  height: 380px;
  background: radial-gradient(circle, rgba(201, 164, 212, 0.15), rgba(162, 79, 181, 0.15), transparent 70%);
  filter: blur(90px);
  pointer-events: none;
  z-index: 1;
  animation: floatGlowViolet 10s ease-in-out infinite alternate;
}

@keyframes floatGlowViolet {
  0% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.6; }
  100% { transform: translate(-50%, -46%) scale(1.15); opacity: 0.9; }
}

.final .stroke-wm {
  position: absolute;
  right: -3%;
  bottom: -10%;
  width: 50%;
  opacity: 0.05;
  pointer-events: none;
  z-index: 1;
  stroke: #FFFFFF;
}

.final-container {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.final-header {
  margin-bottom: 1.5rem;
}

.final .eyebrow {
  display: inline-block;
  font-family: var(--body);
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--lilac); /* Lilac for high clarity on Deep Violet */
  font-weight: 600;
  margin-bottom: 1.2rem;
}

.final h2.display {
  color: #FFFFFF;
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(34px, 5.2vw, 60px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  max-width: 18ch;
  margin-inline: auto;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  font-family: "Fraunces", serif;
  font-style: italic;
}

.final .sub {
  color: rgba(250, 247, 252, 0.88);
  font-family: var(--body);
  max-width: 46ch;
  margin: 0 auto 3.2rem;
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  line-height: 1.65;
  font-weight: 300;
}

/* Action Container Layout */
.cta-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.8rem;
  width: 100%;
}

/* Primary Button Design */
.final .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1.1rem 2.8rem;
    border-radius: 50px;
    font-family: var(--body);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    background: #fff9f9;
    color: #040303;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 12px 28px -4px rgb(225 208 210 / 45%);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.final .btn-primary:hover {
  transform: translateY(-2px);
  background: rgba(250, 247, 252, 0.14);
  border-color: rgba(250, 247, 252, 0.35);
  color: #FFFFFF;
  box-shadow: none;
}

.final .btn-primary .btn-arrow {
  transition: transform 0.3s ease;
  font-size: 1.15rem;
  line-height: 1;
}

.final .btn-primary:hover .btn-arrow {
  transform: translateX(5px);
}

/* Premium WhatsApp Link: Glassmorphic Pill */
.wa-premium-link {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.6rem 1.4rem 0.6rem 0.7rem;
  background: rgba(250, 247, 252, 0.08);
  border: 1px solid rgba(250, 247, 252, 0.18);
  border-radius: 40px;
  color: var(--paper);
  text-decoration: none;
  font-family: var(--body);
  font-size: 0.95rem;
  font-weight: 400;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.wa-premium-link .wa-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.75rem;
  border-radius: 20px;
  background: rgba(37, 211, 102, 0.2);
  border: 1px solid rgba(37, 211, 102, 0.35);
  color: #25D366;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.wa-premium-link .wa-icon {
  fill: #25D366;
}

.wa-premium-link .wa-arrow {
  transition: transform 0.3s ease, color 0.3s ease;
  color: var(--lilac);
  font-size: 1.1rem;
}

.wa-premium-link:hover {
  background: rgba(250, 247, 252, 0.14);
  border-color: rgba(250, 247, 252, 0.35);
  transform: translateY(-2px);
  color: #FFFFFF;
}

.wa-premium-link:hover .wa-arrow {
  transform: translateX(4px);
  color: #FFFFFF;
}

/* Decorative Lilac Glow Divider */
.final .divider-glow {
  width: 80px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--lilac), transparent);
  margin: 3.8rem auto 2.2rem;
  opacity: 0.4;
}

/* Trust Statement */
.final .ped {
  color: var(--lilac);
  font-family: var(--display);
  font-style: italic;
  font-size: 1.09rem;
  letter-spacing: 0.01em;
  opacity: 0.9;
}

/* Responsive Adjustments */
@media (max-width: 640px) {
  .final {
    padding: 75px 0;
  }

  .wa-premium-link {
    width: 100%;
    max-width: 330px;
    justify-content: center;
    padding: 0.65rem 1rem;
  }

  .final .btn-primary {
    width: 100%;
    max-width: 330px;
  }
}
/* reduced motion */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
}

/* ==========floating whatsapp css============ */

.whatsapp-btn {
    position: fixed;
    right: 35px;
    bottom: 27px;
    width: 65px;
    height: 65px;
    background: linear-gradient(135deg, #25D366, #128C7E);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    box-shadow: 0 8px 25px rgba(37, 211, 102, 0.4);
    transition: all 0.3s ease;
    animation: pulse 2s infinite;
}

.whatsapp-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 10px 30px rgba(37, 211, 102, 0.6);
}

.whatsapp-btn svg {
    width: 34px;
    height: 34px;
}

.wa-tooltip {
    position: absolute;
    right: 80px;
    background: #222;
    color: #fff;
    padding: 8px 12px;
    border-radius: 30px;
    font-size: 14px;
    white-space: nowrap;
    opacity: 0;
    transition: 0.3s;
}

.whatsapp-btn:hover .wa-tooltip {
    opacity: 1;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(37,211,102,.7);
    }
    70% {
        box-shadow: 0 0 0 18px rgba(37,211,102,0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(37,211,102,0);
    }
}

/* Highlight Target Wrapper (Dark Purple & Extra Bold) */
.animated-highlight {
  position: relative;
  display: inline-block;
  color: var(--purple);
  font-weight: 800;           /* Extra Bold */
  white-space: nowrap;
}

/* SVG Placement below text */
.stroke-underline {
  position: absolute;
  left: -2%;
  bottom: -0.35em;
  width: 104%;
  height: 0.5em;
  overflow: visible;
  pointer-events: none;
}

/* Stroke Styling (Marker/Brush Feel) */
.stroke-path {
  fill: none;
  stroke: var(--primary);
  stroke-width: 3.5px;
  stroke-linecap: round;
  stroke-linejoin: round;
  
  /* Dash offset trick for line animation */
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  animation: drawStroke 3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* Bottom line delay for natural hand-drawn effect */
.stroke-bottom {
  stroke-width: 2.8px;
  opacity: 0.85;
  animation-delay: 0.25s;
}

/* Infinite Drawing Keyframes */
@keyframes drawStroke {
  0% {
    stroke-dashoffset: 220;    /* Hidden */
  }
  35% {
    stroke-dashoffset: 0;      /* Drawn completely */
  }
  75% {
    stroke-dashoffset: 0;      /* Hold/Stay visible */
  }
  100% {
    stroke-dashoffset: -220;   /* Fade out / erase smoothly */
  }
}

/* ==========================================================
   SKIP-SCROLL BUTTON (fixed, bottom-right)
   Only visible while the pinned walkthrough is in play — jumps
   straight past the scroll-scrubbed intro to the rest of the page.
   NOTE: two competing definitions of .skip-scroll-btn used to
   exist (a purple pill version here, and a dark pill version in
   the brand-type section further down). The dark pill version is
   the one that wins in the cascade, so this earlier definition is
   removed to avoid confusion; the active rule lives in section 5
   of the brand-type block below.
   ========================================================== */

/* ============================================================
   NAV / FOOTER / TYPE SCALE / FAQ — was css/brand-type.css
   Single canonical source for .navbar, .nav-links, .site-foot, .certs
   ================================================================ */
/* ============================================================
   brand-type.css — Digital IPD
   Loads AFTER style.css. Brand tokens in style.css are untouched;
   this file fixes the type scale, the nav (previously inline in
   header.php) and the states style.css never defined.

   Why this exists: .zoomInDownTitle — the H1 on the landing page —
   had NO font-size, so the hero headline was rendering at the
   browser default (~32px) instead of display size, and sat at
   opacity:0 for the first second of a 2.5s animation. That is both
   the "looks small" problem and an LCP problem.
   ============================================================ */

:root{
  /* One fluid scale, 1.25 ratio, clamped. Used everywhere. */
  --t-xs:   clamp(.78rem, .15vw + .74rem, .86rem);
  --t-sm:   clamp(.88rem, .2vw  + .83rem, .97rem);
  --t-base: clamp(1rem,   .3vw  + .93rem, 1.14rem);
  --t-md:   clamp(1.14rem,.45vw + 1.04rem, 1.32rem);
  --t-lg:   clamp(1.4rem, .9vw  + 1.2rem,  1.85rem);
  --t-xl:   clamp(1.85rem,2vw   + 1.35rem, 2.7rem);
  --t-2xl:  clamp(2.3rem, 3.6vw + 1.4rem,  3.6rem);
  --t-3xl:  clamp(2.8rem, 5.6vw + 1.2rem,  5rem);

  --lede: clamp(1.08rem, .6vw + .96rem, 1.3rem);

  --sp-1:.5rem; --sp-2:1rem; --sp-3:1.5rem; --sp-4:2.25rem;
  --sp-5:3.5rem; --sp-6:5rem; --sp-7:7rem;

  --head-h: 76px;
}

/* ---------- Accessibility floor ---------- */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:10001;
  background:var(--plum); color:var(--paper);
  padding:.75rem 1.25rem; border-radius:0 0 10px 0; font-weight:600;
}
.skip-link:focus{ left:0; }

:where(a,button,summary,input,textarea,select):focus-visible{
  outline:3px solid var(--purple);
  outline-offset:3px;
  border-radius:6px;
}

/* ============================================================
   1. HERO — the actual "looks bigger / looks like a brand" fix
   ============================================================ */
.hero-section{
  padding-block: calc(var(--head-h) + var(--sp-5)) var(--sp-6);
  padding-inline: clamp(1.25rem, 5vw, 3rem);
  min-height: min(100dvh, 860px);
  height:auto;                       /* was locked to 100dvh — clipped on small screens */
  gap: var(--sp-2);
  max-width: 62rem;
  margin-inline: auto;
}

.hero-section .eyebrow{
  font-size: var(--t-xs);
  letter-spacing:.18em;
  margin-bottom: var(--sp-2);
}

/* THE fix: give the H1 a real display size. */
.hero-section h1,
.zoomInDownTitle{
  font-family:"Fraunces", Georgia, serif;
  font-size: var(--t-3xl);
  font-weight:500;
  line-height:1.02;
  letter-spacing:-.022em;
  font-optical-sizing:auto;
  text-wrap:balance;
  max-width:18ch;
  margin-inline:auto;
}
.zoomInDownTitle .line2{
  display:block;
  color:var(--purple);
  font-style:italic;
}

.hero-section .sub{
  font-size: var(--lede);
  line-height:1.55;
  color:var(--ink-70);
  max-width:52ch;
  margin: var(--sp-3) auto 0;
  text-wrap:pretty;
}

/* The Caresoft credibility line was an <h2> with an inline colour.
   It is a proof line, not a section heading — style it as one. */
.hero-section .zoomInUpTitle,
.hero-section h2.zoomInUpTitle{
  font-family:"Bricolage Grotesque", system-ui, sans-serif;
  font-size: var(--t-sm) !important;
  font-weight:600 !important;
  letter-spacing:.01em;
  color:var(--ink-70) !important;
  margin-top: var(--sp-3);
  max-width:46ch;
  margin-inline:auto;
}
.hero-section .zoomInUpTitle strong{ color:var(--plum); }

.promise-row{
  margin-top: var(--sp-4);
  display:flex; flex-direction:column; align-items:center; gap:.9rem;
}
.promise-row h5{
  font-size: var(--t-xs);
  font-weight:500;
  letter-spacing:.12em;
  color:var(--ink-45);
  text-transform:none;
}

/* Entrance animation: was 2.5s from opacity 0 — the LCP element was
   invisible for ~1s. Now short, and skipped entirely for reduced motion. */
@keyframes heroIn{
  from{ opacity:0; transform:translateY(14px) scale(.985); }
  to  { opacity:1; transform:none; }
}
.zoomInDownTitle,
.zoomInUpTitle{
  animation: heroIn .55s cubic-bezier(.22,.9,.3,1) both;
}
.zoomInUpTitle{ animation-delay:.12s; }

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

/* ============================================================
   2. SECTION HEADINGS — consistent everywhere
   ============================================================ */
h1.display{ font-size:var(--t-3xl); }
h2.display{ font-size:var(--t-2xl); line-height:1.06; letter-spacing:-.018em; text-wrap:balance; }
h3        { font-size:var(--t-lg);  line-height:1.2;  letter-spacing:-.01em; }
h4        { font-size:var(--t-md);  line-height:1.3; }

p, li{ font-size:var(--t-base); }
.beat{ font-size:var(--t-md); line-height:1.5; max-width:46ch; }
.payroll{ font-size:var(--t-lg); font-weight:600; }

/* ============================================================
   3. NAV — single canonical definition (was duplicated 3x across
   this file + css/page.css, with a broken copy that relied on
   undefined --primary/--secondary vars and hid nav-links via a
   .navbar.hide class that only site.js's OLD sibling script set.
   site.js (loaded on every page via partials/foot.php) toggles
   .navbar.scrolled — that's the only class this block reacts to.
   ============================================================ */

.site-head{
  position:sticky; top:0; z-index:1000;
}
.navbar {
     padding: 10px 40px; 
    display: flex;
    align-items: center;
    gap: clamp(3rem, 3vw, 2.5rem);
    background: rgba(255, 255, 255, 0);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(20px);
    transition: border-color 0.3s, background 0.3s;
}
.logo img{ height:52px; width:auto; display:block; }

/* Only the logo and "Book a demo" stay on screen once you scroll — the
   link list is what used to keep the whole bar pinned full-width, so it
   collapses out instead of staying sticky with everything else. */
@media (min-width:941px){
  .navbar-main{
    transition:opacity .22s ease, visibility .22s ease, margin .22s ease;
  }
  .navbar.scrolled .navbar-main{
    opacity:0;
    visibility:hidden;
    width:0;
    margin:0;
    pointer-events:none;
  }
  .navbar.scrolled{ justify-content:space-between; }

}
@media (max-width:900px){
   .navbar {
        padding: 10px 13px;
  }
}

.navbar-main{ flex:1; display:flex; justify-content:center; }
.nav-links{ display:flex; align-items:center; gap:clamp(1.2rem,2.6vw,2.6rem); list-style:none; margin:0; padding:0; }
.nav-links a{
  font-size:var(--t-sm); font-weight:500; color:var(--ink-70);
  text-decoration:none; position:relative; padding-block:.4rem;
  transition:color .2s;
}
.nav-links a:hover{ color:var(--plum); }
.nav-links a.active{ color:var(--plum); font-weight:600; }
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:0;
  background:var(--purple); transition:width .28s cubic-bezier(.22,.9,.3,1);
}
.nav-links a:hover::after,.nav-links a.active::after{ width:100%; }

.nav-buttons{ 
  /* display: flex; */
    align-items: center;
    gap: 16px;
    margin-left: auto;
    position: relative;
    z-index: 10000; }

.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.72rem 1.4rem; border-radius:999px;
  font-size:var(--t-sm); font-weight:600; text-decoration:none;
  transition:transform .2s, background .2s, box-shadow .2s;
}
.btn-primary{ background:var(--purple); color:#fff; box-shadow:0 12px 26px -14px rgba(122,32,144,.75); }
.btn-primary:hover{ background:var(--violet); transform:translateY(-1px); }
.btn-outline{ border:1.5px solid var(--purple); color:var(--purple); background:white; }
.btn-outline:hover{ background:var(--purple); color:#fff; }

/* A handful of in-page CTAs (book-a-demo, inside-the-ward) use a bare
   class="btn" with no -primary/-outline modifier and expect a solid
   purple pill by default — give it one, same as .btn-primary. */
.btn:not(.btn-outline):not(.btn--ghost){ background:var(--purple); color:#fff;  }
.btn:not(.btn-outline):not(.btn--ghost):hover{ background:var(--violet); }
.btn--ghost{ background:transparent; color:var(--ink); border:1px solid color-mix(in srgb,var(--ink) 22%,transparent); }
.btn--ghost:hover{ background:transparent; border-color:var(--purple); color:var(--purple); }

.menu-toggle{ display:none; background:none; border:0; color:var(--plum); cursor:pointer; padding:.4rem; }

.mobile-menu{
  position:fixed; top:var(--head-h); right:0; width:min(88vw,340px);
  height:calc(100dvh - var(--head-h)); background:var(--paper);
  border-left:1px solid var(--line); padding:2rem 1.75rem;
  transform:translateX(100%); transition:transform .32s cubic-bezier(.22,.9,.3,1);
  visibility:hidden;
}
.mobile-menu.show{ visibility:visible; transform:none; }
.mobile-menu ul{ list-style:none; margin:0 0 2rem; padding:0; display:grid; gap:1.35rem; }
.mobile-menu a{ font-size:var(--t-md); font-weight:500; color:var(--plum); text-decoration:none; }
.mobile-buttons{ display:flex; flex-direction:column; gap:1rem; }
body.menu-open{ overflow:hidden; }

@media (max-width:940px){
  .nav-links,.nav-buttons{ display:none; }
  .menu-toggle{ display:block; margin-left:auto; }
  :root{ --head-h:62px; }
  .logo img{ height:36px; }
}

/* ============================================================
   4. FOOTER
   ============================================================ */
.site-foot{ background:var(--plum); color:var(--on-dark-90); padding-block:var(--sp-5) var(--sp-3);  }
.foot-top{ display:flex; flex-wrap:wrap; gap:var(--sp-5); justify-content:space-between; }
.site-foot .logo img{ height:60px; filter:brightness(0) invert(1); }
.site-foot .by{ font-size:var(--t-xs); color:var(--on-dark-60); margin-top:.6rem; }
.foot-cols{ display:flex; flex-wrap:wrap; gap:var(--sp-5); }
.foot-cols .col{ display:grid; gap:.55rem; align-content:start; }
.foot-cols .ch{ font-size:var(--t-xs); font-weight:600; letter-spacing:.1em; color:var(--on-dark-60); margin-bottom:.3rem; }
.foot-cols a{ font-size:var(--t-sm); color:var(--on-dark-90); text-decoration:none; }
.foot-cols a:hover{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
.certs{ font-size:var(--t-xs); color:var(--on-dark-60); line-height:1.7; margin-top:var(--sp-4); padding-top:var(--sp-3); border-top:1px solid var(--on-dark-line); max-width:none; }
.certs a{ color:var(--on-dark-90); }
.foot-bot{ font-size:11px; color:var(--on-dark-60); margin-top:var(--sp-2); }

/* ============================================================
   5. Walkthrough loader — visible progress instead of a frozen page
   ============================================================ */
#handoff-loader{
  position:absolute; inset:0; display:grid; place-content:center; gap:1rem;
  background:var(--plum); color:var(--on-dark-90);
  font-size:var(--t-sm); z-index:5;
}
#handoff-loader .bar{ width:min(240px,60vw); height:3px; background:var(--on-dark-line); border-radius:999px; overflow:hidden; }
#handoff-loader .bar i{ display:block; height:100%; width:0; background:var(--purple); transition:width .2s; }

.skip-scroll-btn{
  position:fixed; right:1.25rem; bottom:5.5rem; z-index:190;
  display:none; align-items:center; gap:.45rem;
  background:rgba(44,16,54,.9); color:var(--paper);
  border:0; border-radius:999px; padding:.6rem 1rem;
  font-size:var(--t-xs); font-weight:600; cursor:pointer;
}
.skip-scroll-btn.show{ display:inline-flex; }

.dipd-wa{
  position:fixed; right:clamp(1rem,3vw,2rem); bottom:clamp(1rem,3vw,2rem); z-index:200;
  display:inline-flex; background:#1FA855; color:#fff; padding:12px; border-radius:50%;
  box-shadow:0 14px 34px -14px rgba(44,16,54,.6); transition:background .25s, transform .25s;
}
.dipd-wa:hover{ background:#15602e; transform:translateY(-2px); }

/* Print: let people print a page without a fixed nav eating the top */
@media print{
  .site-head,.dipd-wa,.skip-scroll-btn,.mobile-menu{ display:none !important; }
  body{ background:#fff; }
}

/* ============================================================
   Shared secondary-page type & components (was css/page.css)
   Used by: why-caresoft, book-a-demo, terms, disclaimer, privacy,
   inside-the-ward. :root / reset / .wrap / .btn now come from the
   sections above — only this page's unique pieces are kept here.
   ============================================================ */
/* ── type ───────────────────────────────────────────────────────────── */
.eyebrow--serif{
  font-family:var(--display);font-style:italic;font-weight:400;font-size:1rem;
  font-variation-settings:'opsz' 20,'SOFT' 40;
  color:color-mix(in srgb,var(--purple) 82%,transparent);
  margin-bottom:1.5rem;letter-spacing:.005em;
}
.dark .eyebrow--serif{color:color-mix(in srgb,#E5C9F0 88%,transparent)}
/* NOTE: h1/h2 base sizing is owned by section 2 above
   (h1.display / h2.display) and the hero h1 rule further up.
   Only the shared italic-em treatment and the secondary-page
   .body-lg / .close copy styles live here now. */
h1 em,h2 em{font-style:italic;font-variation-settings:'opsz' 96,'SOFT' 60}

.body-lg{
  font-size:clamp(1.06rem,1.5vw,1.2rem);
  color:color-mix(in srgb,var(--ink) 76%,transparent);margin-top:1.9rem;
}
.dark .body-lg{color:color-mix(in srgb,#F6EAF7 72%,transparent)}
.close{margin-top:1.5rem;font-size:clamp(1.06rem,1.5vw,1.2rem);color:var(--ink)}
.dark .close{color:#F8F1F9}

/* ── header ─────────────────────────────────────────────────────────── */
/* "Powered by Caresoft" is separate text. Never merge it into the wordmark. */

/* ── buttons ────────────────────────────────────────────────────────── */
/* NOTE: a second, conflicting .btn{padding:14px 28px;...} used to live
   here, overriding the canonical Buttons-section .btn padding/transition.
   Removed — the Buttons-section definition near the top of this file is
   the only .btn rule now. */
.btn--ghost{
  background:transparent;color:var(--ink);
  border:1px solid color-mix(in srgb,var(--ink) 22%,transparent);
}
.btn--ghost:hover{background:transparent;border-color:var(--purple);color:var(--purple);transform:none}

/* ── the thread (page signature) ────────────────────────────────────── */
/* One hairline running down every section, with a tick where it starts.
   Reads as a single continuous note. Do not remove.                     */
.rail{position:relative;padding-left:clamp(1.4rem,3.4vw,3rem)}
.rail::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:1px;
  background:color-mix(in srgb,var(--purple) 22%,transparent);
}
.rail::after{
  content:'';position:absolute;left:-4px;top:.72rem;
  width:9px;height:1px;background:var(--purple);
}
.dark .rail::before{background:color-mix(in srgb,#E5C9F0 26%,transparent)}
.dark .rail::after{background:#D9A9E8}
@media(max-width:640px){.rail{padding-left:1.15rem}}

/* ── sections ───────────────────────────────────────────────────────── */
section{padding-block:var(--sect)}
.dark{background:var(--ink);color:#F8F1F9}
.dark--grad{background:linear-gradient(165deg,#2C1036 0%,#4E1560 62%,#33123E 100%)}

.split,.two{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(2.5rem,6vw,6rem);align-items:center;
}
.two{grid-template-columns:1.05fr .95fr;align-items:start}
@media(max-width:940px){
  .split,.two{grid-template-columns:1fr;gap:3rem}
  .split .media-first{order:2}
  .split .text-second{order:1}
}

/* ── shared list treatment ──────────────────────────────────────────── */
.nots{margin-top:2rem;display:grid;gap:.75rem;max-width:34rem}
.nots li{
  list-style:none;padding-left:1.4rem;position:relative;
  color:color-mix(in srgb,var(--ink) 70%,transparent);font-size:.98rem;
}
.nots li::before{
  content:'';position:absolute;left:0;top:.72em;width:8px;height:1px;
  background:color-mix(in srgb,var(--purple) 55%,transparent);
}
.dark .nots li{color:#F8F1F9;font-size:1.04rem}
.dark .nots li::before{background:#D9A9E8}

/* ── definition rows (pricing, go-live, portfolio) ──────────────────── */
.deflist{margin-top:2.8rem;display:grid;gap:0;max-width:40rem;
  border-top:1px solid color-mix(in srgb,var(--ink) 12%,transparent)}
.deflist>div{
  display:grid;grid-template-columns:11rem 1fr;gap:1.4rem;padding:1.15rem 0;
  border-bottom:1px solid color-mix(in srgb,var(--ink) 12%,transparent);
  align-items:baseline;
}
.deflist dt{
  font-size:.78rem;letter-spacing:.11em;text-transform:uppercase;
  color:color-mix(in srgb,var(--purple) 88%,transparent);font-weight:500;
}
.deflist dd{color:color-mix(in srgb,var(--ink) 80%,transparent);font-size:1.02rem}
.dark .deflist{border-color:color-mix(in srgb,#E5C9F0 18%,transparent)}
.dark .deflist>div{border-color:color-mix(in srgb,#E5C9F0 18%,transparent)}
.dark .deflist dt{color:#D9A9E8}
.dark .deflist dd{color:color-mix(in srgb,#F6EAF7 76%,transparent)}
@media(max-width:520px){.deflist>div{grid-template-columns:1fr;gap:.3rem}}

/* ── figures strip ──────────────────────────────────────────────────── */
/* Numbers are Caresoft's, never Digital IPD's. Keep the attribution line. */
.figures{margin-top:3.4rem;padding-top:2rem;
  border-top:1px solid color-mix(in srgb,var(--ink) 12%,transparent)}
.fig-lead{
  font-family:var(--display);font-style:italic;font-size:1.15rem;
  color:color-mix(in srgb,var(--purple) 85%,transparent);
  margin-bottom:1.6rem;font-variation-settings:'opsz' 48,'SOFT' 60;
}
.fig-row{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,3vw,2.5rem);max-width:44rem}
.fig-row div{display:flex;flex-direction:column;gap:.35rem}
.fig-row b{
  font-family:var(--display);font-weight:400;font-size:clamp(1.6rem,3.4vw,2.3rem);
  letter-spacing:-.02em;line-height:1;color:var(--ink);
  font-variation-settings:'opsz' 96,'SOFT' 20;
}
.fig-row span{font-size:.79rem;line-height:1.45;color:color-mix(in srgb,var(--ink) 55%,transparent)}
@media(max-width:640px){.fig-row{grid-template-columns:1fr 1fr;gap:1.6rem}}

/* ── certifications ─────────────────────────────────────────────────── */
/* High on the page only where risk is being assessed (demo, security).
   Everywhere else they belong in the footer strip.                      */
.certs-hi{
  margin-top:3rem;padding-top:1.8rem;
  border-top:1px solid color-mix(in srgb,var(--ink) 10%,transparent);
  display:flex;flex-wrap:wrap;gap:1.6rem;
  font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;
  color:color-mix(in srgb,var(--ink) 45%,transparent);
}

/* ── forms ──────────────────────────────────────────────────────────── */
.field{
  width:100%;padding:.8rem 1rem;border-radius:12px;font:inherit;font-size:.94rem;
  background:transparent;color:var(--ink);
  border:1px solid color-mix(in srgb,var(--ink) 20%,transparent);
}
.field:focus{outline:none;border-color:var(--purple)}
.dipd-msg{font-size:.85rem;margin-top:.7rem;min-height:1.2em;color:var(--teal)}
.dipd-msg.err{color:var(--rose)}

/* ── onward link ────────────────────────────────────────────────────── */
.eco{
  font-family:var(--display);font-style:italic;
  font-size:clamp(1.1rem,2vw,1.4rem);color:var(--ink);
  display:inline-flex;align-items:baseline;gap:.5rem;
  font-variation-settings:'opsz' 48,'SOFT' 60;letter-spacing:-.01em;
}
.eco span{color:var(--purple);font-style:normal;transition:transform .25s}
.eco:hover span{transform:translateX(5px)}

/* ── footer ─────────────────────────────────────────────────────────── */
footer{
  border-top:1px solid color-mix(in srgb,var(--ink) 10%,transparent);
  padding-block:clamp(3rem,6vw,4.5rem);font-size:.9rem;
}
.fgrid{
  display:flex;justify-content:space-between;gap:2.5rem;flex-wrap:wrap;
  color:color-mix(in srgb,var(--ink) 58%,transparent);
}
.fgrid p{max-width:26rem;line-height:1.75}

/* ── scroll reveal ──────────────────────────────────────────────────── */
.rv{
  opacity:0;transform:translateY(18px);
  transition:opacity .8s cubic-bezier(.22,.61,.36,1),
             transform .8s cubic-bezier(.22,.61,.36,1);
}
.rv.in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ============================================================
   Legal pages (terms, disclaimer) — was css/legal.css
   ============================================================ */
.legal{padding-block:clamp(3.5rem,7vw,5.5rem) clamp(5rem,10vw,8rem)}
.legal .updated{font-size:.8rem;letter-spacing:.11em;text-transform:uppercase;color:color-mix(in srgb,var(--ink) 45%,transparent);margin-top:1.6rem}
.legal-body{max-width:40rem;margin-top:3rem}
.legal-body h3{font-family:var(--display);font-weight:400;font-size:clamp(1.25rem,2.4vw,1.6rem);letter-spacing:-.015em;font-variation-settings:'opsz' 72,'SOFT' 30;margin-top:2.8rem;margin-bottom:.8rem}
.legal-body h3:first-child{margin-top:0}
.legal-body p{margin-bottom:1rem;color:color-mix(in srgb,var(--ink) 80%,transparent);line-height:1.75}
.legal-body ul{margin:0 0 1.2rem 0;padding:0}
.legal-body li{list-style:none;padding-left:1.4rem;position:relative;margin-bottom:.6rem;color:color-mix(in srgb,var(--ink) 80%,transparent);line-height:1.7}
.legal-body li::before{content:'';position:absolute;left:0;top:.72em;width:8px;height:1px;background:color-mix(in srgb,var(--purple) 55%,transparent)}
.legal-body a{color:var(--purple);border-bottom:1px solid color-mix(in srgb,var(--purple) 30%,transparent)}
.legal-body strong{font-weight:600;color:var(--ink)}
.callout{background:color-mix(in srgb,var(--purple) 6%,transparent);border-left:2px solid var(--purple);border-radius:0 12px 12px 0;padding:1.2rem 1.4rem;margin:1.8rem 0}
.callout p{margin:0;font-size:.96rem}
.legal-foot{margin-top:3.5rem;padding-top:1.8rem;border-top:1px solid color-mix(in srgb,var(--ink) 12%,transparent);font-size:.88rem;color:color-mix(in srgb,var(--ink) 55%,transparent)}

/* ============================================================
   Book a demo page — was css/book-a-demo.css
   ============================================================ */
.fig-own{margin-top:2.2rem;padding-top:1.5rem;border-top:1px solid color-mix(in srgb,var(--ink) 10%,transparent);font-size:1.02rem;color:color-mix(in srgb,var(--ink) 72%,transparent);max-width:36rem}
.fig-own b{font-family:var(--display);font-weight:400;font-size:1.35rem;letter-spacing:-.015em;color:var(--ink);font-variation-settings:'opsz' 72,'SOFT' 20}
/* hero + form */
.top{padding-block:clamp(3.5rem,7vw,5.5rem) clamp(4rem,8vw,6.5rem)}
.card{
  background:#fff;border:1px solid color-mix(in srgb,var(--ink) 10%,transparent);
  border-radius:22px;padding:clamp(1.6rem,3.5vw,2.4rem);
  box-shadow:0 30px 60px -40px rgba(44,16,54,.4);
  position:sticky;top:104px;
}
.card h3{font-family: var(--display);
    font-weight: 400;
    font-size: 1.5rem;
    letter-spacing: -.015em;
    font-variation-settings: 'opsz' 60, 'SOFT' 30;
    text-align: center;
    margin-bottom: 0.6rem;
    margin-top: .6rem;}
.card .sub{font-size:.9rem;color:color-mix(in srgb,var(--ink) 58%,transparent);margin-bottom:1.5rem}
.f{display:grid;gap:.7rem}
.f input, .f select {
    width: 100%;
    padding: .8rem 1rem;
    border-radius: 12px;
    font: inherit;
    /* margin: 0 auto; */
    font-size: .94rem;
    background: transparent;
    color: var(--ink);
    border: 1px solid 
color-mix(in srgb, var(--ink) 20%, transparent);
}

.f input:focus,.f select:focus{outline:none;border-color:var(--purple)}
.f input[name=company_website]{position:absolute;left:-9999px;width:1px;height:1px}
.f .row{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
@media(max-width:420px){.f .row{grid-template-columns:1fr}}
.f button{margin-top:.5rem;width:100%;padding:.9rem;font-size:.96rem}
.orwa{margin-top:1.1rem;text-align:center;font-size:.86rem;color:color-mix(in srgb,var(--ink) 55%,transparent)}
.orwa a{color:var(--purple);border-bottom:1px solid color-mix(in srgb,var(--purple) 35%,transparent)}
/* the thirty minutes */
.steps{margin-top:3rem;border-top:1px solid color-mix(in srgb,#E5C9F0 18%,transparent)}
.step{display:grid;grid-template-columns:9.5rem 1fr;gap:clamp(1.2rem,3vw,2.6rem);padding:1.6rem 0;border-bottom:1px solid color-mix(in srgb,#E5C9F0 18%,transparent);align-items:baseline}
.step dt{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:#D9A9E8;font-weight:500}
.step dd{color:color-mix(in srgb,#F6EAF7 76%,transparent);font-size:1.02rem;max-width:40rem}
/* pricing */
.price{margin-top:2.8rem;display:grid;gap:0;max-width:40rem;border-top:1px solid color-mix(in srgb,var(--ink) 12%,transparent)}

/* ============================================================
   Blog index — was css/blog.css
   ============================================================ */
.blog-wrap{max-width:1090px;margin:0 auto;padding:40px 0% 100px}

.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:34px}
.blog-card{
  background:#fff;border-radius:18px;overflow:hidden;
  box-shadow:0 10px 30px rgba(74,20,90,.08);transition:.3s;
  display:flex;flex-direction:column;
}
.blog-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(74,20,90,.15)}
.blog-card .thumb{
  height:190px;background-size:cover;background-position:center;
  background-color:#eee0ee;
}
.blog-card .body{padding: 5px 11px 21px;display:flex;flex-direction:column;flex:1}
.blog-card .date{font-size:12.5px;color:var(--accent);font-weight:600;letter-spacing:.03em}
.blog-card h3{
  font-family:var(--display);font-weight:500;font-size:20px;margin: 4px 0 8px;
  line-height:1.3;    color: black;
}
.blog-card p{font-size:14.5px;color:#5a4463;flex:1}
.blog-card .read-more{
  margin-top:2px;font-weight:700;font-size:14px;color:var(--primary);
  display:inline-flex;align-items:center;gap:6px;
}
.blog-card .read-more::after{content:'→';transition:.25s}
.blog-card:hover .read-more::after{transform:translateX(4px)}

.blog-empty{
  text-align:center;padding:80px 20px;color:#7a6084;
}
.blog-empty h3{font-family:var(--display);color:var(--text);margin-bottom:10px;font-weight:500}
.back-cta {
    text-align: center;
    padding-bottom: 60px;
}
.back-cta a {
    display: inline-block;
    padding: 12px 26px;
    border: 2px solid var(--primary);
    border-radius: 999px;
    font-weight: 700;
    font-size: 14.5px;
    text-decoration: none;
    color:black;
}
/* ============================================================
   Blog post page — was css/blog-post.css
   ============================================================ */
.post-hero{
  padding:100px 8% 50px;
  background:linear-gradient(135deg,var(--secondary),var(--primary));
  color:#fff;text-align:center;
}
.post-hero .back{
  display:inline-flex;align-items:center;gap:6px;color:#fff;opacity:.85;
  font-size:14px;font-weight:600;margin-bottom:22px;text-decoration:none;
}
.post-hero .cat{
  display:inline-block;background:rgba(255,255,255,.15);padding:6px 16px;
  border-radius:999px;font-size:12.5px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;margin-bottom:18px;
}
.post-hero .cat a{color:white}
.post-hero h1{    font-family: var(--display);
    font-weight: 500;
    font-size: clamp(30px, 4.5vw, 50px);
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.08;
    letter-spacing: -0.01em;
    color: white;}
.post-hero .meta{margin-top:18px;font-size:14px;opacity:.9}

.post-cover{
  max-width:960px;margin:-40px auto 0;padding:0 6%;
}
.post-cover img{border-radius:18px;box-shadow:0 20px 50px rgba(74,20,90,.25);width:100%;height:420px;object-fit:cover}

.post-wrap{max-width:760px;margin:0 auto;padding:60px 6% 40px}
.post-content{font-size:17.5px;color:#3a2444}
.post-content h2,.post-content h3,.post-content h4{font-family:var(--display);font-weight:500;color:var(--text);margin:24px 0 14px}
.post-content p{margin-bottom:18px}
.post-content img{border-radius:12px;margin:20px 0}
.post-content a{text-decoration:underline;color:var(--primary)}
.post-content ul,.post-content ol{margin:0 0 18px 22px}

.post-author{
  max-width:760px;margin:20px auto 80px;padding:0 6%;
}
.post-author .card{
  display:flex;gap:16px;align-items:center;background:#fff;
  border-radius:16px;padding:20px;box-shadow:0 10px 30px rgba(74,20,90,.08);
}
.post-author img{width:64px;height:64px;border-radius:50%;object-fit:cover;flex-shrink:0}
.post-author .name{font-weight:700}
.post-author .label{font-size:12.5px;color:var(--accent);text-transform:uppercase;letter-spacing:.04em;font-weight:700}

.back-cta{text-align:center;padding-bottom:60px}
.back-cta a{
  display:inline-block;padding:12px 26px;border:2px solid var(--primary);
  border-radius:999px;font-weight:700;font-size:14.5px;text-decoration:none;
}
.back-cta a:hover{background:var(--primary);color:#fff}

/* ============================================================
   Why Caresoft page — was css/why-caresoft.css
   ============================================================ */
.opener .body-lg{max-width:36rem}
/* founder letters */
.letter{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2.5rem,6vw,5.5rem);align-items:start}
.letter2{display:grid;grid-template-columns:1.15fr 0.85fr;gap:clamp(2.5rem,6vw,5.5rem);align-items:start}
.letter--flip .portrait{order:2}
.letter--flip .words{order:1}
@media(max-width:920px){
  .letter{grid-template-columns:1fr;gap:2.6rem}
  .letter--flip .portrait{order:1}
  .letter--flip .words{order:2}
}
.portrait{position:sticky;top:110px}
.frame{
  position:relative;aspect-ratio:4/5;border-radius:18px;overflow:hidden;
  background:linear-gradient(155deg,#E7DCE6,#CFB9D4);
  border:1px solid color-mix(in srgb,var(--ink) 10%,transparent);
  box-shadow:0 30px 60px -38px rgba(44,16,54,.45);
}
.frame img,.frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.frame video{opacity:0;transition:opacity .5s ease;z-index:2}
.frame.playing video{opacity:1}
.frame .ph{
  position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;text-align:center;padding:1.5rem;
  color:color-mix(in srgb,var(--ink) 40%,transparent);line-height:2;
}
.hovercue{
  margin-top:.95rem;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:color-mix(in srgb,var(--ink) 45%,transparent);display:flex;align-items:center;gap:.5rem;
}
.hovercue i{width:5px;height:5px;border-radius:50%;background:var(--purple);display:block;opacity:.6}
.frame[data-hovervideo]{cursor:pointer}
.words p{max-width:36rem;font-size:clamp(1.04rem,1.35vw,1.14rem);line-height:1.8;color:color-mix(in srgb,var(--ink) 82%,transparent);margin-bottom:1.5rem}
.words p:last-of-type{margin-bottom:0}
.sig{
  margin-top:2.6rem;padding-top:1.5rem;
  border-top:1px solid color-mix(in srgb,var(--ink) 12%,transparent);
  font-family:var(--display);font-style:italic;font-size:1.1rem;
  font-variation-settings:'opsz' 48,'SOFT' 60;color:var(--ink);
}
.sig span{display:block;font-family:var(--body);font-style:normal;font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;color:color-mix(in srgb,var(--ink) 50%,transparent);margin-top:.4rem}
/* portfolio */
.pf{margin-top:3.4rem;border-top:1px solid color-mix(in srgb,#E5C9F0 18%,transparent)}
.pf-row{
  display:grid;grid-template-columns:14rem 1fr;gap:clamp(1.5rem,4vw,3.5rem);
  padding:1.9rem 0;border-bottom:1px solid color-mix(in srgb,#E5C9F0 18%,transparent);
  align-items:baseline;
}
.pf-row b{font-family:var(--display);font-weight:400;font-size:clamp(1.25rem,2.2vw,1.6rem);letter-spacing:-.015em;font-variation-settings:'opsz' 72,'SOFT' 30;color:#F8F1F9}
.pf-row p{max-width:38rem;color:color-mix(in srgb,#F6EAF7 70%,transparent);font-size:1.02rem}
.pf-row.is-this b{color:#E9C4F5}
.pf-row.is-this p{color:color-mix(in srgb,#F6EAF7 84%,transparent)}
.pf-note{margin-top:2.6rem;font-size:clamp(1.06rem,1.5vw,1.2rem);color:#F8F1F9;max-width:34rem}
/* closing */
.onward{padding-block:clamp(5rem,10vw,8rem)}

/* ============================================================
   Location / GEO pages — was css/location.css
   ============================================================ */
.loc-hero{
  max-width:52rem;
  margin-inline:auto;
      padding: 40px 0px;

  text-align:center;
}
.loc-kicker{
  font-size:var(--t-xs);
  font-weight:600;
  letter-spacing:.16em;
  color:var(--purple);
  margin-bottom:var(--sp-2);
}
.loc-hero h1{
  font-family:"Fraunces",Georgia,serif;
  font-size:var(--t-2xl);
  font-weight:500;
  line-height:1.05;
  letter-spacing:-.02em;
  text-wrap:balance;
}
.lede{
  font-size:var(--lede);
  line-height:1.55;
  color:var(--ink-70);
  max-width:48ch;
  margin:var(--sp-3) auto 0;
  text-wrap:pretty;
}
.loc-ped{
  font-size:var(--t-sm);
  color:var(--ink-45);
  margin-top:var(--sp-3);
}
.loc-ped a{ color:var(--purple); }

.loc-cta{
  display:flex; flex-wrap:wrap; gap:.85rem; justify-content:center;
  margin-top:var(--sp-4);
}

/* --- why / angle --- */
.loc-why{
  max-width:66rem;
  margin-inline:auto;
  padding:var(--sp-5) clamp(1.25rem,5vw,2.5rem);
  border-top:1px solid var(--line);
}
.loc-why h2{
  font-family:"Fraunces",Georgia,serif;
  font-size:var(--t-xl); font-weight:500; letter-spacing:-.015em;
  margin-bottom:var(--sp-3);
}
.loc-angle{ font-size:var(--t-md); line-height:1.55; }
.loc-proof{
  font-size:var(--t-sm); color:var(--ink-45);
  margin-top:var(--sp-2);
  padding-left:1rem; border-left:2px solid var(--purple);
}

/* --- health status (per-region narrative + stats) --- */
.loc-health-status{
  max-width:66rem;
  margin-inline:auto;
  padding:var(--sp-5) clamp(1.25rem,5vw,2.5rem);
  border-top:1px solid var(--line);
}
.loc-health-status h2{
  font-family:"Fraunces",Georgia,serif;
  font-size:var(--t-xl); font-weight:500; letter-spacing:-.015em;
  margin-bottom:var(--sp-3);
}
.loc-health-status p{
  font-size:var(--t-md); line-height:1.7; color:var(--ink-70);
  margin-bottom:var(--sp-3);
}
.loc-stats-grid{
  display:grid; gap:var(--sp-3);
  grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));
  margin-top:var(--sp-4);
}
.loc-stat{
  text-align:center;
  padding:var(--sp-3) var(--sp-2);
  border:1px solid var(--line);
  border-radius:14px;
}
.loc-stat-num{
  display:block;
  font-family:"Fraunces",Georgia,serif;
  font-size:var(--t-xl); font-weight:600; color:var(--purple);
}
.loc-stat-label{
  display:block;
  font-size:var(--t-sm); color:var(--ink-45); margin-top:.25rem;
}

/* --- what changes --- */
.loc-what{
  max-width:var(--maxw);
  margin-inline:auto;
  padding:var(--sp-5) clamp(1.25rem,5vw,2.5rem);
}
.loc-what h2{
  font-family:"Fraunces",Georgia,serif;
  font-size:var(--t-xl); font-weight:500; letter-spacing:-.015em;
  margin-bottom:var(--sp-4);
}
.loc-grid{
  display:grid; gap:var(--sp-3);
  grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));
}
.loc-item{
  background-image: linear-gradient(to bottom, #EDECEB, #FFFFFF, #EDECEB);
    border: 1px solid #D9D9D9;
    padding: 15px;
    border-radius: 20px;
    min-height: 165px;
}
.loc-item{
          font-size: 2rem;
}
.loc-item h3{
  font-size:var(--t-md); font-weight:600; letter-spacing:-.01em;
  margin-bottom:.55rem;
}
.loc-item p a{ font-size:var(--t-sm); color:var(--ink-70); line-height:1.55; }

/* --- places --- */
.loc-places{
  max-width:46rem; margin-inline:auto;
  padding:var(--sp-5) clamp(1.25rem,5vw,2.5rem);
}
.loc-places h2{
  font-family:"Fraunces",Georgia,serif;
  font-size:var(--t-xl); font-weight:500; margin-bottom:var(--sp-2);
}
.loc-chips{
  list-style:none; padding:0; margin:var(--sp-3) 0 0;
  display:flex; flex-wrap:wrap; gap:.5rem;
}
.loc-chips li{
  font-size:var(--t-xs); font-weight:500;
  padding:.4rem .85rem; border-radius:999px;
  background:var(--paper-2); color:var(--ink-70);
}

/* --- hub index --- */
.loc-index{
  max-width:var(--maxw); margin-inline:auto;
  padding:var(--sp-4) clamp(1.25rem,5vw,2.5rem) var(--sp-5);
}
.loc-index h2{
  font-family:"Fraunces",Georgia,serif;
  font-size:var(--t-lg); font-weight:500;
  margin:var(--sp-4) 0 var(--sp-2);
  padding-bottom:.5rem; border-bottom:1px solid var(--line);
}
.loc-list{
  list-style:none; padding:0; margin:0;
  display:grid; gap:.5rem;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
}
.loc-list a{
  display:block; padding:.9rem 1.1rem;
  border:1px solid var(--line); border-radius:12px;
  text-decoration:none; background:#fff;
  transition:border-color .2s, transform .2s;
}
.loc-list a:hover{ border-color:var(--purple); transform:translateY(-1px); }
.loc-list strong{ display:block; font-size:var(--t-base); color:var(--plum); }
.loc-list span{ font-size:var(--t-xs); color:var(--ink-45); }

/* --- final CTA --- */
.loc-final{
   color:black;
  text-align:center;
  padding:var(--sp-2) clamp(1.25rem,5vw,2.5rem);
  
}
.loc-final h2{
  font-family:"Fraunces",Georgia,serif;
  font-size:var(--t-xl); font-weight:500; 
}
.loc-final p{
  font-size:var(--t-base); 
  max-width:42ch; margin:var(--sp-2) auto var(--sp-4);
}

/* --- cross-links --- */
.loc-siblings{
  max-width:var(--maxw); margin-inline:auto;
  padding:var(--sp-5) clamp(1.25rem,5vw,2.5rem);
}
.loc-siblings h2{
  font-size:var(--t-sm); font-weight:600; letter-spacing:.08em;
  color:var(--ink-45); margin-bottom:var(--sp-2);
}
.loc-siblings ul{
  list-style:none; padding:0; margin:0;
  display:flex; flex-wrap:wrap; gap:.5rem .5rem;
}
.loc-siblings a{
  font-size:var(--t-sm); color:var(--ink-70); text-decoration:none;
  padding:.4rem .8rem; border-radius:999px; background:var(--paper-2);
}
.loc-siblings a:hover{ color:var(--purple); }

/* ============================================================
   Inside the ward page — was css/inside-the-ward.css
   ============================================================ */
.hero{
    position:relative;
    width:100%;
    height:100vh;
    margin:0;
    padding:0;
    background:transparent !important;
    overflow:hidden;
}

.hero video{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:1;
}  
.hero .ink{
  position:absolute;inset:0;width:100%;height:100%;
}
.hero .ink svg{width:100%;height:100%}
.hero .ink path{
  fill:none;
  stroke:#E7C6F2;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:.5;
  stroke-dasharray:4200;
  stroke-dashoffset:4200;
  animation:write 22s cubic-bezier(.5,0,.5,1) infinite;
}
.hero .ink path:nth-child(2){animation-delay:2.6s;opacity:.36}
.hero .ink path:nth-child(3){animation-delay:5.2s;opacity:.24}
@keyframes write{
  0%   {stroke-dashoffset:4200}
  38%  {stroke-dashoffset:0}
  76%  {stroke-dashoffset:0;opacity:.5}
  92%  {stroke-dashoffset:0;opacity:0}
  100% {stroke-dashoffset:4200;opacity:0}
}
.hero .glow{
  position:absolute;inset:0;
  animation:breathe 14s ease-in-out infinite;
}
@keyframes breathe{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:.85;transform:scale(1.08)}}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:3}
.hero::after{
  content:'';position:absolute;inset:auto 0 -1px 0;height:34%;z-index:4;
  background:linear-gradient(to bottom,transparent,var(--paper));pointer-events:none;
}

.titleband{padding:clamp(3rem,7vw,5.5rem) 0 0}
.titleband p{
  font-family:var(--display);font-style:italic;font-weight:300;
  font-size:clamp(1.35rem,3vw,2rem);
  color:color-mix(in srgb,var(--purple) 78%,transparent);
  font-variation-settings:'opsz' 60,'SOFT' 60;letter-spacing:-.01em;
}
/* .dark--grad background already set above; this page adds the
   positioning needed for its background night-image layer. */
.dark--grad{position:relative;overflow:hidden}
.dark--grad .nightimg{position:absolute;inset:0;object-fit:cover;width:100%;height:100%;opacity:.18;mix-blend-mode:luminosity}
.dark--grad .wrap{position:relative;z-index:2}
/* device frame */
.device{background:var(--ink);border-radius:22px;padding:12px;box-shadow:0 32px 70px -34px rgba(44,16,54,.55),0 3px 14px -6px rgba(44,16,54,.28);position:relative}
.dark .device{background:#160719;box-shadow:0 32px 70px -30px rgba(0,0,0,.6)}
.device .screen{aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:linear-gradient(150deg,#43134F,#6B1C7F);display:flex;align-items:center;justify-content:center;position:relative}
.device video{width:100%;height:100%;object-fit:cover}
.placeholder{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:color-mix(in srgb,#E5C9F0 62%,transparent);text-align:center;padding:1.5rem;line-height:1.9}

/* Renamed from .chip → .iw-chip: this status badge collided with
   the unrelated feature-toggle .chip used in the WEDGE section
   ([4] WEDGE + note-flow). Update the matching HTML class from
   "chip" to "iw-chip" wherever this badge is used. */
.iw-chip{
  position:absolute;right:10px;bottom:10px;z-index:3;
  display:inline-flex;align-items:center;gap:.42rem;
  background:color-mix(in srgb,#0E2E2C 76%,transparent);backdrop-filter:blur(6px);
  color:#8FE3DC;font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
  padding:.34rem .62rem;border-radius:100px;
}
.iw-chip i{width:5px;height:5px;border-radius:50%;background:var(--teal);display:block}

/* photo slot */
.photo{
  aspect-ratio:5/4;border-radius:16px;overflow:hidden;position:relative;
  background:linear-gradient(150deg,#EDE3E9,#DCCBDE);
  border:1px solid color-mix(in srgb,var(--ink) 10%,transparent);
  display:flex;align-items:center;justify-content:center;
}
.photo img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.photo .placeholder{color:color-mix(in srgb,var(--ink) 45%,transparent)}

/* ---------- section 2 type ---------- */
.quiet{max-width:46rem}
.quiet h2{font-style:italic;max-width:18ch;font-variation-settings:'opsz' 120,'SOFT' 60}
.recall{margin-top:2.4rem;display:grid;gap:1.05rem;max-width:36rem}
.recall li{
  list-style:none;
  font-size:clamp(1.06rem,1.5vw,1.2rem);
  line-height:1.65;
  color:color-mix(in srgb,#F6EAF7 74%,transparent);
  padding-left:1.4rem;position:relative;
}
.recall li::before{content:'';position:absolute;left:0;top:.82em;width:7px;height:1px;background:color-mix(in srgb,#D9A9E8 70%,transparent)}
.pedigree{
  margin-top:2.9rem;padding-top:1.9rem;
  border-top:1px solid color-mix(in srgb,#E5C9F0 20%,transparent);
  font-size:clamp(1.1rem,1.6vw,1.28rem);color:#F8F1F9;max-width:32rem;
}

/* ---------- section 4 : offline → synced ---------- */
.offline{position:relative}
.offline .screen{background:linear-gradient(155deg,#1B0A20,#3B1148)}
.offline svg{position:absolute;inset:0;width:100%;height:100%}
.offline svg path{
  fill:none;stroke:#F0DAF7;stroke-width:2.4;stroke-linecap:round;
  opacity:.85;stroke-dasharray:600;stroke-dashoffset:600;
  animation:note 12s linear infinite;
}
.offline svg path:nth-child(2){animation-delay:1.5s}
.offline svg path:nth-child(3){animation-delay:3s}
@keyframes note{
  0%{stroke-dashoffset:600}
  30%{stroke-dashoffset:0}
  82%{stroke-dashoffset:0;opacity:.85}
  90%{opacity:0}
  100%{stroke-dashoffset:600;opacity:0}
}
.status{position:absolute;left:12px;top:12px;z-index:4}
.status .s{
  position:absolute;top:0;left:0;white-space:nowrap;
  display:inline-flex;align-items:center;gap:.45rem;
  font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.36rem .68rem;border-radius:100px;backdrop-filter:blur(6px);
}
.status .s i{width:5px;height:5px;border-radius:50%;display:block}
.s--off{background:rgba(60,24,70,.72);color:#D9BCE4;animation:showoff 12s linear infinite}
.s--off i{background:#B58BC4;animation:blink 1.6s steps(2,end) infinite}
.s--on{background:rgba(14,46,44,.8);color:#8FE3DC;opacity:0;animation:showon 12s linear infinite}
.s--on i{background:var(--teal)}
@keyframes showoff{0%,64%{opacity:1}70%,100%{opacity:0}}
@keyframes showon{0%,64%{opacity:0}70%,96%{opacity:1}100%{opacity:0}}
@keyframes blink{0%,50%{opacity:1}51%,100%{opacity:.25}}

/* ---------- cta ---------- */
.cta{padding-block:clamp(6rem,13vw,11rem)}
.cta h2{font-size:clamp(2.4rem,6vw,4.2rem);max-width:13ch}
.cta .actions{display:flex;gap:1rem;flex-wrap:wrap;margin-top:2.8rem}
@media(prefers-reduced-motion:reduce){
  .hero .ink path,.hero .glow,.offline svg path,.s--off,.s--on,.s--off i{animation:none}
  .hero .ink path{stroke-dashoffset:0}
  .offline svg path{stroke-dashoffset:0}
  .s--on{opacity:1}.s--off{opacity:0}
}
/* ============================================================
   BROCHURE MODAL — partials/brochure-modal.php
   Reuses .card/.f/.btn/.dipd-msg/.orwa from the book-a-demo form;
   this block only adds the overlay + dialog chrome around it.
   ============================================================ */
.dipd-modal-overlay{
  position:fixed; inset:0; z-index:1000;
      background: 
color-mix(in srgb, #000000 55%, transparent);
  display:flex; align-items:center; justify-content:center;
  padding:1.2rem; overflow-y:auto;
  opacity:0; visibility:hidden; transition:opacity .22s ease;
}
.dipd-modal-overlay.show{ opacity:1; visibility:visible; }
.dipd-modal-overlay[hidden]{ display:none; }

.dipd-modal{
  position:relative; width:100%; max-width:30rem;
  background:var(--paper,#FAF7F2); border-radius:20px;
  padding:2rem 1.8rem 1.8rem; margin:auto;
  box-shadow:0 30px 70px -20px rgba(44,16,54,.45);
  transform:translateY(10px) scale(.98); transition:transform .22s ease;
}
.dipd-modal-overlay.show .dipd-modal{ transform:translateY(0) scale(1); }
.dipd-modal .card{ padding:0; box-shadow:none; }

.dipd-modal-close{
  position:absolute; top:.9rem; right:.9rem; width:2.1rem; height:2.1rem;
  border:none; border-radius:50%; background:transparent; color:var(--ink,var(--plum));
  font-size:1.5rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.dipd-modal-close:hover{ background:color-mix(in srgb, var(--ink,var(--plum)) 8%, transparent); }

body.dipd-modal-open{ overflow:hidden; }

@media (max-width:480px){
  .dipd-modal{ padding:1.6rem 1.3rem 1.4rem; border-radius:16px; }
}