/* Vronti Studio. Self-hosted Poppins (latin + latin-ext for č ć đ š ž). */
/* logged-in users: keep the sticky header below the WordPress admin bar */
body.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .site-header { top: 46px; } }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/poppins-400-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/poppins-400-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: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/poppins-500-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/poppins-500-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: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/poppins-600-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/poppins-600-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: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/poppins-700-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/poppins-700-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; }

/* Vronti Studio design system: vault "Vronti Studio - Brand Guide".
   Poppins only. No shadows, no gradients. Every spacing value is a multiple of 8.
   Gold as text only as #8D7337 on light, #C7A24D on navy. One gold button per screen. */
:root {
  color-scheme: light;
  --navy: #1B3450;
  --white: #FFFFFF;
  --gold: #C7A24D;
  --gold-hover: #B39245;
  --gold-press: #9F823E;
  --gold-text: #8D7337;
  --graphite: #363636;
  --muted: #767676;
  --muted-dark: #ABABAB;
  --raised: #F6F7F8;
  --sunken: #EDEFF1;
  --line: #E4E7EA;
  --line-strong: #D1D6DC;
  --line-dark: rgba(255,255,255,0.16);
  --on-gold: #1B3450;
  --band-bg: #1B3450; --band-ink: #FFFFFF; --band-muted: #ABABAB; --band-gold: #C7A24D; --band-hover: rgba(255,255,255,0.08);
  --foot-bg: #363636; --foot-ink: #FFFFFF; --foot-muted: #ABABAB; --foot-gold: #C7A24D; --foot-line: rgba(255,255,255,0.16); --foot-hover: rgba(255,255,255,0.08);
  --margin: 24px;
  --max: 1200px;
  --font: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
  /* hover glow under cards: navy on white pages, gold on dark pages (set per palette below) */
  --glow: 0 22px 36px -14px rgba(27, 52, 80, 0.7), 0 10px 48px -8px rgba(27, 52, 80, 0.4);
}
:root[data-palette="navy"], :root[data-palette="graphite"] { --glow: 0 22px 36px -14px rgba(199, 162, 77, 0.85), 0 10px 48px -8px rgba(199, 162, 77, 0.45); }
@media (min-width: 768px) { :root { --margin: 40px; } }
@media (min-width: 1024px) { :root { --margin: 64px; } }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }
body {
  margin: 0; background: var(--white); color: var(--navy);
  font-family: var(--font); font-size: 16px; line-height: 28px; letter-spacing: 0.007em;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

/* Language: EN is the default; HR shows when the root carries data-l="hr" */
[hidden] { display: none !important; }
body [lang="hr"] { display: none !important; }
:root[data-l="hr"] body [lang="hr"] { display: revert !important; }
:root[data-l="hr"] body [lang="en"] { display: none !important; }

.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--margin)); margin: 0 auto; padding-inline: var(--margin); }

/* ---------- type scale (brand guide 4, digital) ---------- */
.overline { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 0; }
.statement { font-size: 40px; line-height: 48px; font-weight: 700; letter-spacing: 0.015em; margin: 0; max-width: 20ch; text-wrap: balance; }
.statement .soft { color: var(--muted); }
@media (min-width: 768px) { .statement { font-size: 48px; line-height: 56px; } }
@media (min-width: 1024px) { .statement { font-size: 56px; line-height: 64px; } }
h1 { font-size: 32px; line-height: 40px; font-weight: 700; letter-spacing: 0.015em; margin: 0; text-wrap: balance; }
@media (min-width: 768px) { h1 { font-size: 40px; line-height: 48px; } }
h2 { font-size: 24px; line-height: 32px; font-weight: 700; letter-spacing: 0.015em; margin: 0; text-wrap: balance; }
@media (min-width: 768px) { h2 { font-size: 32px; line-height: 40px; } }
h3 { font-size: 20px; line-height: 32px; font-weight: 600; letter-spacing: 0.02em; margin: 0; }
.lead { font-size: 20px; line-height: 32px; font-weight: 500; letter-spacing: 0.052em; color: var(--muted); margin: 0; max-width: 60ch; }
p { margin: 0; max-width: 65ch; }
.small { font-size: 14px; line-height: 24px; letter-spacing: 0.01em; color: var(--muted); }
.gold-text { color: var(--gold-text); }

/* ---------- header (404 pattern: links left, mark right) ---------- */
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--white); color: var(--navy); border-bottom: 1px solid transparent; transition: border-color .2s; }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header { background: rgba(255, 255, 255, 0.7); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
  :root[data-palette="navy"] .site-header { background: rgba(27, 52, 80, 0.7); }
  :root[data-palette="mono"] .site-header { background: rgba(255, 255, 255, 0.7); }
  :root[data-palette="graphite"] .site-header { background: rgba(54, 54, 54, 0.7); }
  /* bluebar: solid at the top of the page, frosted glass once the page scrolls */
  :root[data-palette="bluebar"] .site-header { background: #1B3450; transition: background-color .2s, border-color .2s; }
  :root[data-palette="bluebar"] .site-header.scrolled { background: rgba(27, 52, 80, 0.7); }
}
.site-header.scrolled { border-bottom-color: var(--line); }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 80px; }
@media (min-width: 1024px) { .bar { height: 96px; } }
.nav { display: none; align-items: center; gap: 32px; }
.nav a { white-space: nowrap; text-decoration: none; font-size: 15px; font-weight: 500; letter-spacing: 0.01em; padding-block: 8px; border-bottom: 1px solid transparent; }
.nav a { transition: border-color .15s; }
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--gold); }
.lang { display: flex; align-items: center; gap: 8px; padding-left: 24px; border-left: 1px solid var(--line-strong); }
.lang button { font: inherit; font-size: 14px; font-weight: 500; background: none; border: 0; padding: 4px; cursor: pointer; color: var(--muted); }
.lang button[aria-pressed="true"] { color: var(--navy); }
/* navbar text: gold on hover, stays gold when selected */
.site-header { --nav-gold: #8D7337; }
:root[data-palette="navy"] .site-header, :root[data-palette="graphite"] .site-header { --nav-gold: #C7A24D; }
.nav a, .mobile-nav a, .lang button { transition: color .15s, border-color .15s; }
.nav a:hover, .nav a[aria-current="page"], .mobile-nav a:hover, .mobile-nav a[aria-current="page"], .lang button:hover, .lang button[aria-pressed="true"] { color: var(--nav-gold); }
.menu-btn:hover { color: var(--nav-gold); }
.brand { display: block; color: var(--navy); line-height: 0; }
.brand svg { height: 40px; width: auto; }
@media (min-width: 1024px) { .brand svg { height: 48px; } .nav { display: flex; } .menu-btn { display: none; } }
.menu-btn { color: var(--navy); background: none; border: 0; border-radius: 8px; width: 48px; height: 48px; margin-left: -12px; padding: 0; cursor: pointer; display: grid; place-items: center; }
.menu-btn:hover { background: var(--raised); }
.burger { position: relative; width: 24px; height: 16px; display: block; }
.burger i { position: absolute; left: 0; width: 24px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .2s, opacity .2s, top .2s; }
.burger i:nth-child(1) { top: 0; } .burger i:nth-child(2) { top: 7px; } .burger i:nth-child(3) { top: 14px; }
.menu-btn[aria-expanded="true"] .burger i:nth-child(1) { top: 7px; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] .burger i:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] .burger i:nth-child(3) { top: 7px; transform: rotate(-45deg); }
@media (min-width: 1024px) { .menu-btn { display: none; } }
@media (min-width: 1024px) and (max-width: 1279px) { .nav { gap: 24px; } }
.mobile-nav { border-top: 1px solid var(--line); padding-block: 24px 32px; }
.mobile-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mobile-nav a { display: block; text-decoration: none; font-size: 24px; line-height: 40px; font-weight: 600; }
.mobile-nav .lang { border: 0; padding: 24px 0 0; }
@media (min-width: 1024px) { .mobile-nav { display: none !important; } }

/* ---------- sections ---------- */
main { display: block; }
.route { animation: rise .35s ease both; }
@keyframes rise { from { opacity: .6; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.section { padding-block: 64px; }
@media (min-width: 1024px) { .section { padding-block: 96px; } }
.section.tight { padding-block: 48px; }
.hero { padding-block: 48px 64px; }
@media (min-width: 1024px) { .hero { padding-block: 64px 96px; } }
.stack { display: flex; flex-direction: column; gap: 24px; }
.stack-lg { display: flex; flex-direction: column; gap: 48px; }
.row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.split { display: grid; gap: 32px; }
@media (min-width: 1024px) { .split { grid-template-columns: 4fr 8fr; gap: 24px; } }
.head-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 32px; }

.textlink { font-size: 15px; font-weight: 500; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.textlink:hover { color: var(--gold-text); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 24px; border-radius: 8px; font-family: inherit; font-size: 16px; font-weight: 500; text-decoration: none; cursor: pointer; border: 1px solid var(--navy); background: transparent; color: var(--navy); transition: background .15s; }
.btn:hover { background: var(--raised); }
.btn:active { background: var(--line); }
.btn.primary { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }
.btn.primary:hover { background: var(--gold-hover); border-color: var(--gold-hover); }
.btn.primary:active { background: var(--gold-press); color: var(--white); }
.btn:disabled { background: var(--sunken); border-color: var(--sunken); color: var(--muted); cursor: not-allowed; }
@media (max-width: 767px) { .btn { height: 44px; } }

.full-bleed { width: 100%; max-width: calc(var(--max) + 2 * var(--margin)); margin: 0 auto; padding-inline: var(--margin); }
.frame { background: var(--raised); border-radius: 16px; overflow: hidden; }
.frame img { width: 100%; height: 100%; object-fit: cover; }
.ratio-wide { aspect-ratio: 1.414 / 1; max-width: 100%; }
/* home hero: motherboard loop as a background glow behind the slogan, no frame.
   A soft, many-step radial mask lets the circuits fade out gradually; on the dark palettes "lighten"
   drops the board's near-black so only the lit traces and parts remain on the page colour. */
.hero-split { display: grid; gap: 32px; align-items: center; position: relative; }
.hero-split > .stack { position: relative; z-index: 1; }
.hero-loop { position: relative; aspect-ratio: 16 / 9; width: 100%; max-width: 640px; justify-self: center; pointer-events: none; }
.hero-loop video { width: 100%; height: 100%; object-fit: cover; display: block;
  /* organic mask (tools/maska_petlje.py): irregular cloud round the processor, traces fade out past it, video edges always hidden */
  -webkit-mask-image: url(img/maticna-maska-v2.png); -webkit-mask-size: 100% 100%; -webkit-mask-repeat: no-repeat;
          mask-image: url(img/maticna-maska-v2.png); mask-size: 100% 100%; mask-repeat: no-repeat; mask-mode: alpha; }
@media (min-width: 1024px) {
  .hero-split { grid-template-columns: 7fr 5fr; gap: 24px; min-height: 520px; }
  .hero-loop { position: absolute; z-index: 0; max-width: none; width: min(60vw, 960px);
    right: calc(-1 * var(--margin) - 12vw); top: 50%; transform: translateY(-50%); }
}
/* the loop bleeds past the right edge; clip it so the page never scrolls sideways */
section[data-route="home"] { overflow-x: clip; }
:root[data-palette="navy"] .hero-loop video, :root[data-palette="graphite"] .hero-loop video { mix-blend-mode: lighten; }

/* home: slogan film above the work carousel. Plays muted on its own; the button or the player controls turn the sound on. */
.slogan-film { position: relative; aspect-ratio: 16 / 9; background: #0D1F23; }
.slogan-film video { width: 100%; height: 100%; object-fit: cover; display: block; }
.film-sound { position: absolute; top: 16px; right: 16px; font: inherit; font-size: 14px; font-weight: 500; height: 40px; padding: 0 16px; border-radius: 999px;
  border: 1px solid #C7A24D; background: rgba(13,31,35,0.75); color: #C7A24D; cursor: pointer; }
.film-sound:hover { background: rgba(13,31,35,0.95); }

/* home: carousel of past work. One card sits on top in the middle, whole; the others stack behind it, smaller,
   to the left and right. The stack flows smoothly left to right and the cards take turns on top.
   Hover pauses it, a click on a side card brings that one to the top. Positions are set by the script. */
.works-ticker { position: relative; width: 100%; padding-block: 24px 16px; overflow: hidden; }
.wt-stage { position: relative; height: 380px; }
@media (max-width: 767px) { .wt-stage { height: 260px; } }
.wt-card { position: absolute; left: 50%; top: 24px; height: 320px; border-radius: 12px; overflow: hidden; background: var(--raised); cursor: pointer;
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.55); transform-origin: 50% 60%;
  transition: box-shadow .3s ease; will-change: transform; }
@media (max-width: 767px) { .wt-card { height: 210px; top: 16px; } }
.wt-card { width: max-content; }
/* keep each picture's real proportions: the global img max-width would squeeze it on narrow screens */
.wt-card img, .wt-card video { height: 100%; width: auto; max-width: none; display: block; pointer-events: none; }
.wt-card.is-top { cursor: default; box-shadow: var(--glow); }
@media (prefers-reduced-motion: reduce) { .wt-card { transition: none; } }

/* ---------- work grid ---------- */
.work-grid { display: grid; gap: 48px 24px; }
@media (min-width: 768px) { .work-grid { grid-template-columns: 1fr 1fr; } }
.work-card { text-decoration: none; display: flex; flex-direction: column; gap: 16px; }
.work-card .frame { aspect-ratio: 1.414 / 1; transition: opacity .2s; }
.work-card:hover .frame { opacity: .88; }
.work-card .frame { position: relative; }
.frame .badge { position: absolute; top: 16px; left: 16px; background: rgba(13,31,35,0.85); color: #C7A24D; border-color: #C7A24D; }
.work-card h3 { font-size: 20px; line-height: 28px; font-weight: 600; }
.work-card .client { color: var(--muted); font-size: 15px; line-height: 24px; }
.work-card:hover h3 { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
/* card whose image opens the case study and whose small link opens the client site */
.work-main { text-decoration: none; display: flex; flex-direction: column; gap: 16px; }
.work-card > .client { margin-top: -16px; }
.work-card .site-link { color: inherit; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; transition: color .15s; }
.work-card .site-link:hover { color: var(--gold-text); }
div.work-card:hover h3 { text-decoration: none; }
div.work-card .work-main:hover h3 { text-decoration: underline; }
div.work-card:hover .frame { opacity: 1; }
div.work-card .work-main:hover .frame { opacity: .88; }
/* hover: the card lifts and a gold neon glows underneath it (founder's decision, 2 Oct 2026; exception to the brand guide's no-shadow rule) */
.work-card .frame { transition: transform .25s ease, box-shadow .25s ease; }
.work-card:hover .frame, div.work-card .work-main:hover .frame { opacity: 1; transform: translateY(-8px); box-shadow: var(--glow); }
div.work-card:hover .frame { transform: none; box-shadow: none; }
div.work-card .work-main:hover .frame { transform: translateY(-8px); box-shadow: var(--glow); }
.work-card .work-main:focus-visible .frame, a.work-card:focus-visible .frame { transform: translateY(-8px); box-shadow: var(--glow); }
@media (prefers-reduced-motion: reduce) { .work-card:hover .frame, div.work-card .work-main:hover .frame { transform: none; } }
.tile-type { display: grid; place-items: center; height: 100%; background: var(--band-bg); color: var(--band-ink); padding: 32px; text-align: center; }
.tile-type .big { font-size: 40px; line-height: 48px; font-weight: 700; letter-spacing: 0.015em; }
.pill { display: inline-flex; align-items: center; height: 24px; padding: 0 12px; border-radius: 999px; border: 1px solid currentColor; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }

/* ---------- navy feature band (404's "SoMo" block, in our colours) ---------- */
.band { background: var(--band-bg); color: var(--band-ink); border-radius: 16px; overflow: hidden; display: grid; }
@media (min-width: 1024px) { .band { grid-template-columns: 7fr 5fr; } }
.band .copy { padding: 32px; display: flex; flex-direction: column; gap: 24px; justify-content: center; }
@media (min-width: 768px) { .band .copy { padding: 64px; } }
.band .overline { color: var(--band-muted); }
.band p { color: var(--band-ink); }
.band .soft { color: var(--band-muted); }
.band .art { background: var(--raised); display: grid; place-items: center; padding: 32px; min-height: 240px; }
.band .btn { border-color: var(--band-ink); color: var(--band-ink); }
.band .btn:hover { background: var(--band-hover); }
.band .btn.primary { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }
.band .gold { color: var(--band-gold); }
.file-mock { width: 100%; max-width: 360px; background: var(--white); border: 1px solid var(--line); border-radius: 8px; padding: 24px; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 13px; line-height: 22px; color: var(--navy); }
.file-mock .fn { font-weight: 600; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.file-mock .m { color: var(--muted); }

/* ---------- lists ---------- */
.services { display: grid; gap: 0; border-top: 1px solid var(--line); }
.svc { display: grid; gap: 16px; padding-block: 32px; border-bottom: 1px solid var(--line); }
@media (min-width: 1024px) { .svc { grid-template-columns: 5fr 7fr; gap: 24px; align-items: start; } }
.svc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.svc li { display: block; gap: 16px; font-size: 15px; line-height: 24px; border-bottom: 1px dashed var(--line); padding-bottom: 8px; }
.svc li:last-child { border-bottom: 0; }
.svc .price { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--muted); }
.note { border-left: 2px solid var(--gold); padding-left: 24px; }
.note.grey { border-left-color: var(--line-strong); }

.news { display: grid; gap: 32px 24px; }
@media (min-width: 768px) { .news { grid-template-columns: repeat(3, 1fr); } }
.news article { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; border-top: 1px solid var(--navy); }

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding-block: 24px; font-size: 18px; line-height: 28px; font-weight: 600; display: flex; justify-content: space-between; gap: 24px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 400; font-size: 24px; color: var(--muted); }
.faq details[open] summary::after { content: "−"; }
.faq .a { padding-bottom: 24px; }

/* ---------- case study page (404: meta left, story right) ---------- */
.case-head { display: flex; flex-direction: column; gap: 8px; }
.case-head .client { font-size: 24px; line-height: 32px; color: var(--muted); font-weight: 500; }
.meta { display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 24px; }
.meta .yr { color: var(--muted); }
.story { display: flex; flex-direction: column; gap: 24px; }
.story h2 { margin-top: 24px; }
.story h2:first-child { margin-top: 0; }
.story ul { margin: 0; padding-left: 24px; display: grid; gap: 8px; max-width: 65ch; }
.gallery { display: grid; gap: 24px; }
@media (min-width: 768px) { .gallery { grid-template-columns: 1fr 1fr; } .gallery .wide { grid-column: 1 / -1; } }
.gallery .frame { aspect-ratio: 1.414 / 1; }
.swatches { display: flex; flex-wrap: wrap; gap: 16px; }
.sw { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 24px; font-variant-numeric: tabular-nums; }
.sw i { width: 24px; height: 24px; border-radius: 4px; border: 1px solid var(--line); display: block; }
.quote { font-size: 20px; line-height: 32px; font-weight: 500; max-width: 50ch; }

/* ---------- shop ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.chip { font: inherit; font-size: 14px; font-weight: 500; height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--white); color: var(--navy); cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--white); }
.products { display: grid; gap: 24px; }
@media (min-width: 640px) { .products { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .products { grid-template-columns: repeat(3, 1fr); } }
.product { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--white); }
.product .vis { aspect-ratio: 4 / 3; background: var(--raised); display: grid; place-items: center; color: var(--navy); position: relative; max-width: 100%; }
.product .vis.dark { background: var(--band-bg); color: var(--band-ink); }
.product .vis svg { width: 64px; height: auto; }
.product .vis .kind { position: absolute; top: 16px; left: 16px; }
.product .body { padding: 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.product .foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: auto; padding-top: 16px; }
.product .amount { font-size: 20px; line-height: 32px; font-weight: 700; font-variant-numeric: tabular-nums; }
.product .amount.tba { font-size: 14px; font-weight: 500; color: var(--muted); }
.affiliate-flag { font-size: 12px; line-height: 16px; color: var(--muted); }

/* ---------- forms ---------- */
.form { display: grid; gap: 24px; }
@media (min-width: 768px) { .form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } }
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field label { font-size: 14px; line-height: 24px; font-weight: 500; }
.field .q { font-size: 13px; line-height: 20px; color: var(--muted); }
input[type="text"], input[type="email"], textarea, select {
  font-family: inherit; font-size: 16px; line-height: 24px; color: var(--navy); background: var(--white);
  border: 1px solid var(--line-strong); border-radius: 8px; padding: 16px; width: 100%; min-width: 0; min-height: 56px;
}
textarea { resize: vertical; min-height: 120px; }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--gold); outline-offset: 0; border-color: transparent; }
.check { display: grid; grid-template-columns: 20px 1fr; gap: 16px; align-items: start; font-size: 14px; line-height: 24px; color: var(--navy); cursor: pointer; }
.check input { width: 16px; height: 16px; margin: 4px 0 0; accent-color: var(--gold); }
.status { font-size: 14px; line-height: 24px; color: var(--navy); min-height: 24px; }

/* ---------- brand brain builder ---------- */
/* temporarily out of service: remove data-bbb-off from the section to bring the tool back */
[data-bbb-off] #bbbSteps, [data-bbb-off] .stack-lg, [data-bbb-off] .hero .lead { display: none !important; }
.bbb-maintenance { display: none; }
[data-bbb-off] .bbb-maintenance { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.bbb-grid { display: grid; gap: 24px; }
@media (min-width: 768px) { .bbb-grid { grid-template-columns: 1fr 1fr; } .bbb-grid .full { grid-column: 1 / -1; } }
.steps { list-style: none; display: flex; flex-wrap: wrap; gap: 16px; margin: 0; padding: 0; }
.steps li { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.steps .n { width: 24px; height: 24px; border-radius: 999px; border: 1px solid var(--line-strong); display: grid; place-items: center; font-size: 12px; font-weight: 600; }
.steps li.on { color: var(--navy); font-weight: 500; }
.steps li.on .n { background: var(--navy); border-color: var(--navy); color: var(--white); }
.card { background: var(--raised); border: 1px solid var(--line); border-radius: 16px; padding: 24px; }
@media (min-width: 768px) { .card { padding: 32px; } }
.result { display: grid; gap: 24px; }
@media (min-width: 1024px) { .result { grid-template-columns: 7fr 5fr; align-items: start; } }
pre.out { margin: 0; background: var(--white); border: 1px solid var(--line); border-radius: 8px; padding: 24px; overflow-x: auto; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 13px; line-height: 22px; white-space: pre-wrap; word-break: break-word; max-height: 560px; overflow-y: auto; }
.locklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.locklist li { display: grid; grid-template-columns: 24px 1fr; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.locklist li:last-child { border-bottom: 0; padding-bottom: 0; }
.locklist .nm { font-family: ui-monospace, Consolas, monospace; font-size: 14px; font-weight: 600; word-break: break-all; }
.locklist .ds { display: block; font-size: 13px; line-height: 20px; color: var(--muted); }
.lock { color: var(--muted); }
.codebox { border: 1px dashed var(--gold); border-radius: 8px; padding: 16px 24px; display: flex; flex-direction: column; gap: 4px; }
.codebox .code { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 24px; line-height: 32px; font-weight: 700; letter-spacing: 0.08em; color: var(--gold-text); user-select: all; }
.bigprice s { font-size: 24px; color: var(--muted); font-weight: 500; margin-right: 8px; }
.bigprice { font-size: 40px; line-height: 48px; font-weight: 700; color: var(--gold-text); font-variant-numeric: tabular-nums; margin: 0; }

/* ---------- about ---------- */
.portrait { background: var(--navy); border-radius: 16px; aspect-ratio: 4 / 5; max-width: 100%; display: grid; place-items: center; color: var(--white); position: relative; }
.portrait svg { width: 30%; height: auto; color: var(--band-gold); }
.portrait .cap { position: absolute; left: 24px; bottom: 24px; font-size: 12px; line-height: 16px; color: var(--band-muted); letter-spacing: 0.06em; text-transform: uppercase; }
.values { display: grid; gap: 32px 24px; }
@media (min-width: 768px) { .values { grid-template-columns: repeat(3, 1fr); } }
.values div { border-top: 1px solid var(--navy); padding-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.twocol { display: grid; gap: 24px; }
@media (min-width: 768px) { .twocol { grid-template-columns: 1fr 1fr; } }
.twocol ul { margin: 0; padding-left: 24px; display: grid; gap: 8px; }

/* ---------- about: photo portrait, timeline, name mark ---------- */
.portrait.photo { margin: 0; overflow: hidden; background: var(--raised); }
.portrait.photo img { width: 100%; height: 100%; object-fit: cover; }
.portrait.photo .cap { color: #FFFFFF; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-left: 1px solid var(--line-strong); }
.timeline li { position: relative; padding: 0 0 32px 32px; display: flex; flex-direction: column; gap: 8px; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before { content: ""; position: absolute; left: -6px; top: 6px; width: 11px; height: 11px; border-radius: 99px; background: var(--gold); }
.timeline .yr { font-size: 14px; line-height: 24px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold-text); }
.band .art.name-art { padding: 0; background: #1D3450; }
.band .art.name-art img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 768px) { .values.steps4 { grid-template-columns: repeat(4, 1fr); } }

/* ---------- footer (404: big line + mail, link columns) ---------- */
.site-footer { background: var(--foot-bg); color: var(--foot-ink); margin-top: 64px; }
.site-footer .top { display: grid; gap: 48px; padding-block: 64px 48px; }
@media (min-width: 1024px) { .site-footer .top { grid-template-columns: 5fr 7fr; padding-block: 96px 64px; } }
.site-footer .brand { color: #C7A24D; }
.site-footer .brand svg { height: 48px; }
.cta-line { font-size: 24px; line-height: 32px; font-weight: 500; letter-spacing: 0.01em; max-width: 26ch; }
@media (min-width: 768px) { .cta-line { font-size: 32px; line-height: 40px; } }
.mail { display: inline-flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 24px; }
.mail .addr { font-size: 20px; line-height: 32px; font-weight: 500; color: var(--foot-gold); user-select: all; }
.copybtn { font: inherit; font-size: 14px; font-weight: 500; height: 40px; padding: 0 16px; border-radius: 8px; border: 1px solid var(--foot-line); background: transparent; color: var(--foot-ink); cursor: pointer; }
.copybtn:hover { background: var(--foot-hover); }
.cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 24px; margin-top: 48px; }
@media (min-width: 768px) { .cols { grid-template-columns: repeat(4, 1fr); } }
.cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cols a { text-decoration: none; font-size: 15px; line-height: 24px; color: var(--foot-ink); }
.cols a:hover { color: var(--foot-gold); }
.cols .overline { color: var(--foot-muted); margin-bottom: 16px; }
.cols ul.socials { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-left: -8px; }
.cols a.social { width: 36px; height: 36px; display: grid; place-items: center; color: var(--foot-ink); transition: color .15s; }
.cols a.social:hover { color: var(--foot-gold); }
.cols a.social svg { width: 20px; height: 20px; display: block; }
.bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; border-top: 1px solid var(--foot-line); padding-block: 24px 32px; font-size: 13px; line-height: 20px; color: var(--foot-muted); }
.bottom a { color: var(--foot-muted); }

/* ---------- palette variants (the site uses "navy"; the others are kept for reference) ---------- */
:root[data-palette="navy"] {
  color-scheme: dark;
  --white: #1B3450; --navy: #FFFFFF; --muted: #ABABAB; --gold-text: #C7A24D;
  --raised: rgba(255,255,255,0.05); --sunken: rgba(255,255,255,0.09); --line: rgba(255,255,255,0.16); --line-strong: rgba(255,255,255,0.28);
  --band-bg: #FFFFFF; --band-ink: #1B3450; --band-muted: #767676; --band-gold: #8D7337; --band-hover: #F6F7F8;
  --foot-bg: #363636;
}
:root[data-palette="mono"] {
  --navy: #000000;
  --band-bg: #000000; --foot-bg: #000000;
  --on-gold: #000000;
}
:root[data-palette="graphite"] {
  color-scheme: dark;
  --white: #363636; --navy: #FFFFFF; --muted: #ABABAB; --gold-text: #C7A24D;
  --raised: rgba(255,255,255,0.05); --sunken: rgba(255,255,255,0.09); --line: rgba(255,255,255,0.16); --line-strong: rgba(255,255,255,0.28);
  --band-bg: #1B3450;
  --foot-bg: #363636;
}
:root[data-palette="navy"] .site-header .brand { color: #C7A24D; }

/* ---------- legal pages ---------- */
.legal-link { text-decoration: none; }
.legal-link:hover h3 { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.doc { display: flex; flex-direction: column; gap: 16px; max-width: calc(760px + 2 * var(--margin)); margin-inline: 0; }
.doc h1 { margin-bottom: 16px; }
.doc h2 { font-size: 20px; line-height: 32px; margin-top: 24px; }
.doc ul, .doc ol { margin: 0; padding-left: 24px; display: grid; gap: 8px; max-width: 65ch; }
.doc a { color: var(--gold-text); }
.doc .back { color: var(--muted); text-decoration: none; }
.doc .back::before { content: "← "; }
.facts { display: grid; grid-template-columns: 1fr; gap: 4px 24px; margin: 0; }
@media (min-width: 768px) { .facts { grid-template-columns: 200px 1fr; } }
.facts dt { font-size: 14px; line-height: 24px; color: var(--muted); padding-top: 16px; }
.facts dd { margin: 0; padding-top: 0; }
@media (min-width: 768px) { .facts dt, .facts dd { padding-block: 16px; border-top: 1px solid var(--line); } }
.tablewrap { overflow-x: auto; max-width: 100%; }
.legal-table { border-collapse: collapse; width: 100%; min-width: 640px; font-size: 14px; line-height: 24px; }
.legal-table th, .legal-table td { text-align: left; vertical-align: top; padding: 16px 16px 16px 0; border-top: 1px solid var(--line); }
.legal-table th { font-weight: 600; color: var(--muted); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
.form-model p { font-family: ui-monospace, Consolas, monospace; font-size: 14px; line-height: 24px; }

/* ---------- cookie banner ---------- */
.cookie-bar { position: fixed; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 60; margin: 0 auto; max-width: 720px; background: #FFFFFF; color: #1B3450; border: 1px solid #D1D6DC; border-radius: 16px; padding: 24px; display: grid; gap: 16px; font-family: var(--font); }
.cookie-bar h2 { font-size: 18px; line-height: 28px; margin: 0; color: #1B3450; }
.cookie-bar p { font-size: 14px; line-height: 24px; color: #363636; margin: 0; max-width: none; }
.cookie-bar a { color: #8D7337; }
.cookie-bar .cb-row { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 640px) { .cookie-bar .cb-row { grid-template-columns: 1fr 1fr 1fr; } }
.cookie-bar button.cb { font: inherit; font-size: 15px; font-weight: 500; height: 48px; border-radius: 8px; border: 1px solid #1B3450; background: #FFFFFF; color: #1B3450; cursor: pointer; }
.cookie-bar button.cb:hover { background: #F6F7F8; }
.cookie-bar .cb-prefs { display: grid; gap: 8px; border-top: 1px solid #E4E7EA; padding-top: 16px; }
.cookie-bar .cb-prefs label { display: grid; grid-template-columns: 20px 1fr; gap: 16px; font-size: 14px; line-height: 24px; color: #363636; cursor: pointer; }
.cookie-bar .cb-prefs input { width: 16px; height: 16px; margin: 4px 0 0; accent-color: #1B3450; }
.linkbtn { font: inherit; background: none; border: 0; padding: 0; cursor: pointer; color: var(--foot-ink); font-size: 15px; line-height: 24px; text-align: left; }
.linkbtn:hover { color: var(--foot-gold); }

/* Preview ribbon: this build is not the live site */
.preview-ribbon { background: var(--white); color: var(--muted); font-size: 13px; line-height: 20px; text-align: center; padding: 8px var(--margin); }

/* palette "bluebar": white page, navy frosted navbar, navy footer.
   On white: text #1B3450, secondary #767676, gold as text only #8D7337, gold button with navy text.
   On navy (navbar, footer, feature band): text white, secondary #ABABAB, gold #C7A24D. */
:root[data-palette="bluebar"] { --foot-bg: #1B3450; }
:root[data-palette="bluebar"] .site-header {
  --navy: #FFFFFF; --muted: #ABABAB; --raised: rgba(255,255,255,0.08);
  --line: rgba(255,255,255,0.16); --line-strong: rgba(255,255,255,0.28); --nav-gold: #C7A24D;
  --white: #1B3450; color: #FFFFFF;
}
:root[data-palette="bluebar"] .site-header .brand { color: #C7A24D; }
:root[data-palette="bluebar"] .preview-ribbon { background: #1B3450; color: #FFFFFF; }