/* ==========================================================================
   Crofile redesign
   Bootstrap 5 provides the grid (12 columns, 1320px max at ≥1400px).
   Everything visual lives here. Edit the tokens first.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
/* Self-hosted fonts (variable Inter and Inter Tight; Share Tech Mono latin) */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-tight-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-tight-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Share Tech Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/share-tech-mono-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --c-bg: #ffffff;
  --c-text: #111111;
  --c-muted: #666666;
  --c-line: #eaeaea;
  --c-soft: #f5f5f5;      /* image placeholders */
  --c-accent: #6d35c9;    /* Crofile purple, darkened for contrast. Used for focus and selection only. */
  /* Accent gradient: Crofile purple to magenta. Both ends pass 4.5:1 on white (6.99 and 4.98).
     Used on two words only: the rotating hero word and the last word of the contact line. */
  --accent-gradient: linear-gradient(90deg, #6d35c9 0%, #c2368f 100%);

  --f-head: "Inter Tight", "Inter", system-ui, sans-serif;
  --f-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Type scale (fluid, 375px → 1440px) */
  --t-display: clamp(2.75rem, 1.5rem + 5.4vw, 6.5rem);
  --t-large:   clamp(2.25rem, 1.45rem + 3.4vw, 4.5rem);
  --t-section: clamp(2rem, 1.55rem + 1.9vw, 3.25rem);
  --t-h3:      clamp(1.5rem, 1.3rem + 0.9vw, 2.25rem);
  --t-lead:    clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem);
  --t-body:    1rem;
  --t-small:   0.875rem;

  /* Spacing */
  --s-section: clamp(5rem, 3.5rem + 6vw, 10rem);
  --s-head:    clamp(2.5rem, 2rem + 2vw, 4.5rem);
  --header-h: 5rem;

  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- 2. Base ---------- */
html { scroll-behavior: smooth; scroll-padding-top: calc(4rem - 1px); /* scrolled header height, so the section's top line sits on the header's line */ }

body {
  font-family: var(--f-body);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.6;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--f-head);
  font-weight: 600;
  color: var(--c-text);
  margin: 0;
}

p { margin: 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
a, button { -webkit-tap-highlight-color: transparent; } /* no grey/blue flash on tap; keyboard focus keeps :focus-visible */
ul, ol { list-style: none; margin: 0; padding: 0; }
::selection { background: var(--c-accent); color: #fff; }

:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  padding: .75rem 1rem; background: var(--c-text); color: #fff;
}
.skip-link:focus { top: 1rem; }

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

/* Bootstrap's container is 1320px at ≥1400; keep comfortable side gutters below that */
.container { --bs-gutter-x: 2.5rem; }
@media (max-width: 575.98px) { .container { --bs-gutter-x: 2rem; } }

/* ---------- 3. Type components ---------- */
.overline {
  font-size: 20px;
  color: var(--c-muted);
  letter-spacing: .01em;
  margin-bottom: 1.75rem;
}

.display {
  font-size: var(--t-display);
  line-height: .98;
  letter-spacing: -.01em;
  max-width: 14ch;
}

.h-large {
  font-size: var(--t-large);
  line-height: 1.02;
  letter-spacing: -.01em;
  max-width: 13ch;
}

.h-section {
  font-size: var(--t-section);
  line-height: 1.05;
  letter-spacing: -.01em;
}

/* Section headings are uppercase to match the logo (text stays normal case in the HTML).
   Tracking matches the logo: its letter gaps are ~0.17 of the cap height, Inter Tight 600 is ~0.11 */
main h2, main h2[class] { text-transform: uppercase; letter-spacing: .045em; }
/* Capitals read bigger, so section headings are ~12% smaller than the normal-case sizes */
main h2.h-section { font-size: calc(var(--t-section) * .88); }
main h2.h-large { font-size: calc(var(--t-large) * .88); }
main h2.display { font-size: calc(var(--t-display) * .88); }
/* Contact heading keeps sentence case and its full size */
main h2.contact-title { text-transform: none; letter-spacing: -.03em; font-size: var(--t-display); }
/* Keep "Neka i Vaša ideja rasturi!" on one line inside each desktop container width */
@media (min-width: 992px) and (max-width: 1199.98px) { main h2.contact-title { font-size: min(var(--t-display), 5.3rem); } }
@media (min-width: 1200px) and (max-width: 1399.98px) { main h2.contact-title { font-size: min(var(--t-display), 6rem); } }

.h-small {
  font-family: var(--f-body);
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--c-muted);
  letter-spacing: .01em;
}

.lead-text {
  font-size: var(--t-lead);
  line-height: 1.5;
  font-weight: 300;
  max-width: 34ch;
}

.small-note { font-size: var(--t-small); color: var(--c-muted); max-width: 44ch; margin-top: 1rem; }

/* ---------- 4. Links and buttons ---------- */
.link-underline {
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  padding-bottom: 2px;
  transition: background-size .35s var(--ease);
}
.link-underline:hover { background-size: 0 1px; background-position: 100% 100%; }

.btn-solid {
  display: inline-flex; align-items: center; gap: .75rem;
  height: 3.5rem; padding: 0 1.75rem;
  border: 1px solid var(--c-text); border-radius: 999px;
  background: var(--c-text); color: #fff;
  font-size: .9375rem; font-weight: 500;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.btn-solid:hover { background: transparent; color: var(--c-text); }
.btn-solid.btn-sm { height: 2.5rem; padding: 0 1.25rem; font-size: var(--t-small); }

.btn-text {
  border: 0; background: none; padding: 0 .25rem;
  font-size: var(--t-small); color: var(--c-muted);
  transition: color .2s;
}
.btn-text:hover { color: var(--c-text); }

.arrow { display: inline-block; transition: transform .35s var(--ease); }
a:hover > .arrow { transform: translateX(4px); }
a:hover > .arrow-down { transform: translateY(3px); } /* same nudge as "Učitaj više" */

/* ---------- 5. Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, box-shadow .3s;
}
.site-header.is-scrolled { border-bottom-color: var(--c-line); }

.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--header-h);
  transition: height .3s var(--ease);
}
.site-header.is-scrolled .header-inner { height: 4rem; }

.brand img { width: 128px; height: auto; }
@media (max-width: 767.98px) { .brand img { width: 120px; } }

.site-nav { display: flex; align-items: center; gap: 3rem; }
.nav-list { display: flex; gap: 2.25rem; }

.nav-link-plain {
  position: relative;
  font-family: var(--f-head);
  font-size: .9375rem; font-weight: 500; letter-spacing: .02em; text-transform: uppercase;
  color: var(--c-muted);
  padding: .25rem 0;
  transition: color .2s;
}
.nav-link-plain:hover,
.nav-link-plain[aria-current] { color: var(--c-text); }
/* Desktop nav: a 2px mark under the link, as on Kangler V4. Half the word's width marks the section in view; on hover
   any link's mark grows to the full width. The mobile menu marks the current link in bold instead. */
@media (min-width: 992px) {
  .nav-link-plain::after { content: ""; position: absolute; left: 0; bottom: -.3rem; width: 0; height: 2px; background: var(--c-text); transition: width .25s var(--ease); }
  .nav-link-plain[aria-current]::after { width: 50%; }
  .nav-link-plain:hover::after, .nav-link-plain:focus-visible::after { width: 100%; }
}

.lang-switch { display: flex; gap: .75rem; font-size: var(--t-small); }
.lang-switch a { color: var(--c-muted); transition: color .2s; }
.lang-switch a:hover { color: var(--c-text); }
/* Thin divider between the nav links and HR/EN, centred in the gap */
@media (min-width: 992px) {
  .lang-switch { position: relative; align-items: center; }
  .lang-switch::before {
    content: ""; position: absolute; left: -1.5rem; top: 50%;
    width: 1px; height: 1.125rem; transform: translateY(-50%);
    background: #D6D6D6;
  }
}
.lang-current { color: var(--c-text); font-weight: 500; }

.menu-toggle {
  display: none;
  border: 0; background: none; padding: .5rem 0;
  font-size: .9375rem; font-weight: 400; color: var(--c-text);
}

/* Mobile navigation: a plain full-screen list under the header */
@media (max-width: 991.98px) {
  :root { --header-h: 4rem; }
  .site-header.is-scrolled .header-inner { height: var(--header-h); }
  .menu-toggle { display: block; }

  .site-nav {
    position: fixed; inset: var(--header-h) 0 0 0;
    flex-direction: column; align-items: flex-start; justify-content: space-between;
    gap: 2rem;
    padding: 2.5rem var(--bs-gutter-x);  /* this Bootstrap build pads containers by the full gutter */
    background: var(--c-bg);
    border-top: 1px solid var(--c-line);
    visibility: hidden; opacity: 0;
    transition: opacity .25s, visibility 0s .25s;
  }
  .site-header.is-open .site-nav { visibility: visible; opacity: 1; transition: opacity .25s; }
  .site-header.is-open { border-bottom-color: var(--c-line); }

  .nav-list { flex-direction: column; gap: .25rem; }
  .nav-link-plain {
    font-family: var(--f-head); font-weight: 500;
    font-size: 2rem; letter-spacing: -.01em; line-height: 1.35;
    color: var(--c-muted);
  }
  /* Active section: black and a touch bolder, the rest stay gray (as on desktop) */
  .nav-link-plain[aria-current] { font-weight: 600; }
  .lang-switch { font-size: 1rem; gap: 1.25rem; }
}

/* ---------- 6. Sections ---------- */
.section { padding-block: var(--s-section); }
.section-tight { padding-top: 0; }

.section-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 1rem;
  margin-bottom: var(--s-head);
}
.section-meta { font-family: "Share Tech Mono", ui-monospace, monospace; font-size: 18px; color: var(--c-muted); white-space: nowrap; }

/* Hero */
.hero { padding-top: clamp(4rem, 2rem + 8vw, 10rem); padding-bottom: clamp(3.5rem, 2rem + 5vw, 7rem); overflow: hidden; }
.hero .display { max-width: 13ch; }
@media (min-width: 992px) { .hero .display { font-size: calc(var(--t-display) * .92); } } /* a touch smaller on desktop */
/* Longest rotating word ("proizvod."): keep the line clear of the badge on small laptops and inside iPhone SE width */
@media (min-width: 992px) and (max-width: 1199.98px) { .hero .display { font-size: min(calc(var(--t-display) * .92), 4.1rem); } }
@media (max-width: 389.98px) { .hero .display { font-size: min(var(--t-display), 11.6vw); } }

/* Text for screen readers and search engines only */
.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; }


/* Rotating last word: all words share one grid cell, so the line never jumps */
.hero-keep { white-space: nowrap; }
/* The rotator always keeps the widest word's width, so the headline never reflows while words change.
   The period slides after the current word with transform only (set in site.js). */
.hero-rotator { display: inline-grid; vertical-align: bottom; justify-items: start; }
.hero-dot { display: inline-block; }
.hero-dot.is-ready { transition: transform .45s var(--ease); }
.hero-word {
  grid-area: 1 / 1; white-space: nowrap;
  opacity: 0; transform: translateY(.35em);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
  will-change: opacity, transform; /* own layer: the gradient text is painted once, then only moved */
}
.hero-word.is-active { opacity: 1; transform: none; }
.hero-word.is-leaving { opacity: 0; transform: translateY(-.35em); }
@media (prefers-reduced-motion: reduce) { .hero-word { transition: none; } }
.hero-row { row-gap: 3rem; align-items: center; }
.hero-text { margin: clamp(2rem, 1.5rem + 2vw, 3.5rem) 0 2.25rem; max-width: 36ch; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; } /* as on Kangler V4 */

/* Right side: a big line of text inside a thin, tilted open frame */
.hero-aside { display: flex; justify-content: flex-end; }
.hero-badge { position: relative; width: 100%; max-width: 32rem; padding: 4.5rem 0 5rem; }
.hero-frame-line {
  position: absolute; z-index: -1;
  top: 0; left: 22%; width: 74%; height: 100%;
  transform: rotate(-10deg); /* fixed tilt; site.js only erases/redraws the line on scroll */
  overflow: visible; pointer-events: none;
}
.hero-frame-line path {
  fill: none; stroke: var(--c-text); stroke-width: 3;
  vector-effect: non-scaling-stroke; stroke-linecap: square;
}
.hero-badge-text {
  font-family: var(--f-head); font-weight: 600;
  font-size: clamp(2.5rem, 1rem + 3vw, 4rem);
  line-height: 1.05; letter-spacing: -.01em;
  max-width: 9ch; margin-bottom: 1.25rem;
}
.hero-badge-sub { color: var(--c-muted); max-width: 30ch; margin-bottom: 0; line-height: 1.55; }

/* Phones and tablets: one column, the badge sits between the intro text and the buttons
   (display: contents lets the left column's pieces and the badge share one order) */
@media (max-width: 991.98px) {
  .hero-row { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; row-gap: 0; }
  .hero-row > .col-lg-7 { display: contents; }
  .hero-row .display, .hero-row .hero-text, .hero-row .hero-actions {
    margin-left: calc(var(--bs-gutter-x) * .5); margin-right: calc(var(--bs-gutter-x) * .5);
  }
  .hero-row .display { order: 1; }
  .hero-row .hero-text { order: 2; }
  .hero-aside { order: 4; justify-content: flex-start; width: 100%; } /* under the buttons; the badge's 48px top margin keeps the tilted frame as far from them as the buttons are from the text */
  .hero-row .hero-actions { order: 3; }
  .hero-badge { max-width: none; padding: 4.75rem 2rem 5.5rem; margin: 48px 0 0; } /* full width of the text column */
  .hero-badge-text { font-size: 2.8rem; }
  .hero-badge-sub { font-size: 1.2rem; }
  .hero-frame-line { left: 0; width: 100%; transform: rotate(-4deg); } /* full width, less tilt on phones, so the corners stay clear of the text, buttons and screen edges */
}

.hero-compact { padding-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); }
/* Phones and tablets: natural height with the same spacing as Kangler V4, so the work below peeks in */
/* Laptop and desktop: the home hero fills the first screen under the sticky header, as on Kangler V4,
   content in the vertical middle */
@media (min-width: 992px) {
  .hero:not(.hero-compact) {
    min-height: calc(100vh - var(--header-h) - 1px);   /* 1px: the header's bottom border */
    min-height: calc(100svh - var(--header-h) - 1px);
    display: flex; flex-direction: column; justify-content: center;
    padding-top: clamp(3rem, 1.5rem + 5vw, 7rem);
  }
}

/* Work */
.work { padding-top: clamp(2rem, 1rem + 3vw, 4rem); border-top: 1px solid var(--c-line); margin-top: 0; }
.work .section-head { padding-top: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.work-grid { --bs-gutter-x: clamp(1.5rem, 1rem + 2vw, 2.5rem); row-gap: clamp(3rem, 2rem + 3vw, 5.5rem); }

/* Offset the right column on large screens for an editorial rhythm */
@media (min-width: 992px) {
  .work-grid > :nth-child(even) { padding-top: 7.5rem; }
}

/* Load more: extra projects stay hidden only when JS can reveal them */
.js .work-item.is-extra:not(.is-shown) { display: none; }
.work-more { display: none; justify-content: center; margin-top: clamp(3.5rem, 2.5rem + 3vw, 6rem); }
.js .work-more { display: flex; }

.btn-outline {
  display: inline-flex; align-items: center; gap: .75rem;
  height: 3.5rem; padding: 0 1.75rem;
  border: 1px solid var(--c-text); border-radius: 999px;
  background: transparent; color: var(--c-text);
  font-size: .9375rem; font-weight: 500;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.btn-outline:hover { background: var(--c-text); color: #fff; }
.btn-outline:hover > .arrow { transform: translateY(3px); }

.work-media {
  margin: 0; overflow: hidden;
  background: var(--c-soft);
  aspect-ratio: 6 / 5;
}
.work-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .9s var(--ease);
}
.work-card:hover .work-media img { transform: scale(1.03); }

.work-caption {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  margin-top: 1.25rem;
}
/* Caption like the old site: project type in uppercase, client lighter and muted after it */
.work-title { font-size: clamp(1.125rem, 1rem + .35vw, 1.375rem); letter-spacing: 0; line-height: 1.3; }
.work-type { text-transform: uppercase; letter-spacing: 0; }
.work-client { font-weight: 400; color: var(--c-muted); font-size: 15px; } /* smaller than the title (Tihomir: 18px desktop / 15px phone) */
@media (min-width: 992px) { .work-client { font-size: 18px; } }
.work-type, .work-client { white-space: nowrap; }
/* Light slash between title and client (Tihomir 2026-10-26). It hangs on the title, so when the client wraps
   to the next line on phones the slash ends the first line instead of starting the second. */
.work-type::after { content: "/"; margin: 0 .2em 0 .45em; font-size: .85em; font-weight: 300; color: #CFCFCF; position: relative; top: -.1em; } /* even gaps both sides, spans the cap height */
@media (max-width: 359.98px) { .work-type { white-space: normal; } } /* long types ("Marketing Content Manager") wrap so the number stays on screen */
.work-num { font-family: "Share Tech Mono", ui-monospace, monospace; font-size: 22px; line-height: 1; color: var(--c-muted); } /* line-height 1: never taller than the title line */
.work-cat { font-size: 16px; color: var(--c-muted); margin-top: 4px; }
@media (max-width: 767.98px) { .work-cat { margin-top: 2px; } }

/* Services */
.services { border-top: 1px solid var(--c-line); }
.services-intro { position: sticky; top: calc(var(--header-h) + 2rem); margin-bottom: 3rem; }
.services-intro .muted { margin-top: 1.25rem; max-width: 30ch; }

.service-list { counter-reset: none; border-top: 1px solid var(--c-text); }
.service {
  display: grid; grid-template-columns: 4.5rem 1fr; gap: 0;
  padding: clamp(2rem, 1.5rem + 1.5vw, 3rem) 0;
  border-bottom: 1px solid var(--c-line);
}
.service-num { font-family: "Share Tech Mono", ui-monospace, monospace; font-size: 18px; color: var(--c-muted); padding-top: .6rem; }
.service-title { font-size: var(--t-h3); letter-spacing: 0; line-height: 1.12; }
.service-desc { color: var(--c-muted); margin-top: 1rem; max-width: 52ch; }
.tags { margin-top: 1.25rem; font-size: 1rem; line-height: 1.9; }
/* Each tag carries its "·" in front, inside a narrow gap. The list is shifted left by
   that gap and clipped, so a tag that starts a line hides its dot: no dot is ever
   left dangling at the end or start of a line */
.tags { display: flex; flex-wrap: wrap; margin-left: -1.1rem; clip-path: inset(0 0 0 1.1rem); }
.tags li { position: relative; padding-left: 1.1rem; color: var(--c-text); white-space: nowrap; }
.tags li::before { content: "·"; position: absolute; left: .4rem; color: var(--c-muted); }
@media (max-width: 575.98px) { .service { grid-template-columns: 1fr; gap: .5rem; } .service-num { padding-top: 0; } }

/* About */
.about { background: var(--c-bg); border-top: 1px solid var(--c-line); }
.about-copy .lead-text { max-width: 38ch; }
.about-copy .muted { margin-top: 1.5rem; max-width: 46ch; }
@media (min-width: 992px) { .about-copy { padding-top: .75rem; } }

.steps { margin-top: clamp(4rem, 3rem + 4vw, 7rem); row-gap: 2.5rem; }
.step-num { position: relative; display: block; padding-top: 1.5rem; font-family: "Share Tech Mono", ui-monospace, monospace; font-size: 18px; color: var(--c-muted); }
.step-num::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--c-text); transform-origin: left; }
.step:nth-child(2) { --i: 1; }
.step:nth-child(3) { --i: 2; }
.step-title { font-size: 1.375rem; letter-spacing: 0; margin: 2.5rem 0 .5rem; }

/* Contact */
.contact { border-top: 1px solid var(--c-line); }
.contact-title { max-width: none; }
.contact-title > span { display: block; }
.muted-strong { color: #8a8a8a; } /* large display text: 3.4:1 passes AA for large type */
.contact-foot { margin-top: clamp(3rem, 2rem + 4vw, 6rem); row-gap: 2rem; align-items: end; }
.contact-note .lead-text { max-width: none; margin-bottom: 0; text-wrap: balance; }
.contact-note .small-note { max-width: none; margin-top: .5rem; }

.email-link {
  display: inline-flex; align-items: center; gap: 1rem;
  font-family: var(--f-head); font-weight: 500;
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3.25rem);
  letter-spacing: -.03em; line-height: 1.2;
  padding-bottom: .35rem;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 2px no-repeat;
  transition: background-size .45s var(--ease);
  word-break: break-word;
}
.email-link:hover { background-size: 0 2px; background-position: 100% 100%; }

/* Privacy */
.prose h2 { font-size: 1.5rem; letter-spacing: 0; margin: 3rem 0 .75rem; }
.prose h3 { font-size: 1.125rem; margin: 1.75rem 0 .5rem; }
.prose p { color: #333; max-width: 65ch; }
.prose p + p { margin-top: 1rem; }

/* ---------- 7. Footer ---------- */
.site-footer { border-top: 1px solid var(--c-line); padding: clamp(3.5rem, 3rem + 2vw, 5rem) 0 2rem; font-size: var(--t-small); }
.site-footer .brand { display: inline-block; vertical-align: top; }
.site-footer .brand img { display: block; }
.footer-note { color: var(--c-muted); margin-top: 12px; }
.footer-list li + li { margin-top: .6rem; }
.footer-list a { transition: color .2s; }
.footer-list a:hover { color: var(--c-muted); }
.legal { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1rem; margin: 0; color: var(--c-muted); }
.legal dt { font-weight: 400; }
.legal dd { margin: 0; color: var(--c-text); }
@media (min-width: 380px) { .legal .nowrap { white-space: nowrap; } }
.footer-bottom {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  margin-top: clamp(3rem, 2rem + 3vw, 5rem); padding-top: 1.5rem;
  border-top: 1px solid var(--c-line); color: var(--c-muted);
}
.footer-bottom a { color: var(--c-text); }

/* Back to top */
.to-top {
  position: fixed; right: clamp(1rem, 2vw, 2rem); bottom: clamp(1rem, 2vw, 2rem); z-index: 40;
  width: 3rem; height: 3rem; border-radius: 50%;
  border: 1px solid var(--c-line); background: var(--c-bg); color: var(--c-text);
  font-size: 1.125rem; line-height: 1;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .06);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s .3s, background-color .2s, color .2s;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.to-top:hover { background: var(--c-text); color: #fff; border-color: var(--c-text); }

/* ---------- 8. Cookie banner ---------- */
.cookie-banner {
  position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 60;
  max-width: 34rem; margin-left: auto;
  display: flex; flex-direction: column; gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: var(--c-bg);
  border: 1px solid rgba(17, 17, 17, .14); border-top: 2px solid var(--c-text); /* a clear edge so it lifts off the page */
  box-shadow: 0 18px 48px rgba(0, 0, 0, .14), 0 2px 8px rgba(0, 0, 0, .06);
  font-size: var(--t-small); color: var(--c-muted);
}
.cookie-actions { display: flex; justify-content: flex-end; align-items: center; gap: 1rem; }
/* Phones: a bit more room and two equal, easy-to-tap buttons (Accept solid black) */
@media (max-width: 575.98px) {
  .cookie-banner { left: .75rem; right: .75rem; bottom: .75rem; padding: 1.5rem 1.25rem 1.25rem; gap: 1.25rem; color: var(--c-text); }
  .cookie-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
  .cookie-actions .btn-text, .cookie-actions .btn-solid.btn-sm { height: 2.75rem; justify-content: center; }
  .cookie-actions .btn-text { border: 1px solid var(--c-text); border-radius: 999px; color: var(--c-text); }
}
/* Slides up gently once the page has loaded (site.js adds .is-in) */
@media (prefers-reduced-motion: no-preference) {
  .js .cookie-banner { opacity: 0; transform: translateY(24px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
  .js .cookie-banner.is-in { opacity: 1; transform: none; }
}

/* ---------- 9. Reveal (only when JS is on and motion is allowed) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
  .js .reveal.is-visible { opacity: 1; transform: none; }

  /* Process steps (once, when ~35% in view): the line draws across, then the number,
     title and text slide up out of a mask, one step after another */
  .js .steps .mask { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
  .js .steps .mask > span { display: block; transform: translateY(110%); transition: transform .9s cubic-bezier(.2,.7,0,1); }
  .js .steps .step-num::before { transform: scaleX(0); transition: transform 1s cubic-bezier(.65,0,.35,1) calc(var(--i, 0) * 180ms); }
  .js .steps .step-num .mask > span { transition-delay: calc(var(--i, 0) * 180ms + 300ms); }
  .js .steps .step-title .mask > span { transition-delay: calc(var(--i, 0) * 180ms + 420ms); }
  .js .steps .muted .mask > span { transition-delay: calc(var(--i, 0) * 180ms + 540ms); }
  .js .steps.is-visible .step-num::before { transform: none; }
  .js .steps.is-visible .mask > span { transform: none; }

  /* Contact line (once, when ~40% in view): words fade and slide up one after another,
     with the same distance, easing and timing as the hero's rotating word */
  .js .words-in .w { display: inline-block; opacity: 0; transform: translateY(.35em);
    transition: opacity .45s var(--ease) calc(var(--w) * 110ms), transform .45s var(--ease) calc(var(--w) * 110ms); }
  .js .words-in.is-visible .w { opacity: 1; transform: none; }

}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Gradient accent text (see --accent-gradient). Padding gives descenders (j, g) room inside the clip. */
.hero-word, .contact-title .w:last-child {
  background: var(--accent-gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: #6d35c9;
  padding-bottom: .12em; margin-bottom: -.12em;
}

/* Soft accent glow at the top center of the page, behind the header. It scrolls away with the page,
   so the sticky header goes back to plain white once scrolled. */
body::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: -280px; left: 0; right: 0; margin: 0 auto;
  width: min(1200px, 100%); height: 560px;
  /* Soft edges come from the radial gradients themselves: no blur filter, which is slow to paint on phones */
  background:
    radial-gradient(closest-side at 40% 50%, rgba(109, 53, 201, .2), rgba(109, 53, 201, 0)),
    radial-gradient(closest-side at 62% 50%, rgba(194, 54, 143, .14), rgba(194, 54, 143, 0));
}
.site-header:not(.is-scrolled) { background: transparent; }