/* ==========================================================================
   Landing page theme — Stripe-inspired visual layer (5 Oct 2026)
   Loaded after styles.css. Content and markup are unchanged; this file only
   re-skins the existing components, studied from stripe.com/gb:
   · navy ink (#061B31) on white, one violet accent (#533AFD)
   · light display type (weight 400) with two-tone sentences: the statement
     in ink, its continuation in a muted slate-lavender
   · 4px buttons, 8px hairline-bordered cards, soft layered shadows on hover
   · a silk gradient ribbon behind the hero, a softer silk wash for the stack
   No Stripe asset, font or code is used: the ribbon is pure CSS, and the
   type stays Google Sans Flex (Söhne is a licensed face).
   Remove the <link> to this file in index.html to return to the previous look.
   ========================================================================== */

:root {
  --color-primary: #533AFD;
  --color-primary-hover: #4232D4;
  --color-heading: #061B31;           /* ink · 17.6:1 on white */
  --color-text: #50617A;              /* body · 6.3:1 on white, 6.0:1 on surface */
  --color-muted: #7D8BA4;             /* two-tone continuation, large type only (≥26px here) · 3.44:1, passes AA large */
  --color-surface: #F8FAFD;
  --color-hairline: rgb(6 27 49 / 0.08);
  --color-hairline-strong: rgb(6 27 49 / 0.14);
  --color-border: #E3E8EF;
  --color-border-accent: #D6D9FC;
  --color-primary-tint: rgb(83 58 253 / 0.08);

  /* Category labels: a barely-there tint (about 1.2:1 against the white card) with dark same-hue text, so the colour sorts the cards without carrying the reading. */
  --tag-client-bg: #FDE8F2;           /* pink  · text #9D1451 = 6.8:1 */
  --tag-client-text: #9D1451;
  --tag-client-ring: #F7CFE1;
  --tag-personal-bg: #FEF3C7;         /* yellow · text #7A4B00 = 6.7:1 */
  --tag-personal-text: #7A4B00;
  --tag-personal-ring: #EEDAAF;

  --weight-heading: 400;   /* raised from 300 on request: a touch bolder than Stripe */
  --radius-pill: 4px;
  --radius-card: 8px;
  --radius-inner: 6px;
  --radius-outer: 8px;
  --radius-xl: 12px;

  --ring: 0 0 0 1px var(--color-border);
  --shadow-1: 0 1px 2px rgb(6 27 49 / 0.04);
  --shadow-2: 0 13px 27px -5px rgb(50 50 93 / 0.18), 0 8px 16px -8px rgb(0 0 0 / 0.16);
  --shadow-float: 0 50px 100px -20px rgb(50 50 93 / 0.25), 0 30px 60px -30px rgb(0 0 0 / 0.3);
  --shadow-primary: none;
  --nav-offset: 0px;
  --nav-height: 4rem;
}

body { color: var(--color-text); }
body::before {
  background-image: repeating-linear-gradient(to right, rgb(6 27 49 / 0.06) 0, rgb(6 27 49 / 0.06) 1px, transparent 1px, transparent 25%);
}

/* --------------------------------------------------------------------------
   Type: light display weight, tight tracking, two-tone section intros
   -------------------------------------------------------------------------- */
.heading-style-h1, .heading-style-h2, .heading-style-h3 { font-weight: var(--weight-heading); color: var(--color-heading); }
.heading-style-h2 { letter-spacing: -0.025em; }

/* Small violet label instead of a pill. */
.eyebrow {
  min-height: 0;
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--color-primary);
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  letter-spacing: 0;
  text-transform: none;
}
.background-color-surface .eyebrow { background: none; }

/* Section intro reads as one sentence: the heading in ink, the line after it
   continuing in muted slate at the same size. */
.section-heading { display: block; max-width: 48rem; }
.section-heading .eyebrow { display: block; margin-bottom: var(--space-2); }
.section-heading .heading-style-h2,
.section-heading > .text-size-medium,
.faq_header .heading-style-h2,
.faq_header > .text-size-medium {
  display: inline;
  font-size: clamp(1.625rem, 1.15rem + 1.5vw, 2.25rem);
  font-weight: var(--weight-heading);
  --lh: 1.22;
  letter-spacing: -0.02em;
}
.section-heading .heading-style-h2::after,
.faq_header .heading-style-h2::after { content: "."; }
.section-heading > .text-size-medium,
.faq_header > .text-size-medium { color: var(--color-muted); }
.section-heading > .text-size-medium::before,
.faq_header > .text-size-medium::before { content: " "; }
.section-heading.is-centered { text-align: center; margin-inline: auto; }
.faq_header { display: block; }
.faq_header .eyebrow { display: block; margin-bottom: var(--space-2); }

.experience_linkedin, .faq_header .text-link {
  color: var(--color-primary);
  font-weight: var(--weight-heading);
  text-decoration: none;
}
.experience_linkedin:hover, .faq_header .text-link:hover { color: var(--color-primary-hover); text-decoration: underline; text-decoration-thickness: 1px; }

/* --------------------------------------------------------------------------
   Buttons: 4px corners, violet primary, bordered secondary, arrow nudges
   -------------------------------------------------------------------------- */
.button {
  min-height: 44px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  font-weight: var(--weight-medium);
  font-size: 0.9375rem;
}
.button.is-primary { padding-right: var(--space-3); box-shadow: none; }
.button.is-primary:hover { background: var(--color-primary-hover); }
.button_icon { width: auto; height: auto; background: none; border-radius: 0; }
.button_icon svg { width: 14px; height: 14px; stroke-width: 1.75; }
.button.is-primary:hover .button_icon { transform: translateX(3px); background: none; }
.button.is-secondary {
  background: var(--color-white);
  color: var(--color-primary);
  box-shadow: inset 0 0 0 1px var(--color-border-accent);
}
.button.is-secondary:hover { background: var(--color-white); box-shadow: inset 0 0 0 1px var(--color-primary); }
.button.is-large { min-height: 48px; font-size: var(--text-small); }
.button.is-large.is-primary { padding-inline: var(--space-3); }
.button.is-large.is-secondary { padding-inline: var(--space-3); }
.button.is-large .button_icon { width: auto; height: auto; }
.button.is-small { min-height: 40px; font-size: 0.875rem; padding-inline: var(--space-2); }
.button.is-small.is-primary { padding-inline: var(--space-2); }
.button.is-block { padding-inline: var(--space-3); }

.tag {
  min-height: 24px;
  padding: 0 8px;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  box-shadow: inset 0 0 0 1px var(--color-border);
  color: var(--color-text);
  font-size: 0.75rem;
  font-weight: var(--weight-medium);
}

.tag.is-client   { background: var(--tag-client-bg);   box-shadow: inset 0 0 0 1px var(--tag-client-ring);   color: var(--tag-client-text); }
.tag.is-personal { background: var(--tag-personal-bg); box-shadow: inset 0 0 0 1px var(--tag-personal-ring); color: var(--tag-personal-text); }
/* A project that opens behind a password: an icon-only chip after the years. */
.tag.is-lock { padding: 0 8px; background: transparent; box-shadow: inset 0 0 0 1px var(--color-hairline-strong); color: var(--color-heading); }
.tag.is-lock svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* Cards everywhere: white, hairline border, 8px, lift + soft shadow on hover. */
.bezel, .bezel.is-xl { padding: 0; border-radius: var(--radius-card); box-shadow: var(--ring); }
.bezel_core, .bezel.is-xl > .bezel_core { border-radius: var(--radius-card); }

/* --------------------------------------------------------------------------
   Navbar: full-width bar, transparent over the hero, white once scrolled
   -------------------------------------------------------------------------- */
.navbar_component { padding-top: 0; transition: background-color var(--dur-base) var(--ease-soft), box-shadow var(--dur-base) var(--ease-soft); }
.navbar_component::before { display: none; }
.navbar_container {
  height: var(--nav-height);
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .navbar_container { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .navbar_component.is-scrolled { -webkit-backdrop-filter: blur(16px) saturate(1.6); backdrop-filter: blur(16px) saturate(1.6); }
}
.navbar_component.is-scrolled { background: rgb(255 255 255 / 0.86); box-shadow: 0 1px 0 var(--color-border); pointer-events: auto; }
.navbar_component.is-scrolled .navbar_container { box-shadow: none; }
.navbar_logo { color: var(--color-heading); font-weight: 600; }
.navbar_link {
  padding: 0 12px;
  border-radius: var(--radius-pill);
  color: var(--color-heading);
  font-size: 0.9375rem;
  font-weight: var(--weight-medium);
}
.navbar_link:hover { color: var(--color-text); background: none; }
.navbar_link[aria-current="true"] { color: var(--color-primary); background: none; }
.navbar_link[aria-current="true"]::after { display: none; }
.navbar_menu-button { border-radius: var(--radius-pill); background: rgb(255 255 255 / 0.7); box-shadow: inset 0 0 0 1px var(--color-border); }
@media (min-width: 48em) {
  .navbar_container { padding-left: 0; }
  .navbar_logo { margin-right: var(--space-4); }
  .navbar_menu { margin-inline: 0 auto; }
}
.navbar_overlay-link { font-weight: var(--weight-heading); }

/* --------------------------------------------------------------------------
   Hero: silk gradient ribbon (CSS only) sweeping in from the top right,
   two-tone light headline, portrait floating on the ribbon
   -------------------------------------------------------------------------- */
.section_header { overflow: clip; margin-top: calc(var(--nav-height) * -1); padding-top: var(--nav-height); }
.hero_blob, .hero_motion, .hero_word, .header_portrait .blur-field { display: none !important; }
.hero_atmosphere { overflow: clip; }
.hero_atmosphere::before,
.hero_atmosphere::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
/* The ribbon: a wide band of warm-to-cool colour, rotated and skewed into a
   diagonal sweep, with fine sheen lines for the silk texture. */
.hero_atmosphere::before {
  top: -48%;
  right: -46%;
  width: 120%;
  height: 120%;
  background:
    repeating-linear-gradient(98deg, rgb(255 255 255 / 0.16) 0 1px, transparent 1px 14px),
    linear-gradient(98deg,
      rgb(255 255 255 / 0) 4%,
      #FFD27A 16%,
      #FF8A5B 28%,
      #FF4D8D 40%,
      #E040FB 52%,
      #8B5CFF 64%,
      #5B7CFF 76%,
      #7FD3FF 88%,
      rgb(255 255 255 / 0) 98%);
  transform: rotate(-24deg) skewX(-18deg);
  transform-origin: center;
  border-radius: 45% 0 0 55% / 50% 0 0 50%;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 92%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 92%);
  filter: saturate(1.05);
  opacity: 0.95;
}
/* A soft white veil on the copy side keeps the headline on a calm field. */
.hero_atmosphere::after {
  inset: 0;
  background: linear-gradient(90deg, #FFFFFF 0%, rgb(255 255 255 / 0.96) 34%, rgb(255 255 255 / 0) 62%);
}
@media (max-width: 63.99em) {
  .hero_atmosphere::before { top: -64%; right: -70%; width: 160%; height: 100%; }
  .hero_atmosphere::after { background: linear-gradient(180deg, rgb(255 255 255 / 0) 0%, rgb(255 255 255 / 0.9) 30%, #FFFFFF 46%); }
}
@media (prefers-reduced-motion: no-preference) {
  .hero_atmosphere::before { animation: ribbon-drift 18s var(--ease-soft) infinite alternate; }
}
@keyframes ribbon-drift {
  from { transform: rotate(-24deg) skewX(-18deg) translateX(0); }
  to { transform: rotate(-22deg) skewX(-16deg) translateX(-3%); }
}

/* Availability: plain dot + text, like a live-stat line. */
.status-pill {
  min-height: 0;
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--color-heading);
  font-size: 0.875rem;
  font-weight: var(--weight-medium);
}

#hero-heading {
  max-width: 21ch;
  font-size: clamp(2.375rem, 1.45rem + 3.1vw, 3.5rem);
  font-weight: var(--weight-heading);
  --lh: 1.1;
  letter-spacing: -0.03em;
}
#hero-heading br { display: none; }
#hero-heading em { font-style: normal; color: var(--color-muted); }
#hero-heading em::before { content: " "; }
.header_lede { max-width: 34rem; color: var(--color-text); font-size: 1.1875rem; --lh: 1.55; }

/* Portrait: a floating product-card treatment on top of the ribbon. */
.header_portrait > .bezel { border-radius: var(--radius-xl); box-shadow: var(--shadow-float); }
.header_portrait > .bezel > .bezel_core { border-radius: var(--radius-xl); }
.header_portrait-media { background: var(--color-surface); }
/* Hero cards: a frosted profile card and a gradient-ring badge that float over the portrait, each on its own slow loop. */
.hero_badge {
  top: var(--space-2);
  right: var(--space-2);
  align-items: center;
  gap: 8px;
  padding: 6px 16px 6px 12px;
  border: 1.5px solid transparent;
  border-radius: var(--radius-pill);
  background:
    linear-gradient(#FFFFFF, #FFFFFF) padding-box,
    linear-gradient(120deg, #FF8A5B, #FF4D8D 38%, #8B5CFF 70%, #5B7CFF) border-box;
  color: var(--color-primary);
  box-shadow: 0 14px 28px -10px rgb(83 58 253 / 0.45), 0 4px 10px -4px rgb(6 27 49 / 0.2);
  font-weight: 600;
  letter-spacing: 0.02em;
  transform: rotate(-3deg);
}
.hero_badge-spark { width: 14px; height: 14px; flex: none; fill: currentColor; }
.header_portrait-caption {
  gap: 2px;
  padding: 14px var(--space-3);
  border-radius: 20px;
  background: linear-gradient(135deg, #FFFFFF 0%, rgb(244 246 255 / 0.94) 100%);
  box-shadow:
    inset 0 1px 0 #FFFFFF,
    0 0 0 1px rgb(255 255 255 / 0.85),
    0 22px 44px -14px rgb(6 27 49 / 0.34),
    0 8px 18px -8px rgb(83 58 253 / 0.24);
}
.header_portrait-name { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; line-height: 24px; }
.header_portrait-role { font-size: 0.875rem; line-height: 20px; }
@media (prefers-reduced-motion: no-preference) {
  .header_portrait-caption { animation: hero-float-card 5.2s ease-in-out infinite alternate; }
  .hero_badge { animation: hero-float-badge 4.4s ease-in-out -1.6s infinite alternate; }
}
@keyframes hero-float-card { from { transform: translate3d(0, 0, 0) rotate(-0.6deg); } 99% { transform: translate3d(-3px, -15px, 0) rotate(0.6deg); } }
@keyframes hero-float-badge { from { transform: translate3d(0, 0, 0) rotate(-4deg); } 99% { transform: translate3d(2px, 11px, 0) rotate(-1deg); } }
@media (min-width: 64em) {
  .hero_badge { top: calc(var(--space-3) * -1); right: calc(var(--space-3) * -1); }
}

/* --------------------------------------------------------------------------
   Logo strip: framed by full-width hairlines, logos in ink
   -------------------------------------------------------------------------- */
.section_logo { box-shadow: inset 0 1px 0 var(--color-border), inset 0 -1px 0 var(--color-border); background: var(--color-white); }
.logo_heading { color: var(--color-text); font-size: 0.875rem; font-weight: var(--weight-regular); letter-spacing: 0; text-transform: none; }
.logo_item img { filter: brightness(0) saturate(100%) invert(9%) sepia(37%) saturate(2300%) hue-rotate(195deg) brightness(92%); opacity: 0.85; }
.logo_item:hover img { filter: none; opacity: 1; }
/* The typeset British Land stand-in uses the same ink at the same strength as the
   silhouetted logos above (navy at 0.85); at 0.55 it read as a washed-out outlier. */
.logo_wordmark { color: rgb(6 27 49 / 0.85); font-weight: 600; }

/* --------------------------------------------------------------------------
   Shared card treatment
   -------------------------------------------------------------------------- */
.focus_card, .stack_card, .experience_card, .portfolio_card {
  border-radius: var(--radius-card);
  box-shadow: var(--ring);
  transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-soft);
}
.focus_card:hover, .stack_card:hover, .experience_card:hover, .portfolio_card:hover {
  box-shadow: var(--ring), var(--shadow-2);
}
.focus_name, .stack_name {
  color: var(--color-heading);
  font-size: 1.375rem;
  font-weight: var(--weight-heading);
  --lh: 1.25;
  letter-spacing: -0.015em;
}
.focus_icon, .stack_logo, .experience_logo {
  border-radius: var(--radius-inner);
  box-shadow: inset 0 0 0 1px var(--color-border);
  transform: none;
}
.focus_card:hover .focus_icon, .stack_card:hover .stack_logo { transform: none; box-shadow: inset 0 0 0 1px var(--color-border-accent); }
.focus_icon svg { stroke: var(--color-primary); }

/* --------------------------------------------------------------------------
   Selected work
   -------------------------------------------------------------------------- */
.portfolio_card { padding: 0; overflow: hidden; }
/* Each project's own accent (--fallback, already set per card) becomes a
   soft warm-to-colour wash behind the floating screenshot, in place of the
   blurred-photo backdrop. */
.portfolio_media {
  border-radius: 0;
  background:
    radial-gradient(120% 90% at 100% 100%, color-mix(in srgb, var(--fallback, #533AFD) 75%, #8B5CFF) 0%, transparent 70%),
    linear-gradient(150deg, #FFF6EC 0%, color-mix(in srgb, var(--fallback, #533AFD) 28%, #FFE3D1) 45%, color-mix(in srgb, var(--fallback, #533AFD) 55%, #FF8FB1) 100%);
}
.portfolio_media .blur-photo { display: none; }
.portfolio_media .thumb-frame { background: rgb(255 255 255 / 0.55); border-color: rgb(255 255 255 / 0.8); box-shadow: 0 24px 40px -16px rgb(50 50 93 / 0.4); }
.portfolio_body { padding: var(--space-3); gap: var(--space-1); }
.portfolio_body .heading-style-h3 { font-size: 1.375rem; font-weight: var(--weight-heading); letter-spacing: -0.015em; }
.portfolio_link { color: var(--color-primary); font-weight: var(--weight-medium); }
.portfolio_link::after { border-radius: var(--radius-card); }
.filter_group { border-radius: var(--radius-pill); box-shadow: var(--ring); }
.filter_thumb { border-radius: 3px; background: var(--color-heading); }
.filter_button { border-radius: 3px; font-size: 0.9375rem; }

/* --------------------------------------------------------------------------
   Stack: a light silk wash (replaced the deep-navy band, 5 Oct 2026). Three soft
   colour pools from the hero ribbon on white, so the white hairline cards lift off
   it and the section still reads as its own band between the two pale ones.
   -------------------------------------------------------------------------- */
.section_stack {
  position: relative;
  background:
    radial-gradient(55% 60% at 0% 100%, rgb(83 58 253 / 0.1), transparent 70%),
    radial-gradient(50% 55% at 100% 100%, rgb(255 168 108 / 0.14), transparent 70%),
    radial-gradient(60% 55% at 30% -15%, rgb(255 120 170 / 0.14), transparent 70%),
    var(--color-white);
  box-shadow: inset 0 1px 0 var(--color-border);
}
.section_stack .stack_item.is-featured .stack_card { background: linear-gradient(135deg, rgb(83 58 253 / 0.06), var(--color-white) 65%); }

/* How I work: the hero's silk ribbon again (same gradient and the same fine vertical sheen lines), softer, so the top and the
   middle of the page share one look. It is the hero's ribbon reflected on both axes (a half turn about the section's centre),
   so the strong colour sits bottom-left and the band fades out toward the heading. The heading sits on a white veil; the
   cards are opaque white, so nothing loses contrast. */
.section_stack { overflow: clip; isolation: isolate; }
.section_stack::before,
.section_stack::after { content: ""; position: absolute; z-index: -1; pointer-events: none; }
.section_stack::before {
  bottom: -36%;
  left: -50%;
  width: 120%;
  height: 100%;
  background:
    repeating-linear-gradient(98deg, rgb(255 255 255 / 0.2) 0 1px, transparent 1px 14px),
    linear-gradient(98deg,
      rgb(255 255 255 / 0) 4%,
      #FFD27A 16%,
      #FF8A5B 28%,
      #FF4D8D 40%,
      #E040FB 52%,
      #8B5CFF 64%,
      #5B7CFF 76%,
      #7FD3FF 88%,
      rgb(255 255 255 / 0) 98%);
  transform: rotate(156deg) skewX(-18deg);
  transform-origin: center;
  border-radius: 45% 0 0 55% / 50% 0 0 50%;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 42%, transparent 80%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 42%, transparent 80%);
  opacity: 0.8;
}
/* Two layers on one pseudo-element: the white veil under the heading, and a fade at the foot of the section into the pale
   surface colour of the Book section below it, so the ribbon dissolves across the boundary instead of being cut by it. The
   fade is eased (a smoothstep in 10% steps) so it has no visible band, and the 1px hairline that used to mark the join is gone. */
.section_stack { --veil-h: 55%; --fade-h: 11.25rem; }
.section_stack::after {
  inset: 0;
  background:
    linear-gradient(180deg, #FFFFFF 0%, rgb(255 255 255 / 0.92) 40%, rgb(255 255 255 / 0) 100%) top / 100% var(--veil-h) no-repeat,
    linear-gradient(180deg,
      rgb(248 250 253 / 0) 0%, rgb(248 250 253 / 0.03) 10%, rgb(248 250 253 / 0.1) 20%, rgb(248 250 253 / 0.22) 30%,
      rgb(248 250 253 / 0.38) 40%, rgb(248 250 253 / 0.55) 50%, rgb(248 250 253 / 0.72) 60%, rgb(248 250 253 / 0.86) 70%,
      rgb(248 250 253 / 0.95) 80%, rgb(248 250 253 / 0.99) 90%, #F8FAFD 100%) bottom / 100% var(--fade-h) no-repeat;
}
@media (max-width: 63.99em) {
  .section_stack { --veil-h: 16rem; --fade-h: 8rem; }
  .section_stack::before { bottom: -18%; left: -80%; width: 190%; height: 62%; opacity: 0.7; }
}
@media (prefers-reduced-motion: no-preference) {
  .section_stack::before { animation: ribbon-drift-flip 18s var(--ease-soft) infinite alternate; }
}
@keyframes ribbon-drift-flip {
  from { transform: rotate(156deg) skewX(-18deg) translateX(0); }
  to { transform: rotate(158deg) skewX(-16deg) translateX(-3%); }
}

/* --------------------------------------------------------------------------
   Book a call: the light "ready to get started" band
   -------------------------------------------------------------------------- */
.section_contact { background: var(--color-surface); }

/* Book a call: a grainy gradient-mesh glow, a different look from the silk ribbon above it. It is the abstract photo that is
   already in the project (hero-atmosphere.jpg, "a blurry image of a purple and blue background" by MagicPattern on
   Unsplash, free Unsplash License; no new download). Only its blue, violet and pink part is used, cropped by the
   background-size, and the layer is mirrored left to right so the photo's dark corner falls on the copy side, where a
   soft elliptical mask dissolves it into the pale section. The mask centre is therefore at 30% (it flips with the layer),
   which is 70% on the page: the colour pools behind the calendar card and the copy on the left stays on a calm field. */
.section_contact { position: relative; overflow: clip; isolation: isolate; }
.section_contact::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  inset: 0 0 0 28%;
  background: url('photos/hero-atmosphere.jpg') 0 0 / 165% 185% no-repeat;
  transform: scaleX(-1);
  -webkit-mask-image: radial-gradient(ellipse 85% 80% at 30% 52%, #000 0%, #000 38%, transparent 76%);
  mask-image: radial-gradient(ellipse 85% 80% at 30% 52%, #000 0%, #000 38%, transparent 76%);
  opacity: 0.8;
}
/* Stacked layouts (below 64em): the copy and the calendar card sit one above the other, so the glow is lighter and starts
   further right, leaving the heading on pale ground. */
@media (max-width: 63.99em) {
  .section_contact::before { inset: 0 0 0 42%; opacity: 0.55; }
}
/* The top edge of this section is the join with How I work, so the glow rises out of the pale surface colour (the same one
   the section above fades into) over about 14rem, eased the same way. */
.section_contact::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  inset: 0 0 auto 0;
  height: 14rem;
  background: linear-gradient(180deg,
    #F8FAFD 0%, rgb(248 250 253 / 0.99) 10%, rgb(248 250 253 / 0.95) 20%, rgb(248 250 253 / 0.86) 30%, rgb(248 250 253 / 0.72) 40%,
    rgb(248 250 253 / 0.55) 50%, rgb(248 250 253 / 0.38) 60%, rgb(248 250 253 / 0.22) 70%, rgb(248 250 253 / 0.1) 80%,
    rgb(248 250 253 / 0.03) 90%, rgb(248 250 253 / 0) 100%);
}
.contact_content .heading-style-h2 { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); letter-spacing: -0.025em; }
.contact_steps li { color: var(--color-heading); font-weight: var(--weight-regular); }
.contact_step-num {
  border-radius: var(--radius-inner);
  background: var(--color-white);
  box-shadow: inset 0 0 0 1px var(--color-border-accent);
  color: var(--color-primary);
}
.contact_risk { border-radius: var(--radius-card); box-shadow: var(--ring); font-weight: var(--weight-regular); }
.contact_risk-icon { stroke: var(--color-primary); }
.contact_visual .blur-field { display: none; }
.contact_visual::before {
  content: "";
  position: absolute;
  inset: 8% -6% -6% 12%;
  z-index: 0;
  border-radius: 40%;
  background: linear-gradient(120deg, #FFB86B, #FF5C93 35%, #B84DFF 62%, #5B7CFF 88%);
  filter: blur(56px);
  opacity: 0.32;
  pointer-events: none;
}
.contact_embed { z-index: 1; box-shadow: var(--ring), var(--shadow-float); }
.contact_embed-core { border-radius: var(--radius-card); }
.contact_cal { border-radius: var(--radius-inner); }

/* --------------------------------------------------------------------------
   Experience
   -------------------------------------------------------------------------- */
.experience_company { font-weight: var(--weight-medium); }
.experience_role { color: var(--color-heading); font-weight: var(--weight-regular); }
.experience_arrow { border-radius: var(--radius-pill); box-shadow: var(--ring); }
.experience_arrow:hover { background: var(--color-white); box-shadow: inset 0 0 0 1px var(--color-primary); color: var(--color-primary); }

/* Experience on a dark band (8 Oct 2026, Mirko's request): the site's ink navy with the hero ribbon's violet, blue and pink
   as soft pools, so the one dark section still belongs to the page. Cards are a lighter navy (the ink with a white tint of 3 to 8%,
   flattened to solid colour, with a hairline), the logo tiles stay white so every mark keeps its own background, and the page's column hairlines are
   redrawn in white because the dark band covers the fixed ones. Text colours are set for this band only; every pair was
   measured from rendered pixels with claudex/section-contrast.py. */
.section_experience {
  position: relative;
  overflow: clip;
  isolation: isolate;
  background:
    radial-gradient(62% 72% at 0% 0%, rgb(83 58 253 / 0.34), transparent 70%),
    radial-gradient(48% 60% at 88% 0%, rgb(91 124 255 / 0.16), transparent 70%),
    radial-gradient(58% 70% at 100% 100%, rgb(255 77 141 / 0.2), transparent 70%),
    #061B31;
}
.section_experience::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  max-width: var(--container);
  margin-inline: auto;
  pointer-events: none;
  background-image: repeating-linear-gradient(to right, rgb(255 255 255 / 0.07) 0, rgb(255 255 255 / 0.07) 1px, transparent 1px, transparent 25%);
}
.section_experience .eyebrow { color: #B9B3FF; }
.section_experience .heading-style-h2 { color: var(--color-white); }
.section_experience .section-heading > .text-size-medium { color: #9DABC6; }
.section_experience .experience_linkedin { color: #B9B3FF; }
.section_experience .experience_linkedin:hover { color: var(--color-white); }
.section_experience :focus-visible { outline-color: #B9B3FF; }
.section_experience .experience_arrow {
  background: transparent;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.3);
  color: var(--color-white);
}
.section_experience .experience_arrow:hover { background: rgb(255 255 255 / 0.12); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.7); color: var(--color-white); }
.section_experience .experience_card {
  background: linear-gradient(180deg, #1A2D44, #0F2338); /* the navy with a white tint of 8% fading to 3%, flattened so the column hairlines do not show through */
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12), 0 24px 40px -28px rgb(0 0 0 / 0.7);
}
.section_experience .experience_card:hover { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.24), 0 24px 40px -28px rgb(0 0 0 / 0.7); }
.section_experience .experience_logo { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.5), 0 8px 18px -8px var(--glow, rgb(0 0 0 / 0.5)); }
.section_experience .experience_company { color: var(--color-white); }
.section_experience .experience_period { color: #9DABC6; }
.section_experience .experience_role { color: #E3EAF4; }
.section_experience .experience_summary { color: #B4C0D4; }
.section_experience .carousel_dot { background: rgb(255 255 255 / 0.28); }
.section_experience .carousel_dot.is-active { background: #B9B3FF; }

/* --------------------------------------------------------------------------
   FAQ: open hairline rows instead of filled cards
   -------------------------------------------------------------------------- */
.faq_list { gap: 0; box-shadow: inset 0 1px 0 var(--color-border); }
.faq_item, .faq_item.is-open { border-radius: 0; background: none; box-shadow: inset 0 -1px 0 var(--color-border); }
.faq_question {
  min-height: 4.5rem;
  padding: var(--space-3) 0;
  border-radius: 0;
  color: var(--color-heading);
  font-size: 1.1875rem;
  font-weight: var(--weight-regular);
}
.faq_icon { width: 32px; height: 32px; border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1px var(--color-border); }
.faq_icon::before, .faq_icon::after { background: var(--color-primary); }
.faq_question:hover .faq_icon,
.faq_question[aria-expanded="true"] .faq_icon { background: var(--color-primary); box-shadow: none; }
.faq_question:hover .faq_icon::before, .faq_question:hover .faq_icon::after,
.faq_question[aria-expanded="true"] .faq_icon::before, .faq_question[aria-expanded="true"] .faq_icon::after { background: var(--color-white); }
/* Open: the square stays put and the plus folds into a minus. */
.faq_question[aria-expanded="true"] .faq_icon { transform: none; }
.faq_icon::after { transition: transform var(--dur-base) var(--ease-out); }
.faq_question[aria-expanded="true"] .faq_icon::after { transform: rotate(0deg); }
.faq_answer { padding: 0 var(--space-8) var(--space-3) 0; }

/* --------------------------------------------------------------------------
   Reviews
   -------------------------------------------------------------------------- */
.testimonial_card { background: var(--color-white); }
.testimonial_core { border-radius: var(--radius-card); box-shadow: none; }
.testimonial_mark { color: var(--color-primary); font-weight: 300; }
.testimonial_core blockquote p { color: var(--color-heading); font-size: 1.125rem; font-weight: 300; --lh: 1.5; }
.testimonial_avatar.is-initials { background: var(--color-primary-tint); color: var(--color-primary); }

.carousel_dot.is-active { background: var(--color-primary); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.footer_component { background: var(--color-surface); box-shadow: inset 0 1px 0 var(--color-border); }
.footer_name { font-size: 1.375rem; font-weight: var(--weight-heading); letter-spacing: -0.015em; }
.footer_link { color: var(--color-text); font-weight: var(--weight-regular); }
.footer_link:hover { color: var(--color-primary); }
.footer_legal { box-shadow: inset 0 1px 0 var(--color-border); }

/* Placeholders keep their dashed outline, just on the new palette. */
.placeholder { outline-color: rgb(80 97 122 / 0.5); }