/*=== fonts ===*/
/* Typeface: Jost (Google Fonts) — the face used across seaandsunlife.eu and
   .com. Geometric, warm, Futura-adjacent; it carries both display and body.
   The hand-drawn logotype exists only as artwork in /assets — never re-typed. */
@import url("https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&display=swap");
:root{
  --font-display:"Jost","Century Gothic","Trebuchet MS",system-ui,sans-serif;
  --font-body:"Jost","Century Gothic",system-ui,sans-serif;
  --font-mono:ui-monospace,"SFMono-Regular",Menlo,monospace;
}

/*=== colors ===*/
/* Base palette, sampled from the live brand:
   - logo (2026 artwork): sun #FEBC06, sea #0066B2, ink #0A0A0B
   - seaandsunlife.eu: blue #2860A8, yellow #E8BC40, warm white #FCF8F4, slate ink #404450
   - seaandsunlife.com: navy #0D1F2D, gold #B8973A, sand #F5F0E8 */
:root{
  /* Sun — the yellow CTA and highlight colour */
  --sun-50:#FDF8E8;--sun-100:#FAEFC9;--sun-200:#F5E19B;--sun-300:#EFD16B;
  --sun-400:#E8BC40;--sun-500:#E0AE22;--sun-600:#C69412;--sun-700:#9C7409;
  --sun-800:#6E5106;--sun-900:#3F2E03;
  /* Logo yellow, kept exact for artwork-adjacent use */
  --sun-logo:#FEBC06;

  /* Sea — the blue of links, headings and primary surfaces */
  --sea-50:#EDF3FA;--sea-100:#D3E1F2;--sea-200:#A6C2E4;--sea-300:#6E9BD1;
  --sea-400:#3F79BC;--sea-500:#2860A8;--sea-600:#1F4E8C;--sea-700:#193F72;
  --sea-800:#16293B;--sea-900:#0D1F2D;
  /* Logo blue and the lighter "ocean" tint used on the .com site */
  --sea-logo:#0066B2;--ocean-400:#2C9DD9;

  /* Navy — the dark ground of the consulting site */
  --navy-900:#0D1F2D;--navy-800:#16293B;--navy-700:#20364A;

  /* Gold — quiet metallic accent for eyebrows and rules */
  --gold-400:#C9AC5E;--gold-500:#B8973A;--gold-600:#9A7C2C;--gold-50:#F7F1DF;

  /* Ink — text and hairlines (warm slate, not black) */
  --ink-900:#14181C;--ink-800:#232830;--ink-700:#333945;--ink-600:#404450;
  --ink-500:#5A6070;--ink-400:#78808C;--ink-300:#A8AEB8;--ink-200:#D2D6DC;
  --ink-100:#E6E9ED;--ink-50:#F2F4F6;

  /* Sand — warm neutral grounds */
  --sand-50:#FCFAF6;--sand-100:#FCF8F4;--sand-200:#F5F0E8;--sand-300:#E8E0D4;
  --sand-400:#D5C9B6;--sand-500:#B7A88F;

  /* Support hues */
  --palm-500:#2F8A63;--palm-50:#E8F4EE;
  --coral-500:#C97C5D;--coral-50:#F9EFE9;

  --white:#FFFFFF;
  --black:#000000;

  /* Alpha ramps for hairlines, scrims and glass */
  --ink-a04:rgba(20,24,28,.04);--ink-a08:rgba(20,24,28,.08);--ink-a12:rgba(20,24,28,.12);
  --ink-a24:rgba(20,24,28,.24);--ink-a56:rgba(20,24,28,.56);--ink-a80:rgba(20,24,28,.80);
  --white-a12:rgba(255,255,255,.12);--white-a16:rgba(255,255,255,.16);
  --white-a32:rgba(255,255,255,.32);--white-a45:rgba(255,255,255,.45);
  --white-a60:rgba(255,255,255,.60);--white-a72:rgba(255,255,255,.72);
}

/*=== typography ===*/
:root{
  /* Size ramp — px */
  --text-2xs:11px;--text-xs:13px;--text-sm:14px;--text-base:16px;--text-md:17px;
  --text-lg:20px;--text-xl:24px;--text-2xl:30px;--text-3xl:38px;--text-4xl:46px;
  --text-5xl:58px;--text-6xl:74px;

  --leading-tight:1.06;--leading-snug:1.18;--leading-normal:1.5;--leading-relaxed:1.75;

  --weight-light:300;--weight-regular:400;--weight-medium:500;--weight-semibold:600;
  --weight-bold:700;

  --tracking-tighter:-0.03em;--tracking-tight:-0.02em;--tracking-snug:-0.01em;
  --tracking-normal:0em;--tracking-wide:0.08em;--tracking-caps:0.2em;

  /* Composed roles — Jost throughout, weight and tracking carry the hierarchy */
  --type-display:var(--weight-semibold) var(--text-6xl)/var(--leading-tight) var(--font-display);
  --type-h1:var(--weight-semibold) var(--text-5xl)/var(--leading-tight) var(--font-display);
  --type-h2:var(--weight-semibold) var(--text-3xl)/var(--leading-snug) var(--font-display);
  --type-h3:var(--weight-medium) var(--text-xl)/1.28 var(--font-display);
  --type-h4:var(--weight-medium) var(--text-md)/1.35 var(--font-display);
  --type-body:var(--weight-regular) var(--text-base)/var(--leading-relaxed) var(--font-body);
  --type-body-lg:var(--weight-light) var(--text-md)/var(--leading-relaxed) var(--font-body);
  --type-small:var(--weight-regular) var(--text-sm)/var(--leading-normal) var(--font-body);
  --type-label:var(--weight-medium) var(--text-2xs)/1.2 var(--font-body);
  /* Eyebrow: 11px, medium, 0.2em tracking, uppercase — used on both live sites */
  --type-eyebrow:var(--weight-medium) var(--text-2xs)/1.3 var(--font-body);
}

/*=== spacing ===*/
:root{
  /* 4px base grid */
  --space-0:0px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;
  --space-5:20px;--space-6:24px;--space-7:32px;--space-8:40px;--space-9:48px;
  --space-10:64px;--space-11:80px;--space-12:96px;--space-13:128px;

  /* Layout */
  --container-max:1280px;--container-narrow:720px;
  --gutter-mobile:20px;--gutter-desktop:40px;
  --section-y:var(--space-12);--section-y-tight:var(--space-10);
  --grid-gap:var(--space-6);
  --header-h:72px;--tap-min:44px;
}

/*=== radius ===*/
:root{
  /* The logotype is hand-drawn and round-terminalled — radii run generous. */
  --radius-xs:6px;--radius-sm:10px;--radius-md:14px;--radius-lg:20px;
  --radius-xl:28px;--radius-2xl:40px;--radius-pill:999px;--radius-circle:50%;
  --radius-card:var(--radius-lg);--radius-control:var(--radius-pill);
  --radius-media:var(--radius-lg);--radius-sheet:var(--radius-xl);
}

/*=== elevation ===*/
:root{
  /* Warm, low, two-layer shadows — daylight, not drama. Never pure black. */
  --shadow-none:none;
  --shadow-xs:0 1px 2px rgba(10,10,11,.06);
  --shadow-sm:0 1px 2px rgba(10,10,11,.05),0 2px 6px rgba(10,10,11,.05);
  --shadow-md:0 2px 4px rgba(10,10,11,.04),0 8px 20px rgba(10,10,11,.08);
  --shadow-lg:0 4px 8px rgba(10,10,11,.05),0 18px 40px rgba(10,10,11,.10);
  --shadow-xl:0 8px 16px rgba(10,10,11,.06),0 32px 64px rgba(10,10,11,.14);
  --shadow-sun:0 6px 20px rgba(224,162,0,.32);
  --shadow-sea:0 6px 20px rgba(0,102,178,.26);
  --shadow-inset-hairline:inset 0 0 0 1px var(--ink-a08);
  --scrim-photo:linear-gradient(180deg,rgba(10,10,11,0) 34%,rgba(10,10,11,.72) 100%); /* @kind other */
  --scrim-top:linear-gradient(180deg,rgba(10,10,11,.55) 0%,rgba(10,10,11,0) 60%); /* @kind other */
  --blur-glass:saturate(150%) blur(14px); /* @kind other */
}

/*=== motion ===*/
:root{
  --duration-instant:80ms; /* @kind other */--duration-fast:140ms; /* @kind other */--duration-base:220ms; /* @kind other */
  --duration-slow:360ms; /* @kind other */--duration-slower:560ms; /* @kind other */
  --ease-out-soft:cubic-bezier(.22,.61,.36,1); /* @kind other */
  --ease-in-out-soft:cubic-bezier(.4,0,.2,1); /* @kind other */
  --ease-swell:cubic-bezier(.34,1.24,.64,1); /* @kind other */
  --transition-control:background-color var(--duration-fast) var(--ease-out-soft),color var(--duration-fast) var(--ease-out-soft),box-shadow var(--duration-fast) var(--ease-out-soft),transform var(--duration-fast) var(--ease-out-soft); /* @kind other */
  --transition-surface:box-shadow var(--duration-base) var(--ease-out-soft),transform var(--duration-base) var(--ease-out-soft); /* @kind other */
  --lift-hover:translateY(-2px); /* @kind other */--press-scale:scale(.98); /* @kind other */
}

/*=== semantic ===*/
/* Semantic aliases — components reference these, not the base ramps. */
:root{
  --surface-page:var(--white);
  --surface-card:var(--white);
  --surface-sunken:var(--sand-100);
  --surface-band:var(--sand-200);
  --surface-inverse:var(--navy-900);
  --surface-inverse-soft:var(--navy-800);
  --surface-accent:var(--sun-400);
  --surface-accent-soft:var(--sun-50);
  --surface-sea-soft:var(--sea-50);
  --surface-glass:var(--white-a72);

  --text-body:var(--ink-600);
  --text-heading:var(--ink-900);
  --text-muted:var(--ink-400);
  --text-subtle:var(--ink-300);
  --text-on-accent:var(--ink-900);
  --text-on-inverse:var(--white);
  --text-on-inverse-muted:var(--white-a60);
  --text-link:var(--sea-500);
  --text-link-hover:var(--sea-700);
  --text-eyebrow:var(--gold-500);

  --border-hairline:var(--ink-a12);
  --border-hairline-light:var(--white-a12);
  --border-strong:var(--navy-900);
  --border-focus:var(--sea-500);
  --focus-ring:0 0 0 3px var(--white),0 0 0 5px var(--sea-500);

  --action-primary-bg:var(--sun-400);
  --action-primary-bg-hover:var(--sun-300);
  --action-primary-bg-active:var(--sun-500);
  --action-primary-fg:var(--ink-900);
  --action-secondary-bg:var(--sea-500);
  --action-secondary-bg-hover:var(--sea-400);
  --action-secondary-bg-active:var(--sea-600);
  --action-secondary-fg:var(--white);
  --action-quiet-bg:transparent;
  --action-quiet-bg-hover:var(--ink-a04);
  --action-disabled-bg:var(--ink-100);
  --action-disabled-fg:var(--ink-300);

  --status-success-fg:var(--palm-500);--status-success-bg:var(--palm-50);
  --status-danger-fg:var(--coral-500);--status-danger-bg:var(--coral-50);
  --status-warning-fg:var(--sun-700);--status-warning-bg:var(--sun-50);
  --status-info-fg:var(--sea-500);--status-info-bg:var(--sea-50);
}

/*=== base ===*/
/* Minimal element defaults so any consumer page inherits the brand voice. */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--surface-page);color:var(--text-body);font:var(--type-body);-webkit-font-smoothing:antialiased;text-wrap:pretty}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);color:var(--text-heading);letter-spacing:var(--tracking-tight)}
h1{font:var(--type-h1);letter-spacing:var(--tracking-tight)}h2{font:var(--type-h2)}h3{font:var(--type-h3)}h4{font:var(--type-h4)}
p{margin:0 0 var(--space-4)}
a{color:var(--text-link);text-decoration-color:var(--sea-200);text-decoration-thickness:1.5px;text-underline-offset:3px;transition:color var(--duration-fast) var(--ease-out-soft)}
a:hover{color:var(--text-link-hover);text-decoration-color:currentColor}
small{font:var(--type-small);color:var(--text-muted)}
::selection{background:var(--sun-200);color:var(--ink-900)}
:focus-visible{outline:none;box-shadow:var(--focus-ring)}
img{max-width:100%;display:block}