/* SELENA_HYBRID_FINAL_POLISH_CLIENT_PREVIEW_R03B · polish layer over R03 hybrid.css.
   One corrective pass, no new direction: rhythm through type scale, numerals, whitespace and composition.
   Rules: no markup/copy change, no new assets, no new colours (R03 tokens only), no cards, no icons.
   Numerals: large and light (weight 200, ink) carry sequence; terracotta stays a small accent. */
:root{
  --p-num:clamp(3.4rem,6.2vw,6.2rem);      /* sequence numerals (process) */
  --p-num-sm:clamp(2.2rem,3.4vw,3.2rem);   /* index numerals (areas, situations) */
  --p-step:clamp(2rem,4.5vw,4.5rem);       /* staircase offset between sequence steps */
}

/* ================================================================ POLISH 1 · SELENA AS EDITORIAL PROTAGONIST */
/* HOME: headline and portrait share one spread; the portrait grows and rises to the headline,
   the text column carries a masthead of facts instead of a 2×2 box. */
.hyb .h-selena{padding-top:clamp(4.5rem,8vw,7.5rem)}
.hyb .h-selena-grid{grid-template-columns:minmax(0,6fr) minmax(0,6fr);column-gap:clamp(2rem,4vw,5rem);align-items:end}
.hyb .h-selena-text{align-self:start;padding-top:clamp(1rem,3vw,3rem)}
.hyb .h-selena-text h2{font-size:clamp(2.6rem,5vw,4.9rem);line-height:1;letter-spacing:-.032em;max-width:14ch;margin:0 0 clamp(1.8rem,3vw,2.6rem);
  position:relative;z-index:1}
.hyb .h-selena-text > p{font-size:clamp(1.12rem,1.35vw,1.3rem);line-height:1.55;color:var(--ink);max-width:40ch;
  padding-left:clamp(0rem,4vw,4.5rem);margin-bottom:2rem}
.hyb .h-selena-text > .more{margin-left:clamp(0rem,4vw,4.5rem)}
.hyb .h-portrait--home{max-width:42rem;justify-self:end}

/* facts: a quiet masthead, label left / value right on hairlines */
.hyb .h-facts--side{display:block;border-top:1px solid var(--ink);padding-top:0;margin-top:clamp(2.5rem,5vw,4.5rem)}
.hyb .h-facts--side > div{display:grid;grid-template-columns:minmax(8.5rem,11rem) minmax(0,1fr);gap:1.5rem;align-items:baseline;
  padding:.95rem 0;border-bottom:1px solid var(--rule)}
.hyb .h-facts--side dt{margin:0;font-size:.6875rem;letter-spacing:.16em}
.hyb .h-facts--side dd{font-size:1rem;color:var(--ink);font-variant-numeric:lining-nums}

/* byline under the portrait: name set as type, role as small caps line */
.hyb .h-portrait figcaption{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;border-top-color:var(--ink);
  padding-top:1rem;font-size:1.05rem;color:var(--ink);letter-spacing:-.005em}
.hyb .h-portrait figcaption small{font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mid);opacity:1;text-align:right}

/* ABOUT: same spread logic, the headline leads, Selena takes the full right column */
.hyb .h-abhead-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(2rem,4vw,5rem)}
.hyb .h-abhead h1{font-size:clamp(2.6rem,4.9vw,4.9rem);line-height:.98;letter-spacing:-.034em;margin-bottom:2rem}
.hyb .h-abhead h1 span{text-wrap:balance}
.hyb .h-abhead .lead{font-size:clamp(1.12rem,1.35vw,1.3rem);color:var(--ink);padding-left:clamp(0rem,4vw,4.5rem);max-width:42ch}
.hyb .h-portrait--about{max-width:42rem}

/* ABOUT bio: the opening paragraph becomes a pull-statement across the page, body follows in two columns */
.hyb .h-bio-grid{grid-template-columns:minmax(0,2fr) minmax(0,10fr)}
.hyb .h-bio-grid > .h-bio-lede{grid-column:1/-1}
.hyb .h-bio-lede p{font-size:clamp(1.5rem,2.5vw,2.4rem);line-height:1.22;letter-spacing:-.02em;max-width:36ch}
.hyb .h-bio-grid > .h-bio-body{grid-column:2;margin-top:clamp(1.5rem,3vw,2.5rem);padding-top:1.6rem;border-top:1px solid var(--rule)}

/* facts close on the portrait's base line: same caption height on both sides of the spread */
.hyb .h-selena,.hyb .h-abhead{padding-bottom:clamp(1.5rem,3vw,2.5rem)}
.hyb .h-portrait figcaption{box-sizing:border-box;height:3.4rem;padding-bottom:0}
.hyb .h-facts--side{align-self:end;margin-bottom:3.4rem}

/* ================================================================ POLISH 2 · OBLASTI RADA (index, not a table) */
.hyb .h-areas-grid{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
.hyb .h-areas-head h2{font-size:clamp(2.4rem,4.6vw,4.4rem);line-height:1;letter-spacing:-.03em}
.hyb .h-areas-list ol{border-top:1px solid var(--ink)}
.hyb .h-areas-list ol > li{grid-template-columns:clamp(4.5rem,7vw,7rem) minmax(0,1fr);gap:0 1rem;padding:clamp(1.3rem,2vw,1.8rem) 0 clamp(1.4rem,2.2vw,2rem)}
.hyb .h-areas-list .num{font-size:var(--p-num-sm);font-weight:200;line-height:.9;letter-spacing:-.04em;color:var(--ink-mid);padding-top:0;
  transition:color .3s var(--h-ease)}
/* title runs the full measure, description steps into the right half: a staircase, not columns */
.hyb .h-areas-list .row{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:.55rem 1.5rem}
.hyb .h-areas-list .row h3{grid-column:1/-1;font-size:clamp(1.5rem,2.3vw,2.15rem);line-height:1.12;letter-spacing:-.022em;max-width:24ch}
.hyb .h-areas-list .row p{grid-column:2;font-size:.95rem;max-width:44ch}
.hyb .h-areas-list li:hover .num,.hyb .h-areas-list li:focus-within .num{color:var(--h-terra)}
.hyb .h-areas-list .secondary{padding-left:calc(clamp(4.5rem,7vw,7rem) + 1rem);margin-top:2.2rem}
.hyb .h-areas-list .secondary b{font-weight:400}

/* ABOUT areas: same index voice, quieter */
.hyb .h-abareas i{font-size:1.5rem;font-weight:200;line-height:1;letter-spacing:-.03em;color:var(--ink-mid);padding-top:0;min-width:2.4rem;transition:color .3s var(--h-ease)}
.hyb .h-abareas a{align-items:baseline;padding:1.35rem 0}
.hyb .h-abareas b{font-size:1.1rem}
.hyb .h-abareas a:hover i{color:var(--h-terra)}

/* ================================================================ POLISH 3 · PROCESS & SITUATIONS (editorial sequence) */
/* HOME · Kako počinje saradnja: headline above, the three steps as a descending sequence */
.hyb .h-work-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);row-gap:clamp(2.5rem,5vw,4.5rem);align-items:end}
.hyb .h-work-grid h2{font-size:clamp(2.4rem,4.6vw,4.4rem);line-height:1;letter-spacing:-.03em;max-width:11ch}
.hyb .h-work-head{display:contents}
.hyb .h-work-links{grid-column:2;grid-row:1;margin:0;justify-self:end;align-items:flex-start}
.hyb .h-work-grid > .steps,
.hyb .h-first .steps{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(1.5rem,3.5vw,4rem);
  border-top:0;padding-top:0;margin-top:0}
.hyb .h-work-grid > .steps > div,
.hyb .h-first .steps > div{display:block;padding:1.1rem 0 0;border-top:1px solid var(--ink);border-bottom:0}
.hyb .h-work-grid > .steps > div:nth-child(2),.hyb .h-first .steps > div:nth-child(2){margin-top:var(--p-step)}
.hyb .h-work-grid > .steps > div:nth-child(3),.hyb .h-first .steps > div:nth-child(3){margin-top:calc(var(--p-step) * 2)}
.hyb .h-work-grid .steps .k,.hyb .h-first .steps .k{display:block;font-size:var(--p-num);font-weight:200;line-height:.86;letter-spacing:-.05em;
  color:var(--ink);margin:0 0 1.2rem;font-variant-numeric:lining-nums}
.hyb .h-work-grid .steps h3,.hyb .h-first .steps h3{font-size:clamp(1.45rem,2vw,1.9rem);letter-spacing:-.018em;margin:0 0 .7rem;
  padding-top:.7rem;border-top:1px solid var(--rule);display:flex;gap:.6rem;align-items:baseline}
.hyb .h-work-grid .steps h3::before,.hyb .h-first .steps h3::before{content:"";width:.4rem;height:.4rem;border-radius:50%;
  background:var(--h-terra);flex:none;transform:translateY(-.25em)}
.hyb .h-work-grid .steps p,.hyb .h-first .steps p{font-size:1rem;line-height:1.6;color:var(--ink-mid);max-width:30ch}

/* HOME · Česte situacije: index with light numerals, title carries the row */
.hyb .h-sit h2{font-size:clamp(2.1rem,3.6vw,3.4rem);line-height:1.04;letter-spacing:-.028em}
.hyb .h-sit a{grid-template-columns:3.2rem minmax(0,1fr);padding:1.35rem 0 1.4rem;align-items:baseline}
.hyb .h-sit i{font-size:1.55rem;font-weight:200;line-height:1;letter-spacing:-.03em;color:var(--ink-mid);padding-top:0;transition:color .3s var(--h-ease)}
.hyb .h-sit a:hover i{color:var(--h-terra)}
.hyb .h-sit b{font-weight:400;font-size:1.15rem;letter-spacing:-.008em}

/* PRIVREDNO · Kada se klijenti obično javljaju: client situations as pull-statements */
.hyb .h-ppsit h2{font-size:clamp(2.4rem,4.6vw,4.4rem);line-height:1;letter-spacing:-.03em;max-width:13ch;margin-bottom:clamp(3rem,5vw,4.5rem)}
.hyb .h-ppsit ol{gap:clamp(1.5rem,3.5vw,4rem)}
.hyb .h-ppsit li{gap:1.1rem;padding-top:1.1rem}
/* index-size numerals here: the giant numerals belong to the sequence below, not to every list */
.hyb .h-ppsit .h-num{font-size:var(--p-num-sm);font-weight:200;line-height:.9;letter-spacing:-.04em;color:var(--ink-mid)}
.hyb .h-ppsit h3{font-size:clamp(1.3rem,1.75vw,1.65rem);font-weight:300;line-height:1.28;letter-spacing:-.015em;
  padding-top:1rem;border-top:1px solid var(--rule)}
.hyb .h-ppsit p{font-size:.95rem}

/* PRIVREDNO · Kako počinje saradnja + Šta pripremiti */
.hyb .h-first-grid{grid-template-columns:minmax(0,1fr);row-gap:clamp(3.5rem,6vw,5.5rem)}
.hyb .h-first h2{font-size:clamp(2.4rem,4.6vw,4.4rem);line-height:1;letter-spacing:-.03em;margin-bottom:clamp(1.6rem,3vw,2.4rem)}
.hyb .h-first .start{font-size:clamp(1.2rem,1.7vw,1.55rem);font-weight:300;line-height:1.45;letter-spacing:-.01em;max-width:46ch;
  padding-left:clamp(0rem,8vw,9rem);margin-bottom:clamp(3rem,5vw,4.5rem)}
/* the preparation list leaves its box: label + headline on the left, numbered list on the right */
.hyb .h-sheet{background:none;border:0;padding:0;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:0 clamp(2rem,5vw,6rem);
  border-top:1px solid var(--ink);padding-top:1.4rem}
.hyb .h-sheet .label{grid-column:1;grid-row:1;margin:0}
.hyb .h-sheet h3{grid-column:1;grid-row:2;font-size:clamp(1.8rem,2.8vw,2.6rem);line-height:1.05;letter-spacing:-.025em;margin:.9rem 0 0;align-self:start}
.hyb .h-sheet ul{grid-column:2;grid-row:1/span 3;list-style:none;counter-reset:prep;margin:0;padding:0;font-size:1.02rem;color:var(--ink)}
.hyb .h-sheet li{counter-increment:prep;display:grid;grid-template-columns:3rem minmax(0,1fr);gap:.5rem;margin:0;padding:1rem 0;border-bottom:1px solid var(--rule)}
.hyb .h-sheet li:first-child{padding-top:0}
.hyb .h-sheet li::before{content:counter(prep,decimal-leading-zero);color:var(--h-terra);font-size:.8125rem;padding-top:.2rem;font-variant-numeric:tabular-nums}
.hyb .h-sheet > a{grid-column:2;margin-top:1.6rem;justify-self:start}

/* ================================================================ PRIVREDNO · typography & spacing only */
.hyb .h-toc{gap:0 1.8rem;margin-top:2.8rem;padding-top:1.1rem;border-top:1px solid var(--rule-dark)}
.hyb .h-toc a{border:0;border-radius:0;padding:.35rem 0;color:var(--fg-mid);border-bottom:1px solid transparent;
  transition:color .25s var(--h-ease),border-color .25s var(--h-ease)}
.hyb .h-toc a:hover,.hyb .h-toc a:focus-visible{color:var(--fg);border-bottom-color:var(--h-terra-on-dark)}
.hyb .h-support-grid h2{font-size:clamp(2.2rem,4vw,3.9rem);line-height:1.02;letter-spacing:-.03em}
.hyb .h-support-grid li{padding:1.3rem 0}
.hyb .h-support-grid li b{font-weight:400;font-size:1.18rem;letter-spacing:-.01em}
.hyb .h-faq h2{font-size:clamp(2.2rem,3.8vw,3.6rem);line-height:1.02;letter-spacing:-.028em}
.hyb .h-faq .faq h3{font-weight:400;font-size:1.22rem;letter-spacing:-.01em}
.hyb .h-faq .faq > div{padding:1.7rem 0}

/* ================================================================ responsive */
@media (max-width:899px){
  /* desktop polish selectors outrank R03's mobile reset: collapse every polished grid explicitly */
  .hyb .h-selena-grid,.hyb .h-abhead-grid,.hyb .h-bio-grid,.hyb .h-areas-grid,.hyb .h-work-grid{grid-template-columns:minmax(0,1fr)}
  .hyb .h-selena-text h2{max-width:none}
  .hyb .h-selena{padding-top:4rem}
  .hyb .h-selena-text{padding-top:0}
  .hyb .h-selena-text > p,.hyb .h-abhead .lead,.hyb .h-first .start{padding-left:0}
  .hyb .h-selena-text > .more{margin-left:0}
  .hyb .h-portrait--home{margin-top:0;max-width:30rem}
  .hyb .h-portrait--about{max-width:30rem}
  .hyb .h-facts--side{margin:0 0 3rem;align-self:start}
  .hyb .h-portrait figcaption{height:auto;padding-bottom:1.5rem;display:block}
  .hyb .h-portrait figcaption small{display:block;text-align:left;margin-top:.3rem}
  .hyb .h-facts--side > div{grid-template-columns:minmax(0,1fr);gap:.25rem}
  .hyb .h-bio-grid > .h-bio-body{grid-column:1}
  .hyb .h-areas-list ol > li{grid-template-columns:3.4rem minmax(0,1fr)}
  .hyb .h-areas-list .num{font-size:2.1rem}
  .hyb .h-areas-list .row{grid-template-columns:minmax(0,1fr);gap:.55rem}
  .hyb .h-areas-list .row p{grid-column:1}
  .hyb .h-areas-list .secondary{padding-left:0}
  .hyb .h-work-head{display:block}
  .hyb .h-work-links{grid-column:1;grid-row:auto;justify-self:start;margin-top:1.6rem}
  .hyb .h-work-grid > .steps,.hyb .h-first .steps{grid-template-columns:minmax(0,1fr);row-gap:2.6rem}
  .hyb .h-work-grid > .steps > div:nth-child(n),.hyb .h-first .steps > div:nth-child(n){margin-top:0}
  .hyb .h-work-grid > .steps > div,.hyb .h-first .steps > div{display:grid;grid-template-columns:5.2rem minmax(0,1fr);column-gap:1rem}
  .hyb .h-work-grid .steps .k,.hyb .h-first .steps .k{grid-row:1/span 2;font-size:3.6rem;margin:0}
  .hyb .h-work-grid .steps h3,.hyb .h-first .steps h3{border-top:0;padding-top:.2rem}
  .hyb .h-work-grid .steps > div p,.hyb .h-first .steps > div p{grid-column:2}
  .hyb .h-ppsit ol{row-gap:3rem}
  .hyb .h-sheet{grid-template-columns:minmax(0,1fr)}
  .hyb .h-sheet ul,.hyb .h-sheet > a{grid-column:1;grid-row:auto}
  .hyb .h-sheet h3{margin-bottom:1.6rem}
  .hyb .h-sheet li{grid-template-columns:2.4rem minmax(0,1fr)}
  .hyb .h-toc{gap:0 1.3rem}
}
@media (prefers-reduced-motion:reduce){
  .hyb .h-areas-list .num,.hyb .h-sit i,.hyb .h-abareas i,.hyb .h-toc a{transition:none}
}