@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700&family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&family=Nunito+Sans:opsz,wght@6..12,900&display=swap');

@custom-variant dark (&:is(.dark *));

@theme inline {
  --color-background: hsl(var(--background));
  --color-foreground: hsl(var(--foreground));
  --color-border: hsl(var(--border));
  --color-input: hsl(var(--input));
  --color-ring: hsl(var(--ring));

  --color-card: hsl(var(--card));
  --color-card-foreground: hsl(var(--card-foreground));
  --color-card-border: hsl(var(--card-border));

  --color-popover: hsl(var(--popover));
  --color-popover-foreground: hsl(var(--popover-foreground));
  --color-popover-border: hsl(var(--popover-border));

  --color-primary: hsl(var(--primary));
  --color-primary-foreground: hsl(var(--primary-foreground));
  --color-primary-border: var(--primary-border);

  --color-secondary: hsl(var(--secondary));
  --color-secondary-foreground: hsl(var(--secondary-foreground));
  --color-secondary-border: var(--secondary-border);

  --color-muted: hsl(var(--muted));
  --color-muted-foreground: hsl(var(--muted-foreground));
  --color-muted-border: var(--muted-border);

  --color-accent: hsl(var(--accent));
  --color-accent-foreground: hsl(var(--accent-foreground));
  --color-accent-border: var(--accent-border);

  --color-destructive: hsl(var(--destructive));
  --color-destructive-foreground: hsl(var(--destructive-foreground));
  --color-destructive-border: var(--destructive-border);

  --color-chart-1: hsl(var(--chart-1));
  --color-chart-2: hsl(var(--chart-2));
  --color-chart-3: hsl(var(--chart-3));
  --color-chart-4: hsl(var(--chart-4));
  --color-chart-5: hsl(var(--chart-5));

  --color-sidebar: hsl(var(--sidebar));
  --color-sidebar-foreground: hsl(var(--sidebar-foreground));
  --color-sidebar-border: hsl(var(--sidebar-border));
  --color-sidebar-primary: hsl(var(--sidebar-primary));
  --color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground));
  --color-sidebar-primary-border: var(--sidebar-primary-border);
  --color-sidebar-accent: hsl(var(--sidebar-accent));
  --color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground));
  --color-sidebar-accent-border: var(--sidebar-accent-border);
  --color-sidebar-ring: hsl(var(--sidebar-ring));

  --font-sans: var(--app-font-sans);
  --font-serif: var(--app-font-serif);
  --font-mono: var(--app-font-mono);

  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
}

/* LIGHT MODE */
:root {
  --button-outline: rgba(0, 0, 0, 0.1);
  --badge-outline: rgba(0, 0, 0, 0.05);

  /* Automatic computation of border around primary / danger buttons */
  --opaque-button-border-intensity: -8; /* In terms of percentages */

  /* Backgrounds applied on top of other backgrounds when hovered/active */
  --elevate-1: rgba(0, 0, 0, 0.03);
  --elevate-2: rgba(0, 0, 0, 0.08);

  --background: 42 22% 94%;

  --foreground: 214 22% 15%;

  --border: 210 13% 78%;

  --card: 42 22% 97%;

  --card-foreground: 214 22% 15%;

  --card-border: 210 13% 78%;

  --sidebar: 216 29% 18%;

  --sidebar-foreground: 42 22% 94%;

  --sidebar-border: 216 20% 29%;

  --sidebar-primary: 2 82% 54%;

  --sidebar-primary-foreground: 42 22% 97%;

  --sidebar-accent: 216 20% 29%;

  --sidebar-accent-foreground: 42 22% 94%;

  --sidebar-ring: 2 82% 54%;

  --popover: 42 22% 97%;

  --popover-foreground: 214 22% 15%;

  --popover-border: 210 13% 78%;

  --primary: 2 82% 54%;

  --primary-foreground: 42 22% 97%;

  --secondary: 196 33% 31%;

  --secondary-foreground: 42 22% 97%;

  --muted: 40 15% 87%;

  --muted-foreground: 211 12% 43%;

  --accent: 42 47% 71%;

  --accent-foreground: 214 22% 15%;

  --destructive: 2 82% 54%;

  --destructive-foreground: 42 22% 97%;

  --input: 210 13% 78%;
  --ring: 2 82% 54%;
  --chart-1: 2 82% 54%;
  --chart-2: 196 33% 31%;
  --chart-3: 42 47% 71%;
  --chart-4: 214 22% 15%;
  --chart-5: 210 13% 78%;

  --app-font-sans: 'Manrope', sans-serif;
  --app-font-serif: 'Barlow Condensed', sans-serif;
  --app-font-mono: 'DM Mono', monospace;
  --radius: 0.5rem; /* 8px */
  --shadow-2xs: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0); /*replace with H S L */
  --shadow-xs: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0); /*replace with H S L */
  --shadow-sm:
    0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0),
    0px 1px 2px -1px hsl(202.8169 89.1213% 53.1373% / 0);
  --shadow:
    0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0),
    0px 1px 2px -1px hsl(202.8169 89.1213% 53.1373% / 0);
  --shadow-md:
    0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0),
    0px 2px 4px -1px hsl(202.8169 89.1213% 53.1373% / 0);
  --shadow-lg:
    0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0),
    0px 4px 6px -1px hsl(202.8169 89.1213% 53.1373% / 0);
  --shadow-xl:
    0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0),
    0px 8px 10px -1px hsl(202.8169 89.1213% 53.1373% / 0);
  --shadow-2xl: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0);
  --tracking-normal: 0em;
  --spacing: 0.25rem;

  /* Automatically computed borders - intensity can be controlled by the user by the --opaque-button-border-intensity setting */

  /* Fallback for older browsers */
  --sidebar-primary-border: hsl(var(--sidebar-primary));
  --sidebar-primary-border: hsl(
    from hsl(var(--sidebar-primary)) h s
      calc(l + var(--opaque-button-border-intensity)) / alpha
  );

  /* Fallback for older browsers */
  --sidebar-accent-border: hsl(var(--sidebar-accent));
  --sidebar-accent-border: hsl(
    from hsl(var(--sidebar-accent)) h s
      calc(l + var(--opaque-button-border-intensity)) / alpha
  );

  /* Fallback for older browsers */
  --primary-border: hsl(var(--primary));
  --primary-border: hsl(
    from hsl(var(--primary)) h s
      calc(l + var(--opaque-button-border-intensity)) / alpha
  );

  /* Fallback for older browsers */
  --secondary-border: hsl(var(--secondary));
  --secondary-border: hsl(
    from hsl(var(--secondary)) h s
      calc(l + var(--opaque-button-border-intensity)) / alpha
  );

  /* Fallback for older browsers */
  --muted-border: hsl(var(--muted));
  --muted-border: hsl(
    from hsl(var(--muted)) h s calc(l + var(--opaque-button-border-intensity)) /
      alpha
  );

  /* Fallback for older browsers */
  --accent-border: hsl(var(--accent));
  --accent-border: hsl(
    from hsl(var(--accent)) h s
      calc(l + var(--opaque-button-border-intensity)) / alpha
  );

  /* Fallback for older browsers */
  --destructive-border: hsl(var(--destructive));
  --destructive-border: hsl(
    from hsl(var(--destructive)) h s
      calc(l + var(--opaque-button-border-intensity)) / alpha
  );
}

.dark {
  --button-outline: rgba(255, 255, 255, 0.1);
  --badge-outline: rgba(255, 255, 255, 0.05);

  --opaque-button-border-intensity: 9; /* In terms of percentages */

  /* Backgrounds applied on top of other backgrounds when hovered/active */
  --elevate-1: rgba(255, 255, 255, 0.04);
  --elevate-2: rgba(255, 255, 255, 0.09);

  --background: 214 22% 15%;

  --foreground: 42 22% 94%;

  --border: 216 20% 29%;

  --card: 216 25% 20%;

  --card-foreground: 42 22% 94%;

  --card-border: 216 20% 29%;

  --sidebar: 216 29% 11%;

  --sidebar-foreground: 42 22% 94%;

  --sidebar-border: 216 20% 24%;

  --sidebar-primary: 2 82% 54%;

  --sidebar-primary-foreground: 42 22% 97%;

  --sidebar-accent: 216 20% 24%;

  --sidebar-accent-foreground: 42 22% 94%;

  --sidebar-ring: 2 82% 54%;

  --popover: 216 25% 20%;

  --popover-foreground: 42 22% 94%;

  --popover-border: 216 20% 29%;

  --primary: 2 82% 54%;

  --primary-foreground: 42 22% 97%;

  --secondary: 196 33% 31%;

  --secondary-foreground: 42 22% 97%;

  --muted: 216 20% 25%;

  --muted-foreground: 40 12% 72%;

  --accent: 42 47% 71%;

  --accent-foreground: 214 22% 15%;

  --destructive: 2 82% 54%;

  --destructive-foreground: 42 22% 97%;

  /* Used as the border around inputs. Dark mode: Should be a border that is light enough to have high contrast when rendered on a --card background. More contrast than standard --border */
  --input: 216 20% 29%;
  --ring: 2 82% 54%;
  --chart-1: 2 82% 54%;
  --chart-2: 196 33% 31%;
  --chart-3: 42 47% 71%;
  --chart-4: 42 22% 94%;
  --chart-5: 210 13% 52%;

  --shadow-2xs: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0);
  --shadow-xs: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0);
  --shadow-sm:
    0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0),
    0px 1px 2px -1px hsl(202.8169 89.1213% 53.1373% / 0);
  --shadow:
    0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0),
    0px 1px 2px -1px hsl(202.8169 89.1213% 53.1373% / 0);
  --shadow-md:
    0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0),
    0px 2px 4px -1px hsl(202.8169 89.1213% 53.1373% / 0);
  --shadow-lg:
    0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0),
    0px 4px 6px -1px hsl(202.8169 89.1213% 53.1373% / 0);
  --shadow-xl:
    0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0),
    0px 8px 10px -1px hsl(202.8169 89.1213% 53.1373% / 0);
  --shadow-2xl: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0);
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply font-sans antialiased bg-background text-foreground;
  }
}

/**
 * Using the elevate system.
 * Automatic contrast adjustment.
 *
 * <element className="hover-elevate" />
 * <element className="active-elevate-2" />
 *
 * // Using the tailwind utility when a data attribute is "on"
 * <element className="toggle-elevate data-[state=on]:toggle-elevated" />
 * // Or manually controlling the toggle state
 * <element className="toggle-elevate toggle-elevated" />
 *
 * Elevation systems have to handle many states.
 * - not-hovered, vs. hovered vs. active  (three mutually exclusive states)
 * - toggled or not
 * - focused or not (this is not handled with these utilities)
 *
 * Even without handling focused or not, this is six possible combinations that
 * need to be distinguished from eachother visually.
 */
@layer utilities {
  /* Hide ugly search cancel button in Chrome until we can style it properly */
  input[type='search']::-webkit-search-cancel-button {
    @apply hidden;
  }

  /* Placeholder styling for contentEditable div */
  [contenteditable][data-placeholder]:empty::before {
    content: attr(data-placeholder);
    color: hsl(var(--muted-foreground));
    pointer-events: none;
  }

  /* .no-default-hover-elevate/no-default-active-elevate is an escape hatch so consumers of
   * buttons/badges can remove the automatic brightness adjustment on interactions
   * and program their own. */
  .no-default-hover-elevate {
  }

  .no-default-active-elevate {
  }

  /**
   * Toggleable backgrounds go behind the content. Hoverable/active goes on top.
   * This way they can stack/compound. Both will overlap the parent's borders!
   * So borders will be automatically adjusted both on toggle, and hover/active,
   * and they will be compounded.
   */
  .toggle-elevate::before,
  .toggle-elevate-2::before {
    content: '';
    pointer-events: none;
    position: absolute;
    inset: 0px;
    /*border-radius: inherit;   match rounded corners */
    border-radius: inherit;
    z-index: -1;
    /* sits behind content but above backdrop */
  }

  .toggle-elevate.toggle-elevated::before {
    background-color: var(--elevate-2);
  }

  /* If there's a 1px border, adjust the inset so that it covers that parent's border */
  .border.toggle-elevate::before {
    inset: -1px;
  }

  /* Does not work on elements with overflow:hidden! */
  .hover-elevate:not(.no-default-hover-elevate),
  .active-elevate:not(.no-default-active-elevate),
  .hover-elevate-2:not(.no-default-hover-elevate),
  .active-elevate-2:not(.no-default-active-elevate) {
    position: relative;
    z-index: 0;
  }

  .hover-elevate:not(.no-default-hover-elevate)::after,
  .active-elevate:not(.no-default-active-elevate)::after,
  .hover-elevate-2:not(.no-default-hover-elevate)::after,
  .active-elevate-2:not(.no-default-active-elevate)::after {
    content: '';
    pointer-events: none;
    position: absolute;
    inset: 0px;
    /*border-radius: inherit;   match rounded corners */
    border-radius: inherit;
    z-index: 999;
    /* sits in front of content */
  }

  .hover-elevate:hover:not(.no-default-hover-elevate)::after,
  .active-elevate:active:not(.no-default-active-elevate)::after {
    background-color: var(--elevate-1);
  }

  .hover-elevate-2:hover:not(.no-default-hover-elevate)::after,
  .active-elevate-2:active:not(.no-default-active-elevate)::after {
    background-color: var(--elevate-2);
  }

  /* If there's a 1px border, adjust the inset so that it covers that parent's border */
  .border.hover-elevate:not(.no-hover-interaction-elevate)::after,
  .border.active-elevate:not(.no-active-interaction-elevate)::after,
  .border.hover-elevate-2:not(.no-hover-interaction-elevate)::after,
  .border.active-elevate-2:not(.no-active-interaction-elevate)::after,
  .border.hover-elevate:not(.no-hover-interaction-elevate)::after {
    inset: -1px;
  }
}

/* abloser.de — editorial working-vessel system */
:root {
  --ink: #202a34;
  --navy: #1e2a36;
  --red: #ef312f;
  --paper: #f2f0e9;
  --sand: #e3dfd4;
  --blue: #416d7b;
  --line: rgba(32, 42, 52, 0.18);
  --display: 'Barlow Condensed', sans-serif;
  --body: 'Manrope', sans-serif;
  --mono: 'DM Mono', monospace;
}

html { scroll-behavior: smooth; background: var(--navy); }
body, #root { min-height: 100%; background: var(--navy); }
body { color: var(--ink); font-family: var(--body); }
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }

.site-shell { overflow: hidden; background: var(--paper); }
.site-header {
  position: fixed; z-index: 20; top: 0; left: 0; right: 0; height: 124px;
  display: flex; align-items: center; justify-content: space-between; padding: 0 4.2vw;
  background: #ffffff; border-bottom: 1px solid var(--line);
}
.brand-lockup { border: 0; outline: 0; padding: 0; background: transparent; display: inline-flex; align-items: baseline; white-space: nowrap; font-family: 'Nunito Sans', var(--body); font-size: clamp(58px, 4.8vw, 76px); font-weight: 900; line-height: .8; letter-spacing: -.085em; text-shadow: none; }
.brand-name { color: var(--red); }
.brand-domain { color: var(--navy); display: inline-flex; align-items: baseline; margin-left: .16em; letter-spacing: -.07em; }
.brand-dot { align-self: flex-end; width: .16em; height: .16em; margin: 0 .025em .035em 0; border: 0; border-radius: 50%; background: var(--red); flex: 0 0 auto; }
.main-nav { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 38px); }
.main-nav button, .menu-toggle { border: 0; background: transparent; color: var(--ink); font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.main-nav button { padding: 10px 0; position: relative; }
.main-nav button:not(.nav-call)::after { content: ''; position: absolute; left: 0; right: 100%; bottom: 4px; height: 2px; background: var(--red); transition: right .3s ease; }
.main-nav button:not(.nav-call):hover::after { right: 0; }
.language-switch { display: flex; align-items: center; border: 1px solid var(--line); padding: 3px; gap: 1px; }
.language-switch button { min-width: 31px; padding: 7px 6px !important; color: #68747a; transition: background .2s ease, color .2s ease; }
.language-switch button::after { display: none !important; }
.language-switch button:hover { color: var(--ink); }
.language-switch button.is-active { background: var(--navy); color: #ffffff; }
.nav-call { display: flex; align-items: center; gap: 7px; color: var(--red) !important; border: 1px solid var(--red) !important; padding: 11px 14px !important; transition: background .25s ease, color .25s ease; }
.nav-call:hover { background: var(--red); color: var(--paper) !important; }
.menu-toggle { display: none; padding: 9px; }

.hero { min-height: 100svh; display: flex; flex-direction: column; position: relative; padding-top: 124px; background: var(--navy); color: var(--paper); }
.hero-grid { flex: 1; min-height: calc(100svh - 124px); display: grid; grid-template-columns: 55% 45%; align-items: stretch; width: 100%; }
.hero-copy { padding: clamp(60px, 10vh, 120px) 5vw clamp(60px, 10vh, 120px) 8.5vw; position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; }
.hero-kicker, .eyebrow { font-family: var(--mono); text-transform: uppercase; font-size: 10px; letter-spacing: .15em; font-weight: 500; }
.hero-kicker { color: #c8cbc4; display: flex; gap: 9px; align-items: center; margin-bottom: 24px; }
.red-dot { height: 7px; width: 7px; background: var(--red); display: inline-block; border-radius: 50%; }
h1, h2, h3, p { margin: 0; }
h1, h2 { font-family: var(--display); font-weight: 600; letter-spacing: -.025em; text-transform: uppercase; }
h1 { font-size: clamp(76px, 10.2vw, 166px); line-height: .83; max-width: 700px; }
h1 em, h2 em { font-style: normal; color: var(--red); }
.hero-title { font-size: clamp(68px, 9.4vw, 154px); line-height: .82; letter-spacing: -.045em; max-width: 760px; }
.hero-title em { display: block; width: fit-content; margin: .08em 0 0 clamp(18px, 3vw, 48px); padding-bottom: .08em; font-size: .72em; line-height: .9; letter-spacing: -.035em; border-bottom: 2px solid var(--red); }
.hero-title.hero-quote { font-size: clamp(35px, 4.24vw, 69px); line-height: .91; letter-spacing: -.035em; max-width: 780px; }
.hero-title.hero-quote em { max-width: 720px; font-size: .72em; line-height: .96; }
.hero-author { margin: 14px 0 0 clamp(18px, 3vw, 48px); color: #9ca5a9; font-family: var(--mono); font-size: 8px; line-height: 1.4; letter-spacing: .16em; text-transform: uppercase; }
.hero-intro { font-size: clamp(15px, 1.25vw, 19px); line-height: 1.58; max-width: 420px; margin-top: 32px; color: #d2d5cf; }
.hero-actions { display: flex; align-items: center; gap: 26px; margin-top: 38px; }
.button { border: 0; display: inline-flex; align-items: center; justify-content: center; gap: 11px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 800; padding: 17px 21px; transition: transform .25s ease, background .25s ease; }
.button:hover { transform: translateY(-3px); }
.button-red { background: var(--red); color: var(--paper); }
.button-red:hover { background: #ff4845; }
.text-link { display: inline-flex; gap: 8px; align-items: center; border: 0; background: transparent; font-size: 11px; letter-spacing: .09em; font-weight: 800; text-transform: uppercase; padding: 0; }
.light-link { color: var(--paper); }
.dark-link { color: var(--ink); }
.text-link svg { transition: transform .25s ease; }
.text-link:hover svg { transform: translate(3px, -3px); }
.hero-visual { min-height: calc(100svh - 124px); width: calc(100% + 110px); margin-left: -110px; position: relative; z-index: 1; overflow: hidden; background: #101a23; }
.hero-visual::before { content: ''; position: absolute; inset: 24px 24px 24px 110px; z-index: 3; border: 1px solid rgba(242,240,233,.24); border-left-color: rgba(242,240,233,.12); pointer-events: none; background: linear-gradient(90deg, transparent, rgba(242,240,233,.22), transparent) 0 68% / 100% 1px no-repeat, linear-gradient(0deg, transparent, rgba(242,240,233,.18), transparent) 82% 0 / 1px 100% no-repeat; }
.hero-visual::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(90deg, rgba(30,42,54,.96) 0%, rgba(30,42,54,.64) 13%, rgba(30,42,54,.16) 28%, transparent 44%), linear-gradient(0deg, rgba(30,42,54,.42), transparent 38%), linear-gradient(180deg, rgba(30,42,54,.2), transparent 30%); }
.hero-visual img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 42%; filter: saturate(.76) contrast(1.07); -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.38) 10%, #000 27%, #000 100%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.38) 10%, #000 27%, #000 100%); }
.scroll-cue { position: absolute; left: 11vw; bottom: 30px; z-index: 3; font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: .12em; color: #84929a; display: flex; align-items: center; gap: 11px; }
.scroll-cue svg { color: var(--red); animation: bob 1.8s ease-in-out infinite; }

.trust-band { min-height: 112px; display: flex; align-items: center; justify-content: space-between; padding: 0 8.5vw; border-bottom: 1px solid var(--line); background: var(--sand); }
.trust-label { color: #677078; font-family: var(--mono); text-transform: uppercase; letter-spacing: .1em; font-size: 9px; }
.waterways { display: flex; align-items: center; gap: clamp(13px, 2.1vw, 34px); font-family: var(--display); text-transform: uppercase; font-size: clamp(20px, 2.5vw, 37px); letter-spacing: -.02em; color: var(--navy); }
.waterway-item { display: inline-flex; align-items: center; gap: clamp(13px, 2.1vw, 34px); }
.waterways i { display: block; width: 5px; height: 5px; background: var(--red); border-radius: 50%; }

.section-pad { padding: clamp(86px, 12vw, 180px) 0; scroll-margin-top: 78px; }
.section-index { display: flex; align-items: center; gap: 15px; color: var(--red); font-family: var(--mono); letter-spacing: .1em; font-size: 10px; text-transform: uppercase; padding: 0 11vw; }
.section-index::after { content: ''; width: 49px; height: 1px; background: var(--red); }
.section-index span { color: #657078; }
.about-section { background: var(--paper); }
.about-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 5vw; padding: 75px 6vw 88px 11vw; align-items: center; }
.about-text-col { display: flex; flex-direction: column; justify-content: center; }
.eyebrow { color: var(--red); margin-bottom: 21px; }
h2 { font-size: clamp(60px, 8vw, 126px); line-height: .82; }
.about-title { position: relative; max-width: 650px; padding-left: clamp(22px, 2.4vw, 38px); font-size: clamp(54px, 6.6vw, 104px); line-height: .88; letter-spacing: -.04em; }
.about-title::before { content: ''; position: absolute; top: .04em; bottom: .02em; left: 0; width: 4px; background: var(--red); }
.about-title em { display: inline-block; margin-left: .24em; font-size: .86em; letter-spacing: -.035em; }
.section-title,
.about-title.section-title { font-size: clamp(35px, 4.24vw, 69px); }
.about-body { padding-top: 30px; max-width: 460px; }
.about-visual { position: relative; width: 100%; max-width: 680px; justify-self: end; overflow: hidden; background: var(--navy); }
.about-visual::before { content: ''; position: absolute; inset: 18px; z-index: 2; border: 1px solid rgba(242,240,233,.3); pointer-events: none; }
.about-visual::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(30,42,54,.34), transparent 38%), linear-gradient(0deg, rgba(30,42,54,.48), transparent 42%); }
.about-visual img { width: 100%; height: auto; display: block; filter: saturate(.82) contrast(1.06); }
.about-body p:not(.lead-copy) { font-size: 14px; color: #58636a; line-height: 1.8; margin: 22px 0 30px; }
.lead-copy { font-family: var(--display); text-transform: uppercase; font-size: clamp(24px, 2.6vw, 38px); line-height: .98; color: var(--navy); }
.about-facts { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 0 8vw 0 11vw; }
.fact { display: flex; gap: 12px; padding: 24px 24px 24px 0; border-right: 1px solid var(--line); }
.fact:last-child { border-right: none; }
.fact strong { font-family: var(--display); font-size: 53px; line-height: .85; color: var(--red); font-weight: 600; }
.fact span { font-family: var(--mono); text-transform: uppercase; font-size: 9px; line-height: 1.4; color: #627078; }

.framed-photo { position: relative; overflow: hidden; background: var(--navy); }
.framed-photo::before { content: ''; position: absolute; inset: 18px; z-index: 2; border: 1px solid rgba(242,240,233,.26); pointer-events: none; background: linear-gradient(90deg, transparent, rgba(242,240,233,.2), transparent) 0 67% / 100% 1px no-repeat, linear-gradient(0deg, transparent, rgba(242,240,233,.16), transparent) 82% 0 / 1px 100% no-repeat; }
.framed-photo::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(30,42,54,.52), transparent 38%), linear-gradient(0deg, rgba(30,42,54,.38), transparent 38%); }
.framed-photo img { width: 100%; height: 100%; display: block; object-fit: cover; filter: saturate(.8) contrast(1.06); }

.credentials-section { background: var(--navy); color: var(--paper); }
.light-index span { color: #9da9ad; }
.credentials-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: 10vw; padding: 77px 8vw 74px 11vw; }
.eyebrow-light { color: #d7a7a1; }
.credentials-copy h2 { color: var(--paper); }
.credentials-copy .section-title em { display: inline-block; margin-top: .14em; }
.credentials-copy > p:last-child { color: #aeb7b8; font-size: 14px; line-height: 1.7; max-width: 300px; margin-top: 30px; }
.credential-list { border-top: 1px solid rgba(242,240,233,.25); }
.credential-row { min-height: 83px; display: grid; grid-template-columns: 45px 1fr 22px; align-items: center; gap: 14px; border-bottom: 1px solid rgba(242,240,233,.25); }
.credential-no { color: var(--red); font-family: var(--mono); font-size: 10px; }
.credential-row strong { display: block; font-family: var(--display); font-size: 22px; text-transform: uppercase; font-weight: 500; }
.credential-row small { color: #9da9ad; display: block; font-size: 10px; margin-top: 4px; }
.credential-row svg { color: var(--red); }
.credential-footnote { display: flex; align-items: center; gap: 11px; color: #aeb7b8; font-family: var(--mono); font-size: 9px; letter-spacing: .04em; padding-left: 11vw; }
.credential-footnote svg { color: var(--red); }

.offer-section { background: var(--paper); }
.offer-topline { display: grid; grid-template-columns: 1fr .7fr; gap: 10vw; align-items: end; padding: 77px 8vw 64px 11vw; }
.offer-topline .section-title em { display: inline-block; margin-top: .14em; }
.offer-deck { color: #58636a; font-size: 14px; line-height: 1.8; padding-bottom: 8px; max-width: 340px; }
.offer-layout { display: grid; grid-template-columns: .78fr 1.22fr; gap: clamp(35px, 6vw, 90px); padding: 0 8vw 0 11vw; align-items: stretch; }
.offer-photo { height: auto; min-height: 0; }
.offer-photo img { object-position: center 54%; }
.offer-photo::after { background: linear-gradient(180deg, rgba(30,42,54,.48), transparent 38%), linear-gradient(0deg, rgba(30,42,54,.42), transparent 38%); }
.offer-list { margin-left: 0; border-top: 1px solid var(--ink); }
.offer-item { display: grid; grid-template-columns: 72px 1fr 35px; align-items: center; gap: 22px; min-height: 118px; padding: 20px 0; border-bottom: 1px solid var(--line); transition: padding .3s ease, background .3s ease; }
.offer-item:hover { padding-left: 17px; background: var(--sand); }
.offer-number { font-family: var(--mono); font-size: 11px; color: var(--red); align-self: start; padding-top: 8px; }
.offer-item h3 { font-family: var(--display); font-weight: 600; text-transform: uppercase; font-size: clamp(25px, 3vw, 42px); line-height: 1; letter-spacing: -.015em; }
.offer-item p { font-size: 12px; color: #647078; line-height: 1.6; max-width: 490px; margin-top: 13px; }
.offer-arrow { color: var(--red); transition: transform .25s ease; }
.offer-item:hover .offer-arrow { transform: translate(4px, -4px); }


.contact-section { background: var(--sand); }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12vw; padding: 77px 8vw 0 11vw; }
.contact-copy .section-title em { display: inline-block; margin-top: .14em; }
.contact-copy > p:not(.eyebrow) { color: #5c676c; font-size: 14px; line-height: 1.75; max-width: 390px; margin-top: 30px; }
.contact-details { display: flex; flex-direction: column; gap: 14px; margin-top: 34px; }
.contact-details a { color: var(--ink); display: flex; align-items: center; gap: 11px; font-size: 13px; text-decoration: none; font-weight: 700; }
.contact-details a svg { color: var(--red); }
.contact-form { border-top: 1px solid var(--ink); padding-top: 20px; }
.contact-form label { display: block; margin-bottom: 22px; }
.date-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.contact-form label span { display: block; font-family: var(--mono); text-transform: uppercase; color: #68747a; font-size: 9px; letter-spacing: .12em; margin-bottom: 8px; }
.contact-form input, .contact-form textarea { width: 100%; background: transparent; color: var(--ink); border: 0; border-bottom: 1px solid rgba(32,42,52,.35); padding: 7px 0 11px; outline: none; border-radius: 0; resize: vertical; font-size: 14px; }
.contact-form input[type='date'] { color-scheme: light; cursor: pointer; }
.date-picker-trigger { width: 100%; min-height: 39px; padding: 7px 0 10px; border: 0; border-bottom: 1px solid rgba(32,42,52,.35); background: transparent; color: var(--ink); display: flex; align-items: center; justify-content: space-between; text-align: left; }
.contact-form .date-picker-trigger > span { display: inline; margin: 0; color: var(--ink); font-family: var(--body); font-size: 14px; letter-spacing: 0; text-transform: none; }
.contact-form .date-picker-trigger > span.date-placeholder { color: #929795; }
.date-picker-trigger svg { color: var(--red); flex: 0 0 auto; }
.date-calendar-popover { z-index: 80; width: auto; padding: 8px; border: 1px solid var(--line); border-radius: 0; background: #ffffff; color: var(--ink); }
.date-error { margin: -10px 0 18px; color: var(--red); font-size: 12px; }
.contact-form input:focus, .contact-form textarea:focus { border-color: var(--red); }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: #929795; }
.form-submit { margin-top: 7px; }
.form-note { display: block; color: #7a8586; font-family: var(--mono); font-size: 9px; margin-top: 16px; }
.form-success { min-height: 380px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.success-icon { background: var(--red); color: var(--paper); display: grid; place-items: center; height: 48px; width: 48px; margin-bottom: 20px; }
.form-success h3 { font-family: var(--display); text-transform: uppercase; font-size: 42px; line-height: .9; }
.form-success p { color: #647078; font-size: 13px; line-height: 1.6; margin: 15px 0 26px; max-width: 280px; }

.site-footer { background: var(--navy); color: var(--paper); padding: 52px 8.5vw 25px; }
.footer-top { display: flex; align-items: center; justify-content: flex-end; padding-bottom: 32px; border-bottom: 1px solid rgba(242,240,233,.24); }
.footer-top button { display: flex; gap: 8px; align-items: center; color: var(--paper); font-family: var(--mono); font-size: 9px; text-transform: uppercase; border: 0; background: transparent; }
.footer-top button svg { color: var(--red); }
.footer-bottom { display: flex; justify-content: flex-start; padding-top: 20px; color: #89979a; font-family: var(--mono); text-transform: uppercase; font-size: 8px; letter-spacing: .08em; }

[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .75s ease, transform .75s ease; }
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }
@keyframes slowPush { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

@media (max-width: 1024px) {
  .hero-grid { min-height: auto; grid-template-columns: 1fr; align-items: start; }
  .hero-copy { padding: 64px 8.5vw 54px; min-height: auto; }
  .hero-visual { min-height: 0; width: 100%; margin-left: 0; aspect-ratio: 4 / 3; }
  .hero-visual::after { background: linear-gradient(0deg, rgba(30,42,54,.24), transparent 35%); }
  .hero-visual::before { inset: 14px; border-left: 1px solid rgba(242,240,233,.22); }
  .hero-visual img { -webkit-mask-image: none; mask-image: none; }
}

@media (max-width: 800px) {
  .site-header { height: 82px; padding: 0 5.5vw; }
  .brand-lockup { font-size: clamp(38px, 11vw, 48px); }
  .menu-toggle { display: block; }
  .main-nav { position: absolute; top: 82px; left: 0; right: 0; padding: 18px 5.5vw 25px; background: #ffffff; border-bottom: 1px solid var(--line); display: none; flex-direction: column; align-items: flex-start; gap: 7px; }
  .main-nav.is-open { display: flex; animation: menuIn .25s ease both; }
  .main-nav button { font-size: 12px; padding: 11px 0; }
  .language-switch { margin: 8px 0 2px; }
  .language-switch button { padding: 8px 9px !important; }
  .nav-call { margin-top: 8px; padding: 12px 14px !important; }
  .hero { display: block; min-height: auto; padding-top: 82px; }
  h1 { font-size: clamp(75px, 23vw, 140px); }
  .scroll-cue { display: none; }
  
  .section-pad { padding: clamp(60px, 12vw, 100px) 0; scroll-margin-top: 60px; }
  .section-index { padding: 0 8.5vw; }
  
  .about-grid { grid-template-columns: 1fr; gap: 40px; padding: 50px 8.5vw; }
  .about-visual { width: calc(100% + 17vw); max-width: none; margin-left: -8.5vw; justify-self: stretch; }
  .about-visual::before { inset: 14px; }
  .about-facts { grid-template-columns: 1fr; margin: 0 8.5vw; }
  .fact { border-right: none; border-bottom: 1px solid var(--line); padding: 20px 0; }
  .fact:last-child { border-bottom: none; }

  .framed-photo::before { inset: 14px; }
  .credentials-grid { grid-template-columns: 1fr; gap: 40px; padding: 50px 8.5vw; }
  .credential-row { grid-template-columns: 29px 1fr 18px; gap: 8px; }
  .credential-row strong { font-size: 18px; }
  .credential-row small { line-height: 1.35; }
  .credential-footnote { padding-left: 8.5vw; padding-right: 8.5vw; }

  .offer-topline { grid-template-columns: 1fr; gap: 20px; padding: 50px 8.5vw 40px; }
  .offer-layout { grid-template-columns: 1fr; gap: 38px; padding: 0 8.5vw; }
  .offer-photo { height: auto; aspect-ratio: 4 / 5; }
  .offer-item { grid-template-columns: 36px 1fr 25px; gap: 9px; min-height: 108px; }
  .offer-item h3 { font-size: clamp(25px, 8vw, 31px); line-height: 1.02; }
  
  .contact-grid { grid-template-columns: 1fr; gap: 50px; padding: 50px 8.5vw 0; }
  .date-fields { grid-template-columns: 1fr; gap: 0; }
  .form-success { min-height: 290px; }
  .footer-top { justify-content: flex-end; }
  .footer-bottom { flex-direction: column; gap: 10px; }
}
@keyframes menuIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}