/* ============================================================================
   Talking Chair — css/talkingchair.css
   UNLAYERED on purpose: every Web Awesome 3.14.0 rule sits in @layer (kit styles/layers.css: wa-native, wa-base,
   wa-utilities, wa-color-palette, wa-color-variant, wa-theme, wa-theme-dimension, wa-theme-overrides), so this file,
   loaded after themes/default.css, utilities.css and native.css, wins regardless of specificity. Never add !important.
   Raw px only for 1 px hairlines and the arch's 4 px bottom corners.

   1  tokens          docs/review/proposed-tokens.css §1–3 verbatim; two changes (contract §1): brand-60 lowered to
                      #887665, and the comment fixes from report §4.1–4.2 / snippet 1
   2  band scopes     .band-paper .band-first (each re-declares the composite --wa-focus-ring)
   3  recipes         base behaviour, .band .band__inner(--narrow) .measure .lead .eyebrow(--quiet) .kicker .note
                      .skip-link, paragraph colour (proposed-tokens.css §4, corrected per contract §4: lead 38ch)
   4  layout          intro grid text, section head, "Prvi susret" paragraph
   5  header          .site-header .lockup .wordmark .tagline .site-nav
   6  hero + arch     report snippet 2 (flank variables, stacking below 64rem, .arch, picture inside wa-frame)
   7  cards + CTA     .service .booking .cta (report snippet 6, hover gated)
   8  about           .portrait
   9  contact/footer  .contact-details .site-footer
   10 placeholders    wa-icon / wa-copy-button :not(:defined)
   11 motion          reduced-motion-gated smooth scroll + colour transitions

   Every --wa-* name below exists in the kit (verified 2026-10-26 in styles/themes/default.css,
   styles/color/palettes/default.css + base.css, styles/utilities/variants.css, styles/utilities/size.css,
   styles/native.css of https://ka-p.webawesome.com/kit/f22f25e5e0cc48cc/webawesome@3.14.0/).
   --tc-* names are project tokens for concepts Web Awesome has no word for (letter-spacing, measure, section rhythm),
   the way Maeum uses --maeum-*.

   Contrast figures are WCAG 2.2 relative-luminance ratios, unrounded, computed with tc-work/tokens/scripts/scales.py.
   AA needs 4.5 for text under 24 px (18.66 px bold), 3.0 for larger text and for UI boundaries / focus indicators (1.4.11).
   The three light surfaces every pair is proven on:
     cream  #f7f5f0  page + service cards   (--wa-color-surface-default)
     paper  #ebe7e0  services band          (--wa-color-neutral-90 = surface-lowered)
     first  #e5ded5  "Prvi susret" band     (--wa-color-brand-90 = brand-fill-normal)
   ========================================================================== */

/* ---------- 1. Tokens (docs/review/proposed-tokens.css §1–3) ---------- */

/* 1.1 Colour tokens (light scheme only; the site has no dark mode).
   Selector list = the theme's light-scheme list in themes/default.css minus its four .wa-theme-default variants (same subset as Maeum). */
:where(:root),
.wa-light,
.wa-dark .wa-invert {
  /* -- brand = warm taupe. OKLCH hue 78° (tint 95) -> 61° (tint 05), chroma 0.009 -> 0.035 -> 0.012.
        Anchors verbatim from the draft: brand-90 = the "Prvi susret" band #e5ded5, brand-70 = --accent #b8a798.
        Lightness follows the kit's default-palette ladder (96/92/84/75/67/56/46/39/32/23/18) except where a
        theme consumer needs more contrast: 60 lowered 66.9 -> 57.8 (contract §1: focus ring >= 3.26:1 on all three
        surfaces), 50 lowered 56.4 -> 54.5 (white label 5:1). Consumers per themes/default.css. -- */
  --wa-color-brand-95: #f5f1eb; /* oklch(95.96% 0.0091 78.3) - brand-fill-quiet: hover/active bg of outlined|plain brand buttons (brand-40 on it 6.321) */
  --wa-color-brand-90: #e5ded5; /* oklch(90.36% 0.0144 74.4) - brand-fill-normal + brand-border-quiet; the "Prvi susret" band (draft #e5ded5 verbatim): ink 7.975, quiet 4.614, brand-40 5.331, brand-30 7.136, focus 3.26 */
  --wa-color-brand-80: #d3c7ba; /* oklch(83.59% 0.0223 69.7) - brand-border-normal; placeholder tint behind the arch sketch and the portrait (draft #d9d1c7 / #ded8cf lie between 80 and 90) */
  --wa-color-brand-70: #b8a798; /* oklch(73.88% 0.0290 63.8) - unused by the light theme; the draft's --accent verbatim, decorative only (2.137 on cream: never text, icons or borders) */
  --wa-color-brand-60: #887665; /* oklch(57.8% 0.0338 66.1) - brand-border-loud + --wa-color-focus (every focus ring): 3.99 cream, 3.53 paper, 3.26 first (1.4.11 >= 3). Contract §1: lowered from the report's #8e7c6b (3.674 / 3.248 / 3.001, one rounding from failing on the first band); the .cta overrides its border to ink anyway */
  --wa-color-brand-50: #7f6c5b; /* oklch(54.46% 0.0351 63.8) - brand-fill-loud (appearance=accent, --wa-form-control-activated-color) + core --wa-color-brand: white on it 5.002 */
  --wa-color-brand-40: #665546; /* oklch(46.22% 0.0325 63.3) - brand-on-quiet + --wa-color-text-link = eyebrows, "01 / PSIHOTERAPIJA" labels, links at 12-15 px: 6.527 cream, 5.771 paper, 5.331 first (draft eyebrow #8c7b6c: 3.732 / 3.299 / 3.048, fails) */
  --wa-color-brand-30: #514336; /* oklch(39.36% 0.0285 64.7) - brand-on-normal (filled|filled-outlined label): 7.136 on brand-90, 8.737 on cream */
  --wa-color-brand-20: #3b3127; /* oklch(32.09% 0.0223 66.9) - unused by the light theme (dark-mode fill-normal) */
  --wa-color-brand-10: #231c16; /* oklch(23.27% 0.0157 62.5) - unused by the light theme (dark-mode fill-quiet) */
  --wa-color-brand-05: #16110d; /* oklch(18.24% 0.0115 60.7) - unused by the light theme; free for a scrim or a dark band */
  --wa-color-brand: var(--wa-color-brand-50); /* core colour (the kit aliases it per hue; there is no taupe hue, so alias the tint directly) */
  --wa-color-brand-on: white; /* palettes/base.css rule: key tint 50 < 60 -> white; no --wa-color-brand-key exists, so state it literally */

  /* -- neutral = warm grey. Hue 91° (95) -> 53° (05), chroma <= 0.018. Anchors verbatim from the draft:
        neutral-90 = --paper #ebe7e0, neutral-80 = --line #d5cec4, neutral-30 = --ink #453d36.
        neutral-40 starts at the draft's --muted #736a61 (4.863 cream, but 4.299 paper and 3.972 first: FAILS AA
        for the services intro and the "Prvi susret" paragraph) and is lowered 3.5 L until >= 4.6 everywhere.
        neutral-60 lowered 66.9 -> 59.6 so --wa-form-control-border-color passes 3:1 on all three surfaces (unused on this page, see below). -- */
  --wa-color-neutral-95: #f4f2ec; /* oklch(96.10% 0.0083 91.5) - neutral-fill-quiet (outlined/plain neutral hover wash); between cream and paper */
  --wa-color-neutral-90: #ebe7e0; /* oklch(92.91% 0.0103 81.8) - neutral-fill-normal + neutral-border-quiet; = surface-lowered = the services band (draft --paper verbatim) */
  --wa-color-neutral-80: #d5cec4; /* oklch(85.42% 0.0157 77.1) - neutral-border-normal; = surface-border = every hairline (draft --line verbatim; decorative: 1.432 cream, 1.266 paper) */
  --wa-color-neutral-70: #b5ada3; /* oklch(75.14% 0.0168 73.6) - unused by the light theme */
  --wa-color-neutral-60: #877d74; /* oklch(59.60% 0.0182 64.5) - neutral-border-loud = --wa-form-control-border-color (input/select/textarea borders) and the default --wa-color-border-loud of outlined neutral buttons; unused on this page (no inputs, wa-copy-button has border: none, the .cta overrides --wa-color-border-loud to ink). Kept at 3:1 for future forms: 3.695 cream, 3.267 paper, 3.018 first */
  --wa-color-neutral-50: #7d746b; /* oklch(56.44% 0.0176 67.5) - unused by the light theme (placeholder colour reads gray-50) */
  --wa-color-neutral-40: #696057; /* oklch(49.48% 0.0182 67.4) - --wa-color-text-quiet + neutral-on-quiet = every paragraph, lead, note, brand-sub, footer: 5.650 cream, 4.995 paper, 4.614 first */
  --wa-color-neutral-30: #453d36; /* oklch(36.60% 0.0162 63.5) - neutral-on-normal; the draft's --ink verbatim, remapped below to --wa-color-text-normal: 9.765 cream, 8.633 paper, 7.975 first (AAA everywhere) */
  --wa-color-neutral-20: #38312b; /* oklch(31.86% 0.0145 62.9) - neutral-fill-loud (default/accent neutral button bg): white on it 12.786 */
  --wa-color-neutral-10: #221c18; /* oklch(23.20% 0.0121 55.7) - the theme's text-normal; overridden below because the draft's ink is lighter */
  --wa-color-neutral-05: #16110e; /* oklch(18.28% 0.0103 52.8) - overlay-modal + shadow colour source */
  --wa-color-neutral: var(--wa-color-neutral-40); /* core colour (gray core is tint 40 in the default palette) */
  --wa-color-neutral-on: white; /* key 40 < 60 -> white */

  /* -- surfaces: the theme hard-codes white for default/raised, so these MUST be overridden directly -- */
  --wa-color-surface-default: #f7f5f0; /* oklch(97.03% 0.0070 88.6) - page background AND the two service cards on the paper band (draft --cream verbatim); also form-control bg and the --wa-color-mix-active source */
  --wa-color-surface-raised: #fbfaf7;  /* lighter than the page: popovers, menus, dialogs only; unused on this page. The copy button's tooltip text is --wa-tooltip-content-color = --wa-color-surface-default (cream on ink 9.765) */
  --wa-color-surface-lowered: var(--wa-color-neutral-90); /* #ebe7e0 the services band (class on the band: background: var(--wa-color-surface-lowered)) */
  --wa-color-surface-border: var(--wa-color-neutral-80);  /* #d5cec4 hairlines: header bottom, section tops, contact rule, footer top. The theme's default (neutral-90 = paper) would vanish on cream */

  /* -- text roles. The draft sets headings, wordmark, buttons, "Lokacije" and the contact lines in ink and every
        paragraph in muted; the theme's text-normal (neutral-10) is darker than the ink, so remap it. -- */
  --wa-color-text-normal: var(--wa-color-neutral-30); /* ink */
  /* --wa-color-text-quiet keeps the theme's var(--wa-color-neutral-40) = the fixed muted; apply it to paragraphs with a recipe (section 3) */
  /* --wa-color-text-link keeps var(--wa-color-brand-40); --wa-color-focus keeps var(--wa-color-brand-60) */
  --tc-arch: #d9d1c7; /* hero arch fill (draft verbatim); SKETCH.arch in scripts/images.mjs must equal this: change both, then npm run images */
}

/* 1.2 Fluid root + type tokens */
/* 1 rem = 16 px @ 360 -> 17 px @ 1440 (slope 1/1080 px per px; Utopia maths). The draft is a fixed 16 px;
   the extra px at desktop keeps DM Sans comfortable in the 581 px About column (75 characters per line instead of 79).
   `rem` on <html> is the user's default size, so text-size preferences and zoom still scale everything. */
html {
  font-size: clamp(1rem, 0.9792rem + 0.0926vw, 1.0625rem);
}

/* Same selector list as the theme's font/space block, so the tokens apply inside .wa-invert bands too. */
:where(:root),
.wa-light,
.wa-dark,
.wa-invert {
  /* families (OFL 1.1, self-hosted, see css/fonts.css; the "... Fallback" faces are the metric-matched local fonts
     and must sit right after the web font or they are never matched) */
  --wa-font-family-heading: 'Playfair Display', 'Playfair Display Fallback', Georgia, 'Times New Roman', serif;
  --wa-font-family-longform: var(--wa-font-family-heading);
  --wa-font-family-body: 'DM Sans', 'DM Sans Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --wa-font-weight-heading: var(--wa-font-weight-normal);   /* 400: the draft's h1-h3 and wordmark are Playfair Regular (WA default is 600) */
  --wa-font-weight-longform: var(--wa-font-weight-normal);
  /* --wa-font-weight-action stays 500 for the kit; the CTA overrides it to 400 in §7 (the draft's button is regular: no
     draft rule uses 500, report §2 row 15). --wa-font-weight-bold (600: strong, eyebrows, "Lokacije") stays at the theme's
     value = the draft's DM Sans 600 */

  /* size ramp. --wa-font-size-m stays the theme's calc(1rem * var(--wa-font-size-scale)) = 16 -> 17 px (draft body 16).
     s and xs keep deriving: round(m / 1.125) = 14 -> 15 px, round(s / 1.125) = 12 -> 13 px.
     The draft's 10-13 px UI text moves up one step each: brand-sub 10 -> xs, eyebrows and "01 / PSIHOTERAPIJA" 11 -> xs,
     buttons 12 -> s (wa-size-s), footer 12 -> s, note 13 -> s, contact details 15 -> s at every width.
     Only the display steps are fluid; a clamp() inside the theme's round(calc()) for 4xl/5xl is valid (Maeum report §4.2). */
  --wa-font-size-l:   1.1875rem;                                  /* 19 -> 20.2 px: hero lead (draft 18), intro paragraphs (20), "Prvi susret" paragraph (19), h4 */
  --wa-font-size-xl:  clamp(1.625rem, 1.25rem + 1.2vw, 2rem);     /* 26 -> 34 px: h3 "Psihoterapija" / "Coaching" (draft fixed 34) */
  --wa-font-size-2xl: clamp(2rem, 1.25rem + 2.4vw, 2.875rem);     /* 32 -> 48.9 px: h2 (draft clamp(38px, 4.3vw, 64px)); keeps h1 : h2 = 1.3 like the draft's 92 : 64 = 1.44 at the top end */
  --wa-font-size-3xl: clamp(2.625rem, 1.5rem + 3.2vw, 3.75rem);   /* 42 -> 63.8 px: h1 (draft clamp(52px, 6.6vw, 92px)). 92 px x 8.17 em = 752 px: "Prostor za razgovor." wraps to THREE lines in the
                                                                     582 px hero column (client-draft-1440.png confirms); 63.8 px x 8.47 em = 540 px keeps the client's two-line <br> from 1024 px up */
  /* --wa-font-size-4xl / 5xl keep deriving from 3xl (unused by any element) */
  --wa-line-height-condensed: 1.15;   /* h1-h6 (draft 1.13). Playfair's content area is 1.333 em, so 1.13 already lets descenders touch the next line's ascenders */
  --wa-line-height-normal: 1.7;       /* body 16-17 px (draft 1.75) -> 27-29 px line pitch */

  /* project tokens: concepts Web Awesome has no token for */
  --tc-line-height-lead: 1.6;          /* lead/intro at 19-20 px (draft 1.8 at 18 px = 32.4 px pitch; 1.6 x 20 = 32 px) */
  --tc-tracking-display: -0.03em;      /* h1-h3 + wordmark (draft -0.045em / -0.035em). Looser because the sizes are smaller than the draft's 92 px: negative tracking should grow with size */
  --tc-tracking-caps: 0.18em;          /* eyebrows + brand-sub, uppercase (draft 0.2em / 0.19em at 10-11 px; at 12-13 px 0.18em gives the same absolute gap) */
  --tc-tracking-label: 0.16em;         /* "01 / PSIHOTERAPIJA" (draft 0.17em) */
  --tc-tracking-button: 0.03em;        /* button labels (draft 0.035em) */
  --tc-measure: 48ch;                  /* DM Sans '0' at opsz 16 = 0.686 em -> 48ch = 527 px @16 / 560 px @17 = about 72 characters (avg advance 0.458 em). Cap for the About column (draft 581 px = 79 characters) */
  --tc-measure-lead: 38ch;             /* 498-529 px: ch resolves against the lead's own 19-20 px size, so 44ch rendered 612 px at 1440 (report §4.2); 38ch = the draft's .lead max-width 490 px (about 66 characters) */
  --tc-font-size-wordmark: 1.625rem;   /* 26 -> 27.6 px "Valentina Haddad" in the header (draft 26 / 24 on phones) */

  /* spacing rhythm on the kit's rem-based space tokens (3xs 2 · 2xs 4 · xs 8 · s 12 · m 16 · l 24 · xl 32 · 2xl 40 · 3xl 48 · 4xl 64 · 5xl 80 px at a 16 px root; all scale with the fluid root) */
  --tc-section-padding-block: clamp(var(--wa-space-5xl), 8.33vw, calc(var(--wa-space-5xl) + var(--wa-space-2xl))); /* 80 -> 120 px (draft 76 phones / 120 desktop; 8.33vw = 120 at 1440; the cap is 127.5 px, reached from ~1531 px) */
  --tc-section-padding-inline: clamp(var(--wa-space-l), 2.5vw, var(--wa-space-xl));                                  /* 24 -> 32 px gutters (draft 20 / 32) */
  --tc-container: 68.75rem;                                                                                            /* 1100 px @16 (draft min(1100px, 100% - 64px)); 1169 px @17 */
  --tc-card-padding: clamp(var(--wa-space-xl), 3vw, var(--wa-space-2xl));                                             /* 32 -> 42.5 px service-card padding (draft 32 phones / 44 desktop) */
  --tc-card-gap: var(--wa-space-xl);                                                                                   /* 32 px between the two cards (draft 28); the markup uses the kit's wa-gap-l (24 px) per report snippet 6, this token is the alternative */
  --tc-section-head-gap: var(--wa-space-3xl);                                                                          /* 48 -> 51 px between the services head and the cards (draft 55) = wa-gap-3xl on the services stack */
  --tc-label-gap: var(--wa-space-2xl);                                                                                 /* 40 -> 42.5 px under "01 / PSIHOTERAPIJA" (draft 42 / 25 phones) */
  --tc-contact-gap: var(--wa-space-2xl);                                                                               /* 40 px above the contact rule (draft 36) + var(--wa-space-xl) 32 px below it (draft 30) */
  --tc-footer-padding: var(--wa-space-2xl);                                                                            /* 40 px (draft 38) */
  --tc-header-padding: clamp(var(--wa-space-l), 2.4vw, var(--wa-space-xl));                                            /* 24 -> 32 px (draft 24 phones / 34 desktop) */
  /* --wa-content-spacing stays var(--wa-space-l) = 24 -> 25.5 px: the draft's 20-28 px margins under eyebrow, h1, h2, h3 and p
     all collapse into this one value through native.css's `:is(h1…p):has(+ *) { margin-block-end: var(--wa-content-spacing) }` */
}

/* 1.3 Component tokens */
:where(:root),
.wa-light,
.wa-dark,
.wa-invert {
  --wa-form-control-border-radius: var(--wa-border-radius-square);  /* 0px (theme token): the draft's square buttons. 2 px alternative: 0.125rem */
  --wa-button-transform-active: none;                               /* no press-scale (Maeum motion policy, report §4.5) */
  --wa-link-decoration-default: underline;                          /* the kit's dotted 70 % underline -> the draft's solid underline on the e-mail/phone links */
}

/* ---------- 2. Band scopes (report §4.3: project classes, never .wa-dark/.wa-invert) ---------- */
.band-paper { background: var(--wa-color-surface-lowered); }   /* #ebe7e0: the services band */
.band-first { background: var(--wa-color-brand-90); }          /* #e5ded5: the "Prvi susret" band */
/* --wa-focus-ring is a composite token assembled on :root (style width colour) and inherits already substituted;
   re-declare it in every band scope so a per-band --wa-color-focus would take effect (Maeum report §5.2). */
.band-paper,
.band-first { --wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width) var(--wa-color-focus); }

/* ---------- 3. Recipes ---------- */
/* 3.1 Base behaviour (no second reset: only what native.css lacks) */
ul[role="list"] { list-style: none; padding-inline-start: 0; }
ul[role="list"] > li { margin-inline-start: 0; }

picture { display: block; }
picture > img { display: block; }

address { font-style: normal; }
/* No automatic hyphenation (unlike Maeum): the draft's paragraphs are ragged-right and unhyphenated, and at 1440 the
   card columns picked up five hyphens in nine lines, one of them a two-letter stub; the longest token on the page
   (the e-mail address, 212 px at 14 px) fits the 272 px column at 320 px. */

/* 3.2 Bands and columns */
.band {
  position: relative;
  border-block-start: 1px solid var(--wa-color-surface-border);   /* the draft's hairline between sections (not on the hero, §6) */
}
.band__inner {
  max-inline-size: var(--tc-container);
  margin-inline: auto;
  padding-block: var(--tc-section-padding-block);
  padding-inline: var(--tc-section-padding-inline);
}
.band__inner--narrow { max-inline-size: calc(47.5rem + 2 * var(--tc-section-padding-inline)); }   /* the draft's 760 px centred column ("Prvi susret", Kontakt) */

.measure { max-inline-size: var(--tc-measure); }
/* As a flank child, .measure caps its text instead of itself: the flank's content child must keep absorbing the free
   space (flex-grow 999), otherwise a capped item leaves free space that the portrait's auto margins would centre into.
   The flank also gives that child `min-inline-size: var(--content-percentage)` (kit utilities/layout.css), which would
   beat a max-inline-size anyway. */
[class*='wa-flank'] > .measure { max-inline-size: none; }
[class*='wa-flank'] > .measure > * { max-inline-size: var(--tc-measure); }

/* 3.3 Paragraph colour: the draft sets every paragraph, lead and the footer in muted and keeps the contact details in ink.
   :where() keeps this at specificity (0,0,1) so p.eyebrow / p.kicker (0,1,0) still take brand-40. */
.lead,
:where(.band) p,
.site-footer { color: var(--wa-color-text-quiet); }
.contact-details { color: var(--wa-color-text-normal); font-size: var(--wa-font-size-s); }

.lead {
  font-size: var(--wa-font-size-l);
  line-height: var(--tc-line-height-lead);
  max-inline-size: var(--tc-measure-lead);
  text-wrap: balance;
}
h1, h2, h3, .wordmark { letter-spacing: var(--tc-tracking-display); }
.wordmark { font-family: var(--wa-font-family-heading); font-size: var(--tc-font-size-wordmark); line-height: 1; }

/* 3.4 Eyebrows: <p class="eyebrow">Usluge</p> right before the h2 (native.css gives it --wa-content-spacing below).
   Also the header's brand-sub line (.eyebrow--quiet, weight reset by .tagline in §5). */
.eyebrow {
  font-size: var(--wa-font-size-xs);          /* 12 -> 13 px (draft 11 / brand-sub 10) */
  font-weight: var(--wa-font-weight-bold);    /* 600 (draft 600) */
  line-height: var(--wa-line-height-condensed);
  letter-spacing: var(--tc-tracking-caps);
  text-transform: uppercase;
  color: var(--wa-color-brand-40);            /* 6.527 cream / 5.771 paper / 5.331 first; 13 px bold is "small" text, so 4.5 applies and passes */
}
.eyebrow--quiet { color: var(--wa-color-text-quiet); }   /* the header's "Talking Chair · obrt za savjetovanje i edukaciju": 5.650 cream */

/* Kickers: <p class="kicker">01 / PSIHOTERAPIJA</p> at the top of each service card (the draft's <small>, 11 px / 0.17em / #8a7d70 3.67, fails) */
.kicker {
  font-size: var(--wa-font-size-xs);
  font-weight: var(--wa-font-weight-normal);
  line-height: var(--wa-line-height-condensed);
  letter-spacing: var(--tc-tracking-label);
  text-transform: uppercase;
  color: var(--wa-color-brand-40);
  margin-block-end: var(--tc-label-gap);      /* 40 px to the h3 (draft 42 / 25 phones) instead of native's --wa-content-spacing */
}

.note { font-size: var(--wa-font-size-s); }   /* the trainee note under the psychotherapy card (draft 13 px -> 14-15 px) */

/* 3.5 Skip link: wa-visually-hidden hides it until focus; these rules take over when focused. */
.skip-link {
  position: fixed;
  inset-block-start: var(--wa-space-s);
  inset-inline-start: var(--wa-space-s);
  z-index: 20;
  padding: var(--wa-space-s) var(--wa-space-m);
  border-radius: var(--wa-border-radius-m);
  background: var(--wa-color-brand-40);
  color: var(--wa-color-brand-95);
  font-weight: var(--wa-font-weight-action);
  text-decoration: none;
}

/* ---------- 4. Layout: the two-column intro, the services head, the centred bands ---------- */
/* Intro right column and the "Prvi susret" paragraph read at the lead size (draft 20 / 19 px); :where() keeps the
   eyebrow in the same stack at its own size. */
:where(.intro__text, .band-first) p {
  font-size: var(--wa-font-size-l);
  line-height: var(--tc-line-height-lead);
}
.section-head { max-inline-size: var(--tc-measure); }   /* the services head (draft 680 px = 85 cpl; 48ch = about 72) */

/* ---------- 5. Header (static, contract §1: no sticky bar, no toggle, no html.js) ---------- */
.site-header {
  background: var(--wa-color-surface-default);
  border-block-end: 1px solid var(--wa-color-surface-border);
}
.site-header .band__inner { padding-block: var(--tc-header-padding); }   /* 24 -> 32 px (draft 24 / 34), not the section rhythm */

.lockup {
  display: inline-flex;
  flex-direction: column;
  gap: var(--wa-space-2xs);
  color: var(--wa-color-text-normal);
  text-decoration: none;
}
.lockup:hover { color: var(--wa-color-brand-40); }
.tagline {
  font-family: var(--wa-font-family-body);
  font-weight: var(--wa-font-weight-normal);   /* the draft's brand-sub is regular, unlike the 600 eyebrows */
  line-height: var(--wa-line-height-normal);   /* 1.7: the draft's brand-sub inherits body 1.75 and breathes when it wraps below ~470 px; condensed stays for the real eyebrows */
}

.site-nav a {
  display: inline-block;
  padding: var(--wa-space-xs) var(--wa-space-2xs);   /* >= 24 px hit box (WCAG 2.2 2.5.8) */
  color: var(--wa-color-text-normal);
  font-size: var(--wa-font-size-s);
  font-weight: var(--wa-font-weight-action);
  letter-spacing: var(--tc-tracking-button);
  text-decoration: none;
}
.site-nav ul { margin-inline: calc(-1 * var(--wa-space-2xs)); }   /* cancels the link padding so the labels align with the wordmark (wrapped) and the container edge (one row); hit boxes unchanged */
.site-nav a:hover,
.site-nav a:focus-visible {
  color: var(--wa-color-brand-40);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* ---------- 6. Hero + arch (report snippet 2; treatment D on --tc-arch) ---------- */
.hero { border-block-start: 0; }   /* the header's bottom hairline already separates them */
.hero .band__inner {
  --flank-size: 25rem;          /* arch 400–425 px; column at 1024 = 515 px vs the 482 px H1 (33 px slack) */
  --content-percentage: 40%;
}
@media (max-width: 63.99rem) {  /* 1023 px at the 16 px initial size: media-query rem never follows the fluid root */
  .hero .band__inner { --content-percentage: 100%; }  /* = min-inline-size: 100% on the text child (layout.css #region Flank), verified to wrap at <= 1023 */
}
.arch {
  aspect-ratio: 15 / 16;
  inline-size: 100%;
  max-inline-size: 25rem;       /* = --flank-size: clamps the flex-grow 1 growth */
  margin-inline: auto;          /* centred when stacked, like the draft's phone layout */
  background: var(--tc-arch);   /* #d9d1c7: the colour the keyed sketch is exact for */
  border-radius: 50% 50% 4px 4px / 46.875% 46.875% 4px 4px;  /* 0.5 × 15/16: true semicircle, no radius scaling, 4 px corners intact */
  overflow: hidden;
  forced-color-adjust: none;    /* keeps the drawing visible under forced colours (Chrome CDP emulation) */
}
/* The figures wrap the <img> in a <picture>; wa-frame sizes only direct img children, and native.css rounds img/picture. */
[class*='wa-frame'] > picture { inline-size: 100%; block-size: 100%; border-radius: 0; }
[class*='wa-frame'] > picture > img { inline-size: 100%; block-size: 100%; object-fit: cover; border-radius: 0; }
.arch > picture > img { object-fit: contain; object-position: 50% 66%; }  /* never crops the chairs; drawing sits below centre as drafted */

/* ---------- 7. Service cards + the square ink CTA (report snippet 6) ---------- */
.service {
  padding: var(--tc-card-padding);
  background: var(--wa-color-surface-default);   /* cream cards on the paper band */
}
.service__body { max-inline-size: var(--tc-measure); }   /* 48ch: the stacked card (640-800 px) otherwise runs 92-95 cpl at 768-795; same cap as .section-head, no effect in two columns */
.booking { align-self: flex-start; }   /* precautionary only: stops the <p> stretching to the card width under wa-align-items-stretch; the inline-flex a.wa-button inside is shrink-to-fit either way (CTA box measured identical with and without this rule at 375 and 1440); wa-split:column pins it to the bottom */

/* Buttons: <a class="wa-button wa-outlined wa-size-s cta" href="#kontakt">Rezerviraj termin ↓</a>
   native.css a.wa-button: height --wa-form-control-height = round(2 x 0.75em + 1em x 1.15) = 2.65em = 37 -> 40 px at size s (>= 24 px target),
   border max(1px, --wa-form-control-border-width) = 1 px, font-size --wa-form-control-value-font-size (never defined in the theme,
   so wa-size-s supplies --wa-font-size-s = 14 -> 15 px; draft 12 px), weight --wa-font-weight-action 500 (overridden to 400 below), radius --wa-form-control-border-radius,
   transition --wa-transition-fast (reset in §11). .wa-outlined reads --wa-color-border-loud / --wa-color-on-quiet / --wa-color-fill-quiet,
   which utilities/variants.css maps to the neutral set on :root; redefining them on the element points them at the ink. */
.cta {
  --wa-form-control-border-radius: var(--wa-border-radius-square);   /* 0px: the draft's square corners (also the global default in §1.3) */
  --wa-color-border-loud: var(--wa-color-text-normal);   /* 1 px ink border: 9.765 on the cream card (1.4.11 >= 3) */
  --wa-color-on-quiet: var(--wa-color-text-normal);      /* ink label, 14-15 px / 400: 9.765 */
  --wa-form-control-padding-inline: 1.5em;               /* 21-22 px (draft 19 px at 12 px = 1.6em) */
  letter-spacing: var(--tc-tracking-button);
  column-gap: 0.25em;                                    /* the word space before the aria-hidden "↓": a.wa-button is inline-flex, which drops the text item's trailing space */
  font-weight: var(--wa-font-weight-normal);             /* 400: the draft's .booking a inherits the body weight; the kit's .wa-button default is --wa-font-weight-action 500 */
  background-color: transparent;                         /* unlayered rest fill: native.css gates only the default-button hover, so its .wa-outlined:hover fill-quiet wash (neutral-95) would otherwise stick after a touch tap; .cta:hover (gated), :focus-visible and :active are more specific and still invert */
}
/* Inversion (draft: ink fill, cream label on hover and focus-visible). Unlayered, so it beats native.css's
   `.wa-outlined:hover { background: fill-quiet }` and `:active { color-mix(...) }` whatever their specificity.
   Hover is gated: the kit gates only its default-button hover, and a tapped outlined CTA would otherwise stay inverted; the kit's own
   ungated .wa-outlined:hover wash is neutralised by the rest rule's background-color above. */
@media (hover: hover) {
  .cta:hover { color: var(--wa-color-surface-default); background-color: var(--wa-color-text-normal); border-color: var(--wa-color-text-normal); }
}
.cta:focus-visible,
.cta:active { color: var(--wa-color-surface-default); background-color: var(--wa-color-text-normal); border-color: var(--wa-color-text-normal); }
/* Focus ring = --wa-focus-ring (solid 3px brand-60, offset 1px, from native.css a:focus-visible). The ring is separated from the
   inverted ink fill by the 1 px cream offset, so its adjacent colour is the surface: 3.99 cream / 3.53 paper / 3.26 first. */

/* ---------- 8. About: the P4 portrait ---------- */
.portrait {
  aspect-ratio: 768 / 960;                 /* the crop's own 4:5 (wa-frame:portrait's 9:16 would crop the photo) */
  inline-size: 100%;
  max-inline-size: 24rem;                  /* = --flank-size: 384 -> 408 px beside the text (draft 0.8fr = 391 px) */
  margin-inline: auto;                     /* centred when the flank stacks (draft phones: max-width 390px; margin: 0 auto) */
  background: var(--wa-color-brand-80);    /* placeholder tint until the lazy photo paints */
  border-radius: 0;                        /* square corners (native.css rounds img/picture; wa-frame has no radius) */
}

/* ---------- 9. Contact + footer ---------- */
.contact-details {
  align-self: stretch;                                            /* the rule spans the 760 px column; the rows inside stay centred */
  margin-block-start: calc(var(--tc-contact-gap) - var(--wa-space-l));   /* + the stack's wa-gap-l = 40 px above the rule (draft 36) */
  padding-block-start: var(--wa-space-xl);                        /* 32 px below it (draft 30) */
  border-block-start: 1px solid var(--wa-color-surface-border);
}
.contact-details a { padding-block: var(--wa-space-2xs); }        /* inline padding: >= 24 px hit boxes without moving the lines (WCAG 2.2 2.5.8) */
.contact-details wa-icon { margin-inline-end: var(--wa-space-xs); }   /* inline at the start of each row's text (index.html); the margin replaces the cluster gap */
.contact-details__value {                                         /* the e-mail address + its copy button (index.html) */
  display: inline-flex;                                           /* two flex items that never wrap: on phones the row breaks after "E-mail:" instead */
  align-items: center;                                            /* the button (and its :not(:defined) placeholder, §10) is centred on the link box rather than baseline-aligned, so the pair's line height is the same before and after the upgrade (0 px shift measured) */
  white-space: nowrap;
}
.contact-details__label {                                         /* "Lokacije" (draft: ink, 600) */
  margin-block-start: var(--wa-space-xs);                         /* the stack's 12 px + 8 px (draft 16 px) */
  color: var(--wa-color-text-normal);                             /* it is a <p>, so the quiet paragraph rule in §3.3 would catch it */
}

.site-footer .band__inner {
  padding-block: var(--tc-footer-padding);   /* 40 px (draft 38), not the section rhythm */
  font-size: var(--wa-font-size-s);          /* 14 -> 15 px (draft 12) */
}
@media (max-width: 47.99em) {                /* phones and small tablets: the three lines stack, start-aligned, like the draft's block spans */
  .site-footer .band__inner { flex-direction: column; align-items: flex-start; gap: var(--wa-space-xs); }
}

/* ---------- 10. Placeholders instead of wa-cloak (Maeum report §5.4): same box as the defined components, so nothing moves on upgrade.
   wa-icon: the default canvas is 1.25em × 1em. wa-copy-button: the kit sizes its button to calc(--wa-form-control-height * 0.8),
   square, and the template's whitespace adds ~0.53em of width; the e-mail row is centred, so the placeholder must match both axes
   (measured 40×32 at 15 px, 37×29.6 at 14 px). ---------- */
wa-icon:not(:defined) { display: inline-block; width: 1.25em; height: 1em; vertical-align: -0.125em; }
wa-copy-button:not(:defined) {
  display: inline-block;
  inline-size: calc(var(--wa-form-control-height) * 0.8 + 0.53em);
  block-size: calc(var(--wa-form-control-height) * 0.8);
}

/* ---------- 11. Motion (report §4.4): nothing moves unless the user allows it ---------- */
.cta,
.lockup,
.site-nav a,
.contact-details a { transition: none; }   /* also resets native.css's always-on button transition */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .cta,
  .lockup,
  .site-nav a,
  .contact-details a {
    transition: color var(--wa-transition-normal) var(--wa-transition-easing),
                background-color var(--wa-transition-normal) var(--wa-transition-easing),
                border-color var(--wa-transition-normal) var(--wa-transition-easing);
  }
}