/* ============================================================================
   v18.css — CLIENT FEEDBACK ROUND 3 (2026-06-25)
   Overlay for home-v18.html ONLY. Loads after zara→lab→v14→v15→v16→v17.
   v17 is frozen; this layer adds the deltas. Tokens from zara.css.
   ========================================================================== */

/* SERVICES — folder hover-reveal: on hover, sheets of paper slide UP out of the
   folder (no click). The .sb white front sits above the papers (z-index), so at
   rest the papers are hidden inside the folder; on hover they rise above its top. */
.v18-svc .svcboxes>.folder{position:relative;display:flex}
.v18-svc .folder>.sb{flex:1;width:100%;position:relative;z-index:2}   /* opaque front, above papers */

.v18-svc .folder .papers{position:absolute;top:0;left:28%;right:11%;height:60%;z-index:1;pointer-events:none}
.v18-svc .folder .papers b{position:absolute;inset:0;display:block;background:#fff;
  border:1px solid rgba(1,30,147,.16);
  background-image:repeating-linear-gradient(180deg,transparent 0 9px,rgba(1,30,147,.07) 9px 10px);
  box-shadow:0 6px 16px rgba(2,10,35,.34);            /* depth so a white sheet reads on white/navy */
  opacity:0;transform:translateY(8px) rotate(0);transform-origin:50% 100%;
  transition:transform .5s cubic-bezier(.22,.78,.27,1),opacity .35s ease}
/* on hover/focus the sheets fade in and fan UP out of the folder onto the navy, staggered */
.v18-svc .folder:hover .papers b,.v18-svc .folder:focus-within .papers b{opacity:1}
.v18-svc .folder:hover .papers b:nth-child(1),.v18-svc .folder:focus-within .papers b:nth-child(1){transform:translateY(-30px) rotate(-9deg);transition-delay:0s}
.v18-svc .folder:hover .papers b:nth-child(2),.v18-svc .folder:focus-within .papers b:nth-child(2){transform:translateY(-46px) rotate(0deg);transition-delay:.05s}
.v18-svc .folder:hover .papers b:nth-child(3),.v18-svc .folder:focus-within .papers b:nth-child(3){transform:translateY(-32px) rotate(9deg);transition-delay:.1s}
@media (prefers-reduced-motion:reduce){
  .v18-svc .folder .papers b{transition:none}
  .v18-svc .folder:hover .papers b,.v18-svc .folder:focus-within .papers b{opacity:0;transform:translateY(8px)}
}
@media (prefers-reduced-motion:reduce){
  .v18-svc .folder .papers b{transition:none}
  .v18-svc .folder:hover .papers b,.v18-svc .folder:focus-within .papers b{transform:none}
}

/* TESTIMONIAL story — was light display-serif on navy (hard to read). Switch to the
   sans face, more line-height, full white. Reads as a calm case-study paragraph. */
.v17-tmo .v17-story .stx{font-family:var(--sans);font-weight:300;font-size:1.12rem;
  line-height:1.78;color:#fff;letter-spacing:.005em;max-width:62ch}

/* AGA — official "Proud Member of Alliott Global Alliance" badge (image) replaces the text
   line on the trust band (v18 only, per client). No frame (cancels the old zara.css .aga-logo
   box border), bigger, centered on the white band. */
.v16-logos .agawrap .aga-logo{height:clamp(64px,9.5vw,112px);width:auto;max-width:100%;display:block;
  margin:0 auto;border:0;background:none;padding:0}

/* TEAM — card grid (client: each person = name · education · expertise · one-line vision).
   Replaces the 3-column roster/portrait/bio split. On navy; b/w photos warm to colour on hover. */
.v18-team .teamhead{margin:0 auto clamp(2.2rem,5vw,3.6rem);max-width:46ch;text-align:center}
.v18-team .teamhead .tlede{margin-inline:auto}
.v18-team .tcards{display:grid;grid-template-columns:1fr;gap:clamp(1.7rem,3vw,2.6rem)}
@media (min-width:640px){ .v18-team .tcards{grid-template-columns:1fr 1fr} }
@media (min-width:980px){ .v18-team .tcards{grid-template-columns:repeat(3,1fr)} }
.v18-team .tcard{display:flex;flex-direction:column}
/* ⚠ 4/5 AND `center 18%` ARE THE HOUSE FRAMING FOR TWELVE OF THE FIFTEEN, AND THEY ARE RIGHT.
   Both were changed globally on 2026-08-07 and both were changed straight back the same evening
   (George: "the rest of the images were fine … we needed to fix only these images"). Square
   frames cut the twelve good portraits off at the arms to solve a problem three of them had.
   The lesson is the general one: three bad crops are a three-image problem, not a layout
   problem, so fix them where they are and leave the layout that works alone. */
.v18-team .tphoto{aspect-ratio:4/5;overflow:hidden;background:#0a1830;margin-bottom:1.3rem}
.v18-team .tphoto img{width:100%;height:100%;object-fit:cover;object-position:center 18%;
  filter:grayscale(1) contrast(1.02);transition:filter .45s ease,transform .6s ease}
/* THE THREE EXCEPTIONS, and only these three. Every source is 2:3 in a 4:5 frame, so cover
   discards 16.7% of the height and `center 18%` spends a twelfth of that above the head. The
   twelve have the room to give; Lyuben, Anelia and Neli Tancheva were shot tighter and it took
   them into the hairline (George, 2026-08-07: "they don't have any room for the head"). Pinning
   these three to the top moves their whole discard to the waist and buys back the air, with no
   effect on anyone else. Matched on the filename so it holds on both home-v21 (`img/team/…`)
   and team-v22 (`/img/team/…`); a replacement photograph keeping the name inherits it, which is
   what you want while the wider originals are still owed (Pastel 64/65/66). Head SIZE still
   varies between sitters — that is their framing, and the only real fix is those originals.
   ⚠ Do not "fix" it by generating background: tried 2026-08-06, reverted the same evening. */
/* 2026-09-28: lyuben-tsonev.webp left this list. His new 900x1350 studio shot has the
   same headroom as the other twelve, so he takes the house framing again. */
.v18-team .tphoto img[src$="t7.webp"],
.v18-team .tphoto img[src$="neli-tancheva.webp"]{object-position:center top}
.v18-team .tcard:hover .tphoto img{filter:grayscale(0) contrast(1.02);transform:scale(1.03)}
.v18-team .tcard h3{font-family:var(--serif);font-weight:300;font-size:clamp(1.4rem,2.2vw,1.85rem);
  color:#fff;line-height:1.1;margin:0}
.v18-team .tcard .brole{font-size:.74rem;letter-spacing:.09em;text-transform:uppercase;
  color:rgba(255,255,255,.55);margin:.45rem 0 1.1rem}
.v18-team .tcard dl{display:grid;gap:.85rem;margin:0 0 1.2rem}
.v18-team .tcard dl>div{display:grid;gap:.2rem}
.v18-team .tcard dt{font-size:.67rem;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.42)}
.v18-team .tcard dd{margin:0;font-size:.95rem;color:rgba(255,255,255,.88);line-height:1.45}
.v18-team .tcard .vision{font-family:var(--serif);font-weight:300;font-style:italic;
  font-size:clamp(1.05rem,1.5vw,1.2rem);line-height:1.4;color:#fff;margin:auto 0 0}

/* 2-COLUMN IDEATION — alternating photo | details rows, same people as the grid above,
   so George can compare layouts. Delete whichever loses. */
.v18-people2{background:var(--navy);padding-block:0 var(--sec)}
.v18-people2 .prow{display:grid;grid-template-columns:1fr;gap:clamp(1.4rem,4vw,2.6rem);
  align-items:center;margin-bottom:clamp(3rem,6vw,5rem)}
.v18-people2 .prow:last-child{margin-bottom:0}
.v18-people2 .pphoto{aspect-ratio:4/5;max-width:360px;width:100%;overflow:hidden;background:#0a1830}
.v18-people2 .pphoto img{width:100%;height:100%;object-fit:cover;object-position:center 18%;filter:grayscale(1) contrast(1.02)}
@media (min-width:820px){
  .v18-people2 .prow{grid-template-columns:.9fr 1.1fr;gap:clamp(3rem,6vw,5.5rem)}
  .v18-people2 .prow.rev{grid-template-columns:1.1fr .9fr}
  .v18-people2 .prow.rev .pphoto{order:2;justify-self:end}
  .v18-people2 .prow.rev .pinfo{order:1}
}
.v18-people2 .pinfo h3{font-family:var(--serif);font-weight:300;font-size:clamp(1.8rem,3vw,2.6rem);color:#fff;line-height:1.08;margin:0}
.v18-people2 .pinfo .brole{font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.55);margin:.5rem 0 1.4rem}
.v18-people2 .pinfo dl{display:grid;gap:1rem;margin:0 0 1.4rem;max-width:50ch}
.v18-people2 .pinfo dl>div{display:grid;gap:.25rem}
.v18-people2 .pinfo dt{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.v18-people2 .pinfo dd{margin:0;font-size:1rem;color:rgba(255,255,255,.88);line-height:1.5}
.v18-people2 .pinfo .vision{font-family:var(--serif);font-weight:300;font-style:italic;font-size:clamp(1.2rem,1.8vw,1.5rem);line-height:1.4;color:#fff;max-width:44ch}


/* ==========================================================================
   ROUND 4 (2026-07-01, George via page-review). Deltas only.
   ========================================================================== */

/* NAVBAR — surface the full international number inline in the glass bar (client ask).
   The icon-only call button becomes icon + number; the hover popover still lists both
   numbers. The number text shows where there's room (>=1360px); below that = icon + popover. */
.nav-phone{display:inline-flex;align-items:center;gap:.5rem;padding:.35rem .5rem;min-height:44px;color:var(--blue)}
.nav-phone .zic{color:var(--blue);width:22px;height:22px;flex:none}
.nav-phone .np-txt{display:none;flex-direction:column;line-height:1.05;text-align:left}
.nav-phone .np-lead{font-size:.56rem;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);font-weight:400}
.nav-phone .np-num{font-size:.98rem;font-weight:500;color:var(--blue);letter-spacing:.005em}
.nav-phone:hover .np-num{color:var(--red)}
@media (min-width:1360px){ .nav-phone .np-txt{display:flex} }

/* #6 SERVICES folder — remove the blue border on the folder tab (client: distracting on hover). */
.v18-svc .sb::before{border-top:0}

/* #11 TESTIMONIAL story — was navy-2 on navy (blended in). Lift onto the cobalt "pop" colour
   with a gold rule tying to the Google stars above, so it clearly reads as a featured story. */
.v17-tmo .v17-story{background:var(--blue);border-left:3px solid #E5A33C;
  box-shadow:0 18px 50px rgba(2,10,35,.42)}

/* #13 FOOTER social — white pills, red icons, to stand out on the navy footer. */
footer .social a{background:#fff;border-color:#fff;color:var(--red)}
footer .social a:hover{background:var(--red);border-color:var(--red);color:#fff}

/* #9 HOW IT WORKS — pinned horizontal progress: a cobalt line sweeps L->R as you scroll
   (GSAP, desktop), lighting each node's check and turning its box blue. Degrades to a static,
   readable row without JS / with reduced motion / on mobile. */
.v18-steps .steptrack{position:relative;margin-top:clamp(1rem,2vw,1.6rem)}
.v18-steps .row{display:grid;grid-template-columns:repeat(5,1fr);grid-auto-flow:row;
  gap:clamp(.7rem,1.3vw,1.1rem);overflow:visible;padding-top:30px}
.v18-steps .stepline{position:absolute;top:30px;left:0;right:0;height:2px;background:rgba(1,30,147,.16)}
.v18-steps .stepline-fill{display:block;height:100%;width:100%;background:var(--blue);
  transform:scaleX(0);transform-origin:left center;will-change:transform}
.v18-steps .pc3{position:relative;border:1px solid var(--line);background:#fff;
  padding:2.7rem 1.3rem 1.6rem;min-height:0;
  transition:background .4s ease,color .4s ease,border-color .4s ease}
.v18-steps .pc3 .node{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);
  width:48px;height:48px;border-radius:50%;background:#fff;border:2px solid var(--blue);
  display:grid;place-items:center;z-index:2;transition:background .3s ease,border-color .3s ease}
.v18-steps .node .nn{grid-area:1/1;font-family:var(--serif);font-weight:400;font-size:1.1rem;color:var(--blue);transition:opacity .25s ease}
.v18-steps .node .chk{grid-area:1/1;width:24px;height:24px;fill:none;stroke:#fff;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:scale(.5);transition:opacity .3s ease,transform .3s ease}
.v18-steps .pc3 h3{margin-top:0;font-family:var(--serif);font-weight:300;font-size:clamp(1.12rem,1.5vw,1.4rem);color:var(--blue);line-height:1.15}
.v18-steps .pc3 p{margin-top:.55rem;font-size:.9rem;color:var(--muted);line-height:1.5}
.v18-steps .pc3.is-on{background:var(--blue);border-color:var(--blue)}
.v18-steps .pc3.is-on h3,.v18-steps .pc3.is-on p{color:#fff}
.v18-steps .pc3.is-on .node{background:var(--blue);border-color:#fff}
.v18-steps .pc3.is-on .node .nn{opacity:0}
.v18-steps .pc3.is-on .node .chk{opacity:1;transform:scale(1)}
@media (max-width:979px){
  .v18-steps .row{grid-template-columns:1fr 1fr;gap:1rem;padding-top:0}
  .v18-steps .stepline{display:none}
  .v18-steps .pc3{padding:1.5rem 1.3rem 1.5rem}
  .v18-steps .pc3 .node{position:static;transform:none;margin-bottom:.9rem}
}
@media (prefers-reduced-motion:reduce){
  .v18-steps .pc3,.v18-steps .node,.v18-steps .node .nn,.v18-steps .node .chk{transition:none}
}


/* ==========================================================================
   ROUND 5 (2026-07-01, George page-review #2). Deltas only.
   ========================================================================== */

/* #1 nav — "International calls" label to black (was muted grey, hard to read). */
.nav-phone .np-lead{color:#000;font-weight:500}

/* #3 nav — WhatsApp becomes a green square the height of the CTA button (44px), same spot. */
.nav-wa{width:44px;height:44px;min-height:44px;padding:0;border:0;border-radius:0;
  background:#25D366;display:inline-flex;align-items:center;justify-content:center}
.nav-wa svg{width:22px;height:22px;fill:#fff}
.nav-wa:hover{background:#1EBE57}
.nav-wa:hover svg{opacity:1;fill:#fff}

/* #4/R7 SERVICES folder — RESTORE the folder tab (client wants the folder look back). Clean
   white tab, no blue line; the tab drops 2px INTO the card top so there's no seam/thin-line to
   flicker on hover, and it lifts together with the card. (Widths per card come from v17.css.) */
.v18-svc .sb::before{content:"";top:-16px;height:18px;border-top:0;background:#fff;z-index:1}

/* #5 certifications — restored to the real film clip (was a still carousel). 16:9, hover-plays. */
.v18-creds .credsvid{aspect-ratio:16/9}

/* #6 team — the header block can be wider (was cramped at 46ch). */
.v18-team .teamhead{max-width:min(54rem,100%)}
.v18-team .teamhead .tlede{max-width:60ch;margin-inline:auto}

/* #7 team cards — make the Education / Expertise labels + values more readable. */
.v18-team .tcard dt{font-size:.74rem;color:rgba(255,255,255,.64)}
.v18-team .tcard dd{font-size:.97rem;color:rgba(255,255,255,.95)}

/* #8 team cards — drop the italics on the vision line. */
.v18-team .tcard .vision{font-style:normal}

/* #9 how-it-works — make the connector path clearer (thicker, more visible track). */
.v18-steps .stepline{top:28px;height:4px;background:rgba(1,30,147,.28)}

/* #10 TESTIMONIAL story — white card (client: no unrequested colours). Dark text; lifts off
   the navy like the quote cards below it. */
.v17-tmo .v17-story{background:#fff;border-left:0;box-shadow:0 20px 50px rgba(2,10,35,.28)}
.v17-tmo .v17-story .stx{color:var(--blue)}
.v17-tmo .v17-story .smeta{color:var(--muted)}

/* #11 FOOTER social — black icons on the white pills. */
footer .social a{background:#fff;border-color:#fff;color:#111}
footer .social a:hover{background:#111;border-color:#111;color:#fff}


/* ==========================================================================
   ROUND 6 (2026-07-01) — NAV REDO. Contact icons pulled OUT of the navbar;
   TRYING two patterns for phone/address/WhatsApp, both live to compare:
     (A) right slide-over panel (tab nudges on load)   (B) top utility bar.
   ========================================================================== */

/* ---- (B) TOP UTILITY BAR — phone + address above the floating nav (desktop) ---- */
.top-util{display:none}
@media (min-width:981px){
  .top-util{display:block;position:fixed;top:0;left:0;right:0;z-index:51;
    background:rgba(255,255,255,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line)}
  .top-util .tu-in{max-width:1280px;margin:0 auto;padding:.45rem clamp(1.25rem,5vw,4rem);
    display:flex;align-items:center;gap:1.6rem;min-height:44px}
  .tu-item{display:inline-flex;align-items:center;gap:.6rem;color:var(--navy);text-decoration:none}
  .tu-item .zic{width:20px;height:20px;color:var(--blue);flex:none}
  .tu-txt{display:flex;flex-direction:column;line-height:1.12}
  .tu-txt b{font-size:.68rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);font-weight:500}
  .tu-txt span{font-size:.9rem;color:var(--navy);font-weight:500}
  .tu-item.tu-contact{margin-left:auto}
  .tu-item.tu-contact .tu-txt b{font-size:.82rem;letter-spacing:.03em;color:var(--blue);text-transform:none}
  .tu-item.tu-contact:hover .tu-txt b{color:var(--red)}
  .tu-sep{width:1px;height:26px;background:var(--line);flex:none}
  /* (R8: top-util merged into the nav — the combined-bar rules below handle positioning) */
}

/* ---- (A) RIGHT SLIDE-OVER — contact panel with a pull tab ---- */
.cs-backdrop{position:fixed;inset:0;background:rgba(10,22,46,.42);opacity:0;visibility:hidden;
  transition:opacity .35s ease,visibility .35s ease;z-index:58}
.cslide.open .cs-backdrop{opacity:1;visibility:visible}
/* R7: a compact floating card, centred a bit BELOW the middle (client: smaller + a bit down).
   ⚠ ONE source for the card's width: the open handle parks against the card's edge, so the two
   values must never be written twice. Override --cs-w and both follow. */
.cslide{--cs-w:min(340px,88vw)}
.cs-panel{position:fixed;top:58%;right:0;transform:translate(100%,-50%);
  height:auto;max-height:82vh;width:var(--cs-w);background:#fff;z-index:60;
  /* the shadow belongs to the OPEN card only: parked off screen it still reached 84px into the
     page and laid a grey haze down the right edge, over the end of every line (2026-09-29) */
  box-shadow:none;
  transition:transform .42s cubic-bezier(.22,.78,.27,1),box-shadow .42s ease;
  /* the card is a fixed 340px at every width, so its side padding must not scale with the
     viewport: at 1920 the clamp stole 18px of text column and wrapped the CTA labels. */
  padding:clamp(1.6rem,3vw,2.2rem) 1.25rem;overflow-y:auto;
  overscroll-behavior:contain;                     /* the page must not scroll behind the card */
  display:flex;flex-direction:column;gap:var(--cs-gap,1rem)}
/* On the shortest phones the card still has to scroll, so the bar must be a REAL, always-present
   one — macOS overlay scrollbars stay invisible until you already scroll, which is how the Hours
   line reads as "cut off" rather than "below the fold". Sizing ::-webkit-scrollbar forces it.
   ⚠ Do NOT add scrollbar-width/scrollbar-color here: any non-auto value makes Chromium ignore
   these rules and hand back the invisible overlay bar. Firefox gets them below instead. */
.cs-panel::-webkit-scrollbar{width:6px}
.cs-panel::-webkit-scrollbar-track{background:transparent}
.cs-panel::-webkit-scrollbar-thumb{background:rgba(1,30,147,.34)}
@supports not selector(::-webkit-scrollbar){
  .cs-panel{scrollbar-width:thin;scrollbar-color:rgba(1,30,147,.34) transparent}
}
.cslide.open .cs-panel{transform:translate(0,-50%);box-shadow:-24px 0 60px rgba(2,10,35,.28)}
.cs-handle{position:fixed;right:0;top:58%;transform:translateY(-50%) translateX(120%);z-index:61;
  width:46px;min-height:150px;background:var(--blue);color:#fff;border:0;cursor:pointer;
  padding:.95rem 0;   /* client call 2026-09-29: "CONTACT" ran into the tab's bottom edge on her 13" screen */
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.7rem;
  box-shadow:-8px 0 24px rgba(2,10,35,.22);
  transition:right .42s cubic-bezier(.22,.78,.27,1),transform .6s cubic-bezier(.22,.78,.27,1)}
.cslide.open .cs-handle{right:var(--cs-w)}
.cs-handle svg{width:22px;height:22px;flex:none}
.cs-htxt{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--sans);font-size:.78rem;letter-spacing:.15em;text-transform:uppercase}  /* 2026-09-28: the button reset left this in Arial, the only non-brand face on the site */
.cs-handle:hover{background:#021d7a}
.cs-close{position:absolute;top:.7rem;right:1rem;width:38px;height:38px;border:0;background:none;
  font-size:2rem;line-height:1;color:var(--muted);cursor:pointer}
.cs-close:hover{color:var(--blue)}
.cs-h{font-family:var(--serif);font-weight:300;font-size:1.9rem;color:var(--blue);margin:.3rem 0 0;line-height:1.1}
.cs-sub{font-size:.9rem;color:var(--muted);margin:0}
.cs-wa{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;background:#25D366;color:#fff;
  font-weight:500;padding:.85rem 1rem;text-decoration:none;margin-top:.3rem}
.cs-wa svg{width:22px;height:22px;fill:#fff}
.cs-wa:hover{background:#1EBE57}
/* 2026-08-05 — "Book an Online Consultation", the same button in cobalt, directly under WhatsApp.
   Same vertical padding as .cs-wa so the two are exactly the same height; a hair more side room
   because this label is 11 characters longer than "Chat on WhatsApp".
   ⚠ The green stays #25D366: WhatsApp's own treatment, closed by George 2026-08-03. */
.cs-book{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;background:var(--blue);
  color:#fff;font-weight:500;padding:.85rem .9rem;text-decoration:none;text-align:center}
/* the icon carries no presentation attributes, so without this it renders as a 280px square */
.cs-book svg{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.cs-book:hover{background:#021d7a}
/* cancel most of the column gap so the two CTAs read as one stacked pair */
.cs-wa+.cs-book{margin-top:calc(.4rem - var(--cs-gap,1rem))}
.cs-block{display:flex;flex-direction:column;gap:.22rem;padding-top:1rem;border-top:1px solid var(--line)}
.cs-lab{font-size:.7rem;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.cs-block a,.cs-block span{color:var(--blue);text-decoration:none;font-size:1rem;line-height:1.45}
.cs-block a:hover{color:var(--red)}
.cs-handle.nudge{animation:cs-nudge .85s ease 2}
@keyframes cs-nudge{0%,100%{transform:translateY(-50%) translateX(0)}
  25%{transform:translateY(-50%) translateX(-13px)}50%{transform:translateY(-50%) translateX(0)}
  75%{transform:translateY(-50%) translateX(-7px)}}
@media (prefers-reduced-motion:reduce){ .cs-handle.nudge{animation:none} .cs-panel{transition:none} }

/* ---- 2026-08-05 — the chip on SHORT and NARROW screens -----------------------------------
   Measured cause of the clipped "Hours" line: the card's content ran 961px tall while the box
   was capped at max-height:82vh — 499px on the client's 1440x609 laptop. Two things made it
   that tall: the unstyled .cs-book icon rendering as a ~282px square (fixed above), and the
   82vh cap itself, which is the most the top:58% centre anchor can ever allow (58% + 41% = 99%).
   So: on a short screen centre on 50% (the full height becomes usable, not 84% of it) and take
   a notch off the card's own chrome; on a narrow screen anchor the card to the BOTTOM above the
   mobile dock, which was covering the card's foot at 390 and overlapping the buttons at 360. */

/* compact chrome — every phone, and every screen shorter than the project's 820px height line */
@media (max-height:820px),(max-width:768px){
  .cs-panel{--cs-gap:.72rem;padding:1.15rem 1.25rem}
  .cs-close{top:.35rem;right:.55rem;width:34px;height:34px;font-size:1.7rem}
  .cs-h{font-size:1.5rem}
  .cs-sub{font-size:.86rem}
  .cs-wa,.cs-book{padding-block:.72rem}   /* height only — each keeps its own side padding */
  .cs-block{padding-top:.68rem}
  .cs-block a,.cs-block span{font-size:.95rem;line-height:1.4}
  .cs-handle{min-height:118px}
}

/* SHORT: the 58% anchor costs 16vh of usable height, and on a 609px screen that is the whole
   difference between the card fitting and the Hours line falling off the bottom. */
@media (max-height:820px){
  .cs-panel{top:50%;max-height:calc(100dvh - 2rem)}
}

/* NARROW: bottom-anchored above the dock, and the card leaves room for its own tab.
   --cs-dock = the dock's height (66px) + its bottom offset + a gap; the tab parks on --cs-w. */
@media (max-width:768px){
  .cslide{--cs-w:min(340px,calc(100vw - 76px));--cs-dock:calc(6.4rem + env(safe-area-inset-bottom,0px))}
  .cs-panel{top:auto;bottom:var(--cs-dock);transform:translateX(100%);
    max-height:calc(100dvh - var(--cs-dock) - 1rem)}
  .cslide.open .cs-panel{transform:none}
}
@media (max-width:680px){
  .cslide{--cs-dock:calc(5.9rem + env(safe-area-inset-bottom,0px))}   /* dock sits 1rem lower here */
}
/* VERY SHORT (360x640 is the worst realistic case): one more notch off the chrome so the card
   comes within a few pixels of fitting whole. Below this it scrolls, with the bar above. */
@media (max-height:700px){
  .cs-panel{--cs-gap:.55rem;padding-block:.9rem}
  .cs-h{font-size:1.35rem}
  .cs-block{padding-top:.5rem}
  .cs-handle{min-height:104px}
}
/* the last few pixels on a 360x640: spend the top gutter rather than shave the type again.
   The card runs to the top edge — it is a slide-over over a dimmed page, so that reads fine. */
@media (max-width:768px) and (max-height:700px){
  .cs-panel{max-height:calc(100dvh - var(--cs-dock) - .25rem)}
}


/* ==========================================================================
   ROUND 7 (2026-07-01) — nav CTA spacing · mobile dock = two buttons.
   ========================================================================== */

/* #1 nav — group the globe next to the menu and push the CTA to the far right, by itself.
   (auto margins split the free space: one before the menu, one after the globe.) */
@media (min-width:1280px){
  .site-header .nav-row .navigation-menu{margin-inline:auto}   /* menu centred (globe moved to top bar) */
}

/* #2 mobile dock — two buttons: "Call now" (left, compact) + red "Book a consultation" (right). */
.glass-dock .dock-2{grid-template-columns:auto 1fr}
.dock-callnow{background:#fff;border:1.5px solid var(--blue);color:var(--blue);
  gap:.5rem;font-weight:500;white-space:nowrap;padding-inline:1.1rem}
.dock-callnow .zic{width:20px;height:20px;color:var(--blue);flex:none}
.dock-callnow:hover{background:var(--blue);color:#fff}
.glass-dock .dock-2 .dock-btn.primary{font-size:.95rem}


/* ==========================================================================
   ROUND 8 (2026-07-01) — steps LOCK-IN hardening.
   ========================================================================== */
/* ScrollTrigger pinning is unreliable while the page has smooth-scroll — force it off. And give
   the pinned section an opaque bg + its own stacking context so neighbours can't bleed through. */
html{scroll-behavior:auto}
/* LOCK via native position:sticky — NOT a ScrollTrigger pin. No pin-spacer means no engage/
   release jump at any viewport height (the JS pin snapped ~500-830px when the section was taller
   than the viewport). A non-pinned scrub drives the line + boxes. Desktop only. */
.v18-steps{background:#fff;position:relative;z-index:1;padding-block:0}
@media (min-width:980px){
  .v18-steps .steps-scroll{height:190vh;position:relative}
  .v18-steps .steps-stick{position:sticky;top:0;height:100vh;box-sizing:border-box;background:#fff;
    display:flex;flex-direction:column;justify-content:center;padding:120px 0 2.5rem}
}
@media (max-width:979px){
  .v18-steps .steps-scroll{height:auto}
  .v18-steps .steps-stick{position:static;padding-block:clamp(2.5rem,8vw,4rem)}
}

/* COMBINED NAV (client) — merge the utility strip + the menu into ONE edge-to-edge glass bar,
   flush to the top, no floating. Desktop only; below 1280 keeps the floating pill + the dock. */
.nav-util{display:none}
@media (min-width:1280px){
  .site-header{top:0;padding-inline:0}                    /* flush to the top, full width */
  .site-header .glass-bar{max-width:none;margin:0;padding:0 clamp(1.5rem,4vw,3.5rem)}
  .nav-util{display:flex;align-items:center;gap:1.6rem;padding:.42rem 0;
    border-bottom:1px solid rgba(1,30,147,.14)}
  .nav-util .tu-item{display:inline-flex;align-items:center;gap:.55rem;color:var(--navy);text-decoration:none}
  .nav-util .tu-item .zic{width:19px;height:19px;color:var(--blue);flex:none}
  .nav-util .tu-txt{display:flex;flex-direction:column;line-height:1.1;text-align:left}
  .nav-util .tu-txt b{font-size:.66rem;letter-spacing:.05em;text-transform:uppercase;color:#3e4d6b;font-weight:600}
  .nav-util .tu-txt span{font-size:.86rem;color:var(--navy);font-weight:500}
  .nav-util .tu-item.tu-contact{margin-left:auto}
  .nav-util .tu-item.tu-contact .tu-txt b{font-size:.8rem;letter-spacing:.03em;color:var(--blue);text-transform:none}
  .nav-util .tu-item.tu-contact:hover .tu-txt b{color:var(--red)}
  .nav-util .tu-sep{width:1px;height:22px;background:rgba(1,30,147,.18);flex:none}
  .nav-row{padding-block:.5rem}
}


/* ==========================================================================
   ROUND 9 (2026-07-01) — combined-nav polish · slide-over auto-open · team centre.
   ========================================================================== */

/* #7 less transparent glass so the nav text is easy to read (nav only, not the dock). */
.site-header .glass-tint{background:rgba(255,255,255,.6)}

@media (min-width:1280px){
  /* #1/#2 no divider under the utility row · #4 push phone + address to the RIGHT with contact */
  .nav-util{border-bottom:0;justify-content:flex-end;gap:1.35rem}
  .nav-util .tu-sep{display:none}                         /* #3 drop the vertical divider */
  .nav-util .tu-item.tu-contact{margin-left:0}            /* everything clusters right */
  /* #6 navy / cobalt (NOT grey) — readable */
  .nav-util .tu-txt b{color:var(--navy);font-weight:600}
  .nav-util .tu-txt span{color:var(--blue);font-weight:600}
  .nav-util .tu-item.tu-contact .tu-txt b{color:var(--blue)}
  /* #5 language switcher, now in the top bar on the right; dropdown aligns to its right edge */
  .nav-util .langdd{display:block;position:relative;margin-left:.3rem}
  .nav-util .langdd .lang-btn{padding:.15rem .25rem}
  .nav-util .langdd .lang-btn svg{width:20px;height:20px}
  .nav-util .langdd .lang-menu{top:100%;left:auto;right:0;transform:none;margin-top:.5rem}
  /* #10 bigger logo */
  .site-header .brand{height:74px}
}

/* #9 team header — centre it. */
.v18-team .teamhead{margin-inline:auto;text-align:center}
.v18-team .teamhead .display,.v18-team .teamhead .tlede{margin-inline:auto;text-align:center}


/* ==========================================================================
   ROUND 10 (2026-07-01) — nav: small divider back · logo spans BOTH rows · tighter menu row.
   ========================================================================== */
@media (min-width:1280px){
  .nav-util{border-bottom:1px solid rgba(1,30,147,.12)}   /* #1 small divider between the two rows */
  /* #3 less padding on the menu row + reserve the space the big logo occupies on the left */
  .nav-row{padding-block:.34rem;padding-left:clamp(362px,26vw,382px)}
  /* #2 bigger logo that spans BOTH rows without growing the bar: pull it out of the row flow
     and centre it vertically across the whole glass-content (utility row + menu row). */
  .site-header .glass-content{position:relative}
  .site-header .nav-row .brand{position:absolute;left:0;top:50%;transform:translateY(-50%);
    height:76px;z-index:3}
}


/* ==========================================================================
   ROUND 11 (2026-07-01) — divider clears the logo · menu left · contact chip slides in.
   ========================================================================== */
@media (min-width:1280px){
  /* #1 divider starts AFTER the logo so it no longer cuts into it */
  .nav-util{border-bottom:0;position:relative}
  .nav-util::after{content:none}   /* divider removed again (client) */
  /* #2 (revised) menu aligned RIGHT, next to the "Book a consultation" button */
  .site-header .nav-row .navigation-menu{margin-left:auto;margin-right:0}
  .site-header .nav-row .nav-cta{margin-left:1.5rem}
}
/* #3 the contact chip stays hidden, then slides in from the right ~1.5s after load (no auto-open). */
.cslide.tab-in .cs-handle,.cslide.open .cs-handle{transform:translateY(-50%) translateX(0)}
@media (prefers-reduced-motion:reduce){ .cs-handle{transition:none} }
/* after the first page of a visit the tab is simply there (site-runtime.js sets .tab-now) */
@media (prefers-reduced-motion:no-preference){
  .cslide.tab-now .cs-handle{transition:right .42s cubic-bezier(.22,.78,.27,1)}
}


/* ==========================================================================
   ROUND 12 (2026-07-01) — section chips · founder vision · story stretch · form text darkened.
   ========================================================================== */

/* #2/#3 small section chip ("Who we are" / "Our vision") */
.sec-chip{display:inline-block;font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;
  font-weight:600;color:var(--blue);background:var(--tint);padding:.42rem .85rem;margin:0 0 1.1rem}

/* #3 vision block — founder portrait + "Our vision" beside the statement */
.v17-who .v18-vision{display:grid;grid-template-columns:1fr;gap:clamp(1.5rem,4vw,2.6rem);
  text-align:left;align-items:center}
@media (min-width:760px){ .v17-who .v18-vision{grid-template-columns:auto 1fr;gap:clamp(2.4rem,5vw,4.5rem)} }
.v18-vision .vimg{width:clamp(150px,20vw,210px);flex:none}
.v18-vision .vimg img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 16%;display:block;background:#0a1830}
.v17-who .v18-vision .vq{max-width:44ch;margin:0;text-align:left;font-size:clamp(1.35rem,2.3vw,1.95rem)}
.v17-who .v18-vision figcaption{text-align:left}

/* #4 featured story — stretch the text to fill the card (was leaving white space). */
.v17-tmo .v17-story .stx{max-width:none}

/* #5/#6 contact form — darken the grey text to navy so it reads clearly. */
.v17form .formlede{color:var(--navy)}
.v17form .fld label{color:var(--navy)}
.madlibs .below .consent{color:var(--navy)}


/* ==========================================================================
   ROUND 13 (2026-07-23) — nav rebuilt to the OLD-SITE layout (client ask):
   ONE glass bar, two lines. Line 1 = logo left + utility links (calls · address ·
   contact · language) to its right. Line 2 = the four old-site menu links,
   centered, uppercase. CTA + EN/DE leave the desktop menu line (contact and the
   language picker live in line 1, exactly like zaraconsult.com). Both lines stay
   on scroll (the bar is fixed). Mobile (<1280) keeps the pill + dropdown.
   ========================================================================== */
@media (min-width:1280px){
  /* line 1 — tall enough to seat the BIG logo; utilities cluster to the right of it */
  .nav-util{min-height:102px;align-items:center;justify-content:flex-end;gap:2.4rem;
    padding:0;border-bottom:1px solid rgba(1,30,147,.12)}
  /* one uniform font style across every utility line (client: no bold, no size jumps) */
  .nav-util .tu-txt b{font-size:.95rem;font-weight:400;text-transform:uppercase;letter-spacing:.02em}
  .nav-util .tu-txt span{font-size:.95rem;font-weight:400}
  .nav-util .tu-item.tu-contact .tu-txt b{font-size:.95rem;font-weight:400;text-transform:uppercase;letter-spacing:.02em}
  /* the logo sits in line 1 only — no longer spans both lines */
  .site-header .nav-row .brand{top:10px;transform:none;height:82px}
  /* line 2 — the menu, centered under the logo line, old-site style, BOLD;
     fades in ~1.2s after load (client), sliding down from under line 1 */
  .nav-row{padding:.6rem 0 .68rem;justify-content:center}
  .nav-collapsible{flex:0 0 auto;margin:0 auto;gap:0;   /* v16 set flex:1 → stretched the menu line left */
    opacity:0;transform:translateY(-8px);animation:r13menu .7s ease 1.2s forwards}
  .site-header .nav-row .navigation-menu{margin:0}
  .navigation-menu{gap:clamp(2.1rem,3.4vw,3.4rem)}
  .navigation-menu a{text-transform:uppercase;letter-spacing:.055em;font-size:1.05rem;font-weight:600}
  .nav-row .lang{display:none}
  .nav-row .nav-cta{display:none}
}
@keyframes r13menu{to{opacity:1;transform:none}}
@media (min-width:1280px) and (prefers-reduced-motion:reduce){
  .nav-collapsible{animation:none;opacity:1;transform:none}
}