/*
 * Clara Montesinos theme: design system.
 * Palette taken from the business card (petrol #133C46 + gold #BC9C22), refined for screens.
 * Gold rules: text and thin rules only, never buttons or backgrounds.
 * Gradient gold only on large headings over petrol; flat champagne gold for small text on petrol;
 * bronze for small labels on light backgrounds.
 */

@font-face { font-family: "DM Serif Display"; src: url(../fonts/dm-serif-display-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "DM Serif Display"; src: url(../fonts/dm-serif-display-latin-400-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url(../fonts/dm-sans-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url(../fonts/dm-sans-latin-400-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url(../fonts/dm-sans-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url(../fonts/dm-sans-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url(../fonts/dm-sans-latin-700-normal.woff2) format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --brand: #133C46;         /* petrol, from the business card */
  --brand-dark: #133C46;
  --deep: #0C2A31;          /* only for the home hero gradient */
  --ink: #13262B;
  --text: #3B4A4D;
  --muted: #5E6B6D;
  --bg: #F6F3EC;            /* ivory */
  --white: #FFFFFF;
  --line: #E4DED2;
  --gold-text: #D4B26A;     /* champagne gold: small text on petrol (5.9:1) */
  --bronze: #8A6A2B;        /* small labels on light backgrounds (4.5:1) */
  --gold-gradient: linear-gradient(100deg, #9C7424 0%, #D9B866 22%, #F2DFA4 38%, #C49A3E 55%, #E9CD86 74%, #A8822F 100%);
  --gold-sweep: linear-gradient(105deg, transparent 40%, rgba(255, 248, 225, .9) 50%, transparent 60%); /* band of light for the logo shine */
  --serif: "DM Serif Display", Georgia, serif;
  --sans: "DM Sans", system-ui, sans-serif;

  /* Layout knobs: tweak live in DevTools (select <html>, edit :root) or here. */
  --wide-max: 1680px;                         /* header and home hero copy: max width of the row */
  --wide-gutter: clamp(20px, 4vw, 72px);      /* side padding of that row */
  --logo-height: clamp(52px, 1.5vw + 30px, 64px); /* header logo: 52px on laptops, ~59px at 1920, 64px from ~2270px */
  --header-height: calc(var(--logo-height) + 40px); /* 92px to 104px */
  --hero-hair-top: calc(var(--header-height) + 18px); /* where the top of Clara's hair lands in the home hero, just below the header */
  --hero-copy-gap: 28px;                      /* space above and below the hero headline */
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--sans); color: var(--text); background: var(--bg); font-size: 18px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol.steps, ol.service-list { list-style: none; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 40px; }
/* Full-width container for the header and the home hero copy: logo at the left edge, menu and hero copy at the right. */
.wrap.wrap-wide { max-width: var(--wide-max); padding: 0 var(--wide-gutter); }
.narrow { max-width: 760px; margin: 0 auto; }

.eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--brand); display: block; }
.crumbs { font-size: 14px; color: var(--muted); margin-bottom: 18px; }
.crumbs a { color: var(--brand-dark); font-weight: 600; }
h1, h2, h3, h4.serif { font-family: var(--serif); font-weight: 400; color: var(--ink); letter-spacing: -0.01em; }
/* Headings: lines of similar length instead of a long line plus an orphan ("…confiado / en mí").
   Paragraphs: avoid a single word on the last line. Browsers without support simply ignore it. */
h1, h2, h3 { text-wrap: balance; }
/* Compound names that must not split across lines ("Content / Co-Founder", "Co- / Founder") */
.nowrap { white-space: nowrap; }
/* "balance" only applies to short blocks (about 6 lines in Chrome); long quotes and statements use "pretty" */
p, li, .statement, .quote { text-wrap: pretty; }
h1 { font-size: 72px; line-height: 1.02; }
h2 { font-size: 46px; line-height: 1.08; }
h3 { font-size: 30px; line-height: 1.15; }
h2 em, h1 em { font-style: italic; color: var(--brand); }
.lead { font-size: 21px; line-height: 1.55; color: var(--text); }
.sub { font-size: 17px; color: var(--muted); }
p + p { margin-top: 16px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 30px; border-radius: 100px; font-weight: 600; font-size: 16px; line-height: 1; border: 1.5px solid var(--brand); }
.btn-primary { background: var(--brand); color: #fff; }
.btn-ghost { color: var(--brand-dark); }
.btn-light { background: #fff; color: var(--brand-dark); border-color: #fff; }
.btn-outline-light { color: #fff; border-color: rgba(255,255,255,.55); }
.link { font-weight: 600; font-size: 16px; color: var(--brand-dark); display: inline-flex; gap: 8px; align-items: center; }
.link::after { content: "→"; transition: transform .2s ease; }
.ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 36px; }

/* Header */
.site-header { position: relative; z-index: 20; }
.nav { display: flex; align-items: center; justify-content: space-between; height: var(--header-height); }
.nav .logo { flex-shrink: 0; }
.nav .logo img { height: var(--logo-height); width: auto; }
.menu { display: flex; align-items: center; gap: 36px; font-size: 16px; font-weight: 500; color: var(--ink); }
.menu-list { display: flex; align-items: center; gap: 36px; }
.menu-item { position: relative; }
.menu-item > a { display: inline-flex; align-items: center; padding: 10px 0; }
.menu-item.is-current > a { color: var(--brand); }
.menu-item.has-children > a::after { content: ""; display: inline-block; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-3px); margin-left: 9px; }
.submenu { position: absolute; top: 100%; left: -18px; min-width: 240px; padding: 8px; background: var(--white); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 40px rgba(12,42,49,.12); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s ease, transform .18s ease, visibility .18s; }
.menu-item.has-children:hover .submenu, .menu-item.has-children:focus-within .submenu { opacity: 1; visibility: visible; transform: none; }
.submenu a { display: block; padding: 11px 14px; border-radius: 8px; color: var(--ink); }
.submenu a:hover, .submenu a:focus-visible { background: var(--bg); color: var(--brand); }
.submenu .is-current a { background: var(--line); }
.menu .btn { padding: 13px 22px; font-size: 15px; }
.burger { display: none; background: none; border: 0; cursor: pointer; }

/* Logo variants: white over the home hero, black everywhere else (and on the sticky bar) */
.nav .logo .logo-on-dark { display: none; }
.site-header--overlay .logo .logo-on-dark { display: block; }
.site-header--overlay .logo .logo-on-light { display: none; }

/* Sticky bar: added by navigation.js once the header has scrolled out of view */
.site-header.is-stuck { position: fixed; top: 0; left: 0; right: 0; background: rgba(246, 243, 236, .96); border-bottom: 1px solid var(--line); box-shadow: 0 10px 30px rgba(12, 42, 49, .06); animation: header-slide-down .35s ease-out both; }
@supports (backdrop-filter: blur(8px)) { .site-header.is-stuck { background: rgba(246, 243, 236, .88); backdrop-filter: blur(8px); } }
.admin-bar .site-header.is-stuck { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header.is-stuck { top: 46px; } }
/* Compact while stuck: the bar should accompany the reading, not weigh on it */
.site-header.is-stuck .nav { height: 76px; }
.site-header.is-stuck .nav .logo img { height: 44px; }
@keyframes header-slide-down { from { transform: translateY(-100%); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .site-header.is-stuck { animation: none; } }

/* Overlay header (home hero): white text over the photo */
.site-header--overlay { position: absolute; top: 0; left: 0; right: 0; }
.admin-bar .site-header--overlay { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header--overlay { top: 46px; } }
.site-header--overlay .menu, .site-header--overlay .menu-item > a { color: #fff; }
.site-header--overlay .menu-item.is-current > a { color: #fff; }
.site-header--overlay .menu .btn { background: transparent; color: #fff; border-color: rgba(255,255,255,.75); }

/* Accessibility helpers */
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 12px 18px; border-radius: 8px; background: var(--brand); color: #fff; font-weight: 600; }
.skip-link:focus { top: 16px; }

/* Sections */
section { padding: 112px 0; }
.s-white { background: var(--white); }
.s-alt { background: var(--line); }
.s-dark { background: var(--brand-dark); color: #D4E8E2; }
.s-ink { background: var(--ink); color: #C9D4D1; }
.s-dark h2, .s-dark h3, .s-ink h2, .s-ink h3 { color: #fff; }
.s-dark .eyebrow, .s-ink .eyebrow { color: var(--gold-text); }
.s-dark .link, .s-ink .link { color: #fff; }
.tight { padding: 72px 0; }
/* Two consecutive sections on the same white background read as one: no double padding between them */
.s-white + .s-white { padding-top: 0; }
.head { max-width: 760px; margin-bottom: 52px; }
.head h2 { margin: 14px 0 16px; }
.head p:not(.eyebrow) { font-size: 19px; color: var(--muted); }
.s-dark .head p:not(.eyebrow), .s-ink .head p:not(.eyebrow) { color: #CFE3DD; }
.center { text-align: center; margin-left: auto; margin-right: auto; }

/* Page hero */
.phero { padding: 24px 0 104px; }
.phero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }
.phero h1 { margin: 20px 0 24px; }
.phero h1.md { font-size: 60px; }
.phero .lead { max-width: 540px; }
.phero .sub { margin-top: 14px; max-width: 520px; }
.phero .tagline { font-family: var(--serif); font-size: 28px; line-height: 1.25; color: var(--brand-dark); margin: -8px 0 22px; }
.phero-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 24px; }
.phero-photo.wide img { aspect-ratio: 5 / 4; }
.phero-photo.square img { aspect-ratio: 1; }

/* Cards */
.grid-2, .grid-3, .grid-4 { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.card { background: var(--white); border: 1px solid var(--line); border-radius: 20px; padding: 32px; display: flex; flex-direction: column; }
.card .num { font-family: var(--serif); font-size: 20px; color: var(--brand); margin-bottom: 14px; display: block; }
.card h3 { font-size: 27px; margin-bottom: 10px; }
.card p { font-size: 17px; line-height: 1.6; }
.card .link { margin-top: auto; padding-top: 22px; }
.card.lift { box-shadow: 0 22px 48px rgba(20,33,30,.12); transform: translateY(-6px); }
.card.photo { padding: 0; overflow: hidden; }
.card.photo .ph { aspect-ratio: 4 / 3; overflow: hidden; }
.card.photo .ph img { width: 100%; height: 100%; object-fit: cover; }
.card.photo .bd { padding: 26px 28px 30px; display: flex; flex-direction: column; flex: 1; }
.card .meta { font-size: 14px; color: var(--muted); margin-bottom: 8px; font-weight: 500; }
.note-line { margin-top: 36px; font-size: 18px; color: var(--ink); font-weight: 500; }
.note-line::before { content: "— "; color: var(--brand); }

/* Split block */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.split.rev .split-ph { order: 2; }
.split-ph img { width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; border-radius: 24px; }
/* The photo spans the full height of the text column, so its edges line up with the eyebrow and the last element. Absolute so the image does not set the row height. Only on wide screens: narrower columns turn the photo portrait and crop out one of the two people */
@media (min-width: 1181px) {
  .split-fill { align-items: stretch; }
  .split-fill .split-ph { position: relative; }
  .split-fill .split-ph img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
}
.split h2 { margin: 14px 0 22px; }
/* Two text columns: both eyebrows on the same line instead of centring the shorter column */
.split.split-top { align-items: start; }

/* Chips */
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.chips span { padding: 9px 16px; border-radius: 100px; background: var(--white); border: 1px solid var(--line); font-size: 15px; font-weight: 500; color: var(--ink); }
.s-white .chips span { background: var(--bg); }
.s-dark .chips span { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color: #fff; }

/* Process steps: number inside a circle, label centred below, circles joined by a thin line from one
   circle edge to the next (reads as a sequence). Equal columns, so every circle sits at its column centre. */
.steps { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0; margin-top: 12px; counter-reset: s; }
.steps li { position: relative; padding: 0 8px; text-align: center; }
.steps li::before { counter-increment: s; content: counter(s); display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0 auto 16px; border: 1px solid var(--bronze); border-radius: 50%; background: var(--bg); font-family: var(--serif); font-size: 20px; line-height: 1; color: var(--brand); }
.steps li::after { content: ""; position: absolute; top: 22px; left: calc(50% + 30px); right: calc(-50% + 30px); border-top: 1px solid #D8CDB4; }
.steps li:last-child::after { display: none; }
.steps b { font-size: 16px; font-weight: 600; color: var(--ink); line-height: 1.35; display: block; }

/* Video */
.play { position: relative; border-radius: 24px; overflow: hidden; }
.play img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.play::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,33,30,0) 45%, rgba(20,33,30,.75)); }
.play .pbtn { position: absolute; left: 50%; top: 50%; width: 88px; height: 88px; margin: -44px 0 0 -44px; border-radius: 50%; background: rgba(255,255,255,.95); z-index: 2; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.play .pbtn::after { content: ""; position: absolute; left: 36px; top: 28px; border-left: 24px solid var(--brand); border-top: 16px solid transparent; border-bottom: 16px solid transparent; }
.play .cap { position: absolute; left: 32px; bottom: 28px; right: 32px; z-index: 2; color: #fff; }
.play .cap b { display: block; font-family: var(--serif); font-weight: 400; font-size: 40px; line-height: 1.12; }
.play .cap span { font-size: 19px; opacity: .85; }
.play.sm img { aspect-ratio: 16 / 9; }
.play.sm .cap { left: 20px; right: 20px; bottom: 16px; }
.play.sm .cap b { font-size: 24px; font-weight: 400; color: #fff; }
.media-card { background: var(--white); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; }
.media-card .play { border-radius: 0; }
.media-card .bd { padding: 20px 22px 24px; }
.media-card .meta { font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); margin-bottom: 6px; display: block; }
.media-card b { font-weight: 600; color: var(--ink); font-size: 17px; line-height: 1.35; display: block; }
/* Media cards: small play button in the top corner, clear of titles. Covers that carry their own title need no dark gradient. Square covers sit on their own background colour */
.play.sm .pbtn { left: auto; top: 14px; right: 14px; width: 48px; height: 48px; margin: 0; }
.play.sm .pbtn::after { left: 19px; top: 14px; border-left-width: 14px; border-top-width: 10px; border-bottom-width: 10px; }
.play.play-poster::after { display: none; }
/* Featured interview inside a split: compact card with the video thumbnail beside its title */
.video-teaser { display: grid; grid-template-columns: clamp(160px, 42%, 220px) 1fr; gap: 22px; align-items: center; margin-top: 32px; padding: 12px 22px 12px 12px; background: var(--bg); border: 1px solid var(--line); border-radius: 20px; transition: transform .2s ease, box-shadow .2s ease; }
.video-teaser:hover { transform: translateY(-4px); box-shadow: 0 22px 48px rgba(12,42,49,.10); }
.video-teaser .play { border-radius: 12px; }
.video-teaser .play::after { display: none; }
/* Bottom corner: the top right of this thumbnail is Clara's face */
.video-teaser .play.sm .pbtn { top: auto; bottom: 10px; right: 10px; width: 40px; height: 40px; }
.video-teaser .play.sm .pbtn::after { left: 16px; top: 12px; border-left-width: 12px; border-top-width: 8px; border-bottom-width: 8px; }
.video-teaser .meta { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--bronze); }
.video-teaser b { display: block; margin-bottom: 8px; font-weight: 600; font-size: 18px; line-height: 1.35; color: var(--ink); }
.video-teaser:hover .link::after { transform: translateX(4px); }
/* Product teaser (CRM template) inside a service page: square cover beside a short pitch */
.product-teaser { display: grid; grid-template-columns: 280px minmax(0, 600px); gap: 48px; align-items: center; padding: 24px 40px 24px 24px; background: var(--white); border: 1px solid var(--line); border-radius: 24px; }
.product-teaser img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 16px; }
.product-teaser .h3 { margin: 10px 0 12px; }
.product-teaser .ctas { margin-top: 24px; }
.play-square { background: #F0EFEA; }
.play.play-square img { object-fit: contain; }
.poster-type { aspect-ratio: 16 / 10; background: var(--ink); color: #fff; display: flex; align-items: flex-end; padding: 22px; position: relative; }
.poster-type.green { background: var(--brand); }
.poster-type .big { font-family: var(--serif); font-size: 30px; line-height: 1.1; }
.poster-type .ico { position: absolute; top: 20px; right: 20px; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.15); }
.poster-type .ico::after { content: ""; position: absolute; left: 17px; top: 13px; border-left: 14px solid #fff; border-top: 9px solid transparent; border-bottom: 9px solid transparent; }
.poster-type .ico.audio::after { left: 15px; top: 12px; width: 14px; height: 20px; border: 0; border-radius: 7px; background: #fff; }

/* Logos */
.logo-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.logo-grid div { background: var(--white); border: 1px solid var(--line); border-radius: 14px; height: 104px; display: flex; align-items: center; justify-content: center; padding: 18px 22px; }
.s-white .logo-grid div { background: var(--bg); border-color: transparent; }
.logo-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.logo-grid.cols-7 { grid-template-columns: repeat(7, 1fr); }
.logo-grid.cols-9 { grid-template-columns: repeat(9, 1fr); }
.logo-grid.cols-9 div { height: 88px; padding: 14px; }
.grid-4 .card h3 { font-size: 23px; }
.logo-grid img { max-height: 46px; max-width: 100%; width: auto; opacity: .78; }
.logo-grid img.tall { max-height: 62px; }
.logo-label { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 36px 0 16px; }
.logo-label:first-of-type { margin-top: 0; }

/* Statement / quote */
.statement { font-family: var(--serif); font-size: 44px; line-height: 1.18; color: var(--ink); }
.s-dark .statement, .s-ink .statement { color: #fff; }
.quote { border-left: 3px solid var(--brand); padding: 6px 0 6px 28px; font-family: var(--serif); font-size: 30px; line-height: 1.3; color: var(--ink); }

/* Related pages */
.related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.related a { background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 24px 26px; display: flex; justify-content: space-between; align-items: center; font-family: var(--serif); font-size: 24px; color: var(--ink); }
.related a::after { content: "→"; font-family: var(--sans); color: var(--brand); font-size: 20px; }

/* Placeholder (pending content) */
.todo { border: 2px dashed #9DBFB6; border-radius: 20px; padding: 28px 32px; color: var(--muted); background: rgba(255,255,255,.5); }
.todo b { color: var(--brand-dark); display: block; margin-bottom: 4px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }

/* Method */
.letters { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid rgba(255,255,255,.22); border-bottom: 1px solid rgba(255,255,255,.22); }
.letters div { padding: 34px 22px 32px; border-right: 1px solid rgba(255,255,255,.22); }
.letters div:last-child { border-right: 0; }
.letters b { display: block; font-family: var(--serif); font-weight: 400; font-size: 92px; line-height: 1; color: #fff; }
.letters span { display: block; margin: 16px 0 10px; font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-text); }
.letters p { font-size: 15.5px; line-height: 1.55; color: #D4E8E2; }
.letter-rows div { display: grid; grid-template-columns: 140px 260px 1fr; align-items: center; gap: 32px; padding: 30px 0; border-top: 1px solid var(--line); }
.letter-rows div:last-child { border-bottom: 1px solid var(--line); }
.letter-rows b { font-family: var(--serif); font-weight: 400; font-size: 110px; line-height: .9; color: var(--brand); }
.letter-rows h2 { font-size: 34px; }
.letter-rows p { font-size: 19px; }
/* Room between the eyebrow and the first divider line */
.eyebrow + .checks { margin-top: 18px; }
.checks li { position: relative; padding: 18px 0 18px 44px; border-top: 1px solid var(--line); font-size: 19px; color: var(--ink); font-weight: 500; }
.checks li::before { content: ""; position: absolute; left: 4px; top: 24px; width: 18px; height: 10px; border-left: 2.5px solid var(--brand); border-bottom: 2.5px solid var(--brand); transform: rotate(-45deg); }

/* Article */
.article { max-width: 720px; margin: 0 auto; }
.article p { font-size: 20px; line-height: 1.75; color: var(--text); }
.article h2 { font-size: 38px; margin: 64px 0 22px; }
.article ul.bul { margin: 22px 0; }
.article ul.bul li { position: relative; padding-left: 26px; font-size: 20px; line-height: 1.6; margin-bottom: 10px; color: var(--ink); }
.article ul.bul li::before { content: ""; position: absolute; left: 0; top: 13px; width: 10px; height: 2px; background: var(--brand); }
.article .pull { font-family: var(--serif); font-size: 36px; line-height: 1.22; color: var(--brand-dark); margin: 48px 0; padding: 34px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.byline { display: flex; align-items: center; gap: 14px; margin-top: 30px; font-size: 15px; color: var(--muted); }
.byline img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; }
.byline b { color: var(--ink); display: block; font-size: 16px; }

/* Blog posts (old classic-editor content) and listings */
.entry h1 { margin: 16px 0 40px; font-size: 56px; }
.entry-content > * + * { margin-top: 1.2em; }
.entry-content h2 { font-size: 34px; margin: 56px 0 18px; }
.entry-content h3 { font-size: 26px; margin: 40px 0 14px; }
.entry-content a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.entry-content ul, .entry-content ol { padding-left: 1.4em; font-size: 20px; line-height: 1.7; }
.entry-content li + li { margin-top: 6px; }
.entry-content blockquote { border-left: 3px solid var(--bronze); padding-left: 24px; font-family: var(--serif); font-size: 26px; line-height: 1.35; color: var(--ink); }
.entry-content img, .entry-content figure, .entry-content .wp-caption { max-width: 100%; height: auto; border-radius: 12px; }
.entry-content .wp-caption-text, .entry-content figcaption { font-size: 14px; color: var(--muted); margin-top: 8px; }
.entry-content .aligncenter { display: block; margin-left: auto; margin-right: auto; }
.entry-content iframe { max-width: 100%; }
.entry-content table { width: 100%; border-collapse: collapse; font-size: 16px; }
.entry-content th, .entry-content td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.entry-content th { font-weight: 600; color: var(--ink); background: var(--white); }
.entry-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 72px; padding-top: 32px; border-top: 1px solid var(--line); }
.entry-nav a { font-weight: 600; color: var(--ink); }
.entry-nav span { display: block; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--bronze); margin-bottom: 6px; }
.entry-nav-next { grid-column: 2; text-align: right; }
.post-list { list-style: none; margin-top: 32px; }
.post-list li { padding: 28px 0; border-top: 1px solid var(--line); }
.post-list time { font-size: 14px; color: var(--muted); }
.post-list h2 { font-size: 28px; margin: 6px 0 10px; }
.post-list h2 a:hover { color: var(--brand); }
.post-list p { color: var(--text); }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 40px; }
.pagination .page-numbers { display: inline-flex; min-width: 44px; height: 44px; align-items: center; justify-content: center; padding: 0 14px; border: 1px solid var(--line); border-radius: 100px; font-weight: 600; color: var(--ink); }
.pagination .page-numbers.current { background: var(--brand); border-color: var(--brand); color: #fff; }
.pagination .page-numbers.dots { border: 0; }
.not-found { padding: 80px 0 140px; }

/* Form */
.form-card { background: var(--white); border-radius: 24px; padding: 44px; box-shadow: 0 24px 60px rgba(20,33,30,.08); }
.form-card h3 { margin-bottom: 26px; }
.field { margin-bottom: 20px; }
.field label { display: block; font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.field label i { color: var(--brand); font-style: normal; }
.input { border: 1.5px solid var(--line); border-radius: 12px; height: 54px; background: var(--bg); padding: 0 16px; display: flex; align-items: center; font-size: 16px; color: #8A9794; }
.input.area { height: 120px; align-items: flex-start; padding-top: 14px; }
.input.sel { justify-content: space-between; color: var(--ink); }
.input.sel::after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translateY(-3px); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pills span { padding: 10px 16px; border-radius: 100px; border: 1.5px solid var(--line); font-size: 15px; font-weight: 500; color: var(--ink); background: var(--white); }
.pills span.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.consent { display: flex; gap: 12px; font-size: 14px; color: var(--muted); margin: 6px 0 26px; align-items: flex-start; }
.consent i { width: 20px; height: 20px; border: 1.5px solid var(--muted); border-radius: 5px; flex: none; margin-top: 2px; }
.contact-list li { padding: 18px 0; border-top: 1px solid var(--line); }
.contact-list li:last-child { border-bottom: 1px solid var(--line); }
.contact-list span { display: block; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.contact-list b { font-size: 20px; font-weight: 500; color: var(--ink); }

/* Page templates: markup details that the mockup solved with inline styles */
a.play, a.media-card, span.play, .play .cap, .media-card .bd { display: block; }
a.media-card, a.card.photo { transition: transform .2s ease, box-shadow .2s ease; }
a.media-card:hover, a.card.photo:hover { transform: translateY(-4px); box-shadow: 0 22px 48px rgba(12,42,49,.10); }
.card.photo .ph { display: block; }
.media-grid { margin-top: 24px; }
.split-link { margin-top: 28px; }
.related { margin-top: 22px; }
.large-text { font-size: 19px; }
.after-quote { margin-top: 28px; }
.after-statement { margin-top: 22px; }
.after-letters { margin-top: 32px; }
.statement-small { font-size: 28px; margin-top: 28px; }
.statement-spaced { margin: 18px 0 26px; }
.ctas-center { justify-content: center; }
.head-spaced { margin: 72px 0 28px; }
/* Heading over a full-width element (process steps): title left, intro right, so the block spans the same
   width as what follows instead of stopping at 760px. */
.head-wide { max-width: none; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: end; }
.head-wide h2 { margin-bottom: 0; }
.logo-grid-spaced { margin-top: 22px; }
.logos-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.emphasis { color: var(--ink); font-weight: 600; }
.h3 { font-size: 30px; line-height: 1.15; }
.two-columns { gap: 72px; }
.column-title { margin: 14px 0 18px; font-size: 34px; }
.card-roomy { padding: 40px; }
.card-dark { background: var(--brand); border-color: var(--brand); color: #D3DCDD; }
.card-dark h2, .card-dark h3 { color: #fff; }
.card-dark .meta, .card-dark .eyebrow { color: var(--gold-text); }
.card-dark p { color: #D3DCDD; }
.card-dark .h3 { margin: 12px 0; font-size: 34px; }
.service-list { gap: 14px; }
.service-list .card { padding: 22px 24px; }
.service-list .num { margin-bottom: 6px; }
.service-list b { color: var(--ink); font-weight: 600; }
/* Click-to-load podcast: a preview with the same shape and colours as Spotify's square player (352px tall
   at this width, 12px radius, colour taken from the cover art); the real player then replaces it. */
.podcast-player { width: min(100%, 380px); margin: 0 auto; }
.podcast-preview { display: flex; flex-direction: column; height: 352px; padding: 32px 24px 24px; border-radius: 12px; background: #5E4A17; color: #fff; transition: background-color .2s ease; }
.podcast-preview:hover, .podcast-preview:focus-visible { background: #6B5519; }
.podcast-cover { align-self: center; flex: none; width: 140px; height: 140px; border-radius: 8px; overflow: hidden; background: linear-gradient(135deg, #E9CD86, #A8822F); box-shadow: 0 8px 24px rgba(0, 0, 0, .3); }
.podcast-cover img { width: 100%; height: 100%; object-fit: cover; }
.podcast-meta { display: flex; flex-direction: column; gap: 4px; margin-top: 20px; min-width: 0; }
.podcast-meta b { font-size: 20px; font-weight: 700; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.podcast-meta span { font-size: 15px; color: #E5D3A0; }
.podcast-action { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
.podcast-hint { font-size: 15px; font-weight: 600; }
.podcast-preview:hover .podcast-hint, .podcast-preview:focus-visible .podcast-hint { text-decoration: underline; text-underline-offset: 3px; }
.podcast-action .pbtn { position: relative; display: block; width: 52px; height: 52px; border-radius: 50%; background: #fff; transition: transform .2s ease; }
.podcast-action .pbtn::after { content: ""; position: absolute; left: 21px; top: 16px; border-left: 15px solid #5E4A17; border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
.podcast-preview:hover .pbtn, .podcast-preview:focus-visible .pbtn { transform: scale(1.06); }
.embed-note { margin-top: 10px; font-size: 13px; color: rgba(255, 255, 255, .6); }
/* Spotify switches to its square layout below ~420px wide; 352px is its fixed height */
.podcast-player.is-loaded iframe { display: block; width: 100%; height: 352px; border: 0; border-radius: 12px; }
/* On petrol bands the poster shares the background colour and vanished: lift it with a lighter tint and a thin gold edge */
.s-dark .poster-type, .s-ink .poster-type { background: rgba(255, 255, 255, .06); border: 1px solid rgba(212, 178, 106, .35); transition: background-color .2s ease, border-color .2s ease; }
.s-dark a:hover .poster-type, .s-ink a:hover .poster-type { background: rgba(255, 255, 255, .1); border-color: rgba(212, 178, 106, .6); }
.article-hero { padding-bottom: 72px; }
.article-hero h1 { font-size: 58px; margin: 20px 0 22px; }
.article-body { padding-top: 88px; }
.contact-hero .phero-grid { align-items: start; }
.contact-list { margin-top: 44px; }
.contact-list a { font-size: 20px; font-weight: 500; color: var(--ink); }
.contact-list a:hover { color: var(--brand); }
.form-card .h3 { margin-bottom: 26px; }
.privacy-notice { margin-top: 20px; font-size: 13px; line-height: 1.55; color: var(--muted); }
.privacy-notice a { color: var(--brand); text-decoration: underline; }

/* WPForms (contact form) restyled to the design system through its own CSS variables */
.form-card .wpforms-container {
  --wpforms-field-border-radius: 12px;
  --wpforms-field-border-color: var(--line);
  --wpforms-field-border-size: 1.5px;
  --wpforms-field-background-color: var(--bg);
  --wpforms-field-text-color: var(--ink);
  --wpforms-field-size-input-height: 54px;
  --wpforms-field-size-font-size: 16px;
  --wpforms-label-color: var(--ink);
  --wpforms-label-size-font-size: 14px;
  --wpforms-label-sublabel-color: var(--muted);
  --wpforms-label-error-color: #B3261E;
  --wpforms-button-background-color: var(--brand);
  --wpforms-button-border-radius: 100px;
  --wpforms-button-size-height: 54px;
  --wpforms-button-size-font-size: 16px;
  --wpforms-button-text-color: #fff;
  margin: 0 !important;
  font-family: var(--sans);
}
.form-card .wpforms-container .wpforms-field { padding: 0 0 20px !important; }
.form-card .wpforms-container .wpforms-field-label { font-weight: 600 !important; margin-bottom: 8px !important; }
.form-card .wpforms-container input:focus, .form-card .wpforms-container textarea:focus, .form-card .wpforms-container select:focus { border-color: var(--brand) !important; box-shadow: 0 0 0 1px var(--brand) !important; }
.form-card .wpforms-container textarea { min-height: 120px; }
.form-card .wpforms-container .wpforms-required-label { color: var(--brand); }
.form-card .wpforms-container .wpforms-submit-container { padding-top: 6px !important; }
/* The form's own style settings print inline variables that win over the ones above, hence !important here. */
.form-card .wpforms-container input:not([type=submit]):not([type=checkbox]):not([type=radio]), .form-card .wpforms-container textarea, .form-card .wpforms-container select { border-color: var(--line) !important; background-color: var(--bg) !important; color: var(--ink) !important; }
.form-card .wpforms-container button[type=submit] { width: 100%; background-color: var(--brand) !important; border-color: var(--brand) !important; color: #fff !important; font-family: var(--sans) !important; font-weight: 600 !important; }
.form-card .wpforms-container button[type=submit]:hover { background-color: var(--deep) !important; }

/* Gallery */
.gallery { display: grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: 1fr 1fr; gap: 16px; height: 560px; }
.gallery img { width: 100%; height: 100%; object-fit: cover; border-radius: 20px; }
.gallery img:first-child { grid-row: span 2; }

/* Closing call to action */
.closing { text-align: center; }
.closing h2 { max-width: 840px; margin: 16px auto 30px; font-size: 52px; }
.closing p:not(.eyebrow) { font-size: 20px; color: var(--muted); max-width: 640px; margin: -12px auto 36px; }
.closing .chips { justify-content: center; margin: 6px 0 34px; }

/* Footer */
.site-footer { background: var(--ink); color: #C9D4D1; padding: 80px 0 32px; font-size: 16px; }
.f-grid { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr 1fr; gap: 48px; padding-bottom: 56px; border-bottom: 1px solid rgba(255,255,255,.12); }
.f-grid img { height: 40px; width: auto; margin-bottom: 20px; }
.f-grid .f-title { font-family: var(--sans); line-height: 1.4; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: #fff; font-weight: 600; margin-bottom: 18px; }
.f-grid li { margin-bottom: 10px; }
.f-grid .news { margin-top: 22px; display: inline-flex; padding: 12px 20px; border-radius: 100px; border: 1.5px solid rgba(255,255,255,.4); color: #fff; font-weight: 600; font-size: 15px; }
.f-bottom { display: flex; justify-content: space-between; padding-top: 26px; font-size: 14px; color: #8FA19C; }
.f-legal { display: flex; gap: 18px; }
.f-legal a:hover { color: #fff; }

/* Burger navigation: the full menu (logo + 4 items + button) needs ~1150px. */
@media (max-width: 1180px) {
  .burger { display: block; width: 28px; height: 18px; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); position: relative; }
  .burger::after { content: ""; position: absolute; left: 0; right: 0; top: 6px; border-top: 2px solid var(--ink); }
  .site-header--overlay .burger, .site-header--overlay .burger::after { border-color: #fff; }
  .menu { display: none; position: absolute; top: 100%; right: 12px; width: min(360px, calc(100% - 24px)); flex-direction: column; align-items: stretch; gap: 4px; padding: 14px; background: var(--white); border-radius: 16px; box-shadow: 0 24px 50px rgba(12,42,49,.18); }
  .is-menu-open .menu { display: flex; }
  .menu-list { flex-direction: column; align-items: stretch; gap: 0; }
  .menu-item > a, .site-header--overlay .menu-item > a { display: flex; padding: 12px 10px; color: var(--ink); }
  .menu-item.is-current > a, .site-header--overlay .menu-item.is-current > a { box-shadow: none; color: var(--brand); }
  .menu-item.has-children > a::after { display: none; }
  .submenu { position: static; min-width: 0; padding: 0 0 6px 14px; border: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none; background: none; }
  .submenu a { padding: 9px 10px; font-size: 15px; }
  .menu .btn, .site-header--overlay .menu .btn { margin-top: 8px; justify-content: center; background: var(--brand); color: #fff; border-color: var(--brand); }
}

/* Footer: four columns do not fit below ~900px. */
@media (max-width: 1024px) {
  .f-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  body { font-size: 17px; }
  .wrap { padding: 0 20px; }
  h1, .phero h1.md { font-size: 44px; }
  h2 { font-size: 33px; }
  h3 { font-size: 25px; }
  .lead { font-size: 19px; }
  :root { --header-height: 72px; }
  .nav .logo img { height: 38px; }
  .site-header.is-stuck .nav { height: 64px; }
  .site-header.is-stuck .nav .logo img { height: 34px; }
  section { padding: 76px 0; }
  .tight { padding: 52px 0; }
  .head { margin-bottom: 34px; }
  .phero { padding: 8px 0 64px; }
  .entry h1 { font-size: 38px; margin-bottom: 28px; }
  .article-hero h1 { font-size: 40px; }
  .service-list { grid-template-columns: 1fr 1fr; gap: 10px; }
  .head-wide { grid-template-columns: 1fr; gap: 0; }
  .head-wide h2 { margin-bottom: 16px; }
  .service-list .card { padding: 16px 16px 18px; }
  .service-list b { font-size: 15px; line-height: 1.35; }
  .two-columns { gap: 48px; }
  .column-title { font-size: 28px; }
  .card-roomy { padding: 28px; }
  .statement-small { font-size: 24px; }
  .head-spaced { margin-top: 56px; }
  .entry-content h2 { font-size: 28px; }
  .entry-content ul, .entry-content ol { font-size: 18px; }
  .entry-nav { grid-template-columns: 1fr; }
  .entry-content table { display: block; overflow-x: auto; font-size: 15px; }
  .entry-nav-next { grid-column: 1; text-align: left; }
  .post-list h2 { font-size: 24px; }
  .f-bottom { flex-direction: column; gap: 10px; }
  /* minmax(0, 1fr): a plain 1fr track grows to its widest child (the 380px Spotify player) and overflows */
  .phero-grid, .split { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .split.rev .split-ph { order: 0; }
  .phero .tagline { font-size: 23px; }
  .ctas { flex-direction: column; }
  .grid-2, .grid-3, .grid-4, .related { grid-template-columns: 1fr; gap: 16px; }
  .card { padding: 26px; }
  /* Mobile: vertical timeline. Circle on the left, label beside it, a vertical line down to the next circle */
  .steps { grid-template-columns: 1fr; }
  .steps li { display: flex; align-items: center; gap: 16px; padding: 0 0 24px; text-align: left; }
  .steps li:last-child { padding-bottom: 0; }
  .steps li::before { flex: none; width: 40px; height: 40px; margin: 0; font-size: 18px; }
  .steps li::after { top: 46px; bottom: 6px; left: 20px; right: auto; border-top: 0; border-left: 1px solid #D8CDB4; }
  .steps b { font-size: 17px; }
  .logo-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .logo-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .logo-grid.cols-7, .logo-grid.cols-9 { grid-template-columns: repeat(3, 1fr); }
  .logo-grid.cols-9 div { height: 76px; padding: 12px; }
  .grid-4 .card h3 { font-size: 25px; }
  .logo-grid div { height: 76px; padding: 12px; }
  .logo-grid img { max-height: 30px; }
  .logo-grid img.tall { max-height: 42px; }
  .statement { font-size: 30px; }
  .quote { font-size: 24px; }
  .play .pbtn { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
  .play .pbtn::after { left: 26px; top: 20px; border-left-width: 18px; border-top-width: 12px; border-bottom-width: 12px; }
  .play .cap { left: 18px; bottom: 16px; }
  .play .cap b { font-size: 22px; }
  .play .cap span { font-size: 15px; }
  .video-teaser { grid-template-columns: 1fr; gap: 16px; padding: 12px 12px 20px; }
  .video-teaser-body { padding: 0 8px; }
  .product-teaser { grid-template-columns: 1fr; gap: 24px; padding: 20px 20px 28px; }
  .product-teaser img { width: 200px; }
  .letters { grid-template-columns: 1fr; }
  .letters div { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.22); padding: 22px 0; display: grid; grid-template-columns: 64px 1fr; column-gap: 18px; }
  .letters div:last-child { border-bottom: 0; }
  .letters b { font-size: 56px; grid-row: span 2; }
  .letters span { margin: 6px 0 4px; }
  .letter-rows div { grid-template-columns: 70px 1fr; gap: 6px 20px; padding: 24px 0; }
  .letter-rows b { font-size: 64px; grid-row: span 2; }
  .letter-rows h2 { font-size: 26px; }
  .letter-rows p { font-size: 17px; }
  .article p, .article ul.bul li { font-size: 18px; }
  .article h2 { font-size: 30px; margin-top: 48px; }
  .article .pull { font-size: 27px; }
  .form-card { padding: 26px 20px; }
  .row2 { grid-template-columns: 1fr; gap: 0; }
  .gallery { grid-template-columns: 1fr; grid-template-rows: auto; height: auto; }
  .gallery img { aspect-ratio: 4 / 3; }
  .gallery img:first-child { grid-row: auto; }
  .closing h2 { font-size: 35px; }
  .f-grid { grid-template-columns: 1fr; gap: 36px; }
  .f-bottom { flex-direction: column; gap: 8px; }
}


.gold, .s-dark h1 em, .s-dark h2 em, .s-ink h1 em, .s-ink h2 em, .letters b {
  background: var(--gold-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; padding-right: .05em;
}
/* On light backgrounds: bronze only for eyebrows, numbering and arrows */
.eyebrow, .card .num, .media-card .meta, .steps li::before { color: var(--bronze); }
.link::after { color: var(--bronze); }
h1 em, h2 em { color: var(--brand); }
.quote { border-left-color: var(--bronze); }
.todo { border-color: #CBBFA3; }
.todo b { color: var(--bronze); }
.btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-light { background: #fff; color: var(--brand); border-color: #fff; }
.pills span.on { background: var(--brand); border-color: var(--brand); }
/* Dark bands: a single petrol green, the one from the business card (same as the footer) */
.s-dark, .s-ink { background: var(--brand); color: #D3DCDD; }
.s-dark .eyebrow, .s-ink .eyebrow { color: var(--gold-text); }
.s-dark .head p:not(.eyebrow), .s-ink .head p:not(.eyebrow) { color: #D3DCDD; }
.s-dark .link::after, .s-ink .link::after { color: var(--gold-text); }
.s-dark .chips span { background: rgba(255,255,255,.06); border-color: rgba(212,178,106,.35); }
.letters, .letters div { border-color: rgba(212,178,106,.3) !important; }
.letters span { color: var(--gold-text); }
.letters p { color: #D3DCDD; }
.poster-type { background: var(--brand); }
.play::after { background: linear-gradient(180deg, rgba(12,42,49,0) 45%, rgba(12,42,49,.8)); }
.card.lift, .form-card { box-shadow: 0 22px 48px rgba(12,42,49,.10); }
/* Petrol footer with gold logo */
.site-footer { background: var(--brand); color: #C3CFD1; border-top: 1px solid rgba(212,178,106,.25); }
.f-grid { border-color: rgba(255,255,255,.12); }
.f-grid .f-title { font-family: var(--sans); line-height: 1.4; color: var(--gold-text); }
.f-grid .news { border-color: rgba(255,255,255,.45); }
.f-bottom { color: #93A3A6; }
.logo-gold { display: block; width: 220px; height: 40px; background: var(--gold-gradient); margin-bottom: 20px;
  -webkit-mask: url(../img/logo-white.png) left center / contain no-repeat; mask: url(../img/logo-white.png) left center / contain no-repeat; }
.related a::after { color: var(--bronze); }

/* Interaction states
 * Arrows: every "→" (text links, arrow buttons, related pages, newsletter) slides 4px on hover, the effect
 * of the home cards. Whole-card links trigger the arrow of the link inside them.
 * Buttons: filled buttons go a shade deeper, outline buttons fill in. All lift 2px. */
.btn-arrow::after, .f-grid .news::after { content: "→"; color: currentColor; }
.f-grid .news { gap: 8px; align-items: center; }
.link::after, .btn-arrow::after, .f-grid .news::after, .related a::after { transition: transform .2s ease; }
.link:hover::after, .link:focus-visible::after,
a:hover .link::after, a:focus-visible .link::after,
.btn-arrow:hover::after, .btn-arrow:focus-visible::after,
.f-grid .news:hover::after, .f-grid .news:focus-visible::after,
.related a:hover::after, .related a:focus-visible::after { transform: translateX(4px); }

.related a { transition: border-color .2s ease, box-shadow .2s ease; }
.related a:hover, .related a:focus-visible { border-color: var(--brand); box-shadow: 0 12px 30px rgba(12,42,49,.08); }

.btn, .f-grid .news { transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease; }
.btn:hover, .btn:focus-visible, .f-grid .news:hover, .f-grid .news:focus-visible { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-primary:hover, .btn-primary:focus-visible { background: var(--deep); border-color: var(--deep); color: #fff; box-shadow: 0 10px 24px rgba(12,42,49,.2); }
.btn-ghost:hover, .btn-ghost:focus-visible { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-light:hover, .btn-light:focus-visible { background: var(--line); border-color: var(--line); color: var(--brand); }
.btn-outline-light:hover, .btn-outline-light:focus-visible,
.f-grid .news:hover, .f-grid .news:focus-visible { background: #fff; border-color: #fff; color: var(--brand); }
@media (min-width: 1181px) {
  .site-header--overlay .menu .btn:hover, .site-header--overlay .menu .btn:focus-visible { background: #fff; border-color: #fff; color: var(--brand); box-shadow: none; }
}

/* Plain links: a thin underline that grows from the left, in the link's own color (white on petrol).
   Used for the main menu, footer lists, legal links, contact details, breadcrumbs and post navigation. */
.menu-list > .menu-item > a, .f-grid ul a, .f-legal a, .contact-list a, .crumbs a, .entry-nav a {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat;
  transition: background-size .25s ease, color .2s ease;
}
.f-grid ul a, .f-legal a, .contact-list a, .crumbs a, .entry-nav a { padding-bottom: 2px; }
.menu-list > .menu-item > a:hover, .menu-list > .menu-item > a:focus-visible,
.f-grid ul a:hover, .f-grid ul a:focus-visible, .f-legal a:hover, .f-legal a:focus-visible,
.contact-list a:hover, .contact-list a:focus-visible, .crumbs a:hover, .crumbs a:focus-visible,
.entry-nav a:hover, .entry-nav a:focus-visible { background-size: 100% 1.5px; }
.menu-list > .menu-item > a:hover { color: var(--brand); }
.site-header--overlay .menu-list > .menu-item > a:hover { color: #fff; }
.f-grid ul a:hover, .f-grid ul a:focus-visible { color: #fff; }
/* Contact links with an icon: the underline runs under the label only */
.f-grid .f-contact a { display: inline-flex; align-items: center; gap: 12px; background: none; padding-bottom: 0; }
.f-contact .icon { flex: none; width: 18px; height: 18px; fill: var(--gold-text); }
.f-contact span { padding-bottom: 2px; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size .25s ease; }
.f-contact a:hover span, .f-contact a:focus-visible span { background-size: 100% 1.5px; }
.entry-nav a:hover { color: var(--brand); }
/* Current page: the same underline, already full width (gold on the home overlay). A box-shadow underline
   rendered with stray side lines at fractional zoom levels. */
.menu-list > .menu-item.is-current > a { background-size: 100% 1.5px; }
.site-header--overlay .menu-list > .menu-item.is-current > a { background-image: linear-gradient(var(--gold-text), var(--gold-text)); }

/* Links inside running text: already underlined, the underline darkens and thickens */
.entry-content a, .privacy-notice a { text-decoration-thickness: 1px; transition: text-decoration-color .2s ease, color .2s ease, text-decoration-thickness .2s ease; text-decoration-color: rgba(19,60,70,.45); }
.entry-content a:hover, .privacy-notice a:hover { color: var(--deep); text-decoration-color: currentColor; text-decoration-thickness: 2px; }

/* Logo */
.nav .logo { transition: opacity .2s ease; }
.nav .logo:hover { opacity: .75; }

/* Home hero logo: on hover the white logo turns gold and then shines.
   The gold is a layer with the logo shape (CSS mask) that fades in ON TOP of the white one. A crossfade
   (white out, gold in) would leave both half transparent mid-way and the logo would dim; fading in over
   the white keeps it bright all the time. The light sweep starts once the gold is almost visible. */
.nav .logo { position: relative; }
.logo-gold-layer { display: none; }
.site-header--overlay .logo-gold-layer {
  display: block; position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background-image: var(--gold-sweep), var(--gold-gradient);
  background-size: 250% 100%, 100% 100%;
  background-position: 120% 0, 0 0;
  background-repeat: no-repeat;
  -webkit-mask: url(../img/logo-white.png) center / 100% 100% no-repeat; mask: url(../img/logo-white.png) center / 100% 100% no-repeat;
  /* Leaving: fade out, then put the sweep back in place without it being seen */
  transition: opacity .3s ease, background-position 0s linear .3s;
}
.site-header--overlay .logo:hover, .site-header--overlay .logo:focus-visible { opacity: 1; }
.site-header--overlay .logo:hover .logo-gold-layer, .site-header--overlay .logo:focus-visible .logo-gold-layer {
  opacity: 1; background-position: -20% 0, 0 0;
  transition: opacity .45s ease, background-position .9s ease .2s;
}
@media (prefers-reduced-motion: reduce) {
  .site-header--overlay .logo:hover .logo-gold-layer { background-position: 120% 0, 0 0; transition: opacity .45s ease; }
}
/* Footer logo: on hover a band of light sweeps across the gold, like a reflection on metal.
   The sweep is a second background layer, parked off to the left and moved across on hover. */
.site-footer .logo-gold {
  background-image: var(--gold-sweep), var(--gold-gradient);
  background-size: 250% 100%, 100% 100%;
  background-position: 120% 0, 0 0;
  background-repeat: no-repeat;
  transition: background-position .9s ease, filter .3s ease;
}
.site-footer .logo-gold:hover, .site-footer .logo-gold:focus-visible { background-position: -20% 0, 0 0; filter: brightness(1.12) saturate(1.1); }
@media (prefers-reduced-motion: reduce) { .site-footer .logo-gold { transition: filter .3s ease; } .site-footer .logo-gold:hover { background-position: 120% 0, 0 0; } }

/* Burger panel: rows instead of underlines */
@media (max-width: 1180px) {
  .menu-list > .menu-item > a { background: none; border-radius: 8px; transition: background-color .2s ease, color .2s ease; }
  .menu-list > .menu-item > a:hover, .menu-list > .menu-item > a:focus-visible,
  .site-header--overlay .menu-list > .menu-item > a:hover { background-color: var(--bg); color: var(--brand); }
  .submenu a:hover { background: var(--bg); }
  .menu-list > .menu-item.is-current > a, .site-header--overlay .menu-list > .menu-item.is-current > a { background-image: none; }
}

/* In-page anchors (#marcas, #servicios, #en-el-escenario): smooth scroll, and stop clear of the sticky bar */
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 96px; }
.admin-bar [id] { scroll-margin-top: 128px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Keyboard focus: visible ring in bronze on light backgrounds, champagne gold on petrol */
a:focus-visible, button:focus-visible { outline: 2px solid var(--bronze); outline-offset: 3px; }
.s-dark a:focus-visible, .s-ink a:focus-visible, .card-dark a:focus-visible, .site-footer a:focus-visible,
.home-hero a:focus-visible, .site-header--overlay a:focus-visible { outline-color: var(--gold-text); }
.btn:focus-visible { outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  .btn, .f-grid .news, .link::after, .btn-arrow::after, .f-grid .news::after, .related a::after, a.media-card, a.card.photo, .video-teaser { transition: none; }
  .btn:hover, .btn:focus-visible, .f-grid .news:hover, a.media-card:hover, a.card.photo:hover, .video-teaser:hover { transform: none; }
}