/* ============================================================================
   v17.css — CLIENT FEEDBACK ROUND 1 (2026-06-25)
   Overlay layer for home-v17.html ONLY. Loads LAST (after zara→lab→v14→v15→v16),
   so equal-specificity rules here win. Nothing here affects the live v16 pages —
   they don't link this file. Each block is tagged with the Pastel comment # it answers.
   Tokens reused from zara.css: --blue #011E93 · --navy #0D1F3C · --red #990000 ·
   --serif GT Super · --tint #EDEFF8 · --muted · --line · --maxw · --pad · --sec.
   ========================================================================== */

/* #3 — BIGGER nav logo (client: "quite a bit bigger"). .brand is a background image
   (contain) so height scales it. Placement still open for discussion. ----------*/
.site-header .brand{height:60px}
@media (max-width:1279px){ .site-header .brand{height:46px} }
@media (max-width:680px){ .site-header .brand{height:38px} }

/* #5 — partner / membership logos in COLOUR (was grayscale at rest) -----------*/
.v16-logos img{filter:none;opacity:1}
.v16-logos img:hover{filter:none;opacity:1}

/* #1 — animated count-up stats: tabular figures so the width doesn't jitter ----*/
.v16-logos .stats .n{font-variant-numeric:tabular-nums}

/* #2 — SERVICES as "folders", more broken-up (Ziya). Each card gets a folder tab;
   the middle column is staggered down for the "разчупено" feel. Interpretation of
   the "папки" idea — confirm exact concept with Ziya. ---------------------------*/
.v17-svc .svcboxes{row-gap:clamp(2.3rem,4.5vw,3.2rem)}
.v17-svc .sb{position:relative;overflow:visible}
.v17-svc .sb::before{content:"";position:absolute;left:0;top:-15px;height:15px;width:44%;
  background:#fff;clip-path:polygon(0 0,82% 0,100% 100%,0 100%);border-top:2px solid var(--blue)}
.v17-svc .sb:nth-child(2)::before{width:36%}
.v17-svc .sb:nth-child(3)::before{width:52%}
.v17-svc .sb:nth-child(4)::before{width:48%}
.v17-svc .sb:nth-child(5)::before{width:34%}
.v17-svc .sb:nth-child(6)::before{width:42%}

/* #14 — WHO WE ARE + OUR VISION (new). Off-center editorial block on white. -----*/
.v17-who{background:var(--paper);padding-block:var(--sec)}
.v17-who .whogrid{display:grid;grid-template-columns:1fr;gap:clamp(1.6rem,4vw,2.6rem)}
@media (min-width:900px){ .v17-who .whogrid{grid-template-columns:.9fr 1.1fr;gap:clamp(3rem,6vw,6rem)} }
.v17-who .wholeft .display{font-size:clamp(1.9rem,3.6vw,3rem);max-width:16ch;line-height:1.08}
.v17-who .par{font-size:clamp(1.05rem,1.5vw,1.2rem);line-height:1.75;color:var(--blue);
  font-weight:300;max-width:62ch;letter-spacing:.01em}
.v17-who .parnote{margin:1rem 0 0;font-size:.8rem;color:var(--muted);font-style:italic}
.v17-who .visionq{margin:clamp(3rem,6vw,5rem) auto 0;border-top:1px solid var(--line);
  padding-top:clamp(2.4rem,4.5vw,3.6rem);text-align:center}
.v17-who .visionq .vq{font-family:var(--serif);font-weight:300;font-size:clamp(1.55rem,3.1vw,2.5rem);
  line-height:1.3;color:var(--blue);max-width:26ch;margin:0 auto;letter-spacing:-.01em}
.v17-who .visionq .vq::before{content:"\201C"} .v17-who .visionq .vq::after{content:"\201D"}
.v17-who .visionq figcaption{margin-top:1.4rem;font-size:.9rem;color:var(--muted);letter-spacing:.03em}

/* #12 — CERTIFICATIONS as a moving carousel of individual diplomas (was one clip).
   ⚠ certs-1/2 are placeholders; needs each diploma scanned separately, high-res. ---*/
.v17-creds{background:var(--tint);padding-block:var(--sec);overflow:hidden}
.v17-creds .creds-head{margin-bottom:clamp(2.2rem,5vw,3.4rem)}
.v17-creds .creds-head .display{font-size:clamp(1.7rem,3.2vw,2.5rem);max-width:26ch;line-height:1.1}
.certmarq{overflow:hidden}
.certmarq .ctrack{display:flex;gap:clamp(1rem,2vw,1.6rem);width:max-content;
  padding-inline:var(--pad);animation:marq 55s linear infinite}
.certmarq:hover .ctrack{animation-play-state:paused}
.certmarq .cert{flex:none;width:clamp(188px,22vw,256px);aspect-ratio:3/4;background:#fff;
  border:1px solid var(--line);padding:.55rem;margin:0}
.certmarq .cert img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(.04)}
@media (prefers-reduced-motion:reduce){
  .certmarq .ctrack{animation:none;overflow-x:auto;scroll-snap-type:x mandatory}
  .certmarq .cert{scroll-snap-align:start}
}

/* #17 — TEAM: per-person card (name · education · expertise · one-line vision),
   synced to the roster + portrait. ⚠ education/vision are placeholders. -----------*/
.v17-team .teamhead{margin-bottom:clamp(1.8rem,4vw,2.8rem)}
.v17-team .teamgrid{display:grid;grid-template-columns:1fr;gap:clamp(2rem,4vw,3rem);align-items:start}
@media (min-width:900px){ .v17-team .teamgrid{grid-template-columns:.7fr 1.3fr;gap:clamp(2.5rem,5vw,4.5rem)} }
.v17-team .teamdetail{display:flex;flex-direction:column;gap:clamp(1.4rem,3vw,2.2rem)}
@media (min-width:620px){ .v17-team .teamdetail{flex-direction:row;align-items:stretch} }
.v17-team .teamdetail .port2{max-width:300px;width:100%;flex:none;aspect-ratio:4/5;align-self:flex-start}
@media (max-width:619px){ .v17-team .teamdetail .port2{max-width:none} }
.v17-team .tbios{flex:1;min-width:0}
.v17-team .tbio{display:none}
.v17-team .tbio.on{display:block;animation:v17fade .35s ease}
@keyframes v17fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.v17-team .tbio h3{font-family:var(--serif);font-weight:300;font-size:clamp(1.5rem,2.6vw,2.1rem);
  color:#fff;line-height:1.1;margin:0}
.v17-team .tbio .brole{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.55);margin:.45rem 0 1.4rem}
.v17-team .tbio dl{display:grid;gap:1rem;margin:0 0 1.5rem;
  border-top:1px solid rgba(255,255,255,.16);padding-top:1.2rem}
.v17-team .tbio dl>div{display:grid;gap:.25rem}
.v17-team .tbio dt{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.v17-team .tbio dd{margin:0;font-size:1rem;color:rgba(255,255,255,.9);line-height:1.5}
.v17-team .tbio .vision{font-family:var(--serif);font-weight:300;font-style:italic;
  font-size:clamp(1.15rem,1.8vw,1.45rem);line-height:1.4;color:#fff;max-width:40ch}

/* #19 — client STORYTELLING: one featured, longer-form story above the quote grid.
   Text-only → fast (her speed worry). ⚠ placeholder pending a real cleared story. ---*/
.v17-tmo .v17-story{background:var(--navy-2);padding:clamp(1.9rem,3.6vw,3rem);
  margin:0 0 clamp(1.3rem,2.5vw,1.8rem);display:grid;gap:1.1rem}
.v17-tmo .v17-story .stx{font-family:var(--serif);font-weight:300;
  font-size:clamp(1.2rem,1.9vw,1.6rem);line-height:1.5;color:#fff;margin:0;max-width:64ch}
.v17-tmo .v17-story .smeta{font-size:.82rem;color:rgba(255,255,255,.55);margin:0;letter-spacing:.02em}

/* #15 — premium CONTACT form (dropped the "fill in the blanks" madlib). --------*/
.v17form .formhead{max-width:680px;margin:0 auto clamp(2.4rem,5vw,3.4rem);text-align:center}
.v17form .ctahead{font-size:clamp(2rem,4.2vw,3.2rem);margin:0 0 1rem}
.v17form .formlede{color:var(--muted);font-size:1.05rem;line-height:1.6;max-width:54ch;margin:0 auto}
.v17form .zform{max-width:780px;margin:0 auto}
.v17form .fgrid{display:grid;grid-template-columns:1fr;gap:clamp(1.4rem,3vw,2.1rem)}
@media (min-width:680px){ .v17form .fgrid{grid-template-columns:1fr 1fr} }
.v17form .fld{display:flex;flex-direction:column;gap:.5rem;min-width:0}
.v17form .fld-wide{grid-column:1/-1}
.v17form .fld label{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);font-weight:400}
/* boxed, legible fields (client: pretty but hard to fill — make it easier) */
.v17form .fld input,.v17form .fld select,.v17form .fld textarea{
  width:100%;border:1px solid rgba(1,30,147,.3);background:#fff;
  padding:.85rem 1rem;font-family:var(--sans);font-weight:300;color:var(--blue);
  font-size:1.05rem;line-height:1.4;border-radius:0;transition:border-color .15s ease,box-shadow .15s ease}
.v17form .fld input::placeholder,.v17form .fld textarea::placeholder{color:#66728C}  /* was #9aa4bd = 2.4:1; now 4.8:1 */
.v17form .fld input:focus,.v17form .fld select:focus,.v17form .fld textarea:focus{
  outline:none;border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue)}
.v17form .fld textarea{resize:vertical;min-height:5em}
.v17form .fld select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:2.6em;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23011E93' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right .9em center}