/* ==========================================================================
   Yours & Ours — stylesheet
   Based on the Figma file "Y-O PAGE". Brand colors, fonts and components
   come from the design; the type scale, spacing and states are rounded
   to web conventions. See prototype/styleguide.html for every style in use.

   This file is the single design system: the WordPress theme loads it and
   the static prototype links to it. Fonts are in fonts.css (self-hosted).

   Fluid sizes use clamp(min, …, max): min at 360px viewport, max at 1440px.

   Breakpoints (mobile first; media queries can't use variables, so use
   exactly these values):
     sm  640px   header: mobile menu below this (max-width: 639px)
     md  900px   two-column layouts (.split, hero, project rows, services)
     lg 1100px   3–4 column grids, statement band

   1. Tokens          6. Lists & quotes     11. Header / nav
   2. Base            7. Buttons            12. Page sections
   3. Typography      8. Forms              13. Utilities
   4. Layout          9. Arrows & icons
   5. Sections       10. Notch             14. Motion (reveal on scroll)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand colors */
  --yo-green: #435644;
  --yo-yellow: #f8c662;
  --yo-cream: #ffe7b7;
  --yo-sand: #f5f2e9;
  --yo-white: #ffffff;
  --yo-error: #b42318;

  /* Semantic colors */
  --color-text: var(--yo-green);
  --color-bg: var(--yo-white);
  --color-accent: var(--yo-yellow);
  --color-border: color-mix(in srgb, var(--yo-green) 22%, transparent);
  --color-muted: color-mix(in srgb, var(--yo-green) 72%, var(--yo-white));

  /* Font families */
  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;

  /* Font sizes */
  --fs-display: clamp(3.25rem, 2.208rem + 4.63vw, 6.375rem);    /* 52 → 102 */
  --fs-h1: clamp(2.5rem, 1.917rem + 2.593vw, 4.25rem);          /* 40 → 68 */
  --fs-h2: clamp(2rem, 1.667rem + 1.481vw, 3rem);               /* 32 → 48 */
  --fs-h3: clamp(1.625rem, 1.5rem + 0.556vw, 2rem);             /* 26 → 32 */
  --fs-h4: clamp(1.3125rem, 1.25rem + 0.278vw, 1.5rem);         /* 21 → 24 */
  --fs-h5: clamp(1.125rem, 1.083rem + 0.185vw, 1.25rem);        /* 18 → 20 */
  --fs-h6: clamp(1rem, 0.958rem + 0.185vw, 1.125rem);           /* 16 → 18 */
  --fs-lead: clamp(1.25rem, 1.083rem + 0.741vw, 1.75rem);       /* 20 → 28 */
  --fs-lg: clamp(1rem, 0.917rem + 0.37vw, 1.25rem);             /* 16 → 20 */
  --fs-base: clamp(0.875rem, 0.833rem + 0.185vw, 1rem);         /* 14 → 16 */
  --fs-sm: 0.875rem;                                            /* 14 */
  --fs-xs: 0.75rem;                                             /* 12 */
  --fs-eyebrow: clamp(0.875rem, 0.792rem + 0.37vw, 1.125rem);   /* 14 → 18 */
  --fs-feature: clamp(1.5rem, 1.354rem + 0.648vw, 1.9375rem);   /* 24 → 31 */

  /* Line heights */
  --lh-none: 1;
  --lh-tight: 1.05;    /* display, h1 */
  --lh-snug: 1.1;      /* h2, h3 */
  --lh-heading: 1.25;  /* h4–h6, lead */
  --lh-body: 1.5;      /* paragraphs, lists */

  /* Font weights (Bricolage Grotesque is variable 200–800) */
  --fw-extralight: 200;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* Optical size axis for Bricolage Grotesque */
  --opsz-display: "opsz" 96;
  --opsz-heading: "opsz" 60;
  --opsz-text: "opsz" 14;

  /* Letter spacing */
  --ls-tight: -0.01em;
  --ls-wide: 0.1em;

  /* Spacing scale */
  --space-1: 0.25rem;   /* 4 */
  --space-2: 0.5rem;    /* 8 */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.5rem;    /* 24 */
  --space-6: 2rem;      /* 32 */
  --space-7: 3rem;      /* 48 */
  --space-8: 4rem;      /* 64 */
  --space-9: 6rem;      /* 96 */
  --space-10: 8rem;     /* 128 */

  /* Section padding (block) */
  --section-pad-sm: clamp(3rem, 2.333rem + 2.963vw, 5rem);      /* 48 → 80 */
  --section-pad-md: clamp(4rem, 1.833rem + 9.63vw, 10.5rem);    /* 64 → 168 */
  --section-pad-lg: clamp(5rem, 1.667rem + 14.815vw, 15rem);    /* 80 → 240 */

  /* Layout */
  --container: 1320px;
  --container-narrow: 720px;
  --container-wide: 1440px;
  --gutter: clamp(1rem, 4vw, 2rem);
  --container-left: max(var(--gutter), (100% - var(--container)) / 2);

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-pill: 999px;

  /* Borders & motion */
  --border-width: 2px;
  --underline: 3px;
  --transition: 0.2s ease;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);   /* fast start, soft landing */
  --reveal-distance: 48px;                      /* reveal on scroll: rise */
  --reveal-duration: 0.8s;
  --reveal-stagger: 80ms;                       /* cascade step between items entering together */

  /* Arrow (→) as a mask shape — same as assets/icons/arrow-*.svg; colour it with background */
  --arrow-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 47.63 32.75' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 16.375H45.63'/%3E%3Cpath d='M31.087 2L45.63 16.375L31.087 30.75'/%3E%3C/svg%3E");

  /* Section notch (speech-bubble tail) — same shape as assets/icons/notch.svg (87 × 54.8) */
  --notch-size: clamp(3.5rem, 2.854rem + 2.87vw, 5.4375rem);   /* width 56 → 87; height follows the shape */
  --notch-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 87 54.808'%3E%3Cpath d='M0 47.5V0H87C64.5 15.8333 18 48.4 12 52C4.5 56.5 0 56 0 47.5Z'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Site pages: the page background is the header green. Safari on iPhone (26+)
   tints the status bar from a fixed element at the top, otherwise from the
   body background — so the bar is green from the start, not only once the
   compact header is pinned. Every section paints its own colour on top; the
   overscroll areas above the header and below the footer match too. */
html:has(> body > .site-header--sticky),
body:has(> .site-header--sticky) {
  background: var(--yo-green);
}

/* Domov: yellow header (merges with the yellow hero) → yellow behind it too */
html:has(> body > .site-header--yellow.site-header--sticky),
body:has(> .site-header--yellow.site-header--sticky) {
  background: var(--yo-yellow);
}

img,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

:focus-visible {
  outline: 3px solid var(--yo-yellow);
  outline-offset: 3px;
}

/* Yellow outline disappears on yellow — switch to green there */
.section--yellow :focus-visible,
.site-header--yellow :focus-visible {
  outline-color: var(--yo-green);
}

::selection {
  background: var(--yo-yellow);
  color: var(--yo-green);
}

/* --------------------------------------------------------------------------
   3. Typography
   Heading classes (.h1–.h6) let you change the look without changing
   the semantic level.
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-variation-settings: var(--opsz-heading);
  text-wrap: balance;
}

.display {
  font-size: var(--fs-display);
  line-height: var(--lh-none);
  letter-spacing: var(--ls-tight);
  font-variation-settings: var(--opsz-display);
}

h1, .h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  font-variation-settings: var(--opsz-display);
}

h2, .h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
}

h3, .h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
}

h4, .h4 {
  font-size: var(--fs-h4);
  line-height: var(--lh-heading);
  font-weight: var(--fw-bold);
  font-variation-settings: var(--opsz-text);
}

h5, .h5 {
  font-size: var(--fs-h5);
  line-height: var(--lh-heading);
  font-weight: var(--fw-bold);
  font-variation-settings: var(--opsz-text);
}

h6, .h6 {
  font-size: var(--fs-h6);
  line-height: var(--lh-heading);
  font-weight: var(--fw-bold);
  font-variation-settings: var(--opsz-text);
}

p {
  margin: 0 0 1em;
}

p:last-child {
  margin-bottom: 0;
}

.text-lg {
  font-size: var(--fs-lg);
  line-height: var(--lh-body);
}

small,
.text-sm {
  font-size: var(--fs-sm);
  line-height: 1.45;
}

.text-xs,
figcaption {
  font-size: var(--fs-xs);
  line-height: 1.4;
  letter-spacing: 0.01em;
}

.text-muted {
  color: var(--color-muted);
}

strong,
b {
  font-weight: var(--fw-bold);
}

/* Lead — Bricolage intro line under a hero heading */
.lead {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  font-weight: var(--fw-extrabold);
  font-variation-settings: var(--opsz-display);
  line-height: var(--lh-heading);
}

.lead--light {
  font-weight: var(--fw-light);
  font-variation-settings: var(--opsz-text);
}

/* Statement — large two-tone quote-style text on green */
.statement {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-variation-settings: var(--opsz-text);
  line-height: var(--lh-tight);
}

.statement--strong {
  font-weight: var(--fw-semibold);
  color: var(--yo-yellow);
}

.statement--light {
  font-weight: var(--fw-extralight);
}

/* Yellow text fails contrast on light backgrounds (1.6:1) — use green there */
.section--white .statement--strong,
.section--sand .statement--strong {
  color: var(--yo-green);
}

.statement + .statement {
  margin-top: var(--space-4);
}

/* Eyebrow — small uppercase label above a heading */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin: 0 0 var(--space-5);
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-regular);
  font-variation-settings: var(--opsz-text);
  line-height: var(--lh-none);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.eyebrow__mark {
  color: var(--yo-yellow);
  font-size: 2.1em;
  line-height: 0.5;
  letter-spacing: 0;
}

/* Links */
a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: text-decoration-color var(--transition), color var(--transition);
}

a:hover {
  text-decoration-color: var(--yo-yellow);
  text-decoration-thickness: 2px;
}

/* Contact block */
.contact-text {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-light);
  font-variation-settings: var(--opsz-text);
  line-height: 1.4;
}

.contact-text a {
  text-decoration: none;
}

.contact-text a:hover {
  text-decoration: underline;
  text-decoration-color: var(--yo-yellow);
}

/* Readable measure for running text */
.body-text {
  max-width: 470px;
}

.body-text--narrow {
  max-width: 435px;
}

/* Prose — long-form content (e.g. WordPress post body) */
.prose {
  max-width: 68ch;
}

.prose > * + * {
  margin-top: 1em;
}

.prose > * {
  margin-bottom: 0;
}

.prose :is(h2, h3, h4) {
  margin-top: 1.6em;
}

.prose :is(h2, h3, h4) + * {
  margin-top: 0.6em;
}

.prose a {
  font-weight: var(--fw-semibold);
}

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */
.container {
  width: min(var(--container), 100% - 2 * var(--gutter));
  margin-inline: auto;
}

.container--narrow { width: min(var(--container-narrow), 100% - 2 * var(--gutter)); }
.container--wide   { width: min(var(--container-wide), 100% - 2 * var(--gutter)); }

.split {
  display: grid;
  gap: var(--space-7);
}

@media (min-width: 900px) {
  .split {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }
}

/* Vertical rhythm between siblings: set --stack-gap to change it */
.stack > * + * {
  margin-top: var(--stack-gap, var(--space-5));
}

/* --------------------------------------------------------------------------
   5. Sections
   -------------------------------------------------------------------------- */
.section {
  position: relative;
  padding-block: var(--section-pad-md);
  background: var(--section-bg, var(--yo-white));
  color: var(--section-fg, var(--yo-green));
}

.section--sm { padding-block: var(--section-pad-sm); }
.section--lg { padding-block: var(--section-pad-lg); }
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }

/* Color themes — also usable on any panel or card */
/* On green, borders and muted text switch to light tints */
.section--green {
  --color-border: color-mix(in srgb, var(--yo-white) 25%, transparent);
  --color-muted: color-mix(in srgb, var(--yo-white) 72%, var(--yo-green));
}

.section--white  { --section-bg: var(--yo-white); }
.section--sand   { --section-bg: var(--yo-sand); }
.section--yellow { --section-bg: var(--yo-yellow); }
.section--green  { --section-bg: var(--yo-green); --section-fg: var(--yo-white); }

.section--white,
.section--sand,
.section--yellow,
.section--green {
  background: var(--section-bg);
  color: var(--section-fg, var(--yo-green));
}

/* --------------------------------------------------------------------------
   6. Lists & quotes
   -------------------------------------------------------------------------- */
ul,
ol {
  margin: 0 0 1em;
  padding-inline-start: 1.5em;
}

li + li {
  margin-top: var(--space-2);
}

li::marker {
  color: var(--yo-green);
}

.list-plain {
  margin: 0;
  padding: 0;
  list-style: none;
}

.list-plain li + li {
  margin-top: 0;
}

.list-bullets {
  margin: 0;
  padding-inline-start: 1.5rem;
  list-style: disc;
}

/* Arrow list — "→ Poslovno." */
.feature-list {
  display: grid;
  gap: clamp(2rem, 1rem + 3vw, 4.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.feature-list li {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-feature);
  font-weight: var(--fw-bold);
  font-variation-settings: var(--opsz-text);
  line-height: var(--lh-none);
}

.feature-list img {
  flex: none;
}

blockquote {
  margin: 0;
  padding-inline-start: var(--space-5);
  border-inline-start: 4px solid var(--yo-yellow);
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  font-weight: var(--fw-light);
  font-variation-settings: var(--opsz-text);
  line-height: var(--lh-heading);
}

blockquote p {
  margin: 0;
  text-wrap: balance;   /* even line lengths, no lone last word */
}

blockquote cite {
  display: block;
  margin-top: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-style: normal;
  font-weight: var(--fw-bold);
}

hr {
  height: 1px;
  margin-block: var(--space-7);
  border: 0;
  background: var(--color-border);
}

/* --------------------------------------------------------------------------
   7. Buttons
   -------------------------------------------------------------------------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 48px;
  padding: 0.7em 1.6em;
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-pill);
  background: var(--yo-green);
  color: var(--yo-cream);
  font-family: var(--font-display);
  font-size: var(--fs-h6);
  font-weight: var(--fw-extrabold);
  font-variation-settings: var(--opsz-display);
  line-height: var(--lh-none);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}

.button:hover {
  background: var(--yo-yellow);
  color: var(--yo-green);
}

.button:active {
  translate: 0 1px;
}

/* Solid green on a yellow section (CTA): the default yellow hover would vanish
   into the background, so it turns white */
.section--yellow .button:not(.button--secondary, .button--light, .button--outline-light, .button--text):hover {
  background: var(--yo-white);
}

/* Secondary — outline on light backgrounds */
.button--secondary {
  border-color: var(--yo-green);
  background: transparent;
  color: var(--yo-green);
}

.button--secondary:hover {
  background: var(--yo-green);
  color: var(--yo-cream);
}

/* Light — solid, for green backgrounds */
.button--light {
  background: var(--yo-yellow);
  color: var(--yo-green);
}

.button--light:hover {
  background: var(--yo-cream);
  color: var(--yo-green);
}

/* Outline light — outline, for green backgrounds */
.button--outline-light {
  border-color: var(--yo-cream);
  background: transparent;
  color: var(--yo-cream);
}

.button--outline-light:hover {
  background: var(--yo-cream);
  color: var(--yo-green);
}

/* Text — no box; for low-emphasis actions */
.button--text {
  min-height: 44px;
  padding-inline: 0;
  border: 0;
  background: none;
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--yo-yellow);
  text-decoration-thickness: var(--underline);
  text-underline-offset: 0.35em;
}

.button--text:hover {
  background: none;
  color: inherit;
  text-decoration-color: currentColor;
}

/* Sizes */
.button--sm {
  min-height: 44px;
  padding: 0.55em 1.25em;
  font-size: var(--fs-base);
}

.button--lg {
  min-height: 56px;
  padding: 0.65em 1.8em;
  font-size: clamp(1.25rem, 1.167rem + 0.37vw, 1.5rem);   /* 20 → 24 */
}

.button--block {
  display: flex;
  width: 100%;
}

/* Disabled */
.button:disabled,
.button[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.button__icon {
  width: 1.25em;
  height: auto;
  flex: none;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  margin-top: clamp(3rem, 2rem + 3vw, 5rem);
}

/* --------------------------------------------------------------------------
   8. Forms
   -------------------------------------------------------------------------- */
.field {
  display: grid;
  gap: var(--space-2);
}

.field + .field {
  margin-top: var(--space-5);
}

.field > .button {
  justify-self: start;
}

label,
.label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  line-height: 1.3;
}

.input,
input:is([type="text"], [type="email"], [type="tel"], [type="url"], [type="search"], [type="password"], [type="number"]),
select,
textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 1rem;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--yo-white);
  color: var(--yo-green);
  font: inherit;
  font-size: 1rem;   /* 16px: smaller makes iPhone Safari zoom in on focus */
  line-height: 1.4;
  transition: border-color var(--transition), box-shadow var(--transition);
}

textarea {
  min-height: 8rem;
  resize: vertical;
}

select {
  appearance: none;
  padding-inline-end: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1.5L7 7.5L13 1.5' stroke='%23435644' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
}

::placeholder {
  color: var(--color-muted);
  opacity: 1;
}

.input:hover,
input:hover,
select:hover,
textarea:hover {
  border-color: color-mix(in srgb, var(--yo-green) 45%, transparent);
}

.input:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  border-color: var(--yo-green);
  outline: none;
  box-shadow: 0 0 0 3px var(--yo-yellow);
}

input:is([type="checkbox"], [type="radio"]) {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  accent-color: var(--yo-green);
}

.check {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
}

.field__hint {
  font-size: var(--fs-sm);
  color: var(--color-muted);
}

.field--error :is(input, select, textarea) {
  border-color: var(--yo-error);
}

.field--error .field__hint {
  color: var(--yo-error);
}

/* --------------------------------------------------------------------------
   9. Arrows & icons
   Arrow SVGs point right; .arrow--down rotates them.
   Keep the SVG files' width/height attributes on the <img>.
   -------------------------------------------------------------------------- */
.arrow {
  display: inline-block;
}

.arrow--down {
  transform: rotate(90deg);
  transform-origin: center;
  margin-block: 7.44px;   /* swaps the footprint to match the rotated arrow */
  margin-inline: -7.44px;
}

a.arrow {
  transition: translate var(--transition);
}

a.arrow:hover {
  translate: 0 4px;
}

/* --------------------------------------------------------------------------
   10. Notch (speech-bubble tail)
   Hangs below an element in that element's colour (--section-bg).

     on / off      .has-notch adds it; leave it out (or add .notch--off) for none
     --notch-x     0–100: position across the content width
                   (0 = left edge of the content, 100 = right edge)
     --notch-size  width; the height follows the shape (default fluid 56 → 87px)

   <section class="section section--sand has-notch" style="--notch-x: 78">
   Both properties can also be changed per breakpoint in CSS.
   -------------------------------------------------------------------------- */
.has-notch {
  position: relative;
}

.has-notch::after {
  --_content: min(var(--container), 100% - 2 * var(--gutter));
  content: "";
  position: absolute;
  z-index: 2;
  top: calc(100% - 1px);   /* overlaps the section by 1px: no hairline gap from anti-aliasing */
  left: calc(var(--container-left) + (var(--_content) - var(--notch-size)) * var(--notch-x, 0) / 100);
  width: var(--notch-size);
  aspect-ratio: 87 / 54.808;
  background: var(--section-bg);
  -webkit-mask: var(--notch-shape) no-repeat 0 0 / 100% 100%;
  mask: var(--notch-shape) no-repeat 0 0 / 100% 100%;
  pointer-events: none;
}

.notch--off::after {
  content: none;
}

/* --------------------------------------------------------------------------
   11. Site header / nav
   -------------------------------------------------------------------------- */
.site-header {
  --header-pad: clamp(0.75rem, 0.583rem + 0.741vw, 1.25rem);    /* 12 → 20 */
  --header-logo: clamp(64px, 54px + 2.778vw, 94px);              /* 64 → 94 */
  position: relative;
  background: var(--section-bg, transparent);
  color: var(--section-fg, var(--yo-green));
}

.site-header--sand   { --section-bg: var(--yo-sand); }
.site-header--yellow { --section-bg: var(--yo-yellow); }
.site-header--green  { --section-bg: var(--yo-green); --section-fg: var(--yo-sand); }

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4) var(--space-7);
  padding-block: var(--header-pad);
  transition: padding var(--transition);
}

.site-header__logo img {
  width: var(--header-logo);
  aspect-ratio: 1;
  transition: width var(--transition);
}

/* Sticky header, "partially persistent": at the top it is part of the page
   (full size, scrolls away); once scrolled past it waits above the viewport in
   its compact size and slides down when the visitor scrolls up a bit. States
   (.is-detached, .is-visible, .is-compact) are set by assets/js/site.js.
   The first section in <main> reserves the full header height (--header-h, measured by site.js;
   the values below are fallbacks: one row on desktop, two on phones). */
:root {
  --header-h: calc(2 * clamp(0.75rem, 0.583rem + 0.741vw, 1.25rem) + clamp(64px, 54px + 2.778vw, 94px));
}

@media (max-width: 639px) {
  :root {
    --header-h: calc(2 * clamp(0.75rem, 0.583rem + 0.741vw, 1.25rem) + 64px + var(--space-4) + 1.75rem);
  }

  /* With JS the links move into the overlay menu: one row (logo + button) */
  :root.js {
    --header-h: calc(2 * clamp(0.75rem, 0.583rem + 0.741vw, 1.25rem) + 64px);
  }
}

.site-header--sticky {
  position: absolute;
  inset: 0 0 auto;
  z-index: 50;
}

/* Where supported (Safari 26+, Chrome/Edge): at the top the full header is
   position:fixed from the start, and a scroll-driven animation moves it up
   exactly as far as the page scrolls — it still scrolls away with the page
   (on the compositor, no lag), but iPhone Safari sees a fixed header at the
   top and draws a solid green status bar instead of its tinted glass gradient.
   --header-extent (header + notch) is measured by site.js. Other browsers keep
   the absolute header above. */
@supports (animation-timeline: scroll()) {
  .site-header--sticky:not(.is-detached):not(.is-menu-open):not(.is-menu-closing) {
    position: fixed;
    animation: header-scroll-away linear both;
    animation-timeline: scroll(root block);
    animation-range: 0 var(--header-extent, 200px);
  }
}

@keyframes header-scroll-away {
  to { transform: translateY(calc(-1 * var(--header-extent, 200px))); }
}

.site-header--sticky.is-detached {
  position: fixed;
  transform: translateY(-100%);
}

/* "none", not translateY(0): any transform would trap the fixed mobile menu inside the header.
   .is-menu-closing (site.js) keeps this until the curtain has rolled back up. */
.site-header--sticky.is-detached.is-visible,
.site-header--sticky.is-menu-open,
.site-header--sticky.is-menu-closing {
  transform: none;
}

.site-header--sticky.is-menu-open,
.site-header--sticky.is-menu-closing {
  position: fixed;
}

.site-header--sticky.has-slide {
  transition: transform 0.35s ease;   /* NN/g: 300–400 ms slide */
}

/* The space reserved for the header belongs to the first section and is painted
   in its colour, so nothing white shows while the header resizes over it. */
.site-header--sticky + main > :first-child {
  border-top: var(--header-h) solid var(--section-bg, var(--yo-white));
}

/* Compact state while detached (class set by assets/js/site.js) */
.site-header.is-compact {
  --header-pad: clamp(0.625rem, 0.5rem + 0.556vw, 1rem);         /* 10 → 16 */
  --header-logo: clamp(48px, 42.667px + 1.481vw, 64px);           /* 48 → 64 */
}

/* Header notch: hidden while the header is detached (compact). Hiding is instant
   (it happens off screen); back at the top the shape slides down out of the
   header's bottom edge — the mask moves, the box stays put. */
.site-header:not(.is-detached)::after {
  transition: -webkit-mask-position 0.3s ease, mask-position 0.3s ease;
}

.site-header.is-compact::after {
  -webkit-mask-position: 0 calc(var(--notch-size) * -0.65);
  mask-position: 0 calc(var(--notch-size) * -0.65);
}

/* Anchor jumps land below the compact header */
html {
  scroll-padding-top: calc(96px + var(--space-4));   /* compact header (~96px at desktop) + 16 */
}

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) clamp(1.5rem, 4vw, var(--space-8));
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav li {
  margin: 0;
}

.nav a {
  position: relative;
  display: inline-block;
  padding-block: var(--space-1);
  font-family: var(--font-display);
  font-size: var(--fs-h5);
  font-weight: var(--fw-extrabold);
  font-variation-settings: var(--opsz-display);
  line-height: var(--lh-none);
  text-decoration: none;
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  height: var(--underline);
  background: var(--yo-yellow);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}

.nav a:hover::after,
.nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

/* On yellow, the yellow underline is invisible — use green */
.site-header--yellow .nav a::after {
  background: var(--yo-green);
}

/* Logged-in editors: keep the fixed header below the WordPress admin bar */
.admin-bar .site-header--sticky {
  top: var(--wp-admin--admin-bar--height, 32px);
}

/* On phones the admin bar scrolls away, so the detached header goes to the very top */
@media (max-width: 600px) {
  .admin-bar .site-header--sticky.is-detached {
    top: 0;
  }
}

/* Skip link — first focusable element, visible only when focused */
.skip-link {
  position: absolute;
  z-index: 100;
  top: var(--space-3);
  left: var(--gutter);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-pill);
  background: var(--yo-cream);   /* stands out on both the green and the yellow header */
  color: var(--yo-green);
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-variation-settings: var(--opsz-display);
  text-decoration: none;
  transform: translateY(calc(-100% - var(--space-5)));
}

.skip-link:focus {
  transform: none;
}

/* Mobile menu (below 640px, needs JS): burger button + full-screen overlay
   in the header colour. Open state: .is-menu-open on the header (site.js). */
.menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;                     /* touch target */
  height: 44px;
  margin-inline-end: -8px;         /* icon (28px) lines up with the content edge */
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}

/* Three lines: ::before (top), the span's own background (middle), ::after (bottom).
   Open: the middle line disappears and the outer lines turn into an X. */
.menu-toggle__icon {
  position: relative;
  width: 28px;
  height: 19px;
  background: linear-gradient(currentColor, currentColor) center / 100% var(--underline) no-repeat;
  transition: background-size var(--transition);
}

.menu-toggle__icon::before,
.menu-toggle__icon::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: var(--underline);
  border-radius: var(--underline);
  background: currentColor;
  transition: top var(--transition), transform var(--transition);
}

.menu-toggle__icon::before { top: 0; }
.menu-toggle__icon::after  { top: calc(100% - var(--underline)); }

.is-menu-open .menu-toggle__icon {
  background-size: 0 var(--underline);
}

.is-menu-open .menu-toggle__icon::before,
.is-menu-open .menu-toggle__icon::after {
  top: calc(50% - var(--underline) / 2);
}

.is-menu-open .menu-toggle__icon::before { transform: rotate(45deg); }
.is-menu-open .menu-toggle__icon::after  { transform: rotate(-45deg); }

.site-header__contact {
  display: none;
}

@media (max-width: 639px) {
  .js .menu-toggle {
    display: inline-flex;
    margin-inline-end: calc(var(--gutter) * 0.5 - 8px);   /* icon sits 1.5× the gutter from the edge (24px on phones) */
  }

  /* Logo and button stay above the overlay */
  .js .site-header__logo,
  .js .menu-toggle {
    position: relative;
    z-index: 1;
  }

  /* Opens like a curtain from the top (clip-path); closing rolls it back up.
     visibility switches off only after the roll-up, so links can't be tabbed to while closed. */
  .site-header {
    --menu-speed: 0.45s;   /* curtain (site.js reads it for .is-menu-closing) */
  }

  .js .site-header__menu {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    padding: var(--header-h) calc(var(--gutter) * 2) var(--space-7);   /* top: logo row; sides: 2× the page gutter */
    overflow-y: auto;
    background: var(--section-bg);
    clip-path: inset(0 0 100% 0);
    visibility: hidden;
    transition: clip-path var(--menu-speed) cubic-bezier(0.65, 0, 0.35, 1), visibility 0s linear var(--menu-speed);
  }

  .js .is-menu-open .site-header__menu {
    clip-path: inset(0);
    visibility: visible;
    transition: clip-path var(--menu-speed) cubic-bezier(0.65, 0, 0.35, 1), visibility 0s;
  }

  /* Links centred vertically between the logo row and the contact block */
  .js .site-header__menu nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: var(--space-6);   /* equal minimum space above and below the links */
  }

  .js .site-header__menu .nav {
    flex-direction: column;
    gap: var(--space-4);
  }

  .js .site-header__menu .nav a {
    font-size: var(--fs-h2);
  }

  .js .site-header__contact {
    display: block;
  }

  /* The notch would float over the open overlay */
  .site-header.is-menu-open::after,
  .site-header.is-menu-closing::after {
    opacity: 0;
  }
}

/* Page behind the open menu doesn't scroll */
html.has-menu-open {
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   12. Page sections (home)
   -------------------------------------------------------------------------- */

/* Hero */
.hero {
  padding-block: clamp(3rem, 2rem + 4vw, 4.5rem) clamp(4rem, 2rem + 6vw, 8rem);
}

/* Hero as the very first thing on the page (no header above it) */
body > main:first-child > .hero:first-child {
  padding-top: var(--section-pad-md);
}

.hero__grid {
  display: grid;
  gap: var(--space-7);
  align-items: start;
}

.hero__title {
  margin-bottom: var(--space-4);
}

.hero__copy .body-text,
.hero__copy .arrow {
  margin-top: var(--space-5);
}

.hero__mark {
  width: min(407px, 60vw);
  aspect-ratio: 1;
}

@media (min-width: 900px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr) auto;
    padding-inline-start: var(--space-6);
  }

  .hero__mark {
    width: clamp(260px, 28vw, 407px);
    margin-top: -26px;
  }
}

/* Hero with Brando(n) — the pigeon overlaps the logo mark and sits on the
   bottom edge of the section. The section has no bottom padding; the copy
   column carries it instead, and the visual column is aligned to the bottom.
   Percentages are relative to the mark width (pigeon 458 × 446 vs mark 403). */
.hero--brando {
  --hero-end: clamp(4rem, 2rem + 6vw, 8rem);   /* space below the copy (64 → 128) */
  padding-bottom: 0;
  overflow-x: clip;   /* the video's transparent margin may reach past the screen edge; clip sideways only (the notch below stays) */
}

.hero--brando .hero__copy {
  padding-bottom: var(--hero-end);
}

/* Mobile (stacked): Brando centred, directly under the arrow — no gap. The video
   box is centred on the logo mark (desktop keeps its offset to the left). */
@media (max-width: 899px) {
  .hero--brando .hero__grid {
    gap: 0;
  }

  .hero--brando .hero__copy {
    padding-bottom: 0;
  }

  /* block, not inline: no text-line descender space under the arrow */
  .hero--brando .hero__copy .arrow {
    display: block;
    width: fit-content;
  }

  .hero--brando .hero__visual {
    margin-inline: auto;
  }

  .hero--brando .hero__pigeon {
    margin-left: -14.45%;   /* (128.9% − 100%) / 2 */
  }

  /* No notch under the hero on mobile */
  .hero--brando.has-notch::after {
    content: none;
  }
}

/* Desktop (text and Brando side by side): the space above the headline is 90%
   of the space below the last line of copy (padding + the down arrow, ~68px). */
@media (min-width: 900px) {
  .hero--brando {
    padding-top: calc((var(--hero-end) + 4.25rem) * 0.9);
  }
}

/* Logo mark + Brando; everything inside scales with this width.
   Stacked layout (phones/tablets): max 340px, so tablets don't jump far above the
   desktop size (286px at 900px wide). */
.hero__visual {
  width: min(340px, 66vw);
}

.hero__visual .hero__mark {
  width: 100%;
  margin-top: 0;
}

/* Brando video (960×960, transparent, bird ~88% of the frame width): sized and
   placed relative to the logo mark's width so the bird sits on the hero's bottom
   edge and overlaps the circle like the earlier still image. */
.hero__pigeon {
  position: relative;
  width: 128.9%;
  max-width: none;
  aspect-ratio: 1;
  margin-top: -84.8%;   /* bird's head ≈ a quarter down the circle */
  margin-left: -17.6%;  /* frame starts left of the circle; the bird itself ≈ 9% left */
}

@media (min-width: 900px) {
  .hero__visual {
    align-self: end;
    width: clamp(286px, 30.8vw, 448px);
  }
}

/* Intro: feature list + studio copy */
.intro__copy .body-text {
  margin-top: var(--space-7);
}

.intro__copy .arrow {
  margin-top: var(--space-6);
}

@media (min-width: 900px) {
  .intro .split {
    grid-template-columns: 0.54fr 0.46fr;
    padding-inline-start: var(--space-6);
  }

  .intro .feature-list {
    padding-top: 62px;
  }
}

/* Statement band */
.statement-band__grid {
  display: grid;
  gap: var(--space-6);
}

.statement-band__icons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5) 33px;
}

.statement-band__icons img {
  flex: none;
}

@media (min-width: 1100px) {
  /* Icons beside the text */
  .statement-band__grid {
    grid-template-columns: max-content minmax(0, 757px);
    gap: var(--space-6);
    align-items: start;
  }

  .statement-band__icons {
    flex-wrap: nowrap;
    margin-top: -8px;
  }
}

/* Team */
.team .split {
  align-items: start;
}

.team__copy h2 {
  margin-bottom: var(--space-7);
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 288px));
  column-gap: var(--space-5);
  justify-content: end;
}

.photo-grid__col {
  display: grid;
  gap: var(--space-5);
  align-content: start;
}

.photo-grid__col:nth-child(2) {
  margin-top: 66px;
}

.photo-grid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Case studies */
.case-list {
  display: grid;
  gap: var(--space-6);
}

.case {
  display: grid;
  gap: var(--space-5);
}

.case__media img {
  width: 100%;
  aspect-ratio: 503 / 313;
  object-fit: cover;
}

.case__body h3 {
  margin-bottom: var(--space-5);
}

@media (min-width: 900px) {
  .case-list {
    max-width: 896px;
    margin-inline: auto;
  }

  .case {
    grid-template-columns: 503fr 364fr;
    column-gap: var(--space-6);
    align-items: start;
  }

  .case__body h3 {
    margin-top: var(--space-3);
  }
}

/* Contact */
.contact {
  min-height: clamp(360px, 45vw, 600px);
  display: grid;
  place-items: center;
}

/* --------------------------------------------------------------------------
   12b. Page components (Domov, Storitve, Studio, Sodelovanja)
   -------------------------------------------------------------------------- */

/* Meta label — small uppercase line (team roles) */
.meta {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  font-variation-settings: var(--opsz-text);
  line-height: 1.2;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

/* Short yellow rule above titles */
.rule {
  display: block;
  width: 48px;
  height: 3px;
  margin: 0;
  border: 0;
  background: var(--yo-yellow);
}

/* Photo placeholder — replace with <img> later. Set --ratio for the shape. */
.placeholder {
  display: grid;
  place-items: center;
  aspect-ratio: var(--ratio, 16 / 10);
  padding: var(--space-4);
  background: color-mix(in srgb, var(--yo-green) 10%, transparent);
  color: var(--color-muted);
  font-size: var(--fs-xs);
  line-height: 1.4;
  text-align: center;
}

.section--green .placeholder {
  background: color-mix(in srgb, var(--yo-white) 8%, transparent);
  color: inherit;
}

.placeholder--logo {
  width: 200px;
  aspect-ratio: 200 / 125;
  background: none;
  border: 1.5px dashed color-mix(in srgb, var(--yo-green) 40%, transparent);
  border-radius: var(--radius-sm);
}

/* Two-column splits with fixed maximum column widths (at 1440: 560 + 644) */
@media (min-width: 900px) {
  .split--narrow-wide {
    grid-template-columns: minmax(0, 560px) minmax(0, 644px);
    justify-content: space-between;
  }

  .split--wide-narrow {
    grid-template-columns: minmax(0, 644px) minmax(0, 560px);
    justify-content: space-between;
  }
}

/* Swap columns on desktop only — the first element in the HTML (e.g. text)
   stays first on mobile and for screen readers, but sits in the right column. */
@media (min-width: 900px) {
  .split--reverse > :first-child {
    order: 2;
  }
}

/* Sub-page intro (eyebrow + H1 + optional lead) */
.page-intro {
  padding-bottom: var(--section-pad-sm);
}

.page-intro h1 {
  max-width: 900px;
}

.page-intro__lead {
  max-width: 720px;
  margin-top: var(--space-6);
}

/* Domov: hero copy */
.hero__text {
  max-width: 560px;
}

/* Domov: Kdo smo */
.photo-grid--placeholders {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-6);
}

.photo-grid--placeholders .photo-grid__col {
  gap: var(--space-6);
}

.photo-grid--placeholders .placeholder {
  --ratio: 4 / 3;
}

/* Domov: Kdo smo — 7 portraits in 3 staggered columns (2 / 3 / 2) */
.team-mosaic {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: start;
}

.team-mosaic__col {
  display: grid;
  gap: var(--space-4);
}

/* Outer columns start lower than the middle one, by different amounts so the
   pattern feels less rigid. % = share of column width (half a 4:5 portrait = 62.5%). */
.team-mosaic__col:nth-child(1) {
  margin-top: 40%;
}

.team-mosaic__col:nth-child(3) {
  margin-top: 90%;
}

.team-mosaic__photo,
.team-card__photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

@media (min-width: 900px) {
  .team-mosaic,
  .team-mosaic__col {
    gap: var(--space-5);
  }
}

/* Domov: big decorative quotation mark in the statement band.
   The box is trimmed to the visible glyph (height + negative top margin),
   so spacing around it behaves like a normal element. */
.statement-band__quote {
  height: 0.42em;
  margin-top: -0.12em;
  font-family: var(--font-display);
  font-size: clamp(8rem, 5.333rem + 11.852vw, 16rem);   /* 128 → 256 */
  font-weight: var(--fw-extrabold);
  font-variation-settings: var(--opsz-display);
  line-height: 1;
  color: var(--yo-yellow);
  user-select: none;
}

/* Domov: statement band sub-copy */
.statement-band__sub {
  max-width: 757px;
  margin-top: var(--space-6);
}

/* Domov: Storitve teaser — linked list of service names */
.service-list {
  border-bottom: 1px solid var(--color-border);
}

.service-list li {
  margin: 0;
  border-top: 1px solid var(--color-border);
}

.service-list a {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-5);
  text-decoration: none;
}

.service-list__num {
  color: var(--color-muted);
}

.service-list__name {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  font-variation-settings: var(--opsz-text);
  line-height: var(--lh-heading);
}

.service-list__arrow {
  width: 32px;
  transition: translate var(--transition);
}

.service-list a:hover .service-list__name {
  text-decoration: underline;
  text-decoration-color: var(--yo-yellow);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

.service-list a:hover .service-list__arrow {
  translate: 6px 0;
}

/* Storitve: one service */
.service {
  display: grid;
  gap: var(--space-6);
  padding-block: var(--space-8);
  border-top: 1px solid var(--color-border);
}

.service__title {
  display: grid;
  gap: 20px;
  align-content: start;
}

.service__title .eyebrow {
  margin: 0;
}

.service__aside {
  margin-top: var(--space-5);
}

.service__aside .lead + .lead {
  margin-top: var(--space-2);
}

.service__body > * + * {
  margin-top: var(--space-5);
}

.service__body .h5 {
  margin-top: var(--space-6);
}

.service__closing {
  font-weight: var(--fw-bold);
}

@media (min-width: 900px) {
  .service {
    grid-template-columns: minmax(0, 520px) minmax(0, 644px);
    justify-content: space-between;
  }
}

/* Studio: team grid */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: var(--space-8) var(--space-6);
}

.team-card .placeholder {
  --ratio: 4 / 5;
}

.team-card__body {
  display: grid;
  gap: var(--space-4);
  padding-top: var(--space-5);
}

.team-card__name {
  display: grid;
  gap: var(--space-2);
}

.team-card__collab {
  font-size: var(--fs-sm);
}

@media (min-width: 1100px) {
  .team-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Sodelovanja v1: project card grid */
.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: var(--space-8) var(--space-6);
}

.project-card__body {
  display: grid;
  gap: var(--space-2);
  padding-top: 20px;
}

/* The whole card is clickable: the link sits on the name, its ::after covers the card */
.project-card {
  position: relative;
}

.project-card__link {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: var(--underline);
  text-underline-offset: 0.2em;
}

.project-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.project-card:hover .project-card__link,
.project-card__link:focus-visible {
  text-decoration-color: var(--yo-yellow);
}

.project-card__sub,
.project-row__sub {
  margin: 0;
  font-style: italic;
}

.project-card__tags {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--color-muted);
}

@media (min-width: 1100px) {
  .project-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* 4-up variant (Domov teaser) */
@media (min-width: 1100px) {
  .project-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Section heading block above a grid */
.section-head {
  margin-bottom: var(--space-8);
}

/* Sodelovanja v2: project row — photos left, name + services right */
.project-list {
  display: grid;
  gap: var(--space-9);
}

.project-row {
  display: grid;
  gap: var(--space-6);
}

.project-row__media {
  display: grid;
  gap: var(--space-4);
}

.project-row__info {
  display: grid;
  gap: var(--space-5);
  align-content: start;
}

.project-row__sub {
  font-size: var(--fs-base);   /* same size as the services list */
  color: var(--color-muted);
}

.project-row__services {
  font-size: var(--fs-base);
}

/* Services with the site's arrow as the bullet (same shape as assets/icons/arrow-*.svg),
   in yellow, sized with the text */
.project-row__services li {
  display: flex;
  align-items: center;
  gap: 0.6em;
}

.project-row__services li::before {
  content: "";
  flex: none;
  width: 0.85em;
  aspect-ratio: 47.63 / 32.75;
  background: var(--yo-yellow);
  -webkit-mask: var(--arrow-shape) no-repeat center / contain;
  mask: var(--arrow-shape) no-repeat center / contain;
}

@media (min-width: 900px) {
  .project-row {
    grid-template-columns: minmax(0, 680px) minmax(0, 560px);
    justify-content: space-between;
    align-items: start;
  }

  .project-row__info {
    padding-top: var(--space-2);
  }
}

/* Text link with arrow ("Poglej projekt →") */
.link-arrow {
  font-weight: var(--fw-bold);
  text-decoration-thickness: 2px;
  text-decoration-color: var(--yo-yellow);
}

.link-arrow:hover {
  text-decoration-color: currentColor;
}

/* Closing CTA ("Kaj želite premakniti?") */
/* The heading always breaks into two lines: room on the right of the left
   column side by side, a maximum width when the columns stack. */
.cta-head h2 {
  max-width: 8em;
}

@media (min-width: 900px) {
  .cta-head {
    padding-inline-end: 10%;
  }

  .cta-head h2 {
    max-width: none;
  }
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5) var(--space-6);
  margin-top: var(--space-7);
}

/* Footer */
.site-footer {
  padding-block: var(--section-pad-sm);
  background: var(--yo-green);
  color: var(--yo-white);
}

.site-footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

.site-footer .nav {
  gap: var(--space-3) var(--space-6);
}

/* Desktop: menu centred between the logo block and the social icons */
@media (min-width: 900px) {
  .site-footer__top {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }

  .site-footer__social {
    justify-self: end;
  }
}

/* Logo + location (plain text, no link) */
.site-footer__brand {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.site-footer__place {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--fs-base);
}

.site-footer__place svg {
  width: 20px;
  height: 20px;
  flex: none;
}

/* Social icons: 28px glyphs in 44px tap targets; yellow on hover */
.site-footer__social {
  display: flex;
  gap: var(--space-2);
  margin-inline: -8px;   /* (44 − 28) / 2: the icons, not their tap areas, line up with the content edges */
}

.site-footer__social a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--yo-white);
  transition: color var(--transition);
}

.site-footer__social a:hover {
  color: var(--yo-yellow);
}

.site-footer__social svg {
  width: 28px;
  height: 28px;
}

.site-footer__copy {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin: var(--space-7) 0 0;
  font-size: var(--fs-xs);
}

/* Politika zasebnosti: same size as the copyright, underlined; yellow on hover */
.site-footer__copy a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  transition: color var(--transition);
}

.site-footer__copy a:hover {
  color: var(--yo-yellow);
}

/* Real photos in the spots the prototype filled with .placeholder */
.project-photo {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

/* Project content rows (Sodelovanja, left column; template-parts/project-rows/).
   "Slike" row, fixed ratio: --n equal columns (1–3), images cropped to --ratio. */
.project-media {
  display: grid;
  grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr));
  gap: var(--space-4);
}

.project-media .project-photo {
  aspect-ratio: var(--ratio, 16 / 10);
}

/* Gallery gaps (images in a row, and between rows): 16px, phones 12px */
@media (max-width: 639px) {
  .project-row__media,
  .project-media {
    gap: var(--space-3);
  }
}

/* Dynamic: natural shapes, equal heights — each item grows by its aspect ratio (--r) */
.project-media--auto {
  display: flex;
  align-items: flex-start;
}

/* ×1000: if the grow values add up to less than 1 (e.g. a single portrait, 0.67),
   flexbox would only hand out that fraction of the row */
.project-media__item {
  flex: calc(var(--r, 1) * 1000) 1 0;
  min-width: 0;
}

/* Its own shape (--r = width / height, set on the item), so the space is
   reserved before a lazy image loads */
.project-media .project-photo--natural {
  aspect-ratio: var(--r, auto);
}

/* Vimeo row: still image + play button; the player replaces it on click (site.js) */
.video-embed {
  position: relative;
  aspect-ratio: var(--ratio, 16 / 9);
  overflow: hidden;
  background: var(--yo-green);
}

.video-embed > :is(button, iframe) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-embed__play {
  padding: 0;
  background: none;
  cursor: pointer;
}

.video-embed__play img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-embed__icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(56px, 48px + 2.2vw, 80px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--yo-yellow);
  translate: -50% -50%;
  transition: scale var(--transition);
}

.video-embed__icon::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--yo-green);
  /* play triangle, optically centred */
  clip-path: polygon(40% 30%, 40% 70%, 72% 50%);
}

.video-embed__play:hover .video-embed__icon,
.video-embed__play:focus-visible .video-embed__icon {
  scale: 1.08;
}

.project-row__logo {
  width: auto;
  max-width: 250px;   /* hard limit; actual size set per logo by yo_logo_size() */
  max-height: 200px;
  object-fit: contain;
  object-position: left center;
}

/* Generic text pages (page.php, e.g. Politika zasebnosti): quieter section headings */
.prose--page h2 {
  font-size: var(--fs-h4);
}

.prose--page h3 {
  font-size: var(--fs-h5);
}

/* Sub-headings chosen in the editor ("Naslov 3") inside a service look like .h5 */
.service__body .prose h3 {
  font-size: var(--fs-h5);
  line-height: var(--lh-heading);
  font-weight: var(--fw-bold);
  font-variation-settings: var(--opsz-text);
}

/* --------------------------------------------------------------------------
   13. Utilities
   -------------------------------------------------------------------------- */
.text-center { text-align: center; }
.text-balance { text-wrap: balance; }

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition: none !important;
  }
}

/* --------------------------------------------------------------------------
   14. Motion (reveal on scroll)
   Elements with [data-reveal] fade in and rise once: on screen at load right
   away, the rest the first time they scroll into view (site.js). Items revealed
   together cascade in document order: site.js sets --reveal-i (0, 1, 2…), the
   step is --reveal-stagger — override it on a parent, e.g.
   style="--reveal-stagger: 50ms".
   Hidden from the first frame only with JS (html.js) and without "reduce
   motion". Failsafe: if site.js never runs, everything shows after 3s.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal]:not(.is-revealed) {
    opacity: 0;
    translate: 0 var(--reveal-distance);
  }

  .js:not(.reveal-ready) [data-reveal]:not(.is-revealed) {
    animation: reveal-failsafe 0s 3s forwards;
  }

  /* A keyframe animation, not a transition: browsers skip transitions before
     a page's first frame, which is when cached pages run site.js. */
  [data-reveal].is-revealed {
    animation: reveal var(--reveal-duration) var(--ease-out) both;
    animation-delay: calc(var(--reveal-i, 0) * var(--reveal-stagger));
  }
}

@keyframes reveal {
  from {
    opacity: 0;
    translate: 0 var(--reveal-distance);
  }
}

@keyframes reveal-failsafe {
  to {
    opacity: 1;
    translate: none;
  }
}

@media print {
  .js [data-reveal] {
    opacity: 1 !important;
    translate: none !important;
  }
}